The limit of a subArc must be greater than the limit of the previous subArc.

[script8888]

Hi, good work with the fork

Can you remove this error and allow a setup which we can use limit greater than the limit of previous subArc

My current design requires the limits to be in this order 39, 21, 25, 15 And when I input it, it throws this error: The limit of a subArc must be greater than the limit of the previous subArc.

[antoniolago]

Hello @script8888, thanks for sharing your issue, the behavior of the subArcs rendering requires that the next subArc limit to be greater than the previous one or undefined for calculating subArcs length, but I think we can trade this error for a reorder of the subArcs by limits in ascending order, I'll add this soon but let me know if this is what you meant, also if you could share your component's code it would help make it clearer for me. Thanks.

[antoniolago]

Just uploaded a new version (1.0.11) with the requested feature, let me know if this works for you.

Please also take note that limits are representations of value, not arc length as the original project, example: subArcs: [{limit: 10}, {limit: 50}, {}] In a default min/max, this will render subArcs from 0-10, 10-50 and 50-100.

your input is 39, 21, 25, 15 I see that in the original project this would render 0-39, 39-60, 60-85, 85-100, In this project with the new change I implemented and in a min/max default, this input will render subArcs 0-15, 15-21, 21-25, 25-100 (as the 39 is the greater value and it gotta be the maxValue in lengths computation).

So maybe you want to change your inputs to 39, 60, 85, 100

Maybe we can create another subArc property called "length" to work as the old behavior, but this may require some time.

Hope this helps.

[script8888]

Ohhhh that makes sense now guess I misunderstood it

Also, there are a lot of lint type errors when using it with typescript next js. The "type" attribute which is supposed to be a string shows this lint error:

Type '"semicircle"' is not assignable to type 'GaugeType | undefined'.ts(2322)
GaugeComponentProps.d.ts(27, 5): The expected type comes from property 'type' which is declared here on type 'IntrinsicAttributes & Partial<GaugeComponentProps>'

This is how I used it <GaugeComponent type="semicircle" />

So I had to import the GaugeType and use it like this <GaugeComponent type={GaugeType.Semicircle} /> before the lint error went away

And the fixes to the other lint errors are making it compulsory to add the attribute even though I'm not making use of said attributes I experience such in both the arc and labels attribute

[antoniolago]

Darn it, I forgot I tested just from .js file, I'll overhaul these typing issues, thanks.

[script8888]

awesome overall you did a great job fixing the rerender issues

Thats awesome Thanks

[antoniolago]

Now that you mentioned render issues, I went to check it and saw that after grafana gauge implementation some gauges are rerendering marks and arcs without needing to, I'll create a new issue and fix it.

[antoniolago]

For the types issue I created #11 and uploaded the fix in version 1.0.12, let me know if that works for you

[script8888]

now it shows this error on the import Cannot find module 'react-gauge-component' or its corresponding type declarations.ts(2307)

[antoniolago]

Oopsie, with the App.js -> App.tsx folder hierarchy got some unwanted changes in compiled files, sorry for that, I'm new to maintaining packages 😅. I've adjusted the tsconfig and uploaded a new version, just tested the import and the error is gone.

[antoniolago]

I ended up adding back the error message (with more details) and adding the length property the same way it worked in the original project, with this I'm closing this issue, but please feel free to create more issues or contact me directly, thanks @script8888.

[script8888]

awesome man it works fine now and doesn't require me to add attributes I do not need to use

just a suggestion, but if you could add a range of values in the interface of the type attribute, so when I try to get suggestions in my ide it can show possible values I can put in for that attribute.

But yeah no more errors from my end to the extent at which I am using the component

[antoniolago]

Nice, happy it's working fine.

Yeah, that's a fair point, I created #16 for that, thanks mate.