feat(marimekko): add bar groups position and dimensions to layers con…

…text
plouc · Nov 16, 2020 · 8ba4c01 · 8ba4c01
1 parent d75a395
commit 8ba4c01
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/packages/marimekko/src/hooks.ts b/packages/marimekko/src/hooks.ts
@@ -184,10 +184,14 @@ export const useComputedData = <RawDatum>({
             ...datum,
             x: layout === 'vertical' ? position : 0,
             y: layout === 'vertical' ? 0 : position,
-            thickness,
+            width: layout === 'vertical' ? thickness : 0,
+            height: layout === 'vertical' ? 0 : thickness,
             dimensions: [],
         }
 
+        const allPositions: number[] = []
+        let totalSize = 0
+
         position += thickness + innerPadding
 
         dimensionIds.forEach(dimensionId => {
@@ -211,19 +215,32 @@ export const useComputedData = <RawDatum>({
                 if (layout === 'vertical') {
                     dimensionDatum.x = computedDatum.x
                     dimensionDatum.y = Math.min(position0, position1)
-                    dimensionDatum.width = computedDatum.thickness
+                    dimensionDatum.width = computedDatum.width
                     dimensionDatum.height = Math.max(position0, position1) - dimensionDatum.y
+
+                    allPositions.push(dimensionDatum.y)
+                    totalSize += dimensionDatum.height
                 } else {
                     dimensionDatum.x = Math.min(position0, position1)
                     dimensionDatum.y = computedDatum.y
                     dimensionDatum.width = Math.max(position0, position1) - dimensionDatum.x
-                    dimensionDatum.height = computedDatum.thickness
+                    dimensionDatum.height = computedDatum.height
+
+                    allPositions.push(dimensionDatum.y)
+                    totalSize += dimensionDatum.width
                 }
 
                 dimensionDatum.color = getColor(dimensionDatum)
 
                 computedDatum.dimensions.push(dimensionDatum)
             }
+
+            if (layout === 'vertical') {
+                computedDatum.height = totalSize
+                computedDatum.y = Math.min(...allPositions)
+            } else {
+                computedDatum.width = totalSize
+            }
         })
 
         computedData.push(computedDatum)

diff --git a/packages/marimekko/src/types.ts b/packages/marimekko/src/types.ts
@@ -49,7 +49,8 @@ export interface DimensionDatum<RawDatum> {
 export interface ComputedDatum<RawDatum> extends NormalizedDatum<RawDatum> {
     x: number
     y: number
-    thickness: number
+    width: number
+    height: number
     dimensions: DimensionDatum<RawDatum>[]
 }
 

diff --git a/packages/marimekko/stories/marimekko.stories.tsx b/packages/marimekko/stories/marimekko.stories.tsx
@@ -124,7 +124,7 @@ stories.add('diverging', () => {
         <Marimekko
             {...commonProps}
             data={data}
-            layout="vertical"
+            layout="horizontal"
             offset="diverging"
             axisLeft={{
                 format: (v: number) => Math.abs(v),

diff --git a/website/src/pages/marimekko/index.js b/website/src/pages/marimekko/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { ResponsiveMarimekko, defaultProps } from '@nivo/marimekko'
 import { random, omit } from 'lodash'
 import ComponentTemplate from '../../components/components/ComponentTemplate'
@@ -94,7 +94,7 @@ const initialProperties = {
 
     valueFormat: { format: '', enabled: false },
 
-    colors: ['#ac402f', '#F47560', '#97E3D5', '#58b0a0'],
+    colors: { scheme: 'spectral' },
 
     borderWidth: 1,
     borderColor: {
@@ -168,15 +168,6 @@ const Marimekko = () => {
                     })
                 }
 
-                const handleLegendClick = legendItem => {
-                    logAction({
-                        type: 'click',
-                        label: `[legend] ${legendItem.label}: ${legendItem.formattedValue}`,
-                        color: legendItem.color,
-                        data: legendItem,
-                    })
-                }
-
                 return (
                     <ResponsiveMarimekko
                         data={data}
@@ -185,7 +176,6 @@ const Marimekko = () => {
                         onClick={handleClick}
                         legends={properties.legends.map(legend => ({
                             ...legend,
-                            onClick: handleLegendClick,
                         }))}
                     />
                 )