@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/components/{tttx-chart_1_9_101.js → tttx-chart_1_9_103.js}

@@ -7167,579 +7167,579 @@ adapters._date.override({
 
 const tttxChartCss = ".chart-wrapper{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.chart-canvas-container{flex:1;min-height:0;position:relative;width:100%}canvas{display:block;width:100% !important;height:100% !important}.export-buttons{display:flex;gap:0.5rem;justify-content:flex-end;padding-top:0.5rem;padding-bottom:0.5rem}.chart-loading{width:100%;height:100%;align-items:center;justify-content:center;display:flex}.error-content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;align-self:stretch;background-color:#FAFAFA}.error-content .error-heading{color:var(--Text-Default-Default, #111);text-align:center;font-family:Roboto;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.error-content .error-message{color:var(--Text-Neutral-Default, #737373);text-align:center;font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.error-content .error-actions{display:flex;align-items:flex-start;gap:12px;margin-top:16px}";
 
-const TttxChart = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.exportCSV = createEvent(this, "exportCSV", 7);
-    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")))));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "chartData": ["handleUpdate", "notifyActiveSegment"],
-    "chartOptions": ["handleUpdate"],
-    "selectedSegmentIndex": ["notifyActiveSegment"],
-    "initialActiveIndex": ["notifyActiveSegment"]
-  }; }
-  static get style() { return tttxChartCss; }
-}, [1, "tttx-chart_1_9_101", {
-    "chartType": [1, "chart-type"],
-    "chartData": [16],
-    "chartOptions": [16],
-    "loading": [4],
-    "error": [4],
-    "fallbackText": [1, "fallback-text"],
-    "width": [1],
-    "height": [1],
-    "isYAxisPercentageValues": [4, "is-y-axis-percentage-values"],
-    "showActiveSegmentLabel": [4, "show-active-segment-label"],
-    "initialActiveIndex": [2, "initial-active-index"],
-    "activeSegmentChangeCallback": [16],
-    "exportable": [32],
-    "chartInstance": [32],
-    "showPngSvgExport": [32],
-    "selectedSegmentIndex": [32],
-    "hoverSegmentIndex": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-chart_1_9_101", "tttx-button_1_9_101", "tttx-icon_1_9_101", "tttx-loading-spinner_1_9_101"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-chart_1_9_101":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxChart);
-      }
-      break;
-    case "tttx-button_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "tttx-icon_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "tttx-loading-spinner_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const TttxChart_1_9_101 = TttxChart;
+const TttxChart = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.exportCSV = createEvent(this, "exportCSV", 7);
+    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")))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "chartData": ["handleUpdate", "notifyActiveSegment"],
+    "chartOptions": ["handleUpdate"],
+    "selectedSegmentIndex": ["notifyActiveSegment"],
+    "initialActiveIndex": ["notifyActiveSegment"]
+  }; }
+  static get style() { return tttxChartCss; }
+}, [1, "tttx-chart_1_9_103", {
+    "chartType": [1, "chart-type"],
+    "chartData": [16],
+    "chartOptions": [16],
+    "loading": [4],
+    "error": [4],
+    "fallbackText": [1, "fallback-text"],
+    "width": [1],
+    "height": [1],
+    "isYAxisPercentageValues": [4, "is-y-axis-percentage-values"],
+    "showActiveSegmentLabel": [4, "show-active-segment-label"],
+    "initialActiveIndex": [2, "initial-active-index"],
+    "activeSegmentChangeCallback": [16],
+    "exportable": [32],
+    "chartInstance": [32],
+    "showPngSvgExport": [32],
+    "selectedSegmentIndex": [32],
+    "hoverSegmentIndex": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-chart_1_9_103", "tttx-button_1_9_103", "tttx-icon_1_9_103", "tttx-loading-spinner_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-chart_1_9_103":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxChart);
+      }
+      break;
+    case "tttx-button_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "tttx-icon_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tttx-loading-spinner_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxChart_1_9_103 = TttxChart;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxChart_1_9_101, defineCustomElement };
+export { TttxChart_1_9_103, defineCustomElement };