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

Comparing version 1.0.0-alpha.1 to 1.0.0-alpha.7

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.0.0-alpha.7](https://github.com/reactivemarkets/react-financial-charts/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2020-07-26)
+
+
+### Bug Fixes
+
+* updating prop types ([425b0b4](https://github.com/reactivemarkets/react-financial-charts/commit/425b0b459de229770e7608aff4f397b9bb00de5e))
+
+
+
+
+
 # [1.0.0-alpha.1](https://github.com/reactivemarkets/react-financial-charts/compare/v1.0.0-alpha.0...v1.0.0-alpha.1) (2020-07-10)
@@ -8,0 +19,0 @@

lib/Brush.d.ts

@@ -8,6 +8,4 @@ import * as React from "react";
     readonly type?: "1D" | "2D";
-    readonly stroke?: string;
-    readonly fill?: string;
-    readonly strokeOpacity?: number;
-    readonly fillOpacity?: number;
+    readonly strokeStyle?: string;
+    readonly fillStyle?: string;
     readonly interactiveState: object;
@@ -26,6 +24,4 @@ readonly strokeDashArray?: strokeDashTypes;
         type: string;
-        stroke: string;
-        fillOpacity: number;
-        strokeOpacity: number;
-        fill: string;
+        strokeStyle: string;
+        fillStyle: string;
         onBrush: () => void;
@@ -32,0 +28,0 @@ onStart: () => void;

lib/Brush.js

 import * as React from "react";
-import { colorToRGBA, getStrokeDasharrayCanvas, isDefined, getMouseCanvas, GenericChartComponent, noop, } from "@react-financial-charts/core";
+import { getStrokeDasharrayCanvas, getMouseCanvas, GenericChartComponent, noop, } from "@react-financial-charts/core";
 export class Brush extends React.Component {
@@ -8,9 +8,8 @@ constructor(props, context) {
             const { rect } = this.state;
-            if (isDefined(rect)) {
+            if (rect !== null) {
                 const { x, y, height, width } = rect;
-                const { stroke = Brush.defaultProps.stroke, fill = Brush.defaultProps.fill, strokeDashArray } = this.props;
-                const { strokeOpacity, fillOpacity } = this.props;
+                const { strokeStyle = Brush.defaultProps.strokeStyle, fillStyle = Brush.defaultProps.fillStyle, strokeDashArray, } = this.props;
                 const dashArray = getStrokeDasharrayCanvas(strokeDashArray);
-                ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
-                ctx.fillStyle = colorToRGBA(fill, fillOpacity);
+                ctx.strokeStyle = strokeStyle;
+                ctx.fillStyle = fillStyle;
                 ctx.setLineDash(dashArray);
@@ -98,6 +97,4 @@ ctx.beginPath();
     type: "2D",
-    stroke: "#000000",
-    fillOpacity: 0.3,
-    strokeOpacity: 1,
-    fill: "#3h3h3h",
+    strokeStyle: "#000000",
+    fillStyle: "#3h3h3h",
     onBrush: noop,
@@ -104,0 +101,0 @@ onStart: noop,

lib/components/ChannelWithArea.d.ts

@@ -7,7 +7,5 @@ import * as React from "react";
     readonly interactiveCursorClass?: string;
-    readonly stroke: string;
+    readonly strokeStyle: string | CanvasGradient | CanvasPattern;
     readonly strokeWidth: number;
-    readonly fill: string;
-    readonly fillOpacity: number;
-    readonly strokeOpacity: number;
+    readonly fillStyle: string | CanvasGradient | CanvasPattern;
     readonly type: "XLINE" | "RAY" | "LINE";
@@ -14,0 +12,0 @@ readonly onDragStart: any;

lib/components/ChannelWithArea.js

 import * as React from "react";
-import { colorToRGBA, isDefined, isNotDefined, getMouseCanvas, GenericChartComponent, noop, } from "@react-financial-charts/core";
+import { isDefined, isNotDefined, getMouseCanvas, GenericChartComponent, noop } from "@react-financial-charts/core";
 import { generateLine, isHovering } from "./StraightLine";
@@ -8,3 +8,3 @@ export class ChannelWithArea extends React.Component {
         this.drawOnCanvas = (ctx, moreProps) => {
-            const { stroke, strokeWidth, fillOpacity, strokeOpacity, fill } = this.props;
+            const { strokeStyle, strokeWidth, fillStyle } = this.props;
             const { line1, line2 } = helper(this.props, moreProps);
@@ -14,3 +14,3 @@ if (line1 !== undefined) {
                 ctx.lineWidth = strokeWidth;
-                ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
+                ctx.strokeStyle = strokeStyle;
                 ctx.beginPath();
@@ -26,3 +26,3 @@ ctx.moveTo(x1, y1);
                     ctx.stroke();
-                    ctx.fillStyle = colorToRGBA(fill, fillOpacity);
+                    ctx.fillStyle = fillStyle;
                     ctx.beginPath();
@@ -29,0 +29,0 @@ ctx.moveTo(x1, y1);

lib/components/ClickableCircle.d.ts

 import * as React from "react";
 interface ClickableCircleProps {
-    readonly xyProvider?: any;
     readonly onDragStart: any;
@@ -8,4 +7,4 @@ readonly onDrag: any;
     readonly strokeWidth: number;
-    readonly stroke: string;
-    readonly fill: string;
+    readonly strokeStyle: string | CanvasGradient | CanvasPattern;
+    readonly fillStyle: string | CanvasGradient | CanvasPattern;
     readonly r: number;
@@ -16,5 +15,4 @@ readonly cx?: number;
     readonly show: boolean;
-    readonly strokeOpacity: number;
-    readonly fillOpacity: number;
     readonly interactiveCursorClass?: string;
+    readonly xyProvider?: any;
 }
@@ -29,4 +27,2 @@ export declare class ClickableCircle extends React.Component<ClickableCircleProps> {
         show: boolean;
-        fillOpacity: number;
-        strokeOpacity: number;
     };
@@ -33,0 +29,0 @@ render(): JSX.Element | null;

lib/components/ClickableCircle.js

 import * as React from "react";
-import { colorToRGBA, isDefined, noop, getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
+import { isDefined, noop, getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
 export class ClickableCircle extends React.Component {
@@ -7,9 +7,7 @@ constructor() {
         this.drawOnCanvas = (ctx, moreProps) => {
-            const { stroke, strokeWidth, fill } = this.props;
-            const { fillOpacity, strokeOpacity } = this.props;
-            const { r } = this.props;
-            const [x, y] = this.helper(this.props, moreProps);
+            const { strokeStyle, strokeWidth, fillStyle, r } = this.props;
             ctx.lineWidth = strokeWidth;
-            ctx.fillStyle = colorToRGBA(fill, fillOpacity);
-            ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
+            ctx.fillStyle = fillStyle;
+            ctx.strokeStyle = strokeStyle;
+            const [x, y] = this.helper(moreProps);
             ctx.beginPath();
@@ -23,3 +21,3 @@ ctx.arc(x, y, r, 0, 2 * Math.PI, false);
             const r = this.props.r + 7;
-            const [x, y] = this.helper(this.props, moreProps);
+            const [x, y] = this.helper(moreProps);
             const [mx, my] = mouseXY;
@@ -29,4 +27,4 @@ const hover = x - r < mx && mx < x + r && y - r < my && my < y + r;
         };
-        this.helper = (props, moreProps) => {
-            const { xyProvider, cx, cy } = props;
+        this.helper = (moreProps) => {
+            const { xyProvider, cx, cy } = this.props;
             if (isDefined(xyProvider)) {
@@ -58,5 +56,3 @@ return xyProvider(moreProps);
     show: false,
-    fillOpacity: 1,
-    strokeOpacity: 1,
 };
 //# sourceMappingURL=ClickableCircle.js.map

lib/components/ClickableShape.d.ts

@@ -7,4 +7,3 @@ import * as React from "react";
     readonly fontSize: number;
-    readonly stroke: string;
-    readonly strokeOpacity: number;
+    readonly strokeStyle: string | CanvasGradient | CanvasPattern;
     readonly strokeWidth: number;
@@ -28,4 +27,2 @@ readonly text: string;
         show: boolean;
-        fillOpacity: number;
-        strokeOpacity: number;
         strokeWidth: number;
@@ -32,0 +29,0 @@ };

lib/components/ClickableShape.js

 import * as React from "react";
-import { colorToRGBA, getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
+import { getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
 import { isHovering2 } from "./StraightLine";
@@ -8,3 +8,3 @@ export class ClickableShape extends React.Component {
         this.drawOnCanvas = (ctx, moreProps) => {
-            const { stroke, strokeWidth, strokeOpacity, hovering, textBox } = this.props;
+            const { strokeStyle, strokeWidth, hovering, textBox } = this.props;
             const [x, y] = this.helper(this.props, moreProps, ctx);
@@ -14,3 +14,3 @@ this.closeIcon = { x, y };
             ctx.lineWidth = hovering ? strokeWidth + 1 : strokeWidth;
-            ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
+            ctx.strokeStyle = strokeStyle;
             const halfWidth = textBox.closeIcon.width / 2;
@@ -66,6 +66,4 @@ ctx.moveTo(x - halfWidth, y - halfWidth);
     show: false,
-    fillOpacity: 1,
-    strokeOpacity: 1,
     strokeWidth: 1,
 };
 //# sourceMappingURL=ClickableShape.js.map

lib/components/StraightLine.d.ts

@@ -9,23 +9,22 @@ import * as React from "react";
     readonly interactiveCursorClass?: string;
-    readonly stroke: string;
-    readonly strokeWidth: number;
-    readonly strokeOpacity: number;
-    readonly strokeDasharray: strokeDashTypes;
+    readonly strokeStyle: string | CanvasGradient | CanvasPattern;
+    readonly strokeWidth?: number;
+    readonly strokeDasharray?: strokeDashTypes;
     readonly type: "XLINE" | "RAY" | "LINE";
-    readonly onEdge1Drag: any;
-    readonly onEdge2Drag: any;
-    readonly onDragStart: any;
-    readonly onDrag: any;
-    readonly onDragComplete: any;
+    readonly onEdge1Drag?: any;
+    readonly onEdge2Drag?: any;
+    readonly onDragStart?: any;
+    readonly onDrag?: any;
+    readonly onDragComplete?: any;
     readonly onHover?: any;
     readonly onUnHover?: any;
     readonly defaultClassName?: string;
-    readonly r: number;
-    readonly edgeFill: string;
-    readonly edgeStroke: string;
-    readonly edgeStrokeWidth: number;
-    readonly withEdge: boolean;
-    readonly children: any;
-    readonly tolerance: number;
-    readonly selected: boolean;
+    readonly r?: number;
+    readonly edgeFill?: string;
+    readonly edgeStroke?: string;
+    readonly edgeStrokeWidth?: number;
+    readonly withEdge?: boolean;
+    readonly children?: any;
+    readonly tolerance?: number;
+    readonly selected?: boolean;
 }
@@ -32,0 +31,0 @@ declare class StraightLine extends React.Component<StraightLineProps> {

lib/components/StraightLine.js

 import * as React from "react";
-import { colorToRGBA, getStrokeDasharrayCanvas, getMouseCanvas, GenericChartComponent, isDefined, noop, } from "@react-financial-charts/core";
+import { getStrokeDasharrayCanvas, getMouseCanvas, GenericChartComponent, isDefined, noop, } from "@react-financial-charts/core";
 class StraightLine extends React.Component {
@@ -28,6 +28,6 @@ constructor() {
         this.drawOnCanvas = (ctx, moreProps) => {
-            const { stroke, strokeWidth, strokeOpacity, strokeDasharray } = this.props;
+            const { strokeWidth = StraightLine.defaultProps.strokeWidth, strokeDasharray, strokeStyle } = this.props;
             const { x1, y1, x2, y2 } = helper(this.props, moreProps);
             ctx.lineWidth = strokeWidth;
-            ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
+            ctx.strokeStyle = strokeStyle;
             const lineDash = getStrokeDasharrayCanvas(strokeDasharray);
@@ -34,0 +34,0 @@ ctx.setLineDash(lineDash);

lib/components/Text.d.ts

@@ -6,3 +6,3 @@ import * as React from "react";
     readonly fontSize: number;
-    readonly fill: string;
+    readonly fillStyle: string | CanvasGradient | CanvasPattern;
     readonly selected?: boolean;
@@ -9,0 +9,0 @@ readonly xyProvider: (moreProps: any) => number[];

lib/components/Text.js

@@ -10,6 +10,6 @@ import * as React from "react";
         this.drawOnCanvas = (ctx, moreProps) => {
-            const { xyProvider, fontFamily, fontSize, fill, children } = this.props;
+            const { xyProvider, fontFamily, fontSize, fillStyle, children } = this.props;
             const [x, y] = xyProvider(moreProps);
             ctx.font = `${fontSize}px ${fontFamily}`;
-            ctx.fillStyle = fill;
+            ctx.fillStyle = fillStyle;
             ctx.beginPath();
@@ -16,0 +16,0 @@ ctx.fillText(children, x, y);

lib/TrendLine.d.ts

@@ -19,4 +19,3 @@ import * as React from "react";
     readonly appearance: {
-        stroke: string;
-        strokeOpacity: number;
+        strokeStyle: string;
         strokeWidth: number;
@@ -59,4 +58,3 @@ strokeDasharray: strokeDashTypes;
         appearance: {
-            stroke: string;
-            strokeOpacity: number;
+            strokeStyle: string;
             strokeWidth: number;
@@ -63,0 +61,0 @@ strokeDasharray: string;

lib/TrendLine.js

@@ -85,3 +85,3 @@ import * as React from "react";
         const { current, override } = this.state;
-        const tempLine = isDefined(current) && isDefined(current.end) ? (React.createElement(StraightLine, { type: type, x1Value: current.start[0], y1Value: current.start[1], x2Value: current.end[0], y2Value: current.end[1], stroke: appearance.stroke, strokeWidth: appearance.strokeWidth, strokeOpacity: appearance.strokeOpacity })) : null;
+        const tempLine = isDefined(current) && isDefined(current.end) ? (React.createElement(StraightLine, { type: type, x1Value: current.start[0], y1Value: current.start[1], x2Value: current.end[0], y2Value: current.end[1], strokeStyle: appearance.strokeStyle, strokeWidth: appearance.strokeWidth })) : null;
         return (React.createElement("g", null,
@@ -92,3 +92,3 @@ trends.map((each, idx) => {
                 const hoverTextWithDefault = Object.assign(Object.assign({}, TrendLine.defaultProps.hoverText), hoverText);
-                return (React.createElement(EachTrendLine, { key: idx, ref: this.saveNodeType(idx), index: idx, type: each.type, selected: each.selected, x1Value: getValueFromOverride(override, idx, "x1Value", each.start[0]), y1Value: getValueFromOverride(override, idx, "y1Value", each.start[1]), x2Value: getValueFromOverride(override, idx, "x2Value", each.end[0]), y2Value: getValueFromOverride(override, idx, "y2Value", each.end[1]), stroke: eachAppearance.stroke, strokeWidth: eachAppearance.strokeWidth, strokeOpacity: eachAppearance.strokeOpacity, strokeDasharray: eachAppearance.strokeDasharray, edgeStroke: eachAppearance.edgeStroke, edgeFill: eachAppearance.edgeFill, edgeStrokeWidth: eachAppearance.edgeStrokeWidth, r: eachAppearance.r, hoverText: hoverTextWithDefault, onDrag: this.handleDragLine, onDragComplete: this.handleDragLineComplete, edgeInteractiveCursor: "react-financial-charts-move-cursor", lineInteractiveCursor: "react-financial-charts-move-cursor" }));
+                return (React.createElement(EachTrendLine, { key: idx, ref: this.saveNodeType(idx), index: idx, type: each.type, selected: each.selected, x1Value: getValueFromOverride(override, idx, "x1Value", each.start[0]), y1Value: getValueFromOverride(override, idx, "y1Value", each.start[1]), x2Value: getValueFromOverride(override, idx, "x2Value", each.end[0]), y2Value: getValueFromOverride(override, idx, "y2Value", each.end[1]), strokeStyle: eachAppearance.strokeStyle, strokeWidth: eachAppearance.strokeWidth, strokeOpacity: eachAppearance.strokeOpacity, strokeDasharray: eachAppearance.strokeDasharray, edgeStroke: eachAppearance.edgeStroke, edgeFill: eachAppearance.edgeFill, edgeStrokeWidth: eachAppearance.edgeStrokeWidth, r: eachAppearance.r, hoverText: hoverTextWithDefault, onDrag: this.handleDragLine, onDragComplete: this.handleDragLineComplete, edgeInteractiveCursor: "react-financial-charts-move-cursor", lineInteractiveCursor: "react-financial-charts-move-cursor" }));
             }),
@@ -112,4 +112,3 @@ tempLine,
     appearance: {
-        stroke: "#000000",
-        strokeOpacity: 1,
+        strokeStyle: "#000000",
         strokeWidth: 1,
@@ -116,0 +115,0 @@ strokeDasharray: "Solid",

lib/wrapper/EachEquidistantChannel.d.ts

@@ -21,4 +21,2 @@ import * as React from "react";
         stroke: string;
-        fillOpacity: number;
-        strokeOpacity: number;
         strokeWidth: number;
@@ -25,0 +23,0 @@ fill: string;

lib/wrapper/EachEquidistantChannel.js

@@ -28,3 +28,3 @@ var __rest = (this && this.__rest) || function (s, e) {
             const { onDragComplete } = this.props;
-            return (React.createElement(ClickableCircle, { ref: this.saveNodeType(edge), show: selected || hover, cx: xy[0], cy: xy[1], r: r, fill: fill, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: cursor, onDragStart: this.handleDragStart, onDrag: dragHandler, onDragComplete: onDragComplete }));
+            return (React.createElement(ClickableCircle, { ref: this.saveNodeType(edge), show: selected || hover, cx: xy[0], cy: xy[1], r: r, fillStyle: fill, strokeStyle: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: cursor, onDragStart: this.handleDragStart, onDrag: dragHandler, onDragComplete: onDragComplete }));
         };
@@ -124,3 +124,3 @@ this.handleChannelHeightChange = (moreProps) => {
         const { interactive, hoverText, appearance } = this.props;
-        const { edgeFill, edgeFill2, stroke, strokeWidth, strokeOpacity, fill, fillOpacity } = appearance;
+        const { edgeFill, edgeFill2, stroke, strokeWidth, fill } = appearance;
         const { selected } = this.props;
@@ -162,3 +162,3 @@ const { onDragComplete } = this.props;
         return (React.createElement("g", null,
-            React.createElement(ChannelWithArea, Object.assign({ ref: this.saveNodeType("channel"), selected: selected || hover }, hoverHandler, { startXY: startXY, endXY: endXY, dy: dy, stroke: stroke, strokeWidth: hover || selected ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, fill: fill, fillOpacity: fillOpacity, interactiveCursorClass: "react-financial-charts-move-cursor", onDragStart: this.handleDragStart, onDrag: this.handleChannelDrag, onDragComplete: onDragComplete })),
+            React.createElement(ChannelWithArea, Object.assign({ ref: this.saveNodeType("channel"), selected: selected || hover }, hoverHandler, { startXY: startXY, endXY: endXY, dy: dy, strokeStyle: stroke, strokeWidth: hover || selected ? strokeWidth + 1 : strokeWidth, fillStyle: fill, interactiveCursorClass: "react-financial-charts-move-cursor", onDragStart: this.handleDragStart, onDrag: this.handleChannelDrag, onDragComplete: onDragComplete })),
             line1Edge,
@@ -165,0 +165,0 @@ line2Edge,

lib/wrapper/EachFibRetracement.d.ts

@@ -11,5 +11,4 @@ import * as React from "react";
     readonly appearance: {
-        stroke: string;
+        strokeStyle: string;
         strokeWidth: number;
-        strokeOpacity: number;
         fontFamily: string;
@@ -49,5 +48,4 @@ fontSize: number;
         appearance: {
-            stroke: string;
+            strokeStyle: string;
             strokeWidth: number;
-            strokeOpacity: number;
             fontFamily: string;
@@ -54,0 +52,0 @@ fontSize: number;

lib/wrapper/EachFibRetracement.js

@@ -115,3 +115,3 @@ var __rest = (this && this.__rest) || function (s, e) {
         const { interactive, yDisplayFormat, type, appearance } = this.props;
-        const { stroke, strokeWidth, strokeOpacity } = appearance;
+        const { strokeStyle, strokeWidth } = appearance;
         const { fontFamily, fontSize, fontFill } = appearance;
@@ -166,6 +166,6 @@ const { edgeStroke, edgeFill, nsEdgeFill, edgeStrokeWidth, r } = appearance;
                 return (React.createElement("g", { key: j },
-                    React.createElement(StraightLine, Object.assign({ ref: this.saveNodeType(`line_${j}`), selected: selected || hover }, hoverHandler, { type: lineType, x1Value: line.x1, y1Value: line.y, x2Value: line.x2, y2Value: line.y, stroke: stroke, strokeWidth: hover || selected ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, interactiveCursorClass: interactiveCursorClass, onDragStart: this.handleLineDragStart, onDrag: dragHandler, onDragComplete: onDragComplete })),
-                    React.createElement(Text, { selected: selected, xyProvider: xyProvider, fontFamily: fontFamily, fontSize: fontSize, fill: fontFill }, text),
-                    React.createElement(ClickableCircle, { ref: this.saveNodeType("edge1"), show: selected || hover, cx: line.x1, cy: line.y, r: r, fill: firstOrLast ? nsEdgeFill : edgeFill, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: interactiveEdgeCursorClass, onDrag: edge1DragHandler, onDragComplete: onDragComplete }),
-                    React.createElement(ClickableCircle, { ref: this.saveNodeType("edge2"), show: selected || hover, cx: line.x2, cy: line.y, r: r, fill: firstOrLast ? nsEdgeFill : edgeFill, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: interactiveEdgeCursorClass, onDrag: edge2DragHandler, onDragComplete: onDragComplete })));
+                    React.createElement(StraightLine, Object.assign({ ref: this.saveNodeType(`line_${j}`), selected: selected || hover }, hoverHandler, { type: lineType, x1Value: line.x1, y1Value: line.y, x2Value: line.x2, y2Value: line.y, strokeStyle: strokeStyle, strokeWidth: hover || selected ? strokeWidth + 1 : strokeWidth, interactiveCursorClass: interactiveCursorClass, onDragStart: this.handleLineDragStart, onDrag: dragHandler, onDragComplete: onDragComplete })),
+                    React.createElement(Text, { selected: selected, xyProvider: xyProvider, fontFamily: fontFamily, fontSize: fontSize, fillStyle: fontFill }, text),
+                    React.createElement(ClickableCircle, { ref: this.saveNodeType("edge1"), show: selected || hover, cx: line.x1, cy: line.y, r: r, fillStyle: firstOrLast ? nsEdgeFill : edgeFill, strokeStyle: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: interactiveEdgeCursorClass, onDrag: edge1DragHandler, onDragComplete: onDragComplete }),
+                    React.createElement(ClickableCircle, { ref: this.saveNodeType("edge2"), show: selected || hover, cx: line.x2, cy: line.y, r: r, fillStyle: firstOrLast ? nsEdgeFill : edgeFill, strokeStyle: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: interactiveEdgeCursorClass, onDrag: edge2DragHandler, onDragComplete: onDragComplete })));
             }),
@@ -179,5 +179,4 @@ React.createElement(HoverTextNearMouse, Object.assign({ show: hoverTextEnabled && hover }, restHoverTextProps, { text: selected ? hoverTextSelected : hoverTextUnselected }))));
     appearance: {
-        stroke: "#000000",
+        strokeStyle: "#000000",
         strokeWidth: 1,
-        strokeOpacity: 1,
         fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
@@ -184,0 +183,0 @@ fontSize: 10,

lib/wrapper/EachGannFan.js

@@ -27,3 +27,3 @@ var __rest = (this && this.__rest) || function (s, e) {
             const { onDragComplete } = this.props;
-            return (React.createElement(ClickableCircle, { ref: this.saveNodeType(edge), show: selected || hover, cx: xy[0], cy: xy[1], r: r, fill: fill, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: cursor, onDragStart: this.handleDragStart, onDrag: dragHandler, onDragComplete: onDragComplete }));
+            return (React.createElement(ClickableCircle, { ref: this.saveNodeType(edge), show: selected || hover, cx: xy[0], cy: xy[1], r: r, fillStyle: fill, strokeStyle: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: cursor, onDragStart: this.handleDragStart, onDrag: dragHandler, onDragComplete: onDragComplete }));
         };
@@ -30,0 +30,0 @@ this.handleLine1Edge2Drag = (moreProps) => {

lib/wrapper/EachInteractiveYCoordinate.js

@@ -71,3 +71,3 @@ import * as React from "react";
             React.createElement(InteractiveYCoordinate, Object.assign({ ref: this.saveNodeType("priceCoordinate"), selected: selected && !closeIconHover, hovering: hover || closeIconHover, interactiveCursorClass: "react-financial-charts-move-cursor" }, hoverHandler, dragProps, { yValue: yValue, bgFill: bgFill, bgOpacity: bgOpacity, textFill: textFill, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, fontSize: fontSize, stroke: stroke, strokeOpacity: strokeOpacity, strokeDasharray: strokeDasharray, strokeWidth: strokeWidth, text: text, textBox: textBox, edge: edge })),
-            React.createElement(ClickableShape, { show: true, hovering: closeIconHover, text: text, yValue: yValue, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, fontSize: fontSize, textBox: textBox, stroke: stroke, strokeOpacity: strokeOpacity, onHover: this.handleCloseIconHover, onUnHover: this.handleCloseIconHover, onClick: this.handleDelete })));
+            React.createElement(ClickableShape, { show: true, hovering: closeIconHover, text: text, yValue: yValue, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, fontSize: fontSize, textBox: textBox, strokeStyle: stroke, onHover: this.handleCloseIconHover, onUnHover: this.handleCloseIconHover, onClick: this.handleDelete })));
     }
@@ -74,0 +74,0 @@ }

lib/wrapper/EachLinearRegressionChannel.js

@@ -61,4 +61,4 @@ var __rest = (this && this.__rest) || function (s, e) {
             React.createElement(LinearRegressionChannelWithArea, Object.assign({ ref: this.saveNodeType("area"), selected: selected || hover }, hoverHandler, { x1Value: x1Value, x2Value: x2Value, fill: fill, stroke: stroke, strokeWidth: hover || selected ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, fillOpacity: fillOpacity })),
-            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge1"), show: selected || hover, xyProvider: edge1Provider(this.props), r: r, fill: edgeFill, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDrag: this.handleEdge1Drag, onDragComplete: onDragComplete }),
-            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge2"), show: selected || hover, xyProvider: edge2Provider(this.props), r: r, fill: edgeFill, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDrag: this.handleEdge2Drag, onDragComplete: onDragComplete }),
+            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge1"), show: selected || hover, xyProvider: edge1Provider(this.props), r: r, fillStyle: edgeFill, strokeStyle: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDrag: this.handleEdge1Drag, onDragComplete: onDragComplete }),
+            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge2"), show: selected || hover, xyProvider: edge2Provider(this.props), r: r, fillStyle: edgeFill, strokeStyle: edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDrag: this.handleEdge2Drag, onDragComplete: onDragComplete }),
             React.createElement(HoverTextNearMouse, Object.assign({ show: hoverTextEnabled && hover }, restHoverTextProps, { text: selected ? hoverTextSelected : hoverTextUnselected }))));
@@ -65,0 +65,0 @@ }

lib/wrapper/EachTrendLine.d.ts

@@ -20,3 +20,3 @@ import * as React from "react";
     selected?: boolean;
-    stroke: string;
+    strokeStyle: string;
     strokeWidth: number;
@@ -60,3 +60,2 @@ strokeDasharray: strokeDashTypes;
         strokeWidth: number;
-        strokeOpacity: number;
         strokeDasharray: string;
@@ -63,0 +62,0 @@ hoverText: {

lib/wrapper/EachTrendLine.js

@@ -106,9 +106,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     render() {
-        const { x1Value, y1Value, x2Value, y2Value, type, stroke, strokeWidth, strokeOpacity, strokeDasharray, r, edgeStrokeWidth, edgeFill, edgeStroke, edgeInteractiveCursor, lineInteractiveCursor, hoverText, selected, onDragComplete, } = this.props;
+        const { x1Value, y1Value, x2Value, y2Value, type, strokeStyle, strokeWidth, strokeDasharray, r, edgeStrokeWidth, edgeFill, edgeStroke, edgeInteractiveCursor, lineInteractiveCursor, hoverText, selected, onDragComplete, } = this.props;
         const { enable: hoverTextEnabled, selectedText: hoverTextSelected, text: hoverTextUnselected } = hoverText, restHoverTextProps = __rest(hoverText, ["enable", "selectedText", "text"]);
         const { hover, anchor } = this.state;
         return (React.createElement("g", null,
-            React.createElement(StraightLine, { ref: this.saveNodeType("line"), selected: selected || hover, onHover: this.handleHover, onUnHover: this.handleHover, x1Value: x1Value, y1Value: y1Value, x2Value: x2Value, y2Value: y2Value, type: type, stroke: stroke, strokeWidth: hover || selected ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, strokeDasharray: strokeDasharray, interactiveCursorClass: lineInteractiveCursor, onDragStart: this.handleLineDragStart, onDrag: this.handleLineDrag, onDragComplete: onDragComplete }),
-            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge1"), show: selected || hover, cx: x1Value, cy: y1Value, r: r, fill: edgeFill, stroke: anchor === "edge1" ? stroke : edgeStroke, strokeWidth: edgeStrokeWidth, strokeOpacity: 1, interactiveCursorClass: edgeInteractiveCursor, onDragStart: this.handleEdge1DragStart, onDrag: this.handleEdge1Drag, onDragComplete: this.handleDragComplete }),
-            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge2"), show: selected || hover, cx: x2Value, cy: y2Value, r: r, fill: edgeFill, stroke: anchor === "edge2" ? stroke : edgeStroke, strokeWidth: edgeStrokeWidth, strokeOpacity: 1, interactiveCursorClass: edgeInteractiveCursor, onDragStart: this.handleEdge2DragStart, onDrag: this.handleEdge2Drag, onDragComplete: this.handleDragComplete }),
+            React.createElement(StraightLine, { ref: this.saveNodeType("line"), selected: selected || hover, onHover: this.handleHover, onUnHover: this.handleHover, x1Value: x1Value, y1Value: y1Value, x2Value: x2Value, y2Value: y2Value, type: type, strokeStyle: strokeStyle, strokeWidth: hover || selected ? strokeWidth + 1 : strokeWidth, strokeDasharray: strokeDasharray, interactiveCursorClass: lineInteractiveCursor, onDragStart: this.handleLineDragStart, onDrag: this.handleLineDrag, onDragComplete: onDragComplete }),
+            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge1"), show: selected || hover, cx: x1Value, cy: y1Value, r: r, fillStyle: edgeFill, strokeStyle: anchor === "edge1" ? strokeStyle : edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDragStart: this.handleEdge1DragStart, onDrag: this.handleEdge1Drag, onDragComplete: this.handleDragComplete }),
+            React.createElement(ClickableCircle, { ref: this.saveNodeType("edge2"), show: selected || hover, cx: x2Value, cy: y2Value, r: r, fillStyle: edgeFill, strokeStyle: anchor === "edge2" ? strokeStyle : edgeStroke, strokeWidth: edgeStrokeWidth, interactiveCursorClass: edgeInteractiveCursor, onDragStart: this.handleEdge2DragStart, onDrag: this.handleEdge2Drag, onDragComplete: this.handleDragComplete }),
             React.createElement(HoverTextNearMouse, Object.assign({ show: hoverTextEnabled && hover }, restHoverTextProps, { text: selected ? hoverTextSelected : hoverTextUnselected }))));
@@ -130,3 +130,2 @@ }
     strokeWidth: 1,
-    strokeOpacity: 1,
     strokeDasharray: "Solid",
@@ -133,0 +132,0 @@ hoverText: {

package.json

 {
   "name": "@react-financial-charts/interactive",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.7",
   "description": "Interactive features for react-financial-charts",
@@ -41,4 +41,4 @@ "publishConfig": {
   "dependencies": {
-    "@react-financial-charts/coordinates": "^1.0.0-alpha.1",
-    "@react-financial-charts/core": "^1.0.0-alpha.1",
+    "@react-financial-charts/coordinates": "^1.0.0-alpha.7",
+    "@react-financial-charts/core": "^1.0.0-alpha.7",
     "d3-array": "2.4.0",
@@ -54,3 +54,3 @@ "d3-format": "1.4.4",
   },
-  "gitHead": "b9b1295b8eca8b4f2ceb4c7be53554b4badd4a6b"
+  "gitHead": "71acd57b6a52ae3fd2376fc19153d2a4f78079c3"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

523198

decreased by-0.5%

Lines of code

10257

decreased by-0.7%

Dependency changes

• Updated@react-financial-charts/coordinates@^1.0.0-alpha.7

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