Comments (3)
Issue Fixed.
Please update to the new version v1.0.0-beta.1
.
I will soon release a final version 1.0.0
with an upgrade to ng 5.
from ngx-gauge.
Thank you very much
from ngx-gauge.
I've checked the source code and when you call NgxGauge.prototype._getForegroundColorByRange you sort thresholds and then you reverse and select the first. Now, suppose you are using my thresholds... if you call .sort() you get
(3) ["0", "100", "80"]
0: "0"
1:"100"
2:"80"
length:3
__proto__:Array(0)
This is because you are sorting by strings and not using real number values, so 100 comes before 80.
To resolve this you should sort by real number. I've changed your code adding a simple function and changing NgxGauge.prototype._getForegroundColorByRange function (inside ngx-gauge.es5.js). Here's my code
function sortByNumber(a, b) { return Number(a) > Number(b); }
NgxGauge.prototype._getForegroundColorByRange = function (value) {
var /** @type {?} */ match = Object.keys(this.thresholds)
.filter(function (item) { return isNumber(item) && Number(item) <= value; })
.sort(sortByNumber).reverse()[0];
return match !== undefined
? this.thresholds[match].color || this.foregroundColor
: this.foregroundColor;
};
This solved the problem and gauge will load the proper threshold.
I'll be glad if you would fix this with a new release, and remove the console.log found in this issue #4.
Please reply when you fix this so i can download the new version. Thanks :)
from ngx-gauge.
Related Issues (20)
- Markers cut off and look pixelated HOT 1
- Change the value draging the needle pointer
- Angular 14 Support HOT 3
- Cap round with thresholds dont work on one side.
- Marker dont render correctly when using a min value HOT 1
- Any idea why it's displaying like this? HOT 1
- I got an issue when I entered some negative value in markers
- how to import it to Razor Pages (ASP.NET) HOT 1
- Angular 15 Support HOT 4
- Markers are not being drawn properly. HOT 2
- want to draw inside Markers
- Not able to display different background colors for the defined threshold values HOT 1
- Marks labels colors HOT 1
- Angular 16 Support HOT 5
- Angular 17 Support HOT 8
- Need help making ngx-gauge responsive? HOT 1
- Angular 18 support ? HOT 7
- bug: animate can cause wrong state
- foregroundColor & backgroundColor update with theme change
- Option to state the number of decimal places displayed for Value
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-gauge.