fix(charts): arrowWidth was being ignored

Setting arrowWidth now actually draws an arrow.

Closes react-financial#75

Author: markmcdowell

package-lock.json

@@ -224,6 +224,7 @@ export function drawOnCanvas(ctx: CanvasRenderingContext2D, props) {
     ctx.setLineDash([]);
     if (isDefined(edge.coordinateBase)) {
         const {
+            arrowWidth,
             rectWidth,
             rectHeight,
             rectRadius,
@@ -241,12 +242,28 @@ export function drawOnCanvas(ctx: CanvasRenderingContext2D, props) {
             ctx.lineWidth = edge.coordinateBase.strokeWidth;
         }
 
-        const x = edge.coordinateBase.edgeXRect;
+        let x = edge.coordinateBase.edgeXRect;
         const y = edge.coordinateBase.edgeYRect;
+        const halfHeight = rectHeight / 2;
 
         ctx.beginPath();
 
-        if (rectRadius) {
+        if (arrowWidth > 0 && edge.orient === "right") {
+            x -= arrowWidth;
+            ctx.moveTo(x, y + halfHeight);
+            ctx.lineTo(x + arrowWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight);
+            ctx.lineTo(x + arrowWidth, y + rectHeight);
+            ctx.closePath();
+        } else if (arrowWidth > 0 && edge.orient === "left") {
+            ctx.moveTo(x, y);
+            ctx.lineTo(x + rectWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y + halfHeight);
+            ctx.lineTo(x + rectWidth, y + rectHeight);
+            ctx.lineTo(x, y + rectHeight);
+            ctx.closePath();
+        } else if (rectRadius) {
             roundRect(ctx, x, y, rectWidth, rectHeight, 3);
         } else {
             ctx.rect(x + 0.5, y + 0.5, rectWidth, rectHeight);

packages/charts/src/coordinates/EdgeCoordinateV3.tsx

@@ -8,20 +8,20 @@ import { drawOnCanvas, renderSVG } from "./EdgeCoordinateV3";
 import { first, functor, isDefined, last, noop, strokeDashTypes } from "../utils";
 
 interface EdgeIndicatorProps {
-    readonly yAccessor?: any; // func
-    readonly type?: "horizontal";
+    readonly arrowWidth?: number;
     readonly className?: string;
+    readonly displayFormat?: any; // func
+    readonly edgeAt?: "left" | "right";
     readonly fill?: string | any; // func
-    readonly lineStroke?: string | any; // func
-    readonly textFill?: string | any; // func
     readonly itemType: "first" | "last";
+    readonly lineStroke?: string | any; // func
+    readonly lineStrokeDasharray?: strokeDashTypes;
     readonly orient?: "left" | "right";
-    readonly edgeAt?: "left" | "right";
-    readonly displayFormat?: any; // func
     readonly rectHeight?: number;
     readonly rectWidth?: number;
-    readonly arrowWidth?: number;
-    readonly lineStrokeDasharray?: strokeDashTypes;
+    readonly textFill?: string | any; // func
+    readonly type?: "horizontal";
+    readonly yAccessor?: any; // func
 }
 
 export class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
@@ -36,7 +36,7 @@ export class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
         yAxisPad: 0,
         rectHeight: 20,
         rectWidth: 50,
-        arrowWidth: 10,
+        arrowWidth: 0,
         fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
         fontSize: 13,
         dx: 0,

packages/charts/src/coordinates/EdgeIndicator.tsx

@@ -8,30 +8,31 @@ import { drawOnCanvas, renderSVG } from "./EdgeCoordinateV3";
 import { isNotDefined } from "../utils";
 
 interface MouseCoordinateYProps {
-    readonly displayFormat: any; // func
-    readonly yAxisPad?: number;
-    readonly rectWidth?: number;
-    readonly rectHeight?: number;
-    readonly orient?: "bottom" | "top" | "left" | "right";
+    readonly arrowWidth?: number;
     readonly at?: "bottom" | "top" | "left" | "right";
+    readonly displayFormat: any; // func
     readonly dx?: number;
-    readonly fill?: string;
-    readonly opacity?: number;
     readonly fontFamily?: string;
     readonly fontSize?: number;
+    readonly fill?: string;
+    readonly opacity?: number;
+    readonly orient?: "bottom" | "top" | "left" | "right";
+    readonly rectWidth?: number;
+    readonly rectHeight?: number;
     readonly textFill?: string;
+    readonly yAxisPad?: number;
 }
 
 export class MouseCoordinateY extends React.Component<MouseCoordinateYProps> {
 
     public static defaultProps = {
+        arrowWidth: 0,
         yAxisPad: 0,
         rectWidth: 50,
         rectHeight: 20,
         orient: "right",
         at: "right",
         dx: 0,
-        arrowWidth: 10,
         fill: "#37474F",
         opacity: 1,
         fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",

packages/charts/src/coordinates/MouseCoordinateY.tsx

@@ -0,0 +1,80 @@
+import { format } from "d3-format";
+import * as React from "react";
+import { Chart, ChartCanvas } from "react-financial-charts";
+import { XAxis, YAxis } from "react-financial-charts/lib/axes";
+import { MouseCoordinateY } from "react-financial-charts/lib/coordinates";
+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 arrowWidth?: number;
+    readonly data: IOHLCData[];
+    readonly height: number;
+    readonly ratio: number;
+    readonly width: number;
+}
+
+class Coordinates extends React.Component<ChartProps> {
+
+    private readonly margin = { left: 0, right: 48, top: 0, bottom: 24 };
+    private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()
+        .inputDateAccessor((d: IOHLCData) => d.date);
+    private readonly pricesDisplayFormat = format(".2f");
+
+    public render() {
+
+        const {
+            arrowWidth,
+            data: initialData,
+            height,
+            ratio,
+            width,
+        } = 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
+                height={height}
+                ratio={ratio}
+                width={width}
+                margin={margin}
+                data={data}
+                displayXAccessor={displayXAccessor}
+                seriesName="Data"
+                xScale={xScale}
+                xAccessor={xAccessor}
+                xExtents={xExtents}>
+                <Chart
+                    id={1}
+                    yExtents={this.yExtents}>
+                    <CandlestickSeries />
+                    <MouseCoordinateY
+                        arrowWidth={arrowWidth}
+                        displayFormat={this.pricesDisplayFormat} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
+                </Chart>
+            </ChartCanvas>
+        );
+    }
+
+    private readonly yExtents = (data: IOHLCData) => {
+        return [data.high, data.low];
+    }
+}
+
+export default withOHLCData()(withSize()(withDeviceRatio()(Coordinates)));

packages/stories/src/features/coordinates/coordinates.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { MouseCoordinateY } from "react-financial-charts/lib/coordinates";
+import Coordinates from "./coordinates";
+
+export default {
+    component: MouseCoordinateY,
+    title: "Features|Coordinates",
+};
+
+export const edge = () => <Coordinates />;
+
+export const arrows = () => <Coordinates arrowWidth={10} />;