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

A dashboard for uvCharts examples

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

@Component({
    selector: 'bar-chart',
    template: `<div id="bar-div"></div>`
})

export class BarChartComponent 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: '#bar-div'
            },
            dimension: {
                height: 200,
                width: 400
            }
        };
        if (this.compress) {
            this.metaData = {
                margin: {
                    left: 10,
                    right: 10,
                    bottom: 10
                },
                dimension: {
                    height: 200,
                    width: 200
                },
                meta: {
                    position: '#bar-div',
                },
                axis: {
                    showtext: false
                }
            };
        }

        this.uv.chart('Bar', this.data, this.metaData);
    }
}