feat(marimekko): add support for legends

plouc · Nov 16, 2020 · f39f12a · f39f12a
1 parent 8560b6a
commit f39f12a
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 7 deletions.
diff --git a/packages/marimekko/package.json b/packages/marimekko/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "@nivo/axes": "0.64.0",
     "@nivo/colors": "0.64.0",
+    "@nivo/legends": "0.64.0",
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
     "lodash": "^4.17.11",

diff --git a/packages/marimekko/src/Marimekko.tsx b/packages/marimekko/src/Marimekko.tsx
@@ -8,9 +8,10 @@ import {
 } from '@nivo/core'
 import { Grid, Axes } from '@nivo/axes'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
+import { BoxLegendSvg } from '@nivo/legends'
 import { SvgProps, LayerId, DimensionDatum } from './types'
 import { defaultProps } from './props'
-import { useMarimekko, useLayerContext } from './hooks'
+import { useMarimekko, useLayerContext, useLegendData } from './hooks'
 import { Bars } from './Bars'
 import { BarTooltip } from './BarTooltip'
 
@@ -49,6 +50,7 @@ const InnerMarimekko = <RawDatum,>({
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
+    legends = [],
     role,
 }: SvgProps<RawDatum>) => {
     const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions(
@@ -57,7 +59,9 @@ const InnerMarimekko = <RawDatum,>({
         partialMargin
     )
 
-    const { computedData, bars, thicknessScale, dimensionsScale } = useMarimekko<RawDatum>({
+    const { computedData, bars, thicknessScale, dimensionsScale, dimensionIds } = useMarimekko<
+        RawDatum
+    >({
         data,
         id,
         value,
@@ -131,6 +135,24 @@ const InnerMarimekko = <RawDatum,>({
         )
     }
 
+    const legendData = useLegendData<RawDatum>(dimensionIds, bars)
+
+    if (layers.includes('legends')) {
+        layerById.legends = (
+            <g key="legends">
+                {legends.map((legend, i) => (
+                    <BoxLegendSvg
+                        key={i}
+                        {...legend}
+                        containerWidth={innerWidth}
+                        containerHeight={innerHeight}
+                        data={legendData}
+                    />
+                ))}
+            </g>
+        )
+    }
+
     const layerContext = useLayerContext<RawDatum>({
         data: computedData,
         bars,

diff --git a/packages/marimekko/src/hooks.ts b/packages/marimekko/src/hooks.ts
@@ -360,6 +360,7 @@ export const useMarimekko = <RawDatum>({
         bars,
         thicknessScale,
         dimensionsScale,
+        dimensionIds,
     }
 }
 
@@ -383,3 +384,26 @@ export const useLayerContext = <RawDatum>({
         }),
         [data, bars, thicknessScale, dimensionsScale]
     )
+
+export const useLegendData = <RawDatum>(dimensionIds: string[], bars: BarDatum<RawDatum>[]) => {
+    const legendData: {
+        id: string
+        label: string
+        color: string
+        fill?: string
+    }[] = []
+
+    dimensionIds.forEach(dimensionId => {
+        const bar = bars.find(bar => bar.id === dimensionId)
+        if (bar) {
+            legendData.push({
+                id: dimensionId,
+                label: dimensionId,
+                color: bar.color,
+                fill: bar.fill,
+            })
+        }
+    })
+
+    return legendData
+}
diff --git a/website/src/pages/marimekko/index.js b/website/src/pages/marimekko/index.js
@@ -88,7 +88,7 @@ const initialProperties = {
     margin: {
         top: 40,
         right: 80,
-        bottom: 80,
+        bottom: 100,
         left: 80,
     },
 
@@ -119,15 +119,15 @@ const initialProperties = {
             direction: 'row',
             justify: false,
             translateX: 0,
-            translateY: 56,
+            translateY: 80,
             itemsSpacing: 0,
-            itemWidth: 100,
+            itemWidth: 140,
             itemHeight: 18,
             itemTextColor: '#999',
-            itemDirection: 'left-to-right',
+            itemDirection: 'right-to-left',
             itemOpacity: 1,
             symbolSize: 18,
-            symbolShape: 'circle',
+            symbolShape: 'square',
             effects: [
                 {
                     on: 'hover',