feat(markers): improve radar & line charts markers

src/Nivo.js

@@ -37,6 +37,10 @@ export const defaultTheme = {
         strokeWidth: 1,
         strokeDasharray: '',
     },
+    markers: {
+        textColor: '#000',
+        fontSize: '11px',
+    },
 }
 
 export default {

src/components/charts/SvgWrapper.js

@@ -1,3 +1,11 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 import React from 'react'
 
 const SvgWrapper = ({ width, height, margin, children }) =>

src/components/charts/bubble/Bubble.js

@@ -8,7 +8,7 @@
  */
 import React, { Component } from 'react'
 import _ from 'lodash'
-import { convertLabel } from '../../../lib/propertiesConverters'
+import { getLabelGenerator } from '../../../lib/propertiesConverters'
 import { bubblePropTypes, bubbleDefaultProps } from './BubbleProps'
 import BubblePlaceholders from './BubblePlaceholders'
 import { getColorGenerator } from '../../../lib/colorUtils'
@@ -23,7 +23,7 @@ const createNodes = ({
     labelTextColor,
     labelTextDY,
 }) => {
-    const label = convertLabel(_label, labelFormat)
+    const label = getLabelGenerator(_label, labelFormat)
     const borderColorFn = getColorGenerator(borderColor)
     const textColorFn = getColorGenerator(labelTextColor)
 

src/components/charts/line/Line.js

@@ -57,6 +57,10 @@ const Line = ({
     markersColor,
     markersBorderWidth,
     markersBorderColor,
+    enableMarkersLabel,
+    markersLabel,
+    markersLabelFormat,
+    markersLabelYOffset,
 
     // theming
     theme,
@@ -89,6 +93,11 @@ const Line = ({
                 color={getInheritedColorGenerator(markersColor)}
                 borderWidth={markersBorderWidth}
                 borderColor={getInheritedColorGenerator(markersBorderColor)}
+                enableLabel={enableMarkersLabel}
+                label={markersLabel}
+                labelFormat={markersLabelFormat}
+                labelYOffset={markersLabelYOffset}
+                theme={theme}
                 {...motionProps}
             />
         )
@@ -193,6 +202,7 @@ Line.propTypes = {
     markersColor: PropTypes.any.isRequired,
     markersBorderWidth: PropTypes.number.isRequired,
     markersBorderColor: PropTypes.any.isRequired,
+    enableMarkersLabel: PropTypes.bool.isRequired,
 
     // theming
     theme: PropTypes.object.isRequired,
@@ -223,6 +233,7 @@ export const LineDefaultProps = {
     markersColor: 'inherit',
     markersBorderWidth: 0,
     markersBorderColor: 'inherit',
+    enableMarkersLabel: false,
 
     // theming
     theme: {},

src/components/charts/line/LineMarkers.js

@@ -10,6 +10,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
 import { motionPropTypes } from '../../../props'
+import { getLabelGenerator } from '../../../lib/propertiesConverters'
+import MarkersItem from '../../markers/MarkersItem'
 
 export default class LineMarkers extends Component {
     static propTypes = {
@@ -22,13 +24,29 @@ export default class LineMarkers extends Component {
         color: PropTypes.func.isRequired,
         borderWidth: PropTypes.number.isRequired,
         borderColor: PropTypes.func.isRequired,
+
+        // labels
+        enableLabel: PropTypes.bool.isRequired,
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+        labelFormat: PropTypes.string,
+        labelYOffset: PropTypes.number,
+
+        // theming
+        theme: PropTypes.shape({
+            markers: PropTypes.shape({
+                textColor: PropTypes.string.isRequired,
+                fontSize: PropTypes.string.isRequired,
+            }).isRequired,
+        }).isRequired,
+
+        // motion
         ...motionPropTypes,
     }
 
     static defaultProps = {
-        animate: true,
-        motionStiffness: 90,
-        motionDamping: 15,
+        // labels
+        enableLabel: false,
+        label: 'y',
     }
 
     render() {
@@ -38,84 +56,103 @@ export default class LineMarkers extends Component {
             color,
             borderWidth,
             borderColor,
+
+            // labels
+            enableLabel,
+            label,
+            labelFormat,
+            labelYOffset,
+
+            // theming
+            theme,
+
+            // motion
             animate,
             motionStiffness,
             motionDamping,
         } = this.props
 
+        const getLabel = getLabelGenerator(label, labelFormat)
+
         const points = lines.reduce((acc, line) => {
             const { id, points } = line
 
             return [
                 ...acc,
-                ...points.map(point => ({
-                    key: `${id}.${point.x}`,
-                    x: point.x,
-                    y: point.y,
-                    fill: color(line),
-                    stroke: borderColor(line),
-                })),
+                ...points.map(point => {
+                    const pointData = {
+                        serie: { id },
+                        x: point.key,
+                        y: point.value,
+                    }
+
+                    return {
+                        key: `${id}.${point.x}`,
+                        x: point.x,
+                        y: point.y,
+                        fill: color(line),
+                        stroke: borderColor(line),
+                        label: enableLabel ? getLabel(pointData) : null,
+                    }
+                }),
             ]
         }, [])
 
-        let circles
-        if (animate === true) {
-            const springConfig = {
-                motionDamping,
-                motionStiffness,
-            }
-
-            circles = (
-                <TransitionMotion
-                    styles={points.map(point => {
-                        return {
-                            key: point.key,
-                            data: {
-                                fill: point.fill,
-                                stroke: point.stroke,
-                            },
-                            style: {
-                                x: spring(point.x, springConfig),
-                                y: spring(point.y, springConfig),
-                                size: spring(size, springConfig),
-                            },
-                        }
-                    })}
-                >
-                    {interpolatedStyles =>
-                        <g>
-                            {interpolatedStyles.map(({ key, style, data }) =>
-                                <circle
-                                    key={key}
-                                    cx={style.x}
-                                    cy={style.y}
-                                    r={style.size / 2}
-                                    fill={data.fill}
-                                    stroke={data.stroke}
-                                    strokeWidth={borderWidth}
-                                />
-                            )}
-                        </g>}
-                </TransitionMotion>
-            )
-        } else {
-            circles = points.map(point =>
-                <circle
-                    key={point.key}
-                    cx={point.x}
-                    cy={point.y}
-                    r={size / 2}
-                    fill={point.fill}
-                    stroke={point.stroke}
-                    strokeWidth={borderWidth}
-                />
+        if (animate !== true) {
+            return (
+                <g>
+                    {points.map(point =>
+                        <MarkersItem
+                            key={point.key}
+                            x={point.x}
+                            y={point.y}
+                            size={size}
+                            color={point.fill}
+                            borderWidth={borderWidth}
+                            borderColor={point.stroke}
+                            label={point.label}
+                            labelYOffset={labelYOffset}
+                            theme={theme}
+                        />
+                    )}
+                </g>
             )
         }
+        const springConfig = {
+            motionDamping,
+            motionStiffness,
+        }
 
         return (
-            <g>
-                {circles}
-            </g>
+            <TransitionMotion
+                styles={points.map(point => {
+                    return {
+                        key: point.key,
+                        data: point,
+                        style: {
+                            x: spring(point.x, springConfig),
+                            y: spring(point.y, springConfig),
+                            size: spring(size, springConfig),
+                        },
+                    }
+                })}
+            >
+                {interpolatedStyles =>
+                    <g>
+                        {interpolatedStyles.map(({ key, style, data: point }) =>
+                            <MarkersItem
+                                key={key}
+                                {...style}
+                                color={point.fill}
+                                borderWidth={borderWidth}
+                                borderColor={point.stroke}
+                                label={point.label}
+                                labelYOffset={labelYOffset}
+                                theme={theme}
+                            />
+                        )}
+                    </g>}
+            </TransitionMotion>
         )
     }
 }

src/components/charts/radar/Radar.js

@@ -53,6 +53,10 @@ const Radar = ({
     markersColor,
     markersBorderWidth,
     markersBorderColor,
+    enableMarkersLabel,
+    markersLabel,
+    markersLabelFormat,
+    markersLabelYOffset,
 
     // theming
     theme,
@@ -94,13 +98,19 @@ const Radar = ({
                 />
                 {enableMarkers &&
                     <RadarMarkers
+                        facets={facets}
                         data={data}
                         radiusScale={radiusScale}
                         angleStep={angleStep}
                         size={markersSize}
                         color={markersColor}
                         borderWidth={markersBorderWidth}
                         borderColor={markersBorderColor}
+                        enableLabel={enableMarkersLabel}
+                        label={markersLabel}
+                        labelFormat={markersLabelFormat}
+                        labelYOffset={markersLabelYOffset}
+                        theme={theme}
                         {...motionProps}
                     />}
             </g>
@@ -140,6 +150,10 @@ Radar.propTypes = {
     markersColor: PropTypes.any,
     markersBorderWidth: PropTypes.number,
     markersBorderColor: PropTypes.any,
+    enableMarkersLabel: PropTypes.bool,
+    markersLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    markersLabelFormat: PropTypes.string,
+    markersLabelYOffset: PropTypes.number,
 
     // theming
     theme: PropTypes.object.isRequired,