ng-chartist/fesm2022/ng-chartist.mjs

Chartist component for Angular

import * as i0 from '@angular/core';
import { inject, ElementRef, EventEmitter, Output, Input, Component, NgModule } from '@angular/core';
import { BarChart, LineChart, PieChart } from 'chartist';

/**
 * Angular component which renders Chartist chart.
 *
 * See Chartist {@link https://gionkunz.github.io/chartist-js/api-documentation.html API documentation} and
 * {@link https://gionkunz.github.io/chartist-js/examples.html examples} for more information.
 * ### Example
 ```html
 <x-chartist
   [configuration]="configuration"
   [events]="events"
 ></x-chartist>
 ```
 */
class ChartistComponent {
    elementRef = inject(ElementRef);
    configuration;
    /**
     * Events object where keys are Chartist event names and values are event handler functions.
     *
     * Supported events are: draw, optionsChanged, data, animationBegin, animationEnd, created.
     *
     * Event handler function will receive a data argument which contains event data.
     */
    events;
    /**
     * Event emitted after Chartist chart has been initialized.
     *
     * Event handler function will receive chart instance argument.
     */
    initialized = new EventEmitter();
    chart;
    ngOnInit() {
        if (this.configuration.type && this.configuration.data) {
            this.renderChart();
        }
    }
    ngOnChanges(changes) {
        this.update(changes);
    }
    ngOnDestroy() {
        if (this.chart) {
            this.chart.detach();
            this.chart = null;
        }
    }
    renderChart() {
        const nativeElement = this.elementRef.nativeElement;
        const { type, data, options, responsiveOptions } = this.configuration;
        if (type === "Bar") {
            this.chart = new BarChart(nativeElement, data, options, responsiveOptions);
        }
        else if (type === "Line") {
            this.chart = new LineChart(nativeElement, data, options, responsiveOptions);
        }
        else if (type === "Pie") {
            this.chart = new PieChart(nativeElement, data, options, responsiveOptions);
        }
        else {
            throw new Error(`${type} is not a known chart type`);
        }
        if (this.events) {
            this.bindEvents();
        }
        this.initialized.emit(this.chart);
    }
    update(changes) {
        const { type, data, options } = this.configuration;
        if (!type || !data) {
            return;
        }
        const changedConfiguration = changes.configuration
            .currentValue;
        if (!this.chart || changedConfiguration.type !== type) {
            this.renderChart();
        }
        else if ("data" in changedConfiguration ||
            "options" in changedConfiguration) {
            this.chart.update(data, options);
        }
    }
    bindEvents() {
        for (const event of Object.keys(this.events)) {
            this.chart.on(event, this.events[event]);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChartistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: ChartistComponent, isStandalone: true, selector: "x-chartist", inputs: { configuration: "configuration", events: "events" }, outputs: { initialized: "initialized" }, usesOnChanges: true, ngImport: i0, template: "", isInline: true, styles: [":host{display:block}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChartistComponent, decorators: [{
            type: Component,
            args: [{ selector: "x-chartist", template: "", styles: [":host{display:block}\n"] }]
        }], propDecorators: { configuration: [{
                type: Input
            }], events: [{
                type: Input
            }], initialized: [{
                type: Output
            }] } });

class ChartistModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChartistModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: ChartistModule, imports: [ChartistComponent], exports: [ChartistComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChartistModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ChartistModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [ChartistComponent],
                    exports: [ChartistComponent],
                }]
        }] });

/*
 * Public API Surface of ng-chartist-lib
 */

/**
 * Generated bundle index. Do not edit.
 */

export { ChartistComponent, ChartistModule };
//# sourceMappingURL=ng-chartist.mjs.map