mi/uChart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added support for maxTimeDelta and dateFormat

Browse Source
This commit is contained in:
Michal Pemcak
2025-07-19 10:37:12 +02:00
parent ac387674a4
commit 474865ddb4
6 changed files with 107 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/index.ts
View File

@@ -15,6 +15,8 @@ export function drawChart(
yTicks?: number;
backgroundColor?: string;
cursorX?: number | null;
maxTimeDelta?: number | null;
dateFormat?: (ts: number) => string;
}
): void {
const {
@@ -24,7 +26,8 @@ export function drawChart(
max,
showYAxis = false,
yTicks = 5,
cursorX = null
cursorX = null,
maxTimeDelta
} = opts;
const topPadding = 10;
@@ -67,10 +70,12 @@ export function drawChart(
let penDown = false;
let lastT: number | null = null;
const MAX_TIME_DELTA = 600;
// let MAX_TIME_DELTA = 600;
let max_time_delta = maxTimeDelta || 600;
for (let i = 0; i < data.length; i++) {
const [ti, vi] = data[i];
const invalid =
ti == null ||
vi == null ||
@@ -85,7 +90,7 @@ export function drawChart(
lastT = null;
continue;
}
if (lastT != null && ti - lastT > MAX_TIME_DELTA) penDown = false;
if (lastT != null && ti - lastT > max_time_delta) penDown = false;
const x = ((ti - minX) / rangeX) * width;
const y = topPadding + (1 - (vi - minVal) / rangeY) * usableHeight;
if (!penDown) {
@@ -111,7 +116,8 @@ export function drawChart(
ctx.font = '12px sans-serif';
let textY = 15;
ctx.fillStyle = '#fff';
ctx.fillText(new Date(tAtCursor).toLocaleTimeString(), cursorX + 6, textY);
const formatTime = opts.dateFormat ?? ((ts: number) => new Date(ts).toLocaleTimeString());
ctx.fillText(formatTime(tAtCursor), cursorX + 6, textY);
textY += 15;
for (const series of seriesList) {
@@ -142,6 +148,8 @@ export function createChartElement(
showYAxis?: boolean;
yTicks?: number;
backgroundColor?: string;
maxTimeDelta?: number | null;
dateFormat?: (ts: number) => string;
}
) {
const container = document.createElement('div');
@@ -217,7 +225,8 @@ export function createChartElement(
overlayCtx.font = '12px sans-serif';
overlayCtx.fillStyle = '#fff';
overlayCtx.fillText(new Date(tAtCursor).toLocaleTimeString(), cursorX > baseCanvas.width - 100 ? cursorX - 100 : cursorX + 6, 15);
const formatTime = currentOpts.dateFormat ?? ((ts: number) => new Date(ts).toLocaleTimeString());
overlayCtx.fillText(formatTime(tAtCursor), cursorX > baseCanvas.width - 100 ? cursorX - 100 : cursorX + 6, 15);
const topPadding = 10;
const bottomPadding = 10;