diff --git a/src/tempgraph.ts b/src/tempgraph.ts index de82b1b..e913b83 100644 --- a/src/tempgraph.ts +++ b/src/tempgraph.ts @@ -2,6 +2,13 @@ import { Chart, registerables } from 'chart.js'; import annotationPlugin from 'chartjs-plugin-annotation'; import { AnnotationOptions } from 'chartjs-plugin-annotation'; +// Register Chart.js components and plugins +Chart.register(...registerables); +Chart.register(annotationPlugin); + +// External chart instance tracker +let chartInstance: Chart | null = null; + /* Test data if nothing is provided */ function getTestData(): string[] { const sampleData = `Time,Event,Temperature @@ -19,11 +26,6 @@ function getTestData(): string[] { return sampleData.split('\n'); } -// Register all Chart.js components -Chart.register(...registerables); -Chart.register(annotationPlugin); - - function parseTime(time: string): number { const [mins, secs] = time.split(':').map(Number); return mins * 60 + secs; @@ -32,7 +34,6 @@ function parseTime(time: string): number { export function loadGraph(dataArray?: string[]): void { const lines = dataArray || getTestData(); - // Further code using `lines`... const data = lines.slice(1).map(line => { const [time, event, temp] = line.split(','); return { time, event, temp }; @@ -63,19 +64,23 @@ export function loadGraph(dataArray?: string[]): void { borderWidth: 2, label: { content: entry.event, - enabled: true, - position: 'center', // Use a valid predefined position - yAdjust: -10 + display: true, + rotation: -90, // rotates text counter-clockwise + position: 'end', // anchors label near bottom of chart + yAdjust: -10, // nudges it downward (positive = down) + font: { + size: 10 + } } }; }); - // Clear previous chart instance if exists - const oldChart = (ctx as any).chart; - if (oldChart) { - oldChart.destroy(); + // Clean up previous chart if it exists + if (chartInstance) { + chartInstance.destroy(); } - new Chart(ctx, { + + chartInstance = new Chart(ctx, { type: 'line', data: { datasets: [{ @@ -88,6 +93,9 @@ export function loadGraph(dataArray?: string[]): void { }] }, options: { + animation: { + duration: 0 + }, responsive: true, scales: { x: {