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 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"
    [legend]="true"
    [legendPosition]="'bottom'"
    [legendMaxLines]="4"
    [legendOtherLabel]="tr('@place_reports_products_label_other')"
    [legendShowValue]="legendShowValue"
    [legendValueDecimals]="legendValueDecimals"
    [legendValueSuffix]="legendValueSuffix"
    [height]="height">
</upp-chart>

TypeScript

import { ViewChild } from '@angular/core';
import { UppChartComponent, UppChartData, UppChartType, uppChartPalette } from '@unpispas/upp-wdgt';

const REPORT_CHART_OPTIONS = {
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: true,
            position: 'bottom',
            align: 'end'
        }
    },
    scales: {
        x: {},
        y: {
            beginAtZero: true
        }
    }
};

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

    type: UppChartType = 'bar';
    height = '280px';
    legendShowValue = false;
    legendValueDecimals: number | null = null;
    legendValueSuffix = '';
    options = {
        ...REPORT_CHART_OPTIONS,
        plugins: {
            ...REPORT_CHART_OPTIONS.plugins,
            legend: { ...(REPORT_CHART_OPTIONS.plugins?.legend || {}), display: false }
        }
    };

    data: UppChartData = {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [
            {
                label: 'Sales',
                data: [120, 180, 160, 220, 260, 210, 190],
                backgroundColor: uppChartPalette(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;
        this.legendShowValue = false;
        this.legendValueDecimals = null;
        this.legendValueSuffix = '';
    }

    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: paymentKeys.map((key) => paymentColors[key] || 'rgba(255, 73, 97, 0.8)')
            }]
        };
        this.legendShowValue = true;
        this.legendValueDecimals = 2;
        this.legendValueSuffix = '€';
    }
}

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	UppChartData	{ labels: [], datasets: [] }	Chart dataset and labels through the upp-chart type contract.
options	UppChartOptions	{ responsive: true, maintainAspectRatio: false }	Chart options through the upp-chart type contract.
plugins	UppChartPlugin[]	[]	Optional chart plugins through the upp-chart type contract.
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.
legend	boolean	false	Enables custom in-component legend (native Chart.js legend is hidden).
legendPosition	UppChartLegendPosition	'bottom'	Legend position: top, bottom, left, right.
legendMaxLines	number	0	Max legend lines/items. 0 means unlimited.
legendOtherLabel	string	''	Label for grouped remainder when max lines is exceeded. Pass localized text from consumer.
legendOtherColor	string	'rgba(152, 154, 162, 0.8)'	Color for grouped remainder item.
legendShowValue	boolean	false	Shows custom legend numeric values next to labels.
legendValuePrefix	string	''	Prefix text rendered before each custom legend value.
legendValueSuffix	string	''	Suffix text rendered after each custom legend value.
legendValueDecimals	number | null	null	Fixed decimal precision for custom legend values; null keeps raw numeric rendering.
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?, exportSize?)	Returns the chart as a base64 data URL (image/png or image/jpeg). If exportSize ({ width, height }) is provided, it renders offscreen at that size without touching the visible chart.
downloadImage(fileName?, format?, quality?, exportSize?)	Triggers a browser download of the chart image (png/jpg). Supports optional offscreen export size ({ width, height }).

Outputs

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

Report Helpers

Helper	Description
uppChartPalette(count, alpha?)	Reusable column palette used in products/clients reports.

Key-to-color mapping for domain-specific chart segments (e.g. payment methods) belongs to the consumer — see UppReportUtils.ChartColorsByKeys in feature/reports.