@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/molecules/tttx-chart/tttx-chart.js

@@ -1,793 +1,793 @@
-import { h } from '@stencil/core';
-import Chart from 'chart.js/auto';
-import 'chartjs-adapter-date-fns';
-export class TttxChart {
-  constructor() {
-    this.chartType = undefined;
-    this.chartData = undefined;
-    this.chartOptions = undefined;
-    this.loading = false;
-    this.error = undefined;
-    this.fallbackText = 'No data available';
-    this.width = '100%';
-    this.height = 'auto';
-    this.isYAxisPercentageValues = false;
-    this.showActiveSegmentLabel = false;
-    this.initialActiveIndex = 0;
-    this.activeSegmentChangeCallback = undefined;
-    this.exportable = false;
-    this.chartInstance = undefined;
-    this.showPngSvgExport = false;
-    this.selectedSegmentIndex = null;
-    this.hoverSegmentIndex = null;
-  }
-  handleUpdate(newData) {
-    if (!newData || !newData.datasets || newData.datasets.length === 0) {
-      this.destroyChart();
-      return;
-    }
-    if (this.chartType === 'line') {
-      setTimeout(() => {
-        this.renderChart();
-      }, 0);
-      return;
-    }
-    if (this.chartType === 'doughnut-v2') {
-      if (this.hasChartDataChanged()) {
-        this.renderChart();
-        this.previousChartData = this.deepClone(this.chartData);
-      }
-      return;
-    }
-    this.renderChart();
-  }
-  componentDidLoad() {
-    if (this.chartType === 'doughnut-v2') {
-      this.previousChartData = this.deepClone(this.chartData);
-    }
-    this.renderChart();
-    this.notifyActiveSegment();
-  }
-  hasChartDataChanged() {
-    if (!this.previousChartData)
-      return true;
-    try {
-      return JSON.stringify(this.previousChartData) !== JSON.stringify(this.chartData);
-    }
-    catch (_a) {
-      return true;
-    }
-  }
-  deepClone(obj) {
-    try {
-      return JSON.parse(JSON.stringify(obj));
-    }
-    catch (_a) {
-      return obj;
-    }
-  }
-  disconnectedCallback() {
-    this.destroyChart();
-  }
-  renderChart() {
-    var _a, _b, _c;
-    if (!this.canvasEl || !this.chartData || !this.chartType)
-      return;
-    this.destroyChart();
-    const chartData = Object.assign(Object.assign({}, this.chartData), { datasets: ((_a = this.chartData.datasets) === null || _a === void 0 ? void 0 : _a.map(d => (Object.assign({}, d)))) || [] });
-    const config = {
-      type: this.getChartJsType(),
-      data: chartData,
-      options: this.getChartOptions(),
-      plugins: []
-    };
-    if (this.chartType === 'doughnut' || this.chartType === 'semi-gauge' || this.chartType === 'doughnut-v2') {
-      const total = ((_c = (_b = chartData.datasets[0]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.map((d) => Number(d) || 0).reduce((a, b) => a + b, 0)) || 0;
-      config.plugins.push(this.getCenterTextPlugin(total.toLocaleString()));
-    }
-    if (this.chartType === 'doughnut-v2') {
-      config.plugins.push(this.getLegendHoverPlugin());
-    }
-    // create chart
-    this.chartInstance = new Chart(this.canvasEl, config);
-    // Initialize colors for doughnut-v2
-    if (this.chartType === 'doughnut-v2') {
-      this.chartInstance.setDatasetVisibility(0, true);
-      this.updateChartColors();
-    }
-  }
-  destroyChart() {
-    if (this.chartInstance) {
-      this.chartInstance.destroy();
-      this.chartInstance = undefined;
-    }
-  }
-  getChartJsType() {
-    if (this.chartType === 'semi-gauge' || this.chartType === 'doughnut-v2')
-      return 'doughnut';
-    return this.chartType;
-  }
-  getBaseOptions() {
-    return {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: true,
-          position: 'bottom',
-          labels: {
-            usePointStyle: true,
-            pointStyle: 'circle',
-            font: {
-              size: 14
-            }
-          },
-        },
-        tooltip: {
-          callbacks: {
-            label: (ctx) => {
-              const label = ctx.label || ctx.dataset.label || '';
-              // Convert value to number and fix to 2 decimal places
-              const value = Number(ctx.raw);
-              const formattedValue = isNaN(value) ? ctx.formattedValue : value.toFixed(2);
-              return `${label}: ${formattedValue}`;
-            },
-          },
-          backgroundColor: '#17272B'
-        },
-      },
-    };
-  }
-  getLineChartConfig() {
-    const startOfCurrentMonth = new Date();
-    startOfCurrentMonth.setDate(1);
-    startOfCurrentMonth.setHours(0, 0, 0, 0);
-    return {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: { duration: 0 },
-      elements: {
-        point: { radius: 0, hoverRadius: 4 },
-      },
-      plugins: {
-        legend: {
-          labels: {
-            padding: 20,
-            generateLabels: (chart) => {
-              return chart.data.datasets.map((dataset, i) => ({
-                text: dataset.label || '',
-                strokeStyle: dataset.borderColor,
-                fillStyle: dataset.backgroundColor || 'transparent',
-                lineDash: dataset.borderDash || [],
-                lineWidth: dataset.borderWidth || 2,
-                hidden: !chart.isDatasetVisible(i),
-                datasetIndex: i,
-                pointStyle: 'line',
-              }));
-            },
-          },
-        },
-        tooltip: {
-          mode: 'index',
-          intersect: false,
-          backgroundColor: '#17272B',
-          titleFont: { size: 14, weight: 'bold' },
-          bodyFont: { size: 12 },
-          callbacks: {
-            title: (context) => {
-              var _a, _b;
-              if (!context || !context.length)
-                return '';
-              const date = new Date((_b = (_a = context[0].parsed) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : context[0].label);
-              return date.toLocaleDateString(undefined, {
-                day: '2-digit',
-                month: 'short',
-                year: 'numeric',
-              });
-            },
-            label: (ctx) => {
-              const rawValue = ctx.parsed && ctx.parsed.y !== undefined ? ctx.parsed.y : ctx.raw;
-              // Format to max 2 decimal places
-              const value = Number(rawValue);
-              const formattedValue = isNaN(value) ? rawValue : value.toFixed(2);
-              return `${ctx.dataset.label}: ${formattedValue}${this.isYAxisPercentageValues ? '%' : ''}`;
-            },
-            labelColor: (ctx) => {
-              if (ctx.dataset.label !== 'Overall') {
-                return {
-                  borderWidth: 2
-                };
-              }
-              return {
-                borderWidth: 2,
-                borderColor: ctx.dataset.borderColor,
-                backgroundColor: ctx.dataset.borderColor,
-              };
-            }
-          },
-        },
-      },
-      interaction: {
-        mode: 'index',
-        intersect: false,
-      },
-      scales: {
-        x: {
-          type: 'time',
-          time: {
-            unit: 'month',
-            displayFormats: {
-              month: 'MMM yyyy',
-            },
-            tooltipFormat: 'dd MMM yyyy',
-          },
-          grid: { color: '#E5E5E5' },
-          border: { dash: [4, 4] },
-          ticks: {
-            autoSkip: true,
-            maxRotation: 0,
-          },
-        },
-        y: {
-          min: 0,
-          max: 100,
-          beginAtZero: true,
-          ticks: {
-            stepSize: 20,
-            callback: (value) => {
-              const numValue = Number(value);
-              const formatted = isNaN(numValue) ? value : (Number.isInteger(numValue) ? numValue : numValue.toFixed(2));
-              return this.isYAxisPercentageValues ? `${formatted}%` : formatted;
-            },
-          },
-          grid: { color: '#E5E5E5' },
-          border: { dash: [4, 4] },
-        },
-      },
-    };
-  }
-  getDoughnutChartConfig() {
-    return {
-      plugins: {
-        legend: { labels: { pointStyle: 'circle', padding: 16, } },
-      },
-      cutout: '60%'
-    };
-  }
-  getDoughnutV2ChartConfig() {
-    return {
-      plugins: {
-        legend: {
-          labels: {
-            pointStyle: 'circle',
-            padding: 16
-          },
-          onClick: (e, legendItem) => {
-            e.stopPropagation();
-            const index = legendItem.index;
-            if (this.selectedSegmentIndex !== index) {
-              this.selectedSegmentIndex = index;
-              this.updateChartColors();
-              this.notifyActiveSegment();
-            }
-          }
-        },
-        tooltip: {
-          enabled: false
-        }
-      },
-      cutout: '60%',
-      onHover: (_event, activeElements) => {
-        if (activeElements && activeElements.length > 0) {
-          this.hoverSegmentIndex = activeElements[0].index;
-          this.updateChartColors();
-        }
-        else {
-          this.hoverSegmentIndex = null;
-          this.updateChartColors();
-        }
-      },
-      onClick: (_event, activeElements) => {
-        if (activeElements && activeElements.length > 0) {
-          const clickedIndex = activeElements[0].index;
-          if (this.selectedSegmentIndex !== clickedIndex) {
-            this.selectedSegmentIndex = clickedIndex;
-            this.updateChartColors();
-            this.notifyActiveSegment();
-          }
-        }
-      },
-    };
-  }
-  updateChartColors() {
-    var _a, _b, _c, _d;
-    if (!this.chartInstance || this.chartType !== 'doughnut-v2')
-      return;
-    const dataset = this.chartInstance.data.datasets[0];
-    const chartDataDataset = (_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.datasets) === null || _b === void 0 ? void 0 : _b[0];
-    if (this.chartType === 'doughnut-v2' && this.chartInstance.isDatasetVisible(0) === false) {
-      this.chartInstance.setDatasetVisibility(0, true);
-    }
-    // Default color for doughnut-v2
-    const defaultSelectedColor = '#45C9B0';
-    const defaultHoverColor = '#A3A3A3';
-    const defaultInactiveColor = '#E5E5E5';
-    const selectedColors = chartDataDataset === null || chartDataDataset === void 0 ? void 0 : chartDataDataset.selectedColors;
-    const hoverColors = chartDataDataset === null || chartDataDataset === void 0 ? void 0 : chartDataDataset.hoverColors;
-    const inactiveColors = chartDataDataset === null || chartDataDataset === void 0 ? void 0 : chartDataDataset.inactiveColors;
-    let newColors = [];
-    if (this.selectedSegmentIndex !== null) {
-      newColors = dataset.data.map((_, index) => {
-        if (index === this.hoverSegmentIndex) {
-          return (hoverColors === null || hoverColors === void 0 ? void 0 : hoverColors[index]) || defaultHoverColor;
-        }
-        else if (index === this.selectedSegmentIndex) {
-          return (selectedColors === null || selectedColors === void 0 ? void 0 : selectedColors[index]) || defaultSelectedColor;
-        }
-        else {
-          return (inactiveColors === null || inactiveColors === void 0 ? void 0 : inactiveColors[index]) || defaultInactiveColor;
-        }
-      });
-    }
-    else if (this.hoverSegmentIndex !== null) {
-      const activeIndex = (_c = this.initialActiveIndex) !== null && _c !== void 0 ? _c : 0;
-      newColors = dataset.data.map((_, index) => {
-        if (index === this.hoverSegmentIndex) {
-          return (hoverColors === null || hoverColors === void 0 ? void 0 : hoverColors[index]) || defaultHoverColor;
-        }
-        else if (index === activeIndex) {
-          return (selectedColors === null || selectedColors === void 0 ? void 0 : selectedColors[index]) || defaultSelectedColor;
-        }
-        else {
-          return (inactiveColors === null || inactiveColors === void 0 ? void 0 : inactiveColors[index]) || defaultInactiveColor;
-        }
-      });
-    }
-    else {
-      // No hover or selection: show initial active state
-      const activeIndex = (_d = this.initialActiveIndex) !== null && _d !== void 0 ? _d : 0;
-      newColors = dataset.data.map((_, index) => {
-        if (index === activeIndex) {
-          return (selectedColors === null || selectedColors === void 0 ? void 0 : selectedColors[index]) || defaultSelectedColor;
-        }
-        return (inactiveColors === null || inactiveColors === void 0 ? void 0 : inactiveColors[index]) || defaultInactiveColor;
-      });
-    }
-    dataset.backgroundColor = newColors;
-    this.chartInstance.update('active');
-  }
-  lightenColor(color, percent) {
-    if (!color || !color.startsWith('#'))
-      return color;
-    const num = parseInt(color.replace('#', ''), 16);
-    const r = Math.min(255, ((num >> 16) & 0xFF) + percent);
-    const g = Math.min(255, ((num >> 8) & 0xFF) + percent);
-    const b = Math.min(255, (num & 0xFF) + percent);
-    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
-  }
-  getCenterTextPlugin(value) {
-    return {
-      id: 'centerText',
-      afterDatasetsDraw: (chart) => {
-        var _a, _b;
-        const { ctx } = chart;
-        ctx.save();
-        const x = chart.getDatasetMeta(0).data[0].x;
-        let y = chart.getDatasetMeta(0).data[0].y;
-        if (this.chartType === 'semi-gauge') {
-          y -= 20;
-        }
-        let displayValue = value;
-        if (this.chartType === 'doughnut-v2') {
-          const activeIndex = this.selectedSegmentIndex !== null
-            ? this.selectedSegmentIndex
-            : ((_a = this.initialActiveIndex) !== null && _a !== void 0 ? _a : 0);
-          const segmentValue = (_b = this.chartData.datasets[0]) === null || _b === void 0 ? void 0 : _b.data[activeIndex];
-          displayValue = Number(segmentValue || 0).toLocaleString();
-        }
-        ctx.font = 'bold 20px Roboto';
-        ctx.fillStyle = '#111';
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(displayValue, x, y);
-      },
-    };
-  }
-  getLegendHoverPlugin() {
-    return {
-      id: 'legendHover',
-      afterDraw: (chart) => {
-        if (this.hoverSegmentIndex === null)
-          return;
-        const legend = chart.legend;
-        if (!legend || !legend.legendItems)
-          return;
-        const ctx = chart.ctx;
-        const legendItem = legend.legendItems[this.hoverSegmentIndex];
-        if (!legendItem)
-          return;
-        const boxes = legend.legendHitBoxes;
-        if (!boxes || !boxes[this.hoverSegmentIndex])
-          return;
-        const box = boxes[this.hoverSegmentIndex];
-        const padding = 8;
-        const borderRadius = 4;
-        ctx.save();
-        ctx.fillStyle = '#f5f5f5';
-        ctx.beginPath();
-        ctx.roundRect(box.left - padding, box.top - padding, box.width + padding * 2, box.height + padding * 2, borderRadius);
-        ctx.fill();
-        const pointRadius = 8;
-        const pointX = box.left + pointRadius;
-        const pointY = box.top + box.height / 2;
-        ctx.fillStyle = '#D1D5DB';
-        ctx.beginPath();
-        ctx.arc(pointX, pointY, pointRadius, 0, 2 * Math.PI);
-        ctx.fill();
-        ctx.fillStyle = '#9CA3AF';
-        ctx.font = '14px Roboto, sans-serif';
-        ctx.textBaseline = 'middle';
-        ctx.textAlign = 'left';
-        ctx.fillText(legendItem.text, box.left + pointRadius * 2 + 4, pointY);
-        ctx.restore();
-      },
-    };
-  }
-  getSemiGaugeChartConfig() {
-    return {
-      plugins: {
-        legend: { labels: { pointStyle: 'circle', padding: 16, } },
-      },
-      rotation: -90,
-      circumference: 180,
-      cutout: '70%',
-    };
-  }
-  merge(target, source) {
-    if (typeof target !== 'object' || typeof source !== 'object')
-      return source;
-    for (const key of Object.keys(source)) {
-      if (source[key] instanceof Object && key in target) {
-        target[key] = this.merge(Object.assign({}, target[key]), source[key]);
-      }
-      else {
-        target[key] = source[key];
-      }
-    }
-    return target;
-  }
-  getChartOptions() {
-    const base = this.getBaseOptions();
-    let specific = {};
-    if (this.chartType === 'line')
-      specific = this.getLineChartConfig();
-    else if (this.chartType === 'doughnut')
-      specific = this.getDoughnutChartConfig();
-    else if (this.chartType === 'semi-gauge')
-      specific = this.getSemiGaugeChartConfig();
-    else if (this.chartType === 'doughnut-v2')
-      specific = this.getDoughnutV2ChartConfig();
-    return this.merge(this.merge(base, specific), this.chartOptions || {});
-  }
-  exportChart(format) {
-    if (!this.chartInstance)
-      return;
-    const link = document.createElement('a');
-    link.download = `chart-export.${format}`;
-    if (format === 'png') {
-      link.href = this.chartInstance.toBase64Image('image/png');
-    }
-    else {
-      const svgData = new XMLSerializer().serializeToString(this.canvasEl);
-      const blob = new Blob([svgData], { type: 'image/svg+xml' });
-      link.href = URL.createObjectURL(blob);
-    }
-    link.click();
-  }
-  getErrorContent() {
-    return this.commonContent('warning', 'Something went wrong', 'We ran into an issue while trying to load this widget.', '#DC0000', true);
-  }
-  getNoDataContent() {
-    return this.commonContent('ssid_chart', 'No data available', 'There is currently no data available to show performance trends.', '#111');
-  }
-  commonContent(iconName, heading, message, iconColor, showActions = false) {
-    return (h("div", { class: "error-content" }, h("tttx-icon_1_9_101", { icon: iconName, color: iconColor, size: 48 }), h("span", { class: 'error-heading' }, heading), h("span", { class: 'error-message' }, message), showActions && h("div", { class: "error-actions" }, h("tttx-button_1_9_101", { class: 'support-btn', icon: "help", design: "primary", onClick: () => this.renderChart() }, "Contact support"))));
-  }
-  notifyActiveSegment() {
-    var _a, _b;
-    if (this.chartType !== 'doughnut-v2' || !this.chartData)
-      return;
-    const activeIndex = this.selectedSegmentIndex !== null
-      ? this.selectedSegmentIndex
-      : ((_a = this.initialActiveIndex) !== null && _a !== void 0 ? _a : 0);
-    const label = ((_b = this.chartData.labels) === null || _b === void 0 ? void 0 : _b[activeIndex]) || '';
-    if (this.activeSegmentChangeCallback) {
-      this.activeSegmentChangeCallback(label);
-    }
-  }
-  render() {
-    var _a, _b, _c;
-    return (h("div", { class: "chart-wrapper", style: { width: this.width, height: this.height } }, this.loading && h("div", { class: "chart-loading" }, h("tttx-loading-spinner_1_9_101", { size: 'large', color: '#2b9ab7' })), this.error && this.getErrorContent(), !this.loading && !this.error && (!this.chartData || !((_a = this.chartData.datasets) === null || _a === void 0 ? void 0 : _a.length)) && (this.getNoDataContent()), !this.loading && !this.error && ((_c = (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.datasets) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("div", { class: "chart-canvas-container", style: { width: '100%', height: '100%' } }, h("canvas", { ref: el => (this.canvasEl = el), "aria-label": "Chart canvas", role: "img", style: {
-        width: '100%',
-        height: '100%',
-        cursor: this.chartType === 'doughnut-v2' ? 'pointer' : 'default'
-      } }))), this.exportable && !this.loading && !this.error && (h("div", { class: "export-buttons" }, this.showPngSvgExport && h("tttx-button_1_9_101", { class: 'export-png', design: "primary", onClick: () => this.exportChart('png') }, "Export PNG"), this.showPngSvgExport && h("tttx-button_1_9_101", { class: 'export-svg', design: "primary", onClick: () => this.exportChart('svg') }, "Export SVG"), h("tttx-button_1_9_101", { class: 'export-csv', design: "primary", onClick: () => this.exportCSV.emit({ name: this.chartType }) }, "Export CSV")))));
-  }
-  static get is() { return "tttx-chart_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-chart.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-chart.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "chartType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'line' | 'doughnut' | 'semi-gauge' | 'doughnut-v2'",
-          "resolved": "\"doughnut\" | \"doughnut-v2\" | \"line\" | \"semi-gauge\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "chart-type",
-        "reflect": false
-      },
-      "chartData": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartData",
-          "resolved": "ChartData<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>",
-          "references": {
-            "ChartData": {
-              "location": "import",
-              "path": "chart.js"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "chartOptions": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartOptions",
-          "resolved": "{ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bar: BarControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; scatter: LineControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; }>; indexAxis?: \"x\" | \"y\"; clip?: number | false | _DeepPartialObject<ChartArea>; color?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); backgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern>)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); hoverBackgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern>)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); borderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern>)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); hoverBorderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern>)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); font?: _DeepPartialObject<Partial<FontSpec>>; responsive?: boolean; maintainAspectRatio?: boolean; resizeDelay?: number; aspectRatio?: number; locale?: string; onResize?: (chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>, size: { width: number; height: number; }) => void; devicePixelRatio?: number; interaction?: _DeepPartialObject<CoreInteractionOptions>; hover?: _DeepPartialObject<CoreInteractionOptions>; events?: _DeepPartialArray<keyof HTMLElementEventMap>; onHover?: (event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>) => void; onClick?: (event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>) => void; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<keyof ChartTypeRegistry>>; }>>; parsing?: false | _DeepPartialObject<{ [key: string]: string; }>; normalized?: boolean; animation?: false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>, event: AnimationEvent) => void; }>; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>>; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>>; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>>; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }>; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }>; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }>; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }>; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }>; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }>; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }>; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }>; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<\"radialLinear\" | keyof CartesianScaleTypeRegistry>; }>; }",
-          "references": {
-            "ChartOptions": {
-              "location": "import",
-              "path": "chart.js"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "error": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "fallbackText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "fallback-text",
-        "reflect": false,
-        "defaultValue": "'No data available'"
-      },
-      "width": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "width",
-        "reflect": false,
-        "defaultValue": "'100%'"
-      },
-      "height": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "height",
-        "reflect": false,
-        "defaultValue": "'auto'"
-      },
-      "isYAxisPercentageValues": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-y-axis-percentage-values",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "showActiveSegmentLabel": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-active-segment-label",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "initialActiveIndex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "initial-active-index",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "activeSegmentChangeCallback": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(label: string) => void",
-          "resolved": "(label: string) => void",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "exportable": {},
-      "chartInstance": {},
-      "showPngSvgExport": {},
-      "selectedSegmentIndex": {},
-      "hoverSegmentIndex": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "exportCSV",
-        "name": "exportCSV",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ name: string }",
-          "resolved": "{ name: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "chartData",
-        "methodName": "handleUpdate"
-      }, {
-        "propName": "chartOptions",
-        "methodName": "handleUpdate"
-      }, {
-        "propName": "selectedSegmentIndex",
-        "methodName": "notifyActiveSegment"
-      }, {
-        "propName": "chartData",
-        "methodName": "notifyActiveSegment"
-      }, {
-        "propName": "initialActiveIndex",
-        "methodName": "notifyActiveSegment"
-      }];
-  }
-}
+import { h } from '@stencil/core';
+import Chart from 'chart.js/auto';
+import 'chartjs-adapter-date-fns';
+export class TttxChart {
+  constructor() {
+    this.chartType = undefined;
+    this.chartData = undefined;
+    this.chartOptions = undefined;
+    this.loading = false;
+    this.error = undefined;
+    this.fallbackText = 'No data available';
+    this.width = '100%';
+    this.height = 'auto';
+    this.isYAxisPercentageValues = false;
+    this.showActiveSegmentLabel = false;
+    this.initialActiveIndex = 0;
+    this.activeSegmentChangeCallback = undefined;
+    this.exportable = false;
+    this.chartInstance = undefined;
+    this.showPngSvgExport = false;
+    this.selectedSegmentIndex = null;
+    this.hoverSegmentIndex = null;
+  }
+  handleUpdate(newData) {
+    if (!newData || !newData.datasets || newData.datasets.length === 0) {
+      this.destroyChart();
+      return;
+    }
+    if (this.chartType === 'line') {
+      setTimeout(() => {
+        this.renderChart();
+      }, 0);
+      return;
+    }
+    if (this.chartType === 'doughnut-v2') {
+      if (this.hasChartDataChanged()) {
+        this.renderChart();
+        this.previousChartData = this.deepClone(this.chartData);
+      }
+      return;
+    }
+    this.renderChart();
+  }
+  componentDidLoad() {
+    if (this.chartType === 'doughnut-v2') {
+      this.previousChartData = this.deepClone(this.chartData);
+    }
+    this.renderChart();
+    this.notifyActiveSegment();
+  }
+  hasChartDataChanged() {
+    if (!this.previousChartData)
+      return true;
+    try {
+      return JSON.stringify(this.previousChartData) !== JSON.stringify(this.chartData);
+    }
+    catch (_a) {
+      return true;
+    }
+  }
+  deepClone(obj) {
+    try {
+      return JSON.parse(JSON.stringify(obj));
+    }
+    catch (_a) {
+      return obj;
+    }
+  }
+  disconnectedCallback() {
+    this.destroyChart();
+  }
+  renderChart() {
+    var _a, _b, _c;
+    if (!this.canvasEl || !this.chartData || !this.chartType)
+      return;
+    this.destroyChart();
+    const chartData = Object.assign(Object.assign({}, this.chartData), { datasets: ((_a = this.chartData.datasets) === null || _a === void 0 ? void 0 : _a.map(d => (Object.assign({}, d)))) || [] });
+    const config = {
+      type: this.getChartJsType(),
+      data: chartData,
+      options: this.getChartOptions(),
+      plugins: []
+    };
+    if (this.chartType === 'doughnut' || this.chartType === 'semi-gauge' || this.chartType === 'doughnut-v2') {
+      const total = ((_c = (_b = chartData.datasets[0]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.map((d) => Number(d) || 0).reduce((a, b) => a + b, 0)) || 0;
+      config.plugins.push(this.getCenterTextPlugin(total.toLocaleString()));
+    }
+    if (this.chartType === 'doughnut-v2') {
+      config.plugins.push(this.getLegendHoverPlugin());
+    }
+    // create chart
+    this.chartInstance = new Chart(this.canvasEl, config);
+    // Initialize colors for doughnut-v2
+    if (this.chartType === 'doughnut-v2') {
+      this.chartInstance.setDatasetVisibility(0, true);
+      this.updateChartColors();
+    }
+  }
+  destroyChart() {
+    if (this.chartInstance) {
+      this.chartInstance.destroy();
+      this.chartInstance = undefined;
+    }
+  }
+  getChartJsType() {
+    if (this.chartType === 'semi-gauge' || this.chartType === 'doughnut-v2')
+      return 'doughnut';
+    return this.chartType;
+  }
+  getBaseOptions() {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: true,
+          position: 'bottom',
+          labels: {
+            usePointStyle: true,
+            pointStyle: 'circle',
+            font: {
+              size: 14
+            }
+          },
+        },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => {
+              const label = ctx.label || ctx.dataset.label || '';
+              // Convert value to number and fix to 2 decimal places
+              const value = Number(ctx.raw);
+              const formattedValue = isNaN(value) ? ctx.formattedValue : value.toFixed(2);
+              return `${label}: ${formattedValue}`;
+            },
+          },
+          backgroundColor: '#17272B'
+        },
+      },
+    };
+  }
+  getLineChartConfig() {
+    const startOfCurrentMonth = new Date();
+    startOfCurrentMonth.setDate(1);
+    startOfCurrentMonth.setHours(0, 0, 0, 0);
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 0 },
+      elements: {
+        point: { radius: 0, hoverRadius: 4 },
+      },
+      plugins: {
+        legend: {
+          labels: {
+            padding: 20,
+            generateLabels: (chart) => {
+              return chart.data.datasets.map((dataset, i) => ({
+                text: dataset.label || '',
+                strokeStyle: dataset.borderColor,
+                fillStyle: dataset.backgroundColor || 'transparent',
+                lineDash: dataset.borderDash || [],
+                lineWidth: dataset.borderWidth || 2,
+                hidden: !chart.isDatasetVisible(i),
+                datasetIndex: i,
+                pointStyle: 'line',
+              }));
+            },
+          },
+        },
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          backgroundColor: '#17272B',
+          titleFont: { size: 14, weight: 'bold' },
+          bodyFont: { size: 12 },
+          callbacks: {
+            title: (context) => {
+              var _a, _b;
+              if (!context || !context.length)
+                return '';
+              const date = new Date((_b = (_a = context[0].parsed) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : context[0].label);
+              return date.toLocaleDateString(undefined, {
+                day: '2-digit',
+                month: 'short',
+                year: 'numeric',
+              });
+            },
+            label: (ctx) => {
+              const rawValue = ctx.parsed && ctx.parsed.y !== undefined ? ctx.parsed.y : ctx.raw;
+              // Format to max 2 decimal places
+              const value = Number(rawValue);
+              const formattedValue = isNaN(value) ? rawValue : value.toFixed(2);
+              return `${ctx.dataset.label}: ${formattedValue}${this.isYAxisPercentageValues ? '%' : ''}`;
+            },
+            labelColor: (ctx) => {
+              if (ctx.dataset.label !== 'Overall') {
+                return {
+                  borderWidth: 2
+                };
+              }
+              return {
+                borderWidth: 2,
+                borderColor: ctx.dataset.borderColor,
+                backgroundColor: ctx.dataset.borderColor,
+              };
+            }
+          },
+        },
+      },
+      interaction: {
+        mode: 'index',
+        intersect: false,
+      },
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'month',
+            displayFormats: {
+              month: 'MMM yyyy',
+            },
+            tooltipFormat: 'dd MMM yyyy',
+          },
+          grid: { color: '#E5E5E5' },
+          border: { dash: [4, 4] },
+          ticks: {
+            autoSkip: true,
+            maxRotation: 0,
+          },
+        },
+        y: {
+          min: 0,
+          max: 100,
+          beginAtZero: true,
+          ticks: {
+            stepSize: 20,
+            callback: (value) => {
+              const numValue = Number(value);
+              const formatted = isNaN(numValue) ? value : (Number.isInteger(numValue) ? numValue : numValue.toFixed(2));
+              return this.isYAxisPercentageValues ? `${formatted}%` : formatted;
+            },
+          },
+          grid: { color: '#E5E5E5' },
+          border: { dash: [4, 4] },
+        },
+      },
+    };
+  }
+  getDoughnutChartConfig() {
+    return {
+      plugins: {
+        legend: { labels: { pointStyle: 'circle', padding: 16, } },
+      },
+      cutout: '60%'
+    };
+  }
+  getDoughnutV2ChartConfig() {
+    return {
+      plugins: {
+        legend: {
+          labels: {
+            pointStyle: 'circle',
+            padding: 16
+          },
+          onClick: (e, legendItem) => {
+            e.stopPropagation();
+            const index = legendItem.index;
+            if (this.selectedSegmentIndex !== index) {
+              this.selectedSegmentIndex = index;
+              this.updateChartColors();
+              this.notifyActiveSegment();
+            }
+          }
+        },
+        tooltip: {
+          enabled: false
+        }
+      },
+      cutout: '60%',
+      onHover: (_event, activeElements) => {
+        if (activeElements && activeElements.length > 0) {
+          this.hoverSegmentIndex = activeElements[0].index;
+          this.updateChartColors();
+        }
+        else {
+          this.hoverSegmentIndex = null;
+          this.updateChartColors();
+        }
+      },
+      onClick: (_event, activeElements) => {
+        if (activeElements && activeElements.length > 0) {
+          const clickedIndex = activeElements[0].index;
+          if (this.selectedSegmentIndex !== clickedIndex) {
+            this.selectedSegmentIndex = clickedIndex;
+            this.updateChartColors();
+            this.notifyActiveSegment();
+          }
+        }
+      },
+    };
+  }
+  updateChartColors() {
+    var _a, _b, _c, _d;
+    if (!this.chartInstance || this.chartType !== 'doughnut-v2')
+      return;
+    const dataset = this.chartInstance.data.datasets[0];
+    const chartDataDataset = (_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.datasets) === null || _b === void 0 ? void 0 : _b[0];
+    if (this.chartType === 'doughnut-v2' && this.chartInstance.isDatasetVisible(0) === false) {
+      this.chartInstance.setDatasetVisibility(0, true);
+    }
+    // Default color for doughnut-v2
+    const defaultSelectedColor = '#45C9B0';
+    const defaultHoverColor = '#A3A3A3';
+    const defaultInactiveColor = '#E5E5E5';
+    const selectedColors = chartDataDataset === null || chartDataDataset === void 0 ? void 0 : chartDataDataset.selectedColors;
+    const hoverColors = chartDataDataset === null || chartDataDataset === void 0 ? void 0 : chartDataDataset.hoverColors;
+    const inactiveColors = chartDataDataset === null || chartDataDataset === void 0 ? void 0 : chartDataDataset.inactiveColors;
+    let newColors = [];
+    if (this.selectedSegmentIndex !== null) {
+      newColors = dataset.data.map((_, index) => {
+        if (index === this.hoverSegmentIndex) {
+          return (hoverColors === null || hoverColors === void 0 ? void 0 : hoverColors[index]) || defaultHoverColor;
+        }
+        else if (index === this.selectedSegmentIndex) {
+          return (selectedColors === null || selectedColors === void 0 ? void 0 : selectedColors[index]) || defaultSelectedColor;
+        }
+        else {
+          return (inactiveColors === null || inactiveColors === void 0 ? void 0 : inactiveColors[index]) || defaultInactiveColor;
+        }
+      });
+    }
+    else if (this.hoverSegmentIndex !== null) {
+      const activeIndex = (_c = this.initialActiveIndex) !== null && _c !== void 0 ? _c : 0;
+      newColors = dataset.data.map((_, index) => {
+        if (index === this.hoverSegmentIndex) {
+          return (hoverColors === null || hoverColors === void 0 ? void 0 : hoverColors[index]) || defaultHoverColor;
+        }
+        else if (index === activeIndex) {
+          return (selectedColors === null || selectedColors === void 0 ? void 0 : selectedColors[index]) || defaultSelectedColor;
+        }
+        else {
+          return (inactiveColors === null || inactiveColors === void 0 ? void 0 : inactiveColors[index]) || defaultInactiveColor;
+        }
+      });
+    }
+    else {
+      // No hover or selection: show initial active state
+      const activeIndex = (_d = this.initialActiveIndex) !== null && _d !== void 0 ? _d : 0;
+      newColors = dataset.data.map((_, index) => {
+        if (index === activeIndex) {
+          return (selectedColors === null || selectedColors === void 0 ? void 0 : selectedColors[index]) || defaultSelectedColor;
+        }
+        return (inactiveColors === null || inactiveColors === void 0 ? void 0 : inactiveColors[index]) || defaultInactiveColor;
+      });
+    }
+    dataset.backgroundColor = newColors;
+    this.chartInstance.update('active');
+  }
+  lightenColor(color, percent) {
+    if (!color || !color.startsWith('#'))
+      return color;
+    const num = parseInt(color.replace('#', ''), 16);
+    const r = Math.min(255, ((num >> 16) & 0xFF) + percent);
+    const g = Math.min(255, ((num >> 8) & 0xFF) + percent);
+    const b = Math.min(255, (num & 0xFF) + percent);
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+  }
+  getCenterTextPlugin(value) {
+    return {
+      id: 'centerText',
+      afterDatasetsDraw: (chart) => {
+        var _a, _b;
+        const { ctx } = chart;
+        ctx.save();
+        const x = chart.getDatasetMeta(0).data[0].x;
+        let y = chart.getDatasetMeta(0).data[0].y;
+        if (this.chartType === 'semi-gauge') {
+          y -= 20;
+        }
+        let displayValue = value;
+        if (this.chartType === 'doughnut-v2') {
+          const activeIndex = this.selectedSegmentIndex !== null
+            ? this.selectedSegmentIndex
+            : ((_a = this.initialActiveIndex) !== null && _a !== void 0 ? _a : 0);
+          const segmentValue = (_b = this.chartData.datasets[0]) === null || _b === void 0 ? void 0 : _b.data[activeIndex];
+          displayValue = Number(segmentValue || 0).toLocaleString();
+        }
+        ctx.font = 'bold 20px Roboto';
+        ctx.fillStyle = '#111';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(displayValue, x, y);
+      },
+    };
+  }
+  getLegendHoverPlugin() {
+    return {
+      id: 'legendHover',
+      afterDraw: (chart) => {
+        if (this.hoverSegmentIndex === null)
+          return;
+        const legend = chart.legend;
+        if (!legend || !legend.legendItems)
+          return;
+        const ctx = chart.ctx;
+        const legendItem = legend.legendItems[this.hoverSegmentIndex];
+        if (!legendItem)
+          return;
+        const boxes = legend.legendHitBoxes;
+        if (!boxes || !boxes[this.hoverSegmentIndex])
+          return;
+        const box = boxes[this.hoverSegmentIndex];
+        const padding = 8;
+        const borderRadius = 4;
+        ctx.save();
+        ctx.fillStyle = '#f5f5f5';
+        ctx.beginPath();
+        ctx.roundRect(box.left - padding, box.top - padding, box.width + padding * 2, box.height + padding * 2, borderRadius);
+        ctx.fill();
+        const pointRadius = 8;
+        const pointX = box.left + pointRadius;
+        const pointY = box.top + box.height / 2;
+        ctx.fillStyle = '#D1D5DB';
+        ctx.beginPath();
+        ctx.arc(pointX, pointY, pointRadius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.fillStyle = '#9CA3AF';
+        ctx.font = '14px Roboto, sans-serif';
+        ctx.textBaseline = 'middle';
+        ctx.textAlign = 'left';
+        ctx.fillText(legendItem.text, box.left + pointRadius * 2 + 4, pointY);
+        ctx.restore();
+      },
+    };
+  }
+  getSemiGaugeChartConfig() {
+    return {
+      plugins: {
+        legend: { labels: { pointStyle: 'circle', padding: 16, } },
+      },
+      rotation: -90,
+      circumference: 180,
+      cutout: '70%',
+    };
+  }
+  merge(target, source) {
+    if (typeof target !== 'object' || typeof source !== 'object')
+      return source;
+    for (const key of Object.keys(source)) {
+      if (source[key] instanceof Object && key in target) {
+        target[key] = this.merge(Object.assign({}, target[key]), source[key]);
+      }
+      else {
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  getChartOptions() {
+    const base = this.getBaseOptions();
+    let specific = {};
+    if (this.chartType === 'line')
+      specific = this.getLineChartConfig();
+    else if (this.chartType === 'doughnut')
+      specific = this.getDoughnutChartConfig();
+    else if (this.chartType === 'semi-gauge')
+      specific = this.getSemiGaugeChartConfig();
+    else if (this.chartType === 'doughnut-v2')
+      specific = this.getDoughnutV2ChartConfig();
+    return this.merge(this.merge(base, specific), this.chartOptions || {});
+  }
+  exportChart(format) {
+    if (!this.chartInstance)
+      return;
+    const link = document.createElement('a');
+    link.download = `chart-export.${format}`;
+    if (format === 'png') {
+      link.href = this.chartInstance.toBase64Image('image/png');
+    }
+    else {
+      const svgData = new XMLSerializer().serializeToString(this.canvasEl);
+      const blob = new Blob([svgData], { type: 'image/svg+xml' });
+      link.href = URL.createObjectURL(blob);
+    }
+    link.click();
+  }
+  getErrorContent() {
+    return this.commonContent('warning', 'Something went wrong', 'We ran into an issue while trying to load this widget.', '#DC0000', true);
+  }
+  getNoDataContent() {
+    return this.commonContent('ssid_chart', 'No data available', 'There is currently no data available to show performance trends.', '#111');
+  }
+  commonContent(iconName, heading, message, iconColor, showActions = false) {
+    return (h("div", { class: "error-content" }, h("tttx-icon_1_9_103", { icon: iconName, color: iconColor, size: 48 }), h("span", { class: 'error-heading' }, heading), h("span", { class: 'error-message' }, message), showActions && h("div", { class: "error-actions" }, h("tttx-button_1_9_103", { class: 'support-btn', icon: "help", design: "primary", onClick: () => this.renderChart() }, "Contact support"))));
+  }
+  notifyActiveSegment() {
+    var _a, _b;
+    if (this.chartType !== 'doughnut-v2' || !this.chartData)
+      return;
+    const activeIndex = this.selectedSegmentIndex !== null
+      ? this.selectedSegmentIndex
+      : ((_a = this.initialActiveIndex) !== null && _a !== void 0 ? _a : 0);
+    const label = ((_b = this.chartData.labels) === null || _b === void 0 ? void 0 : _b[activeIndex]) || '';
+    if (this.activeSegmentChangeCallback) {
+      this.activeSegmentChangeCallback(label);
+    }
+  }
+  render() {
+    var _a, _b, _c;
+    return (h("div", { class: "chart-wrapper", style: { width: this.width, height: this.height } }, this.loading && h("div", { class: "chart-loading" }, h("tttx-loading-spinner_1_9_103", { size: 'large', color: '#2b9ab7' })), this.error && this.getErrorContent(), !this.loading && !this.error && (!this.chartData || !((_a = this.chartData.datasets) === null || _a === void 0 ? void 0 : _a.length)) && (this.getNoDataContent()), !this.loading && !this.error && ((_c = (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.datasets) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("div", { class: "chart-canvas-container", style: { width: '100%', height: '100%' } }, h("canvas", { ref: el => (this.canvasEl = el), "aria-label": "Chart canvas", role: "img", style: {
+        width: '100%',
+        height: '100%',
+        cursor: this.chartType === 'doughnut-v2' ? 'pointer' : 'default'
+      } }))), this.exportable && !this.loading && !this.error && (h("div", { class: "export-buttons" }, this.showPngSvgExport && h("tttx-button_1_9_103", { class: 'export-png', design: "primary", onClick: () => this.exportChart('png') }, "Export PNG"), this.showPngSvgExport && h("tttx-button_1_9_103", { class: 'export-svg', design: "primary", onClick: () => this.exportChart('svg') }, "Export SVG"), h("tttx-button_1_9_103", { class: 'export-csv', design: "primary", onClick: () => this.exportCSV.emit({ name: this.chartType }) }, "Export CSV")))));
+  }
+  static get is() { return "tttx-chart_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-chart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "chartType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'line' | 'doughnut' | 'semi-gauge' | 'doughnut-v2'",
+          "resolved": "\"doughnut\" | \"doughnut-v2\" | \"line\" | \"semi-gauge\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "chart-type",
+        "reflect": false
+      },
+      "chartData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartData",
+          "resolved": "ChartData<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>",
+          "references": {
+            "ChartData": {
+              "location": "import",
+              "path": "chart.js"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "chartOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartOptions",
+          "resolved": "{ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bar: BarControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; scatter: LineControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; }>; indexAxis?: \"x\" | \"y\"; clip?: number | false | _DeepPartialObject<ChartArea>; color?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); backgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern>)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); hoverBackgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern>)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); borderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern>)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); hoverBorderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern>)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); font?: _DeepPartialObject<Partial<FontSpec>>; responsive?: boolean; maintainAspectRatio?: boolean; resizeDelay?: number; aspectRatio?: number; locale?: string; onResize?: (chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>, size: { width: number; height: number; }) => void; devicePixelRatio?: number; interaction?: _DeepPartialObject<CoreInteractionOptions>; hover?: _DeepPartialObject<CoreInteractionOptions>; events?: _DeepPartialArray<keyof HTMLElementEventMap>; onHover?: (event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>) => void; onClick?: (event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>) => void; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<keyof ChartTypeRegistry>>; }>>; parsing?: false | _DeepPartialObject<{ [key: string]: string; }>; normalized?: boolean; animation?: false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>, event: AnimationEvent) => void; }>; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>>; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>>; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>>; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }>; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }>; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }>; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }>; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }>; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }>; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }>; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }>; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<\"radialLinear\" | keyof CartesianScaleTypeRegistry>; }>; }",
+          "references": {
+            "ChartOptions": {
+              "location": "import",
+              "path": "chart.js"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "error": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "fallbackText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fallback-text",
+        "reflect": false,
+        "defaultValue": "'No data available'"
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "'100%'"
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "isYAxisPercentageValues": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-y-axis-percentage-values",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showActiveSegmentLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-active-segment-label",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "initialActiveIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initial-active-index",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "activeSegmentChangeCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(label: string) => void",
+          "resolved": "(label: string) => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "exportable": {},
+      "chartInstance": {},
+      "showPngSvgExport": {},
+      "selectedSegmentIndex": {},
+      "hoverSegmentIndex": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "exportCSV",
+        "name": "exportCSV",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "chartData",
+        "methodName": "handleUpdate"
+      }, {
+        "propName": "chartOptions",
+        "methodName": "handleUpdate"
+      }, {
+        "propName": "selectedSegmentIndex",
+        "methodName": "notifyActiveSegment"
+      }, {
+        "propName": "chartData",
+        "methodName": "notifyActiveSegment"
+      }, {
+        "propName": "initialActiveIndex",
+        "methodName": "notifyActiveSegment"
+      }];
+  }
+}