├── src ├── assets │ ├── .gitkeep │ └── images │ │ └── music.svg ├── app │ ├── app.component.css │ ├── app.module.ts │ ├── app.component.spec.ts │ ├── app.component.html │ └── app.component.ts ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── styles.css ├── index.html ├── main.ts ├── test.ts └── polyfills.ts ├── demo.png ├── projects └── ng-circle-progress │ ├── src │ ├── public-api.ts │ └── lib │ │ ├── ng-circle-progress.module.ts │ │ └── ng-circle-progress.component.ts │ ├── ng-package.json │ ├── tsconfig.lib.prod.json │ ├── tslint.json │ ├── tsconfig.spec.json │ ├── tsconfig.lib.json │ ├── package.json │ ├── karma.conf.js │ └── README.md ├── .editorconfig ├── e2e ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts ├── tsconfig.json └── protractor.conf.js ├── tsconfig.app.json ├── tsconfig.spec.json ├── tsconfig.json ├── README.MD ├── README.md ├── .gitignore ├── .browserslistrc ├── LICENSE ├── karma.conf.js ├── package.json ├── tslint.json └── angular.json /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bootsoon/ng-circle-progress/HEAD/demo.png -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bootsoon/ng-circle-progress/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/ng-circle-progress/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ng-circle-progress 3 | */ 4 | 5 | export * from './lib/ng-circle-progress.component'; 6 | export * from './lib/ng-circle-progress.module'; 7 | -------------------------------------------------------------------------------- /projects/ng-circle-progress/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ng-circle-progress", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | html, body { height: 100%; } 4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; padding-bottom:500px;} 5 | .cursor-pointer {cursor:pointer} 6 | svg.copy { cursor: copy; } -------------------------------------------------------------------------------- /projects/ng-circle-progress/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /projects/ng-circle-progress/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../out-tsc/e2e", 6 | "module": "commonjs", 7 | "target": "es2018", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ng-circle-progress demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/ng-circle-progress/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { NgCircleProgressModule } from 'ng-circle-progress'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | FormsModule, 14 | NgCircleProgressModule.forRoot(), 15 | ], 16 | exports: [ 17 | ], 18 | providers: [], 19 | bootstrap: [AppComponent] 20 | }) 21 | export class AppModule { } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "moduleResolution": "node", 11 | "importHelpers": true, 12 | "target": "es2015", 13 | "module": "es2020", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ], 18 | "paths": { 19 | "ng-circle-progress": [ 20 | "dist/ng-circle-progress/ng-circle-progress", 21 | "dist/ng-circle-progress" 22 | ] 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /projects/ng-circle-progress/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "target": "es2015", 7 | "declaration": true, 8 | "declarationMap": true, 9 | "inlineSources": true, 10 | "types": [], 11 | "lib": [ 12 | "dom", 13 | "es2018" 14 | ] 15 | }, 16 | "angularCompilerOptions": { 17 | "skipTemplateCodegen": true, 18 | "strictMetadataEmit": true, 19 | "enableResourceInlining": true 20 | }, 21 | "exclude": [ 22 | "src/test.ts", 23 | "**/*.spec.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /projects/ng-circle-progress/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-circle-progress", 3 | "version": "1.7.1", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/bootsoon/ng-circle-progress" 7 | }, 8 | "author": { 9 | "name": "bootsoon", 10 | "email": "bootsoon@aliyun.com" 11 | }, 12 | "keywords": [ 13 | "angular", 14 | "circle", 15 | "progress", 16 | "percentage" 17 | ], 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/bootsoon/ng-circle-progress/issues" 21 | }, 22 | "peerDependencies": { 23 | "@angular/common": ">=14.0.0", 24 | "@angular/core": ">=14.0.0", 25 | "rxjs": ">=6.4.0" 26 | }, 27 | "dependencies": { 28 | "tslib": "^2.0.0" 29 | } 30 | } -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('ng-circle-progress-library app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # ng-circle-progress 2 | 3 | A simple circle progress component created for angular based only on SVG graphics. 4 | 5 | [![demo](https://raw.githubusercontent.com/bootsoon/ng-circle-progress/master/demo.png)](https://bootsoon.github.io/ng-circle-progress/) 6 | 7 | ## Demo 8 | 9 | [Try out the demo!](https://bootsoon.github.io/ng-circle-progress/) 10 | 11 | 12 | ## Installation Guide 13 | 14 | [Installation Guide](https://github.com/bootsoon/ng-circle-progress/blob/master/projects/ng-circle-progress/README.md) 15 | 16 | ## Development server 17 | 18 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 19 | 20 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.3. 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ng-circle-progress 2 | 3 | A simple circle progress component created for angular based only on SVG graphics. 4 | 5 | [![demo](https://raw.githubusercontent.com/bootsoon/ng-circle-progress/master/demo.png)](https://bootsoon.github.io/ng-circle-progress/) 6 | 7 | ## Demo 8 | 9 | [Try out the demo!](https://bootsoon.github.io/ng-circle-progress/) 10 | 11 | 12 | ## Installation Guide 13 | 14 | [Installation Guide](https://github.com/bootsoon/ng-circle-progress/blob/master/projects/ng-circle-progress/README.md) 15 | 16 | ## Development server 17 | 18 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 19 | 20 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.3. 21 | 22 | -------------------------------------------------------------------------------- /projects/ng-circle-progress/src/lib/ng-circle-progress.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ModuleWithProviders } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { CircleProgressComponent, CircleProgressOptionsInterface, CircleProgressOptions } from './ng-circle-progress.component'; 4 | 5 | 6 | @NgModule({ 7 | declarations: [CircleProgressComponent], 8 | imports: [ 9 | CommonModule 10 | ], 11 | exports: [CircleProgressComponent] 12 | }) 13 | export class NgCircleProgressModule { 14 | static forRoot(options: CircleProgressOptionsInterface = {}): ModuleWithProviders { 15 | return { 16 | ngModule: NgCircleProgressModule, 17 | providers: [ 18 | { provide: CircleProgressOptions, useValue: options } 19 | ] 20 | }; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.angular/cache 36 | /.sass-cache 37 | /connect.lock 38 | /coverage 39 | /libpeerconnection.log 40 | npm-debug.log 41 | yarn-error.log 42 | testem.log 43 | /typings 44 | debug.log 45 | 46 | # System Files 47 | .DS_Store 48 | Thumbs.db 49 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. 18 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 19 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ 31 | spec: { 32 | displayStacktrace: StacktraceOption.PRETTY 33 | } 34 | })); 35 | } 36 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Boot Soon 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/ng-circle-progress-library'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /projects/ng-circle-progress/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage/ng-circle-progress'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | }); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as githubLink 'https://github.com/bootsoon/ng-circle-progress'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.githubLink).toEqual('https://github.com/bootsoon/ng-circle-progress'); 23 | }); 24 | 25 | it('should render title', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement; 29 | expect(compiled.querySelector('.content span').textContent).toContain('ng-circle-progress-library app is running!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-circle-progress", 3 | "version": "1.7.1", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e", 11 | "postinstall": "ngcc" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^14.2.12", 16 | "@angular/cdk": "^14.2.7", 17 | "@angular/common": "^14.2.12", 18 | "@angular/compiler": "^14.2.12", 19 | "@angular/core": "^14.2.12", 20 | "@angular/forms": "^14.2.12", 21 | "@angular/localize": "^14.2.12", 22 | "@angular/platform-browser": "^14.2.12", 23 | "@angular/platform-browser-dynamic": "^14.2.12", 24 | "@angular/router": "^14.2.12", 25 | "@ng-bootstrap/ng-bootstrap": "^11.0.1", 26 | "bootstrap": "~5.2.3", 27 | "jquery": "^3.6.0", 28 | "rxjs": "~7.8.0", 29 | "tslib": "^2.3.1", 30 | "zone.js": "~0.12.0" 31 | }, 32 | "devDependencies": { 33 | "@angular-devkit/build-angular": "^14.2.10", 34 | "@angular/cli": "^14.2.10", 35 | "@angular/compiler-cli": "^14.2.12", 36 | "@types/jasmine": "~4.0.0", 37 | "@types/jasminewd2": "~2.0.10", 38 | "@types/node": "^17.0.22", 39 | "codelyzer": "^0.0.28", 40 | "jasmine-core": "~4.0.1", 41 | "jasmine-spec-reporter": "~7.0.0", 42 | "karma": "~6.3.17", 43 | "karma-chrome-launcher": "~3.1.1", 44 | "karma-coverage-istanbul-reporter": "~3.0.3", 45 | "karma-jasmine": "~4.0.1", 46 | "karma-jasmine-html-reporter": "^1.7.0", 47 | "ng-packagr": "^14.2.2", 48 | "protractor": "~7.0.0", 49 | "ts-node": "~10.7.0", 50 | "tslint": "~6.1.0", 51 | "typescript": "^4.7.2" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/assets/images/music.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /*************************************************************************************************** 2 | * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. 3 | */ 4 | import '@angular/localize/init'; 5 | /** 6 | * This file includes polyfills needed by Angular and is loaded before the app. 7 | * You can add your own extra polyfills to this file. 8 | * 9 | * This file is divided into 2 sections: 10 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 11 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 12 | * file. 13 | * 14 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 15 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 16 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 17 | * 18 | * Learn more in https://angular.io/guide/browser-support 19 | */ 20 | 21 | /*************************************************************************************************** 22 | * BROWSER POLYFILLS 23 | */ 24 | 25 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 26 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 27 | 28 | /** 29 | * Web Animations `@angular/platform-browser/animations` 30 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 31 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 32 | */ 33 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 34 | 35 | /** 36 | * By default, zone.js will patch all possible macroTask and DomEvents 37 | * user can disable parts of macroTask/DomEvents patch by setting following flags 38 | * because those flags need to be set before `zone.js` being loaded, and webpack 39 | * will put import in the top of bundle, so user need to create a separate file 40 | * in this directory (for example: zone-flags.ts), and put the following flags 41 | * into that file, and then add the following code before importing zone.js. 42 | * import './zone-flags'; 43 | * 44 | * The flags allowed in zone-flags.ts are listed here. 45 | * 46 | * The following flags will work for all browsers. 47 | * 48 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 49 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 50 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 51 | * 52 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 53 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 54 | * 55 | * (window as any).__Zone_enable_cross_context_check = true; 56 | * 57 | */ 58 | 59 | /*************************************************************************************************** 60 | * Zone JS is required by default for Angular itself. 61 | */ 62 | import 'zone.js/dist/zone'; // Included with Angular CLI. 63 | 64 | 65 | /*************************************************************************************************** 66 | * APPLICATION IMPORTS 67 | */ 68 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rulesDirectory": [ 4 | "codelyzer" 5 | ], 6 | "rules": { 7 | "align": { 8 | "options": [ 9 | "parameters", 10 | "statements" 11 | ] 12 | }, 13 | "array-type": false, 14 | "arrow-return-shorthand": true, 15 | "curly": true, 16 | "deprecation": { 17 | "severity": "warning" 18 | }, 19 | "eofline": true, 20 | "import-blacklist": [ 21 | true, 22 | "rxjs/Rx" 23 | ], 24 | "import-spacing": true, 25 | "indent": { 26 | "options": [ 27 | "spaces" 28 | ] 29 | }, 30 | "max-classes-per-file": false, 31 | "max-line-length": [ 32 | true, 33 | 140 34 | ], 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-console": [ 47 | true, 48 | "debug", 49 | "info", 50 | "time", 51 | "timeEnd", 52 | "trace" 53 | ], 54 | "no-empty": false, 55 | "no-inferrable-types": [ 56 | true, 57 | "ignore-params" 58 | ], 59 | "no-non-null-assertion": true, 60 | "no-redundant-jsdoc": true, 61 | "no-switch-case-fall-through": true, 62 | "no-var-requires": false, 63 | "object-literal-key-quotes": [ 64 | true, 65 | "as-needed" 66 | ], 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "semicolon": { 72 | "options": [ 73 | "always" 74 | ] 75 | }, 76 | "space-before-function-paren": { 77 | "options": { 78 | "anonymous": "never", 79 | "asyncArrow": "always", 80 | "constructor": "never", 81 | "method": "never", 82 | "named": "never" 83 | } 84 | }, 85 | "typedef": [ 86 | true, 87 | "call-signature" 88 | ], 89 | "typedef-whitespace": { 90 | "options": [ 91 | { 92 | "call-signature": "nospace", 93 | "index-signature": "nospace", 94 | "parameter": "nospace", 95 | "property-declaration": "nospace", 96 | "variable-declaration": "nospace" 97 | }, 98 | { 99 | "call-signature": "onespace", 100 | "index-signature": "onespace", 101 | "parameter": "onespace", 102 | "property-declaration": "onespace", 103 | "variable-declaration": "onespace" 104 | } 105 | ] 106 | }, 107 | "variable-name": { 108 | "options": [ 109 | "ban-keywords", 110 | "check-format", 111 | "allow-pascal-case" 112 | ] 113 | }, 114 | "whitespace": { 115 | "options": [ 116 | "check-branch", 117 | "check-decl", 118 | "check-operator", 119 | "check-separator", 120 | "check-type", 121 | "check-typecast" 122 | ] 123 | }, 124 | "component-class-suffix": true, 125 | "contextual-lifecycle": true, 126 | "directive-class-suffix": true, 127 | "no-conflicting-lifecycle": true, 128 | "no-host-metadata-property": true, 129 | "no-input-rename": true, 130 | "no-inputs-metadata-property": true, 131 | "no-output-native": true, 132 | "no-output-on-prefix": true, 133 | "no-output-rename": true, 134 | "no-outputs-metadata-property": true, 135 | "template-banana-in-box": true, 136 | "template-no-negated-async": true, 137 | "use-lifecycle-interface": true, 138 | "use-pipe-transform-interface": true, 139 | "directive-selector": [ 140 | true, 141 | "attribute", 142 | "app", 143 | "camelCase" 144 | ], 145 | "component-selector": [ 146 | true, 147 | "element", 148 | "app", 149 | "kebab-case" 150 | ] 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ng-circle-progress-library": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/ng-circle-progress-library", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "tsconfig.app.json", 21 | "aot": true, 22 | "assets": [ 23 | "src/favicon.ico", 24 | "src/assets" 25 | ], 26 | "styles": [ 27 | "node_modules/bootstrap/dist/css/bootstrap.min.css", 28 | "src/styles.css" 29 | ], 30 | "scripts": [ 31 | "node_modules/jquery/dist/jquery.js", 32 | "node_modules/bootstrap/dist/js/bootstrap.js" 33 | ] 34 | }, 35 | "configurations": { 36 | "production": { 37 | "fileReplacements": [ 38 | { 39 | "replace": "src/environments/environment.ts", 40 | "with": "src/environments/environment.prod.ts" 41 | } 42 | ], 43 | "optimization": true, 44 | "outputHashing": "all", 45 | "sourceMap": false, 46 | "extractCss": true, 47 | "namedChunks": false, 48 | "extractLicenses": true, 49 | "vendorChunk": false, 50 | "buildOptimizer": true, 51 | "budgets": [ 52 | { 53 | "type": "initial", 54 | "maximumWarning": "2mb", 55 | "maximumError": "5mb" 56 | }, 57 | { 58 | "type": "anyComponentStyle", 59 | "maximumWarning": "6kb", 60 | "maximumError": "10kb" 61 | } 62 | ] 63 | } 64 | } 65 | }, 66 | "serve": { 67 | "builder": "@angular-devkit/build-angular:dev-server", 68 | "options": { 69 | "browserTarget": "ng-circle-progress-library:build" 70 | }, 71 | "configurations": { 72 | "production": { 73 | "browserTarget": "ng-circle-progress-library:build:production" 74 | } 75 | } 76 | }, 77 | "extract-i18n": { 78 | "builder": "@angular-devkit/build-angular:extract-i18n", 79 | "options": { 80 | "browserTarget": "ng-circle-progress-library:build" 81 | } 82 | }, 83 | "test": { 84 | "builder": "@angular-devkit/build-angular:karma", 85 | "options": { 86 | "main": "src/test.ts", 87 | "polyfills": "src/polyfills.ts", 88 | "tsConfig": "tsconfig.spec.json", 89 | "karmaConfig": "karma.conf.js", 90 | "assets": [ 91 | "src/favicon.ico", 92 | "src/assets" 93 | ], 94 | "styles": [ 95 | "src/styles.css" 96 | ], 97 | "scripts": [] 98 | } 99 | }, 100 | "lint": { 101 | "builder": "@angular-devkit/build-angular:tslint", 102 | "options": { 103 | "tsConfig": [ 104 | "tsconfig.app.json", 105 | "tsconfig.spec.json", 106 | "e2e/tsconfig.json" 107 | ], 108 | "exclude": [ 109 | "**/node_modules/**" 110 | ] 111 | } 112 | }, 113 | "e2e": { 114 | "builder": "@angular-devkit/build-angular:protractor", 115 | "options": { 116 | "protractorConfig": "e2e/protractor.conf.js", 117 | "devServerTarget": "ng-circle-progress-library:serve" 118 | }, 119 | "configurations": { 120 | "production": { 121 | "devServerTarget": "ng-circle-progress-library:serve:production" 122 | } 123 | } 124 | } 125 | } 126 | }, 127 | "ng-circle-progress": { 128 | "projectType": "library", 129 | "root": "projects/ng-circle-progress", 130 | "sourceRoot": "projects/ng-circle-progress/src", 131 | "prefix": "lib", 132 | "architect": { 133 | "build": { 134 | "builder": "@angular-devkit/build-angular:ng-packagr", 135 | "options": { 136 | "tsConfig": "projects/ng-circle-progress/tsconfig.lib.json", 137 | "project": "projects/ng-circle-progress/ng-package.json" 138 | }, 139 | "configurations": { 140 | "production": { 141 | "tsConfig": "projects/ng-circle-progress/tsconfig.lib.prod.json" 142 | } 143 | } 144 | }, 145 | "test": { 146 | "builder": "@angular-devkit/build-angular:karma", 147 | "options": { 148 | "main": "projects/ng-circle-progress/src/test.ts", 149 | "tsConfig": "projects/ng-circle-progress/tsconfig.spec.json", 150 | "karmaConfig": "projects/ng-circle-progress/karma.conf.js" 151 | } 152 | }, 153 | "lint": { 154 | "builder": "@angular-devkit/build-angular:tslint", 155 | "options": { 156 | "tsConfig": [ 157 | "projects/ng-circle-progress/tsconfig.lib.json", 158 | "projects/ng-circle-progress/tsconfig.spec.json" 159 | ], 160 | "exclude": [ 161 | "**/node_modules/**" 162 | ] 163 | } 164 | } 165 | } 166 | } 167 | }, 168 | "defaultProject": "ng-circle-progress-library", 169 | "cli": { 170 | "analytics": false 171 | } 172 | } -------------------------------------------------------------------------------- /projects/ng-circle-progress/README.md: -------------------------------------------------------------------------------- 1 | # ng-circle-progress 2 | 3 | ## Demo 4 | 5 | [Try out the demo!](https://bootsoon.github.io/ng-circle-progress/) 6 | 7 | [![demo](https://raw.githubusercontent.com/bootsoon/ng-circle-progress/master/demo.png)](https://bootsoon.github.io/ng-circle-progress/) 8 | 9 | ## About 10 | 11 | It is a simple circle progress component created for [angular](https://angular.io) based only on SVG graphics. 12 | 13 | ## Installation 14 | 15 | To install this library, run: 16 | 17 | ### Angular 15 or Angular 14 projects 18 | 19 | ```bash 20 | $ npm install ng-circle-progress --save 21 | ``` 22 | 23 | ### Angular 13 or Angular 12 or Angular 11 Angular 10 or Angular 9 projects 24 | 25 | ```bash 26 | $ npm install ng-circle-progress@1.6.0 --save 27 | ``` 28 | 29 | ### Angular 8 or Angular 7 or Angular 6 projects 30 | 31 | ```bash 32 | $ npm install ng-circle-progress@1.5.1 --save 33 | ``` 34 | 35 | ### Angular 5 or Angular 4 projects 36 | 37 | ```bash 38 | $ npm install ng-circle-progress@1.0.0 --save 39 | ``` 40 | 41 | Once you have installed it, you can import it in any Angular application, 42 | 43 | then from your Angular `AppModule`: 44 | 45 | ```typescript 46 | import { BrowserModule } from '@angular/platform-browser'; 47 | import { NgModule } from '@angular/core'; 48 | 49 | import { AppComponent } from './app.component'; 50 | 51 | // Import ng-circle-progress 52 | import { NgCircleProgressModule } from 'ng-circle-progress'; 53 | 54 | @NgModule({ 55 | declarations: [ 56 | AppComponent 57 | ], 58 | imports: [ 59 | BrowserModule, 60 | 61 | // Specify ng-circle-progress as an import 62 | NgCircleProgressModule.forRoot({ 63 | // set defaults here 64 | radius: 100, 65 | outerStrokeWidth: 16, 66 | innerStrokeWidth: 8, 67 | outerStrokeColor: "#78C000", 68 | innerStrokeColor: "#C7E596", 69 | animationDuration: 300, 70 | ... 71 | }) 72 | 73 | ], 74 | providers: [], 75 | bootstrap: [AppComponent] 76 | }) 77 | export class AppModule { } 78 | ``` 79 | 80 | Once NgCircleProgressModule is imported, you can use CircleProgressComponent in your Angular application: 81 | 82 | ```xml 83 | 84 | 94 | 95 | ``` 96 | 97 | ## Options 98 | 99 | Option | Type | Default | Description 100 | --- | --- | --- | --- 101 | percent | `number` | `0` | Number of percent you want to show 102 | maxPercent | `number` | `1000` | Max number of percent you want to show 103 | radius | `number` | `90` | Radius of circle 104 | clockwise | `boolean` | `true` | Whether to rotate clockwise or counter-clockwise 105 | responsive | `boolean` | `false` | Whether to make the circle responsive 106 | startFromZero | `boolean` | `true` | Whether to start the percent from zero 107 | showZeroOuterStroke | `boolean` | `true` | Whether to show the bar if percent is zero 108 | showTitle | `boolean` | `true` | Whether to display title 109 | showSubtitle | `boolean` | `true` | Whether to display subtitle 110 | showUnits | `boolean` | `true` | Whether to display units 111 | showImage | `boolean` | `true` | Whether to display image. All text will be hidden if showImage is true. 112 | showBackground | `boolean` | `true` | Whether to display background circle 113 | showInnerStroke | `boolean` | `true` | Whether to display inner stroke 114 | backgroundStroke | `string` | `'transparent'` | Background stroke color 115 | backgroundStrokeWidth | `number` | `0` | Stroke width of background circle 116 | backgroundPadding | `number` | `5` | Padding of background circle 117 | backgroundGradient | `boolean` | `false` | Make background gradient 118 | backgroundColor | `string` | `'transparent'` | Background color 119 | backgroundGradientStopColor | `string` | `'transparent'` | Background gradient stop color 120 | backgroundOpacity | `number` | `1` | Opacity of background color 121 | space | `number` | `4` | Space between outer circle and inner circle 122 | toFixed | `number` | `0` | Using fixed digital notation in Title 123 | renderOnClick | `boolean` | `true` | Render when component is clicked 124 | units | `string` | `'%'` | Units showed aside the title 125 | unitsFontSize | `string` | `'10'` | Font size of units 126 | unitsFontWeight | `string` | `'100'` | Font weight of units 127 | unitsColor | `string` | `'#444444'` | Font color of units 128 | outerStrokeWidth | `number` | `8` | Stroke width of outer circle (progress circle) 129 | outerStrokeGradient | `boolean` | `false` | Make outer circle gradient 130 | outerStrokeColor | `sting` | `'#78C000'` | Stroke color of outer circle 131 | outerStrokeGradientStopColor | `string` | `'transparent'` | Stroke gradient stop color of outer circle 132 | outerStrokeLinecap | `sting` | `'round'` | Stroke linecap of outer circle. Possible values(butt, round, square, inherit) 133 | innerStrokeWidth | `number` | `4` | Stroke width of inner circle 134 | innerStrokeColor | `sting` | `'#C7E596'` | Stroke color of inner circle 135 | title | `string\|Array` | `'auto'` | text showed as title. Percentage is displayed when title equals 'auto'. 136 | titleFormat | `Function` | `undefined` | A callback function to format title. It returns a string or an array of string. 137 | titleColor | `string` | `'#444444'` | Font color of title 138 | titleFontSize | `string` | `'20'` | Font size of title 139 | titleFontWeight | `string` | `'100'` | Font weight of title 140 | subtitle | `string\|Array` | `'Percent'` | text showed as subtitle 141 | subtitleFormat | `Function` | `undefined` | A callback function to format subtitle. It returns a string or an array of string. 142 | subtitleColor | `string` | `'#A9A9A9'` | Font color of subtitle 143 | subtitleFontSize | `string` | `'10'` | Font size of subtitle 144 | subtitleFontWeight | `string` | `'100'` | Font weight of subtitle 145 | imageSrc | `string` | `'/assets/images/music.svg'` | Src of image 146 | imageHeight | `number` | `80` | Height of image 147 | imageWidth | `number` | `80` | Width of image 148 | animation | `boolean` | `true` | Whether to animate the outer circle when rendering 149 | animateTitle | `boolean` | `true` | Whether to animate the title when rendering 150 | animateSubtitle | `boolean` | `false` | Whether to animate the subtitle when rendering 151 | animationDuration | `number` | `500` | Duration of animation in microseconds 152 | class | `string` | `''` | CSS class name for SVG element 153 | lazy | `boolean` | `false` | Pauses when out of viewport 154 | 155 | 156 | ```typescript 157 | // subtitleFormat callback example 158 | formatSubtitle = (percent: number) : string => { 159 | if(percent >= 100){ 160 | return "Congratulations!" 161 | }else if(percent >= 50){ 162 | return "Half" 163 | }else if(percent > 0){ 164 | return "Just began" 165 | }else { 166 | return "Not started" 167 | } 168 | } 169 | 170 | ``` 171 | 172 | ## License 173 | 174 | MIT © [bootsoon](mailto:bootsoon@aliyun.com) 175 | 176 | This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.3. 177 | 178 | ## Code scaffolding 179 | 180 | Run `ng generate component component-name --project ng-circle-progress` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-circle-progress`. 181 | > Note: Don't forget to add `--project ng-circle-progress` or else it will be added to the default project in your `angular.json` file. 182 | 183 | ## Build 184 | 185 | Run `ng build ng-circle-progress -c production` to build the project. The build artifacts will be stored in the `dist/` directory. 186 | 187 | ## Publishing 188 | 189 | After building your library with `ng build ng-circle-progress -c production`, go to the dist folder `cd dist/ng-circle-progress` and run `npm publish`. 190 | 191 | ## Running unit tests 192 | 193 | Run `ng test ng-circle-progress` to execute the unit tests via [Karma](https://karma-runner.github.io). 194 | 195 | ## Further help 196 | 197 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 198 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

NgCircleProgress Demo

4 |

A simple circle progress component created for Angular based on SVG Graphics.

5 | View on GitHub 6 |
7 |
8 | 9 |
10 |
11 |
12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 |
27 |
28 | 29 |
30 | 31 |
32 | 33 |
34 |
35 | ng circle progress 36 |
37 |
38 |
39 | 63 | 64 |
65 |
66 |
67 | Stop 68 | Start 70 | Reset 71 |
72 |
73 |
74 | 75 |
76 | 77 | 86 | 87 |
88 |
90 |
91 |
92 | 93 |
94 |
95 | 97 | 100 |
101 |
102 |
103 |
104 | 107 |
108 |
109 | 112 |
113 |
114 |
115 |
116 | 120 |
121 |
122 | 125 |
126 |
127 |
128 |
129 | 131 |
132 |
133 | 136 |
137 |
138 |
139 |
140 | 143 |
144 |
145 | 148 |
149 |
150 | 151 |
152 |
153 |
154 | 155 |
156 |
157 |
158 | 
{{sourceCode}}
159 |
160 |
161 |
162 | 163 |
164 | 165 |
166 | 167 |
168 | 169 |
-------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild } from '@angular/core'; 2 | import { CircleProgressComponent, CircleProgressOptions } from 'ng-circle-progress'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent { 10 | 11 | @ViewChild('circleProgress') circleProgress: CircleProgressComponent; 12 | 13 | githubLink = "https://github.com/bootsoon/ng-circle-progress"; 14 | 15 | _timer = null; 16 | 17 | controlGroups = [ 18 | { 19 | groupName: 'Basic', controls: [ 20 | { name: 'percent', type: 'range', min: 1, max: 1000, step: 0.01 }, 21 | { name: 'maxPercent', type: 'range', min: 50, max: 1000, step: 10 }, 22 | { name: 'toFixed', type: 'range', min: 0, max: 5, step: 1 }, 23 | { name: 'showTitle', type: 'checkbox' }, 24 | { name: 'showUnits', type: 'checkbox' }, 25 | { name: 'showSubtitle', type: 'checkbox' }, 26 | { name: 'showBackground', type: 'checkbox' }, 27 | { name: 'showInnerStroke', type: 'checkbox' }, 28 | { name: 'clockwise', type: 'checkbox' }, 29 | { name: 'responsive', type: 'checkbox' }, 30 | { name: 'startFromZero', type: 'checkbox' }, 31 | { name: 'showZeroOuterStroke', type: 'checkbox' }, 32 | ] 33 | }, 34 | { 35 | groupName: 'Size', controls: [ 36 | { name: 'radius', type: 'range', min: 20, max: 250, step: 1 }, 37 | { name: 'backgroundPadding', type: 'range', min: -50, max: 50, step: 1 }, 38 | ], 39 | }, 40 | { 41 | groupName: 'Color', controls: [ 42 | { name: 'backgroundGradient', type: 'checkbox' }, 43 | { name: 'backgroundOpacity', type: 'range', min: 0, max: 1, step: 0.1 }, 44 | { name: 'backgroundColor', type: 'color' }, 45 | { name: 'backgroundGradientStopColor', type: 'color' }, 46 | { name: 'backgroundStroke', type: 'color' }, 47 | { name: 'outerStrokeGradient', type: 'checkbox' }, 48 | { name: 'outerStrokeColor', type: 'color' }, 49 | { name: 'outerStrokeGradientStopColor', type: 'color' }, 50 | { name: 'innerStrokeColor', type: 'color' }, 51 | { name: 'titleColor', type: 'color' }, 52 | { name: 'unitsColor', type: 'color' }, 53 | { name: 'subtitleColor', type: 'color' }, 54 | ], 55 | }, 56 | { 57 | groupName: 'Stroke', controls: [ 58 | { name: 'outerStrokeWidth', type: 'range', min: 1, max: 50, step: 1 }, 59 | { name: 'space', type: 'range', min: -20, max: 50, step: 1 }, 60 | { name: 'innerStrokeWidth', type: 'range', min: 0, max: 50, step: 1 }, 61 | { name: 'backgroundStrokeWidth', type: 'range', min: 0, max: 50, step: 1 }, 62 | { name: 'outerStrokeLinecap', type: 'select', options: ['butt', 'round', 'square', 'inherit'] }, 63 | ], 64 | }, 65 | { 66 | groupName: 'Font', controls: [ 67 | { name: 'titleFontSize', type: 'range', min: 10, max: 100, step: 1 }, 68 | { name: 'unitsFontSize', type: 'range', min: 10, max: 100, step: 1 }, 69 | { name: 'subtitleFontSize', type: 'range', min: 10, max: 100, step: 1 }, 70 | { name: 'titleFontWeight', type: 'range', min: 100, max: 900, step: 100 }, 71 | { name: 'unitsFontWeight', type: 'range', min: 100, max: 900, step: 100 }, 72 | { name: 'subtitleFontWeight', type: 'range', min: 100, max: 900, step: 100 }, 73 | ] 74 | }, 75 | { 76 | groupName: 'Image', controls: [ 77 | { name: 'showImage', type: 'checkbox' }, 78 | { name: 'imageHeight', type: 'range', min: 20, max: 250, step: 1 }, 79 | { name: 'imageWidth', type: 'range', min: 20, max: 250, step: 1 }, 80 | ] 81 | }, 82 | { 83 | groupName: 'Animation', controls: [ 84 | { name: 'animation', type: 'checkbox' }, 85 | { name: 'animateTitle', type: 'checkbox' }, 86 | { name: 'lazy', type: 'checkbox' }, 87 | { name: 'animationDuration', type: 'range', min: 0, max: 10000, step: 100 }, 88 | ] 89 | }, 90 | ] 91 | 92 | options = new CircleProgressOptions(); 93 | 94 | ngCircleOptions = { 95 | percent: 85, 96 | radius: 60, 97 | showBackground: false, 98 | outerStrokeWidth: 10, 99 | innerStrokeWidth: 5, 100 | startFromZero: false, 101 | outerStrokeColor: null, 102 | showSubtitle: false, 103 | subtitleFormat: (percent: number): string => { 104 | if (percent < 25) { 105 | this.ngCircleOptions.outerStrokeColor = "red"; 106 | } else if (percent < 50) { 107 | this.ngCircleOptions.outerStrokeColor = "yellow"; 108 | } else if (percent < 75) { 109 | this.ngCircleOptions.outerStrokeColor = "blue"; 110 | } else { 111 | this.ngCircleOptions.outerStrokeColor = "green"; 112 | } 113 | return ''; 114 | } 115 | } 116 | 117 | optionsA = { 118 | percent: 85, 119 | radius: 60, 120 | showBackground: false, 121 | outerStrokeWidth: 10, 122 | innerStrokeWidth: 5, 123 | subtitleFormat: false, // clear subtitleFormat coming from other options, because Angular does not assign if variable is undefined. 124 | startFromZero: false, 125 | } 126 | 127 | optionsB = { 128 | percent: 50, 129 | maxPercent: 200, 130 | radius: 60, 131 | showSubtitle: false, 132 | showInnerStroke: false, 133 | outerStrokeWidth: 5, 134 | outerStrokeColor: '#FFFFFF', 135 | innerStrokeColor: '#FFFFFF', 136 | backgroundColor: '#FDB900', 137 | backgroundStrokeWidth: 0, 138 | backgroundPadding: 5, 139 | titleColor: '#483500', 140 | units: ' Point', 141 | unitsColor: '#483500', 142 | subtitleColor: '#483500', 143 | subtitleFormat: false, // clear subtitleFormat coming from other options, because Angular does not assign if variable is undefined. 144 | startFromZero: false, 145 | } 146 | 147 | optionsC = { 148 | percent: 99.99, 149 | radius: 60, 150 | outerStrokeWidth: 10, 151 | innerStrokeWidth: 1, 152 | backgroundColor: '#F1F1F1', 153 | backgroundPadding: -18, 154 | backgroundStrokeWidth: 0, 155 | innerStrokeColor: '#32CD32', 156 | outerStrokeColor: '#FF6347', 157 | toFixed: 2, 158 | subtitleFormat: false, // clear subtitleFormat coming from other options, because Angular does not assign if variable is undefined. 159 | startFromZero: false, 160 | } 161 | 162 | optionsD = { 163 | percent: 101, 164 | maxPercent: 100, 165 | radius: 60, 166 | showInnerStroke: false, 167 | outerStrokeWidth: 10, 168 | innerStrokeWidth: 0, 169 | backgroundPadding: -10, 170 | backgroundStrokeWidth: 0, 171 | outerStrokeColor: '#61A9DC', 172 | backgroundColor: '#ffffff', 173 | backgroundGradientStopColor: '#c0c0c0', 174 | backgroundGradient: true, 175 | subtitleColor: '#444444', 176 | startFromZero: false, 177 | subtitleFormat: (percent: number): string => { 178 | if (percent >= 100) { 179 | return "Congratulations!" 180 | } else { 181 | return "Progress" 182 | } 183 | } 184 | } 185 | 186 | optionsE = { 187 | percent: 75, 188 | radius: 60, 189 | outerStrokeWidth: 10, 190 | innerStrokeWidth: 10, 191 | space: -10, 192 | outerStrokeColor: "#4882c2", 193 | innerStrokeColor: "#e7e8ea", 194 | showBackground: false, 195 | title: 'UI', 196 | animateTitle: false, 197 | showUnits: false, 198 | clockwise: false, 199 | animationDuration: 1000, 200 | startFromZero: false, 201 | outerStrokeGradient: true, 202 | outerStrokeGradientStopColor: '#53a9ff', 203 | lazy: true, 204 | subtitleFormat: (percent: number): string => { 205 | return `${percent}%`; 206 | } 207 | } 208 | 209 | optionsF = { 210 | percent: 60, 211 | radius: 60, 212 | backgroundPadding: 7, 213 | outerStrokeWidth: 2, 214 | innerStrokeWidth: 2, 215 | space: -2, 216 | outerStrokeColor: "#808080", 217 | innerStrokeColor: "#e7e8ea", 218 | showBackground: true, 219 | title: ['working', 'in', 'progress'], 220 | titleFontSize: 12, 221 | subtitleFontSize: 20, 222 | animateTitle: false, 223 | showUnits: false, 224 | clockwise: false, 225 | animationDuration: 1000, 226 | subtitleFormat: (percent: number): string => { 227 | return `${percent}%`; 228 | } 229 | } 230 | 231 | optionsG = { 232 | percent: 75, 233 | radius: 60, 234 | outerStrokeWidth: 5, 235 | innerStrokeWidth: 5, 236 | space: -5, 237 | outerStrokeColor: "#76C2AF", 238 | innerStrokeColor: "#ffffff", 239 | showBackground: false, 240 | showImage: true, 241 | imageSrc: "assets/images/music.svg", 242 | imageHeight: 105, 243 | imageWidth: 105, 244 | } 245 | 246 | onValueChanged = (event) => { 247 | try { 248 | if (event.srcElement.name === 'toFixed') { 249 | let toFixed = +event.srcElement.value; 250 | this.controlGroups[0].controls[0]['step'] = 1 / Math.pow(10, toFixed); 251 | } 252 | } catch (e) { 253 | console.error(e) 254 | } 255 | } 256 | 257 | copyOptions = (event, options) => { 258 | this.options = Object.assign({}, this.circleProgress.defaultOptions, options); 259 | } 260 | 261 | resetOptions = () => { 262 | this.stop(); 263 | this.options = new CircleProgressOptions(); 264 | } 265 | 266 | start = () => { 267 | if (this._timer !== null) { 268 | clearInterval(this._timer); 269 | } 270 | this._timer = window.setInterval(() => { 271 | this.options.percent = (Math.round(Math.random() * 100)); 272 | }, 1000); 273 | } 274 | 275 | stop = () => { 276 | if (this._timer !== null) { 277 | clearInterval(this._timer); 278 | this._timer = null; 279 | } 280 | } 281 | 282 | destroyed: Boolean = false; 283 | 284 | toggleDestroyed = () => { 285 | this.destroyed = !this.destroyed; 286 | } 287 | 288 | getConfiguration = () => { 289 | // Didn't find a better way to fix "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked." 290 | return {}; 291 | } 292 | 293 | ngAfterViewInit() { 294 | // Didn't find a better way to fix "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked." 295 | this.getConfiguration = () => { 296 | let configurations = Object.assign({}, this.options); 297 | delete configurations['percent']; 298 | delete configurations['subtitleFormat']; 299 | for (let key of Object.keys(configurations)) { 300 | if (configurations[key] === this.circleProgress.defaultOptions[key]) { 301 | delete configurations[key]; 302 | } 303 | } 304 | return configurations; 305 | }; 306 | } 307 | 308 | public get sourceCode() { 309 | let json = JSON.stringify(this.getConfiguration(), null, 16).replace(/\n}/g, '}'); 310 | 311 | let code = ` 312 | import { NgCircleProgressModule } from 'ng-circle-progress'; 313 | 314 | @NgModule({ 315 | //... 316 | imports: [ 317 | //... 318 | NgCircleProgressModule.forRoot(${json}) 319 | ], 320 | //... 321 | }) 322 | export class AppModule {} 323 | `.replace(/\n[ ]{4}/g, '\n'); 324 | return code; 325 | } 326 | 327 | 328 | } 329 | -------------------------------------------------------------------------------- /projects/ng-circle-progress/src/lib/ng-circle-progress.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, Input, OnChanges, Output, OnInit, OnDestroy, ElementRef, SimpleChanges, NgZone, Injector } from '@angular/core'; 2 | import { DOCUMENT } from '@angular/common'; 3 | import { Subscription, timer } from 'rxjs'; 4 | 5 | export interface CircleProgressOptionsInterface { 6 | class?: string; 7 | backgroundGradient?: boolean; 8 | backgroundColor?: string; 9 | backgroundGradientStopColor?: string; 10 | backgroundOpacity?: number; 11 | backgroundStroke?: string; 12 | backgroundStrokeWidth?: number; 13 | backgroundPadding?: number; 14 | percent?: number; 15 | radius?: number; 16 | space?: number; 17 | toFixed?: number; 18 | maxPercent?: number; 19 | renderOnClick?: boolean; 20 | units?: string; 21 | unitsFontSize?: string; 22 | unitsFontWeight?: string; 23 | unitsColor?: string; 24 | outerStrokeGradient?: boolean; 25 | outerStrokeWidth?: number; 26 | outerStrokeColor?: string; 27 | outerStrokeGradientStopColor?: string; 28 | outerStrokeLinecap?: string; 29 | innerStrokeColor?: string; 30 | innerStrokeWidth?: number; 31 | titleFormat?: Function; 32 | title?: string | Array; 33 | titleColor?: string; 34 | titleFontSize?: string; 35 | titleFontWeight?: string; 36 | subtitleFormat?: Function; 37 | subtitle?: string | Array; 38 | subtitleColor?: string; 39 | subtitleFontSize?: string; 40 | subtitleFontWeight?: string; 41 | imageSrc?: string; 42 | imageHeight?: number; 43 | imageWidth?: number; 44 | animation?: boolean; 45 | animateTitle?: boolean; 46 | animateSubtitle?: boolean; 47 | animationDuration?: number; 48 | showTitle?: boolean; 49 | showSubtitle?: boolean; 50 | showUnits?: boolean; 51 | showImage?: boolean; 52 | showBackground?: boolean; 53 | showInnerStroke?: boolean; 54 | clockwise?: boolean; 55 | responsive?: boolean; 56 | startFromZero?: boolean; 57 | showZeroOuterStroke?: boolean; 58 | lazy?: boolean; 59 | } 60 | 61 | export class CircleProgressOptions implements CircleProgressOptionsInterface { 62 | class = ''; 63 | backgroundGradient = false; 64 | backgroundColor = 'transparent'; 65 | backgroundGradientStopColor = 'transparent'; 66 | backgroundOpacity = 1; 67 | backgroundStroke = 'transparent'; 68 | backgroundStrokeWidth = 0; 69 | backgroundPadding = 5; 70 | percent = 0; 71 | radius = 90; 72 | space = 4; 73 | toFixed = 0; 74 | maxPercent = 1000; 75 | renderOnClick = true; 76 | units = '%'; 77 | unitsFontSize = '10'; 78 | unitsFontWeight = 'normal'; 79 | unitsColor = '#444444'; 80 | outerStrokeGradient = false; 81 | outerStrokeWidth = 8; 82 | outerStrokeColor = '#78C000'; 83 | outerStrokeGradientStopColor = 'transparent'; 84 | outerStrokeLinecap = 'round'; 85 | innerStrokeColor = '#C7E596'; 86 | innerStrokeWidth = 4; 87 | titleFormat = undefined; 88 | title: string | Array = 'auto'; 89 | titleColor = '#444444'; 90 | titleFontSize = '20'; 91 | titleFontWeight = 'normal'; 92 | subtitleFormat = undefined; 93 | subtitle: string | Array = 'progress'; 94 | subtitleColor = '#A9A9A9'; 95 | subtitleFontSize = '10'; 96 | subtitleFontWeight = 'normal'; 97 | imageSrc = undefined; 98 | imageHeight = 0; 99 | imageWidth = 0; 100 | animation = true; 101 | animateTitle = true; 102 | animateSubtitle = false; 103 | animationDuration = 500; 104 | showTitle = true; 105 | showSubtitle = true; 106 | showUnits = true; 107 | showImage = false; 108 | showBackground = true; 109 | showInnerStroke = true; 110 | clockwise = true; 111 | responsive = false; 112 | startFromZero = true; 113 | showZeroOuterStroke = true; 114 | lazy = false; 115 | } 116 | 117 | @Component({ 118 | selector: 'circle-progress', 119 | template: ` 120 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 142 | 150 | 151 | 158 | 159 | 165 | 171 | 172 | 177 | 178 | {{tspan.span}} 185 | 186 | {{svg.units.text}} 190 | 191 | {{tspan.span}} 198 | 199 | 200 | 207 | 208 | ` 209 | }) 210 | export class CircleProgressComponent implements OnChanges, OnInit, OnDestroy { 211 | 212 | @Output() onClick = new EventEmitter(); 213 | 214 | @Input() name: string; 215 | @Input() class: string; 216 | @Input() backgroundGradient: boolean; 217 | @Input() backgroundColor: string; 218 | @Input() backgroundGradientStopColor: String; 219 | @Input() backgroundOpacity: number; 220 | @Input() backgroundStroke: string; 221 | @Input() backgroundStrokeWidth: number; 222 | @Input() backgroundPadding: number; 223 | 224 | @Input() radius: number; 225 | @Input() space: number; 226 | @Input() percent: number; 227 | @Input() toFixed: number; 228 | @Input() maxPercent: number; 229 | @Input() renderOnClick: boolean; 230 | 231 | @Input() units: string; 232 | @Input() unitsFontSize: string; 233 | @Input() unitsFontWeight: string; 234 | @Input() unitsColor: string; 235 | 236 | @Input() outerStrokeGradient: boolean; 237 | @Input() outerStrokeWidth: number; 238 | @Input() outerStrokeColor: string; 239 | @Input() outerStrokeGradientStopColor: String; 240 | @Input() outerStrokeLinecap: string; 241 | 242 | @Input() innerStrokeColor: string; 243 | @Input() innerStrokeWidth: string | number; 244 | 245 | @Input() titleFormat: Function; 246 | @Input() title: string | Array; 247 | @Input() titleColor: string; 248 | @Input() titleFontSize: string; 249 | @Input() titleFontWeight: string; 250 | 251 | @Input() subtitleFormat: Function; 252 | @Input() subtitle: string | string[]; 253 | @Input() subtitleColor: string; 254 | @Input() subtitleFontSize: string; 255 | @Input() subtitleFontWeight: string; 256 | 257 | @Input() imageSrc: string; 258 | @Input() imageHeight: number; 259 | @Input() imageWidth: number; 260 | 261 | @Input() animation: boolean; 262 | @Input() animateTitle: boolean; 263 | @Input() animateSubtitle: boolean; 264 | @Input() animationDuration: number; 265 | 266 | @Input() showTitle: boolean; 267 | @Input() showSubtitle: boolean; 268 | @Input() showUnits: boolean; 269 | @Input() showImage: boolean; 270 | @Input() showBackground: boolean; 271 | @Input() showInnerStroke: boolean; 272 | @Input() clockwise: boolean; 273 | @Input() responsive: boolean; 274 | @Input() startFromZero: boolean; 275 | @Input() showZeroOuterStroke: boolean; 276 | 277 | @Input() lazy: boolean; 278 | 279 | @Input('options') templateOptions: CircleProgressOptions; 280 | 281 | // of component 282 | svgElement: HTMLElement = null; 283 | // whether is in viewport 284 | isInViewport: Boolean = false; 285 | // event for notifying viewport change caused by scrolling or resizing 286 | onViewportChanged: EventEmitter<{ oldValue: Boolean, newValue: Boolean }> = new EventEmitter(); 287 | window: Window; 288 | _viewportChangedSubscriber: Subscription = null; 289 | 290 | svg: any; 291 | 292 | options: CircleProgressOptions = new CircleProgressOptions(); 293 | defaultOptions: CircleProgressOptions = new CircleProgressOptions(); 294 | _lastPercent: number = 0; 295 | _gradientUUID: string = null; 296 | render = () => { 297 | 298 | this.applyOptions(); 299 | 300 | if (this.options.lazy) { 301 | // Draw svg if it doesn't exist 302 | this.svgElement === null && this.draw(this._lastPercent); 303 | // Draw it only when it's in the viewport 304 | if (this.isInViewport) { 305 | // Draw it at the latest position when I am in. 306 | if (this.options.animation && this.options.animationDuration > 0) { 307 | this.animate(this._lastPercent, this.options.percent); 308 | } else { 309 | this.draw(this.options.percent); 310 | } 311 | this._lastPercent = this.options.percent; 312 | } 313 | } else { 314 | if (this.options.animation && this.options.animationDuration > 0) { 315 | this.animate(this._lastPercent, this.options.percent); 316 | } else { 317 | this.draw(this.options.percent); 318 | } 319 | this._lastPercent = this.options.percent; 320 | } 321 | }; 322 | polarToCartesian = (centerX: number, centerY: number, radius: number, angleInDegrees: number) => { 323 | let angleInRadius = angleInDegrees * Math.PI / 180; 324 | let x = centerX + Math.sin(angleInRadius) * radius; 325 | let y = centerY - Math.cos(angleInRadius) * radius; 326 | return { x: x, y: y }; 327 | }; 328 | draw = (percent: number) => { 329 | // make percent reasonable 330 | percent = (percent === undefined) ? this.options.percent : Math.abs(percent); 331 | // circle percent shouldn't be greater than 100%. 332 | let circlePercent = (percent > 100) ? 100 : percent; 333 | // determine box size 334 | let boxSize = this.options.radius * 2 + this.options.outerStrokeWidth * 2; 335 | if (this.options.showBackground) { 336 | boxSize += (this.options.backgroundStrokeWidth * 2 + this.max(0, this.options.backgroundPadding * 2)); 337 | } 338 | // the centre of the circle 339 | let centre = { x: boxSize / 2, y: boxSize / 2 }; 340 | // the start point of the arc 341 | let startPoint = { x: centre.x, y: centre.y - this.options.radius }; 342 | // get the end point of the arc 343 | let endPoint = this.polarToCartesian(centre.x, centre.y, this.options.radius, 360 * (this.options.clockwise ? 344 | circlePercent : 345 | (100 - circlePercent)) / 100); // #################### 346 | // We'll get an end point with the same [x, y] as the start point when percent is 100%, so move x a little bit. 347 | if (circlePercent === 100) { 348 | endPoint.x = endPoint.x + (this.options.clockwise ? -0.01 : +0.01); 349 | } 350 | // largeArcFlag and sweepFlag 351 | let largeArcFlag: any, sweepFlag: any; 352 | if (circlePercent > 50) { 353 | [largeArcFlag, sweepFlag] = this.options.clockwise ? [1, 1] : [1, 0]; 354 | } else { 355 | [largeArcFlag, sweepFlag] = this.options.clockwise ? [0, 1] : [0, 0]; 356 | } 357 | // percent may not equal the actual percent 358 | let titlePercent = this.options.animateTitle ? percent : this.options.percent; 359 | let titleTextPercent = titlePercent > this.options.maxPercent ? 360 | `${this.options.maxPercent.toFixed(this.options.toFixed)}+` : titlePercent.toFixed(this.options.toFixed); 361 | let subtitlePercent = this.options.animateSubtitle ? percent : this.options.percent; 362 | // get title object 363 | let title = { 364 | x: centre.x, 365 | y: centre.y, 366 | textAnchor: 'middle', 367 | color: this.options.titleColor, 368 | fontSize: this.options.titleFontSize, 369 | fontWeight: this.options.titleFontWeight, 370 | texts: [], 371 | tspans: [] 372 | }; 373 | // from v0.9.9, both title and titleFormat(...) may be an array of string. 374 | if (this.options.titleFormat !== undefined && this.options.titleFormat.constructor.name === 'Function') { 375 | let formatted = this.options.titleFormat(titlePercent); 376 | if (formatted instanceof Array) { 377 | title.texts = [...formatted]; 378 | } else { 379 | title.texts.push(formatted.toString()); 380 | } 381 | } else { 382 | if (this.options.title === 'auto') { 383 | title.texts.push(titleTextPercent); 384 | } else { 385 | if (this.options.title instanceof Array) { 386 | title.texts = [...this.options.title] 387 | } else { 388 | title.texts.push(this.options.title.toString()); 389 | } 390 | } 391 | } 392 | // get subtitle object 393 | let subtitle = { 394 | x: centre.x, 395 | y: centre.y, 396 | textAnchor: 'middle', 397 | color: this.options.subtitleColor, 398 | fontSize: this.options.subtitleFontSize, 399 | fontWeight: this.options.subtitleFontWeight, 400 | texts: [], 401 | tspans: [] 402 | } 403 | // from v0.9.9, both subtitle and subtitleFormat(...) may be an array of string. 404 | if (this.options.subtitleFormat !== undefined && this.options.subtitleFormat.constructor.name === 'Function') { 405 | let formatted = this.options.subtitleFormat(subtitlePercent); 406 | if (formatted instanceof Array) { 407 | subtitle.texts = [...formatted]; 408 | } else { 409 | subtitle.texts.push(formatted.toString()); 410 | } 411 | } else { 412 | if (this.options.subtitle instanceof Array) { 413 | subtitle.texts = [...this.options.subtitle] 414 | } else { 415 | subtitle.texts.push(this.options.subtitle.toString()); 416 | } 417 | } 418 | // get units object 419 | let units = { 420 | text: `${this.options.units}`, 421 | fontSize: this.options.unitsFontSize, 422 | fontWeight: this.options.unitsFontWeight, 423 | color: this.options.unitsColor 424 | }; 425 | // get total count of text lines to be shown 426 | let rowCount = 0, rowNum = 1; 427 | this.options.showTitle && (rowCount += title.texts.length); 428 | this.options.showSubtitle && (rowCount += subtitle.texts.length); 429 | // calc dy for each tspan for title 430 | if (this.options.showTitle) { 431 | for (let span of title.texts) { 432 | title.tspans.push({ span: span, dy: this.getRelativeY(rowNum, rowCount) }); 433 | rowNum++; 434 | } 435 | } 436 | // calc dy for each tspan for subtitle 437 | if (this.options.showSubtitle) { 438 | for (let span of subtitle.texts) { 439 | subtitle.tspans.push({ span: span, dy: this.getRelativeY(rowNum, rowCount) }) 440 | rowNum++; 441 | } 442 | } 443 | // create ID for gradient element 444 | if (null === this._gradientUUID) { 445 | this._gradientUUID = this.uuid(); 446 | } 447 | // Bring it all together 448 | this.svg = { 449 | viewBox: `0 0 ${boxSize} ${boxSize}`, 450 | // Set both width and height to '100%' if it's responsive 451 | width: this.options.responsive ? '100%' : boxSize, 452 | height: this.options.responsive ? '100%' : boxSize, 453 | backgroundCircle: { 454 | cx: centre.x, 455 | cy: centre.y, 456 | r: this.options.radius + this.options.outerStrokeWidth / 2 + this.options.backgroundPadding, 457 | fill: this.options.backgroundColor, 458 | fillOpacity: this.options.backgroundOpacity, 459 | stroke: this.options.backgroundStroke, 460 | strokeWidth: this.options.backgroundStrokeWidth, 461 | }, 462 | path: { 463 | // A rx ry x-axis-rotation large-arc-flag sweep-flag x y (https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths#Arcs) 464 | d: `M ${startPoint.x} ${startPoint.y} 465 | A ${this.options.radius} ${this.options.radius} 0 ${largeArcFlag} ${sweepFlag} ${endPoint.x} ${endPoint.y}`, 466 | stroke: this.options.outerStrokeColor, 467 | strokeWidth: this.options.outerStrokeWidth, 468 | strokeLinecap: this.options.outerStrokeLinecap, 469 | fill: 'none' 470 | }, 471 | circle: { 472 | cx: centre.x, 473 | cy: centre.y, 474 | r: this.options.radius - this.options.space - this.options.outerStrokeWidth / 2 - this.options.innerStrokeWidth / 2, 475 | fill: 'none', 476 | stroke: this.options.innerStrokeColor, 477 | strokeWidth: this.options.innerStrokeWidth, 478 | }, 479 | title: title, 480 | units: units, 481 | subtitle: subtitle, 482 | image: { 483 | x: centre.x - this.options.imageWidth / 2, 484 | y: centre.y - this.options.imageHeight / 2, 485 | src: this.options.imageSrc, 486 | width: this.options.imageWidth, 487 | height: this.options.imageHeight, 488 | }, 489 | outerLinearGradient: { 490 | id: 'outer-linear-' + this._gradientUUID, 491 | colorStop1: this.options.outerStrokeColor, 492 | colorStop2: this.options.outerStrokeGradientStopColor === 'transparent' ? '#FFF' : this.options.outerStrokeGradientStopColor, 493 | }, 494 | radialGradient: { 495 | id: 'radial-' + this._gradientUUID, 496 | colorStop1: this.options.backgroundColor, 497 | colorStop2: this.options.backgroundGradientStopColor === 'transparent' ? '#FFF' : this.options.backgroundGradientStopColor, 498 | } 499 | }; 500 | }; 501 | getAnimationParameters = (previousPercent: number, currentPercent: number) => { 502 | const MIN_INTERVAL = 10; 503 | let times: number, step: number, interval: number; 504 | let fromPercent = this.options.startFromZero ? 0 : (previousPercent < 0 ? 0 : previousPercent); 505 | let toPercent = currentPercent < 0 ? 0 : this.min(currentPercent, this.options.maxPercent); 506 | let delta = Math.abs(Math.round(toPercent - fromPercent)); 507 | 508 | if (delta >= 100) { 509 | // we will finish animation in 100 times 510 | times = 100; 511 | if (!this.options.animateTitle && !this.options.animateSubtitle) { 512 | step = 1; 513 | } else { 514 | // show title or subtitle animation even if the arc is full, we also need to finish it in 100 times. 515 | step = Math.round(delta / times); 516 | } 517 | } else { 518 | // we will finish in as many times as the number of percent. 519 | times = delta; 520 | step = 1; 521 | } 522 | // Get the interval of timer 523 | interval = Math.round(this.options.animationDuration / times); 524 | // Readjust all values if the interval of timer is extremely small. 525 | if (interval < MIN_INTERVAL) { 526 | interval = MIN_INTERVAL; 527 | times = this.options.animationDuration / interval; 528 | if (!this.options.animateTitle && !this.options.animateSubtitle && delta > 100) { 529 | step = Math.round(100 / times); 530 | } else { 531 | step = Math.round(delta / times); 532 | } 533 | } 534 | // step must be greater than 0. 535 | if (step < 1) { 536 | step = 1; 537 | } 538 | return { times: times, step: step, interval: interval }; 539 | }; 540 | animate = (previousPercent: number, currentPercent: number) => { 541 | if (this._timerSubscription && !this._timerSubscription.closed) { 542 | this._timerSubscription.unsubscribe(); 543 | } 544 | let fromPercent = this.options.startFromZero ? 0 : previousPercent; 545 | let toPercent = currentPercent; 546 | let { step: step, interval: interval } = this.getAnimationParameters(fromPercent, toPercent); 547 | let count = fromPercent; 548 | if (fromPercent < toPercent) { 549 | this._timerSubscription = timer(0, interval).subscribe(() => { 550 | count += step; 551 | if (count <= toPercent) { 552 | if (!this.options.animateTitle && !this.options.animateSubtitle && count >= 100) { 553 | this.draw(toPercent); 554 | this._timerSubscription.unsubscribe(); 555 | } else { 556 | this.draw(count); 557 | } 558 | } else { 559 | this.draw(toPercent); 560 | this._timerSubscription.unsubscribe(); 561 | } 562 | }); 563 | } else { 564 | this._timerSubscription = timer(0, interval).subscribe(() => { 565 | count -= step; 566 | if (count >= toPercent) { 567 | if (!this.options.animateTitle && !this.options.animateSubtitle && toPercent >= 100) { 568 | this.draw(toPercent); 569 | this._timerSubscription.unsubscribe(); 570 | } else { 571 | this.draw(count); 572 | } 573 | } else { 574 | this.draw(toPercent); 575 | this._timerSubscription.unsubscribe(); 576 | } 577 | }); 578 | } 579 | }; 580 | emitClickEvent(event: MouseEvent): void { 581 | if (this.options.renderOnClick) { 582 | this.animate(0, this.options.percent); 583 | } 584 | if (this.onClick.observers.length > 0) { 585 | this.onClick.emit(event); 586 | } 587 | } 588 | private _timerSubscription: Subscription; 589 | private applyOptions = () => { 590 | // the options of may change already 591 | for (let name of Object.keys(this.options)) { 592 | if (this.hasOwnProperty(name) && this[name] !== undefined) { 593 | this.options[name] = this[name]; 594 | } else if (this.templateOptions && this.templateOptions[name] !== undefined) { 595 | this.options[name] = this.templateOptions[name]; 596 | } 597 | } 598 | // make sure key options valid 599 | this.options.radius = Math.abs(+this.options.radius); 600 | this.options.space = +this.options.space; 601 | this.options.percent = +this.options.percent > 0 ? +this.options.percent : 0; 602 | this.options.maxPercent = Math.abs(+this.options.maxPercent); 603 | this.options.animationDuration = Math.abs(this.options.animationDuration); 604 | this.options.outerStrokeWidth = Math.abs(+this.options.outerStrokeWidth); 605 | this.options.innerStrokeWidth = Math.abs(+this.options.innerStrokeWidth); 606 | this.options.backgroundPadding = +this.options.backgroundPadding; 607 | }; 608 | private getRelativeY = (rowNum: number, rowCount: number): string => { 609 | // why '-0.18em'? It's a magic number when property 'alignment-baseline' equals 'baseline'. :) 610 | let initialOffset = -0.18, offset = 1; 611 | return (initialOffset + offset * (rowNum - rowCount / 2)).toFixed(2) + 'em'; 612 | }; 613 | 614 | private min = (a: number, b: number) => { 615 | return a < b ? a : b; 616 | }; 617 | 618 | private max = (a: number, b: number) => { 619 | return a > b ? a : b; 620 | }; 621 | 622 | private uuid = () => { 623 | // https://www.w3resource.com/javascript-exercises/javascript-math-exercise-23.php 624 | var dt = new Date().getTime(); 625 | var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { 626 | var r = (dt + Math.random() * 16) % 16 | 0; 627 | dt = Math.floor(dt / 16); 628 | return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); 629 | }); 630 | return uuid; 631 | } 632 | 633 | public isDrawing(): boolean { 634 | return (this._timerSubscription && !this._timerSubscription.closed); 635 | } 636 | 637 | public findSvgElement(): void { 638 | if (this.svgElement === null) { 639 | let tags = this.elRef.nativeElement.getElementsByTagName('svg'); 640 | if (tags.length > 0) { 641 | this.svgElement = tags[0]; 642 | } 643 | } 644 | } 645 | 646 | private isElementInViewport(el): Boolean { 647 | // Return false if el has not been created in page. 648 | if (el === null || el === undefined) return false; 649 | // Check if the element is out of view due to a container scrolling 650 | let rect = el.getBoundingClientRect(), parent = el.parentNode, parentRect; 651 | do { 652 | parentRect = parent.getBoundingClientRect(); 653 | if (rect.top >= parentRect.bottom) return false; 654 | if (rect.bottom <= parentRect.top) return false; 655 | if (rect.left >= parentRect.right) return false; 656 | if (rect.right <= parentRect.left) return false; 657 | parent = parent.parentNode; 658 | } while (parent != this.document.body); 659 | // Check its within the document viewport 660 | if (rect.top >= (this.window.innerHeight || this.document.documentElement.clientHeight)) return false; 661 | if (rect.bottom <= 0) return false; 662 | if (rect.left >= (this.window.innerWidth || this.document.documentElement.clientWidth)) return false; 663 | if (rect.right <= 0) return false; 664 | return true; 665 | } 666 | 667 | checkViewport = () => { 668 | this.findSvgElement(); 669 | let previousValue = this.isInViewport; 670 | this.isInViewport = this.isElementInViewport(this.svgElement); 671 | if (previousValue !== this.isInViewport && this.onViewportChanged.observers.length > 0) { 672 | this.ngZone.run(() => { 673 | this.onViewportChanged.emit({ oldValue: previousValue, newValue: this.isInViewport }); 674 | }); 675 | } 676 | } 677 | 678 | onScroll = (event: Event) => { 679 | this.checkViewport(); 680 | } 681 | 682 | loadEventsForLazyMode = () => { 683 | if (this.options.lazy) { 684 | this.ngZone.runOutsideAngular(() => { 685 | this.document.addEventListener('scroll', this.onScroll, true); 686 | this.window.addEventListener('resize', this.onScroll, true); 687 | }); 688 | if (this._viewportChangedSubscriber === null) { 689 | this._viewportChangedSubscriber = this.onViewportChanged.subscribe(({ oldValue, newValue }) => { 690 | newValue ? this.render() : null; 691 | }); 692 | } 693 | // svgElement must be created in DOM before being checked. 694 | // Is there a better way to check the existence of svgElemnt? 695 | let _timer = timer(0, 50).subscribe(() => { 696 | this.svgElement === null ? this.checkViewport() : _timer.unsubscribe(); 697 | }) 698 | } 699 | } 700 | 701 | unloadEventsForLazyMode = () => { 702 | // Remove event listeners 703 | this.document.removeEventListener('scroll', this.onScroll, true); 704 | this.window.removeEventListener('resize', this.onScroll, true); 705 | // Unsubscribe onViewportChanged 706 | if (this._viewportChangedSubscriber !== null) { 707 | this._viewportChangedSubscriber.unsubscribe(); 708 | this._viewportChangedSubscriber = null; 709 | } 710 | } 711 | 712 | ngOnInit() { 713 | this.loadEventsForLazyMode(); 714 | } 715 | 716 | ngOnDestroy() { 717 | this.unloadEventsForLazyMode(); 718 | } 719 | 720 | ngOnChanges(changes: SimpleChanges) { 721 | 722 | this.render(); 723 | 724 | if ('lazy' in changes) { 725 | changes.lazy.currentValue ? this.loadEventsForLazyMode() : this.unloadEventsForLazyMode(); 726 | } 727 | 728 | } 729 | 730 | private document: Document; 731 | 732 | constructor( 733 | defaultOptions: CircleProgressOptions, 734 | private ngZone: NgZone, 735 | private elRef: ElementRef, 736 | injector: Injector, 737 | ) { 738 | this.document = injector.get(DOCUMENT); 739 | this.window = this.document.defaultView; 740 | Object.assign(this.options, defaultOptions); 741 | Object.assign(this.defaultOptions, defaultOptions); 742 | } 743 | 744 | } 745 | --------------------------------------------------------------------------------