fix(bar): get working with scales updates

plouc · Jun 22, 2021 · 48880b4 · 48880b4
1 parent cdd88ef
commit 48880b4
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 20 deletions.
diff --git a/packages/bar/index.d.ts b/packages/bar/index.d.ts
@@ -18,13 +18,13 @@ import {
 import { AxisProps, GridValues } from '@nivo/axes'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
-import { Scale, BandScale } from '@nivo/scales'
+import { ScaleSpec, ScaleBandSpec } from '@nivo/scales'
 
 declare module '@nivo/bar' {
     export type Value = string | number
 
     export interface Data {
-        data: object[]
+        data: Array<Record<string, unknown>>
     }
 
     export interface BarDatum {
@@ -99,8 +99,8 @@ declare module '@nivo/bar' {
         maxValue: number | 'auto'
         padding: number
 
-        valueScale: Scale
-        indexScale: BandScale
+        valueScale: ScaleSpec
+        indexScale: ScaleBandSpec
 
         axisBottom: AxisProps | null
         axisLeft: AxisProps | null

diff --git a/packages/bar/src/compute/common.js b/packages/bar/src/compute/common.js
@@ -6,24 +6,26 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { scaleBand } from 'd3-scale'
+import { computeScale } from '@nivo/scales'
 
 /**
  * Generates indexed scale.
  *
  * @param {Array.<Object>} data
  * @param {Function}       getIndex
- * @param {Array.<number>} range
  * @param {number}         padding
  * @Param {scalePropType}  indexScale
+ * @Param {number}         size
+ * @Param {'x' | 'y'}      axis
  * @returns {Function}
  */
-export const getIndexScale = (data, getIndex, range, padding, indexScale) => {
-    return scaleBand()
-        .domain(data.map(getIndex))
-        .range(range)
-        .round(Boolean(indexScale.round))
-        .padding(padding)
+export const getIndexScale = (data, getIndex, padding, indexScale, size, axis) => {
+    return computeScale(
+        indexScale,
+        { all: data.map(getIndex), min: 0, max: 0 },
+        size,
+        axis
+    ).padding(padding)
 }
 
 export const normalizeData = (data, keys) =>

diff --git a/packages/bar/src/compute/grouped.js b/packages/bar/src/compute/grouped.js
@@ -154,11 +154,17 @@ export const generateGroupedBars = ({
 }) => {
     const keys = props.keys.filter(key => !hiddenIds.includes(key))
     const data = normalizeData(props.data, keys)
-    const [axis, range] = layout === 'vertical' ? ['y', [0, width]] : ['x', [height, 0]]
-    const indexScale = getIndexScale(data, props.getIndex, range, padding, indexScaleConfig)
+    const [axis, otherAxis, size] = layout === 'vertical' ? ['y', 'x', width] : ['x', 'y', height]
+    const indexScale = getIndexScale(
+        data,
+        props.getIndex,
+        padding,
+        indexScaleConfig,
+        size,
+        otherAxis
+    )
 
     const scaleSpec = {
-        axis,
         max: maxValue,
         min: minValue,
         reverse,
@@ -172,7 +178,12 @@ export const generateGroupedBars = ({
     const min = clampMin(Math.min(...values))
     const max = zeroIfNotFinite(Math.max(...values))
 
-    const scale = computeScale(scaleSpec, { [axis]: { min, max } }, width, height)
+    const scale = computeScale(
+        scaleSpec,
+        { all: values, min, max },
+        axis === 'x' ? width : height,
+        axis
+    )
 
     const [xScale, yScale] = layout === 'vertical' ? [indexScale, scale] : [scale, indexScale]
 

diff --git a/packages/bar/src/compute/stacked.js b/packages/bar/src/compute/stacked.js
@@ -154,11 +154,17 @@ export const generateStackedBars = ({
     const keys = props.keys.filter(key => !hiddenIds.includes(key))
     const stackedData = stack().keys(keys).offset(stackOffsetDiverging)(normalizeData(data, keys))
 
-    const [axis, range] = layout === 'vertical' ? ['y', [0, width]] : ['x', [height, 0]]
-    const indexScale = getIndexScale(data, props.getIndex, range, padding, indexScaleConfig)
+    const [axis, otherAxis, size] = layout === 'vertical' ? ['y', 'x', width] : ['x', 'y', height]
+    const indexScale = getIndexScale(
+        data,
+        props.getIndex,
+        padding,
+        indexScaleConfig,
+        size,
+        otherAxis
+    )
 
     const scaleSpec = {
-        axis,
         max: maxValue,
         min: minValue,
         reverse,
@@ -169,7 +175,12 @@ export const generateStackedBars = ({
     const min = Math.min(...values)
     const max = Math.max(...values)
 
-    const scale = computeScale(scaleSpec, { [axis]: { min, max } }, width, height)
+    const scale = computeScale(
+        scaleSpec,
+        { all: values, min, max },
+        axis === 'x' ? width : height,
+        axis
+    )
 
     const [xScale, yScale] = layout === 'vertical' ? [indexScale, scale] : [scale, indexScale]