@iotready/nextjs-components-library 1.0.0-preview3 → 1.0.0-preview31

package/components/charts/TrendChart.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { Line } from 'react-chartjs-2';
-import { Chart as ChartJS, Colors, Title, LinearScale, Legend, Tooltip, TimeScale, PointElement, LineElement } from 'chart.js';
+import { Chart as ChartJS, Colors, Title, LinearScale, Legend, Tooltip, TimeScale, PointElement, LineElement, Interaction } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import 'chartjs-adapter-moment';
 import { ToggleButtonGroup, ToggleButton, Box, Button, Typography } from "@mui/material";
@@ -20,24 +20,173 @@ import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { ThemeProvider } from '@mui/material/styles';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import MuiTooltip from '@mui/material/Tooltip';
+import EditNoteIcon from '@mui/icons-material/EditNote';
+// import AspectRatioIcon from '@mui/icons-material/AspectRatio';
+import { FilterTagMode } from '../../server-actions/types';
+import { getRelativePosition } from 'chart.js/helpers';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+function findIndexForX(arr, t) {
+    if (!arr || arr.length === 0)
+        return -1;
+    if (t <= arr[0].x)
+        return 0;
+    let lo = 0;
+    let hi = arr.length - 1;
+    let res = -1;
+    while (lo <= hi) {
+        const mid = Math.floor((lo + hi) / 2);
+        const midX = arr[mid]?.x;
+        if (midX === undefined)
+            return -1;
+        if (midX === t)
+            return mid;
+        if (midX < t) {
+            res = mid;
+            lo = mid + 1;
+        }
+        else
+            hi = mid - 1;
+    }
+    return res;
+}
+// @ts-ignore
+Tooltip.positioners.myCustomPositioner = function (elements, eventPosition) {
+    const chart = this.chart;
+    const activePos = chart.__activePos;
+    if (!activePos || !activePos.closestPoint) {
+        return { x: eventPosition.x, y: eventPosition.y };
+    }
+    const closest = activePos.closestPoint.element;
+    const pixelX = activePos.closestPoint.pixelX;
+    const pixelY = closest?.y ?? eventPosition.y;
+    return { x: pixelX, y: pixelY };
+};
+// Definisci la modalità solo se Interaction è disponibile
+if (Interaction && Interaction.modes) {
+    // @ts-ignore
+    Interaction.modes.myCustomMode = function (chart, e, options, useFinalPosition) {
+        const pos = getRelativePosition(e, chart);
+        const xScale = chart.scales?.x;
+        const hoveredX = xScale && typeof xScale.getValueForPixel === "function"
+            ? xScale.getValueForPixel(pos.x)
+            : null;
+        const items = [];
+        let closestPoint = null;
+        let closestDistance = Infinity;
+        for (let datasetIndex = 0; datasetIndex < chart.data.datasets.length; datasetIndex++) {
+            const meta = chart.getDatasetMeta(datasetIndex);
+            if (!meta || !meta.data || meta.data.length === 0)
+                continue;
+            let found = null;
+            let pointPixelX = null;
+            for (let i = 0; i < meta.data.length; i++) {
+                const el = meta.data[i];
+                if (el && typeof el.inXRange === "function" && el.inXRange(pos.x, useFinalPosition)) {
+                    found = { element: el, datasetIndex, index: i };
+                    pointPixelX = el.x;
+                    break;
+                }
+            }
+            if (!found && hoveredX != null) {
+                const dataArr = chart.data.datasets[datasetIndex]?.data || [];
+                const idx = findIndexForX(dataArr, hoveredX);
+                if (idx >= 0 && meta.data[idx]) {
+                    found = { element: meta.data[idx], datasetIndex, index: idx };
+                    const valX = dataArr[idx].x;
+                    pointPixelX = xScale.getPixelForValue(valX);
+                }
+            }
+            if (found && pointPixelX != null) {
+                items.push(found);
+                const xMin = xScale?.left ?? 0;
+                const xMax = xScale?.right ?? chart.width;
+                console.log({ pointPixelX, xMin, xMax });
+                if (pointPixelX < xMin || pointPixelX > xMax) {
+                    continue; // ignora questo punto
+                }
+                // Aggiorna il closestPoint globale per la barra verticale
+                const distance = Math.abs(pointPixelX - pos.x);
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestPoint = { ...found, pixelX: pointPixelX };
+                }
+            }
+        }
+        chart.__activePos = hoveredX != null
+            ? {
+                value: hoveredX,
+                px: closestPoint ? closestPoint.pixelX : pos.x,
+                hasPoint: !!closestPoint
+            }
+            : null;
+        return items;
+    };
+}
+function getValueAtX(datasetData, t) {
+    if (!datasetData || datasetData.length === 0)
+        return null;
+    // se t è prima del primo punto -> primo valore
+    if (t <= datasetData[0].x)
+        return datasetData[0].y;
+    // binary search per ultimo index con x <= t
+    let lo = 0;
+    let hi = datasetData.length - 1;
+    let res = -1;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        const midX = datasetData[mid].x;
+        if (midX <= t) {
+            res = mid;
+            lo = mid + 1;
+        }
+        else
+            hi = mid - 1;
+    }
+    return res >= 0 ? datasetData[res].y : null;
+}
 const lineOptions = {
     parsing: false,
     normalized: true,
-    spanGaps: false, // enable for all datasets
+    spanGaps: true, // enable for all datasets
     // showLine: false, // disable for all datasets
     animation: false,
     responsive: true,
     maintainAspectRatio: false,
     interaction: {
         intersect: false,
-        mode: 'nearest',
+        mode: 'myCustomMode',
         axis: 'x'
     },
     plugins: {
         tooltip: {
+            position: 'myCustomPositioner',
             callbacks: {
                 label: (context) => {
-                    return `${context.dataset.label}: ${context.parsed.y.toFixed(2)} ${context.dataset.unit}`;
+                    const ds = context.dataset || {};
+                    const parsed = context.parsed || {};
+                    const unit = ds.unit ?? '';
+                    const chart = context.chart;
+                    // 1) se parsed.y è disponibile usalo (gestisci stepped senza toFixed)
+                    if (parsed.y !== null && parsed.y !== undefined) {
+                        // se la serie è stepped vogliamo mostrare il valore grezzo (es. 1/0)
+                        if (ds.stepped)
+                            return `${ds.label}: ${parsed.y} ${unit}`;
+                        // numero normale -> 3 decimali
+                        return `${ds.label}: ${Number(parsed.y).toFixed(3)} ${unit}`;
+                    }
+                    // 2) fallback: usa parsed.x o context.parsed.x per calcolare il valore via getValueAtX
+                    const xVal = parsed.x ?? (context.parsed && context.parsed.x) ?? null;
+                    if (xVal != null && Array.isArray(ds.data)) {
+                        const val = getValueAtX(ds.data, xVal);
+                        if (val !== null && val !== undefined) {
+                            if (ds.stepped)
+                                return `${ds.label}: ${val} ${unit}`;
+                            return `${ds.label}: ${Number(val).toFixed(3)} ${unit}`;
+                        }
+                    }
+                    // 3) fallback finale
+                    return `${ds.label}: - ${unit}`;
                 }
             },
         },
@@ -64,7 +213,19 @@ const lineOptions = {
                     day: 'DD MMM YY',
                     hour: 'DD MMM HH:mm',
                     minute: 'HH:mm'
-                }
+                },
+                y1: {
+                    type: 'linear',
+                    position: 'left',
+                    title: { display: false, text: 'Primary Axis' },
+                    display: false
+                },
+                y2: {
+                    type: 'linear',
+                    position: 'right',
+                    title: { display: false, text: 'Secondary Axis' },
+                    display: false
+                },
             },
             title: {
                 display: false,
@@ -76,15 +237,6 @@ const lineOptions = {
                 drawOnChartArea: false,
             }
         },
-        y: {
-            ticks: {
-                callback: function (value) {
-                    if (Math.floor(value) === value) {
-                        return value;
-                    }
-                }
-            }
-        },
     },
 };
 const chartConfigByPeriod = {
@@ -121,15 +273,6 @@ const chartConfigByPeriod = {
         scaleUnit: 'year',
     }
 };
-function GetPoints(data) {
-    const points = data.results[0].series[0].values.map((row) => {
-        return {
-            x: moment.unix(row[0]),
-            y: row[1]
-        };
-    });
-    return points;
-}
 function getPollTime(intervalInSeconds, pollTime) {
     const CalculatedPollTime = Math.round(intervalInSeconds / 2880);
     if (CalculatedPollTime <= pollTime) {
@@ -140,60 +283,76 @@ function getPollTime(intervalInSeconds, pollTime) {
     }
 }
 function getCsvData(data, measures) {
-    // Initialize the header with timestamp and measure names
-    const headers = ["timestamp", ...measures.map(measure => measure.name)];
-    const csvData = [];
-    // Add the header to the csvData
-    csvData.push(headers);
-    // Collect all timestamps and values for each measure
+    // Intestazioni CSV
+    const headers = [
+        'timestamp',
+        ...measures.map(m => m.description || m.name)
+    ];
+    const csvRows = [headers];
+    // Mappa temporale: ISO string → { timestamp, [measureName]: value, … }
     const timestampMap = {};
-    // Populate timestampMap with data for each timestamp
-    data.forEach((obj) => {
-        obj.results[0].series.forEach((series) => {
-            series.values.forEach((value) => {
-                const timestamp = moment.unix(value[0]).toISOString();
-                if (!timestampMap[timestamp]) {
-                    timestampMap[timestamp] = { timestamp: timestamp };
-                }
-                const measureName = series.name; // Assuming the series name corresponds to the measure name
-                if (measures.some(measure => measure.name === measureName)) {
-                    timestampMap[timestamp][measureName] = value[1]; // Assign the value to the measure
-                }
-            });
+    // Ogni serie corrisponde a measures[index]
+    data.forEach((series, index) => {
+        const measure = measures[index];
+        if (!measure)
+            return; // difesa su mismatch lunghezze
+        series.forEach(point => {
+            // usa moment per coerenza con prima versione
+            const ts = moment(point.x).toISOString();
+            if (!timestampMap[ts]) {
+                timestampMap[ts] = { timestamp: ts };
+            }
+            timestampMap[ts][measure.name] = point.y;
         });
     });
-    // Create rows from timestampMap
-    Object.values(timestampMap).forEach((entry) => {
+    // Ordina i timestamp
+    const sortedTs = Object.keys(timestampMap)
+        .sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+    // Costruisci le righe CSV
+    sortedTs.forEach(ts => {
+        const entry = timestampMap[ts];
+        // prima colonna timestamp, poi i valori nelle colonne in ordine measures[]
         const row = [entry.timestamp];
-        measures.forEach(measure => {
-            // Push the corresponding value or an empty string if undefined
-            row.push(entry[measure.name] !== undefined ? entry[measure.name] : "");
+        measures.forEach(m => {
+            row.push(entry[m.name] !== undefined
+                ? entry[m.name]
+                : '');
         });
-        // Check if the row contains only empty values (besides the timestamp)
-        const hasNonEmptyValues = row.slice(1).some(value => value !== null && value !== '' && value !== undefined);
-        // If the row has at least one non-empty value or just the timestamp, add it to csvData
-        if (hasNonEmptyValues || row.length === 1) {
-            csvData.push(row);
+        // optional: filtra le righe che non hanno alcun valore utile
+        const hasValue = row.slice(1).some(v => v !== '' && v !== null);
+        if (hasValue) {
+            csvRows.push(row);
         }
     });
-    // Join rows into a CSV string
-    return csvData.map(row => row.join(',')).join('\n');
+    // Unisci in stringa
+    return csvRows
+        .map(r => r.join(','))
+        .join('\n');
 }
 // eslint-disable-next-line no-unused-vars
-const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, handleGetFirstTimestamp, theme, ...props }) => {
+const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDatePicker, handleGetInfluxData, handleGetDwSlotsCB, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }) => {
     const [chartJsLoaded, setChartJsLoaded] = useState(false);
+    // Dichiarazione di annotationsData come funzione che ritorna una Promise<any>
+    const [annotationsData, setAnnotationsData] = useState(null);
+    const [annotationsEnabled, setAnnotationsEnabled] = useState(true);
     const [dataMeasures, setDataMeasures] = useState(null);
     const [chartPeriod, setChartPeriod] = useState('1D');
     const [chartPeriodConfig, setChartPeriodConfig] = useState(chartConfigByPeriod['1D']);
     const [chartLoading, setChartLoading] = useState(false);
-    const [timeStart, setTimeStart] = useState(moment().subtract(1, 'day').unix());
-    const [timeEnd, setTimeEnd] = useState(moment().unix());
-    const [firstTimestamp, setFirstTimestamp] = useState();
-    const [datePickerUsed, setDatePickerUsed] = useState(false);
+    const [timeStartPicker, setTimeStartPicker] = useState(initialTimeStart || moment().subtract(1, 'day').unix());
+    const [timeStart, setTimeStart] = useState(initialTimeStart || moment().subtract(1, 'day').unix());
+    const [timeEnd, setTimeEnd] = useState(initialTimeEnd || moment().unix());
+    const [datePickerUsed, setDatePickerUsed] = useState(initialTimeStart || initialTimeEnd ? true : false);
+    const [pickerTimeStart, setPickerTimeStart] = useState(initialTimeStart || moment().subtract(1, 'day').unix());
+    const [pickerTimeEnd, setPickerTimeEnd] = useState(initialTimeEnd || moment().unix());
     const [loadingButton, setLoadingButton] = useState(false);
     const csvLinkRef = useRef(null);
     const [csvData, setCsvData] = useState('');
-    const [spanGapsOption, setSpanGapsOption] = useState(false);
+    const [spanGapsOption, setSpanGapsOption] = useState(true);
+    const enableExportData = handleExportDataCB ? true : false;
+    const measures = measures1 && measures2 ? [...measures1, ...measures2] :
+        measures1 ? [...measures1] :
+            measures2 ? [...measures2] : [];
     const [options, setOptions] = useState({
         ...lineOptions,
         plugins: {
@@ -217,13 +376,19 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         }
     });
     const [zoomed, setZoomed] = useState(false);
+    const prevMeasures = useRef();
     const resetChart = () => {
         setOptions({
             ...options,
             scales: {
                 ...options.scales,
-                y: {
-                    ...options.scales.y,
+                y1: {
+                    ...options.scales.y1,
+                    min: 0,
+                    max: 1
+                },
+                y2: {
+                    ...options.scales.y2,
                     min: 0,
                     max: 1
                 }
@@ -240,114 +405,294 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         setSpanGapsOption(spanG);
     };
     const handleChange = (event, newPeriod) => {
-        setZoomed(false);
-        setDatePickerUsed(false);
-        setCsvData('');
-        if (newPeriod === "ALL") {
-            setTimeStart(firstTimestamp - 86400);
-            setTimeEnd(moment().unix());
-            setChartPeriod(newPeriod);
+        if (newPeriod == null) {
             return;
         }
-        const periodConfig = chartConfigByPeriod[newPeriod];
-        if (periodConfig) {
+        if (chartPeriod === newPeriod) {
+            setChartLoading(true);
+            setZoomed(false);
+            setDatePickerUsed(false);
+            setCsvData('');
+            const periodConfig = chartConfigByPeriod[chartPeriod];
             setTimeStart(Math.round(moment().subtract(periodConfig.from).valueOf() / 1000));
             setTimeEnd(Math.round(moment().valueOf() / 1000));
-            setChartPeriod(newPeriod);
+            setChartPeriod(chartPeriod);
             setChartPeriodConfig(periodConfig);
         }
+        if (newPeriod && newPeriod !== chartPeriod) {
+            setChartLoading(true);
+            setZoomed(false);
+            setDatePickerUsed(false);
+            setCsvData('');
+            if (newPeriod === "ALL") {
+                setTimeStart(1577854800);
+                setTimeEnd(moment().unix());
+                setChartPeriod(newPeriod);
+                return;
+            }
+            const periodConfig = chartConfigByPeriod[newPeriod];
+            if (periodConfig) {
+                setTimeStart(Math.round(moment().subtract(periodConfig.from).valueOf() / 1000));
+                setTimeEnd(Math.round(moment().valueOf() / 1000));
+                setChartPeriod(newPeriod);
+                setChartPeriodConfig(periodConfig);
+            }
+        }
     };
     const handleExportData = async () => {
         setLoadingButton(true);
-        const intervalInSeconds = timeEnd - timeStart;
-        const data = await Promise.all(measures.map(async (measure) => {
-            const polltime = getPollTime(intervalInSeconds, measure.polltime);
-            return await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, true);
-        }));
-        const csvData = getCsvData(data, measures);
-        setCsvData(csvData);
-        setLoadingButton(false);
+        if (handleExportDataCB) {
+            const data = await Promise.all(measures.map(async (measure) => {
+                return await handleExportDataCB(measure.name, timeStart, timeEnd, filter);
+            }));
+            const csvData = getCsvData(data, measures);
+            setCsvData(csvData);
+            setLoadingButton(false);
+        }
     };
     useEffect(() => {
         if (csvData.length > 0) {
             csvLinkRef.current?.link.click();
         }
     }, [csvData]);
+    useEffect(() => {
+        if (annotationsDataFn && annotationsEnabled) {
+            (async () => {
+                const resp = await annotationsDataFn();
+                setAnnotationsData(resp);
+            })();
+        }
+    }, [annotationsDataFn, annotationsEnabled]);
+    function getDwSlotsFromValues(dwValues) {
+        const slots = [];
+        let start = null;
+        for (const point of dwValues) {
+            if (point.y === 1 && start === null) {
+                start = point.x;
+            }
+            if (point.y === 0 && start !== null) {
+                slots.push({ start, end: point.x });
+                start = null;
+            }
+        }
+        return slots;
+    }
     const loadDatasets = async (chartPeriod) => {
-        setChartLoading(true);
-        const intervalInSeconds = timeEnd - timeStart;
-        // Inizializza un array di promesse per ottenere i dati per ciascuna misura
-        const datasetsPromises = measures.map(async (measure) => {
-            const polltime = getPollTime(intervalInSeconds, measure.polltime);
-            const influxData = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, false);
-            const points = GetPoints(influxData);
+        let intervalInSeconds = chartPeriod === "ALL" && !datePickerUsed && !zoomed ? 31536000 : timeEnd - timeStart;
+        const rawQuery = intervalInSeconds < 86400;
+        let tempSlots = [];
+        if (handleGetDwSlotsCB) {
+            const dwValues = await handleGetDwSlotsCB(timeStart, timeEnd, filter);
+            tempSlots = getDwSlotsFromValues(dwValues);
+        }
+        // Combine measures and track their source
+        const allMeasures = [
+            ...(measures1?.map(m => ({ ...m, source: 'measures1' })) || []),
+            ...(measures2?.map(m => ({ ...m, source: 'measures2' })) || [])
+        ];
+        const datasetsPromises = allMeasures.map(async (measure) => {
+            const polltime = getPollTime(intervalInSeconds, measure.polltime || 30);
+            let dwPoints = [];
+            let dwSlots = [];
+            if (measure.dwPolltime) {
+                const dwPolltime = getPollTime(intervalInSeconds, measure.dwPolltime);
+                // Query DW solo tag=100
+                const rawDwPoints = await handleGetInfluxData(measure.name, timeStart, timeEnd, filter, dwPolltime, false, "previous", 100, FilterTagMode.DW);
+                dwSlots = tempSlots;
+                if (dwSlots.length > 0) {
+                    dwPoints = rawDwPoints.filter((p) => dwSlots.some(slot => p.x >= slot.start && p.x <= slot.end));
+                }
+                else {
+                    dwPoints = rawDwPoints;
+                }
+            }
+            const stdPoints = await handleGetInfluxData(measure.name, timeStart, timeEnd, filter, polltime, !measure.polltime && rawQuery, !measure.polltime ? "none" : "null", 100, FilterTagMode.Exclude);
+            const filtered = dwSlots.length
+                ? stdPoints.filter((p) => !dwSlots.some(slot => p.x >= slot.start && p.x <= slot.end))
+                : stdPoints;
+            let combined;
+            // 6) Unisco e ordino
+            if (dwPoints.length > 2 && dwSlots.length > 0) {
+                combined = [...dwPoints, ...filtered]
+                    .sort((a, b) => a.x - b.x);
+            }
+            else if (dwPoints.length > 2 && dwSlots.length <= 0) {
+                combined = [...dwPoints];
+            }
+            else {
+                combined = [...filtered];
+            }
             return {
-                label: measure.name,
-                data: points,
+                label: measure.description || measure.name,
+                data: combined,
                 unit: measure.unit,
-                // borderColor: `hsl(${index * 50}, 70%, 50%)`, // Colore unico per ogni dataset
                 borderWidth: 2,
                 pointRadius: 1,
                 pointHoverRadius: 5,
                 pointHoverBackgroundColor: 'rgba(52, 125, 236, 0.5)',
-                // spanGaps: false,
-                fill: false
+                change: !measure.polltime,
+                stepped: measure.stepped,
+                yAxisID: measure.source === 'measures1' ? 'y1' : 'y2'
             };
         });
-        // Risolvi tutte le promesse per popolare i dataset
         const datasets = await Promise.all(datasetsPromises);
-        let min = null;
-        let max = null;
-        let values = [];
+        let min1 = null;
+        let max1 = null;
+        let min2 = null;
+        let max2 = null;
+        let time;
+        let minTime = null;
         datasets.forEach(dataset => {
-            values = [...values, ...dataset.data.map((point) => point.y).filter((data) => data !== null)];
+            const values = dataset.data.map((point) => point.y).filter((data) => data !== null);
+            if (chartPeriod === "ALL" && !datePickerUsed && !zoomed && values.length) {
+                time = dataset.data.filter((data) => data.y !== null).map((data) => data.x)[0];
+            }
             const datasetMin = Math.min(...values);
             const datasetMax = Math.max(...values);
-            if (min === null || datasetMin < min)
-                min = datasetMin;
-            if (max === null || datasetMax > max)
-                max = datasetMax;
+            if (dataset.yAxisID === 'y1') {
+                if (min1 === null || datasetMin < min1)
+                    min1 = datasetMin;
+                if (max1 === null || datasetMax > max1)
+                    max1 = datasetMax;
+            }
+            else {
+                if (min2 === null || datasetMin < min2)
+                    min2 = datasetMin;
+                if (max2 === null || datasetMax > max2)
+                    max2 = datasetMax;
+            }
+            if (time && (minTime === null || time < minTime))
+                minTime = Math.floor(time / 1000) - 86400;
         });
-        let paddedMin = null;
-        let paddedMax = null;
-        if (min !== null && max !== null) {
-            const diff = Math.round((max - min) / 3) || 1;
-            paddedMin = min - diff;
-            paddedMax = max + diff;
+        const getPaddedMinMax = (min, max) => {
+            if (min === null || max === null)
+                return { paddedMin: null, paddedMax: null };
+            const diff = ((max - min) * 0.2) < 0.1 ? 0.1 : (max - min) * 0.2;
+            return {
+                paddedMin: Math.floor((min - diff) * 10) / 10,
+                paddedMax: Math.ceil((max + diff) * 10) / 10
+            };
+        };
+        const { paddedMin: paddedMin1, paddedMax: paddedMax1 } = getPaddedMinMax(min1, max1);
+        const { paddedMin: paddedMin2, paddedMax: paddedMax2 } = getPaddedMinMax(min2, max2);
+        // Handle undefined/null annotationsData
+        let dynamicAnnotations = {};
+        if (annotationsData && Array.isArray(annotationsData) && annotationsData.length > 0 && annotationsEnabled) {
+            dynamicAnnotations = annotationsData.reduce((acc, [timestamp, label], index) => {
+                const yVal = paddedMin1 !== null && paddedMin1 !== undefined
+                    ? paddedMin1 + 0.01 * (paddedMax1 - paddedMin1)
+                    : paddedMin2 !== null && paddedMin2 !== undefined
+                        ? paddedMin2 + 0.01 * (paddedMax2 - paddedMin2)
+                        : 0;
+                acc[`line${index}`] = {
+                    type: 'line',
+                    xMin: timestamp,
+                    xMax: timestamp,
+                    borderColor: 'rgba(255, 225, 0, 0.8)',
+                    borderWidth: 2,
+                    drawTime: 'afterDatasetsDraw',
+                    label: {
+                        content: label,
+                        enabled: false
+                    }
+                };
+                acc[`triangle${index}`] = {
+                    type: 'point',
+                    xValue: timestamp,
+                    yValue: yVal,
+                    backgroundColor: 'rgba(255, 225, 0, 0.8)',
+                    pointStyle: 'triangle',
+                    radius: 6,
+                    rotation: 0,
+                    tooltip: {
+                        enabled: true,
+                        callbacks: {
+                            label: () => label
+                        }
+                    }
+                };
+                acc[`label${index}`] = {
+                    type: 'label',
+                    xValue: timestamp,
+                    yValue: yVal + 0.1 * (((paddedMax1 ?? paddedMax2 ?? 0) - (paddedMax1 ?? paddedMax2 ?? 0))),
+                    xAdjust: 0,
+                    yAdjust: -20,
+                    backgroundColor: 'rgba(245,245,245)',
+                    borderColor: 'rgba(255, 225, 0, 0.8)',
+                    borderWidth: 1,
+                    content: [label],
+                    textAlign: 'start',
+                    font: {
+                        size: 10,
+                        weight: 'bold'
+                    },
+                    callout: {
+                        display: false,
+                    }
+                };
+                return acc;
+            }, {});
         }
-        setDataMeasures([...datasets]);
+        // Combina statiche + dinamiche
+        const annotations = {
+            // ...staticAnnotations,
+            ...dynamicAnnotations
+        };
+        // 👇 Configurazione completa
+        setDataMeasures(datasets);
+        setTimeStartPicker(minTime || timeStart);
         setOptions({
             ...options,
             scales: {
                 ...options.scales,
-                y: {
-                    ...options.scales.y,
-                    min: paddedMin,
-                    max: paddedMax,
+                y1: {
+                    ...options.scales.y1,
+                    min: paddedMin1,
+                    max: paddedMax1,
+                    position: "left",
+                    display: "auto"
+                },
+                y2: {
+                    ...options.scales.y2,
+                    min: paddedMin2,
+                    max: paddedMax2,
+                    position: "right",
+                    display: "auto"
                 },
                 x: {
                     ...options.scales.x,
-                    min: moment.unix(timeStart).toString(),
-                    max: moment.unix(timeEnd).toString(),
-                    time: {
-                        ...options.scales.x.time,
-                        unit: chartPeriod.scaleUnit
-                    }
+                    min: moment.unix(minTime || timeStart).toString(),
+                    max: moment.unix(timeEnd).toString()
+                }
+            },
+            plugins: {
+                ...options.plugins,
+                annotation: {
+                    interaction: {
+                        mode: 'nearest',
+                        intersect: true
+                    },
+                    annotations
                 }
             }
         });
     };
+    const shiftChart = ((timeToShift) => {
+        setChartLoading(true);
+        const timeInRange = timeEnd - timeStart;
+        const percentageToShift = 0.1; // 10%
+        const shiftAmount = Math.floor(timeInRange * percentageToShift);
+        if (timeToShift === 'timeStart') {
+            setTimeStart(prev => prev - shiftAmount);
+            setTimeEnd(prev => prev - shiftAmount);
+        }
+        else {
+            setTimeEnd(prev => prev + shiftAmount);
+            setTimeStart(prev => prev + shiftAmount);
+        }
+    });
     useEffect(() => {
-        const fetchFirstTimestamp = async () => {
-            const response = await handleGetFirstTimestamp(deviceId);
-            if (response) {
-                setFirstTimestamp(response);
-            }
-        };
-        fetchFirstTimestamp();
-    }, []);
-    useEffect(() => {
-        const timeDifference = Math.abs(moment(timeStart).valueOf() - moment(timeEnd).valueOf()); // Convert milliseconds to seconds
+        const timeDifference = Math.abs(moment(timeEnd).valueOf() - moment(timeStart).valueOf()); // Convert milliseconds to seconds
         let newChartPeriod = '1D'; // Default to 1 day
         if (timeDifference < 86400) { // Less than 1 day
             newChartPeriod = '1H'; // Set to 1 day
@@ -355,47 +700,70 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         else if (timeDifference < 604800) { // Less than 1 week
             newChartPeriod = '1D'; // Set to 1 day
         }
-        else if (timeDifference < 2629800) { // Less than 1 month
+        else if (timeDifference < 2678400) { // Less than 1 month
             newChartPeriod = '1W'; // Set to 1 week
         }
-        else if (timeDifference < 7889400) { // Less than 3 months
+        else if (timeDifference < 8035200) { // Less than 3 months
             newChartPeriod = '1M'; // Set to 1 month
         }
-        else if (timeDifference < 15778440) { // Less than 6 months
+        else if (timeDifference < 16070400) { // Less than 6 months
             newChartPeriod = '3M'; // Set to 3 months
         }
-        else if (timeDifference < 31556926) { // Less than 1 year
+        else if (timeDifference < 31536000) { // Less than 1 year
             newChartPeriod = '6M'; // Set to 6 months
         }
         else {
             newChartPeriod = '1Y'; // Set to 1 year
         }
         setChartPeriodConfig(chartConfigByPeriod[newChartPeriod]);
+        // check prev measures value in order to show the loader
+        // hide the loader if measure is the same (for interval get measure value)
+        const prevMeasuresValue = prevMeasures.current || [];
+        //@ts-ignore
+        prevMeasures.current = measures;
+        if (!prevMeasuresValue || prevMeasuresValue.length !== measures?.length || (prevMeasuresValue[0] && prevMeasuresValue[0].name !== measures[0].name)) {
+            setChartLoading(true);
+        }
         loadDatasets(chartPeriod).then(() => {
             setChartLoading(false);
         });
-    }, [timeEnd, timeStart]);
+    }, [measures1, timeEnd, timeStart, measures2, annotationsEnabled, annotationsData]);
     useEffect(() => {
         const loadZoomPlugin = async () => {
             const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
             ChartJS.register(Colors, Legend, Title, Tooltip, PointElement, LineElement, LinearScale, TimeScale, annotationPlugin, zoomPlugin, {
                 id: 'uniqueid5',
                 afterDraw: function (chart) {
-                    if (chart.tooltip?._active && chart.tooltip?._active.length) {
-                        const activePoint = chart.tooltip._active[0];
-                        const ctx = chart.ctx;
-                        const x = activePoint.element.x;
-                        const topY = chart.scales.y.top;
-                        const bottomY = chart.scales.y.bottom;
-                        ctx.save();
-                        ctx.beginPath();
-                        ctx.moveTo(x, topY);
-                        ctx.lineTo(x, bottomY);
-                        ctx.lineWidth = 1;
-                        ctx.strokeStyle = '#722257';
-                        ctx.stroke();
-                        ctx.restore();
+                    if (!chart.__activePos?.hasPoint)
+                        return; // disegna solo sui punti
+                    const ctx = chart.ctx;
+                    const x = chart.__activePos.px; // pixel esatto del punto attivo
+                    let topY1 = 0;
+                    let topY2 = 0;
+                    let bottomY1 = 0;
+                    let bottomY2 = 0;
+                    if (chart.scales.y1?.top) {
+                        topY1 = chart.scales.y1.top;
+                    }
+                    if (chart.scales.y2?.top) {
+                        topY2 = chart.scales.y2.top;
+                    }
+                    if (chart.scales.y1?.bottom) {
+                        bottomY1 = chart.scales.y1.bottom;
+                    }
+                    if (chart.scales.y2?.bottom) {
+                        bottomY2 = chart.scales.y2.bottom;
                     }
+                    const topY = Math.max(topY1, topY2);
+                    const bottomY = Math.min(bottomY1, bottomY2);
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.moveTo(x, topY);
+                    ctx.lineTo(x, bottomY);
+                    ctx.lineWidth = 1;
+                    ctx.strokeStyle = '#722257';
+                    ctx.stroke();
+                    ctx.restore();
                 }
             });
             setChartJsLoaded(true);
@@ -403,34 +771,57 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         loadZoomPlugin();
         resetChart();
     }, []);
-    const datePicker = _jsx(Box, { sx: { display: 'flex', alignItems: 'center', mr: { xs: 0, lg: 2 } }, children: _jsxs(LocalizationProvider, { dateAdapter: AdapterMoment, adapterLocale: "it", children: [_jsx(DateTimePicker, { value: moment(timeStart * 1000), 
-                    // format="DD/MM/YY hh:mm A"
-                    onChange: (newValue) => {
-                        setTimeStart((moment(newValue).unix()));
+    const datePicker = _jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: _jsxs(LocalizationProvider, { dateAdapter: AdapterMoment, adapterLocale: "it", children: [_jsx(DateTimePicker, { value: moment(timeStartPicker * 1000), onChange: (newValue) => {
+                        setChartLoading(true);
+                        setDatePickerUsed(true);
+                        setZoomed(false);
+                        setPickerTimeStart(moment(newValue).unix());
+                        setTimeStart(moment(newValue).unix());
                     }, maxDateTime: moment(timeEnd * 1000), slotProps: {
                         textField: { size: 'small', sx: { width: { sm: 210 } } }
-                    } }), " \u00A0\u00A0 ", _jsx(Box, { children: "\u2013" }), " \u00A0\u00A0", _jsx(DateTimePicker, { value: moment(timeEnd * 1000), 
-                    // format="DD/MM/YY hh:mm A"
-                    onChange: (newValue) => {
-                        setTimeEnd((moment(newValue).unix()));
+                    } }), " \u00A0\u00A0 ", _jsx(Box, { children: "\u2013" }), " \u00A0\u00A0", _jsx(DateTimePicker, { value: moment(timeEnd * 1000), onChange: (newValue) => {
+                        setChartLoading(true);
+                        setDatePickerUsed(true);
+                        setZoomed(false);
+                        setPickerTimeEnd(moment(newValue).unix());
+                        setTimeEnd(moment(newValue).unix());
                     }, minDateTime: moment(timeStart * 1000), slotProps: {
                         textField: { size: 'small', sx: { width: { sm: 210 } } }
                     } })] }) });
-    return (_jsxs(ThemeProvider, { theme: theme, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' }, mb: 2 }, children: datePicker }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [!enableExportData && measures && measures.length === 1 ? _jsx(Typography, { variant: 'body1', sx: { mr: 2 }, children: measures[0].name }) : '', enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Export" })] }), _jsx(CSVLink
+    return (_jsxs(ThemeProvider, { theme: theme, children: [_jsxs(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'center' }, alignItems: 'center', mb: 3, mt: 1 }, children: [_jsx(Button, { sx: {
+                            borderWidth: 1,
+                            borderStyle: 'solid',
+                            borderColor: '#c4c4c4',
+                            color: 'text.primary',
+                            ":hover": { backgroundColor: 'action.hover' },
+                            mr: enableDatePicker ? 1 : 0,
+                            p: 0.85
+                        }, onClick: () => shiftChart('timeStart'), children: _jsx(KeyboardArrowLeftIcon, {}) }), enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' } }, children: datePicker }), _jsx(Button, { sx: {
+                            borderWidth: 1,
+                            borderStyle: 'solid',
+                            borderColor: '#c4c4c4',
+                            color: 'text.primary',
+                            ":hover": { backgroundColor: 'action.hover' },
+                            ml: enableDatePicker ? 1 : 0,
+                            p: 0.85
+                        }, onClick: () => shiftChart('timeEnd'), children: _jsx(KeyboardArrowRightIcon, {}) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [!enableExportData && measures && measures.length === 1 ? _jsx(Typography, { variant: 'body1', sx: { mr: 2 }, children: measures[0].description || measures[0].name }) : '', enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Export" })] }), _jsx(CSVLink
                                     //@ts-ignore
                                     , { 
                                         //@ts-ignore
-                                        ref: csvLinkRef, data: csvData, filename: `export_${moment().toISOString()}.csv`, separator: ';' })] })), zoomed && (_jsxs(Button, { sx: { minWidth: '40px !important', boxShadow: 1, px: 1 }, variant: "contained", color: "secondary", size: 'small', onClick: () => {
-                                    if (datePickerUsed) {
-                                        setZoomed(false);
-                                    }
-                                    else if (chartPeriod === "ALL") {
-                                        setZoomed(false);
+                                        ref: csvLinkRef, data: csvData, filename: `export_${moment().toISOString()}.csv`, separator: ';' })] })), zoomed && measures.length > 0 && (_jsx(Button, { sx: { minWidth: '40px !important', boxShadow: 1, p: 1, mr: 1 }, variant: "contained", color: "primary", size: 'small', onClick: () => {
+                                    setChartLoading(true);
+                                    setZoomed(false);
+                                    if (chartPeriod === "ALL") {
+                                        setDatePickerUsed(false);
+                                        setTimeStart(1577854800);
                                         setTimeEnd(moment().unix());
-                                        setTimeStart(firstTimestamp - 86400);
+                                    }
+                                    else if (datePickerUsed) {
+                                        setTimeStart(pickerTimeStart);
+                                        setTimeEnd(pickerTimeEnd);
                                     }
                                     else {
-                                        setZoomed(false);
+                                        setDatePickerUsed(false);
                                         setChartPeriodConfig(chartConfigByPeriod[chartPeriod]);
                                         setTimeStart(chartPeriodConfig.from?.days
                                             ? moment()
@@ -439,12 +830,31 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                                             : moment().subtract(1, 'day').unix());
                                         setTimeEnd(moment().unix());
                                     }
-                                }, children: [_jsx(ZoomOut, { fontSize: 'small' }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Reset" })] }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'none', lg: 'flex' } }, children: datePicker }), _jsxs(ToggleButtonGroup, { color: "primary", value: chartPeriod, exclusive: true, onChange: handleChange, size: "small", 
-                                // sx={{ boxShadow: 1 }}
-                                disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] }), _jsx(MuiTooltip, { placement: "top", arrow: true, title: "Connect point values", children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 2 }, children: _jsx(TimelineIcon, {}) }) })] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { height: { xs: enableDatePicker && props.height ? `calc(${props.height} - 50px)` : props.height, lg: props.height }, minHeight: 300, mt: 2 }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
-                    _jsx(_Fragment, { children: dataMeasures && dataMeasures[0]?.data?.length ?
+                                }, children: _jsx(ZoomOut, { fontSize: 'small' }) }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: [_jsxs(Box, { sx: { display: { xs: 'none', lg: 'flex' }, alignItems: 'center', mr: 1 }, children: [_jsx(Button, { sx: {
+                                            borderWidth: 1,
+                                            borderStyle: 'solid',
+                                            borderColor: '#c4c4c4',
+                                            color: 'text.primary',
+                                            ":hover": { backgroundColor: 'action.hover' },
+                                            mr: enableDatePicker ? 1 : 0,
+                                            p: 0.85
+                                        }, onClick: () => shiftChart('timeStart'), children: _jsx(KeyboardArrowLeftIcon, {}) }), enableDatePicker && _jsx(Box, { sx: { display: { xs: 'none', lg: 'flex' } }, children: datePicker }), _jsx(Button, { sx: {
+                                            borderWidth: 1,
+                                            borderStyle: 'solid',
+                                            borderColor: '#c4c4c4',
+                                            color: 'text.primary',
+                                            ":hover": { backgroundColor: 'action.hover' },
+                                            ml: 1,
+                                            p: 0.85
+                                        }, onClick: () => shiftChart('timeEnd'), children: _jsx(KeyboardArrowRightIcon, {}) })] }), _jsxs(ToggleButtonGroup, { color: "primary", value: !datePickerUsed && !zoomed ? chartPeriod : null, exclusive: true, onChange: handleChange, size: "small", sx: {
+                                    '& .MuiToggleButton-root': {
+                                        color: 'text.primary', fontSize: '0.95rem', fontWeight: 'normal', paddingTop: '6px', paddingBottom: '6px'
+                                    }
+                                }, disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] }), _jsx(MuiTooltip, { placement: "top", arrow: true, title: "Connect point values", children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 1 }, children: _jsx(TimelineIcon, {}) }) }) }), annotationsData !== null && (_jsx(MuiTooltip, { placement: "top", arrow: true, title: "Show annotations", children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: annotationsEnabled, disabled: chartLoading, onChange: () => setAnnotationsEnabled(!annotationsEnabled), sx: { ml: 1 }, children: _jsx(EditNoteIcon, {}) }) }) }))] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { mt: 2, height: '100%' }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
+                    _jsx(_Fragment, { children: dataMeasures && (dataMeasures.length > 1 || (dataMeasures.length === 1 && dataMeasures[0].data?.length)) ?
                             (_jsx(Line, { options: options, data: {
-                                    datasets: dataMeasures || [{ data: [] }]
+                                    // datasets: dataMeasures || [{ data: [] }]
+                                    datasets: dataMeasures.map(d => ({ ...d, showLine: spanGapsOption || !d.change })) || [{ data: [] }]
                                 } })) : _jsxs(Box, { sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
@@ -458,7 +868,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                         alignItems: 'center',
                         justifyContent: 'center',
                         textAlign: 'center',
-                        height: '100%'
+                        height: 'calc(100% - 50px)'
                     }, children: _jsx(CircularProgress, {}) })) })] }));
 };
 export default TrendChart;