Fix gauge refreshing from 0 every value update

[camiteca]

Changed gauge behavior to update from the previous point instead of the min. With the change, every time the value changes, it will progress from the previous value (or the min if there ain't one) to the new value.

[ashish-chopra]

Thanks @karlmtc

Your solution is an awesome help for the community.

Regards
Ashish

[ssbrewco]

Appreciate the help on this update!

That said, I noticed some changes in the value display after #40 was checked in. As you can see, in the new case the value color has changed and is cut-off:

Before:

After:

Any thoughts? If there are ways to style around this, please advise.

Thanks!
-S

[camiteca]

Sorry if I missed anything. I can try to replicate on the branch. Can you please provide me the configuration so I can see what's missing in that case?

[ashish-chopra]

Hi @ssbrewco

It seems from the images, that Gauge has rollback to its default colors for foreground, background and label. You might have customized in your version which have been overwritten by the update you pulled.

As far as clipping is concerned, even before merging #40 the label used to render perfectly at the center. Checkout demos section in https://ashish-chopra.github.io/angular-gauge . Half of it lies below the arch and half of it inside the arch. It seems that label is clipped because the parent container is given defined size and thereby clipping the lower portion. Checkout your parent css, may be that helps.

@karlmtc for a sanity, if you can see any side-effects you left in the code, which i too missed to catch, let us know.

Thanks!
Ashish

[ssbrewco]

Ashish,

Thanks for the follow-up. I did a bit more digging, here are my observations:

1. • Before Fix gauge refreshing from 0 every value update #40, the label was not centered: e.g. the bottom of the text was aligned with the bottom of a semi-circle. After Fix gauge refreshing from 0 every value update #40 the label is centered relative to the full circle and hangs below the bottom of the semi.
2. • Yes, my clipping was a result of a parent container now that the label position has shifted
3. • Agreed the default colors appear to have changed before/after Fix gauge refreshing from 0 every value update #40 (not an issue, this is resolved by not relying on default)

Here's my code for reference:
<ng-gauge size="250" type="semi" thick="25" foreground-color="#5D9CEC" min="0" max="100" value="50" append="%" duration="500"></ng-gauge>

Last question for this noob: which CSS properties should be used to style the label font/size/color?

Thanks!

[camiteca]

Hi @ssbrewco, for what I saw, there are yet no properties available to style them. You can open an issue so the problem is tracked and someone that needs to style it as you do can open a pull request.

Cheers.