feat(stories): adding updating data example

Testing updates with continuous data scale.

packages/stories/src/data/index.ts

@@ -1,2 +1,3 @@
 export * from "./iOHLCData";
 export * from "./withOHLCData";
+export * from "./withUpdatingData";

packages/stories/src/data/withUpdatingData.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { IOHLCData } from "./iOHLCData";
+
+interface WithOHLCDataProps {
+    readonly data: IOHLCData[];
+}
+
+interface WithOHLCState {
+    data: IOHLCData[];
+    length: number;
+}
+
+export function withUpdatingData(initialLength = 120, interval = 1_000) {
+    return <TProps extends WithOHLCDataProps>(OriginalComponent: React.ComponentClass<TProps>) => {
+        return class WithOHLCData extends React.Component<TProps, WithOHLCState> {
+            public interval?: number;
+
+            public constructor(props: TProps) {
+                super(props);
+
+                this.state = {
+                    data: props.data.slice(0, initialLength),
+                    length: initialLength,
+                };
+            }
+
+            public componentDidMount() {
+                this.interval = window.setInterval(() => {
+                    const { data } = this.props;
+                    const { length } = this.state;
+
+                    if (length < data.length) {
+                        this.setState({
+                            data: data.slice(0, length + 1),
+                            length: length + 1,
+                        });
+                    } else {
+                        window.clearInterval(this.interval);
+                    }
+                }, interval);
+            }
+
+            public componentWillUnmount() {
+                window.clearInterval(this.interval);
+            }
+
+            public render() {
+                const { data } = this.state;
+
+                return <OriginalComponent {...(this.props as TProps)} data={data} />;
+            }
+        };
+    };
+}

packages/stories/src/features/updating/BasicLineSeries.tsx

@@ -0,0 +1,95 @@
+import { scaleTime } from "d3-scale";
+import * as React from "react";
+import {
+    CandlestickSeries,
+    Chart,
+    ChartCanvas,
+    CrossHairCursor,
+    timeFormat,
+    withDeviceRatio,
+    withSize,
+    XAxis,
+    YAxis,
+} from "react-financial-charts";
+import { IOHLCData, withUpdatingData, withOHLCData } from "../../data";
+
+interface ChartProps {
+    readonly data: IOHLCData[];
+    readonly height: number;
+    readonly width: number;
+    readonly ratio: number;
+}
+
+class BasicLineSeries extends React.Component<ChartProps> {
+    private readonly margin = { left: 0, right: 56, top: 0, bottom: 24 };
+    private readonly padding = { left: 0, right: 32, top: 0, bottom: 0 };
+
+    public render() {
+        const { data, height, ratio, width } = this.props;
+
+        const xScale = scaleTime();
+        const xAccessor = (d: IOHLCData) => d.date;
+
+        return (
+            <ChartCanvas
+                height={height}
+                ratio={ratio}
+                width={width}
+                margin={this.margin}
+                padding={this.padding}
+                data={data}
+                seriesName="Data"
+                xScale={xScale}
+                xAccessor={xAccessor}
+            >
+                <Chart id={1} yExtentsCalculator={this.yExtentsCalculator}>
+                    <CandlestickSeries />
+                    <XAxis tickFormat={timeFormat} />
+                    <YAxis />
+                </Chart>
+                <CrossHairCursor snapX={false} />
+            </ChartCanvas>
+        );
+    }
+
+    private readonly yExtentsCalculator = ({ plotData }: { plotData: IOHLCData[] }) => {
+        let min: number | undefined;
+        let max: number | undefined;
+        for (const { low, high } of plotData) {
+            if (min === undefined) {
+                min = low;
+            }
+            if (max === undefined) {
+                max = high;
+            }
+
+            if (low !== undefined) {
+                if (min! > low) {
+                    min = low;
+                }
+            }
+
+            if (high !== undefined) {
+                if (max! < high) {
+                    max = high;
+                }
+            }
+        }
+
+        if (min === undefined) {
+            min = 0;
+        }
+
+        if (max === undefined) {
+            max = 0;
+        }
+
+        const padding = (max - min) * 0.1;
+
+        return [min - padding, max + padding * 2];
+    };
+}
+
+export const Updating = withOHLCData("SECONDS")(
+    withUpdatingData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(BasicLineSeries))),
+);

packages/stories/src/features/updating/index.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Updating } from "./BasicLineSeries";
+
+export default {
+    title: "Features/Updating",
+};
+
+export const continuous = () => <Updating />;