feat(line): add support for legends on Line component

plouc · Dec 7, 2017 · b7cc244 · b7cc244
1 parent 6ef9dc2
commit b7cc244
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 4 deletions.
diff --git a/packages/nivo-line/package.json b/packages/nivo-line/package.json
@@ -7,6 +7,7 @@
   "jsnext:main": "es/index.js",
   "dependencies": {
     "@nivo/core": "0.32.0",
+    "@nivo/legends": "0.32.0",
     "d3-format": "^1.2.0",
     "d3-scale": "^1.0.6",
     "d3-shape": "^1.2.0",

diff --git a/packages/nivo-line/src/Line.js b/packages/nivo-line/src/Line.js
@@ -20,6 +20,7 @@ import { Container, SvgWrapper } from '@nivo/core'
 import { getScales, getStackedScales, generateLines, generateStackedLines } from './compute'
 import { CartesianMarkers } from '@nivo/core'
 import { Axes, Grid } from '@nivo/core'
+import { BoxLegendSvg } from '@nivo/legends'
 import LineAreas from './LineAreas'
 import LineLines from './LineLines'
 import LineSlices from './LineSlices'
@@ -82,6 +83,8 @@ const Line = ({
 
     // stackTooltip
     enableStackTooltip,
+
+    legends,
 }) => {
     const motionProps = {
         animate,
@@ -162,6 +165,22 @@ const Line = ({
                             {...motionProps}
                         />
                     )}
+                    {legends.map((legend, i) => {
+                        const legendData = lines.map(line => ({
+                            label: line.id,
+                            fill: line.color
+                        })).reverse()
+
+                        return (
+                            <BoxLegendSvg
+                                key={i}
+                                {...legend}
+                                containerWidth={width}
+                                containerHeight={height}
+                                data={legendData}
+                            />
+                        )
+                    })}
                 </SvgWrapper>
             )}
         </Container>

diff --git a/packages/nivo-line/src/props.js b/packages/nivo-line/src/props.js
@@ -8,6 +8,7 @@
  */
 import PropTypes from 'prop-types'
 import { lineCurvePropType } from '@nivo/core'
+import { LegendPropShape } from '@nivo/legends'
 
 export const LinePropTypes = {
     // data
@@ -79,6 +80,10 @@ export const LinePropTypes = {
     isInteractive: PropTypes.bool.isRequired,
     enableStackTooltip: PropTypes.bool.isRequired,
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+
+    legends: PropTypes.arrayOf(
+        PropTypes.shape(LegendPropShape)
+    ).isRequired,
 }
 
 export const LineDefaultProps = {
@@ -117,4 +122,6 @@ export const LineDefaultProps = {
     // interactivity
     isInteractive: true,
     enableStackTooltip: true,
+
+    legends: [],
 }
diff --git a/website/src/components/charts/line/Line.js b/website/src/components/charts/line/Line.js
@@ -10,7 +10,7 @@ import React, { Component } from 'react'
 import omit from 'lodash/omit'
 import { Link } from 'react-router-dom'
 import MediaQuery from 'react-responsive'
-import { ResponsiveLine } from '@nivo/line'
+import { ResponsiveLine, LineDefaultProps } from '@nivo/line'
 import ChartHeader from '../../ChartHeader'
 import ChartTabs from '../../ChartTabs'
 import LineControls from './LineControls'
@@ -24,7 +24,20 @@ import propsMapper from './propsMapper'
 
 export default class Line extends Component {
     state = {
-        settings: omit(defaultProps, ['width', 'height']),
+        settings: {
+            ...omit(defaultProps, ['width', 'height']),
+            legends: [
+                {
+                    anchor: 'bottom-right',
+                    direction: 'column',
+                    translateX: 100,
+                    itemWidth: 80,
+                    itemHeight: 20,
+                    symbolSize: 12,
+                    symbolShape: 'circle'
+                }
+            ]
+        },
     }
 
     handleSettingsUpdate = settings => {
@@ -37,7 +50,10 @@ export default class Line extends Component {
 
         const mappedSettings = propsMapper(settings)
 
-        const code = generateCode('Line', mappedSettings)
+        const code = generateCode('Line', mappedSettings, {
+            pkg: '@nivo/line',
+            defaults: LineDefaultProps
+        })
 
         const header = (
             <ChartHeader

diff --git a/website/src/components/charts/line/defaultProps.js b/website/src/components/charts/line/defaultProps.js
@@ -13,7 +13,7 @@ export default {
 
     margin: {
         top: 50,
-        right: 60,
+        right: 110,
         bottom: 50,
         left: 60,
     },