From 66c475aea009521700d6924837e556fa060ecefa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= <raphael.benitte@ekino.com>
Date: Thu, 7 Dec 2017 14:33:48 +0900
Subject: [PATCH] feat(stream): add support for legends on Stream component

---
 packages/nivo-stream/package.json             |  1 +
 packages/nivo-stream/src/Stream.js            | 19 ++++++++++++++++++
 packages/nivo-stream/src/props.js             |  5 +++++
 .../src/components/charts/stream/Stream.js    | 20 ++++++++++++++++++-
 .../components/charts/stream/defaultProps.js  |  2 +-
 5 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/nivo-stream/package.json b/packages/nivo-stream/package.json
index f35e4b2df..0a4cad5a4 100644
--- 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
index 029e2f226..1dab21f22 100644
--- 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
index 4501c6b42..5054356c0 100644
--- 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
index 52cd59bd4..c493f2e21 100644
--- 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
index ee0ef192a..79be94bde 100644
--- 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,
     },