fix(choropleth): add missing domain prop (#540)

* added domain prop to Choropleth and ChoroplethCanvas

* add new domain prop cholopleth for to website

* Removed default domain prop, updated website documentation

* added domain prop information next two other base props. also included initial property for Choropleth canvas example

* formatter and linter

packages/geo/src/Choropleth.js

@@ -31,6 +31,7 @@ const Choropleth = memo(
         projectionTranslation,
         projectionRotation,
         colors,
+        domain,
         unknownColor,
         borderWidth,
         borderColor,
@@ -64,6 +65,7 @@ const Choropleth = memo(
             valueFormat,
             colors,
             unknownColor,
+            domain,
         })
 
         const theme = useTheme()

packages/geo/src/ChoroplethCanvas.js

@@ -37,6 +37,7 @@ const ChoroplethCanvas = memo(
         projectionTranslation,
         projectionRotation,
         colors,
+        domain,
         unknownColor,
         borderWidth,
         borderColor,
@@ -73,6 +74,7 @@ const ChoroplethCanvas = memo(
             valueFormat,
             colors,
             unknownColor,
+            domain,
         })
 
         useEffect(() => {

packages/geo/src/hooks.js

@@ -100,6 +100,7 @@ export const useChoropleth = ({
     valueFormat,
     colors,
     unknownColor,
+    domain,
 }) => {
     const findMatchingDatum = useMemo(() => {
         if (isFunction(match)) return match
@@ -122,7 +123,7 @@ export const useChoropleth = ({
         return format(valueFormat)
     }, [valueFormat])
 
-    const colorScale = useMemo(() => guessQuantizeColorScale(colors).domain([0, 1000000]), [colors])
+    const colorScale = useMemo(() => guessQuantizeColorScale(colors).domain(domain), [colors])
     const getFillColor = useMemo(() => {
         return feature => {
             if (feature.value === undefined) return unknownColor

packages/geo/src/props.js

@@ -63,6 +63,7 @@ const commonChoroplethPropTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     valueFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     colors: quantizeColorScalePropType.isRequired,
+    domain: PropTypes.arrayOf(PropTypes.number).isRequired,
     unknownColor: PropTypes.string.isRequired,
     layers: PropTypes.arrayOf(
         PropTypes.oneOfType([PropTypes.oneOf(['graticule', 'features', 'legends']), PropTypes.func])

website/src/data/components/choropleth/props.js

@@ -56,6 +56,20 @@ const props = [
         `,
         defaultValue: ChoroplethDefaultProps.value,
     },
+    {
+        key: 'domain',
+        help: 'Defines uppper and lower bounds of color shading',
+        description: `
+            The Domain prop is a required two element array that
+            defines the minimum and maximum values for the color shading
+            of the Choropleth. The minimum and maximum provided should
+            roughly match, or be slightly outside of the minimum and
+            maximum values in your data.
+        `,
+        type: 'number[]',
+        required: true,
+        group: 'Base',
+    },
     {
         key: 'colors',
         help: 'Defines color range.',

website/src/pages/choropleth/canvas.js

@@ -31,6 +31,7 @@ const initialProperties = {
     },
 
     colors: 'RdBu',
+    domain: [0, 1000000],
     unknownColor: '#101b42',
 
     label: 'properties.name',

website/src/pages/choropleth/index.js

@@ -29,6 +29,7 @@ const initialProperties = {
     },
 
     colors: 'nivo',
+    domain: [0, 1000000],
     unknownColor: '#666666',
 
     label: 'properties.name',