fix: fixing axis zoom

The axis zoom was broken when fixing the axis props.
markmcdowell · Sep 6, 2019 · afc8778 · afc8778
1 parent 0df179d
commit afc8778
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 40 deletions.
diff --git a/packages/react-financial-charts-examples/src/components/stockChart.tsx b/packages/react-financial-charts-examples/src/components/stockChart.tsx
@@ -39,6 +39,7 @@ class StockChart extends React.Component<StockChartProps> {
         const start = xAccessor(data[data.length - 1]);
         const end = xAccessor(data[Math.max(0, data.length - 100)]);
         const xExtents = [start, end];
+        const yExtents = (d: IOHLCData) => [d.high, d.low];
 
         const margin = { left: 32, right: 70, top: 32, bottom: 32 };
         const gridWidth = width - margin.left - margin.right;
@@ -62,15 +63,16 @@ class StockChart extends React.Component<StockChartProps> {
                     height={gridHeight / 2}
                     origin={(w, h) => [0, h - (gridHeight / 2)]}
                     yExtents={(d: IOHLCData) => d.volume}>
-                    <BarSeries yAccessor={(d: IOHLCData) => d.volume} />
+                    <BarSeries
+                        fill={this.openCloseColor}
+                        yAccessor={(d: IOHLCData) => d.volume} />
                 </Chart>
-                <Chart id={2} yExtents={(d) => [d.high, d.low]}>
+                <Chart id={2} yExtents={yExtents}>
                     <XAxis
                         innerTickSize={-1 * gridHeight}
                         axisAt="bottom"
                         orient="bottom"
-                        ticks={6}
-                    />
+                        ticks={6} />
                     <YAxis
                         innerTickSize={-1 * gridWidth}
                         axisAt="right"
@@ -80,7 +82,7 @@ class StockChart extends React.Component<StockChartProps> {
                     <MouseCoordinateX
                         at="bottom"
                         orient="bottom"
-                        displayFormat={timeFormat("%H:%M")} />
+                        displayFormat={timeFormat("%d %b")} />
                     <MouseCoordinateY
                         at="right"
                         orient="right"
@@ -89,15 +91,19 @@ class StockChart extends React.Component<StockChartProps> {
                         itemType="last"
                         orient="right"
                         edgeAt="right"
-                        fill={(d: IOHLCData) => d.close > d.open ? "#26a69a" : "#ef5350"}
-                        lineStroke={(d: IOHLCData) => d.close > d.open ? "#26a69a" : "#ef5350"}
+                        fill={this.openCloseColor}
+                        lineStroke={this.openCloseColor}
                         displayFormat={format(".5f")}
                         yAccessor={(d: IOHLCData) => d.close} />
                     <CrossHairCursor />
                 </Chart>
             </ChartCanvas>
         );
     }
+
+    private readonly openCloseColor = (data: IOHLCData) => {
+        return data.close > data.open ? "#26a69a" : "#ef5350";
+    }
 }
 
 export default withDimensions(StockChart);
diff --git a/packages/react-financial-charts/src/axes/Axis.tsx b/packages/react-financial-charts/src/axes/Axis.tsx
@@ -13,41 +13,41 @@ interface AxisProps {
     readonly fontSize?: number;
     readonly fontWeight?: number;
     readonly orient?: "top" | "left" | "right" | "bottom";
-    innerTickSize?: number;
-    outerTickSize?: number;
-    tickFormat?: any; // func
-    tickPadding?: number;
-    tickSize?: number;
-    ticks?: number;
-    tickLabelFill?: string;
-    tickStroke?: string;
-    tickStrokeOpacity?: number;
-    tickStrokeWidth?: number;
-    tickStrokeDasharray?: strokeDashTypes;
-    tickValues?: number[] | any; // func
-    tickInterval?: number;
-    tickIntervalFunction?: any; // func
-    showDomain?: boolean;
-    showTicks?: boolean;
-    showTickLabel?: boolean;
-    className?: string;
-    axisZoomCallback?: any; // func
-    zoomEnabled?: boolean;
-    inverted?: boolean;
-    zoomCursorClassName?: string;
-    transform: number[];
-    range: number[];
-    getMouseDelta: any; // func
-    getScale: any; // func
-    bg: {
+    readonly innerTickSize?: number;
+    readonly outerTickSize?: number;
+    readonly tickFormat?: any; // func
+    readonly tickPadding?: number;
+    readonly tickSize?: number;
+    readonly ticks?: number;
+    readonly tickLabelFill?: string;
+    readonly tickStroke?: string;
+    readonly tickStrokeOpacity?: number;
+    readonly tickStrokeWidth?: number;
+    readonly tickStrokeDasharray?: strokeDashTypes;
+    readonly tickValues?: number[] | any; // func
+    readonly tickInterval?: number;
+    readonly tickIntervalFunction?: any; // func
+    readonly showDomain?: boolean;
+    readonly showTicks?: boolean;
+    readonly showTickLabel?: boolean;
+    readonly className?: string;
+    readonly axisZoomCallback?: any; // func
+    readonly zoomEnabled?: boolean;
+    readonly inverted?: boolean;
+    readonly zoomCursorClassName?: string;
+    readonly transform: number[];
+    readonly range: number[];
+    readonly getMouseDelta: any; // func
+    readonly getScale: any; // func
+    readonly bg: {
         h: number;
         x: number;
         w: number;
         y: number;
     };
-    edgeClip: boolean;
-    onContextMenu?: any; // func
-    onDoubleClick?: any; // func
+    readonly edgeClip: boolean;
+    readonly onContextMenu?: any; // func
+    readonly onDoubleClick?: any; // func
 }
 
 class Axis extends React.Component<AxisProps> {
@@ -247,7 +247,9 @@ function tickHelper(props, scale) {
     }
 
     return {
-        ticks, scale, tickStroke,
+        ticks,
+        scale,
+        tickStroke,
         tickLabelFill: (tickLabelFill || tickStroke),
         tickStrokeOpacity,
         tickStrokeWidth,

diff --git a/packages/react-financial-charts/src/axes/XAxis.tsx b/packages/react-financial-charts/src/axes/XAxis.tsx
@@ -71,7 +71,7 @@ export class XAxis extends React.Component<XAxisProps> {
             <Axis
                 {...rest}
                 {...moreProps}
-                getMouseDelta
+                getMouseDelta={getMouseDelta}
                 zoomEnabled={this.props.zoomEnabled && zoomEnabled}
                 axisZoomCallback={this.axisZoomCallback}
                 zoomCursorClassName="react-stockcharts-ew-resize-cursor" />

diff --git a/packages/react-financial-charts/src/axes/YAxis.tsx b/packages/react-financial-charts/src/axes/YAxis.tsx
@@ -68,7 +68,7 @@ export class YAxis extends React.Component<YAxisProps> {
             <Axis
                 {...rest}
                 {...moreProps}
-                getMouseDelta
+                getMouseDelta={getMouseDelta}
                 zoomEnabled={this.props.zoomEnabled && zoomEnabled}
                 edgeClip
                 axisZoomCallback={this.axisZoomCallback}