feat(bar): add the ability to round index scale (#1282)

* Rebase * Fix lint * Refactor from `nice` to `indexScale: {round}` per comments * Add unit tests * Add TypeScript defs * Add `indexedScale` to website * Rebase; update tests to match style * Address comments * Tiny typo fix * Pick up more comments * Correct website default values
plouc · Nov 18, 2020 · 1ab1257 · 1ab1257
1 parent 484235f
commit 1ab1257
Show file tree

Hide file tree

Showing 15 changed files with 125 additions and 12 deletions.
diff --git a/packages/bar/index.d.ts b/packages/bar/index.d.ts
@@ -18,7 +18,7 @@ import {
 import { AxisProps, GridValues } from '@nivo/axes'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
-import { Scale } from '@nivo/scales'
+import { Scale, BandScale } from '@nivo/scales'
 
 declare module '@nivo/bar' {
     export type Value = string | number
@@ -99,6 +99,7 @@ declare module '@nivo/bar' {
         padding: number
 
         valueScale: Scale
+        indexScale: BandScale
 
         axisBottom: AxisProps | null
         axisLeft: AxisProps | null

diff --git a/packages/bar/src/Bar.js b/packages/bar/src/Bar.js
@@ -58,6 +58,7 @@ const Bar = props => {
         maxValue,
 
         valueScale,
+        indexScale,
 
         margin,
         width,
@@ -128,6 +129,7 @@ const Bar = props => {
         padding,
         innerPadding,
         valueScale,
+        indexScale,
     })
 
     const motionProps = {

diff --git a/packages/bar/src/BarCanvas.js b/packages/bar/src/BarCanvas.js
@@ -56,6 +56,7 @@ class BarCanvas extends Component {
             maxValue,
 
             valueScale,
+            indexScale,
 
             width,
             height,
@@ -107,6 +108,7 @@ class BarCanvas extends Component {
             padding,
             innerPadding,
             valueScale,
+            indexScale,
         }
 
         const result =

diff --git a/packages/bar/src/compute/common.js b/packages/bar/src/compute/common.js
@@ -15,10 +15,16 @@ import { scaleBand } from 'd3-scale'
  * @param {Function}       getIndex
  * @param {Array.<number>} range
  * @param {number}         padding
+ * @Param {scalePropType}  indexScale
  * @returns {Function}
  */
-export const getIndexedScale = (data, getIndex, range, padding) =>
-    scaleBand().rangeRound(range).domain(data.map(getIndex)).padding(padding)
+export const getIndexScale = (data, getIndex, range, padding, indexScale) => {
+    return scaleBand()
+        .domain(data.map(getIndex))
+        .range(range)
+        .round(Boolean(indexScale.round))
+        .padding(padding)
+}
 
 export const normalizeData = (data, keys) =>
     data.map(item => ({

diff --git a/packages/bar/src/compute/grouped.js b/packages/bar/src/compute/grouped.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { computeScale } from '@nivo/scales'
-import { getIndexedScale, filterNullValues, normalizeData } from './common'
+import { getIndexScale, filterNullValues, normalizeData } from './common'
 
 const gt = (value, other) => value > other
 const lt = (value, other) => value < other
@@ -146,11 +146,12 @@ export const generateGroupedBars = ({
     padding = 0,
     innerPadding = 0,
     valueScale,
+    indexScale: indexScaleConfig,
     ...props
 }) => {
     const data = normalizeData(props.data, keys)
     const [axis, range] = layout === 'vertical' ? ['y', [0, width]] : ['x', [height, 0]]
-    const indexedScale = getIndexedScale(data, props.getIndex, range, padding)
+    const indexScale = getIndexScale(data, props.getIndex, range, padding, indexScaleConfig)
 
     const scaleSpec = {
         axis,
@@ -169,9 +170,9 @@ export const generateGroupedBars = ({
 
     const scale = computeScale(scaleSpec, { [axis]: { min, max } }, width, height)
 
-    const [xScale, yScale] = layout === 'vertical' ? [indexedScale, scale] : [scale, indexedScale]
+    const [xScale, yScale] = layout === 'vertical' ? [indexScale, scale] : [scale, indexScale]
 
-    const bandwidth = (indexedScale.bandwidth() - innerPadding * (keys.length - 1)) / keys.length
+    const bandwidth = (indexScale.bandwidth() - innerPadding * (keys.length - 1)) / keys.length
     const params = [
         { ...props, data, keys, innerPadding, xScale, yScale },
         bandwidth,

diff --git a/packages/bar/src/compute/stacked.js b/packages/bar/src/compute/stacked.js
@@ -9,7 +9,7 @@
 // import flattenDepth from 'lodash/flattenDepth'
 import { computeScale } from '@nivo/scales'
 import { stack, stackOffsetDiverging } from 'd3-shape'
-import { getIndexedScale, filterNullValues, normalizeData } from './common'
+import { getIndexScale, filterNullValues, normalizeData } from './common'
 
 const flattenDeep = (array, depth = 1) =>
     depth > 0
@@ -149,12 +149,13 @@ export const generateStackedBars = ({
     height,
     padding = 0,
     valueScale,
+    indexScale: indexScaleConfig,
     ...props
 }) => {
     const stackedData = stack().keys(keys).offset(stackOffsetDiverging)(normalizeData(data, keys))
 
     const [axis, range] = layout === 'vertical' ? ['y', [0, width]] : ['x', [height, 0]]
-    const indexedScale = getIndexedScale(data, props.getIndex, range, padding)
+    const indexScale = getIndexScale(data, props.getIndex, range, padding, indexScaleConfig)
 
     const scaleSpec = {
         axis,
@@ -170,10 +171,10 @@ export const generateStackedBars = ({
 
     const scale = computeScale(scaleSpec, { [axis]: { min, max } }, width, height)
 
-    const [xScale, yScale] = layout === 'vertical' ? [indexedScale, scale] : [scale, indexedScale]
+    const [xScale, yScale] = layout === 'vertical' ? [indexScale, scale] : [scale, indexScale]
 
     const innerPadding = props.innerPadding > 0 ? props.innerPadding : 0
-    const bandwidth = indexedScale.bandwidth()
+    const bandwidth = indexScale.bandwidth()
     const params = [
         { ...props, innerPadding, stackedData, xScale, yScale },
         bandwidth,

diff --git a/packages/bar/src/props.js b/packages/bar/src/props.js
@@ -15,7 +15,7 @@ import {
 } from '@nivo/colors'
 import { axisPropType } from '@nivo/axes'
 import { LegendPropShape } from '@nivo/legends'
-import { scalePropType } from '@nivo/scales'
+import { scalePropType, bandScalePropTypes } from '@nivo/scales'
 import BarItem from './BarItem'
 
 export const BarPropTypes = {
@@ -34,6 +34,8 @@ export const BarPropTypes = {
     layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
     reverse: PropTypes.bool.isRequired,
     valueScale: scalePropType.isRequired,
+    indexScale: bandScalePropTypes.isRequired,
+
     minValue: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]).isRequired,
     maxValue: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]).isRequired,
     padding: PropTypes.number.isRequired,
@@ -113,6 +115,7 @@ export const BarDefaultProps = {
     maxValue: 'auto',
 
     valueScale: { type: 'linear' },
+    indexScale: { type: 'band', round: true },
 
     padding: 0.1,
     innerPadding: 0,

diff --git a/packages/bar/tests/Bar.test.js b/packages/bar/tests/Bar.test.js
@@ -350,3 +350,42 @@ it(`should generate stacked bars correctly when keys are mismatched`, () => {
     expect(bars.at(2).prop('height')).toEqual(69)
     expect(bars.at(2).prop('width')).toEqual(214)
 })
+
+it(`should apply scale rounding by default`, () => {
+    const wrapper = mount(
+        <Bar
+            width={500}
+            height={300}
+            data={[
+                { id: 'one', value: 10 },
+                { id: 'two', value: 20 },
+                { id: 'three', value: 30 },
+            ]}
+            animate={false}
+        />
+    )
+
+    const bars = wrapper.find('BarItem')
+    const firstBarWidth = bars.at(0).prop('width')
+    expect(firstBarWidth).toEqual(Math.floor(firstBarWidth))
+})
+
+it(`should not apply scale rounding when passed indexScale.round: false`, () => {
+    const wrapper = mount(
+        <Bar
+            width={500}
+            height={300}
+            data={[
+                { id: 'one', value: 10 },
+                { id: 'two', value: 20 },
+                { id: 'three', value: 30 },
+            ]}
+            animate={false}
+            indexScale={{ type: 'band', round: false }}
+        />
+    )
+
+    const bars = wrapper.find('BarItem')
+    const firstBarWidth = bars.at(0).prop('width')
+    expect(firstBarWidth).not.toEqual(Math.floor(firstBarWidth))
+})
diff --git a/packages/scales/index.d.ts b/packages/scales/index.d.ts
@@ -50,13 +50,19 @@ declare module '@nivo/scales' {
         max?: 'auto' | number
     }
 
+    export interface BandScale {
+        type: 'band'
+        round?: boolean
+    }
+
     export type Scale =
         | LinearScale
         | PointScale
         | TimeScale
         | TimeScaleFormatted
         | LogScale
         | SymlogScale
+        | BandScale
 
     export type ScaleFunc = (value: string | number | Date) => number
 }
diff --git a/packages/scales/src/bandScale.js b/packages/scales/src/bandScale.js
@@ -0,0 +1,14 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import PropTypes from 'prop-types'
+
+export const bandScalePropTypes = {
+    type: PropTypes.oneOf(['band']).isRequired,
+    round: PropTypes.bool,
+}
diff --git a/packages/scales/src/index.js b/packages/scales/src/index.js
@@ -12,18 +12,22 @@ import { logScalePropTypes } from './logScale'
 import { symLogScalePropTypes } from './symlogScale'
 import { pointScalePropTypes } from './pointScale'
 import { timeScalePropTypes } from './timeScale'
+import { bandScalePropTypes } from './bandScale'
 
 export * from './compute'
 export * from './linearScale'
 export * from './logScale'
+export * from './symlogScale'
 export * from './pointScale'
 export * from './timeScale'
 export * from './timeHelpers'
+export * from './bandScale'
 
 export const scalePropType = PropTypes.oneOfType([
     PropTypes.shape(linearScalePropTypes),
     PropTypes.shape(pointScalePropTypes),
     PropTypes.shape(timeScalePropTypes),
     PropTypes.shape(logScalePropTypes),
     PropTypes.shape(symLogScalePropTypes),
+    PropTypes.shape(bandScalePropTypes),
 ])
diff --git a/website/src/data/components/bar/props.js b/website/src/data/components/bar/props.js
@@ -102,6 +102,37 @@ const props = [
             ],
         },
     },
+    {
+        key: 'indexScale',
+        type: 'object',
+        group: 'Base',
+        help: `index scale configuration.`,
+        defaultValue: defaults.indexScale,
+        controlType: 'object',
+        controlOptions: {
+            props: [
+                {
+                    key: 'type',
+                    help: `Scale type.`,
+                    type: 'string',
+                    controlType: 'choices',
+                    controlOptions: {
+                        disabled: true,
+                        choices: ['band'].map(v => ({
+                            label: v,
+                            value: v,
+                        })),
+                    },
+                },
+                {
+                    key: 'round',
+                    help: 'Toggle index scale (for bar width) rounding.',
+                    type: 'boolean',
+                    controlType: 'switch',
+                },
+            ],
+        },
+    },
     {
         key: 'reverse',
         help:

diff --git a/website/src/pages/bar/api.js b/website/src/pages/bar/api.js
@@ -60,6 +60,7 @@ const BarApi = () => {
                     reverse: false,
 
                     valueScale: { type: 'linear' },
+                    indexScale: { type: 'band', round: true },
 
                     axisTop: {
                         enable: false,

diff --git a/website/src/pages/bar/canvas.js b/website/src/pages/bar/canvas.js
@@ -41,6 +41,7 @@ const initialProperties = {
     reverse: false,
 
     valueScale: { type: 'linear' },
+    indexScale: { type: 'band', round: true },
 
     colors: { scheme: 'red_blue' },
     colorBy: 'id',

diff --git a/website/src/pages/bar/index.js b/website/src/pages/bar/index.js
@@ -39,6 +39,7 @@ const initialProperties = {
     reverse: false,
 
     valueScale: { type: 'linear' },
+    indexScale: { type: 'band', round: true },
 
     colors: { scheme: 'nivo' },
     colorBy: 'id',