feat(waffle): add legend support for Waffle

plouc · Aug 25, 2018 · 6a5db0d · 6a5db0d
1 parent 8f44ab9
commit 6a5db0d
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 20 deletions.
diff --git a/packages/waffle/src/Waffle.js b/packages/waffle/src/Waffle.js
@@ -79,6 +79,7 @@ export class Waffle extends Component {
             cellSize,
             origin,
             computedData,
+            legendData,
 
             legends,
         } = this.props
@@ -87,12 +88,6 @@ export class Waffle extends Component {
             cell.color = emptyColor
         })
 
-        const legendData = computedData.map(datum => ({
-            id: datum.id,
-            label: datum.id,
-            fill: datum.fill,
-        }))
-
         return (
             <Container isInteractive={isInteractive} theme={theme}>
                 {({ showTooltip, hideTooltip }) => {

diff --git a/packages/waffle/src/enhance.js b/packages/waffle/src/enhance.js
@@ -54,6 +54,13 @@ const commonEnhancers = [
             }),
         }
     }),
+    withPropsOnChange(['computedData'], ({ computedData }) => ({
+        legendData: computedData.map(datum => ({
+            id: datum.id,
+            label: datum.id,
+            fill: datum.fill || datum.color,
+        })),
+    })),
 ]
 
 export default Component => {

diff --git a/website/src/components/charts/bar/Bar.js b/website/src/components/charts/bar/Bar.js
@@ -153,8 +153,8 @@ export default class Bar extends Component {
                     itemDirection: 'left-to-right',
                     itemOpacity: 0.85,
                     symbolSize: 20,
-                    onClick: d => {
-                        alert(JSON.stringify(d, null, '    '))
+                    onClick: data => {
+                        alert(JSON.stringify(data, null, '    '))
                     },
                     effects: [
                         {

diff --git a/website/src/components/charts/bar/props.js b/website/src/components/charts/bar/props.js
@@ -475,10 +475,5 @@ export default [
             },
         },
     },
-    /*——————————————————————————————————————————————————————————————————————————
-
-      Motion
-
-    ————————————————————————————————————————————————————————————————————————————*/
     ...motionProperties(['Bar'], defaults),
 ]
diff --git a/website/src/components/charts/waffle/Waffle.js b/website/src/components/charts/waffle/Waffle.js
@@ -58,11 +58,10 @@ export default class Waffle extends Component {
                 top: 10,
                 right: 10,
                 bottom: 10,
-                left: 10,
+                left: 120,
             },
 
             // styling
-            theme: nivoTheme,
             cellComponent: 'default',
             emptyColor: '#cccccc',
             emptyOpacity: 1,
@@ -83,6 +82,37 @@ export default class Waffle extends Component {
             isInteractive: true,
             'custom tooltip example': false,
             tooltip: null,
+
+            legends: [
+                {
+                    anchor: 'top-left',
+                    direction: 'column',
+                    justify: false,
+                    translateX: -100,
+                    translateY: 0,
+                    itemsSpacing: 4,
+                    itemWidth: 100,
+                    itemHeight: 20,
+                    itemDirection: 'left-to-right',
+                    itemOpacity: 1,
+                    itemTextColor: '#777',
+                    symbolSize: 20,
+                    onClick: data => {
+                        alert(JSON.stringify(data, null, '    '))
+                    },
+                    effects: [
+                        {
+                            on: 'hover',
+                            style: {
+                                itemTextColor: '#000',
+                                itemBackground: '#f7fafb',
+                            },
+                        },
+                    ],
+                },
+            ],
+
+            theme: nivoTheme,
         },
     }
 

diff --git a/website/src/components/charts/waffle/props.js b/website/src/components/charts/waffle/props.js
@@ -11,6 +11,7 @@ import {
     marginProperties,
     motionProperties,
     defsProperties,
+    getLegendsProps,
 } from '../../../lib/componentProperties'
 import { WaffleDefaultProps } from '@nivo/waffle'
 import dedent from 'dedent-js'
@@ -143,11 +144,6 @@ export default [
             max: 2,
         },
     },
-    /*——————————————————————————————————————————————————————————————————————————
-
-      Styling
-
-    ————————————————————————————————————————————————————————————————————————————*/
     {
         key: 'cellComponent',
         scopes: ['Waffle', 'WaffleHtml'],
@@ -310,5 +306,44 @@ export default [
             </div>
         ),
     },
+    {
+        key: 'legends',
+        scopes: ['Waffle'],
+        type: '{Array<object>}',
+        description: `Optional chart's legends.`,
+        controlGroup: 'Legends',
+        controlType: 'array',
+        controlOptions: {
+            props: getLegendsProps(),
+            shouldCreate: true,
+            addLabel: 'add legend',
+            shouldRemove: true,
+            defaults: {
+                anchor: 'left',
+                direction: 'column',
+                justify: false,
+                translateX: -100,
+                translateY: 0,
+                itemWidth: 100,
+                itemHeight: 20,
+                itemsSpacing: 4,
+                symbolSize: 20,
+                itemDirection: 'left-to-right',
+                itemTextColor: '#777',
+                onClick: data => {
+                    alert(JSON.stringify(data, null, '    '))
+                },
+                effects: [
+                    {
+                        on: 'hover',
+                        style: {
+                            itemTextColor: '#000',
+                            itemBackground: '#f7fafb',
+                        },
+                    },
+                ],
+            },
+        },
+    },
     ...motionProperties(['Waffle', 'WaffleHtml'], defaults),
 ]