Nested progress bars? about angular-svg-round-progressbar HOT 14 CLOSED

It has been a while since this issue was posted, but with the changes in 4af45d3 it's now possible to nest progressbars. I'm working on making this a little more convenient, but here's what can be done now:

from angular-svg-round-progressbar.

Technically it should be possible, because svg allows nesting other svg elements, although after a bit of fiddling around I found a couple of problems:

1. The directive is using .find to get a hold of the path and the circle, if there's another nested svg, it picks up its children as well. This can be fixed easily.
2. Angular throws an error if one round progressbar is nested into another. I believe its because Angular can't find the element because it gets transcluded. I'm not quite sure how to fix this one.

EDIT: I tried to reproduce a minimal example of nesting a directive with transclusion and it seems to work just fine, something else must be causing that error. http://plnkr.co/edit/vbRW2FfLEG39zt5HWH6n?p=preview

from angular-svg-round-progressbar.

That looks amazing! Thanks for implementing this :)

from angular-svg-round-progressbar.

Released in 0.3.6

from angular-svg-round-progressbar.

@crisbeto Would it be possible to have something like this

from angular-svg-round-progressbar.

You might have some luck with nesting a few progressbars and adding a rotation to the path, but I think built-in support is out of the scope of the project. Your example is more of chart than a progressbar.

from angular-svg-round-progressbar.

In reality they are multiple progress bar stacked one after the other, think on it as a queue. I will take a look on what you said.

from angular-svg-round-progressbar.

@crisbeto , I am using below code to nest 2 round progress bars.

The progress bars display fine in chrome simulator in Ios devices, but only the outer bar appears in xcode iphone simulator. Also only a single bar appears in the actual ios device.

Can you please help?

from angular-svg-round-progressbar.

@crisbeto Is this feature supposed to be still working in the Angular 1 version (0.4.8)?
I tried it but the bars are rendered above each other. The inner svg does not have the viewBox attribute but that has no effect. Am I missing something?
Thanks for helping

from angular-svg-round-progressbar.

You can try setting the offset option to "inherit" which should prevent the progress bars from going beneath each other.

from angular-svg-round-progressbar.

I copied the example from build/index.html and adjusted it and now it works!
I tried the offset attribute before and it didn't help. I was probably doing something else wrong.
Thanks again

from angular-svg-round-progressbar.

is this feature is still available? I'm trying to implement nested progress bar by adding nested attribute

<round-progress [current]="80" [max]="100" [color]="'#45ccce'" [background]="'#eaeaea'" [radius]="125" [stroke]="20" [semicircle]="false" [rounded]="true" [clockwise]="false" [responsive]="false" [duration]="800" [animation]="'easeInOutQuart'" [animationDelay]="0" [offset]="'inherit'"> <round-progress [current]="80" [max]="100" [color]="'#45ccce'" [background]="'#eaeaea'" [radius]="75" [stroke]="20" [semicircle]="false" [rounded]="true" [clockwise]="false" [responsive]="false" [duration]="800" [animation]="'easeInOutQuart'" [animationDelay]="0"></round-progress> </round-progress>

Also I tried the offset but nothing work!

Any help please?
Thanks.

from angular-svg-round-progressbar.

@khaled9544 it was available on the AngularJS version of the component, but I haven't ported it to Angular yet.

from angular-svg-round-progressbar.

@khaled9544 it was available on the AngularJS version of the component, but I haven't ported it to Angular yet.

Hi @crisbeto thanks for the plugin.

Any luck with this?

from angular-svg-round-progressbar.