fix(series): don't stroke markers by default

Much quicker to just fill them.
markmcdowell · Sep 2, 2020 · f564a8c · f564a8c
1 parent 052981a
commit f564a8c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 21 deletions.
diff --git a/packages/series/src/markers/CircleMarker.tsx b/packages/series/src/markers/CircleMarker.tsx
@@ -4,7 +4,6 @@ import * as React from "react";
 export interface CircleMarkerProps {
     readonly className?: string;
     readonly fillStyle?: string;
-    readonly opacity?: number;
     readonly point: {
         x: number;
         y: number;
@@ -17,9 +16,6 @@ export interface CircleMarkerProps {
 
 export class CircleMarker extends React.Component<CircleMarkerProps> {
     public static defaultProps = {
-        strokeStyle: "#4682B4",
-        strokeWidth: 1,
-        opacity: 0.5,
         fillStyle: "#4682B4",
         className: "react-financial-charts-marker-circle",
     };
@@ -48,12 +44,14 @@ export class CircleMarker extends React.Component<CircleMarkerProps> {
         ctx.moveTo(x, y);
         ctx.beginPath();
         ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-        ctx.stroke();
         ctx.fill();
+        if (strokeStyle !== undefined) {
+            ctx.stroke();
+        }
     };
 
     public render() {
-        const { className, strokeStyle, strokeWidth, opacity, fillStyle, point, r } = this.props;
+        const { className, strokeStyle, strokeWidth, fillStyle, point, r } = this.props;
         const radius = functor(r)(point.datum);
 
         return (
@@ -63,7 +61,6 @@ export class CircleMarker extends React.Component<CircleMarkerProps> {
                 cy={point.y}
                 stroke={strokeStyle}
                 strokeWidth={strokeWidth}
-                fillOpacity={opacity}
                 fill={fillStyle}
                 r={radius}
             />

diff --git a/packages/series/src/markers/SquareMarker.tsx b/packages/series/src/markers/SquareMarker.tsx
@@ -4,7 +4,6 @@ import { functor } from "@react-financial-charts/core";
 export interface SquareProps {
     readonly className?: string;
     readonly fillStyle?: string;
-    readonly opacity: number;
     readonly point: {
         x: number;
         y: number;
@@ -17,9 +16,6 @@ export interface SquareProps {
 
 export class Square extends React.Component<SquareProps> {
     public static defaultProps = {
-        strokeStyle: "#4682B4",
-        strokeWidth: 1,
-        opacity: 0.5,
         fillStyle: "#4682B4",
         className: "react-financial-charts-marker-rect",
     };
@@ -46,12 +42,15 @@ export class Square extends React.Component<SquareProps> {
         const y = point.y - w / 2;
         ctx.beginPath();
         ctx.rect(x, y, w, w);
-        ctx.stroke();
         ctx.fill();
+
+        if (strokeStyle !== undefined) {
+            ctx.stroke();
+        }
     };
 
     public render() {
-        const { className, strokeStyle, strokeWidth, opacity, fillStyle, point, width } = this.props;
+        const { className, strokeStyle, strokeWidth, fillStyle, point, width } = this.props;
         const w = functor(width)(point.datum);
         const x = point.x - w / 2;
         const y = point.y - w / 2;
@@ -63,7 +62,6 @@ export class Square extends React.Component<SquareProps> {
                 y={y}
                 stroke={strokeStyle}
                 strokeWidth={strokeWidth}
-                fillOpacity={opacity}
                 fill={fillStyle}
                 width={w}
                 height={w}

diff --git a/packages/series/src/markers/TriangleMarker.tsx b/packages/series/src/markers/TriangleMarker.tsx
@@ -5,7 +5,6 @@ export interface TriangleProps {
     readonly className?: string;
     readonly direction?: "top" | "bottom" | "left" | "right" | "hide" | ((datum: any) => any);
     readonly fillStyle?: string | ((datum: any) => string);
-    readonly opacity?: number;
     readonly point: {
         x: number;
         y: number;
@@ -19,9 +18,6 @@ export interface TriangleProps {
 export class Triangle extends React.Component<TriangleProps> {
     public static defaultProps = {
         direction: "top",
-        strokeStyle: "#4682B4",
-        strokeWidth: 1,
-        opacity: 0.5,
         fillStyle: "#4682B4",
         className: "react-financial-charts-marker-triangle",
     };
@@ -52,7 +48,6 @@ export class Triangle extends React.Component<TriangleProps> {
         ctx.moveTo(x, y - innerHypotenuse);
         ctx.lineTo(x + w / 2, y + innerOpposite);
         ctx.lineTo(x - w / 2, y + innerOpposite);
-        ctx.stroke();
 
         // TODO: rotation does not work
         // example: https://gist.github.com/geoffb/6392450
@@ -64,10 +59,14 @@ export class Triangle extends React.Component<TriangleProps> {
             ctx.restore();
         }
         ctx.fill();
+
+        if (strokeStyle !== undefined) {
+            ctx.stroke();
+        }
     };
 
     public render() {
-        const { className, fillStyle, strokeStyle, strokeWidth, opacity, point, width } = this.props;
+        const { className, fillStyle, strokeStyle, strokeWidth, point, width } = this.props;
 
         const rotation = getRotationInDegrees(this.props, point);
         if (rotation == null) {
@@ -92,7 +91,6 @@ export class Triangle extends React.Component<TriangleProps> {
                 points={points}
                 stroke={strokeColor}
                 strokeWidth={strokeWidth}
-                fillOpacity={opacity}
                 fill={fillColor}
                 transform={rotation !== 0 ? `rotate(${rotation}, ${x}, ${y})` : undefined}
             />