docs: adding interaction section

Adding disable, disablePan, disableZoom, clamp and zoomAchors.

package.json

@@ -53,6 +53,7 @@
     "npm-run-all": "^4.1.5",
     "react-docgen-typescript-loader": "^3.2.1",
     "rimraf": "^3.0.0",
+    "source-map-loader": "^0.2.4",
     "ts-jest": "^24.1.0",
     "ts-loader": "^6.1.2",
     "tslint": "^5.20.0",

packages/stories/.storybook/webpack.config.js

@@ -1,4 +1,13 @@
 module.exports = ({ config }) => {
+    config.module.rules.push({
+        test: /\.(js)$/,
+        enforce: "pre",
+        use: [
+            {
+                loader: require.resolve("source-map-loader"),
+            }
+        ],
+    });
     config.module.rules.push({
         test: /\.(tsx?)$/,
         use: [

packages/stories/src/showcase/Intro.stories.mdx → packages/stories/src/features/Intro.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta, Preview } from "@storybook/addon-docs/blocks";
 import StockChart from "./stockChart";
 
-<Meta title="Showcase|Intro" />
+<Meta title="Features|Intro" />
 
 # React Financial Charts
 

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { ChartCanvas } from "react-financial-charts";
+import { lastVisibleItemBasedZoomAnchor, mouseBasedZoomAnchor, rightDomainBasedZoomAnchor } from "react-financial-charts/lib/utils/zoomBehavior";
+import Interaction from "./interaction";
+
+export default {
+    title: "Features|Interaction",
+    component: ChartCanvas,
+};
+
+export const clamp = () => <Interaction clamp />;
+
+export const disable = () => <Interaction disableInteraction />;
+
+export const disablePan = () => <Interaction disablePan />;
+
+export const disableZoom = () => <Interaction disableZoom />;
+
+export const zoomAnchorToMouse = () => <Interaction zoomAnchor={mouseBasedZoomAnchor} />;
+
+export const zoomAnchorToLastVisible = () => <Interaction zoomAnchor={lastVisibleItemBasedZoomAnchor} />;
+
+export const zoomAnchorToBounds = () => <Interaction zoomAnchor={rightDomainBasedZoomAnchor} />;

packages/stories/src/features/interaction/interaction.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { Chart, ChartCanvas } from "react-financial-charts";
+import { XAxis, YAxis } from "react-financial-charts/lib/axes";
+import { discontinuousTimeScaleProviderBuilder } from "react-financial-charts/lib/scale";
+import { CandlestickSeries } from "react-financial-charts/lib/series";
+import { withDeviceRatio } from "react-financial-charts/lib/utils";
+import { IOHLCData, withOHLCData, withSize } from "../../data";
+
+interface ChartProps {
+    readonly clamp?: boolean;
+    readonly data: IOHLCData[];
+    readonly disableInteraction?: boolean;
+    readonly disablePan?: boolean;
+    readonly disableZoom?: boolean;
+    readonly height: number;
+    readonly ratio: number;
+    readonly width: number;
+    readonly zoomAnchor?: any;
+}
+
+class Interaction extends React.Component<ChartProps> {
+
+    private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
+    private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()
+        .inputDateAccessor((d: IOHLCData) => d.date);
+
+    public render() {
+
+        const {
+            clamp,
+            data: initialData,
+            disablePan = false,
+            disableZoom = false,
+            disableInteraction,
+            height,
+            ratio,
+            width,
+            zoomAnchor,
+        } = this.props;
+
+        const { margin, xScaleProvider } = this;
+
+        const {
+            data,
+            xScale,
+            xAccessor,
+            displayXAccessor,
+        } = xScaleProvider(initialData);
+
+        const start = xAccessor(data[data.length - 1]);
+        const end = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [start, end];
+
+        return (
+            <ChartCanvas
+                clamp={clamp}
+                height={height}
+                ratio={ratio}
+                width={width}
+                margin={margin}
+                data={data}
+                disableInteraction={disableInteraction}
+                displayXAccessor={displayXAccessor}
+                panEvent={!disablePan}
+                seriesName="Data"
+                xScale={xScale}
+                xAccessor={xAccessor}
+                xExtents={xExtents}
+                zoomEvent={!disableZoom}
+                zoomAnchor={zoomAnchor}>
+                <Chart
+                    id={1}
+                    yExtents={this.yExtents}>
+                    <CandlestickSeries />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
+                </Chart>
+            </ChartCanvas>
+        );
+    }
+
+    private readonly yExtents = (data: IOHLCData) => {
+        return [data.high, data.low];
+    }
+}
+
+export default withOHLCData()(withSize()(withDeviceRatio()(Interaction)));

packages/stories/src/showcase/stockChart.tsx → packages/stories/src/features/stockChart.tsx

@@ -9,6 +9,7 @@ import { discontinuousTimeScaleProviderBuilder } from "react-financial-charts/li
 import { BarSeries, CandlestickSeries, ElderRaySeries, LineSeries } from "react-financial-charts/lib/series";
 import { MovingAverageTooltip, OHLCTooltip, SingleValueTooltip } from "react-financial-charts/lib/tooltip";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
+import { lastVisibleItemBasedZoomAnchor } from "react-financial-charts/lib/utils/zoomBehavior";
 import { IOHLCData, withOHLCData, withSize } from "../data";
 
 interface StockChartProps {
@@ -86,7 +87,8 @@ class StockChart extends React.Component<StockChartProps> {
                 seriesName="Data"
                 xScale={xScale}
                 xAccessor={xAccessor}
-                xExtents={xExtents}>
+                xExtents={xExtents}
+                zoomAnchor={lastVisibleItemBasedZoomAnchor}>
                 <Chart
                     id={1}
                     height={chartHeight}

packages/stories/src/series/area/basicAreaSeries.tsx

@@ -6,14 +6,14 @@ import { AreaSeries } from "react-financial-charts/lib/series";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
 import { IOHLCData, withOHLCData, withSize } from "../../data";
 
-interface BasicAreaSeriesProps {
+interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
     readonly width: number;
     readonly ratio: number;
 }
 
-class BasicAreaSeries extends React.Component<BasicAreaSeriesProps> {
+class BasicAreaSeries extends React.Component<ChartProps> {
 
     private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()

packages/stories/src/series/bar/basicBarSeries.tsx

@@ -6,14 +6,14 @@ import { BarSeries } from "react-financial-charts/lib/series";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
 import { IOHLCData, withOHLCData, withSize } from "../../data";
 
-interface BasicBarSeriesProps {
+interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
     readonly width: number;
     readonly ratio: number;
 }
 
-class BasicBarSeries extends React.Component<BasicBarSeriesProps> {
+class BasicBarSeries extends React.Component<ChartProps> {
 
     private readonly margin = { left: 0, right: 90, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()

packages/stories/src/series/baseline/basicBaselineSeries.tsx

@@ -6,14 +6,14 @@ import { AlternatingFillAreaSeries } from "react-financial-charts/lib/series";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
 import { IOHLCData, withOHLCData, withSize } from "../../data";
 
-interface BasicBaselineSeriesProps {
+interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
     readonly width: number;
     readonly ratio: number;
 }
 
-class BasicBaselineSeries extends React.Component<BasicBaselineSeriesProps> {
+class BasicBaselineSeries extends React.Component<ChartProps> {
 
     private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()

packages/stories/src/series/candlestick/basicCandlestick.tsx

@@ -6,14 +6,14 @@ import { CandlestickSeries } from "react-financial-charts/lib/series";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
 import { IOHLCData, withOHLCData, withSize } from "../../data";
 
-interface BasicCandlestickProps {
+interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
     readonly width: number;
     readonly ratio: number;
 }
 
-class BasicCandlestick extends React.Component<BasicCandlestickProps> {
+class BasicCandlestick extends React.Component<ChartProps> {
 
     private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()

packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx

@@ -7,14 +7,14 @@ import { CandlestickSeries } from "react-financial-charts/lib/series";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
 import { IOHLCData, withOHLCData, withSize } from "../../data";
 
-interface BasicHeikinAshiSeriesProps {
+interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
     readonly width: number;
     readonly ratio: number;
 }
 
-class BasicHeikinAshiSeries extends React.Component<BasicHeikinAshiSeriesProps> {
+class BasicHeikinAshiSeries extends React.Component<ChartProps> {
 
     private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()

packages/stories/src/series/kagi/basicKagiSeries.tsx

@@ -7,14 +7,14 @@ import { KagiSeries } from "react-financial-charts/lib/series";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
 import { IOHLCData, withOHLCData, withSize } from "../../data";
 
-interface BasicKagiSeriesProps {
+interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
     readonly width: number;
     readonly ratio: number;
 }
 
-class BasicKagiSeries extends React.Component<BasicKagiSeriesProps> {
+class BasicKagiSeries extends React.Component<ChartProps> {
 
     private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()

packages/stories/src/series/line/basicLineSeries.tsx

@@ -6,14 +6,14 @@ import { LineSeries } from "react-financial-charts/lib/series";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
 import { IOHLCData, withOHLCData, withSize } from "../../data";
 
-interface BasicLineSeriesProps {
+interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
     readonly width: number;
     readonly ratio: number;
 }
 
-class BasicLineSeries extends React.Component<BasicLineSeriesProps> {
+class BasicLineSeries extends React.Component<ChartProps> {
 
     private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()

packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx

@@ -7,14 +7,14 @@ import { PointAndFigureSeries } from "react-financial-charts/lib/series";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
 import { IOHLCData, withOHLCData, withSize } from "../../data";
 
-interface BasicPointAndFigureSeriesProps {
+interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
     readonly width: number;
     readonly ratio: number;
 }
 
-class BasicPointAndFigureSeries extends React.Component<BasicPointAndFigureSeriesProps> {
+class BasicPointAndFigureSeries extends React.Component<ChartProps> {
 
     private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()

packages/stories/src/series/renko/basicRenkoSeries.tsx

@@ -7,14 +7,14 @@ import { RenkoSeries } from "react-financial-charts/lib/series";
 import { withDeviceRatio } from "react-financial-charts/lib/utils";
 import { IOHLCData, withOHLCData, withSize } from "../../data";
 
-interface BasicRenkoSeriesProps {
+interface ChartProps {
     readonly data: IOHLCData[];
     readonly height: number;
     readonly width: number;
     readonly ratio: number;
 }
 
-class BasicRenkoSeries extends React.Component<BasicRenkoSeriesProps> {
+class BasicRenkoSeries extends React.Component<ChartProps> {
 
     private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()