From 330720ceaffce246cb77f3a5cb08ff307d9e9c31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= <raphael.benitte@ekino.com>
Date: Thu, 14 Dec 2017 14:49:16 +0900
Subject: [PATCH] feat(line): fix dot label color

---
 .../nivo-core/src/components/dots/DotsItem.js     |  4 +++-
 packages/nivo-line/src/svg/LineChartSvg.js        |  2 ++
 packages/nivo-line/src/svg/LineDotsSvg.js         |  5 +++++
 .../charts/line/Line/defaultSettings.js           |  2 +-
 .../components/charts/line/Line/generateData.js   |  5 ++++-
 website/src/components/charts/line/props.js       | 15 +++++++++++++++
 6 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/nivo-core/src/components/dots/DotsItem.js b/packages/nivo-core/src/components/dots/DotsItem.js
index 63b9679d8..98c728f86 100644
--- a/packages/nivo-core/src/components/dots/DotsItem.js
+++ b/packages/nivo-core/src/components/dots/DotsItem.js
@@ -21,6 +21,7 @@ const DotsItem = ({
     borderColor,
     label,
     labelTextAnchor,
+    labelColor,
     labelYOffset,
     theme,
 }) => (
@@ -37,7 +38,7 @@ const DotsItem = ({
                 y={labelYOffset}
                 style={{
                     fontSize: theme.dots.fontSize,
-                    fill: theme.dots.textColor,
+                    fill: labelColor ? labelColor : theme.dots.textColor,
                 }}
             >
                 {label}
@@ -61,6 +62,7 @@ DotsItem.propTypes = {
 
     // label
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    labelColor: PropTypes.string,
     labelTextAnchor: PropTypes.oneOf(['start', 'middle', 'end']),
     labelYOffset: PropTypes.number.isRequired,
 
diff --git a/packages/nivo-line/src/svg/LineChartSvg.js b/packages/nivo-line/src/svg/LineChartSvg.js
index 9e3e60309..e2369a657 100644
--- a/packages/nivo-line/src/svg/LineChartSvg.js
+++ b/packages/nivo-line/src/svg/LineChartSvg.js
@@ -77,6 +77,7 @@ const LineChartSvg = ({
     enableDotLabel,
     dotLabel,
     dotLabelFormat,
+    dotLabelColor,
     dotLabelYOffset,
 
     // markers
@@ -221,6 +222,7 @@ const LineChartSvg = ({
                                         enableLabel={enableDotLabel}
                                         label={dotLabel}
                                         labelFormat={dotLabelFormat}
+                                        labelColor={getInheritedColorGenerator(dotLabelColor)}
                                         labelYOffset={dotLabelYOffset}
                                         theme={theme}
                                         {...motionProps}
diff --git a/packages/nivo-line/src/svg/LineDotsSvg.js b/packages/nivo-line/src/svg/LineDotsSvg.js
index dd86c47a9..073533133 100644
--- a/packages/nivo-line/src/svg/LineDotsSvg.js
+++ b/packages/nivo-line/src/svg/LineDotsSvg.js
@@ -38,6 +38,7 @@ const LineDotsSvg = ({
     // labels
     enableLabel,
     getLabel,
+    labelColor,
     labelYOffset,
 
     // theming
@@ -65,6 +66,7 @@ const LineDotsSvg = ({
                 fill: color(data),
                 stroke: borderColor(data),
                 label: enableLabel ? getLabel(pointData) : null,
+                labelColor: labelColor(data),
             }
         })
 
@@ -82,6 +84,7 @@ const LineDotsSvg = ({
                         borderWidth={borderWidth}
                         borderColor={point.stroke}
                         label={point.label}
+                        labelColor={point.labelColor}
                         labelYOffset={labelYOffset}
                         theme={theme}
                     />
@@ -117,6 +120,7 @@ const LineDotsSvg = ({
                             borderWidth={borderWidth}
                             borderColor={point.stroke}
                             label={point.label}
+                            labelColor={point.labelColor}
                             labelYOffset={labelYOffset}
                             theme={theme}
                         />
@@ -151,6 +155,7 @@ LineDotsSvg.propTypes = {
     enableLabel: PropTypes.bool.isRequired,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     labelFormat: PropTypes.string,
+    labelColor: PropTypes.func.isRequired,
     labelYOffset: PropTypes.number,
 
     // theming
diff --git a/website/src/components/charts/line/Line/defaultSettings.js b/website/src/components/charts/line/Line/defaultSettings.js
index 0fb5c562a..25bf5212e 100644
--- a/website/src/components/charts/line/Line/defaultSettings.js
+++ b/website/src/components/charts/line/Line/defaultSettings.js
@@ -71,7 +71,7 @@ export default {
     // dots
     enableDots: true,
     dotsEveryNth: 1,
-    dotSize: 8,
+    dotSize: 7,
     dotColor: { type: 'custom', color: '#ffffff' },
     dotBorderWidth: 2,
     dotBorderColor: { type: 'inherit' },
diff --git a/website/src/components/charts/line/Line/generateData.js b/website/src/components/charts/line/Line/generateData.js
index 98b0c4f1b..23708477c 100644
--- a/website/src/components/charts/line/Line/generateData.js
+++ b/website/src/components/charts/line/Line/generateData.js
@@ -26,6 +26,9 @@ export default () => {
             yRand: 3,
             easing: 'random',
             xGaps: gaps[key] || [],
-        }),
+        }).map(d => ({
+            ...d,
+            y: d.y < 0 ? 0 : d.y,
+        })),
     }))
 }
diff --git a/website/src/components/charts/line/props.js b/website/src/components/charts/line/props.js
index 1c0059d72..b541b44da 100644
--- a/website/src/components/charts/line/props.js
+++ b/website/src/components/charts/line/props.js
@@ -210,6 +210,21 @@ export default [
         controlType: 'switch',
         controlGroup: 'Dots',
     },
+    {
+        key: 'dotsEveryNth',
+        scopes: '*',
+        description:
+            'Allows you to only display every nth dot. May be used when you have a lot of points to improve legibility.',
+        type: '{number}',
+        required: false,
+        default: defaults.dotsEveryNth,
+        controlType: 'range',
+        controlGroup: 'Dots',
+        controlOptions: {
+            min: 1,
+            max: 20,
+        },
+    },
     {
         key: 'dotSymbol',
         description: