fix(axis): axisAt and orient now have defaults

You only need to specify axisAt and orient if you want to position other than the bottom for x and right for y. Closes react-financial#31
markmcdowell · Sep 11, 2019 · 509fab1 · 509fab1
1 parent 7870a36
commit 509fab1
Show file tree

Hide file tree

Showing 31 changed files with 131 additions and 211 deletions.
diff --git a/packages/charts/src/axes/XAxis.tsx b/packages/charts/src/axes/XAxis.tsx
@@ -4,7 +4,7 @@ import { strokeDashTypes } from "../utils";
 import Axis from "./Axis";
 
 interface XAxisProps {
-    readonly axisAt: number | "top" | "bottom" | "middle";
+    readonly axisAt?: number | "top" | "bottom" | "middle";
     readonly className?: string;
     readonly domainClassName?: string;
     readonly fill?: string;
@@ -16,7 +16,7 @@ interface XAxisProps {
     readonly innerTickSize?: number;
     readonly onContextMenu?: any; // func
     readonly onDoubleClick?: any; // func
-    readonly orient: "top" | "bottom";
+    readonly orient?: "top" | "bottom";
     readonly outerTickSize?: number;
     readonly showDomain?: boolean;
     readonly showTicks?: boolean;
@@ -42,30 +42,32 @@ interface XAxisProps {
 export class XAxis extends React.Component<XAxisProps> {
 
     public static defaultProps = {
+        axisAt: "bottom",
         className: "react-financial-charts-x-axis",
         domainClassName: "react-financial-charts-axis-domain",
         fill: "none",
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 12,
+        fontWeight: 400,
+        getMouseDelta: (startXY: [number, number], mouseXY: [number, number]) => startXY[0] - mouseXY[0],
+        opacity: 1,
+        orient: "bottom",
+        outerTickSize: 0,
+        innerTickSize: 5,
         showTicks: true,
         showTickLabel: true,
         showDomain: true,
         stroke: "#000000",
         strokeWidth: 1,
         strokeOpacity: 1,
-        opacity: 1,
-        outerTickSize: 0,
-        innerTickSize: 5,
         ticks: 10,
         tickPadding: 6,
         tickLabelFill: "#000000",
         tickStroke: "#000000",
         tickStrokeOpacity: 1,
-        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
-        fontSize: 12,
-        fontWeight: 400,
         xZoomHeight: 25,
         zoomEnabled: true,
         zoomCursorClassName: "react-financial-charts-ew-resize-cursor",
-        getMouseDelta: (startXY: [number, number], mouseXY: [number, number]) => startXY[0] - mouseXY[0],
     };
 
     public static contextTypes = {

diff --git a/packages/charts/src/axes/YAxis.tsx b/packages/charts/src/axes/YAxis.tsx
@@ -4,7 +4,7 @@ import { strokeDashTypes } from "../utils";
 import Axis from "./Axis";
 
 interface YAxisProps {
-    readonly axisAt: number | "left" | "right" | "middle";
+    readonly axisAt?: number | "left" | "right" | "middle";
     readonly className?: string;
     readonly domainClassName?: string;
     readonly fill?: string;
@@ -16,7 +16,7 @@ interface YAxisProps {
     readonly innerTickSize?: number;
     readonly onContextMenu?: any; // func
     readonly onDoubleClick?: any; // func
-    readonly orient: "left" | "right";
+    readonly orient?: "left" | "right";
     readonly outerTickSize?: number;
     readonly showDomain?: boolean;
     readonly showTicks?: boolean;
@@ -42,30 +42,32 @@ interface YAxisProps {
 export class YAxis extends React.Component<YAxisProps> {
 
     public static defaultProps = {
-        showTicks: true,
-        showTickLabel: true,
-        showDomain: true,
+        axisAt: "right",
         className: "react-financial-charts-y-axis",
-        ticks: 10,
-        outerTickSize: 0,
         domainClassName: "react-financial-charts-axis-domain",
         fill: "none",
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 12,
+        fontWeight: 400,
+        getMouseDelta: (startXY, mouseXY) => startXY[1] - mouseXY[1],
+        innerTickSize: 5,
+        outerTickSize: 0,
+        opacity: 1,
+        orient: "right",
+        showTicks: true,
+        showTickLabel: true,
+        showDomain: true,
         stroke: "#000000",
         strokeWidth: 1,
         strokeOpacity: 1,
-        opacity: 1,
-        innerTickSize: 5,
         tickPadding: 6,
         tickLabelFill: "#000000",
+        ticks: 10,
         tickStroke: "#000000",
         tickStrokeOpacity: 1,
-        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
-        fontSize: 12,
-        fontWeight: 400,
         yZoomWidth: 40,
         zoomEnabled: true,
         zoomCursorClassName: "react-financial-charts-ns-resize-cursor",
-        getMouseDelta: (startXY, mouseXY) => startXY[1] - mouseXY[1],
     };
 
     public static contextTypes = {

diff --git a/packages/charts/src/coordinates/EdgeIndicator.tsx b/packages/charts/src/coordinates/EdgeIndicator.tsx
@@ -29,8 +29,8 @@ export class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
     public static defaultProps = {
         className: "react-financial-charts-edgeindicator",
         type: "horizontal",
-        orient: "left",
-        edgeAt: "left",
+        orient: "right",
+        edgeAt: "right",
         textFill: "#FFFFFF",
         displayFormat: format(".2f"),
         yAxisPad: 0,

diff --git a/packages/charts/src/coordinates/MouseCoordinateY.tsx b/packages/charts/src/coordinates/MouseCoordinateY.tsx
@@ -28,8 +28,8 @@ export class MouseCoordinateY extends React.Component<MouseCoordinateYProps> {
         yAxisPad: 0,
         rectWidth: 50,
         rectHeight: 20,
-        orient: "left",
-        at: "left",
+        orient: "right",
+        at: "right",
         dx: 0,
         arrowWidth: 10,
         fill: "#4a4a4a",

diff --git a/packages/charts/src/utils/PureComponent.tsx b/packages/charts/src/utils/PureComponent.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import shallowEqual from "./shallowEqual";
 
-export class PureComponent<T> extends React.Component<T> {
-    public shouldComponentUpdate(nextProps, nextState, nextContext) {
+export class PureComponent<T, S = {}, SS = any> extends React.Component<T, S, SS> {
+    public shouldComponentUpdate(nextProps: T, nextState: S, nextContext: SS) {
         return !shallowEqual(this.props, nextProps)
             || !shallowEqual(this.state, nextState)
             || !shallowEqual(this.context, nextContext);

diff --git a/packages/stories/src/indicators/ema/emaIndicator.tsx b/packages/stories/src/indicators/ema/emaIndicator.tsx
@@ -17,7 +17,7 @@ interface ChartProps {
 
 class EMAIndicator extends React.Component<ChartProps> {
 
-    private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
+    private readonly margin = { left: 0, right: 40, top: 8, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()
         .inputDateAccessor((d: IOHLCData) => d.date);
 
@@ -74,14 +74,8 @@ class EMAIndicator extends React.Component<ChartProps> {
                 <Chart
                     id={1}
                     yExtents={[0, 100]}>
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
 
                     <LineSeries yAccessor={ema26.accessor()} stroke={ema26.stroke()} />
                     <LineSeries yAccessor={ema12.accessor()} stroke={ema12.stroke()} />

diff --git a/packages/stories/src/indicators/ema/index.stories.tsx b/packages/stories/src/indicators/ema/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import EMAIndicator from "./emaIndicator";
 
 storiesOf("Indicators", module)
-    .add("EMA", () => {
-        return (
-            <EMAIndicator />
-        );
+    .add("EMA", () => <EMAIndicator />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/indicators/macd/index.stories.tsx b/packages/stories/src/indicators/macd/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import MACDIndicator from "./macdIndicator";
 
 storiesOf("Indicators", module)
-    .add("MACD", () => {
-        return (
-            <MACDIndicator />
-        );
+    .add("MACD", () => <MACDIndicator />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/indicators/macd/macdIndicator.tsx b/packages/stories/src/indicators/macd/macdIndicator.tsx
@@ -79,14 +79,8 @@ class MACDIndicator extends React.Component<MACDIndicatorProps> {
                 <Chart
                     id={1}
                     yExtents={calculator.accessor()}>
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={2} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={2} />
 
                     <MACDSeries
                         yAccessor={this.yAccessor}

diff --git a/packages/stories/src/indicators/rsi/index.stories.tsx b/packages/stories/src/indicators/rsi/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import RSIIndicator from "./rsiIndicator";
 
 storiesOf("Indicators", module)
-    .add("RSI", () => {
-        return (
-            <RSIIndicator />
-        );
+    .add("RSI", () => <RSIIndicator />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/indicators/rsi/rsiIndicator.tsx b/packages/stories/src/indicators/rsi/rsiIndicator.tsx
@@ -66,14 +66,8 @@ class RSIIndicator extends React.Component<RSIIndicatorProps> {
                 <Chart
                     id={1}
                     yExtents={[0, 100]}>
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        tickValues={[30, 50, 70]} />
+                    <XAxis ticks={6} />
+                    <YAxis tickValues={[30, 50, 70]} />
 
                     <RSISeries yAccessor={(d: any) => d.rsi} />
 

diff --git a/packages/stories/src/series/area/basicAreaSeries.tsx b/packages/stories/src/series/area/basicAreaSeries.tsx
@@ -55,26 +55,20 @@ class BasicAreaSeries extends React.Component<BasicAreaSeriesProps> {
                 xExtents={xExtents}>
                 <Chart
                     id={1}
-                    yExtents={this.candleChartExtents}>
-                    <AreaSeries yAccessor={this.areaSeriesAccessor} />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    yExtents={this.yExtents}>
+                    <AreaSeries yAccessor={this.yAccessor} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
     }
 
-    private readonly areaSeriesAccessor = (data: IOHLCData) => {
+    private readonly yAccessor = (data: IOHLCData) => {
         return data.close;
     }
 
-    private readonly candleChartExtents = (data: IOHLCData) => {
+    private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     }
 }

diff --git a/packages/stories/src/series/area/index.stories.tsx b/packages/stories/src/series/area/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicAreaSeries from "./basicAreaSeries";
 
 storiesOf("Series", module)
-    .add("Area", () => {
-        return (
-            <BasicAreaSeries />
-        );
+    .add("Area", () => <BasicAreaSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/bar/basicBarSeries.tsx b/packages/stories/src/series/bar/basicBarSeries.tsx
@@ -57,14 +57,8 @@ class BasicBarSeries extends React.Component<BasicBarSeriesProps> {
                     id={1}
                     yExtents={this.yExtents}>
                     <BarSeries yAccessor={this.yAccessor} />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );

diff --git a/packages/stories/src/series/bar/index.stories.tsx b/packages/stories/src/series/bar/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicBarSeries from "./basicBarSeries";
 
 storiesOf("Series", module)
-    .add("Bar", () => {
-        return (
-            <BasicBarSeries />
-        );
+    .add("Bar", () => <BasicBarSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/baseline/basicBaselineSeries.tsx b/packages/stories/src/series/baseline/basicBaselineSeries.tsx
@@ -56,28 +56,22 @@ class BasicBaselineSeries extends React.Component<BasicBaselineSeriesProps> {
                 xExtents={xExtents}>
                 <Chart
                     id={1}
-                    yExtents={this.candleChartExtents}>
+                    yExtents={this.yExtents}>
                     <AlternatingFillAreaSeries
-                        yAccessor={this.areaSeriesAccessor}
+                        yAccessor={this.yAccessor}
                         baseAt={base} />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
     }
 
-    private readonly areaSeriesAccessor = (data: IOHLCData) => {
+    private readonly yAccessor = (data: IOHLCData) => {
         return data.close;
     }
 
-    private readonly candleChartExtents = (data: IOHLCData) => {
+    private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     }
 }

diff --git a/packages/stories/src/series/baseline/index.stories.tsx b/packages/stories/src/series/baseline/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicBaselineSeries from "./basicBaselineSeries";
 
 storiesOf("Series", module)
-    .add("Baseline", () => {
-        return (
-            <BasicBaselineSeries />
-        );
+    .add("Baseline", () => <BasicBaselineSeries />, {
+        options: {
+            showPanel: true,
+        },
     });