udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/collection/components/charts/udp-ag-donut-chart/udp-ag-donut-chart.js

@@ -0,0 +1,309 @@
+import { h, Host, Build } from "@stencil/core";
+import { v4 as uuid } from "uuid";
+import { AgCharts, AllCommunityModule, ModuleRegistry, } from "ag-charts-community";
+import { buildUdpChartTheme, applySeriesColors, } from "../charts-theme";
+let agChartsModulesRegistered = false;
+const ensureAgChartsModules = () => {
+    if (agChartsModulesRegistered)
+        return;
+    ModuleRegistry.registerModules([AllCommunityModule]);
+    agChartsModulesRegistered = true;
+};
+const sizeStyle = (value, fallback) => value == null ? fallback : typeof value === 'number' ? `${value}px` : value;
+/**
+ * Donut chart wrapped over `ag-charts-community`.
+ *
+ * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+ * carries the full ag-charts options object; the wrapper owns the brand
+ * theme, the transparent chart background, ag-charts module registration,
+ * and the host container. Anything the consumer passes wins over the
+ * wrapper's defaults; `container` is always wrapper-owned.
+ *
+ * Donut is a polar chart series in ag-charts — pass a series of
+ * `{ type: 'donut', angleKey, ... }` and skip `axes` entirely. The donut
+ * hole is controlled via `innerRadiusRatio` (default `0.7`); set it to a
+ * smaller value for a thicker ring or `0` for a pie. See
+ * https://www.ag-grid.com/charts/javascript/donut-series/.
+ *
+ * Always memoize `chartOptions` at the call site; a new object every
+ * render triggers a `chart.update()` cycle.
+ *
+ * The legacy `udp-donut-chart` is an amcharts wrapper — leave that one
+ * alone; reach for this component in new surfaces.
+ */
+export class UdpAgDonutChart {
+    constructor() {
+        /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+        this.chartId = `udp-ag-donut-chart-${uuid()}`;
+        /**
+         * Colour + visual-weight variant applied via the brand theme:
+         * `default` (balanced categorical palette across sectors), `soft` (same
+         * palette lightened, for dense low-emphasis surfaces), `bold` (same
+         * palette deepened, for a hero chart), `mono` (a single brand-hue ramp,
+         * light→dark across sectors), and `colorful` (each sector's label hashed
+         * to a stable Fluent avatar hue, so the same label keeps its colour
+         * across charts). Per-series colours on `chartOptions` always win.
+         */
+        this.appearance = 'default';
+        /**
+         * Geometry roundness, mirroring the button/input shape tokens: `square`
+         * (sharp sector corners) or `rounded` (rounded sector corners).
+         * Per-series `cornerRadius` on `chartOptions` still wins.
+         */
+        this.shape = 'square';
+        /**
+         * Chrome density. `full` keeps the legend and padding; `flush` hides the
+         * legend and zeroes padding so the donut fills the container edge to edge
+         * (the KPI-card look). Pair with a `udp-fluent-card` `preview` slot or
+         * `bodyPadding={false}`.
+         */
+        this.chrome = 'full';
+        // Re-theme on a live light/dark switch. `theme-manager` dispatches
+        // `theme-changed` on the window after updating the brand CSS variables;
+        // reuse the prop-watch rebuild path so buildOptions() re-reads them (and the
+        // current mode via getCurrentThemeMode()).
+        this.handleThemeChanged = () => {
+            this.handleOptionsChanged();
+        };
+    }
+    handleOptionsChanged() {
+        if (!this.chart)
+            return;
+        const options = this.buildOptions();
+        if (options)
+            this.chart.update(options);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        if (Build.isServer)
+            return;
+        ensureAgChartsModules();
+        const container = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!container)
+            return;
+        const options = this.buildOptions(container);
+        if (!options)
+            return;
+        this.chart = AgCharts.create(options);
+        window.addEventListener('theme-changed', this.handleThemeChanged);
+    }
+    disconnectedCallback() {
+        var _a;
+        window.removeEventListener('theme-changed', this.handleThemeChanged);
+        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.chart = undefined;
+    }
+    buildOptions(container) {
+        var _a, _b;
+        const target = container !== null && container !== void 0 ? container : (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!target)
+            return null;
+        const merged = Object.assign(Object.assign({ theme: buildUdpChartTheme(this.el, {
+                appearance: this.appearance,
+                shape: this.shape,
+                chrome: this.chrome,
+            }), background: { visible: false } }, this.chartOptions), { container: target });
+        return applySeriesColors(merged, this.el, this.appearance);
+    }
+    render() {
+        return (h(Host, { key: 'baffcc67c4f1b06e9e0734be01f9922e7f189b92', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, h("div", { key: 'bb6e4776dcac74f9afb1836a6e9e97c1d46b142d', id: this.chartId, class: "chart-mount" })));
+    }
+    static get is() { return "udp-ag-donut-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-ag-donut-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-ag-donut-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "chartOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AgPolarChartOptions",
+                    "resolved": "AgPolarChartOptions<any, unknown>",
+                    "references": {
+                        "AgPolarChartOptions": {
+                            "location": "import",
+                            "path": "ag-charts-community",
+                            "id": "../../node_modules/.pnpm/ag-charts-community@13.3.1/node_modules/ag-charts-community/dist/types/src/main.d.ts::AgPolarChartOptions",
+                            "referenceLocation": "AgPolarChartOptions"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full ag-charts options. Required. Should include at least `data` and\n`series` (with a `'donut'` series type and an `angleKey`). The wrapper\nmerges in defaults for `theme` and `background`; either can be\noverridden by passing them on `chartOptions`. `container` is\nwrapper-owned and any value passed here is ignored."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "customWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-width"
+            },
+            "customHeight": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-height"
+            },
+            "chartId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chart-id",
+                "defaultValue": "`udp-ag-donut-chart-${uuid()}`"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartAppearance",
+                    "resolved": "\"bold\" | \"colorful\" | \"default\" | \"mono\" | \"soft\"",
+                    "references": {
+                        "UdpChartAppearance": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartAppearance",
+                            "referenceLocation": "UdpChartAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour + visual-weight variant applied via the brand theme:\n`default` (balanced categorical palette across sectors), `soft` (same\npalette lightened, for dense low-emphasis surfaces), `bold` (same\npalette deepened, for a hero chart), `mono` (a single brand-hue ramp,\nlight\u2192dark across sectors), and `colorful` (each sector's label hashed\nto a stable Fluent avatar hue, so the same label keeps its colour\nacross charts). Per-series colours on `chartOptions` always win."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "appearance",
+                "defaultValue": "'default'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartShape",
+                    "resolved": "\"rounded\" | \"square\"",
+                    "references": {
+                        "UdpChartShape": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartShape",
+                            "referenceLocation": "UdpChartShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Geometry roundness, mirroring the button/input shape tokens: `square`\n(sharp sector corners) or `rounded` (rounded sector corners).\nPer-series `cornerRadius` on `chartOptions` still wins."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'square'"
+            },
+            "chrome": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartChrome",
+                    "resolved": "\"flush\" | \"full\"",
+                    "references": {
+                        "UdpChartChrome": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartChrome",
+                            "referenceLocation": "UdpChartChrome"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chrome density. `full` keeps the legend and padding; `flush` hides the\nlegend and zeroes padding so the donut fills the container edge to edge\n(the KPI-card look). Pair with a `udp-fluent-card` `preview` slot or\n`bodyPadding={false}`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chrome",
+                "defaultValue": "'full'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "chartOptions",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "appearance",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "shape",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "chrome",
+                "methodName": "handleOptionsChanged"
+            }];
+    }
+}

package/dist/collection/components/charts/udp-ag-line-chart/udp-ag-line-chart.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.chart-mount {
+  position: absolute;
+  inset: 0;
+}

package/dist/collection/components/charts/udp-ag-line-chart/udp-ag-line-chart.js

@@ -0,0 +1,314 @@
+import { h, Host, Build } from "@stencil/core";
+import { v4 as uuid } from "uuid";
+import { AgCharts, AllCommunityModule, ModuleRegistry, } from "ag-charts-community";
+import { buildUdpChartTheme, applySeriesColors, } from "../charts-theme";
+let agChartsModulesRegistered = false;
+const ensureAgChartsModules = () => {
+    if (agChartsModulesRegistered)
+        return;
+    ModuleRegistry.registerModules([AllCommunityModule]);
+    agChartsModulesRegistered = true;
+};
+const sizeStyle = (value, fallback) => value == null ? fallback : typeof value === 'number' ? `${value}px` : value;
+/**
+ * Line chart wrapped over `ag-charts-community`.
+ *
+ * See https://www.ag-grid.com/charts/javascript/line-series/ for the full
+ * option vocabulary. Consumers opt in by setting
+ * `series: [{ type: 'line', xKey, yKey, ... }]` on `chartOptions`.
+ *
+ * Mirrors the shape of `ag-grid-base`: one passthrough `chartOptions` prop
+ * carries the full ag-charts options object; the wrapper owns the brand
+ * theme, the transparent chart background, ag-charts module registration,
+ * and the host container. Anything the consumer passes wins over the
+ * wrapper's defaults; `container` is always wrapper-owned.
+ *
+ * Consumers reach for ag-charts' own option vocabulary directly — no
+ * discrete-prop renames to learn, and no risk of the wrapper falling
+ * behind ag-charts feature releases.
+ *
+ * Always memoize `chartOptions` at the call site; a new object every
+ * render triggers a `chart.update()` cycle.
+ *
+ * The legacy `udp-line-chart` is an amcharts wrapper still used by
+ * `InsightRenderer` — leave that one alone; reach for this component in
+ * new surfaces.
+ */
+export class UdpAgLineChart {
+    constructor() {
+        /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+        this.chartId = `udp-ag-line-chart-${uuid()}`;
+        /**
+         * Colour + visual-weight variant applied via the brand theme:
+         * `default` (balanced categorical palette for multi-category charts,
+         * the exact brand colour for a single series), `soft` (same palette
+         * lightened, for dense low-emphasis surfaces), `bold` (same palette
+         * deepened, for a hero chart), `mono` (a single brand-hue ramp for
+         * sequential / magnitude data), and `colorful` (each label hashed to a
+         * stable Fluent avatar hue, so the same label keeps its colour across
+         * charts). Per-series colours on `chartOptions` always win.
+         */
+        this.appearance = 'default';
+        /**
+         * Geometry roundness, mirroring the button/input shape tokens: `square`
+         * (sharp bar corners, straight line segments) or `rounded` (rounded bar
+         * corners, smoothed lines). Per-series geometry on `chartOptions` still
+         * wins.
+         */
+        this.shape = 'square';
+        /**
+         * Chrome density. `full` keeps axes, gridlines, legend and padding;
+         * `flush` strips all chrome and zeroes padding so the plot bleeds to the
+         * container edges (the KPI-card "sparkline" look). Pair with a
+         * `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+         */
+        this.chrome = 'full';
+        // Re-theme on a live light/dark switch. `theme-manager` dispatches
+        // `theme-changed` on the window after updating the brand CSS variables;
+        // reuse the prop-watch rebuild path so buildOptions() re-reads them (and the
+        // current mode via getCurrentThemeMode()).
+        this.handleThemeChanged = () => {
+            this.handleOptionsChanged();
+        };
+    }
+    handleOptionsChanged() {
+        if (!this.chart)
+            return;
+        const options = this.buildOptions();
+        if (options)
+            this.chart.update(options);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        if (Build.isServer)
+            return;
+        ensureAgChartsModules();
+        const container = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!container)
+            return;
+        const options = this.buildOptions(container);
+        if (!options)
+            return;
+        this.chart = AgCharts.create(options);
+        window.addEventListener('theme-changed', this.handleThemeChanged);
+    }
+    disconnectedCallback() {
+        var _a;
+        window.removeEventListener('theme-changed', this.handleThemeChanged);
+        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.chart = undefined;
+    }
+    buildOptions(container) {
+        var _a, _b;
+        const target = container !== null && container !== void 0 ? container : (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!target)
+            return null;
+        const merged = Object.assign(Object.assign({ theme: buildUdpChartTheme(this.el, {
+                appearance: this.appearance,
+                shape: this.shape,
+                chrome: this.chrome,
+            }), background: { visible: false } }, this.chartOptions), { container: target });
+        return applySeriesColors(merged, this.el, this.appearance);
+    }
+    render() {
+        return (h(Host, { key: '890df53a7cfa3d7cff52f8fb8feba11773d0b2fe', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, h("div", { key: '6dfe11ed2bd90c00f7c6ec3cea74df6bd1c6234c', id: this.chartId, class: "chart-mount" })));
+    }
+    static get is() { return "udp-ag-line-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-ag-line-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-ag-line-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "chartOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AgCartesianChartOptions",
+                    "resolved": "AgCartesianChartOptions<any, unknown>",
+                    "references": {
+                        "AgCartesianChartOptions": {
+                            "location": "import",
+                            "path": "ag-charts-community",
+                            "id": "../../node_modules/.pnpm/ag-charts-community@13.3.1/node_modules/ag-charts-community/dist/types/src/main.d.ts::AgCartesianChartOptions",
+                            "referenceLocation": "AgCartesianChartOptions"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full ag-charts options. Required. Should include at least `data` and\n`series` (with a line series \u2014 `{ type: 'line', xKey, yKey }`). The\nwrapper merges in defaults for `theme` and `background`; either can be\noverridden by passing them on `chartOptions`. `container` is\nwrapper-owned and any value passed here is ignored."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "customWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Host width. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-width"
+            },
+            "customHeight": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Host height. A number is treated as px; a string is used verbatim as CSS. Defaults to filling the parent (100%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-height"
+            },
+            "chartId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chart-id",
+                "defaultValue": "`udp-ag-line-chart-${uuid()}`"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartAppearance",
+                    "resolved": "\"bold\" | \"colorful\" | \"default\" | \"mono\" | \"soft\"",
+                    "references": {
+                        "UdpChartAppearance": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartAppearance",
+                            "referenceLocation": "UdpChartAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour + visual-weight variant applied via the brand theme:\n`default` (balanced categorical palette for multi-category charts,\nthe exact brand colour for a single series), `soft` (same palette\nlightened, for dense low-emphasis surfaces), `bold` (same palette\ndeepened, for a hero chart), `mono` (a single brand-hue ramp for\nsequential / magnitude data), and `colorful` (each label hashed to a\nstable Fluent avatar hue, so the same label keeps its colour across\ncharts). Per-series colours on `chartOptions` always win."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "appearance",
+                "defaultValue": "'default'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartShape",
+                    "resolved": "\"rounded\" | \"square\"",
+                    "references": {
+                        "UdpChartShape": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartShape",
+                            "referenceLocation": "UdpChartShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Geometry roundness, mirroring the button/input shape tokens: `square`\n(sharp bar corners, straight line segments) or `rounded` (rounded bar\ncorners, smoothed lines). Per-series geometry on `chartOptions` still\nwins."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'square'"
+            },
+            "chrome": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpChartChrome",
+                    "resolved": "\"flush\" | \"full\"",
+                    "references": {
+                        "UdpChartChrome": {
+                            "location": "import",
+                            "path": "../charts-theme",
+                            "id": "src/components/charts/charts-theme.ts::UdpChartChrome",
+                            "referenceLocation": "UdpChartChrome"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chrome density. `full` keeps axes, gridlines, legend and padding;\n`flush` strips all chrome and zeroes padding so the plot bleeds to the\ncontainer edges (the KPI-card \"sparkline\" look). Pair with a\n`udp-fluent-card` `preview` slot or `bodyPadding={false}`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chrome",
+                "defaultValue": "'full'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "chartOptions",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "appearance",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "shape",
+                "methodName": "handleOptionsChanged"
+            }, {
+                "propName": "chrome",
+                "methodName": "handleOptionsChanged"
+            }];
+    }
+}

package/dist/collection/components/charts/udp-ag-pie-chart/udp-ag-pie-chart.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.chart-mount {
+  position: absolute;
+  inset: 0;
+}