react-gauge-component - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

dist/GaugeComponent/constants.js

@@ -8,3 +8,5 @@ "use strict";
     arcTooltipClassname: "gauge-component-arc-tooltip",
-    // Props that should cause an animation on update
+    markerClassname: "marker",
+    markValueClassname: "mark-value",
+    valueLabelClassname: "value-text",
     debugMarkersRadius: false,
@@ -11,0 +13,0 @@ debugSingleGauge: false,

dist/GaugeComponent/hooks/chart.js

@@ -86,2 +86,3 @@ "use strict";
         var valueChanged = (JSON.stringify(gauge.prevProps.current.value) !== JSON.stringify(gauge.props.value));
+        var marksChanged = (JSON.stringify(gauge.prevProps.current.labels.markLabel) !== JSON.stringify(gauge.props.labels.markLabel));
         if (arcsPropsChanged) {
@@ -95,6 +96,10 @@ arcHooks.clearArcs(gauge);
         }
-        if (arcsPropsChanged || valueChanged) {
-            labelsHooks.clearLabels(gauge);
-            labelsHooks.setupLabels(gauge);
+        if (arcsPropsChanged || marksChanged) {
+            labelsHooks.clearMarks(gauge);
+            labelsHooks.setupMarks(gauge);
         }
+        if (valueChanged) {
+            labelsHooks.clearValueLabel(gauge);
+            labelsHooks.setupValueLabel(gauge);
+        }
     }
@@ -148,3 +153,4 @@ };
     //Remove the old stuff
-    labelsHooks.clearLabels(gauge);
+    labelsHooks.clearMarks(gauge);
+    labelsHooks.clearValueLabel(gauge);
     pointerHooks.clearPointerElement(gauge);
@@ -151,0 +157,0 @@ arcHooks.clearArcs(gauge);

dist/GaugeComponent/hooks/labels.d.ts

@@ -5,2 +5,4 @@ import { Gauge } from '../types/Gauge';
 export declare const setupLabels: (gauge: Gauge) => void;
+export declare const setupValueLabel: (gauge: Gauge) => void;
+export declare const setupMarks: (gauge: Gauge) => void;
 export declare const addArcMarks: (gauge: Gauge) => void;
@@ -15,5 +17,6 @@ export declare const mapMark: (value: number, gauge: Gauge) => Mark;
 };
-export declare const addText: (html: any, x: number, y: number, gauge: Gauge, style: React.CSSProperties, rotate?: number) => void;
+export declare const addText: (html: any, x: number, y: number, gauge: Gauge, style: React.CSSProperties, className: string, rotate?: number) => void;
 export declare const addValueText: (gauge: Gauge) => void;
-export declare const clearLabels: (gauge: Gauge) => any;
+export declare const clearValueLabel: (gauge: Gauge) => any;
+export declare const clearMarks: (gauge: Gauge) => any;
 export declare const calculateAnchorAndAngleByValue: (value: number, gauge: Gauge) => {
@@ -20,0 +23,0 @@ markAnchor: string;

dist/GaugeComponent/hooks/labels.js

@@ -40,11 +40,19 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateAnchorAndAngleByValue = exports.clearLabels = exports.addValueText = exports.addText = exports.getLabelCoordsByValue = exports.addMark = exports.addMarkValue = exports.addMarker = exports.mapMark = exports.addArcMarks = exports.setupLabels = void 0;
+exports.calculateAnchorAndAngleByValue = exports.clearMarks = exports.clearValueLabel = exports.addValueText = exports.addText = exports.getLabelCoordsByValue = exports.addMark = exports.addMarkValue = exports.addMarker = exports.mapMark = exports.addArcMarks = exports.setupMarks = exports.setupValueLabel = exports.setupLabels = void 0;
 var utils = __importStar(require("./utils"));
 var constants_1 = __importDefault(require("../constants"));
 var setupLabels = function (gauge) {
-    var _a;
-    var _b = gauge.props, minValue = _b.minValue, maxValue = _b.maxValue, labels = _b.labels, arc = _b.arc;
-    //Add value label
+    (0, exports.setupValueLabel)(gauge);
+    (0, exports.setupMarks)(gauge);
+};
+exports.setupLabels = setupLabels;
+var setupValueLabel = function (gauge) {
+    var labels = gauge.props.labels;
     if (!labels.valueLabel.hide)
         (0, exports.addValueText)(gauge);
+};
+exports.setupValueLabel = setupValueLabel;
+var setupMarks = function (gauge) {
+    var _a;
+    var _b = gauge.props, minValue = _b.minValue, maxValue = _b.maxValue, labels = _b.labels;
     if (constants_1.default.debugMarkersRadius) {
@@ -57,8 +65,14 @@ for (var index = 0; index < maxValue; index++) {
     else if (!((_a = labels.markLabel) === null || _a === void 0 ? void 0 : _a.hideMinMax)) {
-        //Add min value mark
-        var minValueMark = (0, exports.mapMark)(minValue, gauge);
-        (0, exports.addMark)(minValueMark, gauge);
-        // //Add max value mark
-        var maxValueMark = (0, exports.mapMark)(maxValue, gauge);
-        (0, exports.addMark)(maxValueMark, gauge);
+        var alreadyHaveMinValueMark = labels.markLabel.marks.some(function (mark) { return mark.value == minValue; });
+        if (!alreadyHaveMinValueMark) {
+            //Add min value mark
+            var minValueMark = (0, exports.mapMark)(minValue, gauge);
+            (0, exports.addMark)(minValueMark, gauge);
+        }
+        var alreadyHaveMaxValueMark = labels.markLabel.marks.some(function (mark) { return mark.value == maxValue; });
+        if (!alreadyHaveMaxValueMark) {
+            // //Add max value mark
+            var maxValueMark = (0, exports.mapMark)(maxValue, gauge);
+            (0, exports.addMark)(maxValueMark, gauge);
+        }
     }
@@ -72,3 +86,3 @@ if (labels.markLabel.marks.length > 0) {
 };
-exports.setupLabels = setupLabels;
+exports.setupMarks = setupMarks;
 var addArcMarks = function (gauge) {
@@ -105,9 +119,9 @@ var _a;
     charStyle.textAnchor = markAnchor;
-    (0, exports.addText)(char, coords.x, coords.y, gauge, charStyle, angle);
+    (0, exports.addText)(char, coords.x, coords.y, gauge, charStyle, constants_1.default.markerClassname, angle);
 };
 exports.addMarker = addMarker;
 var addMarkValue = function (mark, gauge) {
-    var _a, _b, _c;
-    var _d = gauge.props, labels = _d.labels, arc = _d.arc, value = _d.value;
-    var _e = (0, exports.calculateAnchorAndAngleByValue)(mark.value, gauge), markAnchor = _e.markAnchor, angle = _e.angle;
+    var _a;
+    var _b = gauge.props, labels = _b.labels, arc = _b.arc, value = _b.value;
+    var _c = (0, exports.calculateAnchorAndAngleByValue)(mark.value, gauge), markAnchor = _c.markAnchor, angle = _c.angle;
     var centerToArcLengthSubtract = 27 - arc.width * 10;
@@ -118,5 +132,3 @@ var isInner = gauge.props.labels.markLabel.type == "inner";
     var coords = (0, exports.getLabelCoordsByValue)(mark.value, gauge, centerToArcLengthSubtract);
-    var fontSize = ((_a = mark.valueConfig) === null || _a === void 0 ? void 0 : _a.style.fontSize) || labels.markLabel.valueConfig.style.fontSize;
-    var fontColor = ((_b = mark.valueConfig) === null || _b === void 0 ? void 0 : _b.style.color) || labels.markLabel.valueConfig.style.color;
-    var markValueStyle = ((_c = mark.valueConfig) === null || _c === void 0 ? void 0 : _c.style) || labels.markLabel.valueConfig.style;
+    var markValueStyle = ((_a = mark.valueConfig) === null || _a === void 0 ? void 0 : _a.style) || labels.markLabel.valueConfig.style;
     var text = '';
@@ -153,3 +165,3 @@ if (labels.markLabel.valueConfig.formatTextValue) {
     markValueStyle.textAnchor = markAnchor;
-    (0, exports.addText)(text, coords.x, coords.y, gauge, markValueStyle);
+    (0, exports.addText)(text, coords.x, coords.y, gauge, markValueStyle, constants_1.default.markValueClassname);
 };
@@ -193,7 +205,7 @@ exports.addMarkValue = addMarkValue;
 exports.getLabelCoordsByValue = getLabelCoordsByValue;
-var addText = function (html, x, y, gauge, style, rotate) {
+var addText = function (html, x, y, gauge, style, className, rotate) {
     if (rotate === void 0) { rotate = 0; }
     var div = gauge.g.current
         .append("g")
-        .attr("class", "text-group")
+        .attr("class", className)
         .attr("transform", "translate(".concat(x, ", ").concat(y, ")"))
@@ -245,7 +257,9 @@ .append("text")
     valueTextStyle.textAnchor = "middle";
-    (0, exports.addText)(text, x, y, gauge, valueTextStyle);
+    (0, exports.addText)(text, x, y, gauge, valueTextStyle, constants_1.default.valueLabelClassname);
 };
 exports.addValueText = addValueText;
-var clearLabels = function (gauge) { return gauge.g.current.selectAll(".text-group").remove(); };
-exports.clearLabels = clearLabels;
+var clearValueLabel = function (gauge) { return gauge.g.current.selectAll(".".concat(constants_1.default.valueLabelClassname)).remove(); };
+exports.clearValueLabel = clearValueLabel;
+var clearMarks = function (gauge) { return gauge.g.current.selectAll(".".concat(constants_1.default.markerClassname, " .").concat(constants_1.default.markValueClassname)).remove(); };
+exports.clearMarks = clearMarks;
 var calculateAnchorAndAngleByValue = function (value, gauge) {
@@ -252,0 +266,0 @@ var _a = gauge.props, minValue = _a.minValue, maxValue = _a.maxValue;

package.json

 {
   "name": "react-gauge-component",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.js",

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

Improved metrics

Total package byte prevSize

77778

increased by1.73%

Lines of code

1399

increased by1.89%

No dependency changes