react-financial-charts - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

CHANGELOG.md

@@ -6,2 +6,20 @@ # Change Log
 
+# [0.4.0](https://github.com/reactivemarkets/react-financial-charts/compare/v0.3.3...v0.4.0) (2019-12-16)
+
+
+### Bug Fixes
+
+* **charts:** edge coordinates can now use rectWidth ([5b0a20b](https://github.com/reactivemarkets/react-financial-charts/commit/5b0a20b6858f2cbbc915c2980275cdb73f568556))
+* **charts:** fixing coordinates component props ([1fca524](https://github.com/reactivemarkets/react-financial-charts/commit/1fca5244173bea5438a19eac061df9e0505fe246))
+* **charts:** modifying axis ticks based on height and width ([94efee1](https://github.com/reactivemarkets/react-financial-charts/commit/94efee14467d663caf2f04eddeb52e0cae2701d7))
+
+
+### Features
+
+* **charts:** updated zoom buttons styling ([d3c1bbb](https://github.com/reactivemarkets/react-financial-charts/commit/d3c1bbb9eea624aead45684ca2cbbfca0cccdb5f))
+
+
+
+
+
 ## [0.3.3](https://github.com/reactivemarkets/react-financial-charts/compare/v0.3.2...v0.3.3) (2019-11-27)
@@ -8,0 +26,0 @@

lib/axes/Axis.d.ts

@@ -15,3 +15,2 @@ import * as React from "react";
     readonly fill?: string;
-    readonly flexTicks?: boolean;
     readonly fontFamily?: string;
@@ -18,0 +17,0 @@ readonly fontSize?: number;

lib/axes/Axis.js

@@ -56,3 +56,3 @@ import { range as d3Range, zip } from "d3-array";
 function tickHelper(props, scale) {
-    const { orient, innerTickSize, tickFormat, tickPadding, tickLabelFill, tickStrokeWidth, tickStrokeDasharray, fontSize, fontFamily, fontWeight, showTicks, flexTicks, showTickLabel, ticks: tickArguments, tickValues: tickValuesProp, tickStroke, tickStrokeOpacity, tickInterval, tickIntervalFunction, } = props;
+    const { orient, innerTickSize, tickFormat, tickPadding, tickLabelFill, tickStrokeWidth, tickStrokeDasharray, fontSize, fontFamily, fontWeight, showTicks, showTickLabel, ticks: tickArguments, tickValues: tickValuesProp, tickStroke, tickStrokeOpacity, tickInterval, tickIntervalFunction, } = props;
     let tickValues;
@@ -75,3 +75,3 @@ if (isDefined(tickValuesProp)) {
     else if (isDefined(scale.ticks)) {
-        tickValues = scale.ticks(tickArguments, flexTicks);
+        tickValues = scale.ticks(tickArguments);
     }
@@ -110,3 +110,3 @@ else {
         });
-        if (showTicks && flexTicks) {
+        if (showTicks) {
             const nodes = ticks.map((d) => ({ id: d.value, value: d.value, fy: d.y2, origX: d.x1 }));
@@ -113,0 +113,0 @@ const simulation = forceSimulation(nodes)

lib/axes/XAxis.d.ts

@@ -9,3 +9,2 @@ import * as PropTypes from "prop-types";
     readonly fill?: string;
-    readonly flexTicks?: boolean;
     readonly fontFamily?: string;
@@ -60,3 +59,2 @@ readonly fontSize?: number;
         strokeOpacity: number;
-        ticks: number;
         tickPadding: number;
@@ -77,4 +75,5 @@ tickLabelFill: string;
     private readonly helper;
+    private readonly getXTicks;
     private readonly getXScale;
 }
 export {};

lib/axes/XAxis.js

@@ -23,3 +23,3 @@ var __rest = (this && this.__rest) || function (s, e) {
         this.helper = (props, context) => {
-            const { axisAt, xZoomHeight = XAxis.defaultProps.xZoomHeight, orient, } = props;
+            const { axisAt, xZoomHeight = XAxis.defaultProps.xZoomHeight, orient, ticks, } = props;
             const { chartConfig: { width, height } } = context;
@@ -48,4 +48,11 @@ let axisLocation;
                 bg: { x, y, h, w },
+                ticks: (ticks !== null && ticks !== void 0 ? ticks : this.getXTicks(width)),
             };
         };
+        this.getXTicks = (width) => {
+            if (width > 500) {
+                return 6;
+            }
+            return 12;
+        };
         this.getXScale = (moreProps) => {
@@ -89,3 +96,2 @@ const { xScale: scale, width } = moreProps;
     strokeOpacity: 1,
-    ticks: 10,
     tickPadding: 6,
@@ -92,0 +98,0 @@ tickLabelFill: "#000000",

lib/axes/YAxis.d.ts

@@ -9,3 +9,2 @@ import * as PropTypes from "prop-types";
     readonly fill?: string;
-    readonly flexTicks?: boolean;
     readonly fontFamily?: string;
@@ -62,3 +61,2 @@ readonly fontSize?: number;
         tickLabelFill: string;
-        ticks: number;
         tickStroke: string;
@@ -78,4 +76,5 @@ tickStrokeOpacity: number;
     private readonly helper;
+    private readonly getYTicks;
     private readonly getYScale;
 }
 export {};

lib/axes/YAxis.js

@@ -23,3 +23,3 @@ var __rest = (this && this.__rest) || function (s, e) {
         this.helper = (props, context) => {
-            const { axisAt, yZoomWidth = YAxis.defaultProps.yZoomWidth, orient, } = props;
+            const { axisAt, ticks, yZoomWidth = YAxis.defaultProps.yZoomWidth, orient, } = props;
             const { chartConfig: { width, height } } = context;
@@ -48,5 +48,15 @@ let axisLocation;
                 bg: { x, y, h, w },
+                ticks: (ticks !== null && ticks !== void 0 ? ticks : this.getYTicks(height)),
                 zoomEnabled: context.chartConfig.yPan,
             };
         };
+        this.getYTicks = (height) => {
+            if (height < 300) {
+                return 2;
+            }
+            if (height < 500) {
+                return 6;
+            }
+            return 8;
+        };
         this.getYScale = (moreProps) => {
@@ -92,3 +102,2 @@ const { yScale: scale, flipYScale, height } = moreProps.chartConfig;
     tickLabelFill: "#000000",
-    ticks: 10,
     tickStroke: "#000000",
@@ -95,0 +104,0 @@ tickStrokeOpacity: 1,

lib/coordinates/CrossHairCursor.js

@@ -15,3 +15,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import GenericComponent, { getMouseCanvas } from "../GenericComponent";
-import { colorToRGBA, getStrokeDasharray, getStrokeDasharrayCanvas, isDefined, isNotDefined } from "../utils";
+import { colorToRGBA, getStrokeDasharray, getStrokeDasharrayCanvas, isNotDefined } from "../utils";
 const defaultCustomX = (props, moreProps) => {
@@ -29,3 +29,2 @@ const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
         this.renderSVG = (moreProps) => {
-            const { className } = this.props;
             const lines = this.helper(this.props, moreProps);
@@ -35,5 +34,6 @@ if (lines === undefined) {
             }
+            const { className } = this.props;
             return (React.createElement("g", { className: className }, lines.map((_a, idx) => {
                 var { strokeDasharray } = _a, rest = __rest(_a, ["strokeDasharray"]);
-                return React.createElement("line", Object.assign({ key: idx, strokeDasharray: getStrokeDasharray(strokeDasharray) }, rest));
+                return (React.createElement("line", Object.assign({ key: idx, strokeDasharray: getStrokeDasharray(strokeDasharray) }, rest)));
             })));
@@ -43,3 +43,3 @@ };
             const lines = this.helper(this.props, moreProps);
-            if (lines !== undefined && isDefined(lines)) {
+            if (lines !== undefined) {
                 const { margin, ratio } = this.context;
@@ -46,0 +46,0 @@ const originX = 0.5 * ratio + margin.left;

lib/coordinates/CurrentCoordinate.d.ts

 import * as React from "react";
 interface CurrentCoordinateProps {
     readonly className?: string;
-    readonly fill?: any;
+    readonly fill?: string | ((dataItem: any) => string);
     readonly r: number;
@@ -6,0 +6,0 @@ readonly yAccessor: (item: any) => number;

lib/coordinates/CurrentCoordinate.js

@@ -13,3 +13,6 @@ import * as React from "react";
             }
-            ctx.fillStyle = circle.fill;
+            const fillColor = circle.fill instanceof Function ? circle.fill(moreProps.currentItem) : circle.fill;
+            if (fillColor !== undefined) {
+                ctx.fillStyle = fillColor;
+            }
             ctx.beginPath();
@@ -32,3 +35,3 @@ ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, false);
             if (!show || isNotDefined(currentItem)) {
-                return null;
+                return undefined;
             }
@@ -38,3 +41,3 @@ const xValue = xAccessor(currentItem);
             if (isNotDefined(yValue)) {
-                return null;
+                return undefined;
             }
@@ -41,0 +44,0 @@ const x = Math.round(xScale(xValue));

lib/coordinates/EdgeCoordinateV3.js

@@ -105,3 +105,6 @@ import * as React from "react";
     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(Object.assign(Object.assign({}, props), { rectWidth: width }));
@@ -108,0 +111,0 @@ if (edge === null) {

lib/coordinates/EdgeIndicator.d.ts

@@ -10,2 +10,3 @@ /// <reference types="d3-format" />
     readonly fill?: string | any;
+    readonly fitToText?: boolean;
     readonly itemType: "first" | "last";
@@ -25,2 +26,3 @@ readonly lineStroke?: string | any;
         type: string;
+        fitToText: boolean;
         orient: string;
@@ -27,0 +29,0 @@ edgeAt: string;

lib/coordinates/EdgeIndicator.js

@@ -71,2 +71,3 @@ import { format } from "d3-format";
     type: "horizontal",
+    fitToText: false,
     orient: "right",
@@ -73,0 +74,0 @@ edgeAt: "right",

lib/coordinates/MouseCoordinateX.d.ts

 import * as React from "react";
 interface MouseCoordinateXProps {
+    readonly at?: "bottom" | "top";
+    readonly customX: any;
     readonly displayFormat: any;
-    readonly yAxisPad?: number;
-    readonly rectWidth?: number;
-    readonly rectHeight?: number;
-    readonly orient?: "bottom" | "top" | "left" | "right";
-    readonly at?: "bottom" | "top" | "left" | "right";
     readonly fill?: string;
-    readonly opacity?: number;
+    readonly fitToText?: boolean;
     readonly fontFamily?: string;
     readonly fontSize?: number;
+    readonly opacity?: number;
+    readonly orient?: "bottom" | "top";
+    readonly rectRadius?: number;
+    readonly rectWidth?: number;
+    readonly rectHeight?: number;
+    readonly snapX?: boolean;
+    readonly stroke?: string;
+    readonly strokeOpacity?: number;
+    readonly strokeWidth?: number;
     readonly textFill?: string;
-    readonly snapX?: boolean;
+    readonly yAxisPad?: number;
 }
 export declare class MouseCoordinateX extends React.Component<MouseCoordinateXProps> {
     static defaultProps: {
-        yAxisPad: number;
+        at: string;
+        customX: (props: MouseCoordinateXProps, moreProps: any) => {
+            x: any;
+            coordinate: any;
+        };
+        fill: string;
+        fitToText: boolean;
+        fontFamily: string;
+        fontSize: number;
+        opacity: number;
+        orient: string;
         rectWidth: number;
         rectHeight: number;
+        snapX: boolean;
         strokeOpacity: number;
         strokeWidth: number;
-        orient: string;
-        at: string;
-        fill: string;
-        opacity: number;
-        fontFamily: string;
-        fontSize: number;
         textFill: string;
-        snapX: boolean;
-        customX: (props: MouseCoordinateXProps, moreProps: any) => {
-            x: any;
-            coordinate: any;
-        };
+        yAxisPad: number;
     };
@@ -36,0 +43,0 @@ render(): JSX.Element;

lib/coordinates/MouseCoordinateX.js

@@ -42,10 +42,7 @@ import * as React from "react";
             }
-            const { customX } = props;
-            const { orient, at } = props;
+            const { customX, orient, at } = props;
             const { stroke, strokeOpacity, strokeWidth } = props;
             const { rectRadius, rectWidth, rectHeight } = props;
-            const { fill, opacity, fontFamily, fontSize, textFill } = props;
-            const edgeAt = (at === "bottom")
-                ? height
-                : 0;
+            const { fill, opacity, fitToText, fontFamily, fontSize, textFill } = props;
+            const edgeAt = (at === "bottom") ? height : 0;
             const { x, coordinate, } = customX(props, moreProps);
@@ -58,2 +55,3 @@ const type = "vertical";
                 coordinate,
+                fitToText,
                 show,
@@ -83,17 +81,18 @@ type,
 MouseCoordinateX.defaultProps = {
-    yAxisPad: 0,
+    at: "bottom",
+    customX: defaultCustomX,
+    fill: "#37474F",
+    fitToText: true,
+    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+    fontSize: 13,
+    opacity: 1,
+    orient: "bottom",
     rectWidth: 80,
     rectHeight: 20,
+    snapX: true,
     strokeOpacity: 1,
     strokeWidth: 1,
-    orient: "bottom",
-    at: "bottom",
-    fill: "#37474F",
-    opacity: 1,
-    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
-    fontSize: 13,
     textFill: "#FFFFFF",
-    snapX: true,
-    customX: defaultCustomX,
+    yAxisPad: 0,
 };
 //# sourceMappingURL=MouseCoordinateX.js.map

lib/coordinates/MouseCoordinateY.d.ts

 import * as React from "react";
 interface MouseCoordinateYProps {
     readonly arrowWidth?: number;
-    readonly at?: "bottom" | "top" | "left" | "right";
+    readonly at?: "left" | "right";
     readonly displayFormat: any;
@@ -10,6 +10,9 @@ readonly dx?: number;
     readonly fill?: string;
+    readonly fitToText?: boolean;
     readonly opacity?: number;
-    readonly orient?: "bottom" | "top" | "left" | "right";
+    readonly orient?: "left" | "right";
     readonly rectWidth?: number;
     readonly rectHeight?: number;
+    readonly strokeOpacity?: number;
+    readonly strokeWidth?: number;
     readonly textFill?: string;
@@ -21,15 +24,16 @@ readonly yAxisPad?: number;
         arrowWidth: number;
-        yAxisPad: number;
-        rectWidth: number;
-        rectHeight: number;
-        orient: string;
         at: string;
         dx: number;
         fill: string;
-        opacity: number;
+        fitToText: boolean;
         fontFamily: string;
         fontSize: number;
-        textFill: string;
+        opacity: number;
+        orient: string;
+        rectWidth: number;
+        rectHeight: number;
         strokeOpacity: number;
         strokeWidth: number;
+        textFill: string;
+        yAxisPad: number;
     };
@@ -44,2 +48,3 @@ render(): JSX.Element;
     show: boolean;
+    fitToText: any;
     type: string;
@@ -46,0 +51,0 @@ orient: any;

lib/coordinates/MouseCoordinateY.js

@@ -24,4 +24,6 @@ import * as React from "react";
         this.helper = (props, moreProps) => {
-            const { chartId } = moreProps;
-            const { currentCharts, mouseXY } = moreProps;
+            const { chartId, currentCharts, mouseXY, show } = moreProps;
+            if (!show) {
+                return null;
+            }
             if (isNotDefined(mouseXY)) {
@@ -33,6 +35,2 @@ return null;
             }
-            const { show } = moreProps;
-            if (!show) {
-                return null;
-            }
             const y = mouseXY[1];
@@ -51,15 +49,16 @@ const { chartConfig: { yScale } } = moreProps;
     arrowWidth: 0,
-    yAxisPad: 0,
-    rectWidth: 50,
-    rectHeight: 20,
-    orient: "right",
     at: "right",
     dx: 0,
     fill: "#37474F",
-    opacity: 1,
+    fitToText: false,
     fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
     fontSize: 13,
-    textFill: "#FFFFFF",
+    opacity: 1,
+    orient: "right",
+    rectWidth: 50,
+    rectHeight: 20,
     strokeOpacity: 1,
     strokeWidth: 1,
+    textFill: "#FFFFFF",
+    yAxisPad: 0,
 };
@@ -69,9 +68,7 @@ export function getYCoordinate(y, displayValue, props, 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;
     const x2 = width;
-    const edgeAt = (at === "right")
-        ? width
-        : 0;
+    const edgeAt = (at === "right") ? width : 0;
     const type = "horizontal";
@@ -82,2 +79,3 @@ const hideLine = true;
         show: true,
+        fitToText,
         type,
@@ -84,0 +82,0 @@ orient,

lib/interactive/ZoomButtons.d.ts

 import * as PropTypes from "prop-types";
 import * as React from "react";
 interface ZoomButtonsProps {
-    readonly zoomMultiplier: number;
-    readonly size: number[];
+    readonly fill: string;
+    readonly fillOpacity: number;
     readonly heightFromBase: number;
-    readonly rx: number;
-    readonly ry: number;
+    readonly onReset: () => void;
+    readonly r: number;
     readonly stroke: string;
     readonly strokeWidth: number;
-    readonly strokeOpacity: number;
-    readonly fill: string;
-    readonly fillOpacity: number;
-    readonly fontSize: number;
-    readonly textDy: string;
     readonly textFill: string;
-    readonly textStrokeWidth: number;
-    readonly onReset: any;
+    readonly zoomMultiplier: number;
 }
 export declare class ZoomButtons extends React.Component<ZoomButtonsProps> {
     static defaultProps: {
-        size: number[];
+        fill: string;
+        fillOpacity: number;
         heightFromBase: number;
-        rx: number;
-        ry: number;
+        r: number;
         stroke: string;
-        strokeOpacity: number;
         strokeWidth: number;
-        fill: string;
-        fillOpacity: number;
-        fontSize: number;
-        textDy: string;
         textFill: string;
-        textStrokeWidth: number;
         zoomMultiplier: number;
@@ -36,0 +24,0 @@ onReset: () => void;

lib/interactive/ZoomButtons.js

 import { interpolateNumber } from "d3-interpolate";
-import { path as d3Path } from "d3-path";
 import * as PropTypes from "prop-types";
@@ -48,51 +47,31 @@ import * as React from "react";
         const { width, height } = chartConfig;
-        const { size, heightFromBase, rx, ry } = this.props;
-        const { stroke, strokeOpacity, fill, strokeWidth, fillOpacity } = this.props;
-        const { textFill, textStrokeWidth } = this.props;
-        const { onReset } = this.props;
+        const { heightFromBase, r, fill, fillOpacity, onReset, stroke, strokeWidth, textFill } = this.props;
         const centerX = Math.round(width / 2);
         const y = height - heightFromBase;
-        const [w, h] = size;
-        const hLength = 5;
-        const wLength = 6;
-        const textY = Math.round(y + h / 2);
-        const resetX = centerX;
-        const zoomOut = d3Path();
-        const zoomOutX = centerX - w - 2 * strokeWidth;
-        zoomOut.moveTo(zoomOutX - wLength, textY);
-        zoomOut.lineTo(zoomOutX + wLength, textY);
-        zoomOut.closePath();
-        const zoomIn = d3Path();
-        const zoomInX = centerX + w + 2 * strokeWidth;
-        zoomIn.moveTo(zoomInX - wLength, textY);
-        zoomIn.lineTo(zoomInX + wLength, textY);
-        zoomIn.moveTo(zoomInX, textY - hLength);
-        zoomIn.lineTo(zoomInX, textY + hLength);
-        return (React.createElement("g", { className: "react-financial-charts-zoom-button" },
-            React.createElement("rect", { x: zoomOutX - w / 2, y: y, rx: rx, ry: ry, height: h, width: w, fill: fill, fillOpacity: fillOpacity, stroke: stroke, strokeOpacity: strokeOpacity, strokeWidth: strokeWidth }),
-            React.createElement("path", { d: zoomOut.toString(), stroke: textFill, strokeWidth: textStrokeWidth }),
-            React.createElement("rect", { x: resetX - w / 2, y: y, rx: rx, ry: ry, height: h, width: w, fill: fill, fillOpacity: fillOpacity, stroke: stroke, strokeOpacity: strokeOpacity, strokeWidth: strokeWidth }),
-            React.createElement("g", { transform: `translate (${resetX}, ${y + h / 4}) scale(.14)` },
-                React.createElement("path", { d: "M31 13C23.4 5.3 12.8.5 1.1.5c-23.3 0-42.3 19-42.3 42.5s18.9 42.5 42.3 42.5c13.8 0 26-6.6 33.7-16.9l-16.5-1.8C13.5 70.4 7.5 72.5 1 72.5c-16.2 0-29.3-13.2-29.3-29.4S-15.2 13.7 1 13.7c8.1 0 15.4 3.3 20.7 8.6l-10.9 11h32.5V.5L31 13z", fill: textFill })),
-            React.createElement("rect", { x: zoomInX - w / 2, y: y, rx: rx, ry: ry, height: h, width: w, fill: fill, fillOpacity: fillOpacity, stroke: stroke, strokeOpacity: strokeOpacity, strokeWidth: strokeWidth }),
-            React.createElement("path", { d: zoomIn.toString(), stroke: textFill, strokeWidth: textStrokeWidth }),
-            React.createElement("rect", { className: "react-financial-charts-enable-interaction out", onClick: this.handleZoomOut, x: zoomOutX - w / 2, y: y, rx: rx, ry: ry, height: h, width: w, fill: "none" }),
-            React.createElement("rect", { className: "react-financial-charts-enable-interaction reset", onClick: onReset, x: resetX - w / 2, y: y, rx: rx, ry: ry, height: h, width: w, fill: "none" }),
-            React.createElement("rect", { className: "react-financial-charts-enable-interaction in", onClick: this.handleZoomIn, x: zoomInX - w / 2, y: y, rx: rx, ry: ry, height: h, width: w, fill: "none" })));
+        const zoomOutX = centerX - 16 - (r * 2);
+        const zoomInX = centerX - 8;
+        const resetX = centerX + 16 + (r * 2);
+        return (React.createElement("g", { className: "react-financial-charts-zoom-buttons" },
+            React.createElement("circle", { className: "react-financial-charts-button", cx: zoomOutX - r / 2, cy: y + r / 2, fill: fill, fillOpacity: fillOpacity, stroke: stroke, strokeWidth: strokeWidth, r: r }),
+            React.createElement("g", { transform: `translate (${zoomOutX - 20}, ${y - 8 + r / 4})` },
+                React.createElement("path", { d: "M19,13H5V11H19V13Z", fill: textFill })),
+            React.createElement("circle", { className: "react-financial-charts-button", cx: zoomInX - r / 2, cy: y + r / 2, fill: fill, fillOpacity: fillOpacity, stroke: stroke, strokeWidth: strokeWidth, r: r }),
+            React.createElement("g", { transform: `translate (${zoomInX - 20}, ${y - 8 + r / 4})` },
+                React.createElement("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z", fill: textFill })),
+            React.createElement("circle", { className: "react-financial-charts-button", cx: resetX - r / 2, cy: y + r / 2, fill: fill, fillOpacity: fillOpacity, stroke: stroke, strokeWidth: strokeWidth, r: r }),
+            React.createElement("g", { transform: `translate (${resetX - r}, ${y - 4 + r / 4})` },
+                React.createElement("path", { d: "M2.35 2.35A7.958 7.958 0 018 0a8 8 0 110 16c-3.73 0-6.84-2.55-7.73-6h2.08c.82 2.33 3.04 4 5.65 4A6 6 0 108 2c-1.66 0-3.14.69-4.22 1.78L7 7H0V0l2.35 2.35z", fill: textFill })),
+            React.createElement("circle", { className: "react-financial-charts-enable-interaction out", onClick: this.handleZoomOut, cx: zoomOutX - r / 2, cy: y + r / 2, r: r, fill: "none" }),
+            React.createElement("circle", { className: "react-financial-charts-enable-interaction in", onClick: this.handleZoomIn, cx: zoomInX - r / 2, cy: y + r / 2, r: r, fill: "none" }),
+            React.createElement("circle", { className: "react-financial-charts-enable-interaction reset", onClick: onReset, cx: resetX - r / 2, cy: y + r / 2, r: r, fill: "none" })));
     }
 }
 ZoomButtons.defaultProps = {
-    size: [30, 24],
-    heightFromBase: 50,
-    rx: 3,
-    ry: 3,
-    stroke: "#000000",
-    strokeOpacity: 0.3,
+    fill: "#ffffff",
+    fillOpacity: 0.75,
+    heightFromBase: 32,
+    r: 16,
+    stroke: "#e0e3eb",
     strokeWidth: 1,
-    fill: "#D6D6D6",
-    fillOpacity: 0.4,
-    fontSize: 16,
-    textDy: ".3em",
     textFill: "#000000",
-    textStrokeWidth: 2,
     zoomMultiplier: 1.5,
@@ -99,0 +78,0 @@ onReset: noop,

lib/scale/discontinuousTimeScaleProvider.d.ts

@@ -12,3 +12,3 @@ export declare function discontinuousTimeScaleProviderBuilder(): {
             interpolate(x: any): import("d3-scale").InterpolatorFactory<any, any> | any;
-            ticks(m: any, flexTicks: any): number[];
+            ticks(m: any): number[];
             tickFormat(): (x: any) => any;
@@ -50,3 +50,3 @@ value(x: any): any;
             interpolate(x: any): import("d3-scale").InterpolatorFactory<any, any> | any;
-            ticks(m: any, flexTicks: any): number[];
+            ticks(m: any): number[];
             tickFormat(): (x: any) => any;
@@ -53,0 +53,0 @@ value(x: any): any;

lib/scale/financeDiscontinuousScale.d.ts

@@ -9,3 +9,3 @@ export default function financeDiscontinuousScale(index: any, futureProvider: any, backingLinearScale?: import("d3-scale").ScaleLinear<number, number>): {
     interpolate(x: any): import("d3-scale").InterpolatorFactory<any, any> | any;
-    ticks(m: any, flexTicks: any): number[];
+    ticks(m: any): number[];
     tickFormat(): (x: any) => any;
@@ -12,0 +12,0 @@ value(x: any): any;

lib/scale/financeDiscontinuousScale.js

@@ -48,3 +48,3 @@ import { ascending } from "d3-array";
     };
-    scale.ticks = function (m, flexTicks) {
+    scale.ticks = function (m) {
         const backingTicks = backingLinearScale.ticks(m);
@@ -76,3 +76,3 @@ const ticksMap = new Map();
         const ticks = unsortedTicks.sort(ascending);
-        if (!flexTicks && end - start > ticks.length) {
+        if (end - start > ticks.length) {
             const ticksSet = new Set(ticks);
@@ -79,0 +79,0 @@ const d = Math.abs(head(index).index);

package.json

 {
   "name": "react-financial-charts",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "React charts specific to finance.",
@@ -58,3 +58,3 @@ "main": "./lib/index.js",
   },
-  "gitHead": "8d07f1b014f5018bb9bfc5db64d0667f331ec887"
+  "gitHead": "5b90209ce5054becff1d0e2bb392f6047fb14024"
 }

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

1391360

decreased by-1.15%

Number of package files

514

decreased by-1.15%

Lines of code

20492

decreased by-1.09%

No dependency changes