multiline-chart 1.0.1

package/README.md

@@ -0,0 +1,170 @@
+# multiline-chart
+
+A lightweight, dependency-free multi-line time-series chart, packaged as a native
+[Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
+It renders multiple data series on a `<canvas>` with interactive hover
+scrubbing, a live legend, and full responsive/touch support.
+
+Everything (markup, styles, and rendering logic) is encapsulated in a single
+custom element, `<multi-line-chart>`, using Shadow DOM, so it drops into any page
+or framework without style leakage and without external libraries.
+
+## Features
+
+- **Zero runtime dependencies** – just plain TypeScript compiled to JavaScript.
+- **Canvas rendering** – crisp lines on any screen via `devicePixelRatio` scaling.
+- **Interactive hover** – a tracking line, date tooltip, on-line value dots, and
+  spread-out labels that avoid overlapping.
+- **Live legend** – shows the current value per series and updates as you hover.
+- **Responsive** – redraws on window resize and adapts label sizing/alignment on
+  small screens.
+- **Touch support** – scrub the chart on mobile; taps still pass through, drags
+  prevent page scroll.
+- **Dynamic Y-axis scaling** – axis bounds are computed from the data and rounded
+  to clean intervals.
+- **Sparse-data friendly** – series can have different/missing dates; missing
+  points are interpolated for hover markers.
+- **Encapsulated styling** – CSS is bundled into the component via Shadow DOM.
+- **Customizable title and logo** – via the `title` attribute and a `logo` slot.
+
+## Project structure
+
+```
+multiline-chart/
+├── src/
+│   ├── index.ts          # MultiLineChart custom element (all chart logic)
+│   ├── style.css         # Component styles (source of truth)
+│   └── chart-styles.ts   # AUTO-GENERATED from style.css (do not edit)
+├── scripts/
+│   └── inject-styles.js  # Inlines style.css into chart-styles.ts at build time
+├── dist/                 # Compiled output (generated by build)
+├── package.json
+└── tsconfig.json
+```
+
+The build has two steps (wired together in the `build` script):
+
+1. `scripts/inject-styles.js` reads `src/style.css` and writes it into
+   `src/chart-styles.ts` as an exported `CHART_CSS` string. This bundles the CSS
+   into the JS output without needing a CSS-aware bundler.
+2. `tsc` compiles the TypeScript in `src/` to `dist/`.
+
+## Getting started
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) and npm
+
+### Install
+
+```bash
+npm install
+```
+
+### Build
+
+```bash
+npm run build
+```
+
+This regenerates `src/chart-styles.ts` from `src/style.css` and compiles the
+TypeScript into `dist/`.
+
+## Usage
+
+Import the compiled module and register the element, then use the
+`<multi-line-chart>` tag in your HTML.
+
+```html
+<multi-line-chart title="Market Share">
+  <!-- optional: any markup projected into the header logo slot -->
+  <img slot="logo" src="logo.svg" alt="Logo" width="120" />
+</multi-line-chart>
+
+<script type="module">
+  import { MultiLineChart } from './dist/index.js';
+
+  // Register the <multi-line-chart> custom element.
+  MultiLineChart.initialize();
+
+  const chart = document.querySelector('multi-line-chart');
+
+  chart.setData([
+    {
+      name: 'Series A',
+      data: [
+        { date: '2024-01-01', value: 0.42 },
+        { date: '2024-02-01', value: 0.45 },
+        { date: '2024-03-01', value: 0.51 },
+      ],
+    },
+    {
+      name: 'Series B',
+      data: [
+        { date: '2024-01-01', value: 0.30 },
+        { date: '2024-02-01', value: 0.28 },
+        { date: '2024-03-01', value: 0.35 },
+      ],
+    },
+  ]);
+</script>
+```
+
+You can call `setData()` before the element is attached to the DOM; the data is
+buffered and rendered once it connects.
+
+## API
+
+### `MultiLineChart.initialize()`
+
+Static method that registers the custom element under the tag name
+`multi-line-chart` (no-op if already registered).
+
+### `setData(lines)`
+
+Sets the chart data and triggers a render.
+
+```ts
+interface DataPoint {
+  date: string;  // any value parseable by `new Date(...)`
+  value: number; // fractional value; rendered as a percentage (value * 100)
+}
+
+interface InputLine {
+  name: string;       // series name shown in the legend / hover labels
+  data: DataPoint[];
+}
+
+setData(lines: InputLine[]): void;
+```
+
+Notes:
+
+- `value` is treated as a fraction and displayed as a percentage (e.g. `0.42`
+  renders as `42%`).
+- Series are sorted by their leading value and assigned colors automatically from
+  the built-in color scheme.
+- Dates are unioned across all series; gaps within a series are interpolated for
+  hover markers.
+
+### `title` attribute
+
+Sets the header title. Changing it after render updates the header in place.
+
+```html
+<multi-line-chart title="Quarterly Revenue"></multi-line-chart>
+```
+
+### `logo` slot
+
+Project arbitrary markup (e.g. an inline SVG or image) into the header's logo
+area using `slot="logo"`.
+
+## Development
+
+- Edit styles in `src/style.css` (not `src/chart-styles.ts`, which is generated).
+- Run `npm run build` after changes to regenerate styles and recompile.
+
+## License
+
+ISC

package/dist/chart-styles.d.ts

@@ -0,0 +1 @@
+export declare const CHART_CSS = ":host {\n  box-sizing: border-box;\n  font-variation-settings:\n    'slnt' 0,\n    'wdth' 100,\n    'ital' 0;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.link-wrapper {\n  padding: 20px;\n  text-decoration: none;\n}\n\n.chart-header {\n  display: flex;\n  margin-bottom: 20px;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.chart-header__title {\n  font-size: 30px;\n  color: black;\n}\n\n.chart-container {\n  max-width: 100%;\n  max-height: 100%;\n  margin: 0 auto;\n  background: white;\n  padding: 30px;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  position: relative;\n}\n\n.chart-legend {\n  display: flex;\n  gap: 24px;\n  margin-bottom: 24px;\n  flex-wrap: wrap;\n}\n\n.legend-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n}\n\n.legend-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n}\n\n.legend-text {\n  color: #333;\n  font-weight: 500;\n}\n\n.legend-value {\n  color: #111;\n  font-weight: 700;\n}\n\n.canvas-wrapper {\n  position: relative;\n}\n\ncanvas {\n  display: block;\n  cursor: crosshair;\n  max-width: 100%;\n}\n\n.hover-tooltip {\n  position: absolute;\n  font-size: 12px;\n  pointer-events: none;\n  display: none;\n  white-space: nowrap;\n  z-index: 1000;\n  color: #999;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n.hover-line {\n  position: absolute;\n  width: 1px;\n  background: #999;\n  pointer-events: none;\n  display: none;\n  z-index: 999;\n}\n\n.hover-labels {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 1001;\n}\n\n.hover-label {\n  position: absolute;\n  transform: translateY(-50%);\n  font-size: 13px;\n  font-weight: 700;\n  white-space: nowrap;\n  pointer-events: none;\n}\n";

package/dist/chart-styles.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHART_CSS = void 0;
+// AUTO-GENERATED – do not edit. Run `npm run build` to regenerate.
+// Source: src/style.css
+exports.CHART_CSS = `:host {
+  box-sizing: border-box;
+  font-variation-settings:
+    'slnt' 0,
+    'wdth' 100,
+    'ital' 0;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.link-wrapper {
+  padding: 20px;
+  text-decoration: none;
+}
+
+.chart-header {
+  display: flex;
+  margin-bottom: 20px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chart-header__title {
+  font-size: 30px;
+  color: black;
+}
+
+.chart-container {
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0 auto;
+  background: white;
+  padding: 30px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.chart-legend {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.legend-text {
+  color: #333;
+  font-weight: 500;
+}
+
+.legend-value {
+  color: #111;
+  font-weight: 700;
+}
+
+.canvas-wrapper {
+  position: relative;
+}
+
+canvas {
+  display: block;
+  cursor: crosshair;
+  max-width: 100%;
+}
+
+.hover-tooltip {
+  position: absolute;
+  font-size: 12px;
+  pointer-events: none;
+  display: none;
+  white-space: nowrap;
+  z-index: 1000;
+  color: #999;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.hover-line {
+  position: absolute;
+  width: 1px;
+  background: #999;
+  pointer-events: none;
+  display: none;
+  z-index: 999;
+}
+
+.hover-labels {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1001;
+}
+
+.hover-label {
+  position: absolute;
+  transform: translateY(-50%);
+  font-size: 13px;
+  font-weight: 700;
+  white-space: nowrap;
+  pointer-events: none;
+}
+`;

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+interface DataPoint {
+    date: string;
+    value: number;
+}
+interface InputLine {
+    name: string;
+    data: DataPoint[];
+}
+export declare class MultiLineChart extends HTMLElement {
+    static get observedAttributes(): string[];
+    private root;
+    private canvas;
+    private ctx;
+    private tooltip;
+    private hoverLine;
+    private hoverLabels;
+    private chartLegend;
+    private legendValueEls;
+    private width;
+    private height;
+    private padding;
+    private lines;
+    private allDates;
+    private dateLabels;
+    private colorScheme;
+    private maxValue;
+    private minValue;
+    private hoverIndex;
+    private connected;
+    private pendingData;
+    private readonly boundMouseMove;
+    private readonly boundMouseLeave;
+    private readonly boundTouchStart;
+    private readonly boundTouchMove;
+    private readonly boundResize;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private get chartTitle();
+    private headerHTML;
+    private render;
+    private setupCanvas;
+    private calculateDynamicScale;
+    setData(inputData: InputLine[]): void;
+    private generateDateLabels;
+    draw(): void;
+    private drawGrid;
+    private drawAxes;
+    private indexToX;
+    private valueToY;
+    private getPointCoords;
+    /**
+     * Resolve the hover marker for a line at `index`. When the line has no sample
+     * at that exact index (dates differ between lines), interpolate the value
+     * along the drawn segment so the dot/label still appear on the line.
+     */
+    private resolveHoverPoint;
+    private strokeLine;
+    private drawLines;
+    private drawHoverHighlights;
+    private clearHoverLabels;
+    private showHoverElements;
+    private updateHover;
+    private onMouseMove;
+    private onTouchStart;
+    private onTouchMove;
+    private handleTouch;
+    private onMouseLeave;
+    private handleResize;
+    private renderLegend;
+    /** Update legend values to those of the hovered point. */
+    private updateLegendValues;
+    /** Restore legend values to the default (current) percentages. */
+    private resetLegendValues;
+    static initialize(): void;
+}
+export {};

package/dist/index.js

@@ -0,0 +1,596 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiLineChart = void 0;
+const chart_styles_1 = require("./chart-styles");
+class MultiLineChart extends HTMLElement {
+    static get observedAttributes() {
+        return ['title'];
+    }
+    constructor() {
+        super();
+        this.legendValueEls = [];
+        this.width = 0;
+        this.height = 0;
+        this.padding = {
+            top: 20,
+            right: 60,
+            bottom: 40,
+            left: 20,
+        };
+        this.lines = [];
+        this.allDates = [];
+        this.dateLabels = [];
+        this.colorScheme = ['#09C285', '#FF8A00', '#265cff', '#000000'];
+        this.maxValue = 100;
+        this.minValue = 0;
+        this.hoverIndex = -1;
+        this.connected = false;
+        this.pendingData = null;
+        // Bound handlers kept as fields so they can be removed on disconnect.
+        this.boundMouseMove = this.onMouseMove.bind(this);
+        this.boundMouseLeave = this.onMouseLeave.bind(this);
+        this.boundTouchStart = this.onTouchStart.bind(this);
+        this.boundTouchMove = this.onTouchMove.bind(this);
+        this.boundResize = this.handleResize.bind(this);
+        this.root = this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        if (this.connected)
+            return;
+        this.connected = true;
+        this.render();
+        this.canvas = this.root.querySelector('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.tooltip = this.root.querySelector('.hover-tooltip');
+        this.hoverLine = this.root.querySelector('.hover-line');
+        this.hoverLabels = this.root.querySelector('.hover-labels');
+        this.chartLegend = this.root.querySelector('.chart-legend');
+        this.setupCanvas();
+        this.canvas.addEventListener('mousemove', this.boundMouseMove);
+        this.canvas.addEventListener('mouseleave', this.boundMouseLeave);
+        // Touch scrubbing on mobile. touchstart stays passive so a plain tap still
+        // follows the clickout link; touchmove is non-passive so dragging the chart
+        // can preventDefault page scroll without losing the hover interaction.
+        this.canvas.addEventListener('touchstart', this.boundTouchStart, {
+            passive: true,
+        });
+        this.canvas.addEventListener('touchmove', this.boundTouchMove, {
+            passive: false,
+        });
+        this.canvas.addEventListener('touchend', this.boundMouseLeave);
+        window.addEventListener('resize', this.boundResize);
+        if (this.pendingData) {
+            const data = this.pendingData;
+            this.pendingData = null;
+            this.setData(data);
+        }
+    }
+    disconnectedCallback() {
+        if (!this.connected)
+            return;
+        this.connected = false;
+        this.canvas.removeEventListener('mousemove', this.boundMouseMove);
+        this.canvas.removeEventListener('mouseleave', this.boundMouseLeave);
+        this.canvas.removeEventListener('touchstart', this.boundTouchStart);
+        this.canvas.removeEventListener('touchmove', this.boundTouchMove);
+        this.canvas.removeEventListener('touchend', this.boundMouseLeave);
+        window.removeEventListener('resize', this.boundResize);
+    }
+    attributeChangedCallback() {
+        // Re-render the header so title attribute changes are reflected. The logo
+        // slot content is projected from light DOM and updates automatically.
+        if (this.connected) {
+            const header = this.root.querySelector('.chart-header');
+            if (header)
+                header.innerHTML = this.headerHTML();
+        }
+    }
+    get chartTitle() {
+        return this.getAttribute('title') || '';
+    }
+    headerHTML() {
+        // The logo is projected from light DOM via the "logo" slot, so consumers
+        // can pass arbitrary markup (e.g. an inline <svg slot="logo">...</svg>).
+        return `
+      ${this.chartTitle ? `<div class="chart-header__title">${this.chartTitle}</div>` : ''}
+      <div class="chart-header__logo"><slot name="logo"></slot></div>
+    `;
+    }
+    render() {
+        this.root.innerHTML = `
+      <style>${chart_styles_1.CHART_CSS}</style>
+      <div class="chart-container">
+        <div class="chart-header">${this.headerHTML()}</div>
+        <div class="chart-legend"></div>
+        <div class="canvas-wrapper">
+          <canvas></canvas>
+          <div class="hover-line"></div>
+          <div class="hover-tooltip"></div>
+          <div class="hover-labels"></div>
+        </div>
+      </div>
+    `;
+    }
+    setupCanvas() {
+        this.height = 250;
+        this.canvas.style.width = '100%';
+        this.canvas.style.height = `${this.height}px`;
+        // Measure the canvas itself (not the outer wrapper, which has paddings),
+        // so the drawing coordinate space matches the rendered canvas pixel-for-pixel.
+        const rect = this.canvas.getBoundingClientRect();
+        this.width = rect.width;
+        const dpr = window.devicePixelRatio || 1;
+        this.canvas.width = this.width * dpr;
+        this.canvas.height = this.height * dpr;
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this.ctx.scale(dpr, dpr);
+    }
+    calculateDynamicScale() {
+        let max = 0;
+        let min = Infinity;
+        this.lines.forEach((line) => {
+            line.data.forEach((point) => {
+                if (point.value !== null) {
+                    max = Math.max(max, point.value);
+                    min = Math.min(min, point.value);
+                }
+            });
+        });
+        this.maxValue = Math.ceil(max / 10) * 10;
+        this.minValue = Math.floor(min / 10) * 10;
+        if (this.maxValue - this.minValue < 20) {
+            const center = (this.maxValue + this.minValue) / 2;
+            this.maxValue = center + 10;
+            this.minValue = Math.max(0, center - 10);
+        }
+    }
+    setData(inputData) {
+        // Allow setData before the element is attached to the DOM.
+        if (!this.connected) {
+            this.pendingData = inputData;
+            return;
+        }
+        this.lines = [];
+        const datesSet = new Set();
+        inputData.forEach((line) => {
+            line.data.forEach((point) => {
+                datesSet.add(point.date);
+            });
+        });
+        this.allDates = Array.from(datesSet).sort();
+        const processedLines = inputData.map((line) => {
+            const dataMap = new Map();
+            line.data.forEach((point) => {
+                dataMap.set(point.date, point.value);
+            });
+            const fullData = this.allDates.map((dateStr) => {
+                const value = dataMap.get(dateStr);
+                return {
+                    date: new Date(dateStr),
+                    value: value !== undefined ? value * 100 : null,
+                };
+            });
+            const originalLastValue = line.data[0]?.value || 0;
+            const percentage = originalLastValue * 100;
+            return {
+                name: line.name,
+                data: fullData,
+                percentage: percentage,
+                originalData: line.data,
+                color: '',
+            };
+        });
+        processedLines.sort((a, b) => b.percentage - a.percentage);
+        this.lines = processedLines.map((line, index) => ({
+            ...line,
+            color: this.colorScheme[index % this.colorScheme.length],
+        }));
+        this.calculateDynamicScale();
+        this.generateDateLabels();
+        this.renderLegend();
+        this.draw();
+    }
+    generateDateLabels() {
+        const numLabels = 5;
+        const labels = [];
+        const totalDates = this.allDates.length;
+        if (totalDates === 0) {
+            this.dateLabels = [];
+            return;
+        }
+        const monthNames = [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec',
+        ];
+        // When the period spans more than one calendar year, show month + year
+        // instead of month + day so labels stay unambiguous across the boundary.
+        const firstYear = new Date(this.allDates[0]).getFullYear();
+        const lastYear = new Date(this.allDates[totalDates - 1]).getFullYear();
+        const spansMultipleYears = firstYear !== lastYear;
+        for (let i = 0; i < numLabels; i++) {
+            const index = Math.floor(((totalDates - 1) * i) / (numLabels - 1));
+            const dateStr = this.allDates[index];
+            const date = new Date(dateStr);
+            const label = spansMultipleYears
+                ? `${monthNames[date.getMonth()]} ${date.getFullYear()}`
+                : `${monthNames[date.getMonth()]} ${date.getDate()}`;
+            labels.push(label);
+        }
+        this.dateLabels = labels;
+    }
+    draw() {
+        if (!this.connected)
+            return;
+        this.ctx.globalAlpha = 1;
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this.drawGrid();
+        this.drawAxes();
+        this.drawLines();
+    }
+    drawGrid() {
+        this.ctx.strokeStyle = '#e8e8e8';
+        this.ctx.lineWidth = 1;
+        const chartHeight = this.height - this.padding.top - this.padding.bottom;
+        const steps = 4;
+        const valueRange = this.maxValue - this.minValue;
+        for (let i = 0; i <= steps; i++) {
+            const y = this.padding.top + (chartHeight * i) / steps;
+            this.ctx.setLineDash([3, 3]);
+            this.ctx.beginPath();
+            this.ctx.moveTo(this.padding.left, y);
+            this.ctx.lineTo(this.width - this.padding.right, y);
+            this.ctx.stroke();
+            this.ctx.setLineDash([]);
+            const value = this.maxValue - (valueRange * i) / steps;
+            this.ctx.fillStyle = '#999';
+            this.ctx.font = '12px sans-serif';
+            this.ctx.textAlign = 'left';
+            this.ctx.textBaseline = 'middle';
+            this.ctx.fillText(`${value.toFixed(0)}%`, this.width - this.padding.right + 10, y);
+        }
+    }
+    drawAxes() {
+        const chartWidth = this.width - this.padding.left - this.padding.right;
+        const fontSize = this.width < 480 ? 9 : 12;
+        this.ctx.fillStyle = '#999';
+        this.ctx.font = `${fontSize}px sans-serif`;
+        this.ctx.textBaseline = 'top';
+        const lastIndex = this.dateLabels.length - 1;
+        const isMobile = this.width < 480;
+        this.dateLabels.forEach((label, i) => {
+            const x = this.padding.left + (chartWidth * i) / lastIndex;
+            // On desktop, align edge labels inward so they don't clip past the canvas
+            // edges. On mobile keep everything centered (previous behavior).
+            if (!isMobile && i === 0) {
+                this.ctx.textAlign = 'left';
+            }
+            else if (!isMobile && i === lastIndex) {
+                this.ctx.textAlign = 'right';
+            }
+            else {
+                this.ctx.textAlign = 'center';
+            }
+            this.ctx.fillText(label, x, this.height - this.padding.bottom + 10);
+        });
+    }
+    indexToX(i, length) {
+        const chartWidth = this.width - this.padding.left - this.padding.right;
+        return this.padding.left + (chartWidth * i) / (length - 1);
+    }
+    valueToY(value) {
+        const chartHeight = this.height - this.padding.top - this.padding.bottom;
+        const valueRange = this.maxValue - this.minValue;
+        const normalizedValue = (value - this.minValue) / valueRange;
+        return this.padding.top + chartHeight - chartHeight * normalizedValue;
+    }
+    getPointCoords(line, i) {
+        const point = line.data[i];
+        if (!point || point.value === null)
+            return null;
+        return {
+            x: this.indexToX(i, line.data.length),
+            y: this.valueToY(point.value),
+        };
+    }
+    /**
+     * Resolve the hover marker for a line at `index`. When the line has no sample
+     * at that exact index (dates differ between lines), interpolate the value
+     * along the drawn segment so the dot/label still appear on the line.
+     */
+    resolveHoverPoint(line, index) {
+        const x = this.indexToX(index, line.data.length);
+        const direct = line.data[index];
+        if (direct && direct.value !== null) {
+            return { x, y: this.valueToY(direct.value), value: direct.value };
+        }
+        let prev = -1;
+        for (let i = index - 1; i >= 0; i--) {
+            if (line.data[i] && line.data[i].value !== null) {
+                prev = i;
+                break;
+            }
+        }
+        let next = -1;
+        for (let i = index + 1; i < line.data.length; i++) {
+            if (line.data[i] && line.data[i].value !== null) {
+                next = i;
+                break;
+            }
+        }
+        if (prev === -1 && next === -1)
+            return null;
+        let value;
+        if (prev === -1) {
+            value = line.data[next].value;
+        }
+        else if (next === -1) {
+            value = line.data[prev].value;
+        }
+        else {
+            const pv = line.data[prev].value;
+            const nv = line.data[next].value;
+            value = pv + (nv - pv) * ((index - prev) / (next - prev));
+        }
+        return { x, y: this.valueToY(value), value };
+    }
+    strokeLine(line, startIdx, endIdx) {
+        this.ctx.strokeStyle = line.color;
+        this.ctx.lineWidth = 1.5;
+        this.ctx.lineCap = 'round';
+        this.ctx.lineJoin = 'round';
+        this.ctx.beginPath();
+        let started = false;
+        for (let i = startIdx; i <= endIdx; i++) {
+            const coords = this.getPointCoords(line, i);
+            if (!coords)
+                continue;
+            if (!started) {
+                this.ctx.moveTo(coords.x, coords.y);
+                started = true;
+            }
+            else {
+                this.ctx.lineTo(coords.x, coords.y);
+            }
+        }
+        this.ctx.stroke();
+    }
+    drawLines() {
+        const hovering = this.hoverIndex >= 0;
+        const lastIdx = this.allDates.length - 1;
+        this.lines.forEach((line) => {
+            if (hovering) {
+                // Whole line dimmed, then solid up to the hovered point (future is faded)
+                this.ctx.globalAlpha = 0.25;
+                this.strokeLine(line, 0, lastIdx);
+                this.ctx.globalAlpha = 1;
+                this.strokeLine(line, 0, this.hoverIndex);
+            }
+            else {
+                this.strokeLine(line, 0, lastIdx);
+                // Endpoint dot when not hovering
+                for (let i = lastIdx; i >= 0; i--) {
+                    const coords = this.getPointCoords(line, i);
+                    if (coords) {
+                        this.ctx.fillStyle = line.color;
+                        this.ctx.beginPath();
+                        this.ctx.arc(coords.x, coords.y, 4, 0, Math.PI * 2);
+                        this.ctx.fill();
+                        break;
+                    }
+                }
+            }
+        });
+        this.ctx.globalAlpha = 1;
+        if (hovering) {
+            this.drawHoverHighlights();
+        }
+    }
+    drawHoverHighlights() {
+        this.hoverLabels.innerHTML = '';
+        const points = this.lines
+            .map((line) => ({
+            line,
+            hp: this.resolveHoverPoint(line, this.hoverIndex),
+        }))
+            .filter((p) => p.hp !== null);
+        // Dots sit exactly on the line.
+        points.forEach(({ line, hp }) => {
+            this.ctx.fillStyle = line.color;
+            this.ctx.beginPath();
+            this.ctx.arc(hp.x, hp.y, 4, 0, Math.PI * 2);
+            this.ctx.fill();
+        });
+        // Spread labels vertically so close values don't overlap. Sort by the
+        // line's y, then push each label down to keep a minimum gap.
+        const minGap = 16;
+        const labelY = new Map();
+        let lastY = -Infinity;
+        [...points]
+            .sort((a, b) => a.hp.y - b.hp.y)
+            .forEach(({ line, hp }) => {
+            const y = Math.max(hp.y, lastY + minGap);
+            labelY.set(line, y);
+            lastY = y;
+        });
+        // "<name> <value>%" labels as absolutely positioned DOM nodes so their
+        // length never shifts the chart coordinates.
+        points.forEach(({ line, hp }) => {
+            const label = document.createElement('span');
+            label.className = 'hover-label';
+            label.textContent = `${line.name} ${hp.value.toFixed(1)}%`;
+            label.style.color = line.color;
+            label.style.left = `${hp.x + 12}px`;
+            label.style.top = `${labelY.get(line)}px`;
+            this.hoverLabels.appendChild(label);
+        });
+    }
+    clearHoverLabels() {
+        if (this.hoverLabels) {
+            this.hoverLabels.innerHTML = '';
+        }
+    }
+    showHoverElements(x, dataIndex) {
+        if (dataIndex < 0 || dataIndex >= this.allDates.length) {
+            this.hoverLine.style.display = 'none';
+            this.tooltip.style.display = 'none';
+            this.clearHoverLabels();
+            this.resetLegendValues();
+            if (this.hoverIndex !== -1) {
+                this.hoverIndex = -1;
+                this.draw();
+            }
+            return;
+        }
+        this.hoverIndex = dataIndex;
+        this.draw();
+        this.updateLegendValues(dataIndex);
+        const chartHeight = this.height - this.padding.top - this.padding.bottom;
+        this.hoverLine.style.display = 'block';
+        this.hoverLine.style.left = `${x}px`;
+        this.hoverLine.style.top = `${this.padding.top}px`;
+        this.hoverLine.style.height = `${chartHeight}px`;
+        const dateStr = this.allDates[dataIndex];
+        const date = new Date(dateStr);
+        const monthNames = [
+            'JAN',
+            'FEB',
+            'MAR',
+            'APR',
+            'MAY',
+            'JUN',
+            'JUL',
+            'AUG',
+            'SEP',
+            'OCT',
+            'NOV',
+            'DEC',
+        ];
+        const hours = date.getHours();
+        const ampm = hours >= 12 ? 'PM' : 'AM';
+        const hours12 = hours % 12 === 0 ? 12 : hours % 12;
+        const formattedDate = `${monthNames[date.getMonth()]} ${date.getDate()}, ${hours12} ${ampm}`;
+        this.tooltip.textContent = formattedDate;
+        this.tooltip.style.display = 'block';
+        const tooltipRect = this.tooltip.getBoundingClientRect();
+        let tooltipX = x - tooltipRect.width / 2;
+        if (tooltipX < this.padding.left) {
+            tooltipX = this.padding.left;
+        }
+        if (tooltipX + tooltipRect.width > this.width - this.padding.right) {
+            tooltipX = this.width - this.padding.right - tooltipRect.width;
+        }
+        this.tooltip.style.left = `${tooltipX}px`;
+        this.tooltip.style.top = `${this.padding.top - 30}px`;
+    }
+    updateHover(x) {
+        const chartWidth = this.width - this.padding.left - this.padding.right;
+        const clampedX = Math.max(this.padding.left, Math.min(x, this.width - this.padding.right));
+        const dataIndex = Math.round(((clampedX - this.padding.left) / chartWidth) *
+            (this.allDates.length - 1));
+        this.showHoverElements(clampedX, dataIndex);
+    }
+    onMouseMove(event) {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        if (x >= this.padding.left &&
+            x <= this.width - this.padding.right &&
+            y >= this.padding.top &&
+            y <= this.height - this.padding.bottom) {
+            this.updateHover(x);
+        }
+        else {
+            this.onMouseLeave();
+        }
+    }
+    onTouchStart(event) {
+        this.handleTouch(event, false);
+    }
+    onTouchMove(event) {
+        this.handleTouch(event, true);
+    }
+    handleTouch(event, preventScroll) {
+        if (!event.touches || event.touches.length === 0)
+            return;
+        // While scrubbing (touchmove) stop the page from scrolling.
+        if (preventScroll && event.cancelable) {
+            event.preventDefault();
+        }
+        const rect = this.canvas.getBoundingClientRect();
+        const x = event.touches[0].clientX - rect.left;
+        this.updateHover(x);
+    }
+    onMouseLeave() {
+        this.hoverLine.style.display = 'none';
+        this.tooltip.style.display = 'none';
+        this.clearHoverLabels();
+        this.resetLegendValues();
+        if (this.hoverIndex !== -1) {
+            this.hoverIndex = -1;
+            this.draw();
+        }
+    }
+    handleResize() {
+        this.setupCanvas();
+        this.draw();
+    }
+    renderLegend() {
+        this.chartLegend.innerHTML = '';
+        this.legendValueEls = [];
+        this.lines.forEach((line) => {
+            const item = document.createElement('div');
+            item.className = 'legend-item';
+            const dot = document.createElement('span');
+            dot.className = 'legend-dot';
+            dot.style.backgroundColor = line.color;
+            const name = document.createElement('span');
+            name.className = 'legend-text';
+            name.textContent = line.name;
+            const value = document.createElement('span');
+            value.className = 'legend-value';
+            value.textContent = `${line.percentage.toFixed(1)}%`;
+            item.appendChild(dot);
+            item.appendChild(name);
+            item.appendChild(value);
+            this.chartLegend.appendChild(item);
+            this.legendValueEls.push(value);
+        });
+    }
+    /** Update legend values to those of the hovered point. */
+    updateLegendValues(index) {
+        this.lines.forEach((line, i) => {
+            const el = this.legendValueEls[i];
+            if (!el)
+                return;
+            const hoverPoint = this.resolveHoverPoint(line, index);
+            const value = hoverPoint ? hoverPoint.value : line.percentage;
+            el.textContent = `${value.toFixed(1)}%`;
+        });
+    }
+    /** Restore legend values to the default (current) percentages. */
+    resetLegendValues() {
+        this.lines.forEach((line, i) => {
+            const el = this.legendValueEls[i];
+            if (el) {
+                el.textContent = `${line.percentage.toFixed(1)}%`;
+            }
+        });
+    }
+    static initialize() {
+        if (typeof customElements !== 'undefined' &&
+            !customElements.get('multi-line-chart')) {
+            customElements.define('multi-line-chart', MultiLineChart);
+        }
+    }
+}
+exports.MultiLineChart = MultiLineChart;

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "multiline-chart",
+  "version": "1.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "node scripts/inject-styles.js && tsc"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}