Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 15x 7x 7x 7x | /**
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
export interface MicrochartProgressSeries {
/** Value in percent */
valuePercent: number;
/**
* Use a data-color. See: {@link https://element.siemens.io/fundamentals/colors/data-visualization-colors/#tokens}
*
* @example "element-data-10"
*/
colorToken: string;
}
@Component({
selector: 'si-microchart-progress',
templateUrl: './si-microchart-progress.component.html',
styleUrl: './si-microchart-progress.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
role: 'progressbar',
'[attr.aria-valuenow]': 'series().valuePercent',
'[attr.aria-valuemin]': '0',
'[attr.aria-valuemax]': '100',
'[attr.aria-valuetext]': 'series().valuePercent + "%"'
}
})
export class SiMicrochartProgressComponent {
/**
* Microchart progress series.
* Example series can be:
* @example
* ```ts
* Series: MicrochartProgressSeries = { valuePercent: 80, colorToken: 'element-data-7' };
* ```
*/
readonly series = input.required<MicrochartProgressSeries>();
/** @defaultValue 64 */
readonly barWidth = input<number>(64);
/** @defaultValue 4 */
readonly barHeight = input<number>(4);
}
|