@react-financial-charts/coordinates - npm Package Compare versions

Comparing version 1.0.0-alpha.15 to 1.0.0-alpha.16

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.0.0-alpha.16](https://github.com/reactivemarkets/react-financial-charts/compare/v1.0.0-alpha.15...v1.0.0-alpha.16) (2020-09-04)
+
+
+### Bug Fixes
+
+* **core:** removing colors ([ceb8217](https://github.com/reactivemarkets/react-financial-charts/commit/ceb8217e9c8795787565c3baa1cedc3e693dfb4c))
+
+
+
+
+
 # [1.0.0-alpha.15](https://github.com/reactivemarkets/react-financial-charts/compare/v1.0.0-alpha.14...v1.0.0-alpha.15) (2020-09-03)
@@ -8,0 +19,0 @@

lib/EdgeCoordinate.d.ts

@@ -5,3 +5,3 @@ import * as React from "react";
     readonly type: "vertical" | "horizontal";
-    readonly coordinate: any;
+    readonly coordinate?: any;
     readonly x1: number;
@@ -15,5 +15,5 @@ readonly y1: number;
     readonly fill?: string;
-    readonly opacity?: number;
     readonly fontFamily: string;
     readonly fontSize: number;
+    readonly lineStroke?: string;
 }
@@ -26,3 +26,2 @@ export declare class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
         fill: string;
-        opacity: number;
         fontFamily: string;
@@ -32,3 +31,2 @@ fontSize: number;
         lineStroke: string;
-        lineOpacity: number;
         arrowWidth: number;
@@ -35,0 +33,0 @@ };

lib/EdgeCoordinate.js

 import * as React from "react";
-import { colorToRGBA, isDefined } from "@react-financial-charts/core";
 const helper = (props) => {
     const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
-    const { fill, opacity, fontFamily, fontSize, textFill, lineStroke, lineOpacity, arrowWidth } = props;
+    const { fill, fontFamily, fontSize, textFill, lineStroke, arrowWidth } = props;
     const { rectWidth, rectHeight } = props;
@@ -30,3 +29,3 @@ const { x1, y1, x2, y2 } = props;
     const textAnchor = "middle";
-    if (isDefined(displayCoordinate)) {
+    if (displayCoordinate !== undefined) {
         coordinateBase = {
@@ -38,3 +37,2 @@ edgeXRect,
             fill,
-            opacity,
             arrowWidth,
@@ -55,3 +53,2 @@ };
         : {
-            opacity: lineOpacity,
             stroke: lineStroke,
@@ -81,3 +78,3 @@ x1,
         if (edge.line !== undefined) {
-            line = (React.createElement("line", { className: "react-financial-charts-cross-hair", opacity: edge.line.opacity, stroke: edge.line.stroke, x1: edge.line.x1, y1: edge.line.y1, x2: edge.line.x2, y2: edge.line.y2 }));
+            line = (React.createElement("line", { className: "react-financial-charts-cross-hair", stroke: edge.line.stroke, x1: edge.line.x1, y1: edge.line.y1, x2: edge.line.x2, y2: edge.line.y2 }));
         }
@@ -91,3 +88,3 @@ if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
                 edge.orient === "left" || edge.orient === "right" ? (React.createElement("g", { transform: `translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})` },
-                    React.createElement("path", { d: path, key: 1, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill, opacity: edge.coordinateBase.opacity }))) : (React.createElement("rect", { key: 1, className: "react-financial-charts-text-background", x: edge.coordinateBase.edgeXRect, y: edge.coordinateBase.edgeYRect, height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill, opacity: edge.coordinateBase.opacity }));
+                    React.createElement("path", { d: path, key: 1, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill }))) : (React.createElement("rect", { key: 1, className: "react-financial-charts-text-background", x: edge.coordinateBase.edgeXRect, y: edge.coordinateBase.edgeYRect, height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill }));
             coordinate = (React.createElement("text", { key: 2, x: edge.coordinate.edgeXText, y: edge.coordinate.edgeYText, textAnchor: edge.coordinate.textAnchor, fontFamily: edge.coordinate.fontFamily, fontSize: edge.coordinate.fontSize, dy: ".32em", fill: edge.coordinate.textFill }, edge.coordinate.displayCoordinate));
@@ -106,8 +103,6 @@ }
     fill: "#8a8a8a",
-    opacity: 1,
     fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
     fontSize: 13,
     textFill: "#FFFFFF",
-    lineStroke: "#000000",
-    lineOpacity: 0.3,
+    lineStroke: "rgba(0, 0, 0, 0.3)",
     arrowWidth: 10,
@@ -123,3 +118,3 @@ };
         const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
-        ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
+        ctx.fillStyle = edge.coordinateBase.fill;
         const x = edge.coordinateBase.edgeXRect;
@@ -156,3 +151,3 @@ const y = edge.coordinateBase.edgeYRect;
     if (edge.line !== undefined) {
-        ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
+        ctx.strokeStyle = edge.line.stroke;
         ctx.beginPath();
@@ -159,0 +154,0 @@ ctx.moveTo(edge.line.x1, edge.line.y1);

lib/EdgeCoordinateV2.js

 import * as React from "react";
-import { colorToRGBA, isDefined } from "@react-financial-charts/core";
 export function renderSVG(props) {
@@ -12,4 +11,4 @@ const { className } = props;
     let coordinate;
-    if (edge.line !== undefined && isDefined(edge.line)) {
-        line = (React.createElement("line", { className: "react-financial-charts-cross-hair", opacity: edge.line.opacity, stroke: edge.line.stroke, x1: edge.line.x1, y1: edge.line.y1, x2: edge.line.x2, y2: edge.line.y2 }));
+    if (edge.line !== undefined) {
+        line = (React.createElement("line", { className: "react-financial-charts-cross-hair", stroke: edge.line.stroke, x1: edge.line.x1, y1: edge.line.y1, x2: edge.line.x2, y2: edge.line.y2 }));
     }
@@ -23,3 +22,3 @@ if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
             edge.orient === "left" || edge.orient === "right" ? (React.createElement("g", { transform: `translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})` },
-                React.createElement("path", { d: path, key: 1, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill, opacity: edge.coordinateBase.opacity }))) : (React.createElement("rect", { key: 1, className: "react-financial-charts-text-background", x: edge.coordinateBase.edgeXRect, y: edge.coordinateBase.edgeYRect, height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill, opacity: edge.coordinateBase.opacity }));
+                React.createElement("path", { d: path, key: 1, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill }))) : (React.createElement("rect", { key: 1, className: "react-financial-charts-text-background", x: edge.coordinateBase.edgeXRect, y: edge.coordinateBase.edgeYRect, height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill }));
         coordinate = (React.createElement("text", { key: 2, x: edge.coordinate.edgeXText, y: edge.coordinate.edgeYText, textAnchor: edge.coordinate.textAnchor, fontFamily: edge.coordinate.fontFamily, fontSize: edge.coordinate.fontSize, dy: ".32em", fill: edge.coordinate.textFill }, edge.coordinate.displayCoordinate));
@@ -34,3 +33,3 @@ }
     const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
-    const { fill, opacity, fontFamily, fontSize, textFill, lineStroke, lineOpacity, arrowWidth } = props;
+    const { fill, fontFamily, fontSize, textFill, lineStroke, arrowWidth } = props;
     const { rectWidth, rectHeight } = props;
@@ -61,3 +60,3 @@ const { x1, y1, x2, y2, dx } = props;
     const textAnchor = "middle";
-    if (isDefined(displayCoordinate)) {
+    if (displayCoordinate !== undefined) {
         coordinateBase = {
@@ -69,3 +68,2 @@ edgeXRect,
             fill,
-            opacity,
             arrowWidth,
@@ -86,3 +84,2 @@ };
         : {
-            opacity: lineOpacity,
             stroke: lineStroke,
@@ -108,3 +105,3 @@ x1,
         const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
-        ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
+        ctx.fillStyle = edge.coordinateBase.fill;
         const x = edge.coordinateBase.edgeXRect;
@@ -140,4 +137,4 @@ const y = edge.coordinateBase.edgeYRect;
     }
-    if (edge.line !== undefined && isDefined(edge.line)) {
-        ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
+    if (edge.line !== undefined) {
+        ctx.strokeStyle = edge.line.stroke;
         ctx.beginPath();
@@ -144,0 +141,0 @@ ctx.moveTo(edge.line.x1, edge.line.y1);

lib/EdgeCoordinateV3.js

 import * as React from "react";
-import { colorToRGBA, getStrokeDasharray, getStrokeDasharrayCanvas, isDefined } from "@react-financial-charts/core";
+import { getStrokeDasharray, getStrokeDasharrayCanvas, isDefined } from "@react-financial-charts/core";
 export const renderSVG = (props) => {
@@ -12,4 +12,4 @@ const { className } = props;
     let coordinate;
-    if (edge.line !== undefined && isDefined(edge.line)) {
-        line = (React.createElement("line", { className: "react-financial-charts-cross-hair", strokeOpacity: edge.line.opacity, stroke: edge.line.stroke, strokeDasharray: getStrokeDasharray(edge.line.strokeDasharray), x1: edge.line.x1, y1: edge.line.y1, x2: edge.line.x2, y2: edge.line.y2 }));
+    if (edge.line !== undefined) {
+        line = (React.createElement("line", { className: "react-financial-charts-cross-hair", stroke: edge.line.stroke, strokeDasharray: getStrokeDasharray(edge.line.strokeDasharray), x1: edge.line.x1, y1: edge.line.y1, x2: edge.line.x2, y2: edge.line.y2 }));
     }
@@ -23,3 +23,3 @@ if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
             edge.orient === "left" || edge.orient === "right" ? (React.createElement("g", { key: 1, transform: `translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})` },
-                React.createElement("path", { d: path, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, stroke: edge.coordinateBase.stroke, strokeLinejoin: "miter", strokeOpacity: edge.coordinateBase.strokeOpacity, strokeWidth: edge.coordinateBase.strokeWidth, fill: edge.coordinateBase.fill, fillOpacity: edge.coordinateBase.opacity }))) : (React.createElement("rect", { key: 1, className: "react-financial-charts-text-background", x: edge.coordinateBase.edgeXRect, y: edge.coordinateBase.edgeYRect, height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill, opacity: edge.coordinateBase.opacity }));
+                React.createElement("path", { d: path, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, stroke: edge.coordinateBase.stroke, strokeLinejoin: "miter", strokeWidth: edge.coordinateBase.strokeWidth, fill: edge.coordinateBase.fill }))) : (React.createElement("rect", { key: 1, className: "react-financial-charts-text-background", x: edge.coordinateBase.edgeXRect, y: edge.coordinateBase.edgeYRect, height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill }));
         coordinate = (React.createElement("text", { key: 2, x: edge.coordinate.edgeXText, y: edge.coordinate.edgeYText, textAnchor: edge.coordinate.textAnchor, fontFamily: edge.coordinate.fontFamily, fontSize: edge.coordinate.fontSize, dy: ".32em", fill: edge.coordinate.textFill }, edge.coordinate.displayCoordinate));
@@ -33,3 +33,3 @@ }
 const helper = (props) => {
-    const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine, lineStrokeDasharray, fill, opacity, fontFamily, fontSize, textFill, lineStroke, lineOpacity, stroke, strokeOpacity, strokeWidth, arrowWidth, rectWidth, rectHeight, rectRadius, x1, y1, x2, y2, dx, } = props;
+    const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine, lineStrokeDasharray, fill, fontFamily, fontSize, textFill, lineStroke, stroke, strokeWidth, arrowWidth, rectWidth, rectHeight, rectRadius, x1, y1, x2, y2, dx, } = props;
     if (!show) {
@@ -66,6 +66,4 @@ return null;
             fill,
-            opacity,
             arrowWidth,
             stroke,
-            strokeOpacity,
             strokeWidth,
@@ -86,3 +84,2 @@ };
         : {
-            opacity: lineOpacity,
             stroke: lineStroke,
@@ -117,3 +114,3 @@ strokeDasharray: lineStrokeDasharray,
         ctx.setLineDash(dashArray);
-        ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
+        ctx.strokeStyle = edge.line.stroke;
         ctx.lineWidth = 1;
@@ -128,5 +125,5 @@ ctx.beginPath();
         const { arrowWidth, rectWidth, rectHeight, rectRadius } = edge.coordinateBase;
-        ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
-        if (isDefined(edge.coordinateBase.stroke)) {
-            ctx.strokeStyle = colorToRGBA(edge.coordinateBase.stroke, edge.coordinateBase.strokeOpacity);
+        ctx.fillStyle = edge.coordinateBase.fill;
+        if (edge.coordinateBase.stroke !== undefined) {
+            ctx.strokeStyle = edge.coordinateBase.stroke;
             ctx.lineWidth = edge.coordinateBase.strokeWidth;
@@ -133,0 +130,0 @@ }

package.json

 {
   "name": "@react-financial-charts/coordinates",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.16",
   "description": "Coordinates for react-financial-charts",
@@ -41,4 +41,4 @@ "publishConfig": {
   "dependencies": {
-    "@react-financial-charts/core": "^1.0.0-alpha.15",
-    "d3-format": "^1.4.4",
+    "@react-financial-charts/core": "^1.0.0-alpha.16",
+    "d3-format": "^1.4.5",
     "prop-types": "^15.7.2"
@@ -50,3 +50,3 @@ },
   },
-  "gitHead": "629968753ea1c094dab3931cf7eea194062cdc38"
+  "gitHead": "3395829dd6bc7677d8a358ef2a78ed2cfbb8d58b"
 }

No alert changes

Worsened metrics

Total package byte prevSize

167716

decreased by-2.04%

Lines of code

3181

decreased by-1.21%

Dependency changes

• Updated@react-financial-charts/core@^1.0.0-alpha.16

• Updatedd3-format@^1.4.5