fix(charts): edge coordinates can now use rectWidth

The edge coordinates where always sizing the width to the text width, this is now optional.
markmcdowell · Dec 16, 2019 · 5b0a20b · 5b0a20b
1 parent e687fb7
commit 5b0a20b
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/packages/charts/src/coordinates/EdgeCoordinateV3.tsx b/packages/charts/src/coordinates/EdgeCoordinateV3.tsx
@@ -202,7 +202,10 @@ export function drawOnCanvas(ctx: CanvasRenderingContext2D, props) {
     ctx.font = `${fontSize}px ${fontFamily}`;
     ctx.textBaseline = "middle";
 
-    const width = Math.round(ctx.measureText(coordinate).width + 10);
+    let width = props.rectWidth;
+    if (props.fitToText) {
+        width = Math.round(ctx.measureText(coordinate).width + 10);
+    }
 
     const edge = helper({ ...props, rectWidth: width });
     if (edge === null) {

diff --git a/packages/charts/src/coordinates/EdgeIndicator.tsx b/packages/charts/src/coordinates/EdgeIndicator.tsx
@@ -13,6 +13,7 @@ interface EdgeIndicatorProps {
     readonly displayFormat?: any; // func
     readonly edgeAt?: "left" | "right";
     readonly fill?: string | any; // func
+    readonly fitToText?: boolean;
     readonly itemType: "first" | "last";
     readonly lineStroke?: string | any; // func
     readonly lineStrokeDasharray?: strokeDashTypes;
@@ -29,6 +30,7 @@ export class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
     public static defaultProps = {
         className: "react-financial-charts-edgeindicator",
         type: "horizontal",
+        fitToText: false,
         orient: "right",
         edgeAt: "right",
         textFill: "#FFFFFF",

diff --git a/packages/charts/src/coordinates/MouseCoordinateX.tsx b/packages/charts/src/coordinates/MouseCoordinateX.tsx
@@ -11,6 +11,7 @@ interface MouseCoordinateXProps {
     readonly customX: any; // func
     readonly displayFormat: any; // func
     readonly fill?: string;
+    readonly fitToText?: boolean;
     readonly fontFamily?: string;
     readonly fontSize?: number;
     readonly opacity?: number;
@@ -47,6 +48,7 @@ export class MouseCoordinateX extends React.Component<MouseCoordinateXProps> {
         at: "bottom",
         customX: defaultCustomX,
         fill: "#37474F",
+        fitToText: true,
         fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
         fontSize: 13,
         opacity: 1,
@@ -99,7 +101,7 @@ export class MouseCoordinateX extends React.Component<MouseCoordinateXProps> {
         const { customX, orient, at } = props;
         const { stroke, strokeOpacity, strokeWidth } = props;
         const { rectRadius, rectWidth, rectHeight } = props;
-        const { fill, opacity, fontFamily, fontSize, textFill } = props;
+        const { fill, opacity, fitToText, fontFamily, fontSize, textFill } = props;
 
         const edgeAt = (at === "bottom") ? height : 0;
 
@@ -115,6 +117,7 @@ export class MouseCoordinateX extends React.Component<MouseCoordinateXProps> {
 
         const coordinateProps = {
             coordinate,
+            fitToText,
             show,
             type,
             orient,

diff --git a/packages/charts/src/coordinates/MouseCoordinateY.tsx b/packages/charts/src/coordinates/MouseCoordinateY.tsx
@@ -15,6 +15,7 @@ interface MouseCoordinateYProps {
     readonly fontFamily?: string;
     readonly fontSize?: number;
     readonly fill?: string;
+    readonly fitToText?: boolean;
     readonly opacity?: number;
     readonly orient?: "left" | "right";
     readonly rectWidth?: number;
@@ -32,6 +33,7 @@ export class MouseCoordinateY extends React.Component<MouseCoordinateYProps> {
         at: "right",
         dx: 0,
         fill: "#37474F",
+        fitToText: false,
         fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
         fontSize: 13,
         opacity: 1,
@@ -103,7 +105,7 @@ export function getYCoordinate(y, displayValue, props, moreProps) {
     const { width } = moreProps;
 
     const { orient, at, rectWidth, rectHeight, dx } = props;
-    const { fill, opacity, fontFamily, fontSize, textFill, arrowWidth } = props;
+    const { fill, opacity, fitToText, fontFamily, fontSize, textFill, arrowWidth } = props;
     const { stroke, strokeOpacity, strokeWidth } = props;
 
     const x1 = 0;
@@ -116,6 +118,7 @@ export function getYCoordinate(y, displayValue, props, moreProps) {
     const coordinateProps = {
         coordinate: displayValue,
         show: true,
+        fitToText,
         type,
         orient,
         edgeAt,

diff --git a/packages/stories/src/features/stockChart.tsx b/packages/stories/src/features/stockChart.tsx
@@ -113,9 +113,12 @@ 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
+                        rectWidth={margin.right}
+                        displayFormat={this.pricesDisplayFormat} />
                     <EdgeIndicator
                         itemType="last"
+                        rectWidth={margin.right}
                         fill={this.openCloseColor}
                         lineStroke={this.openCloseColor}
                         displayFormat={this.pricesDisplayFormat}
@@ -154,7 +157,7 @@ class StockChart extends React.Component<StockChartProps> {
                     <YAxis ticks={4} tickFormat={this.pricesDisplayFormat} />
 
                     <MouseCoordinateX displayFormat={timeDisplayFormat} />
-                    <MouseCoordinateY displayFormat={this.pricesDisplayFormat} />
+                    <MouseCoordinateY rectWidth={margin.right} displayFormat={this.pricesDisplayFormat} />
 
                     <ElderRaySeries yAccessor={elder.accessor()} />