react-gauge-component - npm Package Compare versions

Comparing version 0.6.0 to 0.8.0

dist/GaugeComponent/constants.js

@@ -5,4 +5,2 @@ "use strict";
 exports.CONSTANTS = {
-    startAngle: -Math.PI / 2 + 0.02,
-    endAngle: Math.PI / 2 - 0.02,
     arcTooltipClassname: "gauge-component-arc-tooltip",
@@ -9,0 +7,0 @@ markerClassname: "marker",

dist/GaugeComponent/hooks/arc.js

@@ -35,26 +35,26 @@ "use strict";
 var Tooltip_1 = require("../types/Tooltip");
-var onArcMouseMove = function (event, d) {
-    var div = (0, d3_1.select)(".".concat(constants_1.default.arcTooltipClassname));
-    //div.style("display", "none");
+var onArcMouseMove = function (event, d, gauge) {
     if (d.data.tooltip != undefined) {
-        var shouldChangeText = d.data.tooltip.text != div.text();
+        var shouldChangeText = d.data.tooltip.text != gauge.tooltip.current.text();
         if (shouldChangeText) {
-            div.html(d.data.tooltip.text)
+            event.target.style.stroke = "powderblue";
+            gauge.tooltip.current.html(d.data.tooltip.text)
                 .style("position", "absolute")
                 .style("display", "block")
                 .style("opacity", 1);
-            applyTooltipStyles(d.data.tooltip, d.data.color);
+            applyTooltipStyles(d.data.tooltip, d.data.color, gauge);
         }
-        div.style("left", (event.pageX + 15) + "px")
+        gauge.tooltip.current.style("left", (event.pageX + 15) + "px")
             .style("top", (event.pageY - 10) + "px");
     }
+    if (d.data.onMouseMove != undefined)
+        d.data.onMouseMove(event);
 };
-var applyTooltipStyles = function (tooltip, arcColor) {
-    var div = (0, d3_1.select)(".".concat(constants_1.default.arcTooltipClassname));
+var applyTooltipStyles = function (tooltip, arcColor, gauge) {
     //Apply default styles
     Object.entries(Tooltip_1.defaultTooltipStyle).forEach(function (_a) {
         var key = _a[0], value = _a[1];
-        return div.style(utils.camelCaseToKebabCase(key), value);
+        return gauge.tooltip.current.style(utils.camelCaseToKebabCase(key), value);
     });
-    div.style("background-color", arcColor);
+    gauge.tooltip.current.style("background-color", arcColor);
     //Apply custom styles
@@ -64,6 +64,15 @@ if (tooltip.style != undefined)
             var key = _a[0], value = _a[1];
-            return div.style(utils.camelCaseToKebabCase(key), value);
+            return gauge.tooltip.current.style(utils.camelCaseToKebabCase(key), value);
         });
 };
-var onArcMouseOut = function () { (0, d3_1.select)(".".concat(constants_1.default.arcTooltipClassname)).html(" ").style("display", "none"); };
+var onArcMouseOut = function (event, d) {
+    (0, d3_1.select)(".".concat(constants_1.default.arcTooltipClassname)).html(" ").style("display", "none");
+    event.target.style.stroke = "none";
+    if (d.data.onMouseLeave != undefined)
+        d.data.onMouseLeave(event);
+};
+var onArcMouseClick = function (event, d) {
+    if (d.data.onMouseClick != undefined)
+        d.data.onMouseClick(event);
+};
 var setArcData = function (gauge) {
@@ -120,2 +129,5 @@ var _a, _b;
             tooltip: subArcsTooltip_1[i],
+            onMouseMove: arc.subArcs[i].onMouseMove,
+            onMouseLeave: arc.subArcs[i].onMouseLeave,
+            onMouseClick: arc.subArcs[i].onClick
         }); });
@@ -133,11 +145,4 @@ }
 exports.setArcData = setArcData;
-// var mouseclick = function (d: any) {
-//   if (d3.select(d).attr("transform") == null) {
-//     d3.select(d).attr("transform", "translate(42,0)");
-//   } else {
-//     d3.select(d).attr("transform", null);
-//   }
-// };
 var setupArcs = function (gauge) {
-    var _a = gauge.props, arc = _a.arc, maxValue = _a.maxValue;
+    var arc = gauge.props.arc;
     //Add tooltip
@@ -147,2 +152,3 @@ var isTooltipInTheDom = document.getElementsByClassName(constants_1.default.arcTooltipClassname).length != 0;
         (0, d3_1.select)("body").append("div").attr("class", constants_1.default.arcTooltipClassname);
+    gauge.tooltip.current = (0, d3_1.select)(".".concat(constants_1.default.arcTooltipClassname));
     //Setup the arc
@@ -173,4 +179,5 @@ gauge.arcChart.current
     arcPaths
-        .on("mouseout", onArcMouseOut)
-        .on("mousemove", function (event, d) { return onArcMouseMove(event, d); });
+        .on("mouseout", function (event, d) { return onArcMouseOut(event, d); })
+        .on("mousemove", function (event, d) { return onArcMouseMove(event, d, gauge); })
+        .on("click", function (event, d) { return onArcMouseClick(event, d); });
 };
@@ -213,5 +220,8 @@ exports.setupArcs = setupArcs;
     }
+    //defaults colorsValue to white in order to avoid compilation error
+    if (!colorsValue)
+        colorsValue = ["#fff"];
     //Check if the number of colors equals the number of levels
     //Otherwise make an interpolation
-    var arcsEqualsColorsLength = gauge.nbArcsToDisplay.current === colorsValue.length;
+    var arcsEqualsColorsLength = gauge.nbArcsToDisplay.current === (colorsValue === null || colorsValue === void 0 ? void 0 : colorsValue.length);
     if (arcsEqualsColorsLength)
@@ -218,0 +228,0 @@ return colorsValue;

dist/GaugeComponent/hooks/chart.js

@@ -25,8 +25,5 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.clearChart = exports.updateDimensions = exports.centerGraph = exports.calculateRadius = exports.renderChart = exports.initChart = void 0;
-var constants_1 = __importDefault(require("../constants"));
+var GaugeComponentProps_1 = require("../types/GaugeComponentProps");
 var arcHooks = __importStar(require("./arc"));
@@ -47,2 +44,12 @@ var labelsHooks = __importStar(require("./labels"));
     gauge.doughnut.current = gauge.g.current.append("g").attr("class", "doughnut");
+    var startAngle = undefined;
+    var endAngle = undefined;
+    if (gauge.props.type == GaugeComponentProps_1.GaugeType.Semicircle) {
+        startAngle = -Math.PI / 2 + 0.02;
+        endAngle = Math.PI / 2 - 0.02;
+    }
+    else if (gauge.props.type == GaugeComponentProps_1.GaugeType.Radial) {
+        startAngle = -Math.PI / 1.37; //Negative x-axis
+        endAngle = Math.PI / 1.37; //Positive x-axis
+    }
     //Set up the pie generator
@@ -53,4 +60,4 @@ //Each arc should be of equal length (or should they?)
         //.padAngle(arcPadding)
-        .startAngle(constants_1.default.startAngle)
-        .endAngle(constants_1.default.endAngle)
+        .startAngle(startAngle)
+        .endAngle(endAngle)
         .sort(null);
@@ -69,6 +76,5 @@ //Set up pointer
         (0, exports.updateDimensions)(gauge);
+        //Adds height to svg element when radial for better fitting
+        var addHeight = gauge.props.type == GaugeComponentProps_1.GaugeType.Radial ? 95 : 0;
         //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 + ")");
@@ -85,2 +91,7 @@ //Set the radius to lesser of width or height and remove the margins
         pointerHooks.drawPointer(gauge, resize);
+        var boundHeight = gauge.doughnut.current.node().getBoundingClientRect().height + 50;
+        var boundWidth = gauge.container.current.node().getBoundingClientRect().width;
+        gauge.svg.current
+            .attr("width", boundWidth)
+            .attr("height", boundHeight);
     }
@@ -87,0 +98,0 @@ else {

dist/GaugeComponent/hooks/labels.d.ts

@@ -19,3 +19,3 @@ import { Gauge } from '../types/Gauge';
 export declare const clearValueLabel: (gauge: Gauge) => any;
-export declare const clearMarks: (gauge: Gauge) => any;
+export declare const clearMarks: (gauge: Gauge) => void;
 export declare const calculateAnchorAndAngleByValue: (value: number, gauge: Gauge) => {
@@ -22,0 +22,0 @@ markAnchor: string;

dist/GaugeComponent/hooks/labels.js

@@ -43,2 +43,3 @@ "use strict";
 var constants_1 = __importDefault(require("../constants"));
+var GaugeComponentProps_1 = require("../types/GaugeComponentProps");
 var setupLabels = function (gauge) {
@@ -112,5 +113,3 @@ (0, exports.setupValueLabel)(gauge);
     var coords = (0, exports.getLabelCoordsByValue)(mark.value, gauge);
-    // let charSize = mark.markerConfig?.style.fontSize || labels.markLabel.markerConfig.style.fontSize;
     var char = ((_a = mark.markerConfig) === null || _a === void 0 ? void 0 : _a.char) || labels.markLabel.markerConfig.char;
-    // let charColor = mark.markerConfig?.style.color || labels.markLabel.markerConfig.style.color;
     var charStyle = ((_b = mark.markerConfig) === null || _b === void 0 ? void 0 : _b.style) || labels.markLabel.markerConfig.style;
@@ -179,4 +178,4 @@ charStyle.textAnchor = markAnchor;
     var percent = utils.calculatePercentage(gauge.props.minValue, gauge.props.maxValue, value);
-    var startAngle = utils.degToRad(0);
-    var endAngle = utils.degToRad(180);
+    var startAngle = utils.degToRad(gauge.props.type == GaugeComponentProps_1.GaugeType.Semicircle ? 0 : -41);
+    var endAngle = utils.degToRad(gauge.props.type == GaugeComponentProps_1.GaugeType.Semicircle ? 180 : 221);
     var angle = startAngle + (percent) * (endAngle - startAngle);
@@ -199,2 +198,5 @@ var marksRadius = 15 * (gauge.width.current / 500);
     }
+    if (gauge.props.type == GaugeComponentProps_1.GaugeType.Radial) {
+        y += 3;
+    }
     return { x: x, y: y };
@@ -230,3 +232,3 @@ };
 var addValueText = function (gauge) {
-    var _a = gauge.props, labels = _a.labels, value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue;
+    var _a = gauge.props, labels = _a.labels, value = _a.value;
     var textPadding = 20;
@@ -255,2 +257,5 @@ var text = '';
     valueTextStyle.textAnchor = "middle";
+    if (gauge.props.type == GaugeComponentProps_1.GaugeType.Radial) {
+        y = gauge.outerRadius.current * 1.45 + textPadding;
+    }
     (0, exports.addText)(text, x, y, gauge, valueTextStyle, constants_1.default.valueLabelClassname);
@@ -261,3 +266,6 @@ };
 exports.clearValueLabel = clearValueLabel;
-var clearMarks = function (gauge) { return gauge.g.current.selectAll(".".concat(constants_1.default.markerClassname, " .").concat(constants_1.default.markValueClassname)).remove(); };
+var clearMarks = function (gauge) {
+    gauge.g.current.selectAll(".".concat(constants_1.default.markerClassname)).remove();
+    gauge.g.current.selectAll(".".concat(constants_1.default.markValueClassname)).remove();
+};
 exports.clearMarks = clearMarks;
@@ -267,3 +275,8 @@ var calculateAnchorAndAngleByValue = function (value, gauge) {
     var valuePercentage = utils.calculatePercentage(minValue, maxValue, value);
-    var angle = (valuePercentage * 100) * 180 / 100;
+    //let startAngle = utils.degToRad(gauge.props.type == "semicircle" ? 0 : -42);
+    //let endAngle = utils.degToRad(gauge.props.type == "semicircle" ? 180 : 222);
+    var startAngle = gauge.props.type == GaugeComponentProps_1.GaugeType.Semicircle ? 0 : -42;
+    var endAngle = gauge.props.type == GaugeComponentProps_1.GaugeType.Semicircle ? 180 : 266;
+    var angle = startAngle + (valuePercentage * 100) * endAngle / 100;
+    //let angle = startAngle + (valuePercentage) * (endAngle - startAngle) / 100;
     var centerToleranceInPercentage = 0.05;
@@ -270,0 +283,0 @@ var halfInPercentage = utils.calculatePercentage(minValue, maxValue, (maxValue / 2));

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

 import { Gauge } from "../../types/Gauge";
 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 calculateNeedlePath: (gauge: Gauge, percent: number, pathLength: number, needleRadius: number, centerPoint: any) => string;
 export declare const getNeedleRadius: (gauge: Gauge) => number;
 export declare const addNeedleElement: (gauge: Gauge) => any;

dist/GaugeComponent/hooks/pointers/needle.js

@@ -29,3 +29,2 @@ "use strict";
 var d3_1 = require("d3");
-//If 'resize' is true then the animation does not play
 var drawNeedle = function (gauge, resize) {
@@ -35,11 +34,11 @@ var _a, _b;
     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 needleRadius = (0, exports.getNeedleRadius)(gauge);
     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 pathLength = gauge.outerRadius.current * needle.length; //TODO: Maybe it should be specified as a percentage of the arc radius?
+    var pathLength = gauge.outerRadius.current * needle.length;
     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);
+        var pathStr = (0, exports.calculateNeedlePath)(gauge, prevPercent || utils.getCurrentGaugeValuePercentage(gauge.props), pathLength, needleRadius, centerPoint);
         gauge.pointer.current.append("path").attr("d", pathStr).attr("fill", needle.color);
@@ -56,6 +55,6 @@ //Add a circle at the bottom of needle
     }
-    // if(prevPercent == currentPercent) return;
     //Rotate the needle
     var needlePath = gauge.container.current.select(".needle path");
-    if (!resize && needle.animate) {
+    var prevProgress = 0;
+    if ((!resize || isFirstTime) && needle.animate) {
         gauge.pointer.current
@@ -70,3 +69,9 @@ .transition()
                 var progress = currentInterpolatedPercent(percentOfPercent);
-                return needlePath.attr("d", (0, exports.calculateNeedlePath)(progress, pathLength, needleRadius, centerPoint));
+                //Avoid unnecessary re-rendering (when progress is too small) but allow the needle to reach the final value
+                if (Math.abs(progress - prevProgress) < 0.0001 && progress != currentPercent) {
+                    prevProgress = progress;
+                    return;
+                }
+                prevProgress = progress;
+                return needlePath.attr("d", (0, exports.calculateNeedlePath)(gauge, progress, pathLength, needleRadius, centerPoint));
             };
@@ -76,13 +81,15 @@ });
     else {
-        needlePath.attr("d", (0, exports.calculateNeedlePath)(utils.getCurrentGaugeValuePercentage(gauge.props), pathLength, needleRadius, centerPoint));
+        needlePath.attr("d", (0, exports.calculateNeedlePath)(gauge, utils.getCurrentGaugeValuePercentage(gauge.props), pathLength, needleRadius, centerPoint));
     }
 };
 exports.drawNeedle = drawNeedle;
-var calculateNeedlePath = function (percent, pathLength, needleRadius, centerPoint) {
-    var theta = utils.percentToRad(percent);
+var calculateNeedlePath = function (gauge, percent, pathLength, needleRadius, centerPoint) {
+    var startAngle = utils.degToRad(gauge.props.type == "semicircle" ? 0 : -42);
+    var endAngle = utils.degToRad(gauge.props.type == "semicircle" ? 180 : 222);
+    var angle = startAngle + (percent) * (endAngle - startAngle);
     var topPoint = [
-        centerPoint[0] - pathLength * Math.cos(theta),
-        centerPoint[1] - pathLength * Math.sin(theta),
+        centerPoint[0] - pathLength * Math.cos(angle),
+        centerPoint[1] - pathLength * Math.sin(angle),
     ];
-    var thetaMinusHalfPi = theta - Math.PI / 2;
+    var thetaMinusHalfPi = angle - Math.PI / 2;
     var leftPoint = [
@@ -92,3 +99,3 @@ centerPoint[0] - needleRadius * Math.cos(thetaMinusHalfPi),
     ];
-    var thetaPlusHalfPi = theta + Math.PI / 2;
+    var thetaPlusHalfPi = angle + Math.PI / 2;
     var rightPoint = [
@@ -95,0 +102,0 @@ centerPoint[0] - needleRadius * Math.cos(thetaPlusHalfPi),

dist/GaugeComponent/hooks/utils.d.ts

@@ -5,3 +5,3 @@ import { GaugeComponentProps } from '../types/GaugeComponentProps';
 export declare const mergeObjects: (obj1: any, obj2: Partial<any>) => any;
-export declare const percentToRad: (percent: number) => number;
+export declare const percentToRad: (percent: number, angle: number) => number;
 export declare const floatingNumber: (value: number, maxDigits?: number) => number;
@@ -8,0 +8,0 @@ export declare const degToRad: (degrees: number) => number;

dist/GaugeComponent/hooks/utils.js

@@ -51,4 +51,4 @@ "use strict";
 //Returns the angle (in rad) for the given 'percent' value where percent = 1 means 100% and is 180 degree angle
-var percentToRad = function (percent) {
-    return percent * Math.PI;
+var percentToRad = function (percent, angle) {
+    return percent * (Math.PI / angle);
 };
@@ -55,0 +55,0 @@ exports.percentToRad = percentToRad;

dist/GaugeComponent/index.js

@@ -42,2 +42,3 @@ "use strict";
     var svg = (0, react_1.useRef)({});
+    var tooltip = (0, react_1.useRef)({});
     var g = (0, react_1.useRef)({});
@@ -79,7 +80,6 @@ var width = (0, react_1.useRef)({});
         pieChart: pieChart,
-        selectedPointerType: selectedPointerType
+        selectedPointerType: selectedPointerType,
+        tooltip: tooltip
     };
-    //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 () {
+    var updateSelectedPointerType = function () {
         if (props.needle)
@@ -89,4 +89,6 @@ gauge.selectedPointerType.current = PointerType_1.PointerType.Needle;
             gauge.selectedPointerType.current = PointerType_1.PointerType.Blob;
-        gauge.props = mergedProps.current = (0, utils_1.mergeObjects)(GaugeComponentProps_1.defaultGaugeProps, props);
     };
+    //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 () { return gauge.props = mergedProps.current = (0, utils_1.mergeObjects)(GaugeComponentProps_1.defaultGaugeProps, props); };
     var shouldInitChart = function () {
@@ -99,2 +101,3 @@ var arcsPropsChanged = (JSON.stringify(prevProps.current.arc) !== JSON.stringify(mergedProps.current.arc));
     (0, react_1.useLayoutEffect)(function () {
+        updateSelectedPointerType();
         updateMergedProps();
@@ -112,4 +115,4 @@ container.current = (0, d3_1.select)(selectedRef.current);
     }, [props]);
-    var id = props.id, style = props.style, className = props.className;
-    return (react_1.default.createElement("div", { id: id, className: className, style: style, ref: function (svg) { return (selectedRef.current = svg); } }));
+    var id = props.id, style = props.style, className = props.className, type = props.type;
+    return (react_1.default.createElement("div", { id: id, className: "".concat(className, " ").concat(type == GaugeComponentProps_1.GaugeType.Semicircle ? "semicircle-gauge" : "radial-gauge", "}"), style: style, ref: function (svg) { return (selectedRef.current = svg); } }));
 };
@@ -116,0 +119,0 @@ GaugeComponent.defaultProps = GaugeComponentProps_1.defaultGaugeProps;

dist/GaugeComponent/types/Arc.d.ts

@@ -16,2 +16,5 @@ import { Tooltip } from './Tooltip';
     tooltip?: Tooltip;
+    onClick?: () => void;
+    onMouseMove?: () => void;
+    onMouseLeave?: () => void;
 }
@@ -18,0 +21,0 @@ export declare const defaultSubArcs: SubArc[];

dist/GaugeComponent/types/Gauge.d.ts

@@ -22,2 +22,3 @@ /// <reference types="react" />
     pieChart: React.MutableRefObject<any>;
+    tooltip: React.MutableRefObject<any>;
 }

dist/GaugeComponent/types/GaugeComponentProps.d.ts

@@ -6,2 +6,6 @@ /// <reference types="react" />
 import { Blob } from './Blob';
+export declare enum GaugeType {
+    Semicircle = "semicircle",
+    Radial = "radial"
+}
 export interface GaugeComponentProps {
@@ -19,3 +23,4 @@ id: string;
     blob?: Blob;
+    type: GaugeType;
 }
 export declare const defaultGaugeProps: GaugeComponentProps;

dist/GaugeComponent/types/GaugeComponentProps.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultGaugeProps = void 0;
+exports.defaultGaugeProps = exports.GaugeType = void 0;
 var Arc_1 = require("./Arc");
 var Labels_1 = require("./Labels");
 var Needle_1 = require("./Needle");
+var GaugeType;
+(function (GaugeType) {
+    GaugeType["Semicircle"] = "semicircle";
+    GaugeType["Radial"] = "radial";
+})(GaugeType = exports.GaugeType || (exports.GaugeType = {}));
 exports.defaultGaugeProps = {
@@ -17,3 +22,4 @@ id: "gauge-component-id",
     labels: Labels_1.defaultLabels,
-    needle: Needle_1.defaultNeedle
+    needle: Needle_1.defaultNeedle,
+    type: GaugeType.Semicircle
 };

dist/GaugeComponent/types/Tooltip.js

@@ -5,3 +5,3 @@ "use strict";
 exports.defaultTooltipStyle = {
-    borderColor: '#a1a0a0',
+    borderColor: '#3D3D3D',
     borderStyle: 'solid',
@@ -8,0 +8,0 @@ borderWidth: '1px',

package.json

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

README.md

@@ -61,2 +61,38 @@ # react-gauge-component
 
+### Custom radial gauge.
+![Image of React Gauge Component for a simple data visualization](https://antoniolago.github.io/react-gauge-component/images/radialGauge.jpg "Radial Gauge Component")
+<details>
+  <summary>Show Custom Radial Gauge code</summary>
+
+  ### Custom Radial Gauge
+  
+```jsx
+<GaugeComponent
+  id="gauge-component-radial"
+  value={currentValue}
+  type="radial"
+  arc={{
+    width: 0.2,
+    nbSubArcs: 20,
+    colorArray: ['#FF5F6D', '#FFC371']
+  }}
+  labels={{
+    markLabel: {
+      type: "inner",
+      marks: [
+        { value: 20 },
+        { value: 40 },
+        { value: 60 },
+        { value: 80 },
+        { value: 100 }
+      ]
+    }
+  }}
+  needle={{
+    length: 0.9,
+  }}
+/>
+```
+</details>
+
 ### Custom Bandwidth Gauge.
@@ -196,6 +232,7 @@ ![Image of React Gauge Component for bandwidth visualization](https://antoniolago.github.io/react-gauge-component/images/bandGauge.jpg "Gauge Component for bandwidth visualization")
 <ul>
-   <li><code>id: string</code>: A unique identifier for the div surrounding the chart. Default:<code>"gauge-component-id"</code>.</li>
-   <li><code>className: string</code>: Adds a <code>className</code> to the div container. Default:<code>"gauge-component-class"</code>.</li>
+   <li><code>id: string</code>: A unique identifier for the div surrounding the chart. Default: <code>"gauge-component-id"</code>.</li>
+   <li><code>className: string</code>: Adds a <code>className</code> to the div container. Default: <code>"gauge-component-class"</code>.</li>
    <li><code>style: React.CSSProperties</code>: Adds a style object to the div container. Default: <code>{width: 100}</code>.</li>
    <li><code>marginInPercent: number</code>: Sets the margin for the chart inside the containing SVG element. Default: <code>0.05</code>.</li>
+   <li><code>type: string</code>: The type of the gauge, values can be <code>"semicircle</code> and <code>"radial"</code>. Default: <code>"semicircle</code>.</li>
    <li><code>value: number</code>: The value of the gauge. Default: <code>33</code>.</li>
@@ -223,2 +260,5 @@ <li><code>minValue: number</code>: The minimum value of the gauge. Default: <code>0</code>.</li>
               </li>
+              <li><code>onClick: (event: any) => void</code>: onClick callback. Default: <code>undefined</code>.</li>
+              <li><code>onMouseMove: (event: any) => void</code>: onMouseMove callback. Default: <code>undefined</code>.</li>
+              <li><code>onMouseLeave: (event: any) => void</code>: onMouseLeave callback. Default: <code>undefined</code>.</li>
         </ul>
@@ -225,0 +265,0 @@ subArcs default value:

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

80874

increased by3.98%

Lines of code

1431

increased by2.29%

Number of lines in readme file

329

increased by13.84%

Worsened metrics

Number of package files

43

decreased by-4.44%

No dependency changes