feat(stream): add support for legends on Stream component

plouc · Dec 7, 2017 · 7939535 · 7939535
1 parent df1d308
commit 7939535
Show file tree

Hide file tree

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

diff --git a/packages/nivo-stream/src/Stream.js b/packages/nivo-stream/src/Stream.js
@@ -11,6 +11,7 @@ import { min, max, range, sortBy } from 'lodash'
 import { bindDefs } from '@nivo/core'
 import { Container, SvgWrapper } from '@nivo/core'
 import { Axes, Grid } from '@nivo/core'
+import { BoxLegendSvg } from '@nivo/legends'
 import StreamLayers from './StreamLayers'
 import StreamSlices from './StreamSlices'
 import { StreamPropTypes } from './props'
@@ -59,6 +60,8 @@ const Stream = ({
 
     // stack tooltip
     enableStackTooltip,
+
+    legends,
 }) => {
     const enhancedLayers = layers.map((points, i) => {
         const layer = points.map((point, i) => ({
@@ -148,6 +151,22 @@ const Stream = ({
                                 tooltipFormat={tooltipFormat}
                             />
                         )}
+                    {legends.map((legend, i) => {
+                        const legendData = enhancedLayers.map(l => ({
+                            label: l.id,
+                            fill: l.color,
+                        })).reverse()
+
+                        return (
+                            <BoxLegendSvg
+                                key={i}
+                                {...legend}
+                                containerWidth={width}
+                                containerHeight={height}
+                                data={legendData}
+                            />
+                        )
+                    })}
                 </SvgWrapper>
             )}
         </Container>

diff --git a/packages/nivo-stream/src/props.js b/packages/nivo-stream/src/props.js
@@ -8,6 +8,7 @@
  */
 import PropTypes from 'prop-types'
 import { areaCurvePropType, stackOrderPropType, stackOffsetPropType } from '@nivo/core'
+import { LegendPropShape } from '@nivo/legends'
 
 export const StreamPropTypes = {
     // data
@@ -55,6 +56,8 @@ export const StreamPropTypes = {
     isInteractive: PropTypes.bool,
     enableStackTooltip: PropTypes.bool.isRequired,
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+
+    legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
 }
 
 export const StreamDefaultProps = {
@@ -81,4 +84,6 @@ export const StreamDefaultProps = {
 
     // stack tooltip
     enableStackTooltip: true,
+
+    legends: [],
 }
diff --git a/website/src/components/charts/stream/Stream.js b/website/src/components/charts/stream/Stream.js
@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
 import MediaQuery from 'react-responsive'
 import { ResponsiveStream, StreamDefaultProps } from '@nivo/stream'
 import ChartHeader from '../../ChartHeader'
@@ -23,7 +24,20 @@ import propsMapper from './propsMapper'
 export default class Stream extends Component {
     state = {
         ...generateLightDataSet(),
-        settings: defaultProps,
+        settings: {
+            ...defaultProps,
+            legends: [
+                {
+                    anchor: 'bottom-right',
+                    direction: 'column',
+                    translateX: 100,
+                    itemWidth: 80,
+                    itemHeight: 20,
+                    symbolSize: 12,
+                    symbolShape: 'circle',
+                },
+            ],
+        },
     }
 
     handleSettingsUpdate = settings => {
@@ -58,6 +72,10 @@ export default class Stream extends Component {
                 <p className="description">
                     The responsive alternative of this component is <code>ResponsiveStream</code>.
                 </p>
+                <p className="description">
+                    See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
+                    legends for this component.
+                </p>
             </div>
         )
 

diff --git a/website/src/components/charts/stream/defaultProps.js b/website/src/components/charts/stream/defaultProps.js
@@ -11,7 +11,7 @@ import { patternDotsDef, patternSquaresDef } from '@nivo/core'
 export default {
     margin: {
         top: 50,
-        right: 60,
+        right: 110,
         bottom: 50,
         left: 60,
     },