From 415ac59682a1435685a32c444d2f53ba7edd8be5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= <raphael.benitte@ekino.com>
Date: Thu, 7 Dec 2017 12:20:39 +0900
Subject: [PATCH] feat(radar): add support for legends on Radar component

---
 packages/nivo-line/src/Line.js                | 10 +++++---
 packages/nivo-line/src/props.js               |  4 +--
 packages/nivo-radar/package.json              |  1 +
 packages/nivo-radar/src/Radar.js              | 25 ++++++++++++++++++-
 website/src/components/charts/line/Line.js    | 12 ++++++---
 .../src/components/charts/line/LinePage.js    |  2 +-
 website/src/components/charts/radar/Radar.js  | 15 ++++++++++-
 7 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/packages/nivo-line/src/Line.js b/packages/nivo-line/src/Line.js
index 476a3791b..a547d6aad 100644
--- a/packages/nivo-line/src/Line.js
+++ b/packages/nivo-line/src/Line.js
@@ -166,10 +166,12 @@ const Line = ({
                         />
                     )}
                     {legends.map((legend, i) => {
-                        const legendData = lines.map(line => ({
-                            label: line.id,
-                            fill: line.color
-                        })).reverse()
+                        const legendData = lines
+                            .map(line => ({
+                                label: line.id,
+                                fill: line.color,
+                            }))
+                            .reverse()
 
                         return (
                             <BoxLegendSvg
diff --git a/packages/nivo-line/src/props.js b/packages/nivo-line/src/props.js
index deadf713f..15caedd07 100644
--- a/packages/nivo-line/src/props.js
+++ b/packages/nivo-line/src/props.js
@@ -81,9 +81,7 @@ export const LinePropTypes = {
     enableStackTooltip: PropTypes.bool.isRequired,
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
-    legends: PropTypes.arrayOf(
-        PropTypes.shape(LegendPropShape)
-    ).isRequired,
+    legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
 }
 
 export const LineDefaultProps = {
diff --git a/packages/nivo-radar/package.json b/packages/nivo-radar/package.json
index ac1424122..752801508 100644
--- a/packages/nivo-radar/package.json
+++ b/packages/nivo-radar/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-radar/src/Radar.js b/packages/nivo-radar/src/Radar.js
index c14d7f490..5154f0190 100644
--- a/packages/nivo-radar/src/Radar.js
+++ b/packages/nivo-radar/src/Radar.js
@@ -13,11 +13,12 @@ import compose from 'recompose/compose'
 import pure from 'recompose/pure'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import defaultProps from 'recompose/defaultProps'
+import { scaleLinear } from 'd3-scale'
 import { closedCurvePropType } from '@nivo/core'
 import { withTheme, withColors, withCurve, withDimensions, withMotion } from '@nivo/core'
-import { scaleLinear } from 'd3-scale'
 import { getAccessorFor } from '@nivo/core'
 import { Container, SvgWrapper } from '@nivo/core'
+import { LegendPropShape, BoxLegendSvg } from '@nivo/legends'
 import RadarShapes from './RadarShapes'
 import RadarGrid from './RadarGrid'
 import RadarTooltip from './RadarTooltip'
@@ -39,6 +40,8 @@ const Radar = ({
     centerX,
     centerY,
     margin,
+    width,
+    height,
     outerWidth,
     outerHeight,
 
@@ -76,6 +79,8 @@ const Radar = ({
     // interactivity
     isInteractive,
     tooltipFormat,
+
+    legends,
 }) => {
     const motionProps = {
         animate,
@@ -83,6 +88,11 @@ const Radar = ({
         motionStiffness,
     }
 
+    const legendData = keys.map(key => ({
+        label: key,
+        fill: colorByKey[key],
+    }))
+
     return (
         <Container isInteractive={isInteractive} theme={theme}>
             {({ showTooltip, hideTooltip }) => (
@@ -146,6 +156,15 @@ const Radar = ({
                             />
                         )}
                     </g>
+                    {legends.map((legend, i) => (
+                        <BoxLegendSvg
+                            key={i}
+                            {...legend}
+                            containerWidth={width}
+                            containerHeight={height}
+                            data={legendData}
+                        />
+                    ))}
                 </SvgWrapper>
             )}
         </Container>
@@ -193,6 +212,8 @@ Radar.propTypes = {
     // interactivity
     isInteractive: PropTypes.bool.isRequired,
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+
+    legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
 }
 
 export const RadarDefaultProps = {
@@ -215,6 +236,8 @@ export const RadarDefaultProps = {
 
     // interactivity
     isInteractive: true,
+
+    legends: [],
 }
 
 const enhance = compose(
diff --git a/website/src/components/charts/line/Line.js b/website/src/components/charts/line/Line.js
index 527e47972..52ae20509 100644
--- a/website/src/components/charts/line/Line.js
+++ b/website/src/components/charts/line/Line.js
@@ -34,9 +34,9 @@ export default class Line extends Component {
                     itemWidth: 80,
                     itemHeight: 20,
                     symbolSize: 12,
-                    symbolShape: 'circle'
-                }
-            ]
+                    symbolShape: 'circle',
+                },
+            ],
         },
     }
 
@@ -52,7 +52,7 @@ export default class Line extends Component {
 
         const code = generateCode('Line', mappedSettings, {
             pkg: '@nivo/line',
-            defaults: LineDefaultProps
+            defaults: LineDefaultProps,
         })
 
         const header = (
@@ -100,6 +100,10 @@ export default class Line extends Component {
                         the storybook
                     </a>.
                 </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/line/LinePage.js b/website/src/components/charts/line/LinePage.js
index 3c0a00fba..1c9a0d1e1 100644
--- a/website/src/components/charts/line/LinePage.js
+++ b/website/src/components/charts/line/LinePage.js
@@ -10,7 +10,7 @@ import React, { Component } from 'react'
 import Helmet from 'react-helmet'
 import { generateDrinkStats } from '@nivo/generators'
 
-const generateData = () => generateDrinkStats(12)
+const generateData = () => generateDrinkStats(9)
 
 class LinePage extends Component {
     state = {
diff --git a/website/src/components/charts/radar/Radar.js b/website/src/components/charts/radar/Radar.js
index 4cbe5c938..8994d2716 100644
--- a/website/src/components/charts/radar/Radar.js
+++ b/website/src/components/charts/radar/Radar.js
@@ -10,10 +10,10 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import MediaQuery from 'react-responsive'
 import { Link } from 'react-router-dom'
+import { ResponsiveRadar } from '@nivo/radar'
 import ChartHeader from '../../ChartHeader'
 import ChartTabs from '../../ChartTabs'
 import RadarControls from './RadarControls'
-import { ResponsiveRadar } from '@nivo/radar'
 import generateCode from '../../../lib/generateChartCode'
 import ComponentPropsDocumentation from '../../properties/ComponentPropsDocumentation'
 import properties from './props'
@@ -67,6 +67,19 @@ export default class Radar extends Component {
             motionDamping: 15,
 
             isInteractive: true,
+
+            legends: [
+                {
+                    anchor: 'top-left',
+                    direction: 'column',
+                    translateX: -50,
+                    translateY: -40,
+                    itemWidth: 80,
+                    itemHeight: 20,
+                    symbolSize: 12,
+                    symbolShape: 'circle',
+                },
+            ],
         },
     }