myio-js-library 0.1.321 → 0.1.324

package/dist/index.cjs

@@ -680,6 +680,7 @@ __export(index_exports, {
   createDeviceItem: () => createDeviceItem,
   createDeviceItemsFromMap: () => createDeviceItemsFromMap,
   createDistributionChartWidget: () => createDistributionChartWidget,
+  createEnergyPanelComponent: () => createEnergyPanelComponent,
   createFilterModalComponent: () => createFilterModalComponent,
   createFooterComponent: () => createFooterComponent,
   createHeaderComponent: () => createHeaderComponent,
@@ -689,6 +690,7 @@ __export(index_exports, {
   createMenuComponent: () => createMenuComponent,
   createModalHeader: () => createModalHeader,
   createTelemetryGridComponent: () => createTelemetryGridComponent,
+  createWaterPanelComponent: () => createWaterPanelComponent,
   decodePayload: () => decodePayload,
   decodePayloadBase64Xor: () => decodePayloadBase64Xor,
   detectContext: () => detectContext,
@@ -1775,8 +1777,8 @@ function normalizeConnectionStatus(rawStatus) {
   }
   return "offline";
 }
-function isTelemetryStale(telemetryTimestamp, lastActivityTime = null, delayMins = 1440) {
-  const timestamp = telemetryTimestamp && telemetryTimestamp > 0 ? telemetryTimestamp : lastActivityTime && lastActivityTime > 0 ? lastActivityTime : null;
+function isTelemetryStale(telemetryTimestamp, delayMins) {
+  const timestamp = telemetryTimestamp && telemetryTimestamp > 0 ? telemetryTimestamp : null;
   if (!timestamp) {
     return false;
   }
@@ -1786,12 +1788,8 @@ function isTelemetryStale(telemetryTimestamp, lastActivityTime = null, delayMins
   const timeSinceUpdate = now.getTime() - lastUpdate.getTime();
   return timeSinceUpdate > delayMs;
 }
-function isConnectionStale({
-  connectionStatusTs = null,
-  lastActivityTime = null,
-  delayTimeConnectionInMins = 1440
-} = {}) {
-  return isTelemetryStale(connectionStatusTs, lastActivityTime, delayTimeConnectionInMins);
+function isConnectionStale({ connectionStatusTs = null, delayTimeConnectionInMins } = {}) {
+  return isTelemetryStale(connectionStatusTs, delayTimeConnectionInMins);
 }
 function mapDeviceStatusToCardStatus(deviceStatus) {
   const statusMap = {
@@ -1857,41 +1855,33 @@ function calculateDeviceStatus({
   domain = "energy",
   telemetryValue = null,
   telemetryTimestamp = null,
-  // v3: MUST be domain-specific (consumptionTs, pulsesTs, etc.)
-  lastActivityTime = null,
-  // v3: NOT USED as fallback anymore
+  // MUST be domain-specific (consumptionTs, pulsesTs, etc.)
   ranges = null,
   // RFC-0110 v2: Dual threshold configuration
-  delayTimeConnectionInMins = 1440,
-  // For 'online' status (24h default)
-  shortDelayMins = 60,
-  // For 'offline'/'bad' status (60 mins default)
+  delayTimeConnectionInMins,
+  // For 'online' status
+  shortDelayMins,
+  // For 'offline'/'bad' status
   // Legacy parameters (backward compatibility)
   lastConsumptionValue = null,
   limitOfPowerOnStandByWatts = null,
   limitOfPowerOnAlertWatts = null,
-  limitOfPowerOnFailureWatts = null,
-  // @deprecated - kept for backward compatibility
-  lastConnectTime = null,
-  lastDisconnectTime = null
+  limitOfPowerOnFailureWatts = null
 }) {
   const normalizedStatus = normalizeConnectionStatus(connectionStatus);
   if (normalizedStatus === "waiting") {
     return DeviceStatusType.NOT_INSTALLED;
   }
   const hasTelemetryTs = telemetryTimestamp !== null && telemetryTimestamp !== void 0 && telemetryTimestamp > 0;
-  const hasLastActivityTime = lastActivityTime !== null && lastActivityTime !== void 0 && lastActivityTime > 0;
-  const effectiveTimestampForRecovery = hasTelemetryTs ? telemetryTimestamp : hasLastActivityTime ? lastActivityTime : null;
-  const hasEffectiveTimestampForRecovery = effectiveTimestampForRecovery !== null;
   if (normalizedStatus === "bad") {
-    const hasRecentTelemetry = hasEffectiveTimestampForRecovery && !isTelemetryStale(effectiveTimestampForRecovery, null, shortDelayMins);
+    const hasRecentTelemetry = hasTelemetryTs && !isTelemetryStale(telemetryTimestamp, shortDelayMins);
     if (hasRecentTelemetry) {
     } else {
       return DeviceStatusType.WEAK_CONNECTION;
     }
   }
   if (normalizedStatus === "offline") {
-    const hasRecentTelemetry = hasEffectiveTimestampForRecovery && !isTelemetryStale(effectiveTimestampForRecovery, null, shortDelayMins);
+    const hasRecentTelemetry = hasTelemetryTs && !isTelemetryStale(telemetryTimestamp, shortDelayMins);
     if (!hasRecentTelemetry) {
       return DeviceStatusType.OFFLINE;
     }
@@ -1900,7 +1890,7 @@ function calculateDeviceStatus({
     if (!hasTelemetryTs) {
       return DeviceStatusType.OFFLINE;
     }
-    const telemetryStale = isTelemetryStale(telemetryTimestamp, null, delayTimeConnectionInMins);
+    const telemetryStale = isTelemetryStale(telemetryTimestamp, delayTimeConnectionInMins);
     if (telemetryStale) {
       return DeviceStatusType.OFFLINE;
     }
@@ -1953,31 +1943,19 @@ function calculateDeviceStatusWithRanges({
   ranges,
   // RFC-0110: New parameters
   telemetryTimestamp = null,
-  lastActivityTime = null,
-  delayTimeConnectionInMins = 1440,
-  // @deprecated - kept for backward compatibility
-  lastConnectTime = null,
-  lastDisconnectTime = null
+  delayTimeConnectionInMins
 }) {
   return calculateDeviceStatus({
     connectionStatus,
     domain: "energy",
     telemetryValue: lastConsumptionValue,
-    telemetryTimestamp: telemetryTimestamp || lastConnectTime || lastDisconnectTime,
-    lastActivityTime,
+    telemetryTimestamp,
     ranges,
     delayTimeConnectionInMins
   });
 }
 function calculateDeviceStatusMasterRules(options = {}) {
-  const {
-    connectionStatus = "",
-    telemetryTimestamp = null,
-    delayMins = 1440,
-    // 24h for online status
-    domain = "energy"
-  } = options;
-  const SHORT_DELAY_MINS = 60;
+  const { connectionStatus, telemetryTimestamp = null, delayMins, domain, SHORT_DELAY_MINS } = options;
   const now = Date.now();
   const normalizedStatus = (connectionStatus || "").toLowerCase().trim();
   if (normalizedStatus === "waiting" || normalizedStatus === "connecting" || normalizedStatus === "pending") {
@@ -2132,9 +2110,6 @@ function createDeviceItem(entityId, meta, options = {}) {
       domain: "energy",
       telemetryValue: consumptionValue,
       telemetryTimestamp: telemetryTs,
-      // v3: MUST be consumptionTs, NOT lastActivityTime
-      lastActivityTime: null,
-      // v3: NOT used as fallback
       ranges,
       delayTimeConnectionInMins
     });
@@ -2145,8 +2120,8 @@ function createDeviceItem(entityId, meta, options = {}) {
       deviceStatus = DeviceStatusType.OFFLINE;
     } else {
       const SHORT_DELAY_MINS = 60;
-      const hasRecentTelemetry = !isTelemetryStale(telemetryTs, null, SHORT_DELAY_MINS);
-      const staleTelemetryLong = isTelemetryStale(telemetryTs, null, delayTimeConnectionInMins);
+      const hasRecentTelemetry = !isTelemetryStale(telemetryTs, SHORT_DELAY_MINS);
+      const staleTelemetryLong = isTelemetryStale(telemetryTs, delayTimeConnectionInMins);
       if (connectionStatus === "bad") {
         deviceStatus = hasRecentTelemetry ? DeviceStatusType.POWER_ON : DeviceStatusType.WEAK_CONNECTION;
       } else if (connectionStatus === "offline") {
@@ -50833,7 +50808,22 @@ function createConsumption7DaysChart(config) {
         "#65a30d",
         "#d97706",
         "#be185d",
-        "#0d9488"
+        "#0d9488",
+        "#7c3aed",
+        "#059669",
+        "#db2777",
+        "#9333ea",
+        "#0284c7",
+        "#ca8a04",
+        "#4f46e5",
+        "#c026d3",
+        "#14b8a6",
+        "#f97316",
+        "#6366f1",
+        "#84cc16",
+        "#ec4899",
+        "#06b6d4",
+        "#a855f7"
       ];
       datasets = Object.entries(data.shoppingData).map(([shoppingId, values], index) => ({
         label: data.shoppingNames?.[shoppingId] || shoppingId,
@@ -66578,6 +66568,1629 @@ var CustomerCardV1 = class {
 function createCustomerCardV1(params) {
   return new CustomerCardV1(params);
 }
+
+// src/components/energy-panel/EnergyPanelController.ts
+var EnergyPanelController = class {
+  state;
+  params;
+  onStateChange = null;
+  constructor(params) {
+    this.params = params;
+    this.state = {
+      theme: params.theme || "light",
+      period: params.period || 7,
+      vizMode: params.vizMode || "total",
+      chartType: params.chartType || "line",
+      selectedShoppingIds: params.selectedShoppingIds || [],
+      summary: params.initialSummary || null,
+      isLoading: false,
+      error: null
+    };
+  }
+  setOnStateChange(callback) {
+    this.onStateChange = callback;
+  }
+  notifyStateChange() {
+    if (this.onStateChange) {
+      this.onStateChange({ ...this.state });
+    }
+  }
+  getState() {
+    return { ...this.state };
+  }
+  getSummary() {
+    return this.state.summary ? { ...this.state.summary } : null;
+  }
+  updateSummary(data) {
+    this.state.summary = { ...data };
+    this.notifyStateChange();
+  }
+  setTheme(mode) {
+    if (this.state.theme !== mode) {
+      this.state.theme = mode;
+      this.notifyStateChange();
+    }
+  }
+  setPeriod(days) {
+    if (this.state.period !== days) {
+      this.state.period = days;
+      this.params.onPeriodChange?.(days);
+      this.notifyStateChange();
+    }
+  }
+  setVizMode(mode) {
+    if (this.state.vizMode !== mode) {
+      this.state.vizMode = mode;
+      this.params.onVizModeChange?.(mode);
+      this.notifyStateChange();
+    }
+  }
+  setChartType(type) {
+    if (this.state.chartType !== type) {
+      this.state.chartType = type;
+      this.notifyStateChange();
+    }
+  }
+  applyShoppingFilter(ids) {
+    this.state.selectedShoppingIds = [...ids];
+    this.params.onFilterChange?.(ids);
+    this.notifyStateChange();
+  }
+  clearFilters() {
+    this.state.selectedShoppingIds = [];
+    this.params.onFilterChange?.([]);
+    this.notifyStateChange();
+  }
+  setLoading(loading) {
+    this.state.isLoading = loading;
+    this.notifyStateChange();
+  }
+  setError(error) {
+    this.state.error = error;
+    this.notifyStateChange();
+  }
+};
+
+// src/components/energy-panel/styles.ts
+var ENERGY_PANEL_STYLES = `
+  .energy-panel-wrap {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: #1e293b;
+    background-color: #f8fafc;
+    padding: 16px;
+    border-radius: 12px;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] {
+    color: #e2e8f0;
+    background-color: #1e293b;
+  }
+
+  .energy-panel__cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 16px;
+    margin-bottom: 20px;
+  }
+
+  .energy-panel__card {
+    background-color: #ffffff;
+    padding: 16px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    border: 1px solid #e2e8f0;
+    transition: box-shadow 0.2s ease;
+  }
+
+  .energy-panel__card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__card {
+    background-color: #334155;
+    border-color: #475569;
+  }
+
+  .energy-panel__card-icon {
+    font-size: 2.5em;
+    margin-right: 16px;
+  }
+
+  .energy-panel__card-label {
+    font-size: 13px;
+    color: #64748b;
+    font-weight: 500;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__card-label {
+    color: #94a3b8;
+  }
+
+  .energy-panel__card-value {
+    font-size: 1.6em;
+    font-weight: 700;
+    color: #2563eb;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__card-value {
+    color: #60a5fa;
+  }
+
+  .energy-panel__card-count {
+    font-size: 12px;
+    color: #94a3b8;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__card-count {
+    color: #64748b;
+  }
+
+  .energy-panel__chart-section {
+    background-color: #ffffff;
+    padding: 16px;
+    border-radius: 12px;
+    border: 1px solid #e2e8f0;
+    margin-bottom: 20px;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__chart-section {
+    background-color: #334155;
+    border-color: #475569;
+  }
+
+  .energy-panel__chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__chart-header {
+    border-bottom-color: #475569;
+  }
+
+  .energy-panel__chart-title-group {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .energy-panel__chart-header h3 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__chart-header h3 {
+    color: #f1f5f9;
+  }
+
+  /* Tab styles */
+  .energy-panel__chart-tabs {
+    display: flex;
+    gap: 2px;
+    background: #f1f5f9;
+    padding: 3px;
+    border-radius: 8px;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__chart-tabs {
+    background: #1e293b;
+  }
+
+  .energy-panel__tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 10px;
+    border: none;
+    background: transparent;
+    color: #64748b;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .energy-panel__tab:hover {
+    color: #1e293b;
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__tab:hover {
+    color: #e2e8f0;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .energy-panel__tab.active {
+    background: #2563eb;
+    color: white;
+    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
+  }
+
+  .energy-panel__tab svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Controls */
+  .energy-panel__chart-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .energy-panel__chart-controls select {
+    padding: 6px 12px;
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+    background-color: #ffffff;
+    color: #1e293b;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    min-width: 180px;
+  }
+
+  .energy-panel__chart-controls select:focus {
+    outline: none;
+    border-color: #2563eb;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__chart-controls select {
+    background-color: #1e293b;
+    border-color: #475569;
+    color: #e2e8f0;
+  }
+
+  .energy-panel__period-select {
+    min-width: 100px !important;
+  }
+
+  .energy-panel__distribution-mode {
+    min-width: 220px !important;
+  }
+
+  .energy-panel__maximize-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    background: transparent;
+    color: #64748b;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s ease;
+  }
+
+  .energy-panel__maximize-btn:hover {
+    background: #2563eb;
+    border-color: #2563eb;
+    color: white;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__maximize-btn {
+    border-color: #475569;
+    color: #94a3b8;
+  }
+
+  .energy-panel-wrap[data-theme="dark"] .energy-panel__maximize-btn:hover {
+    background: #2563eb;
+    border-color: #2563eb;
+    color: white;
+  }
+
+  /* Chart containers */
+  .energy-panel__consumption-chart,
+  .energy-panel__distribution-chart {
+    min-height: 220px;
+    position: relative;
+  }
+
+  .energy-panel__consumption-chart canvas,
+  .energy-panel__distribution-chart canvas {
+    width: 100% !important;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .energy-panel__chart-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .energy-panel__chart-title-group {
+      width: 100%;
+      flex-wrap: wrap;
+    }
+
+    .energy-panel__chart-controls {
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    .energy-panel__distribution-mode {
+      flex: 1;
+    }
+  }
+`;
+function injectEnergyPanelStyles() {
+  if (!document.getElementById("energy-panel-styles")) {
+    const styleTag = document.createElement("style");
+    styleTag.id = "energy-panel-styles";
+    styleTag.textContent = ENERGY_PANEL_STYLES;
+    document.head.appendChild(styleTag);
+  }
+}
+
+// src/components/energy-panel/EnergyPanelView.ts
+var EnergyPanelView = class {
+  params;
+  controller;
+  root = null;
+  // Chart widget instances (using existing reusable components)
+  consumptionWidget = null;
+  distributionWidget = null;
+  // Unique IDs for this panel instance
+  panelId;
+  constructor(params, controller) {
+    this.params = params;
+    this.controller = controller;
+    this.panelId = `energy-panel-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    this.controller.setOnStateChange((state6) => this.onStateChange(state6));
+  }
+  render() {
+    injectEnergyPanelStyles();
+    const state6 = this.controller.getState();
+    this.root = document.createElement("div");
+    this.root.className = "energy-panel-wrap";
+    this.root.setAttribute("data-theme", state6.theme);
+    this.root.setAttribute("data-domain", "energy");
+    this.root.innerHTML = this.buildHTML(state6);
+    this.bindEvents();
+    setTimeout(() => this.initializeCharts(), 0);
+    return this.root;
+  }
+  buildHTML(state6) {
+    const { showCards = true, showConsumptionChart = true, showDistributionChart = true } = this.params;
+    return `
+      <div class="energy-panel">
+        ${showCards ? this.buildCardsHTML(state6) : ""}
+        ${showConsumptionChart ? this.buildConsumptionChartContainerHTML() : ""}
+        ${showDistributionChart ? this.buildDistributionChartContainerHTML() : ""}
+      </div>
+    `;
+  }
+  buildCardsHTML(state6) {
+    const summary = state6.summary;
+    const storesValue = summary?.storesTotal ?? 0;
+    const equipmentsValue = summary?.equipmentsTotal ?? 0;
+    return `
+      <div class="energy-panel__cards">
+        <div class="energy-panel__card" data-type="stores">
+          <div class="energy-panel__card-icon">&#127968;</div>
+          <div class="energy-panel__card-content">
+            <div class="energy-panel__card-label">Consumo Lojas</div>
+            <div class="energy-panel__card-value">${this.formatEnergy(storesValue)}</div>
+            <div class="energy-panel__card-count">${summary?.byCategory?.lojas?.count || 0} medidores</div>
+          </div>
+        </div>
+        <div class="energy-panel__card" data-type="equipments">
+          <div class="energy-panel__card-icon">&#x2699;&#xfe0f;</div>
+          <div class="energy-panel__card-content">
+            <div class="energy-panel__card-label">Consumo Equipamentos</div>
+            <div class="energy-panel__card-value">${this.formatEnergy(equipmentsValue)}</div>
+            <div class="energy-panel__card-count">${this.getEquipmentCount(summary)} equipamentos</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Container for consumption chart widget (RFC-0098)
+   * The createConsumptionChartWidget will inject its own HTML structure
+   */
+  buildConsumptionChartContainerHTML() {
+    return `
+      <div class="energy-panel__chart-section">
+        <div id="${this.panelId}-consumption-chart" class="energy-panel__consumption-chart"></div>
+      </div>
+    `;
+  }
+  /**
+   * Container for distribution chart widget (RFC-0102)
+   * The createDistributionChartWidget will inject its own HTML structure
+   */
+  buildDistributionChartContainerHTML() {
+    return `
+      <div class="energy-panel__chart-section">
+        <div id="${this.panelId}-distribution-chart" class="energy-panel__distribution-chart"></div>
+      </div>
+    `;
+  }
+  formatEnergy(value) {
+    if (value >= 1e3) {
+      return `${(value / 1e3).toFixed(2)} MWh`;
+    }
+    return `${value.toFixed(1)} kWh`;
+  }
+  getEquipmentCount(summary) {
+    if (!summary?.byCategory) return 0;
+    const { climatizacao, elevadores, escadas, outros } = summary.byCategory;
+    return (climatizacao?.count || 0) + (elevadores?.count || 0) + (escadas?.count || 0) + (outros?.count || 0);
+  }
+  bindEvents() {
+  }
+  /**
+   * Initialize chart widgets using the existing reusable components
+   */
+  async initializeCharts() {
+    if (!this.root) return;
+    const state6 = this.controller.getState();
+    const { showConsumptionChart = true, showDistributionChart = true } = this.params;
+    if (showConsumptionChart) {
+      await this.initializeConsumptionWidget(state6);
+    }
+    if (showDistributionChart) {
+      await this.initializeDistributionWidget(state6);
+    }
+  }
+  /**
+   * Initialize the consumption chart using createConsumptionChartWidget
+   * This provides: settings modal, ideal range, viz modes, chart types
+   */
+  async initializeConsumptionWidget(state6) {
+    const containerId = `${this.panelId}-consumption-chart`;
+    const container = this.root?.querySelector(`#${containerId}`);
+    if (!container) {
+      console.warn("[EnergyPanel] Consumption chart container not found");
+      return;
+    }
+    try {
+      this.consumptionWidget = createConsumptionChartWidget({
+        domain: "energy",
+        containerId,
+        title: "Consumo de Energia",
+        unit: "kWh",
+        unitLarge: "MWh",
+        thresholdForLargeUnit: 1e3,
+        theme: state6.theme,
+        defaultPeriod: state6.period,
+        defaultChartType: "line",
+        defaultVizMode: "total",
+        // Settings modal options
+        showSettingsButton: true,
+        showMaximizeButton: true,
+        showVizModeTabs: true,
+        showChartTypeTabs: true,
+        chartHeight: 280,
+        // Data fetching - use params callback or mock data
+        fetchData: this.params.fetchConsumptionData || this.createMockFetchData(),
+        // Callbacks
+        onMaximizeClick: () => {
+          this.params.onMaximizeClick?.();
+        },
+        onSettingsClick: () => {
+          console.log("[EnergyPanel] Settings clicked");
+        },
+        onDataLoaded: (data) => {
+          console.log("[EnergyPanel] Consumption data loaded:", data.labels?.length, "days");
+        },
+        onError: (error) => {
+          console.error("[EnergyPanel] Consumption chart error:", error);
+        },
+        // Ideal range (from customer settings or orchestrator)
+        idealRange: this.params.idealRange || void 0,
+        // ThingsBoard container reference
+        $container: this.params.$container
+      });
+      await this.consumptionWidget.render();
+      console.log("[EnergyPanel] Consumption widget initialized");
+    } catch (error) {
+      console.error("[EnergyPanel] Failed to initialize consumption widget:", error);
+    }
+  }
+  /**
+   * Initialize the distribution chart using createDistributionChartWidget
+   * This provides: mode selector, horizontal bars, shopping colors
+   */
+  async initializeDistributionWidget(state6) {
+    const containerId = `${this.panelId}-distribution-chart`;
+    const container = this.root?.querySelector(`#${containerId}`);
+    if (!container) {
+      console.warn("[EnergyPanel] Distribution chart container not found");
+      return;
+    }
+    try {
+      this.distributionWidget = createDistributionChartWidget({
+        domain: "energy",
+        containerId,
+        title: "Distribuicao de Consumo",
+        unit: "kWh",
+        unitLarge: "MWh",
+        thresholdForLargeUnit: 1e3,
+        theme: state6.theme,
+        chartHeight: 300,
+        showHeader: true,
+        showModeSelector: true,
+        showSettingsButton: false,
+        showMaximizeButton: false,
+        defaultMode: "groups",
+        // Energy-specific modes
+        modes: [
+          { value: "groups", label: "Por Grupos de Equipamentos" },
+          { value: "elevators", label: "Elevadores por Shopping" },
+          { value: "escalators", label: "Escadas Rolantes por Shopping" },
+          { value: "hvac", label: "Climatizacao por Shopping" },
+          { value: "others", label: "Outros Equipamentos por Shopping" },
+          { value: "stores", label: "Lojas por Shopping" }
+        ],
+        // Data fetching
+        fetchDistribution: this.params.fetchDistributionData || this.createMockFetchDistribution(),
+        // Callbacks
+        onModeChange: (mode) => {
+          console.log("[EnergyPanel] Distribution mode changed:", mode);
+        },
+        onDataLoaded: (data) => {
+          console.log("[EnergyPanel] Distribution data loaded:", Object.keys(data).length, "categories");
+        },
+        onError: (error) => {
+          console.error("[EnergyPanel] Distribution chart error:", error);
+        },
+        // Get shopping colors from orchestrator
+        getShoppingColors: () => {
+          return window.MyIOOrchestrator?.getShoppingColors?.() || null;
+        }
+      });
+      await this.distributionWidget.render();
+      console.log("[EnergyPanel] Distribution widget initialized");
+    } catch (error) {
+      console.error("[EnergyPanel] Failed to initialize distribution widget:", error);
+    }
+  }
+  /**
+   * Create mock data fetcher for showcase/demo purposes
+   */
+  createMockFetchData() {
+    return async (period) => {
+      const labels = [];
+      const dailyTotals = [];
+      const today = /* @__PURE__ */ new Date();
+      for (let i = period - 1; i >= 0; i--) {
+        const date = new Date(today);
+        date.setDate(date.getDate() - i);
+        labels.push(date.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" }));
+        const baseValue = 500 + Math.random() * 500;
+        const variation = (Math.random() - 0.5) * 200;
+        dailyTotals.push(Math.max(100, baseValue + variation));
+      }
+      const shoppingData = {
+        "shopping-1": dailyTotals.map((v) => v * 0.35),
+        "shopping-2": dailyTotals.map((v) => v * 0.25),
+        "shopping-3": dailyTotals.map((v) => v * 0.25),
+        "shopping-4": dailyTotals.map((v) => v * 0.15)
+      };
+      const shoppingNames = {
+        "shopping-1": "Shopping Aricanduva",
+        "shopping-2": "Shopping Interlagos",
+        "shopping-3": "Shopping Tucuruvi",
+        "shopping-4": "Shopping Penha"
+      };
+      return {
+        labels,
+        dailyTotals,
+        shoppingData,
+        shoppingNames,
+        fetchTimestamp: Date.now()
+      };
+    };
+  }
+  /**
+   * Create mock distribution data fetcher for showcase/demo purposes
+   */
+  createMockFetchDistribution() {
+    const state6 = this.controller.getState();
+    const summary = state6.summary;
+    return async (mode) => {
+      if (mode === "groups") {
+        if (summary?.byCategory) {
+          return {
+            "Lojas": summary.byCategory.lojas?.total || 0,
+            "Climatizacao": summary.byCategory.climatizacao?.total || 0,
+            "Elevadores": summary.byCategory.elevadores?.total || 0,
+            "Escadas Rolantes": summary.byCategory.escadas?.total || 0,
+            "Outros": summary.byCategory.outros?.total || 0
+          };
+        }
+        return {
+          "Lojas": 12500,
+          "Climatizacao": 8500,
+          "Elevadores": 3200,
+          "Escadas Rolantes": 2100,
+          "Outros": 1800
+        };
+      }
+      if (mode === "elevators") {
+        return {
+          "Shopping Aricanduva": 2400,
+          "Shopping Interlagos": 1800,
+          "Shopping Tucuruvi": 1500,
+          "Shopping Penha": 1200,
+          "Shopping Tatuape": 900
+        };
+      }
+      if (mode === "escalators") {
+        return {
+          "Shopping Aricanduva": 1800,
+          "Shopping Interlagos": 1400,
+          "Shopping Tucuruvi": 1100,
+          "Shopping Penha": 800
+        };
+      }
+      if (mode === "hvac") {
+        return {
+          "Shopping Aricanduva": 5200,
+          "Shopping Interlagos": 4100,
+          "Shopping Tucuruvi": 3800,
+          "Shopping Penha": 3200,
+          "Shopping Tatuape": 2800,
+          "Shopping Santana": 2400
+        };
+      }
+      if (mode === "others") {
+        return {
+          "Shopping Aricanduva": 1200,
+          "Shopping Interlagos": 900,
+          "Shopping Tucuruvi": 700
+        };
+      }
+      if (mode === "stores") {
+        return {
+          "Shopping Aricanduva": 8500,
+          "Shopping Interlagos": 7200,
+          "Shopping Tucuruvi": 6800,
+          "Shopping Penha": 5500,
+          "Shopping Tatuape": 5100,
+          "Shopping Santana": 4800,
+          "Shopping Campo Limpo": 4200
+        };
+      }
+      return null;
+    };
+  }
+  onStateChange(state6) {
+    if (!this.root) return;
+    this.root.setAttribute("data-theme", state6.theme);
+    if (this.consumptionWidget) {
+      this.consumptionWidget.setTheme(state6.theme);
+    }
+    if (this.distributionWidget) {
+      this.distributionWidget.setTheme(state6.theme);
+    }
+    this.updateCards(state6);
+  }
+  updateCards(state6) {
+    const summary = state6.summary;
+    if (!summary || !this.root) return;
+    const storesCard = this.root.querySelector('[data-type="stores"] .energy-panel__card-value');
+    const equipmentsCard = this.root.querySelector('[data-type="equipments"] .energy-panel__card-value');
+    if (storesCard) {
+      storesCard.textContent = this.formatEnergy(summary.storesTotal);
+    }
+    if (equipmentsCard) {
+      equipmentsCard.textContent = this.formatEnergy(summary.equipmentsTotal);
+    }
+  }
+  /**
+   * Public method to refresh consumption chart data
+   */
+  async refreshConsumptionChart() {
+    if (this.consumptionWidget) {
+      await this.consumptionWidget.refresh(true);
+    }
+  }
+  /**
+   * Public method to refresh distribution chart data
+   */
+  async refreshDistributionChart() {
+    if (this.distributionWidget) {
+      await this.distributionWidget.refresh();
+    }
+  }
+  /**
+   * Public method to set ideal range on consumption chart
+   */
+  setIdealRange(range) {
+    if (this.consumptionWidget) {
+      this.consumptionWidget.setIdealRange(range ? {
+        min: range.min,
+        max: range.max,
+        label: range.label,
+        enabled: true
+      } : null);
+    }
+  }
+  destroy() {
+    if (this.consumptionWidget) {
+      this.consumptionWidget.destroy();
+      this.consumptionWidget = null;
+    }
+    if (this.distributionWidget) {
+      this.distributionWidget.destroy();
+      this.distributionWidget = null;
+    }
+    this.root?.remove();
+    this.root = null;
+  }
+};
+
+// src/components/energy-panel/createEnergyPanelComponent.ts
+function createEnergyPanelComponent(params) {
+  if (!params.container) {
+    throw new Error("[EnergyPanel] container is required");
+  }
+  const controller = new EnergyPanelController(params);
+  const view = new EnergyPanelView(params, controller);
+  const element = view.render();
+  params.container.appendChild(element);
+  return {
+    element,
+    updateSummary: (data) => controller.updateSummary(data),
+    getSummary: () => controller.getSummary(),
+    setTheme: (mode) => controller.setTheme(mode),
+    getTheme: () => controller.getState().theme,
+    setPeriod: (days) => controller.setPeriod(days),
+    getPeriod: () => controller.getState().period,
+    setVizMode: (mode) => controller.setVizMode(mode),
+    getVizMode: () => controller.getState().vizMode,
+    setChartType: (type) => controller.setChartType(type),
+    getChartType: () => controller.getState().chartType,
+    applyShoppingFilter: (ids) => controller.applyShoppingFilter(ids),
+    getSelectedShoppingIds: () => [...controller.getState().selectedShoppingIds],
+    clearFilters: () => controller.clearFilters(),
+    refresh: () => {
+      params.onRefresh?.();
+    },
+    openFullscreen: () => {
+      params.onMaximizeClick?.();
+    },
+    destroy: () => view.destroy()
+  };
+}
+
+// src/components/water-panel/WaterPanelController.ts
+var WaterPanelController = class {
+  state;
+  params;
+  onStateChange = null;
+  constructor(params) {
+    this.params = params;
+    this.state = {
+      theme: params.theme || "light",
+      period: params.period || 7,
+      vizMode: params.vizMode || "total",
+      chartType: params.chartType || "line",
+      selectedShoppingIds: params.selectedShoppingIds || [],
+      summary: params.initialSummary || null,
+      isLoading: false,
+      error: null
+    };
+  }
+  // Observer pattern
+  setOnStateChange(callback) {
+    this.onStateChange = callback;
+  }
+  notifyStateChange() {
+    if (this.onStateChange) {
+      this.onStateChange({ ...this.state });
+    }
+  }
+  // Getters
+  getState() {
+    return { ...this.state };
+  }
+  getSummary() {
+    return this.state.summary ? { ...this.state.summary } : null;
+  }
+  // Data updates
+  updateSummary(data) {
+    const total = data.total || data.storesTotal + data.commonAreaTotal;
+    const storesPercentage = total > 0 ? data.storesTotal / total * 100 : 0;
+    const commonAreaPercentage = total > 0 ? data.commonAreaTotal / total * 100 : 0;
+    this.state.summary = {
+      ...data,
+      total,
+      storesPercentage: data.storesPercentage ?? storesPercentage,
+      commonAreaPercentage: data.commonAreaPercentage ?? commonAreaPercentage
+    };
+    this.notifyStateChange();
+  }
+  // Config updates
+  setTheme(mode) {
+    if (this.state.theme !== mode) {
+      this.state.theme = mode;
+      this.notifyStateChange();
+    }
+  }
+  setPeriod(days) {
+    if (this.state.period !== days) {
+      this.state.period = days;
+      this.params.onPeriodChange?.(days);
+      this.notifyStateChange();
+    }
+  }
+  setVizMode(mode) {
+    if (this.state.vizMode !== mode) {
+      this.state.vizMode = mode;
+      this.params.onVizModeChange?.(mode);
+      this.notifyStateChange();
+    }
+  }
+  setChartType(type) {
+    if (this.state.chartType !== type) {
+      this.state.chartType = type;
+      this.notifyStateChange();
+    }
+  }
+  // Filter updates
+  applyShoppingFilter(ids) {
+    this.state.selectedShoppingIds = [...ids];
+    this.params.onFilterChange?.(ids);
+    this.notifyStateChange();
+  }
+  clearFilters() {
+    this.state.selectedShoppingIds = [];
+    this.params.onFilterChange?.([]);
+    this.notifyStateChange();
+  }
+  // Loading state
+  setLoading(loading) {
+    this.state.isLoading = loading;
+    this.notifyStateChange();
+  }
+  setError(error) {
+    this.state.error = error;
+    this.notifyStateChange();
+  }
+};
+
+// src/components/water-panel/styles.ts
+var WATER_PANEL_STYLES = `
+  .water-panel-wrap {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: #1e293b;
+    background-color: #f8fafc;
+    padding: 16px;
+    border-radius: 12px;
+  }
+
+  .water-panel-wrap[data-theme="dark"] {
+    color: #e2e8f0;
+    background-color: #1e293b;
+  }
+
+  .water-panel__cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 16px;
+    margin-bottom: 20px;
+  }
+
+  .water-panel__card {
+    background-color: #ffffff;
+    padding: 16px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    border: 1px solid #e2e8f0;
+    transition: box-shadow 0.2s ease;
+  }
+
+  .water-panel__card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__card {
+    background-color: #334155;
+    border-color: #475569;
+  }
+
+  .water-panel__card--total {
+    border-left: 4px solid #0288d1;
+  }
+
+  .water-panel__card-icon {
+    font-size: 2.5em;
+    margin-right: 16px;
+  }
+
+  .water-panel__card-content {
+    flex: 1;
+  }
+
+  .water-panel__card-label {
+    font-size: 13px;
+    color: #64748b;
+    font-weight: 500;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__card-label {
+    color: #94a3b8;
+  }
+
+  .water-panel__card-value {
+    font-size: 1.6em;
+    font-weight: 700;
+    color: #0288d1;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__card-value {
+    color: #38bdf8;
+  }
+
+  .water-panel__card-trend {
+    font-size: 12px;
+    color: #64748b;
+    margin-top: 2px;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__card-trend {
+    color: #94a3b8;
+  }
+
+  .water-panel__card-count {
+    font-size: 12px;
+    color: #94a3b8;
+    margin-top: 4px;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__card-count {
+    color: #64748b;
+  }
+
+  .water-panel__chart-section {
+    background-color: #ffffff;
+    padding: 16px;
+    border-radius: 12px;
+    border: 1px solid #e2e8f0;
+    margin-bottom: 20px;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__chart-section {
+    background-color: #334155;
+    border-color: #475569;
+  }
+
+  .water-panel__chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__chart-header {
+    border-bottom-color: #475569;
+  }
+
+  .water-panel__chart-title-group {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .water-panel__chart-header h3 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__chart-header h3 {
+    color: #f1f5f9;
+  }
+
+  /* Tab styles */
+  .water-panel__chart-tabs {
+    display: flex;
+    gap: 2px;
+    background: #f1f5f9;
+    padding: 3px;
+    border-radius: 8px;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__chart-tabs {
+    background: #1e293b;
+  }
+
+  .water-panel__tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 10px;
+    border: none;
+    background: transparent;
+    color: #64748b;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .water-panel__tab:hover {
+    color: #1e293b;
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__tab:hover {
+    color: #e2e8f0;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .water-panel__tab.active {
+    background: #0288d1;
+    color: white;
+    box-shadow: 0 1px 3px rgba(2, 136, 209, 0.3);
+  }
+
+  .water-panel__tab svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Controls */
+  .water-panel__chart-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .water-panel__chart-controls select {
+    padding: 6px 12px;
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+    background-color: #ffffff;
+    color: #1e293b;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    min-width: 180px;
+  }
+
+  .water-panel__chart-controls select:focus {
+    outline: none;
+    border-color: #0288d1;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__chart-controls select {
+    background-color: #1e293b;
+    border-color: #475569;
+    color: #e2e8f0;
+  }
+
+  .water-panel__period-select {
+    min-width: 100px !important;
+  }
+
+  .water-panel__distribution-mode {
+    min-width: 200px !important;
+  }
+
+  .water-panel__maximize-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    background: transparent;
+    color: #64748b;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s ease;
+  }
+
+  .water-panel__maximize-btn:hover {
+    background: #0288d1;
+    border-color: #0288d1;
+    color: white;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__maximize-btn {
+    border-color: #475569;
+    color: #94a3b8;
+  }
+
+  .water-panel-wrap[data-theme="dark"] .water-panel__maximize-btn:hover {
+    background: #0288d1;
+    border-color: #0288d1;
+    color: white;
+  }
+
+  /* Chart containers */
+  .water-panel__consumption-chart,
+  .water-panel__distribution-chart {
+    min-height: 220px;
+    position: relative;
+  }
+
+  .water-panel__consumption-chart canvas,
+  .water-panel__distribution-chart canvas {
+    width: 100% !important;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .water-panel__chart-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .water-panel__chart-title-group {
+      width: 100%;
+      flex-wrap: wrap;
+    }
+
+    .water-panel__chart-controls {
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    .water-panel__distribution-mode {
+      flex: 1;
+    }
+  }
+`;
+function injectWaterPanelStyles() {
+  if (typeof document === "undefined") return;
+  const id = "myio-water-panel-styles";
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = WATER_PANEL_STYLES;
+  document.head.appendChild(style);
+}
+
+// src/components/water-panel/WaterPanelView.ts
+var WaterPanelView = class {
+  params;
+  controller;
+  root = null;
+  // Chart widget instances (using existing reusable components)
+  consumptionWidget = null;
+  distributionWidget = null;
+  // Unique IDs for this panel instance
+  panelId;
+  constructor(params, controller) {
+    this.params = params;
+    this.controller = controller;
+    this.panelId = `water-panel-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    this.controller.setOnStateChange((state6) => this.onStateChange(state6));
+  }
+  render() {
+    injectWaterPanelStyles();
+    const state6 = this.controller.getState();
+    this.root = document.createElement("div");
+    this.root.className = "water-panel-wrap";
+    this.root.setAttribute("data-theme", state6.theme);
+    this.root.setAttribute("data-domain", "water");
+    this.root.innerHTML = this.buildHTML(state6);
+    this.bindEvents();
+    setTimeout(() => this.initializeCharts(), 0);
+    return this.root;
+  }
+  buildHTML(state6) {
+    const { showCards = true, showConsumptionChart = true, showDistributionChart = true } = this.params;
+    return `
+      <div class="water-panel">
+        ${showCards ? this.buildCardsHTML(state6) : ""}
+        ${showConsumptionChart ? this.buildConsumptionChartContainerHTML() : ""}
+        ${showDistributionChart ? this.buildDistributionChartContainerHTML() : ""}
+      </div>
+    `;
+  }
+  buildCardsHTML(state6) {
+    const summary = state6.summary;
+    const storesValue = summary?.storesTotal ?? 0;
+    const commonAreaValue = summary?.commonAreaTotal ?? 0;
+    const totalValue = summary?.total ?? 0;
+    const storesPercent = summary?.storesPercentage ?? 0;
+    const commonAreaPercent = summary?.commonAreaPercentage ?? 0;
+    return `
+      <div class="water-panel__cards">
+        <div class="water-panel__card" data-type="stores">
+          <div class="water-panel__card-icon">&#x1F4A7;</div>
+          <div class="water-panel__card-content">
+            <div class="water-panel__card-label">Consumo Lojas</div>
+            <div class="water-panel__card-value">${this.formatWater(storesValue)}</div>
+            <div class="water-panel__card-trend">${storesPercent.toFixed(1)}% do total</div>
+            <div class="water-panel__card-count">${summary?.deviceCount || 0} hidrometros</div>
+          </div>
+        </div>
+        <div class="water-panel__card" data-type="common-area">
+          <div class="water-panel__card-icon">&#x1F6BF;</div>
+          <div class="water-panel__card-content">
+            <div class="water-panel__card-label">Consumo Area Comum</div>
+            <div class="water-panel__card-value">${this.formatWater(commonAreaValue)}</div>
+            <div class="water-panel__card-trend">${commonAreaPercent.toFixed(1)}% do total</div>
+            <div class="water-panel__card-count">Banheiros, limpeza, etc.</div>
+          </div>
+        </div>
+        <div class="water-panel__card water-panel__card--total" data-type="total">
+          <div class="water-panel__card-icon">&#x1F4CA;</div>
+          <div class="water-panel__card-content">
+            <div class="water-panel__card-label">Consumo Total</div>
+            <div class="water-panel__card-value">${this.formatWater(totalValue)}</div>
+            <div class="water-panel__card-trend">Lojas + Area Comum</div>
+            <div class="water-panel__card-count">${summary?.deviceCount || 0} dispositivos</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Container for consumption chart widget (RFC-0098)
+   * The createConsumptionChartWidget will inject its own HTML structure
+   */
+  buildConsumptionChartContainerHTML() {
+    return `
+      <div class="water-panel__chart-section">
+        <div id="${this.panelId}-consumption-chart" class="water-panel__consumption-chart"></div>
+      </div>
+    `;
+  }
+  /**
+   * Container for distribution chart widget (RFC-0102)
+   * The createDistributionChartWidget will inject its own HTML structure
+   */
+  buildDistributionChartContainerHTML() {
+    return `
+      <div class="water-panel__chart-section">
+        <div id="${this.panelId}-distribution-chart" class="water-panel__distribution-chart"></div>
+      </div>
+    `;
+  }
+  formatWater(value) {
+    if (value >= 1e3) {
+      return `${(value / 1e3).toFixed(2)} k m3`;
+    }
+    return `${value.toFixed(1)} m3`;
+  }
+  bindEvents() {
+  }
+  /**
+   * Initialize chart widgets using the existing reusable components
+   */
+  async initializeCharts() {
+    if (!this.root) return;
+    const state6 = this.controller.getState();
+    const { showConsumptionChart = true, showDistributionChart = true } = this.params;
+    if (showConsumptionChart) {
+      await this.initializeConsumptionWidget(state6);
+    }
+    if (showDistributionChart) {
+      await this.initializeDistributionWidget(state6);
+    }
+  }
+  /**
+   * Initialize the consumption chart using createConsumptionChartWidget
+   * This provides: settings modal, ideal range, viz modes, chart types
+   */
+  async initializeConsumptionWidget(state6) {
+    const containerId = `${this.panelId}-consumption-chart`;
+    const container = this.root?.querySelector(`#${containerId}`);
+    if (!container) {
+      console.warn("[WaterPanel] Consumption chart container not found");
+      return;
+    }
+    try {
+      this.consumptionWidget = createConsumptionChartWidget({
+        domain: "water",
+        containerId,
+        title: "Consumo de Agua",
+        unit: "m3",
+        unitLarge: "k m3",
+        thresholdForLargeUnit: 1e3,
+        theme: state6.theme,
+        defaultPeriod: state6.period,
+        defaultChartType: "line",
+        defaultVizMode: "total",
+        // Settings modal options
+        showSettingsButton: true,
+        showMaximizeButton: true,
+        showVizModeTabs: true,
+        showChartTypeTabs: true,
+        chartHeight: 280,
+        // Data fetching - use params callback or mock data
+        fetchData: this.params.fetchConsumptionData || this.createMockFetchData(),
+        // Callbacks
+        onMaximizeClick: () => {
+          this.params.onMaximizeClick?.();
+        },
+        onSettingsClick: () => {
+          console.log("[WaterPanel] Settings clicked");
+        },
+        onDataLoaded: (data) => {
+          console.log("[WaterPanel] Consumption data loaded:", data.labels?.length, "days");
+        },
+        onError: (error) => {
+          console.error("[WaterPanel] Consumption chart error:", error);
+        },
+        // Ideal range (from customer settings or orchestrator)
+        idealRange: this.params.idealRange || void 0,
+        // ThingsBoard container reference
+        $container: this.params.$container
+      });
+      await this.consumptionWidget.render();
+      console.log("[WaterPanel] Consumption widget initialized");
+    } catch (error) {
+      console.error("[WaterPanel] Failed to initialize consumption widget:", error);
+    }
+  }
+  /**
+   * Initialize the distribution chart using createDistributionChartWidget
+   * This provides: mode selector, horizontal bars, shopping colors
+   */
+  async initializeDistributionWidget(state6) {
+    const containerId = `${this.panelId}-distribution-chart`;
+    const container = this.root?.querySelector(`#${containerId}`);
+    if (!container) {
+      console.warn("[WaterPanel] Distribution chart container not found");
+      return;
+    }
+    try {
+      this.distributionWidget = createDistributionChartWidget({
+        domain: "water",
+        containerId,
+        title: "Distribuicao de Consumo",
+        unit: "m3",
+        unitLarge: "k m3",
+        thresholdForLargeUnit: 1e3,
+        theme: state6.theme,
+        chartHeight: 300,
+        showHeader: true,
+        showModeSelector: true,
+        showSettingsButton: false,
+        showMaximizeButton: false,
+        defaultMode: "groups",
+        // Water-specific modes
+        modes: [
+          { value: "groups", label: "Lojas vs Area Comum" },
+          { value: "stores", label: "Lojas por Shopping" },
+          { value: "common", label: "Area Comum por Shopping" }
+        ],
+        // Data fetching
+        fetchDistribution: this.params.fetchDistributionData || this.createMockFetchDistribution(),
+        // Callbacks
+        onModeChange: (mode) => {
+          console.log("[WaterPanel] Distribution mode changed:", mode);
+        },
+        onDataLoaded: (data) => {
+          console.log("[WaterPanel] Distribution data loaded:", Object.keys(data).length, "categories");
+        },
+        onError: (error) => {
+          console.error("[WaterPanel] Distribution chart error:", error);
+        },
+        // Get shopping colors from orchestrator
+        getShoppingColors: () => {
+          return window.MyIOOrchestrator?.getShoppingColors?.() || null;
+        }
+      });
+      await this.distributionWidget.render();
+      console.log("[WaterPanel] Distribution widget initialized");
+    } catch (error) {
+      console.error("[WaterPanel] Failed to initialize distribution widget:", error);
+    }
+  }
+  /**
+   * Create mock data fetcher for showcase/demo purposes
+   */
+  createMockFetchData() {
+    return async (period) => {
+      const labels = [];
+      const dailyTotals = [];
+      const today = /* @__PURE__ */ new Date();
+      for (let i = period - 1; i >= 0; i--) {
+        const date = new Date(today);
+        date.setDate(date.getDate() - i);
+        labels.push(date.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" }));
+        const baseValue = 50 + Math.random() * 50;
+        const variation = (Math.random() - 0.5) * 20;
+        dailyTotals.push(Math.max(10, baseValue + variation));
+      }
+      const shoppingData = {
+        "shopping-1": dailyTotals.map((v) => v * 0.35),
+        "shopping-2": dailyTotals.map((v) => v * 0.25),
+        "shopping-3": dailyTotals.map((v) => v * 0.25),
+        "shopping-4": dailyTotals.map((v) => v * 0.15)
+      };
+      const shoppingNames = {
+        "shopping-1": "Shopping Aricanduva",
+        "shopping-2": "Shopping Interlagos",
+        "shopping-3": "Shopping Tucuruvi",
+        "shopping-4": "Shopping Penha"
+      };
+      return {
+        labels,
+        dailyTotals,
+        shoppingData,
+        shoppingNames,
+        fetchTimestamp: Date.now()
+      };
+    };
+  }
+  /**
+   * Create mock distribution data fetcher for showcase/demo purposes
+   */
+  createMockFetchDistribution() {
+    const state6 = this.controller.getState();
+    const summary = state6.summary;
+    return async (mode) => {
+      if (mode === "groups") {
+        const storesTotal = summary?.storesTotal || 850;
+        const commonAreaTotal = summary?.commonAreaTotal || 650;
+        return {
+          "Lojas": storesTotal,
+          "Area Comum": commonAreaTotal
+        };
+      }
+      if (mode === "stores") {
+        return {
+          "Shopping Aricanduva": 180,
+          "Shopping Interlagos": 150,
+          "Shopping Tucuruvi": 140,
+          "Shopping Penha": 120,
+          "Shopping Tatuape": 110,
+          "Shopping Santana": 100
+        };
+      }
+      if (mode === "common") {
+        return {
+          "Shopping Aricanduva": 150,
+          "Shopping Interlagos": 130,
+          "Shopping Tucuruvi": 120,
+          "Shopping Penha": 100,
+          "Shopping Tatuape": 90
+        };
+      }
+      return null;
+    };
+  }
+  onStateChange(state6) {
+    if (!this.root) return;
+    this.root.setAttribute("data-theme", state6.theme);
+    if (this.consumptionWidget) {
+      this.consumptionWidget.setTheme(state6.theme);
+    }
+    if (this.distributionWidget) {
+      this.distributionWidget.setTheme(state6.theme);
+    }
+    this.updateCards(state6);
+  }
+  updateCards(state6) {
+    const summary = state6.summary;
+    if (!summary || !this.root) return;
+    const storesCard = this.root.querySelector('[data-type="stores"] .water-panel__card-value');
+    const storesTrend = this.root.querySelector('[data-type="stores"] .water-panel__card-trend');
+    if (storesCard) {
+      storesCard.textContent = this.formatWater(summary.storesTotal);
+    }
+    if (storesTrend) {
+      storesTrend.textContent = `${summary.storesPercentage.toFixed(1)}% do total`;
+    }
+    const commonAreaCard = this.root.querySelector('[data-type="common-area"] .water-panel__card-value');
+    const commonAreaTrend = this.root.querySelector('[data-type="common-area"] .water-panel__card-trend');
+    if (commonAreaCard) {
+      commonAreaCard.textContent = this.formatWater(summary.commonAreaTotal);
+    }
+    if (commonAreaTrend) {
+      commonAreaTrend.textContent = `${summary.commonAreaPercentage.toFixed(1)}% do total`;
+    }
+    const totalCard = this.root.querySelector('[data-type="total"] .water-panel__card-value');
+    if (totalCard) {
+      totalCard.textContent = this.formatWater(summary.total);
+    }
+  }
+  /**
+   * Public method to refresh consumption chart data
+   */
+  async refreshConsumptionChart() {
+    if (this.consumptionWidget) {
+      await this.consumptionWidget.refresh(true);
+    }
+  }
+  /**
+   * Public method to refresh distribution chart data
+   */
+  async refreshDistributionChart() {
+    if (this.distributionWidget) {
+      await this.distributionWidget.refresh();
+    }
+  }
+  /**
+   * Public method to set ideal range on consumption chart
+   */
+  setIdealRange(range) {
+    if (this.consumptionWidget) {
+      this.consumptionWidget.setIdealRange(range ? {
+        min: range.min,
+        max: range.max,
+        label: range.label,
+        enabled: true
+      } : null);
+    }
+  }
+  destroy() {
+    if (this.consumptionWidget) {
+      this.consumptionWidget.destroy();
+      this.consumptionWidget = null;
+    }
+    if (this.distributionWidget) {
+      this.distributionWidget.destroy();
+      this.distributionWidget = null;
+    }
+    this.root?.remove();
+    this.root = null;
+  }
+};
+
+// src/components/water-panel/createWaterPanelComponent.ts
+function createWaterPanelComponent(params) {
+  if (!params.container) {
+    throw new Error("[WaterPanel] container is required");
+  }
+  const controller = new WaterPanelController(params);
+  const view = new WaterPanelView(params, controller);
+  const element = view.render();
+  params.container.appendChild(element);
+  return {
+    element,
+    // Data methods
+    updateSummary: (data) => controller.updateSummary(data),
+    getSummary: () => controller.getSummary(),
+    // Config methods
+    setTheme: (mode) => controller.setTheme(mode),
+    getTheme: () => controller.getState().theme,
+    setPeriod: (days) => controller.setPeriod(days),
+    getPeriod: () => controller.getState().period,
+    setVizMode: (mode) => controller.setVizMode(mode),
+    getVizMode: () => controller.getState().vizMode,
+    setChartType: (type) => controller.setChartType(type),
+    getChartType: () => controller.getState().chartType,
+    // Filter methods
+    applyShoppingFilter: (ids) => controller.applyShoppingFilter(ids),
+    getSelectedShoppingIds: () => [...controller.getState().selectedShoppingIds],
+    clearFilters: () => controller.clearFilters(),
+    // Actions
+    refresh: () => {
+      params.onRefresh?.();
+    },
+    openFullscreen: () => {
+      params.onMaximizeClick?.();
+    },
+    // Lifecycle
+    destroy: () => view.destroy()
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ANNOTATION_TYPE_COLORS,
@@ -66714,6 +68327,7 @@ function createCustomerCardV1(params) {
   createDeviceItem,
   createDeviceItemsFromMap,
   createDistributionChartWidget,
+  createEnergyPanelComponent,
   createFilterModalComponent,
   createFooterComponent,
   createHeaderComponent,
@@ -66723,6 +68337,7 @@ function createCustomerCardV1(params) {
   createMenuComponent,
   createModalHeader,
   createTelemetryGridComponent,
+  createWaterPanelComponent,
   decodePayload,
   decodePayloadBase64Xor,
   detectContext,