docs: adding intraday example

Adding example loading intraday data.
markmcdowell · Dec 16, 2019 · e687fb7 · e687fb7
1 parent 1fca524
commit e687fb7
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/packages/stories/src/data/withOHLCData.tsx b/packages/stories/src/data/withOHLCData.tsx
@@ -7,7 +7,13 @@ const parseDate = timeParse("%Y-%m-%d");
 
 const parseData = () => {
     return (d: any) => {
-        d.date = parseDate(d.date)!;
+
+        let date = parseDate(d.date);
+        if (date === null) {
+            date = new Date(Number(d.date));
+        }
+
+        d.date = new Date(date);
         d.open = +d.open;
         d.high = +d.high;
         d.low = +d.low;

diff --git a/packages/stories/src/features/FullCanvas.stories.tsx b/packages/stories/src/features/FullCanvas.stories.tsx
@@ -1,9 +1,11 @@
 import * as React from "react";
-import StockChart from "./stockChart";
+import StockChart, { IntradayStockChart } from "./stockChart";
 
 export default {
     component: StockChart,
     title: "Features|Full Screen",
 };
 
-export const demo = () => <StockChart />;
+export const daily = () => <StockChart />;
+
+export const intraDay = () => <IntradayStockChart dateTimeFormat="%H:%M" />;
diff --git a/packages/stories/src/features/stockChart.tsx b/packages/stories/src/features/stockChart.tsx
@@ -16,6 +16,7 @@ import { IOHLCData, withOHLCData, withSize } from "../data";
 interface StockChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
+    readonly dateTimeFormat?: string;
     readonly width: number;
     readonly ratio: number;
 }
@@ -24,14 +25,14 @@ class StockChart extends React.Component<StockChartProps> {
 
     private readonly margin = { left: 0, right: 48, top: 0, bottom: 24 };
     private readonly pricesDisplayFormat = format(".2f");
-    private readonly timeDisplayFormat = timeFormat("%d %b");
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()
         .inputDateAccessor((d: IOHLCData) => d.date);
 
     public render() {
 
         const {
             data: initialData,
+            dateTimeFormat = "%d %b",
             height,
             ratio,
             width,
@@ -75,6 +76,8 @@ class StockChart extends React.Component<StockChartProps> {
         const barChartOrigin = (_: number, h: number) => [0, h - barChartHeight - elderRayHeight];
         const chartHeight = gridHeight - elderRayHeight;
 
+        const timeDisplayFormat = timeFormat(dateTimeFormat);
+
         return (
             <ChartCanvas
                 height={height}
@@ -110,8 +113,7 @@ class StockChart extends React.Component<StockChartProps> {
                     <CandlestickSeries />
                     <LineSeries yAccessor={ema26.accessor()} stroke={ema26.stroke()} />
                     <LineSeries yAccessor={ema12.accessor()} stroke={ema12.stroke()} />
-                    <MouseCoordinateY
-                        displayFormat={this.pricesDisplayFormat} />
+                    <MouseCoordinateY displayFormat={this.pricesDisplayFormat} />
                     <EdgeIndicator
                         itemType="last"
                         fill={this.openCloseColor}
@@ -151,7 +153,7 @@ class StockChart extends React.Component<StockChartProps> {
                         ticks={6} />
                     <YAxis ticks={4} tickFormat={this.pricesDisplayFormat} />
 
-                    <MouseCoordinateX displayFormat={this.timeDisplayFormat} />
+                    <MouseCoordinateX displayFormat={timeDisplayFormat} />
                     <MouseCoordinateY displayFormat={this.pricesDisplayFormat} />
 
                     <ElderRaySeries yAccessor={elder.accessor()} />
@@ -190,3 +192,4 @@ class StockChart extends React.Component<StockChartProps> {
 }
 
 export default withOHLCData()(withSize(600)(withDeviceRatio()(StockChart)));
+export const IntradayStockChart = withOHLCData("MSFT_INTRA_DAY")(withSize(600)(withDeviceRatio()(StockChart)));