feat(line): add option to format x/y values in tooltip (#731)

* Add option to format x/y values in tooltip * Fix formatting in LineCanvas stories
plouc · Dec 13, 2019 · f92abbe · f92abbe
1 parent 6743820
commit f92abbe
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/packages/line/src/LineCanvas.js b/packages/line/src/LineCanvas.js
@@ -29,7 +29,9 @@ const LineCanvas = ({
 
     data,
     xScale: xScaleSpec,
+    xFormat,
     yScale: yScaleSpec,
+    yFormat,
     curve,
 
     layers,
@@ -78,7 +80,9 @@ const LineCanvas = ({
     const { lineGenerator, areaGenerator, series, xScale, yScale, points } = useLine({
         data,
         xScale: xScaleSpec,
+        xFormat,
         yScale: yScaleSpec,
+        yFormat,
         width: innerWidth,
         height: innerHeight,
         colors,

diff --git a/packages/line/stories/LineCanvas.stories.js b/packages/line/stories/LineCanvas.stories.js
@@ -118,3 +118,66 @@ stories.add(
         },
     }
 )
+
+stories.add('time scale', () => (
+    <LineCanvas
+        {...commonProperties}
+        data={[
+            {
+                id: 'fake corp. A',
+                data: [
+                    { x: '2018-01-01', y: 7 },
+                    { x: '2018-01-02', y: 5 },
+                    { x: '2018-01-03', y: 11 },
+                    { x: '2018-01-04', y: 9 },
+                    { x: '2018-01-05', y: 12 },
+                    { x: '2018-01-06', y: 16 },
+                    { x: '2018-01-07', y: 13 },
+                    { x: '2018-01-08', y: 13 },
+                ],
+            },
+            {
+                id: 'fake corp. B',
+                data: [
+                    { x: '2018-01-04', y: 14 },
+                    { x: '2018-01-05', y: 14 },
+                    { x: '2018-01-06', y: 15 },
+                    { x: '2018-01-07', y: 11 },
+                    { x: '2018-01-08', y: 10 },
+                    { x: '2018-01-09', y: 12 },
+                    { x: '2018-01-10', y: 9 },
+                    { x: '2018-01-11', y: 7 },
+                ],
+            },
+        ]}
+        xScale={{
+            type: 'time',
+            format: '%Y-%m-%d',
+            precision: 'day',
+        }}
+        xFormat="time:%Y-%m-%d"
+        yScale={{
+            type: 'linear',
+            stacked: boolean('stacked', false),
+        }}
+        axisLeft={{
+            legend: 'linear scale',
+            legendOffset: 12,
+        }}
+        axisBottom={{
+            format: '%b %d',
+            tickValues: 'every 2 days',
+            legend: 'time scale',
+            legendOffset: -12,
+        }}
+        enablePointLabel={true}
+        pointSize={16}
+        pointBorderWidth={1}
+        pointBorderColor={{
+            from: 'color',
+            modifiers: [['darker', 0.3]],
+        }}
+        useMesh={true}
+        enableSlices={false}
+    />
+))