Merge branch 'main' of https://github.com/cirsislab-platform/TimeLine

zadeviggers · zadeviggers · commit c37c2d990cf0 · 2024-01-17T14:18:23.000+13:00
diff --git a/examples/plugins-axis-swapped/index.html b/examples/plugins-axis-swapped/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Plugins w/ axis swap</title>
+	</head>
+	<body>
+		<h1>Plugins w/ axis swap</h1>
+		<div id="chart-container" height="250" width="500"></div>
+		<script type="module" src="plugins-axis-swapped.ts"></script>
+	</body>
+</html>
diff --git a/examples/plugins-axis-swapped/plugins-axis-swapped.ts b/examples/plugins-axis-swapped/plugins-axis-swapped.ts
@@ -0,0 +1,59 @@
+import {
+	TimeLine,
+	Point,
+	xAxisPlugin,
+	yAxisPlugin,
+	doubleClickCopyPlugin,
+	highlightNearestPointPlugin,
+	nearestPointInfoPopupPlugin,
+	pointerCrosshairPlugin,
+	axisLabelPlugin,
+} from "../../src";
+
+const data: Point[] = [];
+const maxPoints = 300;
+const chart = new TimeLine({
+	container: document.getElementById("chart-container") as HTMLElement,
+	data,
+	maxPoints,
+	// Note that these aren't used by the chart itself, they're just used by plugins
+	xLabel: "Time",
+	yLabel: "Random numbers",
+	plugins: [
+		xAxisPlugin((x) => new Date(x).toLocaleTimeString(), 5, "top"),
+		yAxisPlugin((a) => a + "", 5, "right"),
+		doubleClickCopyPlugin(),
+		highlightNearestPointPlugin(),
+		nearestPointInfoPopupPlugin(),
+		pointerCrosshairPlugin(),
+		axisLabelPlugin(true, true, "top", "right"),
+	],
+});
+
+let prev = 0;
+setInterval(() => {
+	const y =
+		prev + Math.floor(Math.random() * 10) * (Math.random() > 0.5 ? -1 : 1);
+	prev = y;
+	data.push({
+		x: Date.now(),
+		y,
+	});
+	// This is very important!
+	// You can't have more points in the data array
+	// than chart.maxPoints, or you'll have weird
+	// rendering issues.
+	while (data.length > maxPoints) {
+		data.shift();
+	}
+
+	// Call chart.recompute() when you're done updating `data`
+	chart.recompute();
+}, 50);
+
+// Note that you need to call chart.draw() yourself
+function renderLoop() {
+	requestAnimationFrame(renderLoop);
+	chart.draw();
+}
+renderLoop();
diff --git a/src/TimeLine.ts b/src/TimeLine.ts
@@ -5,7 +5,7 @@ import type {
 } from "./types";
 import { isPointInBox } from "./utils";
 
-interface TimeLinePadding {
+interface TimeLineSides {
 	left: number;
 	right: number;
 	top: number;
@@ -19,7 +19,7 @@ export interface TimeLineOptions {
 	yLabel: string;
 	xLabel: string;
 	lineWidth?: number;
-	padding?: Partial<TimeLinePadding>;
+	padding?: Partial<TimeLineSides>;
 	plugins?: (TimeLinePlugin | null | undefined | false)[];
 }
 
@@ -50,7 +50,7 @@ export class TimeLine {
 	xLabel: string;
 	lineWidth = 0.8;
 	paused = false;
-	padding: TimeLinePadding;
+	padding: TimeLineSides;
 
 	helpfulInfo: TimeLineHelpfulInfo = {
 		cursor: {
diff --git a/src/plugins/axis-labels.ts b/src/plugins/axis-labels.ts
@@ -4,11 +4,15 @@ import { TimeLinePlugin } from "../types";
  * This plugin adds text labels to the X and Y axis.
  * @param showX Weather or not to add the x-axis label
  * @param showY Weather or not to add the y-axis label
+ * @param xSide The side to position the x-axis label
+ * @param ySide The side to position the y-axis label
  * @returns {TimeLinePlugin}
  */
 export const axisLabelPlugin = (
 	showX = true,
 	showY = true,
+	xSide: "top" | "bottom" = "bottom",
+	ySide: "left" | "right" = "left",
 ): TimeLinePlugin => ({
 	data: {
 		xLabelEl: document.createElement("p"),
@@ -17,10 +21,10 @@ export const axisLabelPlugin = (
 	},
 	construct: function (chart) {
 		if (showY) {
-			chart.padding.left += 20;
+			chart.padding[ySide] += 20;
 		}
 		if (showX) {
-			chart.padding.bottom += 10;
+			chart.padding[xSide] += 10;
 		}
 
 		this.data.styleTag.innerText = `.crisislab-timeline-axis-label {
@@ -32,17 +36,21 @@ export const axisLabelPlugin = (
 			.crisislab-timeline-axis-label.crisislab-timeline-x-axis {
 				left: 50%;
 				transform: translateX(-50%);
-				bottom: 0px;
-				margin-bottom: 2px;
+				${xSide}: 0px;
+				margin-${xSide}: 2px;
 
 			}
 
 			.crisislab-timeline-axis-label.crisislab-timeline-y-axis {
-                left: 0px;
+                ${ySide}: 0px;
 				top: 50%;
-				writing-mode: vertical-rl;
-				transform: rotate(180deg) translateY(50%);
-				margin-left: 1px;
+				writing-mode: vertical-lr;
+				transform: ${
+					ySide === "left"
+						? "rotate(180deg) translateY(50%)"
+						: "translateY(-50%)"
+				};
+				margin-${ySide}: 1px;
 			}`;
 		chart.container.appendChild(this.data.styleTag);
 
diff --git a/src/plugins/axis.ts b/src/plugins/axis.ts
@@ -10,37 +10,45 @@ const labelFont = `${labelFontSize}px Arial`;
  * This plugin draws an x-axis on the chart.
  * @param formatLabel A function that converts an x-axis value to a human-readable format
  * @param xMarks The number of markers to show on the x-axis
+ * @param side The side of the graph to render the axis on
  * @returns {TimeLinePlugin}
  */
 export const xAxisPlugin = (
 	formatLabel: (x: number) => string = (x) => x + "",
 	xMarks = 5,
+	side: "top" | "bottom" = "bottom",
 ): TimeLinePlugin => ({
 	construct: (chart) => {
-		chart.padding.bottom += 30;
+		chart.padding[side] += 30;
 	},
 	"draw:after": (chart) => {
+		const onBottom = side === "bottom";
 		// Set font properties
 		chart.ctx.font = labelFont;
 		chart.ctx.fillStyle = chart.foregroundColour;
 		chart.ctx.textAlign = "start";
-		chart.ctx.textBaseline = "top";
+		chart.ctx.textBaseline = onBottom ? "top" : "bottom";
 
 		const xPointGap = Math.floor(chart.maxPoints / xMarks);
 
 		for (let i = 0; i < xMarks; i++) {
 			const point = chart.computedData[i * xPointGap];
 			if (!point) continue;
-			const renderY = chart.height - chart.padding.bottom;
+			const renderY = onBottom
+				? chart.heightInsidePadding + chart.padding.top
+				: chart.padding.top;
 
 			const label = formatLabel(point.x);
 			const textX = point.renderX + 5;
-			const textY = renderY + axisGap;
+			const textY = renderY + (onBottom ? axisGap : -axisGap);
 
 			// Marker
 			chart.ctx.beginPath();
 			chart.ctx.moveTo(point.renderX, renderY);
-			chart.ctx.lineTo(point.renderX, renderY + tickLength);
+			chart.ctx.lineTo(
+				point.renderX,
+				renderY + (onBottom ? tickLength : -tickLength),
+			);
 			chart.ctx.stroke();
 
 			// Label
@@ -53,39 +61,50 @@ export const xAxisPlugin = (
  * This plugin draws a y-axis on the chart.
  * @param formatLabel A function that converts an y-axis value to a human-readable format
  * @param yMarks The number of markers to show on the y-axis
+ * @param side The side of the graph to render the axis on
  * @returns {TimeLinePlugin}
  */
 export const yAxisPlugin = (
 	formatLabel: (y: number) => string = (y) => y + "",
 	yMarks = 5,
+	side: "left" | "right" = "left",
 ): TimeLinePlugin => ({
 	construct: (chart) => {
-		chart.padding.left += 40;
+		chart.padding[side] += 40;
 	},
 	"draw:after": (chart) => {
+		const onLeft = side === "left";
 		const { yOffset, yMultiplier } = chart.getRenderOffsetsAndMultipliers();
 
 		// Set font properties
 		chart.ctx.font = labelFont;
 		chart.ctx.fillStyle = chart.foregroundColour;
-		chart.ctx.textAlign = "right";
+		chart.ctx.textAlign = onLeft ? "right" : "left";
 		chart.ctx.textBaseline = "top";
 		chart.ctx.fillStyle = chart.foregroundColour;
 
+		const relevantChartContentEdgeX = onLeft
+			? chart.padding.left
+			: chart.padding.left + chart.widthInsidePadding;
+
 		for (let i = 0; i < yMarks; i++) {
 			const yValue = (i * chart.heightInsidePadding) / (yMarks - 1);
-			const yRenderPosition = yValue + chart.padding.top;
+			const yRenderPosition = yValue + chart.padding.top + 1;
 			const yDataValue =
 				(chart.heightInsidePadding - yValue) / yMultiplier - yOffset;
 
-			const textX = chart.padding.left - axisGap;
+			const textX =
+				relevantChartContentEdgeX + (onLeft ? -axisGap : axisGap);
 			const textY = yRenderPosition + axisGap; // Move down so it doesn't overlap the line
 			const label = formatLabel(yDataValue);
 
 			//Marker
 			chart.ctx.beginPath();
-			chart.ctx.moveTo(chart.padding.left - tickLength, yRenderPosition);
-			chart.ctx.lineTo(chart.padding.left, yRenderPosition);
+			chart.ctx.moveTo(
+				relevantChartContentEdgeX + (onLeft ? -tickLength : tickLength),
+				yRenderPosition,
+			);
+			chart.ctx.lineTo(relevantChartContentEdgeX, yRenderPosition);
 			chart.ctx.stroke();
 
 			// Label
