feat(line): fix dot label color

plouc · Dec 14, 2017 · 330720c · 330720c
1 parent 5bf0909
commit 330720c
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: