[sparkline] add tooltip support, examples, and purecomponent optimiza…

…tions
williaster · Nov 1, 2017 · 6b64209 · 6b64209
1 parent e455c1f
commit 6b64209
Show file tree

Hide file tree

Showing 23 changed files with 952 additions and 607 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -47,8 +47,12 @@
     "react": "^15.0.0-0 || ^16.0.0-0"
   },
   "dependencies": {
+    "@data-ui/theme": "0.0.9",
     "@vx/event": "0.0.143",
+    "@vx/group": "0.0.143",
+    "@vx/shape": "0.0.145",
     "@vx/tooltip": "0.0.143",
+    "d3-array": "^1.2.1",
     "prop-types": "^15.5.10"
   },
   "jest": {

diff --git a/packages/xy-chart/src/chart/CrossHair.jsx → packages/core/src/components/CrossHair.jsx b/packages/xy-chart/src/chart/CrossHair.jsx → packages/core/src/components/CrossHair.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { extent } from 'd3-array';
 
-import { color } from '@data-ui/theme';
-import { Group } from '@vx/group';
-import { Line } from '@vx/shape';
+import color from '@data-ui/theme/build/color';
+import Group from '@vx/group/build/Group';
+import Line from '@vx/shape/build/shapes/Line';
 
 const propTypes = {
   fullHeight: PropTypes.bool,
@@ -24,8 +24,8 @@ const propTypes = {
   // likely injected by parent
   left: PropTypes.number,
   top: PropTypes.number,
-  xRange: PropTypes.arrayOf(PropTypes.number),
-  yRange: PropTypes.arrayOf(PropTypes.number),
+  xScale: PropTypes.func,
+  yScale: PropTypes.func,
 
 };
 
@@ -49,8 +49,8 @@ const defaultProps = {
   stroke: color.grays[7],
   strokeDasharray: '3,3',
   strokeWidth: 1,
-  xRange: [0, 0],
-  yRange: [0, 0],
+  xScale: null,
+  yScale: null,
 };
 
 function CrossHair({
@@ -68,12 +68,13 @@ function CrossHair({
   stroke,
   strokeDasharray,
   strokeWidth,
-  xRange,
-  yRange,
+  xScale,
+  yScale,
   lineStyles,
 }) {
-  const [xMin, xMax] = extent(xRange);
-  const [yMin, yMax] = extent(yRange);
+  if (!xScale || !yScale) return null;
+  const [xMin, xMax] = extent(xScale.range());
+  const [yMin, yMax] = extent(yScale.range());
   return (
     <Group>
       {showHorizontalLine && top !== null &&

diff --git a/packages/core/src/enhancer/WithTooltip.js b/packages/core/src/enhancer/WithTooltip.js
@@ -5,6 +5,8 @@ import localPoint from '@vx/event/build/localPoint';
 import withTooltip from '@vx/tooltip/build/enhancers/withTooltip';
 import TooltipWithBounds, { withTooltipPropTypes as vxTooltipPropTypes } from '@vx/tooltip/build/tooltips/TooltipWithBounds';
 
+export { default as Tooltip } from '@vx/tooltip/build/tooltips/Tooltip';
+
 export const withTooltipPropTypes = {
   onMouseMove: PropTypes.func, // expects to be called like func({ event, datum })
   onMouseLeave: PropTypes.func, // expects to be called like func({ event, datum })
@@ -47,7 +49,9 @@ class WithTooltip extends React.PureComponent {
   }
 
   handleMouseMove({ event, datum, ...rest }) {
-    if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
+    if (this.tooltipTimeout) {
+      clearTimeout(this.tooltipTimeout);
+    }
 
     let coords = { x: 0, y: 0 };
     if (event && event.target && event.target.ownerSVGElement) {

diff --git a/packages/core/src/index.js b/packages/core/src/index.js
@@ -1 +1,2 @@
 export { default as WithTooltip, withTooltipPropTypes } from './enhancer/WithTooltip';
+export { default as Tooltip } from '@vx/tooltip/build/tooltips/Tooltip';
diff --git a/packages/xy-chart/test/CrossHair.test.js → ...es/core/test/components/CrossHair.test.js b/packages/xy-chart/test/CrossHair.test.js → ...es/core/test/components/CrossHair.test.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { Line } from '@vx/shape';
+import Line from '@vx/shape/build/shapes/Line';
 
-import CrossHair from '../src/chart/CrossHair';
+import CrossHair from '../src/components/CrossHair';
 
 describe('<CrossHair />', () => {
   const props = {

diff --git a/packages/demo/examples/03-sparkline/BarSeriesExamples.jsx b/packages/demo/examples/03-sparkline/BarSeriesExamples.jsx
@@ -8,6 +8,7 @@ import {
 
   HorizontalReferenceLine,
   VerticalReferenceLine,
+  WithTooltip,
 
   PatternLines,
   LinearGradient,
@@ -48,27 +49,41 @@ export default [
           </Sparkline>
         </Example>
 
-        <Example title="Custom fill with label and max line">
-          <Sparkline
-            {...sparklineProps}
-            data={range(35).map((_, i) => i + (5 * Math.random()) + (i === 34 ? 5 : 0))}
-          >
-            <HorizontalReferenceLine
-              reference="max"
-              stroke={allColors.grape[8]}
-              strokeWidth={1}
-              strokeDasharray="3,3"
-              labelPosition="right"
-              labelOffset={12}
-              renderLabel={() => 'max'}
-            />
-            <BarSeries
-              fill={(d, i) => allColors.grape[i === 34 ? 8 : 2]}
-              fillOpacity={0.7}
-              renderLabel={(d, i) => (i === 34 ? '🚀' : null)}
-            />
-          </Sparkline>
-        </Example>
+        {(data => (
+          <Example title="Custom fill with label + ref line bound to tooltip">
+            <WithTooltip>
+              {({ onMouseMove, onMouseLeave, tooltipData }) => (
+                <Sparkline
+                  {...sparklineProps}
+                  onMouseLeave={onMouseLeave}
+                  onMouseMove={onMouseMove}
+                  data={data}
+                >
+                  <BarSeries
+                    fill={(d, i) => {
+                      const indexToHighlight = tooltipData ? tooltipData.index : 34;
+                      return allColors.grape[i === indexToHighlight ? 8 : 2];
+                    }}
+                    fillOpacity={0.7}
+                    renderLabel={(d, i) => {
+                      const indexToHighlight = tooltipData ? tooltipData.index : 34;
+                      return i === indexToHighlight ? '🚀' : null;
+                    }}
+                  />
+                  <HorizontalReferenceLine
+                    reference={tooltipData ? tooltipData.datum.y : 'max'}
+                    stroke={allColors.grape[8]}
+                    strokeWidth={1}
+                    strokeDasharray="3,3"
+                    labelPosition="right"
+                    labelOffset={12}
+                    renderLabel={() => (tooltipData ? tooltipData.datum.y.toFixed(2) : 'max')}
+                  />
+                </Sparkline>
+              )}
+            </WithTooltip>
+          </Example>
+        ))(range(35).map((_, i) => i + (5 * Math.random()) + (i === 34 ? 5 : 0)))}
 
         <Example title="Gradient fill with vertical reference line">
           <Sparkline
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as WithTooltip, withTooltipPropTypes } from './enhancer/WithTooltip';
		export { default as Tooltip } from '@vx/tooltip/build/tooltips/Tooltip';