Add time scale with milliseconds precision story to storybook

plouc · Sep 16, 2021 · a11710e · a11710e
1 parent 925a8ea
commit a11710e
Showing 1 changed file with 66 additions and 0 deletions.
diff --git a/packages/line/stories/line.stories.js b/packages/line/stories/line.stories.js
@@ -184,6 +184,72 @@ stories.add('time scale', () => (
     />
 ))
 
+stories.add('time scale milliseconds precision', () => (
+    <Line
+        {...commonProperties}
+        data={[
+            {
+                id: 'signal A',
+                data: [
+                    { x: '2018-01-01 12:00:01.100', y: 7 },
+                    { x: '2018-01-01 12:00:01.110', y: 5 },
+                    { x: '2018-01-01 12:00:01.120', y: 11 },
+                    { x: '2018-01-01 12:00:01.130', y: 9 },
+                    { x: '2018-01-01 12:00:01.140', y: 12 },
+                    { x: '2018-01-01 12:00:01.150', y: 16 },
+                    { x: '2018-01-01 12:00:01.160', y: 13 },
+                    { x: '2018-01-01 12:00:01.170', y: 13 },
+                ],
+            },
+            {
+                id: 'signal B',
+                data: [
+                    { x: '2018-01-01 12:00:01.100', y: 14 },
+                    { x: '2018-01-01 12:00:01.110', y: 14 },
+                    { x: '2018-01-01 12:00:01.120', y: 15 },
+                    { x: '2018-01-01 12:00:01.130', y: 11 },
+                    { x: '2018-01-01 12:00:01.140', y: 10 },
+                    { x: '2018-01-01 12:00:01.150', y: 12 },
+                    { x: '2018-01-01 12:00:01.160', y: 9 },
+                    { x: '2018-01-01 12:00:01.170', y: 7 },
+                ],
+            },
+        ]}
+        xScale={{
+            type: 'time',
+            format: '%Y-%m-%d %H:%M:%S.%L',
+            useUTC: false,
+            precision: 'millisecond',
+        }}
+        xFormat="time:%Y-%m-%d %H:%M:%S.%L"
+        yScale={{
+            type: 'linear',
+            stacked: boolean('stacked', false),
+        }}
+        axisLeft={{
+            legend: 'linear scale',
+            legendOffset: 12,
+        }}
+        axisBottom={{
+            format: '.%L',
+            tickValues: 'every 10 milliseconds',
+            legend: 'time scale',
+            legendOffset: -12,
+        }}
+        curve={select('curve', curveOptions, 'monotoneX')}
+        enablePointLabel={true}
+        pointSymbol={CustomSymbol}
+        pointSize={16}
+        pointBorderWidth={1}
+        pointBorderColor={{
+            from: 'color',
+            modifiers: [['darker', 0.3]],
+        }}
+        useMesh={true}
+        enableSlices={false}
+    />
+))
+
 stories.add('logarithmic scale', () => (
     <Line
         {...commonProperties}