Merge pull request #72 from williaster/chris--sparkline-tooltip

[shared] add @data-ui/shared package [sparkline] add support for tooltips
williaster · Nov 3, 2017 · b0e301a · b0e301a
2 parents 4c8bdd8 + 9a06c63
commit b0e301a
Show file tree

Hide file tree

Showing 51 changed files with 1,210 additions and 1,476 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -13,8 +13,9 @@ env:
   - PACKAGE=data-ui-theme
   - PACKAGE=forms
   - PACKAGE=network
+  - PACKAGE=shared
 script:
-  - 'cd ./packages/$PACKAGE && npm install && npm run test'
+  - 'cd ./packages/$PACKAGE && npm install && npm prune && npm run test'
   - 'cd ../../'
   - 'eslint --ignore-path=.eslintignore --ext .js,.jsx ./packages/$PACKAGE'
 after_script:

diff --git a/lerna.json b/lerna.json
@@ -3,5 +3,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "independent"
+  "version": "0.0.46"
 }
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