Avoid tick label overlap

Use rotation for horizontal timelines with long tick labels.
For other labels, look for overlap, and hide problematic ones.
Use darker text to indicate minor ticks instead of minor offset.

1 files changed, 9 insertions, 0 deletions

diff --git a/src/lib.ts b/src/lib.ts
index 6299345..9849006 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -59,11 +59,20 @@ export function getNumTrailingZeros(n: number): number {
 	}
 	throw new Error('Exceeded floating point precision');
 }
+// Removes a class from an element, triggers reflow, then adds the class
 export function animateWithClass(el: HTMLElement, className: string){
 	el.classList.remove(className);
 	el.offsetWidth; // Triggers reflow
 	el.classList.add(className);
 }
+// For estimating text width (via https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript)
+const _getTextWidthCanvas = document.createElement('canvas');
+export function getTextWidth(text: string, font: string): number {
+	const context = _getTextWidthCanvas.getContext('2d')!;
+	context.font = font;
+	const metrics = context.measureText(text);
+	return metrics.width;
+}
 
 // For calendar conversion (mostly copied from backend/hist_data/cal.py)
 export function gregorianToJdn(year: number, month: number, day: number): number {