Merge pull request #84 from hughhhh/update-docs

Update Sparkline README.md
williaster · Feb 7, 2018 · 918b905 · 918b905
2 parents f5b59a1 + ad46517
commit 918b905
Showing 1 changed file with 49 additions and 44 deletions.
diff --git a/packages/sparkline/README.md b/packages/sparkline/README.md
@@ -19,54 +19,59 @@ Sparklines are composable using the container `<Sparkline />` component and diff
 Note that the order of children passed to `<Sparkline />` determines their rendering order, for example a `<HorizontalReferenceLine />` passed after a `<BarSeries />` will overlay the line on the bars.
 
 ```javascript
-import { Sparkline, LineSeries, HorizontalReferenceLine, LinearGradient } from '@data-ui/sparkline';
-import { allColors } from `@data-ui/theme`; // open-color colors
+import {
+  Sparkline,
+  LineSeries,
+  HorizontalReferenceLine,
+  BandLine,
+  PatternLines,
+  PointSeries } from '@data-ui/sparkline';
+import { allColors } from '@data-ui/theme'; // open-color colors
 
 const data = Array(25).fill().map(Math.random);
 
-/// ...
 <Sparkline
-  ariaLabel="A line graph of randomly-generated data"
-  margin={{ top: 24, right: 64, bottom: 24, left: 64 }}
-  width={500}
-  height={100}
-  data={range(25).map(() => (Math.random() * (Math.random() > 0.2 ? 1 : 2)))}
-  valueAccessor={datum => datum}
->
-  {/* this creates a <defs> referenced for fill */}
-  <PatternLines
-    id="unique_pattern_id"
-    height={6}
-    width={6}
-    stroke={allColors.grape[6]}
-    strokeWidth={1}
-    orientation={['diagonal']}
-  />
-  {/* display innerquartiles of the data */}
-  <BandLine
-    band="innerquartiles"
-    fill="url(#unique_pattern_id)"
-  />  
-  {/* display the median */}
-  <HorizontalReferenceLine
-    stroke={allColors.grape[8]}
-    strokeWidth={1}
-    strokeDasharray="4 4"
-    reference="median"
-  />
-{/* Series children are passed the data from the parent Sparkline */}
-  <LineSeries
-    showArea={false}
-    stroke={allColors.grape[7]}
-  />
-  <PointSeries
-    points={['min', 'max']}
-    fill={allColors.grape[3]}
-    size={5}
-    stroke="#fff"
-    renderLabel={(val, i) => val.toFixed(2)}
-  />
-</Sparkline>
+      ariaLabel="A line graph of randomly-generated data"
+      margin={{ top: 24, right: 64, bottom: 24, left: 64,}}
+      width={500}
+      height={100}
+      data={data}
+      valueAccessor={datum => datum}
+    >
+      {/* this creates a <defs> referenced for fill */}
+      <PatternLines
+        id="unique_pattern_id"
+        height={6}
+        width={6}
+        stroke={allColors.grape[6]}
+        strokeWidth={1}
+        orientation={['diagonal']}
+      />
+      {/* display innerquartiles of the data */}
+      <BandLine
+        band="innerquartiles"
+        fill="url(#unique_pattern_id)"
+      />
+      {/* display the median */}
+      <HorizontalReferenceLine
+        stroke={allColors.grape[8]}
+        strokeWidth={1}
+        strokeDasharray="4 4"
+        reference="median"
+      />
+      {/* Series children are passed the data from the parent Sparkline */}
+      <LineSeries
+        showArea={false}
+        stroke={allColors.grape[7]}
+      />
+      <PointSeries
+        points={['min', 'max']}
+        fill={allColors.grape[3]}
+        size={5}
+        stroke="#fff"
+        renderLabel={val => val.toFixed(2)}
+      />
+    </Sparkline>
 ```
 
 ## Components