@triptease/tt-bar-chart 1.0.7 → 1.1.1

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/src/TtBarChart.js

@@ -0,0 +1,239 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtBarChart = void 0;
+const lit_1 = require("lit");
+// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250
+const echarts = __importStar(require("echarts"));
+const decorators_js_1 = require("lit/decorators.js");
+const utils_js_1 = require("./utils.js");
+// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250
+const components_1 = require("echarts/components");
+const colors_js_1 = require("./colors.js");
+const tt_dataset_1 = require("@triptease/tt-dataset");
+const tt_data_point_1 = require("@triptease/tt-data-point");
+const constructChartData = (ttDatasetElements) => {
+    if (!ttDatasetElements.every(tt_dataset_1.isTtDataset)) {
+        throw new Error("Children of element 'tt-bar-chart' must be 'tt-dataset' elements.");
+    }
+    const datasets = ttDatasetElements.map((ttDataset) => {
+        const datasetLabel = ttDataset.getAttribute('label');
+        if (!datasetLabel)
+            throw new Error("Attribute 'label' on element 'tt-dataset' is required");
+        const ttDataPoints = Array.from(ttDataset.querySelectorAll('tt-data-point'));
+        if (!ttDataPoints.every(tt_data_point_1.isTtDataPoint)) {
+            throw new Error("Children of element 'tt-dataset' must be 'tt-data-point' elements");
+        }
+        const data = ttDataPoints.map((ttDataPoint) => {
+            const dataPointLabel = ttDataPoint.getAttribute('label');
+            if (!dataPointLabel)
+                throw new Error("Attribute 'label' on element 'tt-data-point' is required");
+            const valueRaw = ttDataPoint.getAttribute('value');
+            const value = valueRaw ? Number(valueRaw) : undefined;
+            if (value !== undefined && Number.isNaN(value)) {
+                throw new Error("Attribute 'value' on element 'tt-data-point' is not a valid number");
+            }
+            return { label: dataPointLabel, value };
+        });
+        return { label: datasetLabel, data };
+    });
+    return datasets;
+};
+class TtBarChart extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.direction = 'horizontal';
+        this.stacked = false;
+        this.loading = false;
+        this.width = '100%';
+        this.height = '100%';
+        this.chart = null;
+        this.slotObserver = null;
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div style="width: ${this.width}; height:${this.height};">
+        <div id=${this.id} style="width:${this.width}; height:${this.height};"></div>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+    handleSlotChange() {
+        this.slotObserver?.disconnect();
+        this.slotObserver = new MutationObserver(() => this.requestUpdate());
+        this.defaultSlot.assignedElements().forEach((el) => {
+            this.slotObserver.observe(el, { childList: true, attributes: true, subtree: true });
+        });
+        this.requestUpdate();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.slotObserver?.disconnect();
+    }
+    firstUpdated() {
+        if (this.chart === null) {
+            echarts.use([components_1.AriaComponent]);
+            const divElement = this.renderRoot.querySelector(`#${this.id}`);
+            if (!divElement) {
+                throw new Error('No div element');
+            }
+            this.chart = echarts.init(divElement);
+        }
+    }
+    updated() {
+        if (this.loadingPulseTimer) {
+            window.clearInterval(this.loadingPulseTimer);
+        }
+        if (this.loading && this.chart) {
+            this.setAttribute('aria-busy', 'true');
+            const pulseTimer = (0, utils_js_1.loadingAnimation)(this.chart, this.direction);
+            this.loadingPulseTimer = pulseTimer;
+        }
+        else {
+            this.removeAttribute('aria-busy');
+            const datasets = constructChartData(this.defaultSlot.assignedElements());
+            const labelsRaw = datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));
+            const labels = [...new Set(labelsRaw)];
+            const series = datasets.map((dataset, i) => ({
+                name: dataset.label,
+                type: 'bar',
+                data: labels.map((label) => {
+                    const point = dataset.data.find((dp) => dp.label === label);
+                    return point?.value ?? null;
+                }),
+                stack: this.stacked ? 'A' : undefined,
+                color: colors_js_1.defaultColorPalette[i],
+                cursor: 'default',
+            }));
+            const option = {
+                aria: {
+                    show: true,
+                },
+                legend: {
+                    show: datasets.length > 1,
+                    textStyle: {
+                        color: '#3b353b', //--text-400
+                    },
+                },
+                xAxis: {
+                    name: this.xAxisTitle,
+                    nameTextStyle: {
+                        lineHeight: 40,
+                        color: '#575157', //--text-300
+                    },
+                    nameLocation: 'center',
+                    type: this.direction === 'horizontal' ? 'value' : 'category',
+                    data: this.direction === 'horizontal' ? undefined : labels,
+                    axisLabel: {
+                        formatter: (value) => (0, utils_js_1.valueFormatter)(value, this.direction === 'horizontal' ? this.valuePrefix : undefined, this.direction === 'horizontal' ? this.valueSuffix : undefined),
+                        color: '#3b353b', //--text-400
+                    },
+                    splitLine: { show: this.direction === 'horizontal' },
+                },
+                yAxis: {
+                    name: this.yAxisTitle,
+                    nameTextStyle: {
+                        lineHeight: 40,
+                        color: '#575157', //--text-300
+                    },
+                    nameLocation: 'center',
+                    type: this.direction === 'horizontal' ? 'category' : 'value',
+                    data: this.direction === 'horizontal' ? labels : undefined,
+                    axisLabel: {
+                        formatter: (value) => (0, utils_js_1.valueFormatter)(value, this.direction === 'horizontal' ? undefined : this.valuePrefix, this.direction === 'horizontal' ? undefined : this.valueSuffix),
+                        color: '#3b353b', //--text-400
+                    },
+                    splitLine: { show: this.direction === 'vertical' },
+                },
+                grid: {
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    ...(datasets.length > 1 ? {} : { bottom: 0 }),
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow',
+                    },
+                    valueFormatter: (value) => (0, utils_js_1.valueFormatter)(value, this.valuePrefix, this.valueSuffix),
+                },
+                series,
+            };
+            this.chart.setOption(option, { notMerge: true });
+        }
+    }
+}
+exports.TtBarChart = TtBarChart;
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], TtBarChart.prototype, "direction", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'x-axis-title' })
+], TtBarChart.prototype, "xAxisTitle", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'y-axis-title' })
+], TtBarChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'stacked' })
+], TtBarChart.prototype, "stacked", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'loading' })
+], TtBarChart.prototype, "loading", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'width' })
+], TtBarChart.prototype, "width", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'height' })
+], TtBarChart.prototype, "height", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'value-prefix' })
+], TtBarChart.prototype, "valuePrefix", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'value-suffix' })
+], TtBarChart.prototype, "valueSuffix", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtBarChart.prototype, "chart", void 0);
+__decorate([
+    (0, decorators_js_1.query)('slot')
+], TtBarChart.prototype, "defaultSlot", void 0);
+//# sourceMappingURL=TtBarChart.js.map

package/dist/cjs/src/TtBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtBarChart.js","sourceRoot":"","sources":["../../../src/TtBarChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ChartDirection, Dataset } from './types.js';\nimport { loadingAnimation, valueFormatter } from './utils.js';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport { AriaComponent } from 'echarts/components';\nimport { defaultColorPalette } from './colors.js';\nimport { isTtDataset } from '@triptease/tt-dataset';\nimport { isTtDataPoint } from '@triptease/tt-data-point';\n\nconst constructChartData = (ttDatasetElements: Element[]) => {\n  if (!ttDatasetElements.every(isTtDataset)) {\n    throw new Error(\"Children of element 'tt-bar-chart' must be 'tt-dataset' elements.\");\n  }\n\n  const datasets: Dataset[] = ttDatasetElements.map((ttDataset) => {\n    const datasetLabel = ttDataset.getAttribute('label');\n    if (!datasetLabel) throw new Error(\"Attribute 'label' on element 'tt-dataset' is required\");\n\n    const ttDataPoints = Array.from(ttDataset.querySelectorAll('tt-data-point'));\n    if (!ttDataPoints.every(isTtDataPoint)) {\n      throw new Error(\"Children of element 'tt-dataset' must be 'tt-data-point' elements\");\n    }\n\n    const data = ttDataPoints.map((ttDataPoint) => {\n      const dataPointLabel = ttDataPoint.getAttribute('label');\n      if (!dataPointLabel) throw new Error(\"Attribute 'label' on element 'tt-data-point' is required\");\n\n      const valueRaw = ttDataPoint.getAttribute('value');\n      const value = valueRaw ? Number(valueRaw) : undefined;\n      if (value !== undefined && Number.isNaN(value)) {\n        throw new Error(\"Attribute 'value' on element 'tt-data-point' is not a valid number\");\n      }\n\n      return { label: dataPointLabel, value };\n    });\n\n    return { label: datasetLabel, data };\n  });\n\n  return datasets;\n};\n\nexport class TtBarChart extends LitElement {\n  @property({ type: String })\n  direction: ChartDirection = 'horizontal';\n\n  @property({ type: String, attribute: 'x-axis-title' })\n  xAxisTitle?: string;\n\n  @property({ type: String, attribute: 'y-axis-title' })\n  yAxisTitle?: string;\n\n  @property({ type: Boolean, attribute: 'stacked' })\n  stacked: boolean = false;\n\n  @property({ type: Boolean, attribute: 'loading' })\n  loading: boolean = false;\n\n  @property({ type: String, attribute: 'width' })\n  width: string = '100%';\n\n  @property({ type: String, attribute: 'height' })\n  height: string = '100%';\n\n  @property({ type: String, attribute: 'value-prefix' })\n  valuePrefix?: string;\n\n  @property({ type: String, attribute: 'value-suffix' })\n  valueSuffix?: string;\n\n  @state()\n  chart: echarts.ECharts | null = null;\n\n  @query('slot')\n  private defaultSlot!: HTMLSlotElement;\n\n  private loadingPulseTimer: number | undefined;\n  private slotObserver: MutationObserver | null = null;\n\n  render() {\n    return html`\n      <div style=\"width: ${this.width}; height:${this.height};\">\n        <div id=${this.id} style=\"width:${this.width}; height:${this.height};\"></div>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  protected handleSlotChange() {\n    this.slotObserver?.disconnect();\n    this.slotObserver = new MutationObserver(() => this.requestUpdate());\n    this.defaultSlot.assignedElements().forEach((el) => {\n      this.slotObserver!.observe(el, { childList: true, attributes: true, subtree: true });\n    });\n    this.requestUpdate();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.slotObserver?.disconnect();\n  }\n\n  protected firstUpdated() {\n    if (this.chart === null) {\n      echarts.use([AriaComponent]);\n      const divElement = this.renderRoot.querySelector(`#${this.id}`) as HTMLDivElement;\n\n      if (!divElement) {\n        throw new Error('No div element');\n      }\n\n      this.chart = echarts.init(divElement);\n    }\n  }\n\n  protected updated() {\n    if (this.loadingPulseTimer) {\n      window.clearInterval(this.loadingPulseTimer);\n    }\n\n    if (this.loading && this.chart) {\n      this.setAttribute('aria-busy', 'true');\n      const pulseTimer = loadingAnimation(this.chart, this.direction);\n      this.loadingPulseTimer = pulseTimer;\n    } else {\n      this.removeAttribute('aria-busy');\n\n      const datasets = constructChartData(this.defaultSlot.assignedElements());\n\n      const labelsRaw = datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));\n      const labels = [...new Set(labelsRaw)];\n\n      const series: echarts.SeriesOption[] = datasets.map((dataset, i) => ({\n        name: dataset.label,\n        type: 'bar',\n        data: labels.map((label) => {\n          const point = dataset.data.find((dp) => dp.label === label);\n          return point?.value ?? null;\n        }),\n        stack: this.stacked ? 'A' : undefined,\n        color: defaultColorPalette[i],\n        cursor: 'default',\n      }));\n\n      const option: echarts.EChartsOption = {\n        aria: {\n          show: true,\n        },\n        legend: {\n          show: datasets.length > 1,\n          textStyle: {\n            color: '#3b353b', //--text-400\n          },\n        },\n        xAxis: {\n          name: this.xAxisTitle,\n          nameTextStyle: {\n            lineHeight: 40,\n            color: '#575157', //--text-300\n          },\n          nameLocation: 'center',\n          type: this.direction === 'horizontal' ? 'value' : 'category',\n          data: this.direction === 'horizontal' ? undefined : labels,\n          axisLabel: {\n            formatter: (value: number | string) =>\n              valueFormatter(\n                value,\n                this.direction === 'horizontal' ? this.valuePrefix : undefined,\n                this.direction === 'horizontal' ? this.valueSuffix : undefined\n              ),\n            color: '#3b353b', //--text-400\n          },\n          splitLine: { show: this.direction === 'horizontal' },\n        },\n        yAxis: {\n          name: this.yAxisTitle,\n          nameTextStyle: {\n            lineHeight: 40,\n            color: '#575157', //--text-300\n          },\n          nameLocation: 'center',\n          type: this.direction === 'horizontal' ? 'category' : 'value',\n          data: this.direction === 'horizontal' ? labels : undefined,\n          axisLabel: {\n            formatter: (value: number | string) =>\n              valueFormatter(\n                value,\n                this.direction === 'horizontal' ? undefined : this.valuePrefix,\n                this.direction === 'horizontal' ? undefined : this.valueSuffix\n              ),\n            color: '#3b353b', //--text-400\n          },\n          splitLine: { show: this.direction === 'vertical' },\n        },\n        grid: {\n          left: 0,\n          right: 0,\n          top: 0,\n          ...(datasets.length > 1 ? {} : { bottom: 0 }),\n        },\n        tooltip: {\n          trigger: 'axis',\n          axisPointer: {\n            type: 'shadow',\n          },\n          valueFormatter: (value: number | string) => valueFormatter(value, this.valuePrefix, this.valueSuffix),\n        },\n        series,\n      };\n\n      this.chart.setOption(option, { notMerge: true });\n    }\n  }\n}\n"]}

package/dist/cjs/src/colors.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultColorPalette = void 0;
+exports.defaultColorPalette = ['#ED6E2E', '#1967D3', '#119EAE', '#283492', '#596B7A', '#4d35a1'];
+//# sourceMappingURL=colors.js.map

package/dist/cjs/src/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/colors.ts"],"names":[],"mappings":";;;AAAa,QAAA,mBAAmB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC","sourcesContent":["export const defaultColorPalette = ['#ED6E2E', '#1967D3', '#119EAE', '#283492', '#596B7A', '#4d35a1'];\n"]}

package/dist/cjs/src/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtBarChart = void 0;
+var tt_bar_chart_js_1 = require("./tt-bar-chart.js");
+Object.defineProperty(exports, "TtBarChart", { enumerable: true, get: function () { return tt_bar_chart_js_1.TtBarChart; } });
+__exportStar(require("./types.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,qDAA+C;AAAtC,6GAAA,UAAU,OAAA;AACnB,6CAA2B","sourcesContent":["export { TtBarChart } from './tt-bar-chart.js';\nexport * from './types.js';\n"]}

package/dist/cjs/src/tt-bar-chart.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtBarChart = void 0;
+const TtBarChart_js_1 = require("./TtBarChart.js");
+Object.defineProperty(exports, "TtBarChart", { enumerable: true, get: function () { return TtBarChart_js_1.TtBarChart; } });
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-bar-chart')) {
+        window.customElements.define('tt-bar-chart', TtBarChart_js_1.TtBarChart);
+    }
+}
+//# sourceMappingURL=tt-bar-chart.js.map

package/dist/cjs/src/tt-bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-bar-chart.js","sourceRoot":"","sources":["../../../src/tt-bar-chart.ts"],"names":[],"mappings":";;;AAAA,mDAA6C;AAQpC,2FARA,0BAAU,OAQA;AANnB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;QAC/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,0BAAU,CAAC,CAAC;IAC3D,CAAC;AACH,CAAC","sourcesContent":["import { TtBarChart } from './TtBarChart.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-bar-chart')) {\n    window.customElements.define('tt-bar-chart', TtBarChart);\n  }\n}\n\nexport { TtBarChart };\n"]}

package/dist/cjs/src/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtBarChart } from './TtBarChart.js';\n\nexport interface DataPoint {\n  label: string;\n  value: number | undefined;\n}\n\nexport interface Dataset {\n  label: string;\n  data: DataPoint[];\n}\n\nexport type ChartDirection = 'horizontal' | 'vertical';\n\ninterface TtBarChartExternalAttributes {\n  id: string;\n  width?: string;\n  height?: string;\n  direction?: ChartDirection;\n  'x-axis-title'?: string;\n  'y-axis-title'?: string;\n  stacked?: boolean;\n  loading?: boolean;\n  'value-prefix'?: string;\n  'value-suffix'?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-bar-chart': TtBarChart;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-bar-chart': TtBarChartExternalAttributes & { children?: Element | Element[]; style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-bar-chart': TtBarChartExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          children?: React.ReactNode;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/cjs/src/utils.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadingAnimation = exports.valueFormatter = void 0;
+const numericalAxesFormatter = new Intl.NumberFormat(undefined, { notation: 'compact' });
+const valueFormatter = (value, prefix, suffix) => {
+    let formattedValue = value;
+    if (typeof value === 'number') {
+        formattedValue = numericalAxesFormatter.format(value);
+    }
+    return `${prefix ?? ''}${formattedValue ?? value}${suffix ?? ''}`;
+};
+exports.valueFormatter = valueFormatter;
+const SKELETON_ITEMS = 4;
+const PULSE_INTERVAL = 1500;
+const loadingAnimation = (chart, direction) => {
+    const isHorizontal = direction === 'horizontal';
+    const generateData = () => Array.from({ length: SKELETON_ITEMS }, () => Math.round(30 + Math.random() * 50));
+    const baseAxis = {
+        axisLabel: { show: false },
+        axisTick: { show: false },
+        axisLine: { show: false },
+        splitLine: { show: false },
+    };
+    chart.setOption({
+        animation: true,
+        animationDuration: 800,
+        animationEasing: 'cubicInOut',
+        grid: {
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            containLabel: false,
+        },
+        xAxis: isHorizontal
+            ? { ...baseAxis, type: 'value' }
+            : {
+                ...baseAxis,
+                type: 'category',
+                data: Array.from({ length: SKELETON_ITEMS }, () => ''),
+            },
+        yAxis: isHorizontal
+            ? {
+                ...baseAxis,
+                type: 'category',
+                data: Array.from({ length: SKELETON_ITEMS }, () => ''),
+            }
+            : { ...baseAxis, type: 'value' },
+        series: [
+            {
+                type: 'bar',
+                data: generateData(),
+                silent: true,
+                animationDurationUpdate: 800,
+                itemStyle: {
+                    color: '#e5e7eb',
+                },
+                emphasis: { disabled: true },
+            },
+        ],
+    }, true);
+    const pulseTimer = window.setInterval(() => {
+        chart.setOption({
+            series: [{ data: generateData() }],
+        });
+    }, PULSE_INTERVAL);
+    return pulseTimer;
+};
+exports.loadingAnimation = loadingAnimation;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/src/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { ChartDirection } from './types.js';\n\nconst numericalAxesFormatter = new Intl.NumberFormat(undefined, { notation: 'compact' });\n\nexport const valueFormatter = (value: number | string, prefix: string | undefined, suffix: string | undefined) => {\n  let formattedValue = value;\n\n  if (typeof value === 'number') {\n    formattedValue = numericalAxesFormatter.format(value);\n  }\n\n  return `${prefix ?? ''}${formattedValue ?? value}${suffix ?? ''}`;\n};\n\nconst SKELETON_ITEMS = 4;\nconst PULSE_INTERVAL = 1500;\n\nexport const loadingAnimation = (chart: echarts.ECharts, direction: ChartDirection) => {\n  const isHorizontal = direction === 'horizontal';\n\n  const generateData = () => Array.from({ length: SKELETON_ITEMS }, () => Math.round(30 + Math.random() * 50));\n\n  const baseAxis = {\n    axisLabel: { show: false },\n    axisTick: { show: false },\n    axisLine: { show: false },\n    splitLine: { show: false },\n  };\n\n  chart.setOption(\n    {\n      animation: true,\n      animationDuration: 800,\n      animationEasing: 'cubicInOut',\n\n      grid: {\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n        containLabel: false,\n      },\n\n      xAxis: isHorizontal\n        ? { ...baseAxis, type: 'value' }\n        : {\n            ...baseAxis,\n            type: 'category',\n            data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n          },\n\n      yAxis: isHorizontal\n        ? {\n            ...baseAxis,\n            type: 'category',\n            data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n          }\n        : { ...baseAxis, type: 'value' },\n\n      series: [\n        {\n          type: 'bar',\n          data: generateData(),\n          silent: true,\n          animationDurationUpdate: 800,\n          itemStyle: {\n            color: '#e5e7eb',\n          },\n          emphasis: { disabled: true },\n        },\n      ],\n    },\n    true\n  );\n\n  const pulseTimer = window.setInterval(() => {\n    chart.setOption({\n      series: [{ data: generateData() }],\n    });\n  }, PULSE_INTERVAL);\n\n  return pulseTimer;\n};\n"]}

package/dist/esm/src/TtBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtBarChart.js","sourceRoot":"","sources":["../../../src/TtBarChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ChartDirection, Dataset } from './types.js';\nimport { loadingAnimation, valueFormatter } from './utils.js';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport { AriaComponent } from 'echarts/components';\nimport { defaultColorPalette } from './colors.js';\nimport { isTtDataset } from '@triptease/tt-dataset';\nimport { isTtDataPoint } from '@triptease/tt-data-point';\n\nconst constructChartData = (ttDatasetElements: Element[]) => {\n  if (!ttDatasetElements.every(isTtDataset)) {\n    throw new Error(\"Children of element 'tt-bar-chart' must be 'tt-dataset' elements.\");\n  }\n\n  const datasets: Dataset[] = ttDatasetElements.map((ttDataset) => {\n    const datasetLabel = ttDataset.getAttribute('label');\n    if (!datasetLabel) throw new Error(\"Attribute 'label' on element 'tt-dataset' is required\");\n\n    const ttDataPoints = Array.from(ttDataset.querySelectorAll('tt-data-point'));\n    if (!ttDataPoints.every(isTtDataPoint)) {\n      throw new Error(\"Children of element 'tt-dataset' must be 'tt-data-point' elements\");\n    }\n\n    const data = ttDataPoints.map((ttDataPoint) => {\n      const dataPointLabel = ttDataPoint.getAttribute('label');\n      if (!dataPointLabel) throw new Error(\"Attribute 'label' on element 'tt-data-point' is required\");\n\n      const valueRaw = ttDataPoint.getAttribute('value');\n      const value = valueRaw ? Number(valueRaw) : undefined;\n      if (value !== undefined && Number.isNaN(value)) {\n        throw new Error(\"Attribute 'value' on element 'tt-data-point' is not a valid number\");\n      }\n\n      return { label: dataPointLabel, value };\n    });\n\n    return { label: datasetLabel, data };\n  });\n\n  return datasets;\n};\n\nexport class TtBarChart extends LitElement {\n  @property({ type: String })\n  direction: ChartDirection = 'horizontal';\n\n  @property({ type: String, attribute: 'x-axis-title' })\n  xAxisTitle?: string;\n\n  @property({ type: String, attribute: 'y-axis-title' })\n  yAxisTitle?: string;\n\n  @property({ type: Boolean, attribute: 'stacked' })\n  stacked: boolean = false;\n\n  @property({ type: Boolean, attribute: 'loading' })\n  loading: boolean = false;\n\n  @property({ type: String, attribute: 'width' })\n  width: string = '100%';\n\n  @property({ type: String, attribute: 'height' })\n  height: string = '100%';\n\n  @property({ type: String, attribute: 'value-prefix' })\n  valuePrefix?: string;\n\n  @property({ type: String, attribute: 'value-suffix' })\n  valueSuffix?: string;\n\n  @state()\n  chart: echarts.ECharts | null = null;\n\n  @query('slot')\n  private defaultSlot!: HTMLSlotElement;\n\n  private loadingPulseTimer: number | undefined;\n  private slotObserver: MutationObserver | null = null;\n\n  render() {\n    return html`\n      <div style=\"width: ${this.width}; height:${this.height};\">\n        <div id=${this.id} style=\"width:${this.width}; height:${this.height};\"></div>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  protected handleSlotChange() {\n    this.slotObserver?.disconnect();\n    this.slotObserver = new MutationObserver(() => this.requestUpdate());\n    this.defaultSlot.assignedElements().forEach((el) => {\n      this.slotObserver!.observe(el, { childList: true, attributes: true, subtree: true });\n    });\n    this.requestUpdate();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.slotObserver?.disconnect();\n  }\n\n  protected firstUpdated() {\n    if (this.chart === null) {\n      echarts.use([AriaComponent]);\n      const divElement = this.renderRoot.querySelector(`#${this.id}`) as HTMLDivElement;\n\n      if (!divElement) {\n        throw new Error('No div element');\n      }\n\n      this.chart = echarts.init(divElement);\n    }\n  }\n\n  protected updated() {\n    if (this.loadingPulseTimer) {\n      window.clearInterval(this.loadingPulseTimer);\n    }\n\n    if (this.loading && this.chart) {\n      this.setAttribute('aria-busy', 'true');\n      const pulseTimer = loadingAnimation(this.chart, this.direction);\n      this.loadingPulseTimer = pulseTimer;\n    } else {\n      this.removeAttribute('aria-busy');\n\n      const datasets = constructChartData(this.defaultSlot.assignedElements());\n\n      const labelsRaw = datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));\n      const labels = [...new Set(labelsRaw)];\n\n      const series: echarts.SeriesOption[] = datasets.map((dataset, i) => ({\n        name: dataset.label,\n        type: 'bar',\n        data: labels.map((label) => {\n          const point = dataset.data.find((dp) => dp.label === label);\n          return point?.value ?? null;\n        }),\n        stack: this.stacked ? 'A' : undefined,\n        color: defaultColorPalette[i],\n        cursor: 'default',\n      }));\n\n      const option: echarts.EChartsOption = {\n        aria: {\n          show: true,\n        },\n        legend: {\n          show: datasets.length > 1,\n          textStyle: {\n            color: '#3b353b', //--text-400\n          },\n        },\n        xAxis: {\n          name: this.xAxisTitle,\n          nameTextStyle: {\n            lineHeight: 40,\n            color: '#575157', //--text-300\n          },\n          nameLocation: 'center',\n          type: this.direction === 'horizontal' ? 'value' : 'category',\n          data: this.direction === 'horizontal' ? undefined : labels,\n          axisLabel: {\n            formatter: (value: number | string) =>\n              valueFormatter(\n                value,\n                this.direction === 'horizontal' ? this.valuePrefix : undefined,\n                this.direction === 'horizontal' ? this.valueSuffix : undefined\n              ),\n            color: '#3b353b', //--text-400\n          },\n          splitLine: { show: this.direction === 'horizontal' },\n        },\n        yAxis: {\n          name: this.yAxisTitle,\n          nameTextStyle: {\n            lineHeight: 40,\n            color: '#575157', //--text-300\n          },\n          nameLocation: 'center',\n          type: this.direction === 'horizontal' ? 'category' : 'value',\n          data: this.direction === 'horizontal' ? labels : undefined,\n          axisLabel: {\n            formatter: (value: number | string) =>\n              valueFormatter(\n                value,\n                this.direction === 'horizontal' ? undefined : this.valuePrefix,\n                this.direction === 'horizontal' ? undefined : this.valueSuffix\n              ),\n            color: '#3b353b', //--text-400\n          },\n          splitLine: { show: this.direction === 'vertical' },\n        },\n        grid: {\n          left: 0,\n          right: 0,\n          top: 0,\n          ...(datasets.length > 1 ? {} : { bottom: 0 }),\n        },\n        tooltip: {\n          trigger: 'axis',\n          axisPointer: {\n            type: 'shadow',\n          },\n          valueFormatter: (value: number | string) => valueFormatter(value, this.valuePrefix, this.valueSuffix),\n        },\n        series,\n      };\n\n      this.chart.setOption(option, { notMerge: true });\n    }\n  }\n}\n"]}

package/dist/esm/src/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC","sourcesContent":["export const defaultColorPalette = ['#ED6E2E', '#1967D3', '#119EAE', '#283492', '#596B7A', '#4d35a1'];\n"]}

package/dist/esm/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,cAAc,YAAY,CAAC","sourcesContent":["export { TtBarChart } from './tt-bar-chart.js';\nexport * from './types.js';\n"]}

package/dist/esm/src/tt-bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-bar-chart.js","sourceRoot":"","sources":["../../../src/tt-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;QAC/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;IAC3D,CAAC;AACH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { TtBarChart } from './TtBarChart.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-bar-chart')) {\n    window.customElements.define('tt-bar-chart', TtBarChart);\n  }\n}\n\nexport { TtBarChart };\n"]}

package/dist/esm/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtBarChart } from './TtBarChart.js';\n\nexport interface DataPoint {\n  label: string;\n  value: number | undefined;\n}\n\nexport interface Dataset {\n  label: string;\n  data: DataPoint[];\n}\n\nexport type ChartDirection = 'horizontal' | 'vertical';\n\ninterface TtBarChartExternalAttributes {\n  id: string;\n  width?: string;\n  height?: string;\n  direction?: ChartDirection;\n  'x-axis-title'?: string;\n  'y-axis-title'?: string;\n  stacked?: boolean;\n  loading?: boolean;\n  'value-prefix'?: string;\n  'value-suffix'?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-bar-chart': TtBarChart;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-bar-chart': TtBarChartExternalAttributes & { children?: Element | Element[]; style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-bar-chart': TtBarChartExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          children?: React.ReactNode;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/esm/src/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { ChartDirection } from './types.js';\n\nconst numericalAxesFormatter = new Intl.NumberFormat(undefined, { notation: 'compact' });\n\nexport const valueFormatter = (value: number | string, prefix: string | undefined, suffix: string | undefined) => {\n  let formattedValue = value;\n\n  if (typeof value === 'number') {\n    formattedValue = numericalAxesFormatter.format(value);\n  }\n\n  return `${prefix ?? ''}${formattedValue ?? value}${suffix ?? ''}`;\n};\n\nconst SKELETON_ITEMS = 4;\nconst PULSE_INTERVAL = 1500;\n\nexport const loadingAnimation = (chart: echarts.ECharts, direction: ChartDirection) => {\n  const isHorizontal = direction === 'horizontal';\n\n  const generateData = () => Array.from({ length: SKELETON_ITEMS }, () => Math.round(30 + Math.random() * 50));\n\n  const baseAxis = {\n    axisLabel: { show: false },\n    axisTick: { show: false },\n    axisLine: { show: false },\n    splitLine: { show: false },\n  };\n\n  chart.setOption(\n    {\n      animation: true,\n      animationDuration: 800,\n      animationEasing: 'cubicInOut',\n\n      grid: {\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n        containLabel: false,\n      },\n\n      xAxis: isHorizontal\n        ? { ...baseAxis, type: 'value' }\n        : {\n            ...baseAxis,\n            type: 'category',\n            data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n          },\n\n      yAxis: isHorizontal\n        ? {\n            ...baseAxis,\n            type: 'category',\n            data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n          }\n        : { ...baseAxis, type: 'value' },\n\n      series: [\n        {\n          type: 'bar',\n          data: generateData(),\n          silent: true,\n          animationDurationUpdate: 800,\n          itemStyle: {\n            color: '#e5e7eb',\n          },\n          emphasis: { disabled: true },\n        },\n      ],\n    },\n    true\n  );\n\n  const pulseTimer = window.setInterval(() => {\n    chart.setOption({\n      series: [{ data: generateData() }],\n    });\n  }, PULSE_INTERVAL);\n\n  return pulseTimer;\n};\n"]}

package/package.json

@@ -3,37 +3,42 @@
   "description": "Webcomponent tt-bar-chart following open-wc recommendations",
   "license": "MIT",
   "author": "tt-bar-chart",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "type": "module",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
+  "main": "dist/esm/src/index.js",
+  "module": "dist/esm/src/index.js",
   "exports": {
     ".": {
-      "import": "./dist/src/index.js",
-      "types": "./dist/src/types.d.ts"
+      "types": "./dist/esm/src/index.d.ts",
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
     },
     "./types": {
-      "import": "./dist/src/types.js",
-      "types": "./dist/src/types.d.ts"
+      "types": "./dist/esm/src/types.d.ts",
+      "import": "./dist/esm/src/types.js",
+      "require": "./dist/cjs/src/types.js"
     }
   },
   "files": [
-    "dist/src"
+    "dist/esm",
+    "dist/cjs"
   ],
   "scripts": {
     "analyze": "cem analyze --litelement",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
     "build": "yarn build:node && yarn build:web && npm run analyze -- --exclude dist",
-    "build:node": "tsc",
+    "build:esm": "tsc",
+    "build:cjs": "tsc -p tsconfig.cjs.json && node ../../scripts/create-cjs-package.mjs",
+    "build:node": "yarn build:esm && yarn build:cjs",
     "build:node:watch": "tsc --watch",
     "build:web": "node ../../scripts/esbuild.mjs",
-    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "yarn build:node && npm run analyze -- --exclude dist",
     "test": "yarn playwright install && vitest run --config=./vitest.browser.config.mjs",
     "test:watch": "vitest  --config=./vitest.browser.config.mjs"
   },
   "dependencies": {
-    "@triptease/tt-data-point": "1.0.1",
-    "@triptease/tt-dataset": "1.0.2",
+    "@triptease/tt-data-point": "1.1.1",
+    "@triptease/tt-dataset": "1.1.1",
     "echarts": "^6.0.0",
     "lit": "^3.1.4"
   },

package/dist/src/TtBarChart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TtBarChart.js","sourceRoot":"","sources":["../../src/TtBarChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ChartDirection, Dataset } from './types.js';\nimport { loadingAnimation, valueFormatter } from './utils.js';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport { AriaComponent } from 'echarts/components';\nimport { defaultColorPalette } from './colors.js';\nimport { isTtDataset } from '@triptease/tt-dataset';\nimport { isTtDataPoint } from '@triptease/tt-data-point';\n\nconst constructChartData = (ttDatasetElements: Element[]) => {\n  if (!ttDatasetElements.every(isTtDataset)) {\n    throw new Error(\"Children of element 'tt-bar-chart' must be 'tt-dataset' elements.\");\n  }\n\n  const datasets: Dataset[] = ttDatasetElements.map((ttDataset) => {\n    const datasetLabel = ttDataset.getAttribute('label');\n    if (!datasetLabel) throw new Error(\"Attribute 'label' on element 'tt-dataset' is required\");\n\n    const ttDataPoints = Array.from(ttDataset.querySelectorAll('tt-data-point'));\n    if (!ttDataPoints.every(isTtDataPoint)) {\n      throw new Error(\"Children of element 'tt-dataset' must be 'tt-data-point' elements\");\n    }\n\n    const data = ttDataPoints.map((ttDataPoint) => {\n      const dataPointLabel = ttDataPoint.getAttribute('label');\n      if (!dataPointLabel) throw new Error(\"Attribute 'label' on element 'tt-data-point' is required\");\n\n      const valueRaw = ttDataPoint.getAttribute('value');\n      const value = valueRaw ? Number(valueRaw) : undefined;\n      if (value !== undefined && Number.isNaN(value)) {\n        throw new Error(\"Attribute 'value' on element 'tt-data-point' is not a valid number\");\n      }\n\n      return { label: dataPointLabel, value };\n    });\n\n    return { label: datasetLabel, data };\n  });\n\n  return datasets;\n};\n\nexport class TtBarChart extends LitElement {\n  @property({ type: String })\n  direction: ChartDirection = 'horizontal';\n\n  @property({ type: String, attribute: 'x-axis-title' })\n  xAxisTitle?: string;\n\n  @property({ type: String, attribute: 'y-axis-title' })\n  yAxisTitle?: string;\n\n  @property({ type: Boolean, attribute: 'stacked' })\n  stacked: boolean = false;\n\n  @property({ type: Boolean, attribute: 'loading' })\n  loading: boolean = false;\n\n  @property({ type: String, attribute: 'width' })\n  width: string = '100%';\n\n  @property({ type: String, attribute: 'height' })\n  height: string = '100%';\n\n  @property({ type: String, attribute: 'value-prefix' })\n  valuePrefix?: string;\n\n  @property({ type: String, attribute: 'value-suffix' })\n  valueSuffix?: string;\n\n  @state()\n  chart: echarts.ECharts | null = null;\n\n  @query('slot')\n  private defaultSlot!: HTMLSlotElement;\n\n  private loadingPulseTimer: number | undefined;\n  private slotObserver: MutationObserver | null = null;\n\n  render() {\n    return html`\n      <div style=\"width: ${this.width}; height:${this.height};\">\n        <div id=${this.id} style=\"width:${this.width}; height:${this.height};\"></div>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  protected handleSlotChange() {\n    this.slotObserver?.disconnect();\n    this.slotObserver = new MutationObserver(() => this.requestUpdate());\n    this.defaultSlot.assignedElements().forEach((el) => {\n      this.slotObserver!.observe(el, { childList: true, attributes: true, subtree: true });\n    });\n    this.requestUpdate();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.slotObserver?.disconnect();\n  }\n\n  protected firstUpdated() {\n    if (this.chart === null) {\n      echarts.use([AriaComponent]);\n      const divElement = this.renderRoot.querySelector(`#${this.id}`) as HTMLDivElement;\n\n      if (!divElement) {\n        throw new Error('No div element');\n      }\n\n      this.chart = echarts.init(divElement);\n    }\n  }\n\n  protected updated() {\n    if (this.loadingPulseTimer) {\n      window.clearInterval(this.loadingPulseTimer);\n    }\n\n    if (this.loading && this.chart) {\n      this.setAttribute('aria-busy', 'true');\n      const pulseTimer = loadingAnimation(this.chart, this.direction);\n      this.loadingPulseTimer = pulseTimer;\n    } else {\n      this.removeAttribute('aria-busy');\n\n      const datasets = constructChartData(this.defaultSlot.assignedElements());\n\n      const labelsRaw = datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));\n      const labels = [...new Set(labelsRaw)];\n\n      const series: echarts.SeriesOption[] = datasets.map((dataset, i) => ({\n        name: dataset.label,\n        type: 'bar',\n        data: labels.map((label) => {\n          const point = dataset.data.find((dp) => dp.label === label);\n          return point?.value ?? null;\n        }),\n        stack: this.stacked ? 'A' : undefined,\n        color: defaultColorPalette[i],\n        cursor: 'default',\n      }));\n\n      const option: echarts.EChartsOption = {\n        aria: {\n          show: true,\n        },\n        legend: {\n          show: datasets.length > 1,\n          textStyle: {\n            color: '#3b353b', //--text-400\n          },\n        },\n        xAxis: {\n          name: this.xAxisTitle,\n          nameTextStyle: {\n            lineHeight: 40,\n            color: '#575157', //--text-300\n          },\n          nameLocation: 'center',\n          type: this.direction === 'horizontal' ? 'value' : 'category',\n          data: this.direction === 'horizontal' ? undefined : labels,\n          axisLabel: {\n            formatter: (value: number | string) =>\n              valueFormatter(\n                value,\n                this.direction === 'horizontal' ? this.valuePrefix : undefined,\n                this.direction === 'horizontal' ? this.valueSuffix : undefined\n              ),\n            color: '#3b353b', //--text-400\n          },\n          splitLine: { show: this.direction === 'horizontal' },\n        },\n        yAxis: {\n          name: this.yAxisTitle,\n          nameTextStyle: {\n            lineHeight: 40,\n            color: '#575157', //--text-300\n          },\n          nameLocation: 'center',\n          type: this.direction === 'horizontal' ? 'category' : 'value',\n          data: this.direction === 'horizontal' ? labels : undefined,\n          axisLabel: {\n            formatter: (value: number | string) =>\n              valueFormatter(\n                value,\n                this.direction === 'horizontal' ? undefined : this.valuePrefix,\n                this.direction === 'horizontal' ? undefined : this.valueSuffix\n              ),\n            color: '#3b353b', //--text-400\n          },\n          splitLine: { show: this.direction === 'vertical' },\n        },\n        grid: {\n          left: 0,\n          right: 0,\n          top: 0,\n          ...(datasets.length > 1 ? {} : { bottom: 0 }),\n        },\n        tooltip: {\n          trigger: 'axis',\n          axisPointer: {\n            type: 'shadow',\n          },\n          valueFormatter: (value: number | string) => valueFormatter(value, this.valuePrefix, this.valueSuffix),\n        },\n        series,\n      };\n\n      this.chart.setOption(option, { notMerge: true });\n    }\n  }\n}\n"]}

package/dist/src/colors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC","sourcesContent":["export const defaultColorPalette = ['#ED6E2E', '#1967D3', '#119EAE', '#283492', '#596B7A', '#4d35a1'];\n"]}

package/dist/src/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,cAAc,YAAY,CAAC","sourcesContent":["export { TtBarChart } from './tt-bar-chart.js';\nexport * from './types.js';\n"]}

package/dist/src/tt-bar-chart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tt-bar-chart.js","sourceRoot":"","sources":["../../src/tt-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;QAC/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;IAC3D,CAAC;AACH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { TtBarChart } from './TtBarChart.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-bar-chart')) {\n    window.customElements.define('tt-bar-chart', TtBarChart);\n  }\n}\n\nexport { TtBarChart };\n"]}

package/dist/src/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtBarChart } from './TtBarChart.js';\n\nexport interface DataPoint {\n  label: string;\n  value: number | undefined;\n}\n\nexport interface Dataset {\n  label: string;\n  data: DataPoint[];\n}\n\nexport type ChartDirection = 'horizontal' | 'vertical';\n\ninterface TtBarChartExternalAttributes {\n  id: string;\n  width?: string;\n  height?: string;\n  direction?: ChartDirection;\n  'x-axis-title'?: string;\n  'y-axis-title'?: string;\n  stacked?: boolean;\n  loading?: boolean;\n  'value-prefix'?: string;\n  'value-suffix'?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-bar-chart': TtBarChart;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-bar-chart': TtBarChartExternalAttributes & { children?: Element | Element[]; style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-bar-chart': TtBarChartExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          children?: React.ReactNode;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/src/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { ChartDirection } from './types.js';\n\nconst numericalAxesFormatter = new Intl.NumberFormat(undefined, { notation: 'compact' });\n\nexport const valueFormatter = (value: number | string, prefix: string | undefined, suffix: string | undefined) => {\n  let formattedValue = value;\n\n  if (typeof value === 'number') {\n    formattedValue = numericalAxesFormatter.format(value);\n  }\n\n  return `${prefix ?? ''}${formattedValue ?? value}${suffix ?? ''}`;\n};\n\nconst SKELETON_ITEMS = 4;\nconst PULSE_INTERVAL = 1500;\n\nexport const loadingAnimation = (chart: echarts.ECharts, direction: ChartDirection) => {\n  const isHorizontal = direction === 'horizontal';\n\n  const generateData = () => Array.from({ length: SKELETON_ITEMS }, () => Math.round(30 + Math.random() * 50));\n\n  const baseAxis = {\n    axisLabel: { show: false },\n    axisTick: { show: false },\n    axisLine: { show: false },\n    splitLine: { show: false },\n  };\n\n  chart.setOption(\n    {\n      animation: true,\n      animationDuration: 800,\n      animationEasing: 'cubicInOut',\n\n      grid: {\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n        containLabel: false,\n      },\n\n      xAxis: isHorizontal\n        ? { ...baseAxis, type: 'value' }\n        : {\n            ...baseAxis,\n            type: 'category',\n            data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n          },\n\n      yAxis: isHorizontal\n        ? {\n            ...baseAxis,\n            type: 'category',\n            data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n          }\n        : { ...baseAxis, type: 'value' },\n\n      series: [\n        {\n          type: 'bar',\n          data: generateData(),\n          silent: true,\n          animationDurationUpdate: 800,\n          itemStyle: {\n            color: '#e5e7eb',\n          },\n          emphasis: { disabled: true },\n        },\n      ],\n    },\n    true\n  );\n\n  const pulseTimer = window.setInterval(() => {\n    chart.setOption({\n      series: [{ data: generateData() }],\n    });\n  }, PULSE_INTERVAL);\n\n  return pulseTimer;\n};\n"]}