uv-charts-dashboard/src/app/components/pie-chart/pie-chart.ts

A dashboard for uvCharts examples

import { Component, Input, OnInit } from '@angular/core';
import { CommonService } from '../../shared/common.service';

@Component({
    selector: 'pie-chart',
    styleUrls: ['./pie-chart.css'],
    template: `<div id="pie-chart-div"></div>`
})

export class PieChartComponent implements OnInit {

    private uv: any;
    private data: any;
    private metaData: {};

    @Input() compress: boolean;

    constructor(commonService: CommonService) {
        this.uv = commonService.uv;
        this.data = commonService.getData();
    }

    ngOnInit() {
        this.makeChart();
    }

    makeChart() {
        this.metaData = {
            meta: {
                position: '#pie-chart-div'
            },
            dimension: {
                height: 300,
                width: 300
            }
        };
        if (this.compress) {
            this.metaData = {
                meta: {
                    position: '#pie-chart-div'
                },
                margin: {
                    left: 10,
                    right: 10,
                    bottom: 10
                },
                dimension: {
                    height: 200,
                    width: 200
                },
                axis: {
                    showtext: false
                }
            };
        }
        this.uv.chart('pie', this.data, this.metaData);
    }
}