@design.estate/dees-catalog 3.55.2 → 3.55.4

package/dist_ts_web/elements/00group-chart/dees-chart-donut/component.js

@@ -0,0 +1,188 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { customElement, property, } from '@design.estate/dees-element';
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { donutStyles } from './styles.js';
+import { renderChartDonut } from './template.js';
+import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
+let DeesChartDonut = (() => {
+    let _classDecorators = [customElement('dees-chart-donut')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesChartEchartsBase;
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _showLegend_decorators;
+    let _showLegend_initializers = [];
+    let _showLegend_extraInitializers = [];
+    let _showLabels_decorators;
+    let _showLabels_initializers = [];
+    let _showLabels_extraInitializers = [];
+    let _innerRadiusPercent_decorators;
+    let _innerRadiusPercent_initializers = [];
+    let _innerRadiusPercent_extraInitializers = [];
+    let _valueFormatter_decorators;
+    let _valueFormatter_initializers = [];
+    let _valueFormatter_extraInitializers = [];
+    var DeesChartDonut = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: Array })];
+            _showLegend_decorators = [property({ type: Boolean })];
+            _showLabels_decorators = [property({ type: Boolean })];
+            _innerRadiusPercent_decorators = [property({ type: String })];
+            _valueFormatter_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _data_decorators, { kind: "accessor", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(this, null, _showLegend_decorators, { kind: "accessor", name: "showLegend", static: false, private: false, access: { has: obj => "showLegend" in obj, get: obj => obj.showLegend, set: (obj, value) => { obj.showLegend = value; } }, metadata: _metadata }, _showLegend_initializers, _showLegend_extraInitializers);
+            __esDecorate(this, null, _showLabels_decorators, { kind: "accessor", name: "showLabels", static: false, private: false, access: { has: obj => "showLabels" in obj, get: obj => obj.showLabels, set: (obj, value) => { obj.showLabels = value; } }, metadata: _metadata }, _showLabels_initializers, _showLabels_extraInitializers);
+            __esDecorate(this, null, _innerRadiusPercent_decorators, { kind: "accessor", name: "innerRadiusPercent", static: false, private: false, access: { has: obj => "innerRadiusPercent" in obj, get: obj => obj.innerRadiusPercent, set: (obj, value) => { obj.innerRadiusPercent = value; } }, metadata: _metadata }, _innerRadiusPercent_initializers, _innerRadiusPercent_extraInitializers);
+            __esDecorate(this, null, _valueFormatter_decorators, { kind: "accessor", name: "valueFormatter", static: false, private: false, access: { has: obj => "valueFormatter" in obj, get: obj => obj.valueFormatter, set: (obj, value) => { obj.valueFormatter = value; } }, metadata: _metadata }, _valueFormatter_initializers, _valueFormatter_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            DeesChartDonut = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = demoFunc;
+        static demoGroups = ['Chart'];
+        #data_accessor_storage = __runInitializers(this, _data_initializers, []);
+        get data() { return this.#data_accessor_storage; }
+        set data(value) { this.#data_accessor_storage = value; }
+        #showLegend_accessor_storage = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _showLegend_initializers, true));
+        get showLegend() { return this.#showLegend_accessor_storage; }
+        set showLegend(value) { this.#showLegend_accessor_storage = value; }
+        #showLabels_accessor_storage = (__runInitializers(this, _showLegend_extraInitializers), __runInitializers(this, _showLabels_initializers, true));
+        get showLabels() { return this.#showLabels_accessor_storage; }
+        set showLabels(value) { this.#showLabels_accessor_storage = value; }
+        #innerRadiusPercent_accessor_storage = (__runInitializers(this, _showLabels_extraInitializers), __runInitializers(this, _innerRadiusPercent_initializers, '55%'));
+        get innerRadiusPercent() { return this.#innerRadiusPercent_accessor_storage; }
+        set innerRadiusPercent(value) { this.#innerRadiusPercent_accessor_storage = value; }
+        #valueFormatter_accessor_storage = (__runInitializers(this, _innerRadiusPercent_extraInitializers), __runInitializers(this, _valueFormatter_initializers, (val) => `${val}`));
+        get valueFormatter() { return this.#valueFormatter_accessor_storage; }
+        set valueFormatter(value) { this.#valueFormatter_accessor_storage = value; }
+        static styles = donutStyles;
+        render() {
+            return renderChartDonut(this);
+        }
+        async updated(changedProperties) {
+            super.updated(changedProperties);
+            if (this.chartInstance &&
+                (changedProperties.has('data') ||
+                    changedProperties.has('showLegend') ||
+                    changedProperties.has('showLabels') ||
+                    changedProperties.has('innerRadiusPercent'))) {
+                this.updateChart();
+            }
+        }
+        buildOption() {
+            const colors = getThemeColors(this.goBright);
+            const seriesColors = getEchartsSeriesColors(this.goBright);
+            const data = this.data.map((item, index) => ({
+                name: item.name,
+                value: item.value,
+                itemStyle: item.color ? { color: item.color } : { color: seriesColors[index % seriesColors.length] },
+            }));
+            const formatter = this.valueFormatter;
+            return {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: (params) => {
+                        return `${params.marker} ${params.name}: <strong>${formatter(params.value)}</strong> (${params.percent}%)`;
+                    },
+                },
+                legend: this.showLegend
+                    ? {
+                        orient: 'vertical',
+                        right: 16,
+                        top: 'center',
+                        itemWidth: 10,
+                        itemHeight: 10,
+                        itemGap: 12,
+                        formatter: (name) => {
+                            const item = this.data.find((d) => d.name === name);
+                            return item ? `${name}  ${formatter(item.value)}` : name;
+                        },
+                    }
+                    : { show: false },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: [this.innerRadiusPercent, '85%'],
+                        center: this.showLegend ? ['35%', '50%'] : ['50%', '50%'],
+                        avoidLabelOverlap: true,
+                        itemStyle: {
+                            borderRadius: 4,
+                            borderColor: 'transparent',
+                            borderWidth: 2,
+                        },
+                        label: this.showLabels
+                            ? {
+                                show: true,
+                                formatter: '{b}: {d}%',
+                                fontSize: 11,
+                                color: colors.textSecondary,
+                                textBorderColor: 'transparent',
+                            }
+                            : { show: false },
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.2)',
+                            },
+                            label: {
+                                show: true,
+                                fontWeight: 'bold',
+                            },
+                        },
+                        data,
+                    },
+                ],
+            };
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _valueFormatter_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return DeesChartDonut = _classThis;
+})();
+export { DeesChartDonut };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtY2hhcnQvZGVlcy1jaGFydC1kb251dC9jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxhQUFhLEVBQ2IsUUFBUSxHQUVULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDckUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNyQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsY0FBYyxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7SUFlM0UsY0FBYzs0QkFEMUIsYUFBYSxDQUFDLGtCQUFrQixDQUFDOzs7O3NCQUNFLG9CQUFvQjs7Ozs7Ozs7Ozs7Ozs7Ozs4QkFBNUIsU0FBUSxXQUFvQjs7OztnQ0FJckQsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDO3NDQUd6QixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7c0NBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQzs4Q0FHM0IsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDOzBDQUcxQixRQUFRLENBQUMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7WUFYL0IsaUtBQVMsSUFBSSw2QkFBSixJQUFJLG1GQUF3QjtZQUdyQyxtTEFBUyxVQUFVLDZCQUFWLFVBQVUsK0ZBQWlCO1lBR3BDLG1MQUFTLFVBQVUsNkJBQVYsVUFBVSwrRkFB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

package/dist_ts_web/elements/00group-chart/dees-chart-donut/demo.d.ts

@@ -0,0 +1,3 @@
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+export declare const demoFunc: () => import("@design.estate/dees-element").TemplateResult<1>;

package/dist_ts_web/elements/00group-chart/dees-chart-donut/demo.js

@@ -0,0 +1,122 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+export const demoFunc = () => {
+    const diskData = [
+        { name: 'Documents', value: 42 },
+        { name: 'Media', value: 28 },
+        { name: 'Applications', value: 15 },
+        { name: 'System', value: 10 },
+        { name: 'Other', value: 5 },
+    ];
+    const statusData = [
+        { name: 'Healthy', value: 156 },
+        { name: 'Warning', value: 23 },
+        { name: 'Critical', value: 8 },
+        { name: 'Unknown', value: 3 },
+    ];
+    const trafficData = [
+        { name: 'API', value: 45200 },
+        { name: 'Static Assets', value: 23100 },
+        { name: 'WebSocket', value: 12800 },
+        { name: 'GraphQL', value: 8900 },
+    ];
+    return html `
+    <dees-demowrapper .runAfterRender=${async (elementArg) => {
+        const diskChart = elementArg.querySelector('#disk-chart');
+        const statusChart = elementArg.querySelector('#status-chart');
+        const trafficChart = elementArg.querySelector('#traffic-chart');
+        // Wire up buttons
+        const buttons = elementArg.querySelectorAll('dees-button');
+        buttons.forEach((button) => {
+            const text = button.text?.trim();
+            if (text === 'Randomize') {
+                button.addEventListener('click', () => {
+                    diskChart.data = diskData.map((d) => ({
+                        ...d,
+                        value: Math.round(d.value * (0.5 + Math.random())),
+                    }));
+                    statusChart.data = statusData.map((d) => ({
+                        ...d,
+                        value: Math.round(d.value * (0.3 + Math.random() * 1.4)),
+                    }));
+                    trafficChart.data = trafficData.map((d) => ({
+                        ...d,
+                        value: Math.round(d.value * (0.5 + Math.random())),
+                    }));
+                });
+            }
+        });
+    }}>
+      <style>
+        ${css `
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .chartRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .info {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+            font-size: 12px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+            text-align: center;
+            margin-top: 8px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="controls">
+          <dees-button-group label="Actions:">
+            <dees-button>Randomize</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="chartRow">
+          <dees-chart-donut
+            id="disk-chart"
+            .label=${'Disk Usage (GB)'}
+            .data=${diskData}
+            .valueFormatter=${(val) => `${val} GB`}
+          ></dees-chart-donut>
+
+          <dees-chart-donut
+            id="status-chart"
+            .label=${'Service Status'}
+            .data=${statusData}
+            .valueFormatter=${(val) => `${val} services`}
+            .innerRadiusPercent=${'0%'}
+          ></dees-chart-donut>
+        </div>
+
+        <dees-chart-donut
+          id="traffic-chart"
+          .label=${'Traffic Distribution'}
+          .data=${trafficData}
+          .valueFormatter=${(val) => `${(val / 1000).toFixed(1)}k req`}
+        ></dees-chart-donut>
+
+        <div class="info">
+          Donut chart with configurable inner radius (set to 0% for full pie) •
+          Click 'Randomize' to update data with animation
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWNoYXJ0L2RlZXMtY2hhcnQtZG9udXQvZGVtby50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVwRSxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sZ0JBQWdCLENBQUM7QUFFeEIsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRTtJQUMzQixNQUFNLFFBQVEsR0FBRztRQUNmLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFO1FBQ2hDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFO1FBQzVCLEVBQUUsSUFBSSxFQUFFLGNBQWMsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFO1FBQ25DLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFO1FBQzdCLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFO0tBQzVCLENBQUM7SUFFRixNQUFNLFVBQVUsR0FBRztRQUNqQixFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRTtRQUMvQixFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRTtRQUM5QixFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRTtRQUM5QixFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRTtLQUM5QixDQUFDO0lBRUYsTUFBTSxXQUFXLEdBQUc7UUFDbEIsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUU7UUFDN0IsRUFB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

package/dist_ts_web/elements/00group-chart/dees-chart-donut/index.d.ts

@@ -0,0 +1 @@
+export * from './component.js';

package/dist_ts_web/elements/00group-chart/dees-chart-donut/index.js

@@ -0,0 +1,2 @@
+export * from './component.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1jaGFydC9kZWVzLWNoYXJ0LWRvbnV0L2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsZ0JBQWdCLENBQUMifQ==

package/dist_ts_web/elements/00group-chart/dees-chart-donut/styles.d.ts

@@ -0,0 +1 @@
+export declare const donutStyles: import("@design.estate/dees-element").CSSResult[];

package/dist_ts_web/elements/00group-chart/dees-chart-donut/styles.js

@@ -0,0 +1,11 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+export const donutStyles = [
+    ...echartsBaseStyles,
+    css `
+    :host {
+      height: 360px;
+    }
+  `,
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtY2hhcnQvZGVlcy1jaGFydC1kb251dC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUVwRSxNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUc7SUFDekIsR0FBRyxpQkFBaUI7SUFDcEIsR0FBRyxDQUFBOzs7O0dBSUY7Q0FDRixDQUFDIn0=

package/dist_ts_web/elements/00group-chart/dees-chart-donut/template.d.ts

@@ -0,0 +1,3 @@
+import { type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartDonut } from './component.js';
+export declare const renderChartDonut: (component: DeesChartDonut) => TemplateResult;

package/dist_ts_web/elements/00group-chart/dees-chart-donut/template.js

@@ -0,0 +1,12 @@
+import { html } from '@design.estate/dees-element';
+export const renderChartDonut = (component) => {
+    return html `
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVtcGxhdGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1jaGFydC9kZWVzLWNoYXJ0LWRvbnV0L3RlbXBsYXRlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFHeEUsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBQUcsQ0FBQyxTQUF5QixFQUFrQixFQUFFO0lBQzVFLE9BQU8sSUFBSSxDQUFBOzs7bUNBR3NCLFNBQVMsQ0FBQyxLQUFLOzs7O0dBSS9DLENBQUM7QUFDSixDQUFDLENBQUMifQ==

package/dist_ts_web/elements/00group-chart/dees-chart-echarts-base.d.ts

@@ -0,0 +1,22 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import { type IEchartsBundle, type IEchartsInstance } from '../../services/index.js';
+import '../00group-layout/dees-tile/dees-tile.js';
+/**
+ * Abstract base class for ECharts-based chart components.
+ * Handles library loading, chart lifecycle, resize observation, and theme switching.
+ * Subclasses implement `buildOption()` to define their chart configuration.
+ */
+export declare abstract class DeesChartEchartsBase extends DeesElement {
+    accessor label: string;
+    protected chartInstance: IEchartsInstance | null;
+    protected echartsBundle: IEchartsBundle | null;
+    private resizeObserver;
+    constructor();
+    render(): TemplateResult;
+    firstUpdated(): Promise<void>;
+    updated(changedProperties: Map<string, any>): Promise<void>;
+    protected abstract buildOption(): Record<string, any>;
+    protected updateChart(): void;
+    protected applyTheme(): void;
+    forceResize(): Promise<void>;
+}

package/dist_ts_web/elements/00group-chart/dees-chart-echarts-base.js

@@ -0,0 +1,140 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, property, html, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesServiceLibLoader } from '../../services/index.js';
+import { getEchartsThemeOptions } from './dees-chart-echarts-theme.js';
+import '../00group-layout/dees-tile/dees-tile.js';
+/**
+ * Abstract base class for ECharts-based chart components.
+ * Handles library loading, chart lifecycle, resize observation, and theme switching.
+ * Subclasses implement `buildOption()` to define their chart configuration.
+ */
+let DeesChartEchartsBase = (() => {
+    let _classSuper = DeesElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    return class DeesChartEchartsBase extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property()];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #label_accessor_storage = __runInitializers(this, _label_initializers, 'Untitled Chart');
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        chartInstance = (__runInitializers(this, _label_extraInitializers), null);
+        echartsBundle = null;
+        resizeObserver = null;
+        constructor() {
+            super();
+            domtools.elementBasic.setup();
+            this.registerGarbageFunction(async () => {
+                if (this.resizeObserver) {
+                    this.resizeObserver.disconnect();
+                    this.resizeObserver = null;
+                }
+                if (this.chartInstance) {
+                    try {
+                        this.chartInstance.dispose();
+                        this.chartInstance = null;
+                    }
+                    catch (e) {
+                        console.error('Error disposing ECharts instance:', e);
+                    }
+                }
+            });
+        }
+        render() {
+            return html `
+      <dees-tile>
+        <div slot="header" class="chartHeader">
+          <span class="chartLabel">${this.label}</span>
+        </div>
+        <div class="chartContainer"></div>
+      </dees-tile>
+    `;
+        }
+        async firstUpdated() {
+            await this.domtoolsPromise;
+            this.echartsBundle = await DeesServiceLibLoader.getInstance().loadEcharts();
+            await new Promise(resolve => requestAnimationFrame(resolve));
+            const chartContainer = this.shadowRoot.querySelector('.chartContainer');
+            if (!chartContainer)
+                return;
+            try {
+                this.chartInstance = this.echartsBundle.init(chartContainer);
+                this.updateChart();
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.chartInstance?.resize();
+                });
+                this.resizeObserver.observe(chartContainer);
+            }
+            catch (error) {
+                console.error('Failed to initialize ECharts:', error);
+            }
+        }
+        async updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('goBright') && this.chartInstance) {
+                this.applyTheme();
+            }
+        }
+        updateChart() {
+            if (!this.chartInstance)
+                return;
+            const themeOptions = getEchartsThemeOptions(this.goBright);
+            const chartOption = this.buildOption();
+            // Merge theme defaults with chart-specific options
+            const merged = {
+                ...themeOptions,
+                ...chartOption,
+                textStyle: { ...themeOptions.textStyle, ...(chartOption.textStyle || {}) },
+                tooltip: { ...themeOptions.tooltip, ...(chartOption.tooltip || {}) },
+            };
+            this.chartInstance.setOption(merged, true);
+        }
+        applyTheme() {
+            this.updateChart();
+        }
+        async forceResize() {
+            this.chartInstance?.resize();
+        }
+    };
+})();
+export { DeesChartEchartsBase };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGFydC1lY2hhcnRzLWJhc2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1jaGFydC9kZWVzLWNoYXJ0LWVjaGFydHMtYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxRQUFRLEVBQ1IsSUFBSSxHQUVMLE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsb0JBQW9CLEVBQThDLE1BQU0seUJBQXlCLENBQUM7QUFDM0csT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDdkUsT0FBTywwQ0FBMEMsQ0FBQztBQUVsRDs7OztHQUlHO0lBQ21CLG9CQUFvQjtzQkFBUyxXQUFXOzs7O2lCQUF4QyxvQkFBcUIsU0FBUSxXQUFXOzs7aUNBQzNELFFBQVEsRUFBRTtZQUNYLG9LQUFTLEtBQUssNkJBQUwsS0FBSyxxRkFBNEI7OztRQUExQyx1RUFBeUIsZ0JBQWdCLEVBQUM7UUFBMUMsSUFBUyxLQUFLLDJDQUE0QjtRQUExQyxJQUFTLEtBQUssaURBQTRCO1FBRWhDLGFBQWEsdURBQTRCLElBQUksRUFBQztRQUM5QyxhQUFhLEdBQTBCLElBQUksQ0FBQztRQUM5QyxjQUFjLEdBQTBCLElBQUksQ0FBQztRQUVyRDtZQUNFLEtBQUssRUFBRSxDQUFDO1lBQ1IsUUFBUSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUM5QixJQUFJLENBQUMsdUJBQXVCLENBQUMsS0FBSyxJQUFJLEVBQUU7Z0JBQ3RDLElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO29CQUN4QixJQUFJLENBQUMsY0FBYyxDQUFDLFVBQVUsRUFBRSxDQUFDO29CQUNqQyxJQUFJLENBQUMsY0FBYyxH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

package/dist_ts_web/elements/00group-chart/dees-chart-echarts-styles.d.ts

@@ -0,0 +1 @@
+export declare const echartsBaseStyles: import("@design.estate/dees-element").CSSResult[];

package/dist_ts_web/elements/00group-chart/dees-chart-echarts-styles.js

@@ -0,0 +1,36 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../00theme.js';
+export const echartsBaseStyles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css `
+    :host {
+      display: block;
+      height: 400px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      color: var(--dees-color-text-primary);
+      font-size: 14px;
+    }
+    dees-tile {
+      height: 100%;
+    }
+    .chartHeader {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      padding: 0 8px 0 16px;
+    }
+    .chartLabel {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.01em;
+      color: var(--dees-color-text-secondary);
+    }
+    .chartContainer {
+      position: absolute;
+      inset: 0;
+    }
+  `,
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGFydC1lY2hhcnRzLXN0eWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWNoYXJ0L2RlZXMtY2hhcnQtZWNoYXJ0cy1zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFbkQsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUc7SUFDL0Isa0JBQWtCO0lBQ2xCLFVBQVUsQ0FBQyxhQUFhO0lBQ3hCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCRjtDQUNGLENBQUMifQ==

package/dist_ts_web/elements/00group-chart/dees-chart-echarts-theme.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared theme utilities for ECharts-based chart components.
+ * Uses the centralized themeDefaults tokens so chart colors stay in sync
+ * with the rest of the dees-catalog design system.
+ *
+ * ECharts renders on <canvas> and cannot read CSS custom properties,
+ * so we reference the TypeScript source-of-truth (themeDefaults) directly.
+ */
+export declare function getEchartsSeriesColors(goBright: boolean): string[];
+export declare function getEchartsThemeOptions(goBright: boolean): Record<string, any>;
+/**
+ * Helper to get the resolved theme colors object for use in buildOption().
+ * Components can use this instead of hardcoding dark/light color values.
+ */
+export declare function getThemeColors(goBright: boolean): import("../00theme.js").IThemeColors;