feat(stories): adding custom timeFormat to scales stories

Time format matches the default format.
markmcdowell · Aug 29, 2020 · c72b81c · c72b81c
1 parent f97e9c5
commit c72b81c
Showing 1 changed file with 32 additions and 5 deletions.
diff --git a/packages/stories/src/features/scales/Scales.tsx b/packages/stories/src/features/scales/Scales.tsx
@@ -1,9 +1,20 @@
 import { format } from "d3-format";
+import { timeSecond, timeMinute, timeHour, timeDay, timeWeek, timeMonth, timeYear } from "d3-time";
+import { timeFormat } from "d3-time-format";
 import { scaleTime, ScaleContinuousNumeric } from "d3-scale";
 import * as React from "react";
 import { Chart, ChartCanvas, XAxis, YAxis, CandlestickSeries, withDeviceRatio, withSize } from "react-financial-charts";
 import { IOHLCData, withOHLCData } from "../../data";
 
+const formatMillisecond = timeFormat(".%L"),
+    formatSecond = timeFormat(":%S"),
+    formatMinute = timeFormat("%H:%M"),
+    formatHour = timeFormat("%H:%M"),
+    formatDay = timeFormat("%e"),
+    formatWeek = timeFormat("%e"),
+    formatMonth = timeFormat("%b"),
+    formatYear = timeFormat("%Y");
+
 interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
@@ -16,15 +27,13 @@ class Scales extends React.Component<ChartProps> {
     private readonly margin = { left: 0, right: 48, top: 0, bottom: 24 };
 
     public render() {
-        const { data: initialData, height, ratio, width, yScale } = this.props;
+        const { data, height, ratio, width, yScale } = this.props;
 
         const xAccessor = (d: IOHLCData) => d.date;
-        const xScale = scaleTime();
-        const data = initialData;
-
         const start = xAccessor(data[data.length - 1]);
         const end = xAccessor(data[Math.max(0, data.length - 100)]);
         const xExtents = [start, end];
+        const xScale = scaleTime();
 
         return (
             <ChartCanvas
@@ -40,7 +49,7 @@ class Scales extends React.Component<ChartProps> {
             >
                 <Chart id={1} yExtents={this.yExtents} yScale={yScale}>
                     <CandlestickSeries />
-                    <XAxis />
+                    <XAxis tickFormat={this.timeFormat} />
                     <YAxis tickFormat={format(".2f")} />
                 </Chart>
             </ChartCanvas>
@@ -50,6 +59,24 @@ class Scales extends React.Component<ChartProps> {
     private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     };
+
+    private readonly timeFormat = (date: Date) => {
+        return (timeSecond(date) < date
+            ? formatMillisecond
+            : timeMinute(date) < date
+            ? formatSecond
+            : timeHour(date) < date
+            ? formatMinute
+            : timeDay(date) < date
+            ? formatHour
+            : timeMonth(date) < date
+            ? timeWeek(date) < date
+                ? formatDay
+                : formatWeek
+            : timeYear(date) < date
+            ? formatMonth
+            : formatYear)(date);
+    };
 }
 
 export const Daily = withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(Scales)));