fix(annotations): fixing svg path annotation

It was a pain to build a custom path, translate it instead. Relates to react-financial#496
markmcdowell · Apr 27, 2021 · 05cd1ec · 05cd1ec
1 parent 5ccda87
commit 05cd1ec
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git a/packages/annotations/src/LabelAnnotation.tsx b/packages/annotations/src/LabelAnnotation.tsx
@@ -109,7 +109,10 @@ export class LabelAnnotation extends React.Component<LabelAnnotationProps> {
         const xFunc = functor(x);
         const yFunc = functor(y);
 
-        const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
+        const [xPos, yPos]: [number, number] = [
+            xFunc({ xScale, xAccessor, datum, plotData }),
+            yFunc({ yScale, datum, plotData }),
+        ];
 
         return {
             xPos,

diff --git a/packages/annotations/src/SvgPathAnnotation.tsx b/packages/annotations/src/SvgPathAnnotation.tsx
@@ -15,7 +15,9 @@ export interface SvgPathAnnotationProps {
         },
     ) => void;
     readonly opacity?: number;
-    readonly path: ({ x, y }: { x: number; y: number }) => string;
+    readonly path: (datum: any) => string;
+    readonly pathHeight: number;
+    readonly pathWidth: number;
     readonly plotData: any[];
     readonly stroke?: string;
     readonly tooltip?: string | ((datum: any) => string);
@@ -64,14 +66,20 @@ export class SvgPathAnnotation extends React.Component<SvgPathAnnotationProps> {
     };
 
     public render() {
-        const { className, stroke, opacity, path } = this.props;
+        const { className, datum, stroke, opacity, path, pathWidth, pathHeight } = this.props;
 
         const { x, y, fill, tooltip } = this.helper();
 
         return (
             <g className={className} onClick={this.handleClick}>
                 <title>{tooltip}</title>
-                <path d={path({ x, y })} stroke={stroke} fill={fill} opacity={opacity} />
+                <path
+                    transform={`translate(${x - pathWidth},${y - pathHeight})`}
+                    d={path(datum)}
+                    stroke={stroke}
+                    fill={fill}
+                    opacity={opacity}
+                />
             </g>
         );
     }
@@ -89,11 +97,14 @@ export class SvgPathAnnotation extends React.Component<SvgPathAnnotationProps> {
         const xFunc = functor(x);
         const yFunc = functor(y);
 
-        const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
+        const [xPos, yPos]: [number, number] = [
+            xFunc({ xScale, xAccessor, datum, plotData }),
+            yFunc({ yScale, datum, plotData }),
+        ];
 
         return {
-            x: xPos,
-            y: yPos,
+            x: Math.round(xPos),
+            y: Math.round(yPos),
             fill: functor(fill)(datum),
             tooltip: functor(tooltip)(datum),
         };

diff --git a/packages/stories/src/features/annotated/Annotated.tsx b/packages/stories/src/features/annotated/Annotated.tsx
@@ -7,6 +7,7 @@ import {
     Chart,
     ChartCanvas,
     LabelAnnotation,
+    SvgPathAnnotation,
     XAxis,
     YAxis,
     withDeviceRatio,
@@ -15,25 +16,36 @@ import {
 import { IOHLCData, withOHLCData } from "../../data";
 
 interface ChartProps {
+    readonly labelAnnotation?: boolean;
+    readonly svgAnnotation?: boolean;
     readonly data: IOHLCData[];
     readonly height: number;
     readonly ratio: number;
     readonly width: number;
 }
 
 class Annotated extends React.Component<ChartProps> {
-    private readonly annotation = {
+    private readonly labelAnnotation = {
         text: "Monday",
         tooltip: "Go short",
         y: ({ yScale, datum }: any) => yScale(datum.high),
     };
+    private readonly svgAnnotation = {
+        fill: "#2196f3",
+        path: () =>
+            "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z",
+        pathWidth: 12,
+        pathHeight: 22,
+        tooltip: "Svg Annotation",
+        y: ({ yScale, datum }: any) => yScale(datum.high),
+    };
     private readonly margin = { left: 0, right: 48, top: 0, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor(
         (d: IOHLCData) => d.date,
     );
 
     public render() {
-        const { data: initialData, height, ratio, width } = this.props;
+        const { data: initialData, height, ratio, width, labelAnnotation, svgAnnotation } = this.props;
 
         const ema12 = ema()
             .id(1)
@@ -68,7 +80,12 @@ class Annotated extends React.Component<ChartProps> {
                     <XAxis showGridLines />
                     <YAxis showGridLines />
                     <CandlestickSeries />
-                    <Annotate with={LabelAnnotation} usingProps={this.annotation} when={this.when} />
+                    {labelAnnotation && (
+                        <Annotate with={LabelAnnotation} usingProps={this.labelAnnotation} when={this.when} />
+                    )}
+                    {svgAnnotation && (
+                        <Annotate with={SvgPathAnnotation} usingProps={this.svgAnnotation} when={this.when} />
+                    )}
                 </Chart>
             </ChartCanvas>
         );

diff --git a/packages/stories/src/features/annotated/index.stories.tsx b/packages/stories/src/features/annotated/index.stories.tsx
@@ -7,4 +7,6 @@ export default {
     title: "Features/Annotate",
 };
 
-export const labels = () => <Annotated />;
+export const labels = () => <Annotated labelAnnotation />;
+
+export const paths = () => <Annotated svgAnnotation />;