upp-chart

upp-chart is a lightweight wrapper around Chart.js for upp-wdgt. It handles instance lifecycle (create, update, destroy) and exposes a simple Angular API based on reactive inputs.

It also includes report-oriented support:

• stream updates through an Observable (update)
• print mode with ready image output (print + ready)
• reusable palette and options helpers for report charts.

When to Use

• You need charts in feature views but want a reusable UPP widget.
• You want Chart.js rendering with Angular input bindings.
• You want to update data/type without manual canvas management.
• You need to export chart images (png/jpg) for reports.

Demo

Source Code

HTML

<ion-button size="small" (click)="exportPng()">Export PNG</ion-button>
<ion-button size="small" (click)="exportJpg()">Export JPG</ion-button>
<ion-button size="small" (click)="setType('pie')">Pie</ion-button>
<ion-button size="small" (click)="setType('doughnut')">Doughnut</ion-button>

<upp-chart
    [type]="type"
    [data]="data"
    [options]="options"
    [customLegend]="true"
    [customLegendPosition]="'bottom'"
    [customLegendMaxLines]="4"
    [customLegendOtherLabel]="tr('@place_reports_products_label_other')"
    [height]="height">
</upp-chart>

TypeScript

import { ViewChild } from '@angular/core';
import { ChartData } from 'chart.js/auto';
import { UPP_CHART_REPORT_OPTIONS, UppChartComponent, UppChartType, uppChartBuildGooglePalette, uppChartBuildMappedPalette } from '@unpispas/upp-wdgt';

export class DemoUppChartComponent {
    @ViewChild(UppChartComponent) chart?: UppChartComponent;

    type: UppChartType = 'bar';
    height = '280px';
    options = {
        ...UPP_CHART_REPORT_OPTIONS,
        plugins: {
            ...UPP_CHART_REPORT_OPTIONS.plugins,
            legend: { ...(UPP_CHART_REPORT_OPTIONS.plugins?.legend || {}), display: false }
        }
    };

    data: ChartData = {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [
            {
                label: 'Sales',
                data: [120, 180, 160, 220, 260, 210, 190],
                backgroundColor: uppChartBuildGooglePalette(7, 0.55),
                borderColor: 'rgba(56, 128, 255, 1)',
                borderWidth: 2
            }
        ]
    };

    exportPng(): void {
        this.chart?.downloadImage('upp-chart-demo', 'image/png');
    }

    exportJpg(): void {
        this.chart?.downloadImage('upp-chart-demo', 'image/jpeg');
    }

    setType(type: UppChartType): void {
        this.type = type;
    }

    showPaymentDoughnut(): void {
        const paymentKeys = ['PAYCASH', 'PAYCARD', 'PAYLINE', 'PAYACCOUNT'];
        const paymentColors = {
            PAYCASH: 'rgba(47, 223, 117, 0.8)',
            PAYCARD: 'rgba(255, 213, 52, 0.8)',
            PAYLINE: 'rgba(66, 140, 255, 0.8)',
            PAYACCOUNT: 'rgba(112, 68, 255, 0.8)'
        };
        this.type = 'doughnut';
        this.data = {
            labels: paymentKeys,
            datasets: [{
                data: [420, 250, 150, 180],
                backgroundColor: uppChartBuildMappedPalette(paymentKeys, paymentColors, 'rgba(255, 73, 97, 0.8)')
            }]
        };
    }
}

SCSS

upp-chart {
    display: block;
    max-width: 720px;
}

API Reference

UppChartComponent (upp-chart)

Property	Type	Default	Description
type	UppChartType	'line'	Chart type (bar, line, pie, doughnut).
data	ChartData	{ labels: [], datasets: [] }	Chart.js dataset and labels.
options	ChartOptions	{ responsive: true, maintainAspectRatio: false }	Chart.js options for axes, legend, tooltips, and behavior.
plugins	Plugin[]	[]	Optional Chart.js plugins for this chart instance.
update	Observable<UppChartUpdate> | null	null	Optional stream-based updates (type, data, options, plugins).
print	boolean	false	Disables animation and enables image-ready output for print/report flows.
customLegend	boolean	false	Enables custom in-component legend (native Chart.js legend is hidden).
customLegendPosition	UppChartLegendPosition	'bottom'	Legend position: top, bottom, left, right.
customLegendMaxLines	number	0	Max legend lines/items. 0 means unlimited.
customLegendOtherLabel	string	''	Label for grouped remainder when max lines is exceeded. Pass localized text from consumer.
customLegendOtherColor	string	'rgba(152, 154, 162, 0.8)'	Color for grouped remainder item.
width	string	'100%'	CSS width of the host component.
height	string	'260px'	CSS height of the chart area.

Methods

Method	Description
refresh()	Recreates the underlying Chart.js instance with the current inputs.
getImageDataUrl(format?, quality?)	Returns the chart as a base64 data URL (image/png or image/jpeg).
downloadImage(fileName?, format?, quality?)	Triggers a browser download of the chart image (png/jpg).

Outputs

Output	Type	Description
ready	EventEmitter<string>	Emits PNG data URL when the chart is rendered in print mode.

Report Helpers

Helper	Description
UPP_CHART_REPORT_OPTIONS	Base options for report-style charts (legend bottom + maintainAspectRatio:false).
uppChartBuildGooglePalette(count, alpha?)	Reusable column palette used in products/clients reports.
uppChartBuildMappedPalette(keys, colorMap, fallbackColor?)	Generic key-to-color palette helper with fallback color.