react-gauge-component - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/GaugeComponent/hooks/arc.js

@@ -37,11 +37,14 @@ "use strict";
     var div = (0, d3_1.select)(".".concat(constants_1.default.arcTooltipClassname));
-    div.style("display", "none");
+    //div.style("display", "none");
     if (d.data.tooltip != undefined) {
-        div.html(d.data.tooltip.text)
-            .style("left", (event.pageX + 15) + "px")
-            .style("top", (event.pageY - 10) + "px")
-            .style("opacity", 1)
-            .style("position", "absolute")
-            .style("display", "block");
-        applyTooltipStyles(d.data.tooltip, d.data.color);
+        var shouldChangeText = d.data.tooltip.text != div.text();
+        if (shouldChangeText) {
+            div.html(d.data.tooltip.text)
+                .style("position", "absolute")
+                .style("display", "block")
+                .style("opacity", 1);
+            applyTooltipStyles(d.data.tooltip, d.data.color);
+        }
+        div.style("left", (event.pageX + 15) + "px")
+            .style("top", (event.pageY - 10) + "px");
     }
@@ -76,2 +79,3 @@ };
         var subArcsLength_1 = [];
+        var subArcsLimits_1 = [];
         var subArcsTooltip_1 = [];
@@ -82,2 +86,3 @@ (_b = arc.subArcs) === null || _b === void 0 ? void 0 : _b.forEach(function (subArc, i) {
             var subArcRange = 0;
+            var limit = subArc.limit;
             if (subArc.limit == undefined) {
@@ -91,9 +96,9 @@ subArcRange = lastSubArcLimit_1;
                 subArcLength = remainingPercentageEquallyDivided_1;
-                subArc.limit = lastSubArcLimit_1 + (remainingPercentageEquallyDivided_1 * 100);
+                limit = lastSubArcLimit_1 + (remainingPercentageEquallyDivided_1 * 100);
             }
             else {
-                subArcRange = subArc.limit - lastSubArcLimit_1;
+                subArcRange = limit - lastSubArcLimit_1;
                 // Calculate arc length based on previous arc percentage
                 if (i !== 0) {
-                    subArcLength = utils.calculatePercentage(minValue, maxValue, subArc.limit) - lastSubArcLimitPercentageAcc_1;
+                    subArcLength = utils.calculatePercentage(minValue, maxValue, limit) - lastSubArcLimitPercentageAcc_1;
                 }
@@ -105,4 +110,6 @@ else {
             subArcsLength_1.push(subArcLength);
+            subArcsLimits_1.push(limit);
             lastSubArcLimitPercentageAcc_1 = subArcsLength_1.reduce(function (count, curr) { return count + curr; }, 0);
-            lastSubArcLimit_1 = subArc.limit;
+            lastSubArcLimit_1 = limit;
+            //subArc.limit = limit;
             if (subArc.tooltip != undefined)
@@ -113,2 +120,3 @@ subArcsTooltip_1.push(subArc.tooltip);
             value: length,
+            limitValue: subArcsLimits_1[i],
             color: colorArray[i],
@@ -184,6 +192,6 @@ tooltip: subArcsTooltip_1[i],
     var arc = gauge.props.arc;
-    arc.subArcs.forEach(function (subArc) {
+    gauge.arcData.current.forEach(function (subArcData) {
         return gradEl.append("stop")
-            .attr("offset", "".concat(subArc.limit, "%"))
-            .style("stop-color", subArc.color) //end in red
+            .attr("offset", "".concat(subArcData.limitValue, "%"))
+            .style("stop-color", subArcData.color) //end in red
             .style("stop-opacity", 1);
@@ -190,0 +198,0 @@ });

dist/GaugeComponent/hooks/chart.d.ts

 import { Gauge } from "../types/Gauge";
-export declare const initChart: (update: boolean, gauge: Gauge, resize?: boolean) => void;
-export declare const renderChart: (resize: boolean, gauge: Gauge) => void;
+export declare const initChart: (gauge: Gauge) => void;
+export declare const renderChart: (gauge: Gauge, resize?: boolean) => void;
 export declare const calculateRadius: (gauge: Gauge) => void;
@@ -5,0 +5,0 @@ export declare const centerGraph: (gauge: Gauge) => void;

dist/GaugeComponent/hooks/chart.js

@@ -34,6 +34,8 @@ "use strict";
 var pointerHooks = __importStar(require("./pointer"));
-var initChart = function (update, gauge, resize) {
-    if (resize === void 0) { resize = false; }
-    if (update) {
-        (0, exports.renderChart)(resize, gauge);
+var utilHooks = __importStar(require("./utils"));
+var initChart = function (gauge) {
+    var updatedValue = (JSON.stringify(gauge.prevProps.current.value) !== JSON.stringify(gauge.props.value));
+    var isFirstTime = utilHooks.isEmptyObject(gauge.svg.current);
+    if (updatedValue && !isFirstTime) {
+        (0, exports.renderChart)(gauge);
         return;
@@ -55,22 +57,45 @@ }
     pointerHooks.addPointerElement(gauge);
-    (0, exports.renderChart)(resize, gauge);
+    (0, exports.renderChart)(gauge, true);
 };
 exports.initChart = initChart;
 //Renders the chart, should be called every time the window is resized
-var renderChart = function (resize, gauge) {
-    (0, exports.updateDimensions)(gauge);
-    //Set dimensions of svg element and translations
-    gauge.svg.current
-        .attr("width", gauge.width.current + gauge.margin.current.left + gauge.margin.current.right)
-        .attr("height", gauge.height.current + gauge.margin.current.top + gauge.margin.current.bottom);
-    gauge.g.current.attr("transform", "translate(" + gauge.margin.current.left + ", " + 35 + ")");
-    //Set the radius to lesser of width or height and remove the margins
-    //Calculate the new radius
-    (0, exports.calculateRadius)(gauge);
-    gauge.doughnut.current.attr("transform", "translate(" + gauge.outerRadius.current + ", " + gauge.outerRadius.current + ")");
-    gauge.innerRadius.current = gauge.outerRadius.current * (1 - gauge.props.arc.width);
-    (0, exports.clearChart)(gauge);
-    arcHooks.setupArcs(gauge);
-    labelsHooks.setupLabels(gauge);
-    pointerHooks.drawPointer(gauge, resize);
+var renderChart = function (gauge, resize) {
+    if (resize === void 0) { resize = false; }
+    //if resize recalculate dimensions, clear chart and redraw
+    //if not resize, treat each prop separately
+    if (resize) {
+        (0, exports.updateDimensions)(gauge);
+        //Set dimensions of svg element and translations
+        gauge.svg.current
+            .attr("width", gauge.width.current + gauge.margin.current.left + gauge.margin.current.right)
+            .attr("height", gauge.height.current + gauge.margin.current.top + gauge.margin.current.bottom);
+        gauge.g.current.attr("transform", "translate(" + gauge.margin.current.left + ", " + 35 + ")");
+        //Set the radius to lesser of width or height and remove the margins
+        //Calculate the new radius
+        (0, exports.calculateRadius)(gauge);
+        gauge.doughnut.current.attr("transform", "translate(" + gauge.outerRadius.current + ", " + gauge.outerRadius.current + ")");
+        gauge.innerRadius.current = gauge.outerRadius.current * (1 - gauge.props.arc.width);
+        (0, exports.clearChart)(gauge);
+        arcHooks.setArcData(gauge);
+        arcHooks.setupArcs(gauge);
+        labelsHooks.setupLabels(gauge);
+        pointerHooks.drawPointer(gauge, resize);
+    }
+    else {
+        var arcsPropsChanged = (JSON.stringify(gauge.prevProps.current.arc) !== JSON.stringify(gauge.props.arc));
+        var needlePropsChanged = (JSON.stringify(gauge.prevProps.current.needle) !== JSON.stringify(gauge.props.needle));
+        var valueChanged = (JSON.stringify(gauge.prevProps.current.value) !== JSON.stringify(gauge.props.value));
+        if (arcsPropsChanged) {
+            arcHooks.clearArcs(gauge);
+            arcHooks.setArcData(gauge);
+            arcHooks.setupArcs(gauge);
+        }
+        if (needlePropsChanged || valueChanged) {
+            pointerHooks.drawPointer(gauge);
+        }
+        if (arcsPropsChanged || valueChanged) {
+            labelsHooks.clearLabels(gauge);
+            labelsHooks.setupLabels(gauge);
+        }
+    }
 };
@@ -77,0 +102,0 @@ exports.renderChart = renderChart;

dist/GaugeComponent/hooks/pointer.js

@@ -33,3 +33,3 @@ "use strict";
     if (gauge.selectedPointerType.current == PointerType_1.PointerType.Needle) {
-        needleHooks.drawNeedle(resize, gauge);
+        needleHooks.drawNeedle(gauge, resize);
     }
@@ -36,0 +36,0 @@ else if (gauge.selectedPointerType.current == PointerType_1.PointerType.Blob) {

dist/GaugeComponent/hooks/pointers/needle.d.ts

 import { Gauge } from "../../types/Gauge";
-export declare const drawNeedle: (resize: boolean, gauge: Gauge) => void;
-export declare const calculateRotation: (percent: number, gauge: Gauge) => string;
+export declare const drawNeedle: (gauge: Gauge, resize?: boolean) => void;
+export declare const calculateNeedlePath: (percent: number, pathLength: number, needleRadius: number, centerPoint: any) => string;
 export declare const getNeedleRadius: (gauge: Gauge) => number;
 export declare const addNeedleElement: (gauge: Gauge) => any;
-export declare const clearNeedleElement: (gauge: Gauge) => any;

dist/GaugeComponent/hooks/pointers/needle.js

@@ -26,26 +26,33 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearNeedleElement = exports.addNeedleElement = exports.getNeedleRadius = exports.calculateRotation = exports.drawNeedle = void 0;
+exports.addNeedleElement = exports.getNeedleRadius = exports.calculateNeedlePath = exports.drawNeedle = void 0;
 var utils = __importStar(require("../utils"));
 var d3_1 = require("d3");
 //If 'resize' is true then the animation does not play
-var drawNeedle = function (resize, gauge) {
-    var _a;
-    var _b = gauge.props, needle = _b.needle, value = _b.value, minValue = _b.minValue, maxValue = _b.maxValue;
-    var needleRadius = (0, exports.getNeedleRadius)(gauge), // Make the needle radius responsive
-    centerPoint = [0, -needleRadius / 2];
+var drawNeedle = function (gauge, resize) {
+    var _a, _b;
+    if (resize === void 0) { resize = false; }
+    var _c = gauge.props, needle = _c.needle, value = _c.value, minValue = _c.minValue, maxValue = _c.maxValue;
+    var needleRadius = (0, exports.getNeedleRadius)(gauge); // Make the needle radius responsive
+    var centerPoint = [0, -needleRadius / 2];
     var currentPercent = utils.calculatePercentage(minValue, maxValue, value);
     var prevPercent = utils.calculatePercentage(minValue, maxValue, ((_a = gauge.prevProps) === null || _a === void 0 ? void 0 : _a.current.value) || minValue);
-    var pathStr = (0, exports.calculateRotation)(prevPercent || utils.getCurrentGaugeValuePercentage(gauge.props), gauge);
-    gauge.pointer.current.append("path").attr("d", pathStr).attr("fill", needle.color);
-    //Add a circle at the bottom of needle
-    gauge.pointer.current
-        .append("circle")
-        .attr("cx", centerPoint[0])
-        .attr("cy", centerPoint[1])
-        .attr("r", needleRadius)
-        .attr("fill", needle.color);
-    //Translate the needle starting point to the middle of the arc
-    gauge.pointer.current.attr("transform", "translate(" + gauge.outerRadius.current + ", " + gauge.outerRadius.current + ")");
+    var pathLength = gauge.outerRadius.current * needle.length; //TODO: Maybe it should be specified as a percentage of the arc radius?
+    var needleRadius = (0, exports.getNeedleRadius)(gauge);
+    var isFirstTime = ((_b = gauge.prevProps) === null || _b === void 0 ? void 0 : _b.current.value) == undefined;
+    if (isFirstTime || resize) {
+        var pathStr = (0, exports.calculateNeedlePath)(prevPercent || utils.getCurrentGaugeValuePercentage(gauge.props), pathLength, needleRadius, centerPoint);
+        gauge.pointer.current.append("path").attr("d", pathStr).attr("fill", needle.color);
+        //Add a circle at the bottom of needle
+        gauge.pointer.current
+            .append("circle")
+            .attr("cx", centerPoint[0])
+            .attr("cy", centerPoint[1])
+            .attr("r", needleRadius)
+            .attr("fill", needle.color);
+        //Translate the needle starting point to the middle of the arc
+        gauge.pointer.current.attr("transform", "translate(" + gauge.outerRadius.current + ", " + gauge.outerRadius.current + ")");
+    }
     // if(prevPercent == currentPercent) return;
     //Rotate the needle
+    var needlePath = gauge.container.current.select(".needle path");
     if (!resize && needle.animate) {
@@ -61,32 +68,33 @@ gauge.pointer.current
                 var progress = currentInterpolatedPercent(percentOfPercent);
-                return gauge.container.current
-                    .select(".needle path")
-                    .attr("d", (0, exports.calculateRotation)(progress, gauge));
+                return needlePath.attr("d", (0, exports.calculateNeedlePath)(progress, pathLength, needleRadius, centerPoint));
             };
-        });
+        })
+            .attr("steps", 5);
+        ;
     }
     else {
-        gauge.container.current
-            .select(".needle path")
-            .attr("d", (0, exports.calculateRotation)(utils.getCurrentGaugeValuePercentage(gauge.props), gauge));
+        needlePath.attr("d", (0, exports.calculateNeedlePath)(utils.getCurrentGaugeValuePercentage(gauge.props), pathLength, needleRadius, centerPoint));
     }
 };
 exports.drawNeedle = drawNeedle;
-var calculateRotation = function (percent, gauge) {
-    var needle = gauge.props.needle;
-    var needleLength = gauge.outerRadius.current * needle.length, //TODO: Maybe it should be specified as a percentage of the arc radius?
-    needleRadius = (0, exports.getNeedleRadius)(gauge), theta = utils.percentToRad(percent), centerPoint = [0, -needleRadius / 2], topPoint = [
-        centerPoint[0] - needleLength * Math.cos(theta),
-        centerPoint[1] - needleLength * Math.sin(theta),
-    ], leftPoint = [
-        centerPoint[0] - needleRadius * Math.cos(theta - Math.PI / 2),
-        centerPoint[1] - needleRadius * Math.sin(theta - Math.PI / 2),
-    ], rightPoint = [
-        centerPoint[0] - needleRadius * Math.cos(theta + Math.PI / 2),
-        centerPoint[1] - needleRadius * Math.sin(theta + Math.PI / 2),
+var calculateNeedlePath = function (percent, pathLength, needleRadius, centerPoint) {
+    var theta = utils.percentToRad(percent);
+    var topPoint = [
+        centerPoint[0] - pathLength * Math.cos(theta),
+        centerPoint[1] - pathLength * Math.sin(theta),
     ];
+    var thetaMinusHalfPi = theta - Math.PI / 2;
+    var leftPoint = [
+        centerPoint[0] - needleRadius * Math.cos(thetaMinusHalfPi),
+        centerPoint[1] - needleRadius * Math.sin(thetaMinusHalfPi),
+    ];
+    var thetaPlusHalfPi = theta + Math.PI / 2;
+    var rightPoint = [
+        centerPoint[0] - needleRadius * Math.cos(thetaPlusHalfPi),
+        centerPoint[1] - needleRadius * Math.sin(thetaPlusHalfPi),
+    ];
     var pathStr = "M ".concat(leftPoint[0], " ").concat(leftPoint[1], " L ").concat(topPoint[0], " ").concat(topPoint[1], " L ").concat(rightPoint[0], " ").concat(rightPoint[1]);
     return pathStr;
 };
-exports.calculateRotation = calculateRotation;
+exports.calculateNeedlePath = calculateNeedlePath;
 var getNeedleRadius = function (gauge) {
@@ -99,3 +107,1 @@ var needle = gauge.props.needle;
 exports.addNeedleElement = addNeedleElement;
-var clearNeedleElement = function (gauge) { return gauge.pointer.current.selectAll("*").remove(); };
-exports.clearNeedleElement = clearNeedleElement;

dist/GaugeComponent/hooks/utils.d.ts

 import { GaugeComponentProps } from '../types/GaugeComponentProps';
 export declare const calculatePercentage: (minValue: number, maxValue: number, value: number) => number;
+export declare const isEmptyObject: (obj: any) => boolean;
 export declare const mergeObjects: (obj1: any, obj2: Partial<any>) => any;
@@ -4,0 +5,0 @@ export declare const percentToRad: (percent: number) => number;

dist/GaugeComponent/hooks/utils.js

@@ -14,3 +14,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.camelCaseToKebabCase = exports.getCurrentGaugeValuePercentage = exports.degToRad = exports.floatingNumber = exports.percentToRad = exports.mergeObjects = exports.calculatePercentage = void 0;
+exports.camelCaseToKebabCase = exports.getCurrentGaugeValuePercentage = exports.degToRad = exports.floatingNumber = exports.percentToRad = exports.mergeObjects = exports.isEmptyObject = exports.calculatePercentage = void 0;
 var calculatePercentage = function (minValue, maxValue, value) {
@@ -29,2 +29,6 @@ if (value < minValue) {
 exports.calculatePercentage = calculatePercentage;
+var isEmptyObject = function (obj) {
+    return Object.keys(obj).length === 0 && obj.constructor === Object;
+};
+exports.isEmptyObject = isEmptyObject;
 var mergeObjects = function (obj1, obj2) {
@@ -31,0 +35,0 @@ var mergedObj = __assign({}, obj1);

dist/GaugeComponent/index.js

@@ -25,5 +25,2 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -33,4 +30,2 @@ var react_1 = __importStar(require("react"));
 var GaugeComponentProps_1 = require("./types/GaugeComponentProps");
-var customHooks_1 = __importDefault(require("./hooks/customHooks"));
-var arcHooks = __importStar(require("./hooks/arc"));
 var chartHooks = __importStar(require("./hooks/chart"));
@@ -87,3 +82,4 @@ var utils_1 = require("./hooks/utils");
     };
-    var initChartCallback = (0, react_1.useCallback)(chartHooks.initChart, [mergedProps.current]);
+    //Merged properties will get the default props and overwrite by the user's defined props
+    //To keep the original default props in the object
     var updateMergedProps = function () {
@@ -96,28 +92,17 @@ if (props.needle)
     };
+    var shouldInitChart = function () {
+        var arcsPropsChanged = (JSON.stringify(prevProps.current.arc) !== JSON.stringify(mergedProps.current.arc));
+        var needlePropsChanged = (JSON.stringify(prevProps.current.needle) !== JSON.stringify(mergedProps.current.needle));
+        var valueChanged = (JSON.stringify(prevProps.current.value) !== JSON.stringify(mergedProps.current.value));
+        return arcsPropsChanged || needlePropsChanged || valueChanged;
+    };
     (0, react_1.useLayoutEffect)(function () {
-        //Merged properties will get the default props and overwrite by the user's defined props
-        //To keep the original default props in the object
         updateMergedProps();
-        arcHooks.setArcData(gauge);
         container.current = (0, d3_1.select)(selectedRef.current);
-        //Initialize chart
-        initChartCallback(false, gauge);
-    }, [props, initChartCallback]);
-    (0, customHooks_1.default)(function () {
-        var arcsPropsChanged = (JSON.stringify(prevProps.current.arc) === JSON.stringify(props.arc));
-        if (arcsPropsChanged)
-            arcHooks.setArcData(gauge);
-        var resize = (JSON.stringify(prevProps.current.needle) !== JSON.stringify(props.needle));
-        initChartCallback(true, gauge, resize);
+        if (shouldInitChart())
+            chartHooks.initChart(gauge);
         gauge.prevProps.current = (0, utils_1.mergeObjects)(GaugeComponentProps_1.defaultGaugeProps, props);
-    }, [
-        props.needle,
-        props.blob,
-        props.arc,
-        props.value,
-        props.minValue,
-        props.maxValue,
-    ]);
+    }, [props]);
     (0, react_1.useEffect)(function () {
-        var handleResize = function () { return chartHooks.renderChart(true, gauge); };
+        var handleResize = function () { return chartHooks.renderChart(gauge, true); };
         //Set up resize event listener to re-render the chart everytime the window is resized
@@ -124,0 +109,0 @@ window.addEventListener("resize", handleResize);

package.json

 {
   "name": "react-gauge-component",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "main": "dist/index.js",
@@ -31,3 +31,3 @@ "module": "dist/index.js",
     "prebuild": "rimraf dist",
-    "build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files",
+    "build": "set NODE_ENV=production babel src/lib --out-dir dist --copy-files",
     "build:types": "tsc",
@@ -34,0 +34,0 @@ "build-package": "yarn run build && yarn run build:types",

README.md

@@ -209,3 +209,3 @@ # react-gauge-component
       <li><code>colorArray: Array&lt;string&gt;</code>: The colors of the arcs. This overrides <code>subArcs</code> colors. Default: <code>undefined</code></li>
-      <li><code>gradient: boolean</code>: This will draw a single chart with all colors provided in subArcs, using limits as references to draw the linear-gradient result. Default: <code>false</code>.</li>
+      <li><code>gradient: boolean</code>: This will draw a single arc with all colors provided in subArcs, using limits as references to draw the linear-gradient result. (limits may not be accurate in this mode) Default: <code>false</code>.</li>
       <li><code>subArcs: Array&lt;object&gt;</code>: The subArcs of the gauge.
@@ -212,0 +212,0 @@ <ul>

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

76494

decreased by-33.18%

Number of package files

45

decreased by-31.82%

Lines of code

1375

decreased by-41.06%

No dependency changes