link to gdrive + granularity fixes
This commit is contained in:
parent
86682398db
commit
418f23586b
@ -459,9 +459,21 @@ useEffect(() => {
|
||||
/>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-center">
|
||||
<button onClick={handlePDFExport} className="text-sm lg:text-lg btn-primary">
|
||||
<button
|
||||
onClick={handlePDFExport}
|
||||
className="text-sm lg:text-lg btn-primary"
|
||||
>
|
||||
Export Chart Images to PDF
|
||||
</button>
|
||||
|
||||
<a
|
||||
href={`https://drive.google.com/drive/folders/${process.env.NEXT_PUBLIC_GOOGLE_DRIVE_FOLDER_ID}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm lg:text-lg btn-primary"
|
||||
>
|
||||
View Excel Logs
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import React, { useRef, useEffect, useState, useCallback } from 'react';
|
||||
import { Line } from 'react-chartjs-2';
|
||||
import ChartJS from 'chart.js/auto';
|
||||
import zoomPlugin from 'chartjs-plugin-zoom';
|
||||
@ -14,14 +14,11 @@ import {
|
||||
endOfYear,
|
||||
} from 'date-fns';
|
||||
import { fetchPowerTimeseries, fetchForecast } from '@/app/utils/api';
|
||||
import { color } from 'html2canvas/dist/types/css/types/color';
|
||||
import DatePicker from 'react-datepicker';
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
import './datepicker-dark.css'; // custom dark mode styles
|
||||
import './datepicker-dark.css';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
|
||||
|
||||
|
||||
ChartJS.register(zoomPlugin);
|
||||
|
||||
interface TimeSeriesEntry {
|
||||
@ -39,7 +36,6 @@ function powerSeriesToEnergySeries(
|
||||
): TimeSeriesEntry[] {
|
||||
if (!data?.length) return [];
|
||||
|
||||
// Ensure ascending by time
|
||||
const sorted = [...data].sort(
|
||||
(a, b) => new Date(a.time).getTime() - new Date(b.time).getTime()
|
||||
);
|
||||
@ -50,23 +46,18 @@ function powerSeriesToEnergySeries(
|
||||
for (let i = 0; i < sorted.length; i++) {
|
||||
const t0 = new Date(sorted[i].time).getTime();
|
||||
const p0 = sorted[i].value; // kW
|
||||
|
||||
let deltaMs: number;
|
||||
if (i < sorted.length - 1) {
|
||||
const t1 = new Date(sorted[i + 1].time).getTime();
|
||||
deltaMs = Math.max(0, t1 - t0);
|
||||
if (deltaMs > 0) lastDeltaMs = deltaMs;
|
||||
} else {
|
||||
// For the last point, assume previous cadence or a guess
|
||||
deltaMs = lastDeltaMs ?? guessMinutes * 60 * 1000;
|
||||
}
|
||||
|
||||
const hours = deltaMs / (1000 * 60 * 60);
|
||||
const kwh = p0 * hours; // kW * h = kWh
|
||||
|
||||
out.push({ time: sorted[i].time, value: kwh });
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
@ -76,19 +67,15 @@ function groupTimeSeries(
|
||||
agg: 'mean' | 'max' | 'sum' = 'mean'
|
||||
): TimeSeriesEntry[] {
|
||||
const groupMap = new Map<string, number[]>();
|
||||
|
||||
for (const entry of data) {
|
||||
const date = new Date(entry.time);
|
||||
let key = '';
|
||||
|
||||
switch (mode) {
|
||||
case 'day': {
|
||||
// Snap to 5-minute buckets in local (KL) time
|
||||
const local = new Date(
|
||||
date.toLocaleString('en-US', { timeZone: 'Asia/Kuala_Lumpur' })
|
||||
);
|
||||
const snappedMin = Math.floor(local.getMinutes() / 5) * 5;
|
||||
local.setMinutes(snappedMin, 0, 0);
|
||||
local.setSeconds(0, 0);
|
||||
key = local.toISOString();
|
||||
break;
|
||||
}
|
||||
@ -111,11 +98,9 @@ function groupTimeSeries(
|
||||
key = date.getFullYear().toString();
|
||||
break;
|
||||
}
|
||||
|
||||
if (!groupMap.has(key)) groupMap.set(key, []);
|
||||
groupMap.get(key)!.push(entry.value);
|
||||
}
|
||||
|
||||
return Array.from(groupMap.entries()).map(([time, values]) => {
|
||||
if (agg === 'sum') {
|
||||
const sum = values.reduce((a, b) => a + b, 0);
|
||||
@ -127,7 +112,6 @@ function groupTimeSeries(
|
||||
});
|
||||
}
|
||||
|
||||
// ---- NEW: build a 5-minute time grid for the day view
|
||||
function buildTimeGrid(start: Date, end: Date, stepMinutes = 5): string[] {
|
||||
const grid: string[] = [];
|
||||
const t = new Date(start);
|
||||
@ -142,15 +126,17 @@ function buildTimeGrid(start: Date, end: Date, stepMinutes = 5): string[] {
|
||||
const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
const chartRef = useRef<any>(null);
|
||||
const [viewMode, setViewMode] = useState<'day' | 'daily' | 'weekly' | 'monthly' | 'yearly'>('day');
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const [consumption, setConsumption] = useState<TimeSeriesEntry[]>([]);
|
||||
const [generation, setGeneration] = useState<TimeSeriesEntry[]>([]);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const [forecast, setForecast] = useState<TimeSeriesEntry[]>([]);
|
||||
const [startIndex, setStartIndex] = useState(0);
|
||||
const [endIndex, setEndIndex] = useState(0);
|
||||
|
||||
const LIVE_REFRESH_MS = 300000; // 5min when viewing a single day
|
||||
const SLOW_REFRESH_MS = 600000; // 10min for weekly/monthly/yearly
|
||||
const LIVE_REFRESH_MS = 300000;
|
||||
const SLOW_REFRESH_MS = 600000;
|
||||
|
||||
const fetchAndSet = React.useCallback(async () => {
|
||||
const fetchAndSet = useCallback(async () => {
|
||||
const now = new Date();
|
||||
let start: Date;
|
||||
let end: Date;
|
||||
@ -185,17 +171,27 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
const res = await fetchPowerTimeseries(siteId, isoStart, isoEnd);
|
||||
setConsumption(res.consumption);
|
||||
setGeneration(res.generation);
|
||||
|
||||
const forecastData = await fetchForecast(3.15, 101.7, 37, 0, 30.67);
|
||||
const selectedDateStr = selectedDate.toISOString().split('T')[0];
|
||||
|
||||
setForecast(
|
||||
forecastData
|
||||
.filter(({ time }) => time.startsWith(selectedDateStr))
|
||||
.map(({ time, forecast }) => ({
|
||||
time,
|
||||
value: forecast
|
||||
}))
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch energy timeseries:', error);
|
||||
}
|
||||
}, [siteId, viewMode, selectedDate]);
|
||||
|
||||
// 3) Auto-refresh effect: initial load + interval (pauses when tab hidden)
|
||||
useEffect(() => {
|
||||
let timer: number | undefined;
|
||||
|
||||
const tick = async () => {
|
||||
// Avoid wasted calls when the tab is in the background
|
||||
if (!document.hidden) {
|
||||
await fetchAndSet();
|
||||
}
|
||||
@ -203,15 +199,12 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
timer = window.setTimeout(tick, ms);
|
||||
};
|
||||
|
||||
// initial load
|
||||
fetchAndSet();
|
||||
|
||||
// schedule next cycles
|
||||
timer = window.setTimeout(tick, viewMode === 'day' ? LIVE_REFRESH_MS : SLOW_REFRESH_MS);
|
||||
|
||||
|
||||
const onVis = () => {
|
||||
if (!document.hidden) {
|
||||
// kick immediately when user returns
|
||||
clearTimeout(timer);
|
||||
tick();
|
||||
}
|
||||
@ -241,169 +234,68 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
return isDark;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const now = new Date();
|
||||
let start: Date;
|
||||
let end: Date;
|
||||
|
||||
switch (viewMode) {
|
||||
case 'day':
|
||||
start = startOfDay(selectedDate);
|
||||
end = endOfDay(selectedDate);
|
||||
break;
|
||||
case 'daily':
|
||||
start = startOfWeek(now, { weekStartsOn: 1 });
|
||||
end = endOfWeek(now, { weekStartsOn: 1 });
|
||||
break;
|
||||
case 'weekly':
|
||||
start = startOfMonth(now);
|
||||
end = endOfMonth(now);
|
||||
break;
|
||||
case 'monthly':
|
||||
start = startOfYear(now);
|
||||
end = endOfYear(now);
|
||||
break;
|
||||
case 'yearly':
|
||||
start = new Date('2020-01-01');
|
||||
end = now;
|
||||
break;
|
||||
}
|
||||
|
||||
const isoStart = start.toISOString();
|
||||
const isoEnd = end.toISOString();
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await fetchPowerTimeseries(siteId, isoStart, isoEnd);
|
||||
setConsumption(res.consumption);
|
||||
setGeneration(res.generation);
|
||||
|
||||
// ⬇️ ADD THIS here — fetch forecast
|
||||
const forecastData = await fetchForecast(3.15, 101.7, 37, 0, 30.67);
|
||||
const selectedDateStr = selectedDate.toISOString().split('T')[0];
|
||||
|
||||
setForecast(
|
||||
forecastData
|
||||
.filter(({ time }) => time.startsWith(selectedDateStr)) // ✅ filter only selected date
|
||||
.map(({ time, forecast }) => ({
|
||||
time,
|
||||
value: forecast
|
||||
}))
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch energy timeseries:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [siteId, viewMode, selectedDate]);
|
||||
|
||||
const isEnergyView = viewMode !== 'day';
|
||||
|
||||
// Convert to energy series for aggregated views
|
||||
const consumptionForGrouping = isEnergyView
|
||||
? powerSeriesToEnergySeries(consumption, 30)
|
||||
: consumption;
|
||||
const consumptionForGrouping = isEnergyView ? powerSeriesToEnergySeries(consumption, 30) : consumption;
|
||||
const generationForGrouping = isEnergyView ? powerSeriesToEnergySeries(generation, 30) : generation;
|
||||
const forecastForGrouping = isEnergyView ? powerSeriesToEnergySeries(forecast, 60) : forecast;
|
||||
|
||||
const generationForGrouping = isEnergyView
|
||||
? powerSeriesToEnergySeries(generation, 30)
|
||||
: generation;
|
||||
|
||||
const forecastForGrouping = isEnergyView
|
||||
? powerSeriesToEnergySeries(forecast, 60) // if forecast is hourly, guess 60
|
||||
: forecast;
|
||||
|
||||
// Group: sum for energy views, mean for day view
|
||||
const groupedConsumption = groupTimeSeries(
|
||||
consumptionForGrouping,
|
||||
viewMode,
|
||||
isEnergyView ? 'sum' : 'mean'
|
||||
);
|
||||
|
||||
const groupedGeneration = groupTimeSeries(
|
||||
generationForGrouping,
|
||||
viewMode,
|
||||
isEnergyView ? 'sum' : 'mean'
|
||||
);
|
||||
|
||||
const groupedForecast = groupTimeSeries(
|
||||
forecastForGrouping,
|
||||
viewMode,
|
||||
isEnergyView ? 'sum' : 'mean'
|
||||
);
|
||||
const groupedConsumption = groupTimeSeries(consumptionForGrouping, viewMode, isEnergyView ? 'sum' : 'mean');
|
||||
const groupedGeneration = groupTimeSeries(generationForGrouping, viewMode, isEnergyView ? 'sum' : 'mean');
|
||||
const groupedForecast = groupTimeSeries(forecastForGrouping, viewMode, isEnergyView ? 'sum' : 'mean');
|
||||
|
||||
const forecastMap = Object.fromEntries(groupedForecast.map(d => [d.time, d.value]));
|
||||
const consumptionMap = Object.fromEntries(groupedConsumption.map(d => [d.time, d.value]));
|
||||
const generationMap = Object.fromEntries(groupedGeneration.map(d => [d.time, d.value]));
|
||||
|
||||
const dataTimesDay = [
|
||||
...groupedConsumption.map(d => Date.parse(d.time)),
|
||||
...groupedGeneration.map(d => Date.parse(d.time)),
|
||||
...groupedForecast.map(d => Date.parse(d.time)),
|
||||
].filter(Number.isFinite).sort((a, b) => a - b);
|
||||
|
||||
// ---- CHANGED: use a 5-minute grid for day view
|
||||
const dayGrid =
|
||||
viewMode === 'day'
|
||||
? (() => {
|
||||
const dayStart = startOfDay(selectedDate).getTime();
|
||||
const dayEnd = endOfDay(selectedDate).getTime();
|
||||
if (dataTimesDay.length) {
|
||||
const minT = Math.max(dayStart, dataTimesDay[0]);
|
||||
const maxT = Math.min(dayEnd, dataTimesDay[dataTimesDay.length - 1]);
|
||||
return buildTimeGrid(new Date(minT), new Date(maxT), 5)
|
||||
}
|
||||
// no data → keep full day
|
||||
return buildTimeGrid(new Date(dayStart), new Date(dayEnd), 5);
|
||||
})()
|
||||
: [];
|
||||
|
||||
|
||||
const unionTimes = Array.from(new Set([
|
||||
...groupedConsumption.map(d => d.time),
|
||||
...groupedGeneration.map(d => d.time),
|
||||
...groupedForecast.map(d => d.time),
|
||||
])).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
|
||||
|
||||
const dataTimesDay = [
|
||||
...groupedConsumption.map(d => Date.parse(d.time)),
|
||||
...groupedGeneration.map(d => Date.parse(d.time)),
|
||||
...groupedForecast.map(d => Date.parse(d.time)),
|
||||
].filter(Number.isFinite).sort((a, b) => a - b);
|
||||
|
||||
const dayGrid = viewMode === 'day'
|
||||
? buildTimeGrid(startOfDay(selectedDate), endOfDay(selectedDate), 1)
|
||||
: [];
|
||||
|
||||
|
||||
|
||||
const allTimes = viewMode === 'day' ? dayGrid : unionTimes;
|
||||
|
||||
const consumptionMap = Object.fromEntries(groupedConsumption.map(d => [d.time, d.value]));
|
||||
const generationMap = Object.fromEntries(groupedGeneration.map(d => [d.time, d.value]));
|
||||
const hasDataAt = (t: string) =>
|
||||
t in consumptionMap || t in generationMap || t in forecastMap;
|
||||
|
||||
const [startIndex, setStartIndex] = useState(0);
|
||||
const [endIndex, setEndIndex] = useState(allTimes.length - 1);
|
||||
const firstAvailableIndex = allTimes.findIndex(hasDataAt);
|
||||
const lastAvailableIndex = (() => {
|
||||
for (let i = allTimes.length - 1; i >= 0; i--) {
|
||||
if (hasDataAt(allTimes[i])) return i;
|
||||
}
|
||||
return -1;
|
||||
})();
|
||||
|
||||
// after allTimes, consumptionMap, generationMap, forecastMap
|
||||
const hasDataAt = (t: string) =>
|
||||
t in consumptionMap || t in generationMap || t in forecastMap;
|
||||
|
||||
const firstAvailableIndex = allTimes.findIndex(hasDataAt);
|
||||
const lastAvailableIndex = (() => {
|
||||
for (let i = allTimes.length - 1; i >= 0; i--) {
|
||||
if (hasDataAt(allTimes[i])) return i;
|
||||
}
|
||||
return -1;
|
||||
})();
|
||||
|
||||
const selectableIndices =
|
||||
firstAvailableIndex === -1 || lastAvailableIndex === -1
|
||||
? []
|
||||
: Array.from(
|
||||
{ length: lastAvailableIndex - firstAvailableIndex + 1 },
|
||||
(_, k) => firstAvailableIndex + k
|
||||
);
|
||||
const selectableIndices =
|
||||
firstAvailableIndex === -1 || lastAvailableIndex === -1
|
||||
? []
|
||||
: Array.from(
|
||||
{ length: lastAvailableIndex - firstAvailableIndex + 1 },
|
||||
(_, k) => firstAvailableIndex + k
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectableIndices.length === 0) {
|
||||
setStartIndex(0);
|
||||
setEndIndex(Math.max(0, allTimes.length - 1));
|
||||
return;
|
||||
}
|
||||
const minIdx = selectableIndices[0];
|
||||
const maxIdx = selectableIndices[selectableIndices.length - 1];
|
||||
setStartIndex(prev => Math.min(Math.max(prev, minIdx), maxIdx));
|
||||
setEndIndex(prev => Math.min(Math.max(prev, minIdx), maxIdx));
|
||||
}, [viewMode, allTimes.length, firstAvailableIndex, lastAvailableIndex]);
|
||||
|
||||
if (selectableIndices.length > 0) {
|
||||
setStartIndex(selectableIndices[0]);
|
||||
setEndIndex(selectableIndices[selectableIndices.length - 1]);
|
||||
} else {
|
||||
setStartIndex(0);
|
||||
setEndIndex(allTimes.length > 0 ? allTimes.length - 1 : 0);
|
||||
}
|
||||
}, [allTimes, selectableIndices]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
@ -411,44 +303,31 @@ const selectableIndices =
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectableIndices.length) {
|
||||
const minIdx = selectableIndices[0];
|
||||
const maxIdx = selectableIndices[selectableIndices.length - 1];
|
||||
setStartIndex(minIdx);
|
||||
setEndIndex(maxIdx);
|
||||
} else {
|
||||
setStartIndex(0);
|
||||
setEndIndex(Math.max(0, allTimes.length - 1));
|
||||
}
|
||||
// run whenever mode changes or the timeline changes
|
||||
}, [viewMode, allTimes, firstAvailableIndex, lastAvailableIndex]);
|
||||
|
||||
|
||||
const formatLabel = (key: string) => {
|
||||
const formatLabel = useCallback((key: string) => {
|
||||
switch (viewMode) {
|
||||
case 'day':
|
||||
return new Date(key).toLocaleTimeString('en-GB', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
timeZone: 'Asia/Kuala_Lumpur',
|
||||
hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Asia/Kuala_Lumpur',
|
||||
});
|
||||
case 'monthly':
|
||||
return new Date(`${key}-01`).toLocaleString('en-GB', { month: 'short', year: 'numeric' });
|
||||
case 'weekly':
|
||||
return key.replace('-', ' ');
|
||||
case 'daily':
|
||||
return new Date(key).toLocaleDateString('en-MY', {
|
||||
weekday: 'short', day: '2-digit', month: 'short', year: 'numeric',
|
||||
});
|
||||
case 'yearly':
|
||||
return key;
|
||||
default:
|
||||
return key;
|
||||
}
|
||||
};
|
||||
}, [viewMode]);
|
||||
|
||||
const filteredLabels = allTimes.slice(startIndex, endIndex + 1);
|
||||
|
||||
// ---- CHANGED: use nulls for missing buckets (not zeros)
|
||||
const filteredConsumption = filteredLabels.map(t => (t in consumptionMap ? consumptionMap[t] : null));
|
||||
const filteredGeneration = filteredLabels.map(t => (t in generationMap ? generationMap[t] : null));
|
||||
const filteredForecast = filteredLabels.map(t => (t in forecastMap ? forecastMap[t] : null));
|
||||
const filteredGeneration = filteredLabels.map(t => (t in generationMap ? generationMap[t] : null));
|
||||
const filteredForecast = filteredLabels.map(t => (t in forecastMap ? forecastMap[t] : null));
|
||||
|
||||
const allValues = [...filteredConsumption, ...filteredGeneration].filter(
|
||||
(v): v is number => v !== null
|
||||
@ -457,28 +336,23 @@ const selectableIndices =
|
||||
const yAxisSuggestedMax = maxValue * 1.15;
|
||||
|
||||
const isDark = useIsDarkMode();
|
||||
|
||||
const axisColor = isDark ? '#fff' : '#222';
|
||||
const consumptionColor = isDark ? '#B80F0A' : '#EF4444';
|
||||
const generationColor = isDark ? '#48A860' : '#22C55E';
|
||||
const yUnit = isEnergyView ? 'kWh' : 'kW';
|
||||
const yTitle = isEnergyView ? 'Energy (kWh)' : 'Power (kW)';
|
||||
|
||||
function areaGradient(ctx: any, hex: string, alphaTop = 0.22, alphaBottom = 0.02) {
|
||||
const { ctx: g, chartArea } = ctx.chart;
|
||||
if (!chartArea) return hex; // initial render fallback
|
||||
if (!chartArea) return hex;
|
||||
const gradient = g.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
|
||||
// top more opaque → bottom fades out
|
||||
gradient.addColorStop(0, hex + Math.floor(alphaTop * 255).toString(16).padStart(2, '0'));
|
||||
gradient.addColorStop(1, hex + Math.floor(alphaBottom * 255).toString(16).padStart(2, '0'));
|
||||
return gradient;
|
||||
}
|
||||
|
||||
// Define colors for both light and dark modes
|
||||
const consumptionColor = isDark ? '#B80F0A' : '#EF4444'; // Example: Brighter red for dark mode
|
||||
const generationColor = isDark ? '#48A860' : '#22C55E'; // Example: Brighter green for dark mode
|
||||
const forecastColor = '#fcd913'; // A golden yellow that works well in both modes
|
||||
const yUnit = isEnergyView ? 'kWh' : 'kW';
|
||||
const yTitle = isEnergyView ? 'Energy (kWh)' : 'Power (kW)';
|
||||
|
||||
const data = {
|
||||
labels: filteredLabels.map(formatLabel),
|
||||
labels: filteredLabels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Consumption',
|
||||
@ -486,10 +360,10 @@ const selectableIndices =
|
||||
borderColor: consumptionColor,
|
||||
backgroundColor: (ctx: any) => areaGradient(ctx, consumptionColor),
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
tension: 0.2,
|
||||
spanGaps: true,
|
||||
pointRadius: 1, // default is 3, make smaller
|
||||
pointHoverRadius: 4, // a bit bigger on hover
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
borderWidth: 2,
|
||||
},
|
||||
{
|
||||
@ -498,10 +372,10 @@ const selectableIndices =
|
||||
borderColor: generationColor,
|
||||
backgroundColor: (ctx: any) => areaGradient(ctx, generationColor),
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
tension: 0.2,
|
||||
spanGaps: true,
|
||||
pointRadius: 1, // default is 3, make smaller
|
||||
pointHoverRadius: 4, // a bit bigger on hover
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
borderWidth: 2,
|
||||
},
|
||||
{
|
||||
@ -513,80 +387,141 @@ const selectableIndices =
|
||||
borderDash: [5, 5],
|
||||
fill: true,
|
||||
spanGaps: true,
|
||||
pointRadius: 2, // default is 3, make smaller
|
||||
pointHoverRadius: 4, // a bit bigger on hover
|
||||
pointRadius: 2,
|
||||
pointHoverRadius: 4,
|
||||
borderWidth: 2,
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
labels: {
|
||||
color: axisColor, // legend text color
|
||||
const xClampMin = filteredLabels.length ? Date.parse(filteredLabels[0]) : undefined;
|
||||
const xClampMax = filteredLabels.length ? Date.parse(filteredLabels[filteredLabels.length - 1]) : undefined;
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
labels: { color: axisColor },
|
||||
},
|
||||
zoom: {
|
||||
// ✅ limits, zoom and pan are siblings here
|
||||
limits: {
|
||||
x: {
|
||||
min: xClampMin,
|
||||
max: xClampMax,
|
||||
// minRange: 60 * 1000, // optional: prevent zooming past 1 minute
|
||||
},
|
||||
},
|
||||
zoom: {
|
||||
zoom: {
|
||||
wheel: { enabled: true },
|
||||
pinch: { enabled: true },
|
||||
mode: 'x' as const,
|
||||
},
|
||||
pan: { enabled: true, mode: 'x' as const },
|
||||
wheel: { enabled: true },
|
||||
pinch: { enabled: true },
|
||||
mode: 'x' as const,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
backgroundColor: isDark ? '#232b3e' : '#fff',
|
||||
titleColor: axisColor,
|
||||
bodyColor: axisColor,
|
||||
borderColor: isDark ? '#444' : '#ccc',
|
||||
borderWidth: 1,
|
||||
callbacks: {
|
||||
label: (ctx: any) => {
|
||||
const dsLabel = ctx.dataset.label || '';
|
||||
const val = ctx.parsed.y;
|
||||
return `${dsLabel}: ${val?.toFixed(2)} ${yUnit}`;
|
||||
},
|
||||
pan: { enabled: true, mode: 'x' as const },
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
backgroundColor: isDark ? '#232b3e' : '#fff',
|
||||
titleColor: axisColor,
|
||||
bodyColor: axisColor,
|
||||
borderColor: isDark ? '#444' : '#ccc',
|
||||
borderWidth: 1,
|
||||
callbacks: {
|
||||
label: (ctx: any) => {
|
||||
const dsLabel = ctx.dataset.label || '';
|
||||
const val = ctx.parsed.y;
|
||||
return `${dsLabel}: ${val?.toFixed(2)} ${yUnit}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
color: axisColor,
|
||||
text:
|
||||
viewMode === 'day'
|
||||
? 'Time (HH:MM)'
|
||||
: viewMode === 'daily'
|
||||
? 'Day'
|
||||
: viewMode === 'weekly'
|
||||
? 'Week'
|
||||
: viewMode === 'monthly'
|
||||
? 'Month'
|
||||
: 'Year',
|
||||
font: { weight: 'normal' as const },
|
||||
},
|
||||
ticks: {
|
||||
color: axisColor,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
suggestedMax: yAxisSuggestedMax,
|
||||
title: { display: true, text: yTitle, color: axisColor, font: { weight: 'normal' as const } },
|
||||
ticks: {
|
||||
color: axisColor,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
min: xClampMin,
|
||||
max: xClampMax,
|
||||
time: {
|
||||
unit:
|
||||
viewMode === 'day' ? 'minute'
|
||||
: viewMode === 'daily' ? 'day'
|
||||
: viewMode === 'weekly' ? 'week'
|
||||
: 'month',
|
||||
tooltipFormat: 'dd MMM yyyy, HH:mm',
|
||||
displayFormats: {
|
||||
minute: 'HH:mm',
|
||||
hour: 'HH:mm',
|
||||
day: 'dd MMM',
|
||||
week: 'w-yyyy',
|
||||
month: 'MMM yyyy',
|
||||
year: 'yyyy',
|
||||
},
|
||||
},
|
||||
ticks: {
|
||||
color: axisColor,
|
||||
autoSkip: false, // we control density ourselves
|
||||
source: 'labels', // use your label array
|
||||
// IMPORTANT: use function syntax so "this" is the scale
|
||||
callback: function (
|
||||
this: any,
|
||||
tickValue: string | number,
|
||||
index: number,
|
||||
_ticks: any[]
|
||||
) {
|
||||
// current visible range
|
||||
const min = typeof this.min === 'number' ? this.min : Date.parse(this.min as string);
|
||||
const max = typeof this.max === 'number' ? this.max : Date.parse(this.max as string);
|
||||
const rangeMs = max - min;
|
||||
|
||||
const ms =
|
||||
typeof tickValue === 'number' ? tickValue : Date.parse(tickValue as string);
|
||||
|
||||
// dynamic granularity
|
||||
const H = 60 * 60 * 1000;
|
||||
let stepMinutes = 60; // default when zoomed out
|
||||
if (rangeMs <= 6 * H) stepMinutes = 5;
|
||||
else if (rangeMs <= 12 * H) stepMinutes = 15;
|
||||
|
||||
const d = new Date(ms);
|
||||
// show only ticks aligned to stepMinutes (KL time)
|
||||
const minutes = Number(
|
||||
d.toLocaleString('en-GB', { timeZone: 'Asia/Kuala_Lumpur', minute: '2-digit' }).slice(-2)
|
||||
);
|
||||
if (minutes % stepMinutes !== 0) return '';
|
||||
|
||||
return d.toLocaleTimeString('en-GB', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
timeZone: 'Asia/Kuala_Lumpur',
|
||||
});
|
||||
},
|
||||
maxTicksLimit: 100, // safety
|
||||
},
|
||||
|
||||
title: {
|
||||
display: true,
|
||||
color: axisColor,
|
||||
text:
|
||||
viewMode === 'day' ? 'Time'
|
||||
: viewMode === 'daily' ? 'Day'
|
||||
: viewMode === 'weekly' ? 'Week'
|
||||
: viewMode === 'monthly' ? 'Month'
|
||||
: 'Year',
|
||||
font: { weight: 'normal' as const },
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
suggestedMax: yAxisSuggestedMax,
|
||||
title: { display: true, text: yTitle, color: axisColor, font: { weight: 'normal' as const } },
|
||||
ticks: { color: axisColor },
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
|
||||
|
||||
const handleResetZoom = () => {
|
||||
chartRef.current?.resetZoom();
|
||||
@ -594,14 +529,13 @@ const selectableIndices =
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow-md dark:bg-rtgray-800 dark:text-white-light">
|
||||
<div className="h-98 w-full" onDoubleClick={handleResetZoom}>
|
||||
<div className="h-98 w-full" onDoubleClick={handleResetZoom}>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-lg font-bold dark:text-white-light">Energy Consumption & Generation</h2>
|
||||
<button onClick={handleResetZoom} className="btn-primary px-8 py-2 text-sm">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 flex gap-4 items-center dark:text-white">
|
||||
{viewMode === 'day' && (
|
||||
<label className="font-medium">
|
||||
@ -609,12 +543,11 @@ const selectableIndices =
|
||||
<DatePicker
|
||||
selected={selectedDate}
|
||||
onChange={(date) => setSelectedDate(date!)}
|
||||
dateFormat="dd/MM/yyyy" // ✅ sets correct format
|
||||
dateFormat="dd/MM/yyyy"
|
||||
className="dark:bg-rtgray-700 dark:text-white bg-white border border-rounded dark:border-rtgray-700 text-black p-1 rounded"
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<label className="font-medium ">
|
||||
From:{' '}
|
||||
<select
|
||||
@ -623,7 +556,7 @@ const selectableIndices =
|
||||
const val = Number(e.target.value);
|
||||
setStartIndex(val <= endIndex ? val : endIndex);
|
||||
}}
|
||||
disabled={selectableIndices.length === 0}
|
||||
disabled={!selectableIndices.length}
|
||||
className="dark:bg-rtgray-700 border dark:border-rtgray-700 rounded p-1"
|
||||
>
|
||||
{selectableIndices.map((absIdx) => (
|
||||
@ -631,7 +564,6 @@ const selectableIndices =
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="font-medium ">
|
||||
To:{' '}
|
||||
<select
|
||||
@ -640,7 +572,7 @@ const selectableIndices =
|
||||
const val = Number(e.target.value);
|
||||
setEndIndex(val >= startIndex ? val : startIndex);
|
||||
}}
|
||||
disabled={selectableIndices.length === 0}
|
||||
disabled={!selectableIndices.length}
|
||||
className="dark:bg-rtgray-700 border dark:border-rtgray-700 rounded p-1"
|
||||
>
|
||||
{selectableIndices.map((absIdx) => (
|
||||
@ -648,7 +580,6 @@ const selectableIndices =
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="font-medium">
|
||||
View:{' '}
|
||||
<select
|
||||
@ -664,7 +595,6 @@ const selectableIndices =
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="h-96 w-full">
|
||||
<Line ref={chartRef} data={data} options={options} />
|
||||
</div>
|
||||
@ -673,12 +603,4 @@ const selectableIndices =
|
||||
);
|
||||
};
|
||||
|
||||
export default EnergyLineChart;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default EnergyLineChart;
|
||||
Loading…
x
Reference in New Issue
Block a user