feat(theming): add ability to theme crosshairs

plouc · Apr 17, 2019 · f03848f · f03848f
1 parent e46b10c
commit f03848f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 34 deletions.
diff --git a/packages/core/src/theming/defaultTheme.js b/packages/core/src/theming/defaultTheme.js
@@ -70,6 +70,13 @@ export const defaultTheme = {
             padding: '3px 5px',
         },
     },
+    crosshair: {
+        line: {
+            stroke: '#000000',
+            strokeWidth: 1,
+            strokeOpacity: 0.35,
+        },
+    },
     annotations: {
         text: {
             fontSize: 13,

diff --git a/packages/core/src/theming/propTypes.js b/packages/core/src/theming/propTypes.js
@@ -59,6 +59,39 @@ export const markersThemePropType = PropTypes.shape({
     text: PropTypes.shape({ ...textProps }).isRequired,
 })
 
+export const crosshairPropType = PropTypes.shape({
+    line: PropTypes.shape({
+        stroke: PropTypes.string.isRequired,
+        strokeWidth: PropTypes.number.isRequired,
+        strokeDasharray: PropTypes.string,
+    }).isRequired,
+})
+
+export const annotationsPropType = PropTypes.shape({
+    text: PropTypes.shape({
+        ...textProps,
+        outlineWidth: PropTypes.number.isRequired,
+        outlineColor: PropTypes.string.isRequired,
+    }).isRequired,
+    link: PropTypes.shape({
+        stroke: PropTypes.string.isRequired,
+        strokeWidth: PropTypes.number.isRequired,
+        outlineWidth: PropTypes.number.isRequired,
+        outlineColor: PropTypes.string.isRequired,
+    }).isRequired,
+    outline: PropTypes.shape({
+        stroke: PropTypes.string.isRequired,
+        strokeWidth: PropTypes.number.isRequired,
+        outlineWidth: PropTypes.number.isRequired,
+        outlineColor: PropTypes.string.isRequired,
+    }).isRequired,
+    symbol: PropTypes.shape({
+        fill: PropTypes.string.isRequired,
+        outlineWidth: PropTypes.number.isRequired,
+        outlineColor: PropTypes.string.isRequired,
+    }).isRequired,
+})
+
 export const themePropType = PropTypes.shape({
     background: PropTypes.string.isRequired,
     fontFamily: PropTypes.string.isRequired,
@@ -70,4 +103,6 @@ export const themePropType = PropTypes.shape({
     labels: labelsThemePropType.isRequired,
     dots: dotsThemePropType.isRequired,
     markers: markersThemePropType,
+    crosshair: crosshairPropType.isRequired,
+    annotations: annotationsPropType.isRequired,
 })
diff --git a/packages/line/src/LineSlicesItem.js b/packages/line/src/LineSlicesItem.js
@@ -25,31 +25,25 @@ Chip.propTypes = {
     color: PropTypes.string.isRequired,
 }
 
-const LineSlicesItem = ({ slice, height, showTooltip, hideTooltip, isHover }) => (
-    <g transform={`translate(${slice.x}, 0)`}>
-        {isHover && (
-            <line
-                x1={0}
-                x2={0}
-                y1={0}
-                y2={height}
-                stroke="#000"
-                strokeOpacity={0.35}
-                strokeWidth={1}
+const LineSlicesItem = ({ slice, height, showTooltip, hideTooltip, isHover, theme }) => {
+    return (
+        <g transform={`translate(${slice.x}, 0)`}>
+            {isHover && (
+                <line x1={0} x2={0} y1={0} y2={height} fill="none" style={theme.crosshair.line} />
+            )}
+            <rect
+                x={-20}
+                width={40}
+                height={height}
+                fill="#F00"
+                fillOpacity={0}
+                onMouseEnter={showTooltip}
+                onMouseMove={showTooltip}
+                onMouseLeave={hideTooltip}
             />
-        )}
-        <rect
-            x={-20}
-            width={40}
-            height={height}
-            fill="#F00"
-            fillOpacity={0}
-            onMouseEnter={showTooltip}
-            onMouseMove={showTooltip}
-            onMouseLeave={hideTooltip}
-        />
-    </g>
-)
+        </g>
+    )
+}
 
 LineSlicesItem.propTypes = {
     slice: PropTypes.object.isRequired,

diff --git a/packages/radar/src/RadarTooltipItem.js b/packages/radar/src/RadarTooltipItem.js
@@ -72,15 +72,8 @@ const RadarTooltipItem = memo(
         }, [startAngle, endAngle, radius, arcGenerator])
 
         return (
-            <g>
-                <line
-                    x1={0}
-                    y1={0}
-                    x2={tipX}
-                    y2={tipY}
-                    stroke="#000"
-                    strokeOpacity={isHover ? 0.35 : 0}
-                />
+            <>
+                {isHover && <line x1={0} y1={0} x2={tipX} y2={tipY} style={theme.crosshair.line} />}
                 <path
                     d={path}
                     fill="#F00"
@@ -89,7 +82,7 @@ const RadarTooltipItem = memo(
                     onMouseMove={showItemTooltip}
                     onMouseLeave={hideItemTooltip}
                 />
-            </g>
+            </>
         )
     }
 )