Comments (14)
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:
- 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. - 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.
Related Issues (20)
- Question: Does v4 break on Angular 9? HOT 5
- [^4.0.0] [Angular 10.0.8] Production build isue. Related to #204 HOT 2
- Animation when max changed
- Errors with Angular 9 - ɵɵFactoryDef HOT 10
- Angular 9 error ɵɵFactoryDef
- Compilation failed after upgrading to 5.0.1 HOT 2
- Could not be served HOT 1
- contribution
- Support for Angular 11 HOT 1
- Small circle at the end of outer stroke
- Filling color in case of 0 current value HOT 1
- Support Angular 12 HOT 1
- Memory leak when drawing progress HOT 2
- Error - Angular 11.2.7 HOT 1
- ARIA progressbar nodes must have an accessible name HOT 1
- error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments. HOT 2
- Angular 16 support HOT 1
- Angular-svg-round-progressbar for Angular 9? HOT 1
- Inconsistent URL Parsing in resolveColor function affecting SVG Strokes HOT 1
- Only void and foreign elements can be self closed "round-progress" HOT 1
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 angular-svg-round-progressbar.