myio-js-library 0.1.26 → 0.1.28

package/dist/index.cjs

@@ -7889,10 +7889,16 @@ function formatDateTime(date, locale) {
     minute: "2-digit"
   });
 }
-async function fetchTelemetryData(token, deviceId, startDate, endDate) {
+async function fetchTelemetryData(token, deviceId, startDate, endDate, queryParams) {
   const startTs = new Date(startDate).getTime();
   const endTs = new Date(endDate).getTime();
-  const url = `/api/plugins/telemetry/DEVICE/${deviceId}/values/timeseries?keys=consumption&startTs=${startTs}&endTs=${endTs}&limit=50000&intervalType=MILLISECONDS&interval=54000000&agg=SUM&orderBy=ASC`;
+  const keys = queryParams?.keys || "consumption";
+  const limit = queryParams?.limit || 5e4;
+  const intervalType = queryParams?.intervalType || "MILLISECONDS";
+  const interval = queryParams?.interval || 54e6;
+  const agg = queryParams?.agg || "SUM";
+  const orderBy = queryParams?.orderBy || "ASC";
+  const url = `/api/plugins/telemetry/DEVICE/${deviceId}/values/timeseries?keys=${keys}&startTs=${startTs}&endTs=${endTs}&limit=${limit}&intervalType=${intervalType}&interval=${interval}&agg=${agg}&orderBy=${orderBy}`;
   const response = await fetch(url, {
     headers: {
       "X-Authorization": `Bearer ${token}`,
@@ -7903,50 +7909,72 @@ async function fetchTelemetryData(token, deviceId, startDate, endDate) {
     throw new Error(`HTTP ${response.status}: ${response.statusText}`);
   }
   const data = await response.json();
-  return data.consumption || [];
-}
-function processChartData(rawData, locale) {
-  if (!rawData || rawData.length === 0) {
-    return { points: [], peak: null, isEmpty: true };
-  }
-  const sortedData = rawData.sort((a, b) => a.ts - b.ts);
-  const points = [];
-  let previousValue = 0;
-  let previousTs = 0;
-  for (let i = 0; i < sortedData.length; i++) {
-    const current = sortedData[i];
-    const currentValue = parseFloat(current.value);
-    const currentTs = current.ts;
-    if (i > 0) {
-      const deltaWh = currentValue - previousValue;
-      const deltaHours = (currentTs - previousTs) / (1e3 * 60 * 60);
-      if (deltaWh > 0 && deltaHours > 0) {
-        const demandKw = deltaWh / 1e3 / deltaHours;
-        points.push({
-          x: currentTs,
-          y: demandKw
-        });
+  return data;
+}
+function processMultiSeriesChartData(rawData, keys, correctionFactor, locale) {
+  const seriesKeys = keys.split(",").map((k) => k.trim());
+  const seriesData = [];
+  let globalPeak = null;
+  let isEmpty = true;
+  const colors = ["#4A148C", "#2196F3", "#4CAF50", "#FF9800", "#F44336", "#9C27B0", "#795548", "#607D8B"];
+  seriesKeys.forEach((key, index) => {
+    const rawSeries = rawData[key] || [];
+    if (rawSeries.length === 0) {
+      seriesData.push({ key, label: key, points: [], peak: null, color: colors[index % colors.length] });
+      return;
+    }
+    isEmpty = false;
+    const sortedData = rawSeries.sort((a, b) => a.ts - b.ts);
+    const points = [];
+    let previousValue = 0;
+    let previousTs = 0;
+    for (let i = 0; i < sortedData.length; i++) {
+      const current = sortedData[i];
+      const currentValue = parseFloat(current.value);
+      const currentTs = current.ts;
+      if (i > 0) {
+        const deltaWh = currentValue - previousValue;
+        const deltaHours = (currentTs - previousTs) / (1e3 * 60 * 60);
+        if (deltaWh > 0 && deltaHours > 0) {
+          const demandKw = deltaWh / 1e3 / deltaHours * correctionFactor;
+          points.push({
+            x: currentTs,
+            y: demandKw
+          });
+        }
       }
+      previousValue = currentValue;
+      previousTs = currentTs;
     }
-    previousValue = currentValue;
-    previousTs = currentTs;
-  }
-  let peak = null;
-  if (points.length > 0) {
-    const maxPoint = points.reduce(
-      (max, point) => point.y > max.y ? point : max
-    );
-    peak = {
-      value: maxPoint.y,
-      timestamp: maxPoint.x,
-      formattedValue: maxPoint.y.toFixed(2),
-      formattedTime: formatDateTime(new Date(maxPoint.x), locale)
-    };
-  }
+    let seriesPeak = null;
+    if (points.length > 0) {
+      const maxPoint = points.reduce(
+        (max, point) => point.y > max.y ? point : max
+      );
+      seriesPeak = {
+        value: maxPoint.y,
+        timestamp: maxPoint.x,
+        formattedValue: maxPoint.y.toFixed(2),
+        formattedTime: formatDateTime(new Date(maxPoint.x), locale),
+        key
+      };
+      if (!globalPeak || seriesPeak.value > globalPeak.value) {
+        globalPeak = seriesPeak;
+      }
+    }
+    seriesData.push({
+      key,
+      label: key,
+      // Use key as label for now, can be customized later
+      points,
+      peak: seriesPeak,
+      color: colors[index % colors.length]
+    });
+  });
   return {
-    points,
-    peak,
-    isEmpty: points.length === 0
+    series: seriesData,
+    globalPeak,
+    isEmpty
   };
 }
 function createFocusTrap(container) {
@@ -8135,15 +8163,21 @@ async function openDemandModal(params) {
         errorText.textContent = "O Limite de busca \xE9 de 30 dias de intervalo.";
         return;
       }
-      const rawData = params.fetcher ? await params.fetcher({ token: params.token, deviceId: params.deviceId, startDate: params.startDate, endDate: params.endDate }) : await fetchTelemetryData(params.token, params.deviceId, params.startDate, params.endDate);
-      chartData = processChartData(rawData, locale);
+      const rawData = params.fetcher ? await params.fetcher({ token: params.token, deviceId: params.deviceId, startDate: params.startDate, endDate: params.endDate, telemetryQuery: params.telemetryQuery }) : await fetchTelemetryData(params.token, params.deviceId, params.startDate, params.endDate, params.telemetryQuery);
+      chartData = processMultiSeriesChartData(
+        rawData,
+        params.telemetryQuery?.keys || "consumption",
+        params.correctionFactor || 1,
+        locale
+      );
       if (chartData.isEmpty) {
         errorEl.style.display = "flex";
         errorText.textContent = strings.noData;
         return;
       }
-      if (chartData.peak) {
-        const date = new Date(chartData.peak.timestamp);
+      if (chartData.globalPeak) {
+        const peak = chartData.globalPeak;
+        const date = new Date(peak.timestamp);
         const dateStr = date.toLocaleDateString(locale, {
           day: "2-digit",
           month: "2-digit",
@@ -8153,7 +8187,7 @@ async function openDemandModal(params) {
           hour: "2-digit",
           minute: "2-digit"
         });
-        peakEl.textContent = `${strings.maximum}: ${chartData.peak.formattedValue} kW ${strings.at} ${dateStr} ${strings.atTime} ${timeStr}${strings.timeUnit}`;
+        peakEl.textContent = `${strings.maximum}: ${peak.formattedValue} kW ${peak.key ? `(${peak.key}) ` : ""}${strings.at} ${dateStr} ${strings.atTime} ${timeStr}${strings.timeUnit}`;
         peakEl.style.display = "block";
       }
       const Chart = window.Chart;
@@ -8161,22 +8195,27 @@ async function openDemandModal(params) {
       chart = new Chart(chartCanvas, {
         type: "line",
         data: {
-          datasets: [{
-            label: strings.demand,
-            data: chartData.points,
-            borderColor: styles.primaryColor,
-            backgroundColor: styles.primaryColor + "20",
-            fill: true,
+          datasets: chartData.series.map((series) => ({
+            label: series.label,
+            data: series.points,
+            borderColor: series.color,
+            backgroundColor: series.color + "20",
+            fill: false,
+            // No fill for multi-series
             tension: 0.4,
             pointRadius: 2,
             pointHoverRadius: 6
-          }]
+          }))
         },
         options: {
           responsive: true,
           maintainAspectRatio: false,
           plugins: {
-            legend: { display: false },
+            legend: {
+              display: chartData.series.length > 1,
+              // Show legend only if multiple series
+              position: "top"
+            },
             zoom: {
               zoom: {
                 wheel: { enabled: true },
@@ -8214,7 +8253,8 @@ async function openDemandModal(params) {
             y: {
               title: {
                 display: true,
-                text: strings.demand
+                text: params.yAxisLabel || strings.demand
+                // Use configurable Y-axis label
               },
               beginAtZero: true
             }

package/dist/index.d.cts

@@ -862,13 +862,25 @@ interface DemandModalParams {
     pdf?: DemandModalPdfConfig;
     styles?: Partial<DemandModalStyles>;
     fetcher?: TelemetryFetcher;
+    telemetryQuery?: TelemetryQueryParams;
+    yAxisLabel?: string;
+    correctionFactor?: number;
+}
+interface TelemetryQueryParams {
+    keys?: string;
+    limit?: number;
+    intervalType?: string;
+    interval?: number;
+    agg?: string;
+    orderBy?: string;
 }
 type TelemetryFetcher = (params: {
     token: string;
     deviceId: string;
     startDate: string;
     endDate: string;
-}) => Promise<any[]>;
+    telemetryQuery?: TelemetryQueryParams;
+}) => Promise<any>;
 interface DemandModalPdfConfig {
     enabled?: boolean;
     fileName?: string;

package/dist/index.js

@@ -7823,10 +7823,16 @@ function formatDateTime(date, locale) {
     minute: "2-digit"
   });
 }
-async function fetchTelemetryData(token, deviceId, startDate, endDate) {
+async function fetchTelemetryData(token, deviceId, startDate, endDate, queryParams) {
   const startTs = new Date(startDate).getTime();
   const endTs = new Date(endDate).getTime();
-  const url = `/api/plugins/telemetry/DEVICE/${deviceId}/values/timeseries?keys=consumption&startTs=${startTs}&endTs=${endTs}&limit=50000&intervalType=MILLISECONDS&interval=54000000&agg=SUM&orderBy=ASC`;
+  const keys = queryParams?.keys || "consumption";
+  const limit = queryParams?.limit || 5e4;
+  const intervalType = queryParams?.intervalType || "MILLISECONDS";
+  const interval = queryParams?.interval || 54e6;
+  const agg = queryParams?.agg || "SUM";
+  const orderBy = queryParams?.orderBy || "ASC";
+  const url = `/api/plugins/telemetry/DEVICE/${deviceId}/values/timeseries?keys=${keys}&startTs=${startTs}&endTs=${endTs}&limit=${limit}&intervalType=${intervalType}&interval=${interval}&agg=${agg}&orderBy=${orderBy}`;
   const response = await fetch(url, {
     headers: {
       "X-Authorization": `Bearer ${token}`,
@@ -7837,50 +7843,72 @@ async function fetchTelemetryData(token, deviceId, startDate, endDate) {
     throw new Error(`HTTP ${response.status}: ${response.statusText}`);
   }
   const data = await response.json();
-  return data.consumption || [];
-}
-function processChartData(rawData, locale) {
-  if (!rawData || rawData.length === 0) {
-    return { points: [], peak: null, isEmpty: true };
-  }
-  const sortedData = rawData.sort((a, b) => a.ts - b.ts);
-  const points = [];
-  let previousValue = 0;
-  let previousTs = 0;
-  for (let i = 0; i < sortedData.length; i++) {
-    const current = sortedData[i];
-    const currentValue = parseFloat(current.value);
-    const currentTs = current.ts;
-    if (i > 0) {
-      const deltaWh = currentValue - previousValue;
-      const deltaHours = (currentTs - previousTs) / (1e3 * 60 * 60);
-      if (deltaWh > 0 && deltaHours > 0) {
-        const demandKw = deltaWh / 1e3 / deltaHours;
-        points.push({
-          x: currentTs,
-          y: demandKw
-        });
+  return data;
+}
+function processMultiSeriesChartData(rawData, keys, correctionFactor, locale) {
+  const seriesKeys = keys.split(",").map((k) => k.trim());
+  const seriesData = [];
+  let globalPeak = null;
+  let isEmpty = true;
+  const colors = ["#4A148C", "#2196F3", "#4CAF50", "#FF9800", "#F44336", "#9C27B0", "#795548", "#607D8B"];
+  seriesKeys.forEach((key, index) => {
+    const rawSeries = rawData[key] || [];
+    if (rawSeries.length === 0) {
+      seriesData.push({ key, label: key, points: [], peak: null, color: colors[index % colors.length] });
+      return;
+    }
+    isEmpty = false;
+    const sortedData = rawSeries.sort((a, b) => a.ts - b.ts);
+    const points = [];
+    let previousValue = 0;
+    let previousTs = 0;
+    for (let i = 0; i < sortedData.length; i++) {
+      const current = sortedData[i];
+      const currentValue = parseFloat(current.value);
+      const currentTs = current.ts;
+      if (i > 0) {
+        const deltaWh = currentValue - previousValue;
+        const deltaHours = (currentTs - previousTs) / (1e3 * 60 * 60);
+        if (deltaWh > 0 && deltaHours > 0) {
+          const demandKw = deltaWh / 1e3 / deltaHours * correctionFactor;
+          points.push({
+            x: currentTs,
+            y: demandKw
+          });
+        }
       }
+      previousValue = currentValue;
+      previousTs = currentTs;
     }
-    previousValue = currentValue;
-    previousTs = currentTs;
-  }
-  let peak = null;
-  if (points.length > 0) {
-    const maxPoint = points.reduce(
-      (max, point) => point.y > max.y ? point : max
-    );
-    peak = {
-      value: maxPoint.y,
-      timestamp: maxPoint.x,
-      formattedValue: maxPoint.y.toFixed(2),
-      formattedTime: formatDateTime(new Date(maxPoint.x), locale)
-    };
-  }
+    let seriesPeak = null;
+    if (points.length > 0) {
+      const maxPoint = points.reduce(
+        (max, point) => point.y > max.y ? point : max
+      );
+      seriesPeak = {
+        value: maxPoint.y,
+        timestamp: maxPoint.x,
+        formattedValue: maxPoint.y.toFixed(2),
+        formattedTime: formatDateTime(new Date(maxPoint.x), locale),
+        key
+      };
+      if (!globalPeak || seriesPeak.value > globalPeak.value) {
+        globalPeak = seriesPeak;
+      }
+    }
+    seriesData.push({
+      key,
+      label: key,
+      // Use key as label for now, can be customized later
+      points,
+      peak: seriesPeak,
+      color: colors[index % colors.length]
+    });
+  });
   return {
-    points,
-    peak,
-    isEmpty: points.length === 0
+    series: seriesData,
+    globalPeak,
+    isEmpty
   };
 }
 function createFocusTrap(container) {
@@ -8069,15 +8097,21 @@ async function openDemandModal(params) {
         errorText.textContent = "O Limite de busca \xE9 de 30 dias de intervalo.";
         return;
       }
-      const rawData = params.fetcher ? await params.fetcher({ token: params.token, deviceId: params.deviceId, startDate: params.startDate, endDate: params.endDate }) : await fetchTelemetryData(params.token, params.deviceId, params.startDate, params.endDate);
-      chartData = processChartData(rawData, locale);
+      const rawData = params.fetcher ? await params.fetcher({ token: params.token, deviceId: params.deviceId, startDate: params.startDate, endDate: params.endDate, telemetryQuery: params.telemetryQuery }) : await fetchTelemetryData(params.token, params.deviceId, params.startDate, params.endDate, params.telemetryQuery);
+      chartData = processMultiSeriesChartData(
+        rawData,
+        params.telemetryQuery?.keys || "consumption",
+        params.correctionFactor || 1,
+        locale
+      );
       if (chartData.isEmpty) {
         errorEl.style.display = "flex";
         errorText.textContent = strings.noData;
         return;
       }
-      if (chartData.peak) {
-        const date = new Date(chartData.peak.timestamp);
+      if (chartData.globalPeak) {
+        const peak = chartData.globalPeak;
+        const date = new Date(peak.timestamp);
         const dateStr = date.toLocaleDateString(locale, {
           day: "2-digit",
           month: "2-digit",
@@ -8087,7 +8121,7 @@ async function openDemandModal(params) {
           hour: "2-digit",
           minute: "2-digit"
         });
-        peakEl.textContent = `${strings.maximum}: ${chartData.peak.formattedValue} kW ${strings.at} ${dateStr} ${strings.atTime} ${timeStr}${strings.timeUnit}`;
+        peakEl.textContent = `${strings.maximum}: ${peak.formattedValue} kW ${peak.key ? `(${peak.key}) ` : ""}${strings.at} ${dateStr} ${strings.atTime} ${timeStr}${strings.timeUnit}`;
         peakEl.style.display = "block";
       }
       const Chart = window.Chart;
@@ -8095,22 +8129,27 @@ async function openDemandModal(params) {
       chart = new Chart(chartCanvas, {
         type: "line",
         data: {
-          datasets: [{
-            label: strings.demand,
-            data: chartData.points,
-            borderColor: styles.primaryColor,
-            backgroundColor: styles.primaryColor + "20",
-            fill: true,
+          datasets: chartData.series.map((series) => ({
+            label: series.label,
+            data: series.points,
+            borderColor: series.color,
+            backgroundColor: series.color + "20",
+            fill: false,
+            // No fill for multi-series
             tension: 0.4,
             pointRadius: 2,
             pointHoverRadius: 6
-          }]
+          }))
         },
         options: {
           responsive: true,
           maintainAspectRatio: false,
           plugins: {
-            legend: { display: false },
+            legend: {
+              display: chartData.series.length > 1,
+              // Show legend only if multiple series
+              position: "top"
+            },
             zoom: {
               zoom: {
                 wheel: { enabled: true },
@@ -8148,7 +8187,8 @@ async function openDemandModal(params) {
             y: {
               title: {
                 display: true,
-                text: strings.demand
+                text: params.yAxisLabel || strings.demand
+                // Use configurable Y-axis label
               },
               beginAtZero: true
             }