feat(marimekko): add the ability to configure the stack offset

plouc · Nov 16, 2020 · a8437cc · a8437cc
1 parent 6b6aa94
commit a8437cc
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 7 deletions.
diff --git a/packages/marimekko/src/Marimekko.tsx b/packages/marimekko/src/Marimekko.tsx
@@ -15,6 +15,7 @@ const InnerMarimekko = <RawDatum,>({
     height,
     margin: partialMargin,
     layout = defaultProps.layout,
+    offset = defaultProps.offset,
     layers = defaultProps.layers,
     colors = defaultProps.colors as OrdinalColorScaleConfig<
         Omit<DimensionDatum<RawDatum>, 'color'>
@@ -40,6 +41,7 @@ const InnerMarimekko = <RawDatum,>({
         value,
         dimensions,
         layout,
+        offset,
         colors,
         borderColor,
         borderWidth,

diff --git a/packages/marimekko/src/hooks.ts b/packages/marimekko/src/hooks.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { get } from 'lodash'
-import { stack as d3Stack, Stack, stackOffsetDiverging, Series } from 'd3-shape'
+import { stack as d3Stack, Stack, Series } from 'd3-shape'
 import { ScaleLinear, scaleLinear } from 'd3-scale'
 import { useTheme } from '@nivo/core'
 import { InheritedColorConfig, useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
@@ -14,6 +14,8 @@ import {
     CommonProps,
     CustomLayerProps,
     BarDatum,
+    OffsetId,
+    offsetById,
 } from './types'
 
 // d3 stack does not support defining `.keys()` using
@@ -37,14 +39,17 @@ export const useDataDimensions = <RawDatum>(rawDimensions: DataProps<RawDatum>['
 
 export const useStack = <RawDatum>(
     dimensionIds: string[],
-    dimensions: Record<string, (datum: RawDatum) => number>
+    dimensions: Record<string, (datum: RawDatum) => number>,
+    offset: OffsetId
 ) =>
     useMemo(() => {
+        const offsetFunction = offsetById[offset]
+
         return d3Stack<RawDatum>()
             .keys(dimensionIds)
             .value((datum, key) => dimensions[key](datum))
-            .offset(stackOffsetDiverging)
-    }, [dimensionIds, dimensions])
+            .offset(offsetFunction)
+    }, [dimensionIds, dimensions, offset])
 
 export const useStackedData = <RawDatum>(
     stack: Stack<any, RawDatum, string>,
@@ -246,6 +251,7 @@ export const useMarimekko = <RawDatum>({
     value,
     dimensions: rawDimensions,
     layout,
+    offset,
     colors,
     borderColor,
     borderWidth,
@@ -257,14 +263,15 @@ export const useMarimekko = <RawDatum>({
     value: DataProps<RawDatum>['value']
     dimensions: DataProps<RawDatum>['dimensions']
     layout: Layout
+    offset: OffsetId
     colors: CommonProps<RawDatum>['colors']
     borderColor: InheritedColorConfig<DimensionDatum<RawDatum>>
     borderWidth: number
     width: number
     height: number
 }) => {
     const { dimensionIds, dimensions } = useDataDimensions<RawDatum>(rawDimensions)
-    const stack = useStack<RawDatum>(dimensionIds, dimensions)
+    const stack = useStack<RawDatum>(dimensionIds, dimensions, offset)
     const { stacked, min, max } = useStackedData<RawDatum>(stack, data)
     const normalizedData = useNormalizedData<RawDatum>(data, id, value)
     const thicknessScale = useThicknessScale(normalizedData, width, height, layout)

diff --git a/packages/marimekko/stories/marimekko.stories.tsx b/packages/marimekko/stories/marimekko.stories.tsx
@@ -112,5 +112,5 @@ stories.add('diverging', () => {
         },
     ]
 
-    return <Marimekko {...commonProps} data={data} />
+    return <Marimekko {...commonProps} data={data} layout="horizontal" offset="diverging" />
 })
diff --git a/website/src/data/components/marimekko/meta.yml b/website/src/data/components/marimekko/meta.yml
@@ -17,6 +17,9 @@ Marimekko:
     but it allows you to use an extra dimension to compute the
     thickness of each bar.
 
+    It also shares some behavior of the `Stream` chart regarding
+    the way we can configure `offset` and `order`.
+
     The responsive alternative of this component is `ResponsiveMarimekko`.
 
     You can also see more example usages in

diff --git a/website/src/data/components/marimekko/props.js b/website/src/data/components/marimekko/props.js
@@ -1,4 +1,4 @@
-import { defaultProps as defaults } from '@nivo/marimekko'
+import { defaultProps as defaults, offsetById } from '@nivo/marimekko'
 import {
     themeProperty,
     defsProperties,
@@ -80,6 +80,21 @@ const props = [
             ],
         },
     },
+    {
+        key: 'offset',
+        help: 'Offset type.',
+        type: 'OffsetId',
+        required: false,
+        controlType: 'choices',
+        group: 'Base',
+        defaultValue: defaults.offset,
+        controlOptions: {
+            choices: Object.keys(offsetById).map(key => ({
+                label: key,
+                value: key,
+            })),
+        },
+    },
     {
         key: 'width',
         enableControlForFlavors: ['api'],

diff --git a/website/src/pages/marimekko/index.js b/website/src/pages/marimekko/index.js
@@ -35,6 +35,7 @@ const initialProperties = {
         },
     ],
     layout: defaultProps.layout,
+    offset: defaultProps.offset,
 
     margin: {
         top: 40,