import { Component, ViewChild } from '@angular/core';
import {BlockUIModule, ChartModule } from 'primeng/primeng';
@Component({
selector: 'my-app',
templateUrl: 'app/app.template.html'
})
export class AppComponent {
@ViewChild('chart') chart: UIChart
// Doughnut
data: any;
readonly: boolean = true;
maxValue: number = 0;
title: string = "";
value: number = 0;
steps: number = 5;
defaultColor: string = "#36A2EB";
range1: number = 0;
rangeColor1: string = "#5fba7d";
range2: number = 0;
rangeColor2: string = "#FFCE56";
range3: number = 0;
rangeColor3: string = "#ff9800";
range4: number = 0;
rangeColor4: string = "#FF6384";
constructor() {
this.data = {
labels: [],
datasets: [
{
data: [0, 0],
backgroundColor: [
this.defaultColor,
"#ccc"
],
hoverBackgroundColor: [
this.defaultColor,
"#ccc"
]
}]
};
// Fake data here...
setTimeout(()=>{this.Init(300, 800, 300, 400, 500, 800), 5000});
}
public Init(value: number, maxValue: number, range1: number, range2: number, range3: number, range4: number){
this.value = value;
this.maxValue = maxValue;
this.range1 = range1;
this.range2 = range2;
this.range3 = range3;
this.range4 = range4;
this.data.datasets[0]['data'][0] = this.value;
this.data.datasets[0]['data'][1] = this.maxValue - this.value;
this.update(true);
}
get MaxValue(): number {
return this.maxValue;
}
set MaxValue(v: number) {
this.maxValue = v;
this.data.datasets[0]['data'][1] = this.maxValue - this.value;
this.update(false);
}
get Value(): number {
return this.value;
}
set Value(v: number) {
//debugger;
this.value = v;
this.data.datasets[0]['data'][0] = this.value;
this.update(false);
}
update(init: boolean) {
//debugger;
if(init){
this.chart.options.animation.duration = 2000;
}
else{
this.chart.options.animation.duration = 1;
}
if(this.value < this.range1){
this.data.datasets[0]['backgroundColor'][0] = this.rangeColor1;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.rangeColor1;
}
else if(this.value < this.range2){
this.data.datasets[0]['backgroundColor'][0] = this.rangeColor2;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.rangeColor2;
}
else if(this.value < this.range3){
this.data.datasets[0]['backgroundColor'][0] = this.rangeColor3;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.rangeColor3;
}
else if(this.value < this.range4){
this.data.datasets[0]['backgroundColor'][0] = this.rangeColor4;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.rangeColor4;
}
else{
this.data.datasets[0]['backgroundColor'][0] = this.defaultColor;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.defaultColor;
}
// just trying refresh full variable
this.data.datasets = this.data.datasets.slice();
this.chart.refresh();
}
test(): void {
debugger;
var test = this.chart;
var width = this.chart.width,
var height = this.chart.height;
var fontSize = (height / 180).toFixed(2);
this.chart.ctx.font = fontSize + "em Verdana";
this.chart.ctx.textBaseline = "middle";
var text = "value 1234156",
var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2);
var textY = (height + this.chart.controller.legend.height) / 2;
this.chart.ctx.fillText(text, textX, textY);
}
public colors:Array<any> = [
{
backgroundColor: ['rgba(255,55,0, 0.8)', 'lightgreen'],
borderColor: ['rgba(255,55,0, 0.8)', 'Transparent'],
pointBackgroundColor: 'rgba(148,159,255,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
private options = {
tooltipEvents: [],
cutoutPercentage: 90,
title: {
display: true,
text: this.title,
fontSize: 16
},
legend: {
position: 'bottom'
},
animation: {
duration: 2000,
onComplete: (animation) => {
//debugger;
var chartInstance = this.chart.chart.chart;
if(this.data.datasets[0]['data'][0] < this.range1){
this.data.datasets[0]['backgroundColor'][0] = this.rangeColor1;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.rangeColor1;
}
else if(this.data.datasets[0]['data'][0] < this.range2){
this.data.datasets[0]['backgroundColor'][0] = this.rangeColor2;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.rangeColor2;
}
else if(this.data.datasets[0]['data'][0] < this.range3){
this.data.datasets[0]['backgroundColor'][0] = this.rangeColor3;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.rangeColor3;
}
else if(this.data.datasets[0]['data'][0] < this.range4){
this.data.datasets[0]['backgroundColor'][0] = this.rangeColor4;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.rangeColor4;
}
else{
this.data.datasets[0]['backgroundColor'][0] = this.defaultColor;
this.data.datasets[0]['hoverBackgroundColor'][0] = this.defaultColor;
}
var width = chartInstance.width,
var height = chartInstance.height;
var fontSize = (height / 180).toFixed(2);
chartInstance.ctx.font = fontSize + "em Verdana";
chartInstance.ctx.textBaseline = "middle";
chartInstance.ctx.fillStyle = this.data.datasets[0]['backgroundColor'][0];
var text = "";
if(this.Value != 0 || this.MaxValue != 0){
text = this.Value + " %";
}
var textX = Math.round((width - chartInstance.ctx.measureText(text).width) / 2);
var textY = (height + chartInstance.controller.legend.height) / 2;
chartInstance.ctx.fillText(text, textX, textY);
}
},
hover:{
intersect: true,
animationDuration : 1,
onHover: function(x){
}
}
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// Import PrimeNG modules
import { ButtonModule, SliderModule, ChartModule } from 'primeng';
import {BlockUIModule} from 'primeng';
@NgModule({
imports: [ FormsModule, BrowserModule, ButtonModule, ChartModule, BlockUIModule, SliderModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
body {
padding: 2em;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- PrimeNG style dependencies -->
<link rel="stylesheet" href="https://unpkg.com/primeng@1.0.0/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/primeng@1.0.0/resources/primeng.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<!-- 1. Load libraries -->
<!-- Polyfill for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<style>
.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
</style>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.3/lib/typescript.js',
'primeng': 'npm:primeng@1.1.3/primeng.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
primeng: {
defaultExtension: 'js'
}
}
});
if (!global.noBootstrap) { bootstrap(); }
// Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
function bootstrap() {
console.log('Auto-bootstrapping');
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
getAppModule()
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function(err){ console.error(err); });
}
// Import AppModule or make the default AppModule if there isn't one
// returns a promise for the AppModule
function getAppModule() {
if (global.noAppModule) {
return makeAppModule();
}
return System.import('app/app.module').catch(makeAppModule)
}
function makeAppModule() {
console.log('No AppModule; making a bare-bones, default AppModule');
return Promise.all([
System.import('@angular/core'),
System.import('@angular/platform-browser'),
System.import('app/app.component')
])
.then(function (imports) {
var core = imports[0];
var browser = imports[1];
var appComp = imports[2].AppComponent;
var AppModule = function() {}
AppModule.annotations = [
new core.NgModule({
imports: [ browser.BrowserModule ],
declarations: [ appComp ],
bootstrap: [ appComp ]
})
]
return {AppModule: AppModule};
})
}
})(this);
<div class="unselectable" >
<div>
<p-chart #chart type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div styl="margin-top:10px" *ngIf="readonly" >
<p-slider [step]="steps" [(ngModel)]="Value" [animate]="true" [min]="0" [max]="MaxValue"></p-slider>
</div>
</div>
# PrimeNG Issue Template
Please create a test case and attach the link of the plunkr to your github issue report.