search

ashish-chopra / angular-gauge

A reusable gauge directive for Angular 1.x apps and dashboards
https://ashish-chopra.github.io/angular-gauge/
MIT License
95 stars 36 forks source link

Fix gauge refreshing from 0 every value update #40

Closed camiteca closed 7 years ago

camiteca commented 7 years ago

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 commented 7 years ago

Thanks @karlmtc

Your solution is an awesome help for the community.

Regards Ashish

ssbrewco commented 7 years ago

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: before

After: after

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

Thanks! -S

camiteca commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Ashish,

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

    • Before #40, the label was not centered: e.g. the bottom of the text was aligned with the bottom of a semi-circle. After #40 the label is centered relative to the full circle and hangs below the bottom of the semi.
    • Yes, my clipping was a result of a parent container now that the label position has shifted
    • Agreed the default colors appear to have changed before/after #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 commented 6 years ago

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.