uv-charts-dashboard/src/app/shared/common.service.ts

A dashboard for uvCharts examples

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class CommonService {

    public uv: any;
    private url = 'https://data.gov.in/api/datastore/resource.json?resource_id=0bc5ead8-b329-4577-8bf2-4c0c40c4b877&api-key=13abddd93f0ecebd6eab10dd65088766';

    constructor(private http: Http) {
        let windowObj: any = window;
        this.uv = windowObj.uv;
    }

    getRealTimeData(): Observable<any> {
        return this.http.get(this.url)
            .map(this.extractData);
    }

    getDetails() {
        return this.http.get('app/components/line-chart/line-chart.ts').map(this.extractDetails);
    }

    getData() {
        let graphdef: any = {
            categories: ['uvCharts', 'Matisse', 'SocialByWay'],
            dataset: {
                'uvCharts': [
                    { name: '2008', value: 15 },
                    { name: '2009', value: 28 },
                    { name: '2010', value: 42 },
                    { name: '2011', value: 88 },
                    { name: '2012', value: 100 },
                    { name: '2013', value: 143 }
                ],
                'Matisse': [
                    { name: '2008', value: 15 },
                    { name: '2009', value: 28 },
                    { name: '2010', value: 42 },
                    { name: '2011', value: 88 },
                    { name: '2012', value: 100 },
                    { name: '2013', value: 143 }
                ],
                'SocialByWay': [
                    { name: '2008', value: 15 },
                    { name: '2009', value: 28 },
                    { name: '2010', value: 42 },
                    { name: '2011', value: 88 },
                    { name: '2012', value: 100 },
                    { name: '2013', value: 143 }
                ]
            }
        };

        return graphdef;
    }

    private extractDetails(res: Response | any) {
        return res._body;
    }

    private extractData(res: Response) {
        let data = res.json();
        let categories = ['vegetables'];
        let dataset = { 'vegetables': [] };
        let dataObj = {};
        for (let obj of data.records) {
            dataset.vegetables.push({ name: obj.year, value: Math.round(obj.vegetables_production_in_000_tonne / 1000) });
        }
        dataObj['categories'] = categories;
        dataObj['dataset'] = dataset;
        return dataObj || {};
    }

    private handleError(error: Response | any) {
        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        return Observable.throw(errMsg);
    }


    getChartDescription(chartType) {

        switch (chartType) {
            case 'area-chart':
                return 'An area chart or area graph displays graphically quantitative data. It is based on the line chart. ' +
                    'The area between axis and line are commonly emphasized with colors, textures and hatchings. ' +
                    'Commonly one compares with an area chart two or more quantities.';
            case 'stacked-area-chart':
                return 'Stacked area chart displays part-to-whole relations by showing the constituent parts of a whole one over the other. ' +
                    'Stacked Area Charts are Multi-Series Area Charts plotted together with aligned x values, such that at any point it shows cumulative total of that point for all series.';
            case 'line-chart':
                return 'Line graphs are used to track changes over short and long periods of time. When smaller changes exist, ' +
                    'line graphs are better to use than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.';
            case 'bar-chart':
                return 'Bar graphs are used to compare things between different groups or to track changes over time. ' +
                    'However, when trying to measure change over time, bar graphs are best when the changes are larger.';
            case 'stacked-bar-chart':
                return 'Stacked Bar Charts are plotted when multiple Bar Charts with aligned x values are plotted on same axis. ' +
                    'Multiple sets of data are represented by one Bar. Contribution of each value is displayed in different colors ' +
                    'and the total length of bar is Cumulative Sum of all the data Elements. Each dataSeries should contain type as stackedBar.';
            case 'pie-chart':
                return 'A pie chart is a circular chart divided into sectors, each sector (and consequently its central angle and area), ' +
                    'is proportional to the quantity it represents. Together, the sectors create a full disk.';
            case 'donut-chart':
                return 'A doughnut Chart is a circular chart with a blank center. Chart is divided into sectors, each sector (and consequently its central angle and area), ' +
                    'is proportional to the quantity it represents. Together, the sectors create a full disk.';
            case 'waterfall-chart':
                return '';
            case 'step-up-bar-chart':
                return '';
            case 'polar-area-chart':
                return '';
            case 'percent-bar-chart':
                return '';
            case 'percent-area-chart':
                return '';
        }
        return 'Description for: ' + chartType;
    }

    getChartTypeName(chartType) {
        switch (chartType) {
            case 'area-chart':
                return 'Area Chart';
            case 'line-chart':
                return 'Line Chart';
            case 'stacked-area-chart':
                return 'Stacked Area Chart';
            case 'stacked-bar-chart':
                return 'Stacked Bar Chart';
            case 'pie-chart':
                return 'Pie Chart';
            case 'donut-chart':
                return 'Donut Chart';
            case 'percent-area-chart':
                return 'Percent Area Chart';
            case 'percent-bar-chart':
                return 'Percent Bar Chart';
            case 'steup-bar-chart':
                return 'Step Up Bar Chart';
            case 'polar-area-chart':
                return 'Polar Area Chart';
            case 'waterfall-chart':
                return 'Waterfall Chart';
            case 'bar-chart':
                return 'Bar Chart';
        }
    }
}