@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/chart/chart.js

@@ -1,675 +1,490 @@
-import { css as x, html as h } from "lit";
-import { property as s, state as f, query as _ } from "lit/decorators.js";
-import { Cre8Element as z } from "../cre8-element.js";
-import { Chart as b, registerables as C } from "chart.js";
-const v = x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}`;
-var w = Object.defineProperty, o = (u, i, t, a) => {
-  for (var e = void 0, n = u.length - 1, d; n >= 0; n--)
-    (d = u[n]) && (e = d(i, t, e) || e);
-  return e && w(i, t, e), e;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-b.register(...C);
-const g = class g extends z {
-  constructor() {
-    super(...arguments), this.type = "bar", this.data = { datasets: [] }, this.options = {}, this.height = 400, this.maintainAspectRatio = !0, this.responsive = !0, this.loading = !1, this.ariaLabel = "Chart", this.showLegend = !0, this.legendPosition = "top", this.enableAnimation = !0, this.animationDuration = 750, this.colors = [
-      "#0066B3",
-      // Primary blue
-      "#00A3E0",
-      // Accent cyan
-      "#059669",
-      // Success green
-      "#D97706",
-      // Warning orange
-      "#DC2626",
-      // Error red
-      "#7C3AED",
-      // Purple
-      "#DB2777",
-      // Pink
-      "#0891B2"
-      // Teal
-    ], this._chartInstance = null, this._isConnected = !1;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._isConnected = !0;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._isConnected = !1, this._destroyChart();
-  }
-  firstUpdated(i) {
-    super.firstUpdated(i), this.loading || this._initializeChart();
-  }
-  updated(i) {
-    if (super.updated(i), i.has("loading") && !this.loading && !this._chartInstance) {
-      this._initializeChart();
-      return;
+import { html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import { Chart, registerables, } from 'chart.js';
+import styles from './chart.styles.js';
+// Register all Chart.js components
+Chart.register(...registerables);
+/**
+ * A flexible chart component built on Chart.js that supports multiple chart types
+ * including line, bar, pie, doughnut, radar, polar area, bubble, and scatter charts.
+ *
+ * ## Features
+ * - Supports all major Chart.js chart types
+ * - Reactive updates when data or options change
+ * - Customizable colors that integrate with cre8 design tokens
+ * - Responsive sizing
+ * - Loading state indicator
+ * - Event callbacks for click and hover interactions
+ * - Accessible with ARIA labels
+ *
+ * ## Usage
+ *
+ * ```html
+ * <cre8-chart
+ *   type="bar"
+ *   .data=${{ labels: ['A', 'B', 'C'], datasets: [{ label: 'Sales', data: [10, 20, 30] }] }}
+ *   .options=${{ responsive: true }}
+ * ></cre8-chart>
+ * ```
+ *
+ * @fires cre8-chart-click - Fired when a chart element is clicked
+ * @fires cre8-chart-hover - Fired when hovering over chart elements
+ * @fires cre8-chart-ready - Fired when the chart is initialized
+ */
+export class Cre8Chart extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of chart to render.
+         * @attr type
+         */
+        this.type = 'bar';
+        /**
+         * The chart data including labels and datasets.
+         * This should be an object with `labels` array and `datasets` array.
+         */
+        this.data = { datasets: [] };
+        /**
+         * Chart.js configuration options.
+         * See Chart.js documentation for all available options.
+         */
+        this.options = {};
+        /**
+         * Height of the chart container in pixels.
+         * If not set, defaults to 400px.
+         * @attr height
+         */
+        this.height = 400;
+        /**
+         * Whether the chart should maintain aspect ratio when resizing.
+         * @attr maintain-aspect-ratio
+         */
+        this.maintainAspectRatio = true;
+        /**
+         * Whether the chart should be responsive to container size.
+         * @attr responsive
+         */
+        this.responsive = true;
+        /**
+         * Display a loading indicator instead of the chart.
+         * @attr loading
+         */
+        this.loading = false;
+        /**
+         * Accessible label for the chart.
+         * @attr aria-label
+         */
+        this.ariaLabel = 'Chart';
+        /**
+         * Whether to show the legend.
+         * @attr show-legend
+         */
+        this.showLegend = true;
+        /**
+         * Position of the legend.
+         * @attr legend-position
+         */
+        this.legendPosition = 'top';
+        /**
+         * Whether to animate chart updates.
+         * @attr enable-animation
+         */
+        this.enableAnimation = true;
+        /**
+         * Animation duration in milliseconds.
+         * @attr animation-duration
+         */
+        this.animationDuration = 750;
+        /**
+         * Default colors for datasets (uses cre8 design token colors).
+         */
+        this.colors = [
+            '#0066B3', // Primary blue
+            '#00A3E0', // Accent cyan
+            '#059669', // Success green
+            '#D97706', // Warning orange
+            '#DC2626', // Error red
+            '#7C3AED', // Purple
+            '#DB2777', // Pink
+            '#0891B2', // Teal
+        ];
+        /**
+         * Internal chart instance reference.
+         */
+        this._chartInstance = null;
+        /**
+         * Internal state tracking if component is connected.
+         */
+        this._isConnected = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._isConnected = true;
     }
-    if (!this.loading) {
-      if (i.has("type") && this._chartInstance) {
-        this._destroyChart(), this._initializeChart();
-        return;
-      }
-      (i.has("data") || i.has("options") || i.has("showLegend") || i.has("legendPosition") || i.has("colors")) && this._chartInstance && this._updateChart();
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._isConnected = false;
+        this._destroyChart();
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        if (!this.loading) {
+            this._initializeChart();
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // If loading state changed to false, initialize chart
+        if (changedProperties.has('loading') && !this.loading && !this._chartInstance) {
+            this._initializeChart();
+            return;
+        }
+        // If loading, don't update chart
+        if (this.loading) {
+            return;
+        }
+        // Check if we need to recreate the chart (type changed)
+        if (changedProperties.has('type') && this._chartInstance) {
+            this._destroyChart();
+            this._initializeChart();
+            return;
+        }
+        // Update existing chart if data or options changed
+        if ((changedProperties.has('data') ||
+            changedProperties.has('options') ||
+            changedProperties.has('showLegend') ||
+            changedProperties.has('legendPosition') ||
+            changedProperties.has('colors')) &&
+            this._chartInstance) {
+            this._updateChart();
+        }
     }
-  }
-  /**
-   * Initialize the Chart.js instance.
-   */
-  _initializeChart() {
-    if (!this._canvas || !this._isConnected)
-      return;
-    const i = this._canvas.getContext("2d");
-    if (!i) {
-      console.error("Cre8Chart: Unable to get canvas 2D context");
-      return;
+    /**
+     * Initialize the Chart.js instance.
+     */
+    _initializeChart() {
+        if (!this._canvas || !this._isConnected) {
+            return;
+        }
+        const ctx = this._canvas.getContext('2d');
+        if (!ctx) {
+            console.error('Cre8Chart: Unable to get canvas 2D context');
+            return;
+        }
+        const config = this._buildChartConfig();
+        this._chartInstance = new Chart(ctx, config);
+        this.dispatch({
+            eventName: 'cre8-chart-ready',
+            detailObj: { chart: this._chartInstance },
+        });
     }
-    const t = this._buildChartConfig();
-    this._chartInstance = new b(i, t), this.dispatch({
-      eventName: "cre8-chart-ready",
-      detailObj: { chart: this._chartInstance }
-    });
-  }
-  /**
-   * Build the complete Chart.js configuration.
-   */
-  _buildChartConfig() {
-    const i = this._processData();
-    return {
-      type: this.type,
-      data: i,
-      options: this._mergeOptions()
-    };
-  }
-  /**
-   * Process chart data and apply default colors.
-   */
-  _processData() {
-    if (!this.data || !this.data.datasets)
-      return { labels: [], datasets: [] };
-    const i = this.data.datasets.map((t, a) => {
-      const e = a % this.colors.length, n = this.colors[e];
-      if (["pie", "doughnut", "polarArea"].includes(this.type)) {
-        const d = Array.isArray(t.data) ? t.data.length : 0, p = Array.from(
-          { length: d },
-          (m, l) => this.colors[l % this.colors.length]
-        );
+    /**
+     * Build the complete Chart.js configuration.
+     */
+    _buildChartConfig() {
+        const processedData = this._processData();
         return {
-          ...t,
-          backgroundColor: t.backgroundColor || p,
-          borderColor: t.borderColor || "#ffffff",
-          borderWidth: t.borderWidth ?? 2
+            type: this.type,
+            data: processedData,
+            options: this._mergeOptions(),
         };
-      }
-      return this.type === "line" ? {
-        ...t,
-        backgroundColor: t.backgroundColor || `${n}20`,
-        borderColor: t.borderColor || n,
-        borderWidth: t.borderWidth ?? 2,
-        fill: t.fill ?? !1,
-        tension: t.tension ?? 0.4,
-        pointRadius: t.pointRadius ?? 4,
-        pointHoverRadius: t.pointHoverRadius ?? 6
-      } : this.type === "bar" ? {
-        ...t,
-        backgroundColor: t.backgroundColor || n,
-        borderColor: t.borderColor || n,
-        borderWidth: t.borderWidth ?? 0,
-        borderRadius: 4
-      } : this.type === "radar" ? {
-        ...t,
-        backgroundColor: t.backgroundColor || `${n}40`,
-        borderColor: t.borderColor || n,
-        borderWidth: t.borderWidth ?? 2,
-        pointBackgroundColor: n,
-        pointBorderColor: "#ffffff"
-      } : {
-        ...t,
-        backgroundColor: t.backgroundColor || n,
-        borderColor: t.borderColor || n
-      };
-    });
-    return {
-      labels: this.data.labels || [],
-      datasets: i
-    };
-  }
-  /**
-   * Merge user options with default options.
-   */
-  _mergeOptions() {
-    const i = {
-      responsive: this.responsive,
-      maintainAspectRatio: this.maintainAspectRatio,
-      animation: this.enableAnimation ? { duration: this.animationDuration } : !1,
-      plugins: {
-        legend: {
-          display: this.showLegend,
-          position: this.legendPosition,
-          labels: {
-            usePointStyle: !0,
-            padding: 16,
-            font: {
-              family: "Inter, system-ui, sans-serif",
-              size: 12
+    }
+    /**
+     * Process chart data and apply default colors.
+     */
+    _processData() {
+        if (!this.data || !this.data.datasets) {
+            return { labels: [], datasets: [] };
+        }
+        const processedDatasets = this.data.datasets.map((dataset, index) => {
+            const colorIndex = index % this.colors.length;
+            const defaultColor = this.colors[colorIndex];
+            // For pie/doughnut/polarArea, apply colors to each segment
+            if (['pie', 'doughnut', 'polarArea'].includes(this.type)) {
+                const dataLength = Array.isArray(dataset.data) ? dataset.data.length : 0;
+                const segmentColors = Array.from({ length: dataLength }, (_, i) => this.colors[i % this.colors.length]);
+                return {
+                    ...dataset,
+                    backgroundColor: dataset.backgroundColor || segmentColors,
+                    borderColor: dataset.borderColor || '#ffffff',
+                    borderWidth: dataset.borderWidth ?? 2,
+                };
+            }
+            // For line charts, add some defaults
+            if (this.type === 'line') {
+                return {
+                    ...dataset,
+                    backgroundColor: dataset.backgroundColor || `${defaultColor}20`,
+                    borderColor: dataset.borderColor || defaultColor,
+                    borderWidth: dataset.borderWidth ?? 2,
+                    fill: dataset.fill ?? false,
+                    tension: dataset.tension ?? 0.4,
+                    pointRadius: dataset.pointRadius ?? 4,
+                    pointHoverRadius: dataset.pointHoverRadius ?? 6,
+                };
+            }
+            // For bar charts
+            if (this.type === 'bar') {
+                return {
+                    ...dataset,
+                    backgroundColor: dataset.backgroundColor || defaultColor,
+                    borderColor: dataset.borderColor || defaultColor,
+                    borderWidth: dataset.borderWidth ?? 0,
+                    borderRadius: 4,
+                };
             }
-          }
-        },
-        tooltip: {
-          enabled: !0,
-          backgroundColor: "#1F2937",
-          titleFont: {
-            family: "Inter, system-ui, sans-serif",
-            size: 13
-          },
-          bodyFont: {
-            family: "Inter, system-ui, sans-serif",
-            size: 12
-          },
-          padding: 12,
-          cornerRadius: 8,
-          callbacks: {
-            label: (t) => {
-              const a = t.dataset.label || "", e = t.parsed.y ?? t.parsed;
-              return `${a}: ${e}`;
+            // For radar charts
+            if (this.type === 'radar') {
+                return {
+                    ...dataset,
+                    backgroundColor: dataset.backgroundColor || `${defaultColor}40`,
+                    borderColor: dataset.borderColor || defaultColor,
+                    borderWidth: dataset.borderWidth ?? 2,
+                    pointBackgroundColor: defaultColor,
+                    pointBorderColor: '#ffffff',
+                };
             }
-          }
+            // Default styling for other chart types
+            return {
+                ...dataset,
+                backgroundColor: dataset.backgroundColor || defaultColor,
+                borderColor: dataset.borderColor || defaultColor,
+            };
+        });
+        return {
+            labels: this.data.labels || [],
+            datasets: processedDatasets,
+        };
+    }
+    /**
+     * Merge user options with default options.
+     */
+    _mergeOptions() {
+        const defaultOptions = {
+            responsive: this.responsive,
+            maintainAspectRatio: this.maintainAspectRatio,
+            animation: this.enableAnimation
+                ? { duration: this.animationDuration }
+                : false,
+            plugins: {
+                legend: {
+                    display: this.showLegend,
+                    position: this.legendPosition,
+                    labels: {
+                        usePointStyle: true,
+                        padding: 16,
+                        font: {
+                            family: 'Inter, system-ui, sans-serif',
+                            size: 12,
+                        },
+                    },
+                },
+                tooltip: {
+                    enabled: true,
+                    backgroundColor: '#1F2937',
+                    titleFont: {
+                        family: 'Inter, system-ui, sans-serif',
+                        size: 13,
+                    },
+                    bodyFont: {
+                        family: 'Inter, system-ui, sans-serif',
+                        size: 12,
+                    },
+                    padding: 12,
+                    cornerRadius: 8,
+                    callbacks: {
+                        label: (context) => {
+                            const label = context.dataset.label || '';
+                            const value = context.parsed.y ?? context.parsed;
+                            return `${label}: ${value}`;
+                        },
+                    },
+                },
+            },
+            onClick: (event, elements, chart) => {
+                this._handleChartClick(event, elements, chart);
+            },
+            onHover: (event, elements, chart) => {
+                this._handleChartHover(event, elements, chart);
+            },
+        };
+        // Add scale options for charts that use scales
+        if (['line', 'bar', 'scatter', 'bubble'].includes(this.type)) {
+            defaultOptions.scales = {
+                x: {
+                    grid: {
+                        display: true,
+                        color: '#E5E7EB',
+                    },
+                    ticks: {
+                        font: {
+                            family: 'Inter, system-ui, sans-serif',
+                            size: 11,
+                        },
+                        color: '#6B7280',
+                    },
+                },
+                y: {
+                    grid: {
+                        display: true,
+                        color: '#E5E7EB',
+                    },
+                    ticks: {
+                        font: {
+                            family: 'Inter, system-ui, sans-serif',
+                            size: 11,
+                        },
+                        color: '#6B7280',
+                    },
+                    beginAtZero: true,
+                },
+            };
         }
-      },
-      onClick: (t, a, e) => {
-        this._handleChartClick(t, a, e);
-      },
-      onHover: (t, a, e) => {
-        this._handleChartHover(t, a, e);
-      }
-    };
-    return ["line", "bar", "scatter", "bubble"].includes(this.type) && (i.scales = {
-      x: {
-        grid: {
-          display: !0,
-          color: "#E5E7EB"
-        },
-        ticks: {
-          font: {
-            family: "Inter, system-ui, sans-serif",
-            size: 11
-          },
-          color: "#6B7280"
+        // Deep merge user options with defaults
+        return this._deepMerge(defaultOptions, this.options);
+    }
+    /**
+     * Deep merge two objects.
+     */
+    _deepMerge(target, source) {
+        const output = { ...target };
+        for (const key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+                if (source[key] &&
+                    typeof source[key] === 'object' &&
+                    !Array.isArray(source[key])) {
+                    output[key] = this._deepMerge(target[key] || {}, source[key]);
+                }
+                else {
+                    output[key] = source[key];
+                }
+            }
         }
-      },
-      y: {
-        grid: {
-          display: !0,
-          color: "#E5E7EB"
-        },
-        ticks: {
-          font: {
-            family: "Inter, system-ui, sans-serif",
-            size: 11
-          },
-          color: "#6B7280"
-        },
-        beginAtZero: !0
-      }
-    }), this._deepMerge(i, this.options);
-  }
-  /**
-   * Deep merge two objects.
-   */
-  _deepMerge(i, t) {
-    const a = { ...i };
-    for (const e in t)
-      Object.prototype.hasOwnProperty.call(t, e) && (t[e] && typeof t[e] == "object" && !Array.isArray(t[e]) ? a[e] = this._deepMerge(
-        i[e] || {},
-        t[e]
-      ) : a[e] = t[e]);
-    return a;
-  }
-  /**
-   * Update the existing chart with new data/options.
-   */
-  _updateChart() {
-    if (!this._chartInstance)
-      return;
-    const i = this._processData();
-    this._chartInstance.data = i, this._chartInstance.options = this._mergeOptions(), this._chartInstance.update(this.enableAnimation ? "default" : "none");
-  }
-  /**
-   * Destroy the chart instance.
-   */
-  _destroyChart() {
-    this._chartInstance && (this._chartInstance.destroy(), this._chartInstance = null);
-  }
-  /**
-   * Handle chart click events.
-   */
-  _handleChartClick(i, t, a) {
-    if (t.length > 0) {
-      const e = t[0], n = e.datasetIndex, d = e.index, m = this.data.datasets[n]?.data[d], l = this.data.labels?.[d], c = {
-        event: i,
-        elements: t,
-        chart: a,
-        dataIndex: d,
-        datasetIndex: n,
-        value: m,
-        label: l
-      };
-      this.dispatch({ eventName: "cre8-chart-click", detailObj: c });
+        return output;
     }
-  }
-  /**
-   * Handle chart hover events.
-   */
-  _handleChartHover(i, t, a) {
-    const e = a.canvas;
-    if (e.style.cursor = t.length > 0 ? "pointer" : "default", t.length > 0) {
-      const n = t[0], d = n.datasetIndex, p = n.index, l = this.data.datasets[d]?.data[p], c = this.data.labels?.[p], y = {
-        event: i,
-        elements: t,
-        chart: a,
-        dataIndex: p,
-        datasetIndex: d,
-        value: l,
-        label: c
-      };
-      this.dispatch({ eventName: "cre8-chart-hover", detailObj: y });
+    /**
+     * Update the existing chart with new data/options.
+     */
+    _updateChart() {
+        if (!this._chartInstance) {
+            return;
+        }
+        const processedData = this._processData();
+        this._chartInstance.data = processedData;
+        this._chartInstance.options = this._mergeOptions();
+        this._chartInstance.update(this.enableAnimation ? 'default' : 'none');
     }
-  }
-  /**
-   * Public method to get the Chart.js instance.
-   */
-  getChartInstance() {
-    return this._chartInstance;
-  }
-  /**
-   * Public method to force refresh the chart.
-   */
-  refresh() {
-    this._destroyChart(), this._initializeChart();
-  }
-  /**
-   * Public method to download chart as image.
-   */
-  downloadImage(i = "chart.png") {
-    if (!this._chartInstance)
-      return;
-    const t = this._chartInstance.toBase64Image(), a = document.createElement("a");
-    a.download = i, a.href = t, a.click();
-  }
-  render() {
-    const i = this.componentClassNames("cre8-c-chart", {
-      "cre8-c-chart--loading": this.loading
-    }), t = `
-            width: ${this.width ? `${this.width}px` : "100%"};
+    /**
+     * Destroy the chart instance.
+     */
+    _destroyChart() {
+        if (this._chartInstance) {
+            this._chartInstance.destroy();
+            this._chartInstance = null;
+        }
+    }
+    /**
+     * Handle chart click events.
+     */
+    _handleChartClick(event, elements, chart) {
+        if (elements.length > 0) {
+            const element = elements[0];
+            const datasetIndex = element.datasetIndex;
+            const dataIndex = element.index;
+            const dataset = this.data.datasets[datasetIndex];
+            const value = dataset?.data[dataIndex];
+            const label = this.data.labels?.[dataIndex];
+            const detail = {
+                event,
+                elements,
+                chart,
+                dataIndex,
+                datasetIndex,
+                value,
+                label,
+            };
+            // @ts-expect-error: `dispatch` is not defined on `Cre8Element`
+            this.dispatch({ eventName: 'cre8-chart-click', detailObj: detail });
+        }
+    }
+    /**
+     * Handle chart hover events.
+     */
+    _handleChartHover(event, elements, chart) {
+        // Update cursor style
+        const canvas = chart.canvas;
+        canvas.style.cursor = elements.length > 0 ? 'pointer' : 'default';
+        if (elements.length > 0) {
+            const element = elements[0];
+            const datasetIndex = element.datasetIndex;
+            const dataIndex = element.index;
+            const dataset = this.data.datasets[datasetIndex];
+            const value = dataset?.data[dataIndex];
+            const label = this.data.labels?.[dataIndex];
+            const detail = {
+                event,
+                elements,
+                chart,
+                dataIndex,
+                datasetIndex,
+                value,
+                label,
+            };
+            // @ts-expect-error: `dispatch` is not defined on `Cre8Element`
+            this.dispatch({ eventName: 'cre8-chart-hover', detailObj: detail });
+        }
+    }
+    /**
+     * Public method to get the Chart.js instance.
+     */
+    getChartInstance() {
+        return this._chartInstance;
+    }
+    /**
+     * Public method to force refresh the chart.
+     */
+    refresh() {
+        this._destroyChart();
+        this._initializeChart();
+    }
+    /**
+     * Public method to download chart as image.
+     */
+    downloadImage(filename = 'chart.png') {
+        if (!this._chartInstance) {
+            return;
+        }
+        const url = this._chartInstance.toBase64Image();
+        const link = document.createElement('a');
+        link.download = filename;
+        link.href = url;
+        link.click();
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-chart', {
+            'cre8-c-chart--loading': this.loading,
+        });
+        const containerStyle = `
+            width: ${this.width ? `${this.width}px` : '100%'};
             height: ${this.height}px;
         `;
-    return h`
-            <div class="${i}" style="${t}">
-                ${this.loading ? h`
+        return html `
+            <div class="${componentClassName}" style="${containerStyle}">
+                ${this.loading
+            ? html `
                         <div class="cre8-c-chart__loading">
                             <div class="cre8-c-chart__spinner"></div>
                             <span class="cre8-c-chart__loading-text">Loading chart...</span>
                         </div>
-                    ` : h`
+                    `
+            : html `
                         <canvas
                             role="img"
                             aria-label="${this.ariaLabel}"
@@ -677,63 +492,62 @@ const g = class g extends z {
                     `}
             </div>
         `;
-  }
-};
-g.styles = [v];
-let r = g;
-o([
-  s({ type: String })
-], r.prototype, "type");
-o([
-  s({ type: Object, attribute: !1 })
-], r.prototype, "data");
-o([
-  s({ type: Object, attribute: !1 })
-], r.prototype, "options");
-o([
-  s({ type: Number })
-], r.prototype, "width");
-o([
-  s({ type: Number })
-], r.prototype, "height");
-o([
-  s({ type: Boolean, attribute: "maintain-aspect-ratio" })
-], r.prototype, "maintainAspectRatio");
-o([
-  s({ type: Boolean })
-], r.prototype, "responsive");
-o([
-  s({ type: Boolean, reflect: !0 })
-], r.prototype, "loading");
-o([
-  s({ type: String, attribute: "aria-label" })
-], r.prototype, "ariaLabel");
-o([
-  s({ type: Boolean, attribute: "show-legend" })
-], r.prototype, "showLegend");
-o([
-  s({ type: String, attribute: "legend-position" })
-], r.prototype, "legendPosition");
-o([
-  s({ type: Boolean, attribute: "enable-animation" })
-], r.prototype, "enableAnimation");
-o([
-  s({ type: Number, attribute: "animation-duration" })
-], r.prototype, "animationDuration");
-o([
-  s({ type: Array, attribute: !1 })
-], r.prototype, "colors");
-o([
-  f()
-], r.prototype, "_chartInstance");
-o([
-  f()
-], r.prototype, "_isConnected");
-o([
-  _("canvas")
-], r.prototype, "_canvas");
-customElements.get("cre8-chart") === void 0 && customElements.define("cre8-chart", r);
-export {
-  r as Cre8Chart,
-  r as default
-};
+    }
+}
+Cre8Chart.styles = [styles];
+__decorate([
+    property({ type: String })
+], Cre8Chart.prototype, "type", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], Cre8Chart.prototype, "data", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], Cre8Chart.prototype, "options", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8Chart.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8Chart.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'maintain-aspect-ratio' })
+], Cre8Chart.prototype, "maintainAspectRatio", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Chart.prototype, "responsive", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Chart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' })
+], Cre8Chart.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], Cre8Chart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: String, attribute: 'legend-position' })
+], Cre8Chart.prototype, "legendPosition", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'enable-animation' })
+], Cre8Chart.prototype, "enableAnimation", void 0);
+__decorate([
+    property({ type: Number, attribute: 'animation-duration' })
+], Cre8Chart.prototype, "animationDuration", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], Cre8Chart.prototype, "colors", void 0);
+__decorate([
+    state()
+], Cre8Chart.prototype, "_chartInstance", void 0);
+__decorate([
+    state()
+], Cre8Chart.prototype, "_isConnected", void 0);
+__decorate([
+    query('canvas')
+], Cre8Chart.prototype, "_canvas", void 0);
+if (customElements.get('cre8-chart') === undefined) {
+    customElements.define('cre8-chart', Cre8Chart);
+}
+export default Cre8Chart;
+//# sourceMappingURL=chart.js.map