feat(dots): add ability to define custom dot symbol

plouc · Aug 21, 2017 · da49e15 · da49e15
1 parent 2bd2554
commit da49e15
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 184 deletions.
diff --git a/src/Nivo.js b/src/Nivo.js
@@ -37,7 +37,7 @@ export const defaultTheme = {
         strokeWidth: 1,
         strokeDasharray: '',
     },
-    markers: {
+    dots: {
         textColor: '#000',
         fontSize: '11px',
     },

diff --git a/src/components/charts/line/Line.js b/src/components/charts/line/Line.js
@@ -55,6 +55,7 @@ const Line = ({
 
     // dots
     enableDots,
+    dotSymbol,
     dotSize,
     dotColor,
     dotBorderWidth,
@@ -121,6 +122,7 @@ const Line = ({
                     {enableDots &&
                         <LineDots
                             lines={lines}
+                            symbol={dotSymbol}
                             size={dotSize}
                             color={getInheritedColorGenerator(dotColor)}
                             borderWidth={dotBorderWidth}
@@ -175,6 +177,7 @@ Line.propTypes = {
 
     // dots
     enableDots: PropTypes.bool.isRequired,
+    dotSymbol: PropTypes.func,
     dotSize: PropTypes.number.isRequired,
     dotColor: PropTypes.any.isRequired,
     dotBorderWidth: PropTypes.number.isRequired,

diff --git a/src/components/charts/line/LineDots.js b/src/components/charts/line/LineDots.js
@@ -15,6 +15,8 @@ import DotsItem from '../../dots/DotsItem'
 
 const LineDots = ({
     lines,
+
+    symbol,
     size,
     color,
     borderWidth,
@@ -68,6 +70,7 @@ const LineDots = ({
                         key={point.key}
                         x={point.x}
                         y={point.y}
+                        symbol={symbol}
                         size={size}
                         color={point.fill}
                         borderWidth={borderWidth}
@@ -105,6 +108,7 @@ const LineDots = ({
                         <DotsItem
                             key={key}
                             {...style}
+                            symbol={symbol}
                             color={point.fill}
                             borderWidth={borderWidth}
                             borderColor={point.stroke}
@@ -124,6 +128,8 @@ LineDots.propTypes = {
             id: PropTypes.string.isRequired,
         })
     ),
+
+    symbol: PropTypes.func,
     size: PropTypes.number.isRequired,
     color: PropTypes.func.isRequired,
     borderWidth: PropTypes.number.isRequired,
@@ -137,7 +143,7 @@ LineDots.propTypes = {
 
     // theming
     theme: PropTypes.shape({
-        markers: PropTypes.shape({
+        dots: PropTypes.shape({
             textColor: PropTypes.string.isRequired,
             fontSize: PropTypes.string.isRequired,
         }).isRequired,

diff --git a/src/components/charts/radar/Radar.js b/src/components/charts/radar/Radar.js
@@ -22,7 +22,7 @@ import SvgWrapper from '../SvgWrapper'
 import RadarShapes from './RadarShapes'
 import RadarGrid from './RadarGrid'
 import RadarTooltip from './RadarTooltip'
-import RadarMarkers from './RadarMarkers'
+import RadarDots from './RadarDots'
 
 const Radar = ({
     data,
@@ -52,16 +52,17 @@ const Radar = ({
     gridShape,
     gridLabelOffset,
 
-    // markers
-    enableMarkers,
-    markersSize,
-    markersColor,
-    markersBorderWidth,
-    markersBorderColor,
-    enableMarkersLabel,
-    markersLabel,
-    markersLabelFormat,
-    markersLabelYOffset,
+    // dots
+    enableDots,
+    dotSymbol,
+    dotSize,
+    dotColor,
+    dotBorderWidth,
+    dotBorderColor,
+    enableDotLabel,
+    dotLabel,
+    dotLabelFormat,
+    dotLabelYOffset,
 
     // theming
     theme,
@@ -121,22 +122,23 @@ const Radar = ({
                                 showTooltip={showTooltip}
                                 hideTooltip={hideTooltip}
                             />}
-                        {enableMarkers &&
-                            <RadarMarkers
+                        {enableDots &&
+                            <RadarDots
                                 data={data}
                                 keys={keys}
                                 getIndex={getIndex}
                                 radiusScale={radiusScale}
                                 angleStep={angleStep}
-                                size={markersSize}
+                                symbol={dotSymbol}
+                                size={dotSize}
                                 colorByKey={colorByKey}
-                                color={markersColor}
-                                borderWidth={markersBorderWidth}
-                                borderColor={markersBorderColor}
-                                enableLabel={enableMarkersLabel}
-                                label={markersLabel}
-                                labelFormat={markersLabelFormat}
-                                labelYOffset={markersLabelYOffset}
+                                color={dotColor}
+                                borderWidth={dotBorderWidth}
+                                borderColor={dotBorderColor}
+                                enableLabel={enableDotLabel}
+                                label={dotLabel}
+                                labelFormat={dotLabelFormat}
+                                labelYOffset={dotLabelYOffset}
                                 theme={theme}
                                 {...motionProps}
                             />}
@@ -167,16 +169,17 @@ Radar.propTypes = {
     gridShape: PropTypes.oneOf(['circular', 'linear']),
     gridLabelOffset: PropTypes.number,
 
-    // markers
-    enableMarkers: PropTypes.bool.isRequired,
-    markersSize: PropTypes.number,
-    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,
+    // dots
+    enableDots: PropTypes.bool.isRequired,
+    dotSymbol: PropTypes.func,
+    dotSize: PropTypes.number,
+    dotColor: PropTypes.any,
+    dotBorderWidth: PropTypes.number,
+    dotBorderColor: PropTypes.any,
+    enableDotLabel: PropTypes.bool,
+    dotLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    dotLabelFormat: PropTypes.string,
+    dotLabelYOffset: PropTypes.number,
 
     // theming
     getColor: PropTypes.func.isRequired, // computed
@@ -199,8 +202,8 @@ export const RadarDefaultProps = {
     gridShape: 'circular',
     gridLabelOffset: 16,
 
-    // markers
-    enableMarkers: true,
+    // dots
+    enableDots: true,
 
     // theming
     fillOpacity: 0.15,

diff --git a/src/components/charts/radar/RadarMarkers.js → src/components/charts/radar/RadarDots.js b/src/components/charts/radar/RadarMarkers.js → src/components/charts/radar/RadarDots.js
@@ -13,9 +13,9 @@ import { motionPropTypes } from '../../../props'
 import { getInheritedColorGenerator } from '../../../lib/colorUtils'
 import { positionFromAngle } from '../../../lib/arcUtils'
 import { getLabelGenerator } from '../../../lib/propertiesConverters'
-import MarkersItem from '../../markers/MarkersItem'
+import DotsItem from '../../dots/DotsItem'
 
-export default class RadarMarkers extends Component {
+export default class RadarDots extends Component {
     static propTypes = {
         data: PropTypes.arrayOf(PropTypes.object).isRequired,
         keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
@@ -26,6 +26,8 @@ export default class RadarMarkers extends Component {
 
         radiusScale: PropTypes.func.isRequired,
         angleStep: PropTypes.number.isRequired,
+
+        symbol: PropTypes.func,
         size: PropTypes.number.isRequired,
         color: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
         borderWidth: PropTypes.number.isRequired,
@@ -39,7 +41,7 @@ export default class RadarMarkers extends Component {
 
         // theming
         theme: PropTypes.shape({
-            markers: PropTypes.shape({
+            dots: PropTypes.shape({
                 textColor: PropTypes.string.isRequired,
                 fontSize: PropTypes.string.isRequired,
             }).isRequired,
@@ -69,6 +71,8 @@ export default class RadarMarkers extends Component {
 
             radiusScale,
             angleStep,
+
+            symbol,
             size,
             color,
             borderWidth,
@@ -121,10 +125,11 @@ export default class RadarMarkers extends Component {
             return (
                 <g>
                     {points.map(point =>
-                        <MarkersItem
+                        <DotsItem
                             key={point.key}
                             x={point.style.x}
                             y={point.style.y}
+                            symbol={symbol}
                             size={size}
                             color={point.style.fill}
                             borderWidth={borderWidth}
@@ -158,9 +163,10 @@ export default class RadarMarkers extends Component {
                 {interpolatedStyles =>
                     <g>
                         {interpolatedStyles.map(({ key, style, data: point }) =>
-                            <MarkersItem
+                            <DotsItem
                                 key={key}
                                 {...style}
+                                symbol={symbol}
                                 color={point.style.fill}
                                 borderWidth={borderWidth}
                                 borderColor={point.style.stroke}

diff --git a/src/components/charts/radar/index.js b/src/components/charts/radar/index.js
@@ -9,4 +9,4 @@
 export { default as Radar } from './Radar'
 export * from './Radar'
 export { default as ResponsiveRadar } from './ResponsiveRadar'
-export { default as RadarMarkers } from './RadarMarkers'
+export { default as RadarDots } from './RadarDots'
diff --git a/src/components/dots/DotsItem.js b/src/components/dots/DotsItem.js
@@ -14,6 +14,7 @@ import DotsItemSymbol from './DotsItemSymbol'
 const DotsItem = ({
     x,
     y,
+    symbol,
     size,
     color,
     borderWidth,
@@ -24,19 +25,19 @@ const DotsItem = ({
     theme,
 }) =>
     <g transform={`translate(${x}, ${y})`} style={{ pointerEvents: 'none' }}>
-        <DotsItemSymbol
-            size={size}
-            color={color}
-            borderWidth={borderWidth}
-            borderColor={borderColor}
-        />
+        {React.createElement(symbol, {
+            size: size,
+            color: color,
+            borderWidth: borderWidth,
+            borderColor: borderColor,
+        })}
         {label &&
             <text
                 textAnchor={labelTextAnchor}
                 y={labelYOffset}
                 style={{
-                    fontSize: theme.markers.fontSize,
-                    fill: theme.markers.textColor,
+                    fontSize: theme.dots.fontSize,
+                    fill: theme.dots.textColor,
                 }}
             >
                 {label}
@@ -54,21 +55,26 @@ DotsItem.propTypes = {
     borderWidth: PropTypes.number.isRequired,
     borderColor: PropTypes.string.isRequired,
 
+    symbol: PropTypes.func.isRequired,
+
     // label
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     labelTextAnchor: PropTypes.oneOf(['start', 'middle', 'end']),
     labelYOffset: PropTypes.number.isRequired,
 
     // theming
     theme: PropTypes.shape({
-        markers: PropTypes.shape({
+        dots: PropTypes.shape({
             textColor: PropTypes.string.isRequired,
             fontSize: PropTypes.string.isRequired,
         }).isRequired,
     }).isRequired,
 }
 
 export const DotsItemDefaultProps = {
+    symbol: DotsItemSymbol,
+
+    // label
     labelTextAnchor: 'middle',
     labelYOffset: -12,
 }

diff --git a/src/components/markers/MarkersItem.js b/src/components/markers/MarkersItem.js