From 464ba75e1227901d96fae88e187b150ea2fe9728 Mon Sep 17 00:00:00 2001 From: eah Date: Tue, 25 Feb 2020 08:46:43 +0100 Subject: [PATCH 1/8] added 'stopNeedleAtMax' prop --- src/App.js | 3 ++- src/lib/GaugeChart/index.js | 19 ++++++++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 0b34d36..b1d6ebd 100644 --- a/src/App.js +++ b/src/App.js @@ -128,8 +128,9 @@ const App = () => { nrOfLevels={420} arcsLength={arcs} colors={['#5BE12C', '#F5CD19', '#EA4228']} - percent={0.37} + percent={1.37} arcPadding={0.02} + stopNeedleAtMax={true} /> diff --git a/src/lib/GaugeChart/index.js b/src/lib/GaugeChart/index.js index f65279a..b4ebf05 100644 --- a/src/lib/GaugeChart/index.js +++ b/src/lib/GaugeChart/index.js @@ -122,7 +122,8 @@ GaugeChart.defaultProps = { animate: true, animDelay: 500, formatTextValue: null, - fontSize: null + fontSize: null, + stopNeedleAtMax: false, } GaugeChart.propTypes = { @@ -143,7 +144,8 @@ GaugeChart.propTypes = { hideText: PropTypes.bool, animate: PropTypes.bool, formatTextValue: PropTypes.func, - fontSize: PropTypes.string + fontSize: PropTypes.string, + stopNeedleAtMax: PropTypes.bool } // This function update arc's datas when component is mounting or when one of arc's props is updated @@ -229,13 +231,13 @@ const getColors = (props, nbArcsToDisplay) => { //If 'resize' is true then the animation does not play const drawNeedle = (resize, prevProps, props, width, needle, container, outerRadius, g) => { - const { percent, needleColor, needleBaseColor, hideText, animate } = props; + const { percent, needleColor, needleBaseColor, hideText, animate, stopNeedleAtMax } = props; var needleRadius = 15*(width.current / 500) , // Make the needle radius responsive centerPoint = [0, -needleRadius/2]; //Draw the triangle //var pathStr = `M ${leftPoint[0]} ${leftPoint[1]} L ${topPoint[0]} ${topPoint[1]} L ${rightPoint[0]} ${rightPoint[1]}`; const prevPercent = prevProps ? prevProps.percent : 0; - var pathStr = calculateRotation(prevPercent || percent, outerRadius, width); + var pathStr = calculateRotation(prevPercent || percent, outerRadius, width, stopNeedleAtMax); needle.current.append("path") .attr("d", pathStr) .attr("fill", needleColor); @@ -259,16 +261,19 @@ const drawNeedle = (resize, prevProps, props, width, needle, container, outerRad const currentPercent = interpolateNumber(prevPercent, percent); return function(percentOfPercent){ const progress = currentPercent(percentOfPercent); - return container.current.select(`.needle path`).attr("d", calculateRotation(progress, outerRadius, width)); + return container.current.select(`.needle path`).attr("d", calculateRotation(progress, outerRadius, width, stopNeedleAtMax)); } }); } else{ - container.current.select(`.needle path`).attr("d", calculateRotation(percent, outerRadius, width)); + container.current.select(`.needle path`).attr("d", calculateRotation(percent, outerRadius, width, stopNeedleAtMax)); } } -const calculateRotation = (percent, outerRadius, width) => { +const calculateRotation = (percent, outerRadius, width, stopNeedleAtMax) => { + if (stopNeedleAtMax && percent > 1.0) { + percent = 1.05; // just above 1.0 to indicate that it is out of bounds + } var needleLength = outerRadius.current * 0.55, //TODO: Maybe it should be specified as a percentage of the arc radius? needleRadius = 15 * (width.current / 500), theta = percentToRad(percent), From 83e6c53743fdefd864791ca275fc6d323cd9b334 Mon Sep 17 00:00:00 2001 From: eah Date: Tue, 25 Feb 2020 08:50:34 +0100 Subject: [PATCH 2/8] bump version --- package-lock.json | 74 +++++++++++++++++++++++------------------------ package.json | 2 +- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6e238c2..45de2fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-gauge-chart", - "version": "0.2.2", + "version": "0.2.6", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -487,10 +487,10 @@ "dev": true, "optional": true, "requires": { - "deep-extend": "0.6.0", - "ini": "1.3.5", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" + "deep-extend": "^0.6.0", + "ini": "~1.3.0", + "minimist": "^1.2.0", + "strip-json-comments": "~2.0.1" }, "dependencies": { "minimist": { @@ -709,9 +709,9 @@ "integrity": "sha512-mDho4qm7WgIXIGf4eYU1RHN2UU5tPfVYVSRwDJw0uTmj35DQUt/eNp19N7v6T3SrR0ESTEf2up2CGO73qI35zQ==", "dev": true, "requires": { - "graceful-fs": "4.1.15", - "is-plain-obj": "1.1.0", - "mkdirp": "0.5.1" + "graceful-fs": "^4.1.11", + "is-plain-obj": "^1.1.0", + "mkdirp": "^0.5.1" } }, "slash": { @@ -2412,9 +2412,9 @@ "integrity": "sha512-l79boDFJ8S1c5hvQvG+rc+wHw6IuH7YldmRKsYtpbawsxURu/paVy57FZMomGK22/JckepaikOkY0MoAmdyOlQ==", "dev": true, "requires": { - "@babel/helper-hoist-variables": "7.4.4", - "@babel/traverse": "7.6.2", - "@babel/types": "7.6.1" + "@babel/helper-hoist-variables": "^7.4.4", + "@babel/traverse": "^7.4.4", + "@babel/types": "^7.4.4" } }, "@babel/helper-define-map": { @@ -2434,7 +2434,7 @@ "integrity": "sha512-VYk2/H/BnYbZDDg39hr3t2kKyifAm1W6zHRfhx8jGjIHpQEBv9dry7oQ2f3+J703TLu69nYdxsovl0XYfcnK4w==", "dev": true, "requires": { - "@babel/types": "7.6.1" + "@babel/types": "^7.4.4" } }, "@babel/helper-member-expression-to-functions": { @@ -2473,7 +2473,7 @@ "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", "dev": true, "requires": { - "@babel/types": "7.6.1" + "@babel/types": "^7.4.4" } }, "@babel/plugin-proposal-object-rest-spread": { @@ -2569,7 +2569,7 @@ "integrity": "sha512-9T/5Dlr14Z9TIEXLXkt8T1DU7F24cbhwhMNUziN3hB1AXoZcdzPcTiKGRn/6iOymDqtTKWnr/BtRKN9JwbKtdQ==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "7.0.0" + "@babel/helper-plugin-utils": "^7.0.0" } }, "@babel/plugin-transform-function-name": { @@ -2578,8 +2578,8 @@ "integrity": "sha512-iU9pv7U+2jC9ANQkKeNF6DrPy4GBa4NWQtl6dHB4Pb3izX2JOEvDTFarlNsBj/63ZEzNNIAMs3Qw4fNCcSOXJA==", "dev": true, "requires": { - "@babel/helper-function-name": "7.1.0", - "@babel/helper-plugin-utils": "7.0.0" + "@babel/helper-function-name": "^7.1.0", + "@babel/helper-plugin-utils": "^7.0.0" } }, "@babel/plugin-transform-modules-amd": { @@ -2647,7 +2647,7 @@ "integrity": "sha512-r1z3T2DNGQwwe2vPGZMBNjioT2scgWzK9BCnDEh+46z8EEwXBq24uRzd65I7pjtugzPSj921aM15RpESgzsSuA==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "7.0.0" + "@babel/helper-plugin-utils": "^7.0.0" } }, "@babel/plugin-transform-object-super": { @@ -2666,9 +2666,9 @@ "integrity": "sha512-oMh5DUO1V63nZcu/ZVLQFqiihBGo4OpxJxR1otF50GMeCLiRx5nUdtokd+u9SuVJrvvuIh9OosRFPP4pIPnwmw==", "dev": true, "requires": { - "@babel/helper-call-delegate": "7.4.4", - "@babel/helper-get-function-arity": "7.0.0", - "@babel/helper-plugin-utils": "7.0.0" + "@babel/helper-call-delegate": "^7.4.4", + "@babel/helper-get-function-arity": "^7.0.0", + "@babel/helper-plugin-utils": "^7.0.0" } }, "@babel/plugin-transform-regenerator": { @@ -2934,7 +2934,7 @@ "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", "dev": true, "requires": { - "@babel/types": "7.6.1" + "@babel/types": "^7.4.4" } }, "@babel/parser": { @@ -9820,7 +9820,7 @@ "dev": true, "optional": true, "requires": { - "safer-buffer": "2.1.2" + "safer-buffer": "^2.1.0" } }, "ignore-walk": { @@ -9860,7 +9860,7 @@ "dev": true, "optional": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "isarray": { @@ -9924,9 +9924,9 @@ "dev": true, "optional": true, "requires": { - "debug": "2.6.9", - "iconv-lite": "0.4.21", - "sax": "1.2.4" + "debug": "^2.1.2", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" } }, "node-pre-gyp": { @@ -9953,8 +9953,8 @@ "dev": true, "optional": true, "requires": { - "abbrev": "1.1.1", - "osenv": "0.1.5" + "abbrev": "1", + "osenv": "^0.1.4" } }, "npm-bundled": { @@ -9969,8 +9969,8 @@ "dev": true, "optional": true, "requires": { - "ignore-walk": "3.0.1", - "npm-bundled": "1.0.3" + "ignore-walk": "^3.0.1", + "npm-bundled": "^1.0.1" } }, "npmlog": { @@ -10024,8 +10024,8 @@ "dev": true, "optional": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" } }, "path-is-absolute": { @@ -10266,11 +10266,11 @@ "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { - "array-union": "1.0.2", - "glob": "7.1.3", - "object-assign": "4.1.1", - "pify": "2.3.0", - "pinkie-promise": "2.0.1" + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" } } } diff --git a/package.json b/package.json index 573c015..38118e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-gauge-chart", - "version": "0.2.5", + "version": "0.2.6", "main": "dist/index", "module": "dist/index", "typings": "dist/index", From 6bf08593eea5d185b1a3798f26c70aae48889742 Mon Sep 17 00:00:00 2001 From: eah Date: Tue, 25 Feb 2020 09:04:24 +0100 Subject: [PATCH 3/8] updated readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 95615e1..dbce951 100644 --- a/README.md +++ b/README.md @@ -116,6 +116,7 @@ The props for the chart: | animate | PropTypes.bool | Whether or not to animate the needle when loaded | true | | animDelay | PropTypes.number | Delay in ms before start the needle animation | 500 | | formatTextValue | PropTypes.func | Format you own text value (example: value => value+'%') | null | +| stopNeedleAtMax | PropTypes.bool | Whether or not the needle should stop rotating at max | false | ##### Colors for the chart From f77bd57007430b767f58098e8c2821fdf4d035f4 Mon Sep 17 00:00:00 2001 From: eah Date: Tue, 25 Feb 2020 09:58:47 +0100 Subject: [PATCH 4/8] don't cap needle during animation --- src/lib/GaugeChart/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/GaugeChart/index.js b/src/lib/GaugeChart/index.js index b4ebf05..48970be 100644 --- a/src/lib/GaugeChart/index.js +++ b/src/lib/GaugeChart/index.js @@ -261,7 +261,7 @@ const drawNeedle = (resize, prevProps, props, width, needle, container, outerRad const currentPercent = interpolateNumber(prevPercent, percent); return function(percentOfPercent){ const progress = currentPercent(percentOfPercent); - return container.current.select(`.needle path`).attr("d", calculateRotation(progress, outerRadius, width, stopNeedleAtMax)); + return container.current.select(`.needle path`).attr("d", calculateRotation(progress, outerRadius, width)); } }); } From 1b8e76c48db01c21a145c808d2498f8ab48da5e2 Mon Sep 17 00:00:00 2001 From: eah Date: Tue, 25 Feb 2020 10:14:47 +0100 Subject: [PATCH 5/8] stop animation at max when 'stopNeedleAtMax' is true --- src/lib/GaugeChart/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/GaugeChart/index.js b/src/lib/GaugeChart/index.js index 48970be..383ca68 100644 --- a/src/lib/GaugeChart/index.js +++ b/src/lib/GaugeChart/index.js @@ -260,7 +260,11 @@ const drawNeedle = (resize, prevProps, props, width, needle, container, outerRad .tween('progress', function(){ const currentPercent = interpolateNumber(prevPercent, percent); return function(percentOfPercent){ - const progress = currentPercent(percentOfPercent); + var progress = currentPercent(percentOfPercent); + if (stopNeedleAtMax && progress > 1.0) { + progress = 1.05; // just above 1.0 to indicate that it is out of bounds + } + console.log(`progress: ${progress}`) return container.current.select(`.needle path`).attr("d", calculateRotation(progress, outerRadius, width)); } }); From fb31a0c0d5a69805170bc2b2d502d38e0e885378 Mon Sep 17 00:00:00 2001 From: eah Date: Tue, 25 Feb 2020 10:55:03 +0100 Subject: [PATCH 6/8] cleanup --- src/lib/GaugeChart/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/GaugeChart/index.js b/src/lib/GaugeChart/index.js index 383ca68..01d29ca 100644 --- a/src/lib/GaugeChart/index.js +++ b/src/lib/GaugeChart/index.js @@ -264,7 +264,6 @@ const drawNeedle = (resize, prevProps, props, width, needle, container, outerRad if (stopNeedleAtMax && progress > 1.0) { progress = 1.05; // just above 1.0 to indicate that it is out of bounds } - console.log(`progress: ${progress}`) return container.current.select(`.needle path`).attr("d", calculateRotation(progress, outerRadius, width)); } }); From edcb3d3eee3e5e5128385f0f11174cf047b30dcf Mon Sep 17 00:00:00 2001 From: eah Date: Wed, 15 Apr 2020 08:37:07 +0200 Subject: [PATCH 7/8] cleanup --- dist/GaugeChart/index.js | 31 +++++++++++++++++++++++-------- src/App.js | 2 +- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/dist/GaugeChart/index.js b/dist/GaugeChart/index.js index 3b55916..9dabc7d 100644 --- a/dist/GaugeChart/index.js +++ b/dist/GaugeChart/index.js @@ -143,7 +143,9 @@ GaugeChart.defaultProps = { hideText: false, animate: true, animDelay: 500, - formatTextValue: null + formatTextValue: null, + fontSize: null, + stopNeedleAtMax: false }; GaugeChart.propTypes = { id: _propTypes.default.string.isRequired, @@ -162,7 +164,9 @@ GaugeChart.propTypes = { needleBaseColor: _propTypes.default.string, hideText: _propTypes.default.bool, animate: _propTypes.default.bool, - formatTextValue: _propTypes.default.func + formatTextValue: _propTypes.default.func, + fontSize: _propTypes.default.string, + stopNeedleAtMax: _propTypes.default.bool }; // This function update arc's datas when component is mounting or when one of arc's props is updated var setArcData = function setArcData(props, nbArcsToDisplay, colorArray, arcData) { @@ -237,14 +241,15 @@ var drawNeedle = function drawNeedle(resize, prevProps, props, width, needle, co needleColor = props.needleColor, needleBaseColor = props.needleBaseColor, hideText = props.hideText, - animate = props.animate; + animate = props.animate, + stopNeedleAtMax = props.stopNeedleAtMax; var needleRadius = 15 * (width.current / 500), // Make the needle radius responsive centerPoint = [0, -needleRadius / 2]; //Draw the triangle //var pathStr = `M ${leftPoint[0]} ${leftPoint[1]} L ${topPoint[0]} ${topPoint[1]} L ${rightPoint[0]} ${rightPoint[1]}`; var prevPercent = prevProps ? prevProps.percent : 0; - var pathStr = calculateRotation(prevPercent || percent, outerRadius, width); + var pathStr = calculateRotation(prevPercent || percent, outerRadius, width, stopNeedleAtMax); needle.current.append("path").attr("d", pathStr).attr("fill", needleColor); //Add a circle at the bottom of needle needle.current.append('circle').attr('cx', centerPoint[0]).attr('cy', centerPoint[1]).attr('r', needleRadius).attr('fill', needleBaseColor); @@ -259,15 +264,24 @@ var drawNeedle = function drawNeedle(resize, prevProps, props, width, needle, co var currentPercent = (0, _d.interpolateNumber)(prevPercent, percent); return function (percentOfPercent) { var progress = currentPercent(percentOfPercent); + + if (stopNeedleAtMax && progress > 1.0) { + progress = 1.05; // just above 1.0 to indicate that it is out of bounds + } + return container.current.select(".needle path").attr("d", calculateRotation(progress, outerRadius, width)); }; }); } else { - container.current.select(".needle path").attr("d", calculateRotation(percent, outerRadius, width)); + container.current.select(".needle path").attr("d", calculateRotation(percent, outerRadius, width, stopNeedleAtMax)); } }; -var calculateRotation = function calculateRotation(percent, outerRadius, width) { +var calculateRotation = function calculateRotation(percent, outerRadius, width, stopNeedleAtMax) { + if (stopNeedleAtMax && percent > 1.0) { + percent = 1.05; // just above 1.0 to indicate that it is out of bounds + } + var needleLength = outerRadius.current * 0.55, //TODO: Maybe it should be specified as a percentage of the arc radius? needleRadius = 15 * (width.current / 500), @@ -287,12 +301,13 @@ var percentToRad = function percentToRad(percent) { var addText = function addText(percentage, props, outerRadius, width, g) { - var formatTextValue = props.formatTextValue; + var formatTextValue = props.formatTextValue, + fontSize = props.fontSize; var textPadding = 20; var text = formatTextValue ? formatTextValue(floatingNumber(percentage)) : floatingNumber(percentage) + '%'; g.current.append('g').attr('class', 'text-group').attr('transform', "translate(".concat(outerRadius.current, ", ").concat(outerRadius.current / 2 + textPadding, ")")).append('text').text(text) // this computation avoid text overflow. When formatted value is over 10 characters, we should reduce font size .style('font-size', function () { - return "".concat(width.current / 11 / (text.length > 10 ? text.length / 10 : 1), "px"); + return fontSize ? fontSize : "".concat(width.current / 11 / (text.length > 10 ? text.length / 10 : 1), "px"); }).style('fill', props.textColor).attr('class', 'percent-text'); }; diff --git a/src/App.js b/src/App.js index b1d6ebd..5824295 100644 --- a/src/App.js +++ b/src/App.js @@ -128,7 +128,7 @@ const App = () => { nrOfLevels={420} arcsLength={arcs} colors={['#5BE12C', '#F5CD19', '#EA4228']} - percent={1.37} + percent={1.27} arcPadding={0.02} stopNeedleAtMax={true} /> From f947970557c51d8ef77b3590f201b64e9b2cb71b Mon Sep 17 00:00:00 2001 From: eah Date: Wed, 15 Apr 2020 08:43:18 +0200 Subject: [PATCH 8/8] merge master --- src/App.js | 2 -- src/lib/GaugeChart/index.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 5824295..35b42cc 100644 --- a/src/App.js +++ b/src/App.js @@ -128,9 +128,7 @@ const App = () => { nrOfLevels={420} arcsLength={arcs} colors={['#5BE12C', '#F5CD19', '#EA4228']} - percent={1.27} arcPadding={0.02} - stopNeedleAtMax={true} /> diff --git a/src/lib/GaugeChart/index.js b/src/lib/GaugeChart/index.js index 7115b4b..6a65236 100644 --- a/src/lib/GaugeChart/index.js +++ b/src/lib/GaugeChart/index.js @@ -146,7 +146,7 @@ GaugeChart.propTypes = { animate: PropTypes.bool, formatTextValue: PropTypes.func, fontSize: PropTypes.string, - stopNeedleAtMax: PropTypes.bool + stopNeedleAtMax: PropTypes.bool, animateDuration: PropTypes.number, }