@ixfx/components 0.1.5 → 0.2.0

package/dist/charts/plot.js

@@ -6,13 +6,75 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
-//import { property } from "lit/decorators/property.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { CanvasHelper } from "ixfx/visual.js";
+import { Rects } from "ixfx/geometry.js";
+import * as Arrays from 'ixfx/arrays.js';
 import * as Numbers from 'ixfx/numbers.js';
 import { getCssVariable } from 'ixfx/dom.js';
 import { Drawing, Colour } from "ixfx/visual.js";
 import { Pathed } from 'ixfx';
+const rangeIsEqual = (a, b) => {
+    if (a === undefined || b === undefined)
+        return false;
+    return (a.max === b.max && a.min === b.min);
+};
+export class PlotAxis {
+    // units: Readonly<{ major: number, minor: number }> = { major: Number.NaN, minor: Number.NaN }
+    // altAxisCrossing: AxisCrossing<T> = { at: `min` }
+    // ticks: TickMarks = { major: `inside`, minor: `inside` }
+    // labels: AxisLabels = `axis`;
+    #currentScalerRange;
+    #currentScaler;
+    constructor(name) {
+        this.name = name;
+        this.bounds = `automatic`;
+        this.#currentScaler = (v) => v;
+    }
+    humanFormatValue(value) {
+        if (value.length === 0)
+            return ``;
+        const v = value[0];
+        if (v < 2)
+            return v.toFixed(2);
+        return v.toString();
+    }
+    getRange(series) {
+        if (this.bounds === `automatic`)
+            return this.computeActualRange(series);
+        return this.bounds;
+    }
+    getCurrentRange() {
+        return this.#currentScalerRange;
+    }
+    getValueScaler(series) {
+        const r = this.getRange(series);
+        if (!rangeIsEqual(r, this.#currentScalerRange)) {
+            this.#currentScalerRange = r;
+            this.#currentScaler = Numbers.scaler(r.min, r.max, 0, 1);
+        }
+        return this.#currentScaler;
+    }
+    computeActualRange(seriesOnAxis, column = 0) {
+        let min = Number.MAX_SAFE_INTEGER;
+        let max = Number.MIN_SAFE_INTEGER;
+        let count = 0;
+        for (const s of seriesOnAxis) {
+            for (const [v, _index] of s.getValuesForColumn(column)) {
+                if (typeof v !== `number`)
+                    continue;
+                if (Number.isNaN(v))
+                    continue;
+                if (v < min)
+                    min = v;
+                if (v > max)
+                    max = v;
+            }
+            count++;
+        }
+        return { min, max };
+    }
+}
 /**
  * Attributes
  * * streaming: true/false (default: true)
@@ -22,7 +84,7 @@ import { Pathed } from 'ixfx';
  *
  * * line-width: stroke width of drawing line (default:2)
  *
- * * render: 'dot' or 'line' (default: 'dot')
+ * * render: 'dot', 'line' or 'bar'(default: 'dot')
  * * hide-legend: If added, legend is not shown
  * * manual-draw: If added, automatic drawning is disabled
  *
@@ -31,36 +93,107 @@ import { Pathed } from 'ixfx';
  */
 let PlotElement = class PlotElement extends LitElement {
     constructor() {
+        //@property({ attribute: `streaming`, type: Boolean })
+        //streaming = true;
         super(...arguments);
-        this.streaming = true;
         this.hideLegend = false;
-        this.maxLength = 500;
-        this.dataWidth = 5;
-        this.fixedMax = Number.NaN;
-        this.fixedMin = Number.NaN;
-        this.lineWidth = 2;
+        //@property({ attribute: `max-length`, type: Number })
+        //maxLength = 500;
+        //@property({ attribute: `data-width`, type: Number })
+        //dataWidth = 5;
+        //@property({ attribute: `fixed-max`, type: Number })
+        //fixedMax = Number.NaN;
+        //@property({ attribute: `fixed-min`, type: Number })
+        //fixedMin = Number.NaN;
+        //@property({ attribute: `line-width`, type: Number })
+        //lineWidth = 2;
         this.renderStyle = `dot`;
-        this.manualDraw = false;
+        //@property({ attribute: `manual-draw`, type: Boolean })
+        //manualDraw = false;
         this.padding = 5;
+        this.primaryAxis = new PlotAxis(`primary`);
+        this.secondaryAxis = new PlotAxis(`secondary`);
         this.paused = false;
+        this.plotAreaFormat = {
+            fill: { type: `none` },
+            outline: { type: `none` }
+        };
+        /**
+         * Settings used for automatically generating series colour
+         */
+        this.automaticSeriesColour = {
+            saturation: 1,
+            lightness: 0.5,
+            alpha: 1
+        };
+        this.seriesDefault = {};
         this.#series = new Map();
         this.#legendColour = ``;
-        this.#hue = 0;
-        this.canvasEl = createRef();
-        this.seriesRanges = new Map();
+        this.#autoSeriesColour = 0;
+        this.#hitboxes = [];
+        this.#seriesFormatting = new Map();
         this.#swatchSize = 10;
+        this.canvasEl = createRef();
+        this.tooltipEl = createRef();
+        this.seriesColourGenerate = (_seriesName) => {
+            const c = Colour.goldenAngleColour(this.#autoSeriesColour, this.automaticSeriesColour.saturation, this.automaticSeriesColour.lightness, this.automaticSeriesColour.alpha);
+            this.#autoSeriesColour++;
+            return c;
+        };
     }
     #series;
     #canvas;
     #drawing;
     #legendColour;
-    #hue;
+    #autoSeriesColour;
+    #hitboxes;
+    #seriesFormatting;
+    #swatchSize;
     get series() {
         return [...this.#series.values()];
     }
     get seriesCount() {
         return this.#series.size;
     }
+    getSeriesFormatting(seriesName, createIfNeeded) {
+        let f = this.#seriesFormatting.get(seriesName);
+        if (!f && createIfNeeded) {
+            f = {
+                axis: `primary`,
+                fill: {
+                    colour: this.seriesColourGenerate(seriesName),
+                    type: `solid`
+                },
+                outline: {
+                    type: `none`
+                },
+                bar: {
+                    gapWidth: 10
+                },
+                dot: {
+                    gapWidth: 0,
+                    radius: `automatic`
+                },
+                line: {
+                    width: 2,
+                    cap: `round`,
+                    join: `round`
+                }
+            };
+            this.#seriesFormatting.set(seriesName, f);
+        }
+        return f;
+    }
+    setSeriesFormatting(seriesName, formatting) {
+        let existing = this.getSeriesFormatting(seriesName, true);
+        const combined = {
+            ...existing,
+            ...formatting
+        };
+        combined.fill = resolveFillDrawStyle(combined.fill);
+        combined.outline = resolveOutlineDrawStyle(combined.outline);
+        this.#seriesFormatting.set(seriesName, combined);
+    }
     /**
      * Returns a `PlotElement` instance based on a query
      * ```js
@@ -111,6 +244,7 @@ let PlotElement = class PlotElement extends LitElement {
      */
     clear() {
         this.#series.clear();
+        this.#autoSeriesColour = 0;
     }
     /**
      * Keeps all series, but deletes their data
@@ -120,8 +254,54 @@ let PlotElement = class PlotElement extends LitElement {
             s.clear();
         }
     }
-    render() {
-        return html `<canvas ${ref(this.canvasEl)}></canvas>`;
+    #lastPointerPosition;
+    #onPointerLeave() {
+        this.#lastPointerPosition = undefined;
+        this.#hideTooltip();
+    }
+    #onPointerMove(event) {
+        this.#lastPointerPosition = {
+            x: event.offsetX,
+            screenX: event.x,
+            y: event.offsetY,
+            screenY: event.y
+        };
+        this.#updateToolTip();
+    }
+    #updateToolTip() {
+        if (!this.#lastPointerPosition)
+            return;
+        for (const hb of this.#hitboxes) {
+            if (Rects.intersectsPoint(hb, this.#lastPointerPosition)) {
+                if (hb.value) {
+                    this.#setTooltip(hb.series.humanFormatValue(hb.value));
+                }
+                else {
+                    this.#setTooltip(``);
+                }
+                return;
+            }
+        }
+        this.#hideTooltip();
+    }
+    #hideTooltip() {
+        const v = this.tooltipEl.value;
+        if (!v)
+            return;
+        v.classList.add(`hidden`);
+    }
+    #setTooltip(innerHtml) {
+        const v = this.tooltipEl.value;
+        if (!v)
+            return;
+        const pos = this.#lastPointerPosition;
+        v.classList.remove(`hidden`);
+        const offset = 10;
+        v.innerHTML = innerHtml;
+        if (pos) {
+            v.style.left = `${pos.screenX + offset}px`;
+            v.style.top = `${pos.screenY + offset}px`;
+        }
     }
     #setupCanvas() {
         if (this.#canvas !== undefined)
@@ -138,62 +318,91 @@ let PlotElement = class PlotElement extends LitElement {
         super.connectedCallback();
     }
     firstUpdated(_changedProperties) {
-        // const canvas = this.canvasEl.value!;
         const ro = new ResizeObserver((event) => {
             const c = this.#setupCanvas();
             if (!c)
                 return;
             const entry = event[0];
             c.setLogicalSize(entry.contentRect);
+            if (this.#hasDirty())
+                this.draw();
         });
         ro.observe(this);
         this.updateColours();
+        //this.#setupCanvas();
+    }
+    #hasDirty() {
+        for (const s of this.series.values()) {
+            if (s.isDirty)
+                return true;
+        }
+        return false;
     }
     updateColours() {
         this.#legendColour = getCssVariable(`legend-fg`, `black`);
     }
-    plot(value, seriesName = ``, skipDrawing = false) {
-        if (typeof value !== 'number')
-            throw new TypeError(`Can only add numbers. Got: ${typeof value}`);
-        let s = this.#series.get(seriesName.toLowerCase());
-        if (s === undefined) {
-            s = new PlotSeries(seriesName, this.colourGenerator(seriesName), this);
-            this.#series.set(seriesName.toLowerCase(), s);
-        }
-        s.push(value);
-        if (!this.manualDraw && !skipDrawing)
-            this.draw();
-        return s;
-    }
-    plotSeries(values, seriesName = ``, skipDrawing = false) {
+    //plot(value: number, seriesName = ``, skipDrawing = false) {
+    // plotValue(primary: number | string, secondary: number | string, seriesName: string, skipDrawing = false) {
+    //   //if (typeof primary !== 'number' && typeof primary !== `string`) throw new TypeError(`Can only add numbers. Got: ${ typeof value }`);
+    //   let s = this.#series.get(seriesName.toLowerCase());
+    //   if (s === undefined) {
+    //     s = new PlotSeries(seriesName, this);
+    //     this.#series.set(seriesName.toLowerCase(), s);
+    //   }
+    //   const v: DataValue = { primary, secondary };
+    //   //s.push(value);
+    //   s.pushValue(v)
+    //   if (!this.manualDraw && !skipDrawing) this.draw();
+    //   return s;
+    // }
+    setRawValues(values, seriesName, automaticallyDraw) {
         if (!Array.isArray(values))
             throw new TypeError(`Param 'values' is not an array`);
-        let s = this.#series.get(seriesName.toLowerCase());
-        if (s === undefined) {
-            s = new PlotSeries(seriesName, this.colourGenerator(seriesName), this);
-            this.#series.set(seriesName.toLowerCase(), s);
-        }
-        s.setValues(values);
-        if (!this.manualDraw && !skipDrawing)
-            this.draw();
+        let s = this.getOrCreateSeries(seriesName);
+        s.setRawValues(values, automaticallyDraw);
         return s;
     }
     /**
-     * Draw a set of key-value pairs as a batch.
+     * Treats each property of an object as the series name
      * @param value
+     * @param automaticallyDraw
      */
-    plotObject(value) {
+    appendObjectBySeries(value, automaticallyDraw) {
         for (const p of Pathed.getPathsAndData(value, true)) {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            this.plot(p.value, p.path, true);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const v = p.value;
+            if (typeof v === `number`) {
+                this.appendRawValues(v, p.path, false);
+            }
         }
-        this.draw();
+        if (automaticallyDraw)
+            this.draw();
     }
-    colourGenerator(_series) {
-        const c = Colour.HslSpace.scalar(this.#hue, 0.9, 0.4);
-        this.#hue = Numbers.wrap(this.#hue + 0.1);
-        return c;
+    appendRawValues(values, seriesName, automaticallyDraw) {
+        if (!Array.isArray(values))
+            values = [values];
+        let s = this.getOrCreateSeries(seriesName);
+        for (const v of values) {
+            s.pushValue(v, false);
+        }
+        if (automaticallyDraw)
+            this.draw();
     }
+    /**
+     * Draw a set of key-value pairs as a batch.
+     * @param value
+     */
+    // plotObject(value: object) {
+    //   for (const p of Pathed.getPathsAndData(value, true)) {
+    //     this.plot(p.value, p.path, true);
+    //   }
+    //   this.draw();
+    // }
+    // colourGenerator(_series: string): Colour.Colourish {
+    //   const c = Colour.HslSpace.scalar(this.#hue, 0.9, 0.4);
+    //   this.#hue = Numbers.wrap(this.#hue + 0.1);
+    //   return c;
+    // }
     draw() {
         if (this.paused)
             return;
@@ -206,16 +415,11 @@ let PlotElement = class PlotElement extends LitElement {
         const ctx = d.ctx;
         const axisYwidth = this.computeAxisYWidth(c);
         const remainingWidth = c.width - axisYwidth;
-        // Legend across bottom
         const clLegend = this.computeLegend(c, remainingWidth, padding);
         const plotHeight = c.height - clLegend.bounds.height - padding;
         const cy = { width: axisYwidth, height: plotHeight };
-        const cp = this.computePlot(c, plotHeight, cy.width, padding);
-        const cl = { ...clLegend.bounds, x: cy.width, y: cp.y + cp.height + padding };
-        let globalScaler;
-        if (!Number.isNaN(this.fixedMax) && !Number.isNaN(this.fixedMin)) {
-            globalScaler = Numbers.scaler(this.fixedMin, this.fixedMax);
-        }
+        const plotDataArea = this.calculatePlotDataArea(c, plotHeight, cy.width, padding);
+        const cl = { ...clLegend.bounds, x: cy.width, y: plotDataArea.y + plotDataArea.height + padding };
         // Draw legend
         if (!this.hideLegend) {
             ctx.save();
@@ -224,28 +428,38 @@ let PlotElement = class PlotElement extends LitElement {
             ctx.restore();
         }
         ctx.save();
-        ctx.translate(cp.x + padding, cp.y + padding);
-        //ctx.fillStyle = `whitesmoke`;
-        //ctx.fillRect(0, 0, cp.width, cp.height);
+        ctx.translate(plotDataArea.x + padding, plotDataArea.y + padding);
+        if (this.plotAreaFormat.fill.type === `solid`) {
+            ctx.fillStyle = Colour.resolveCss(this.plotAreaFormat.fill.colour);
+            ctx.fillRect(0, 0, plotDataArea.width, plotDataArea.height);
+        }
+        if (this.plotAreaFormat.outline.type === `solid`) {
+            ctx.strokeStyle = Colour.resolveCss(this.plotAreaFormat.outline.colour);
+            ctx.strokeRect(0, 0, plotDataArea.width, plotDataArea.height);
+        }
+        // Compute axis scaling
+        const primaryAxisS = this.primaryAxis.getValueScaler(this.#series.values().filter(s => s.onPrimaryAxis));
+        const secondaryAxisAxisS = this.secondaryAxis.getValueScaler(this.#series.values().filter(s => !s.onPrimaryAxis));
         // Draw data
+        this.#hitboxes = [];
         for (const series of this.#series.values()) {
-            const seriesScale = this.seriesRanges.get(series.name);
-            const data = seriesScale === undefined ? (globalScaler === undefined ?
-                series.getScaled() :
-                series.getScaledBy(globalScaler)) :
-                series.getScaledBy(Numbers.scaler(seriesScale[0], seriesScale[1]));
-            const colour = Colour.toCssColour(series.colour);
             switch (this.renderStyle) {
                 case `line`: {
-                    this.drawLineSeries(data, cp, d, colour);
+                    this.#drawLineSeries(series, d, series.onPrimaryAxis ? primaryAxisS : secondaryAxisAxisS, plotDataArea, { x: padding, y: padding });
+                    break;
+                }
+                case `bar`: {
+                    this.#drawBarSeries(series, d, series.onPrimaryAxis ? primaryAxisS : secondaryAxisAxisS, plotDataArea, { x: padding, y: padding });
                     break;
                 }
                 default: {
-                    this.drawDotSeries(data, cp, d, colour);
+                    this.#drawDotSeries(series, d, series.onPrimaryAxis ? primaryAxisS : secondaryAxisAxisS, plotDataArea, { x: padding, y: padding });
                 }
             }
+            series.isDirty = false;
         }
         ctx.restore();
+        this.#updateToolTip();
     }
     drawLegend(cl, d) {
         const textColour = this.#legendColour;
@@ -255,7 +469,9 @@ let PlotElement = class PlotElement extends LitElement {
         const swatchSize = 10;
         const ctx = d.ctx;
         for (const series of this.#series.values()) {
-            ctx.fillStyle = Colour.toCssColour(series.colour);
+            const f = series.getFormatting();
+            const colour = (f.fill.type === `solid`) ? f.fill.colour : `transparent`;
+            ctx.fillStyle = Colour.toCssColour(colour);
             ctx.fillRect(x, y, swatchSize, swatchSize);
             ctx.fillStyle = textColour;
             x += swatchSize + padding;
@@ -269,63 +485,195 @@ let PlotElement = class PlotElement extends LitElement {
             }
         }
     }
-    drawLineSeries(data, cp, d, colour) {
-        const pointWidth = this.streaming ? this.dataWidth : (cp.width / data.length);
+    // #drawBarSeries(data: number[], cp: Rect, d: DrawingHelper, series: PlotSeries) {
+    //   const barWidth = this.streaming ? this.dataWidth : (cp.width / data.length);
+    //   const formatting = series.getFormatting();
+    //   let x = 0;
+    //   if (this.streaming) x = cp.width - (barWidth * data.length);
+    //   const rects = data.map(d => {
+    //     x += barWidth;
+    //     const h = (d) * cp.height;
+    //     return {
+    //       x: x,
+    //       y: cp.height - h,
+    //       height: h,
+    //       width: barWidth,
+    //       value: d
+    //     };
+    //   })
+    //   this.#hitboxes = rects.map(r => {
+    //     return {
+    //       ...r,
+    //       series: series.name
+    //     }
+    //   })
+    //   let drawOptions: { stroke: boolean, filled: boolean, strokeWidth?: number, strokeStyle?: string, fillStyle?: string } = {
+    //     stroke: false,
+    //     filled: false
+    //   }
+    //   if (formatting.outline.type === `solid`) {
+    //     drawOptions.stroke = true;
+    //     drawOptions.strokeStyle = formatting.outline.colour;
+    //     drawOptions.strokeWidth = 1;
+    //   }
+    //   if (formatting.fill.type === `solid`) {
+    //     drawOptions.filled = true;
+    //     drawOptions.fillStyle = formatting.fill.colour;
+    //   }
+    //   d.rect(rects, drawOptions);
+    // }
+    #drawLineSeries(series, d, scaler, plotDataArea, plotDataAreaOffset) {
+        const formatting = series.getFormatting();
+        const lineFormatting = formatting.line;
+        const widthPerValue = plotDataArea.width / series.length;
+        const xOffset = widthPerValue / 2;
+        const lineThickness = lineFormatting.width;
+        const lineThicknessHalf = lineThickness / 2;
+        const h = plotDataArea.height;
         let x = 0;
-        if (this.streaming)
-            x = cp.width - (pointWidth * data.length);
-        const pos = data.map(d => {
-            x += pointWidth;
+        const dotsToDraw = [...series.getValuesForColumn(0)].map(d => {
+            const [value, index] = d;
+            x += widthPerValue;
+            const scaledValue = scaler(value);
+            if (Number.isNaN(value))
+                return undefined;
             return {
-                x: x,
-                y: (1 - d) * cp.height,
-                radius: pointWidth
+                x: x - xOffset,
+                y: (1 - scaledValue) * h,
+                value, index
             };
         });
-        // Ignore points off the screen
-        const trimmed = pos.filter(p => {
-            if (p.x < 0)
-                return false;
-            return true;
-        });
-        d.connectedPoints(trimmed, {
-            strokeStyle: colour,
-            lineWidth: this.lineWidth
-        });
-    }
-    drawDotSeries(data, cp, d, colour) {
-        const pointWidth = this.streaming ? this.dataWidth : cp.width / data.length;
+        const filtered = dotsToDraw.filter(f => f !== undefined);
+        const hitboxes = filtered.map(d => ({
+            height: lineThickness,
+            width: widthPerValue,
+            x: plotDataAreaOffset.x + d.x - lineThicknessHalf,
+            y: plotDataAreaOffset.y + d.y - lineThicknessHalf,
+            series,
+            index: d.index,
+            value: series.getValue(d.index),
+        }));
+        this.#hitboxes.push(...hitboxes);
+        const drawOpts = {
+            filled: false,
+            fillStyle: `transparent`,
+            stroked: true,
+            strokeStyle: `black`,
+            strokeWidth: lineFormatting.width
+        };
+        if (formatting.outline.type === `solid`) {
+            drawOpts.strokeStyle = formatting.outline.colour;
+        }
+        else if (formatting.fill.type === `solid`) {
+            drawOpts.strokeStyle = formatting.fill.colour;
+        }
+        d.ctx.lineWidth = lineFormatting.width;
+        d.ctx.lineCap = lineFormatting.cap;
+        d.ctx.lineJoin = lineFormatting.join;
+        d.connectedPoints(filtered, drawOpts);
+        //d.textBlock([ `hello` ], { fillStyle: `black`, anchor: { x: 1, y: 1 } })
+    }
+    #drawDotSeries(series, d, scaler, plotDataArea, plotDataAreaOffset) {
+        const formatting = series.getFormatting();
+        const dotFormatting = formatting.dot;
+        const widthPerValue = plotDataArea.width / series.length;
+        const radius = dotFormatting.radius === `automatic` ? widthPerValue * 0.3 : dotFormatting.radius;
+        const xOffset = widthPerValue / 2;
+        const h = plotDataArea.height;
         let x = 0;
-        if (this.streaming)
-            x = cp.width - (pointWidth * data.length);
-        const pos = data.map(d => {
-            x += pointWidth;
+        const dotsToDraw = [...series.getValuesForColumn(0)].map(d => {
+            const [value, index] = d;
+            x += widthPerValue;
+            const scaledValue = scaler(value);
+            if (Number.isNaN(value))
+                return undefined;
             return {
-                x,
-                y: (1 - d) * cp.height,
-                radius: pointWidth
+                x: x - xOffset,
+                y: (1 - scaledValue) * h,
+                radius: radius,
+                value, index
             };
         });
-        // Ignore points off the screen
-        const trimmed = pos.filter(p => {
-            if (p.x < 0)
-                return false;
-            return true;
+        const filtered = dotsToDraw.filter(f => f !== undefined);
+        const hitboxes = filtered.map(d => ({
+            height: d.radius * 2,
+            width: d.radius * 2,
+            x: plotDataAreaOffset.x + d.x - d.radius,
+            y: plotDataAreaOffset.y + d.y - d.radius,
+            series,
+            index: d.index,
+            value: series.getValue(d.index),
+        }));
+        this.#hitboxes.push(...hitboxes);
+        const drawOpts = { filled: false, fillStyle: `transparent`, stroked: false, strokeStyle: `transparent` };
+        if (formatting.fill.type === `solid`) {
+            drawOpts.filled = true;
+            drawOpts.fillStyle = formatting.fill.colour;
+        }
+        if (formatting.outline.type === `solid`) {
+            drawOpts.stroked = true;
+            drawOpts.strokeStyle = formatting.outline.colour;
+        }
+        d.dot(filtered, drawOpts);
+        //d.textBlock([ `hello` ], { fillStyle: `black`, anchor: { x: 1, y: 1 } })
+    }
+    #drawBarSeries(series, d, scaler, plotDataArea, plotDataAreaOffset) {
+        const formatting = series.getFormatting();
+        const barFormatting = formatting.bar;
+        const widthPerValue = plotDataArea.width / series.length;
+        const rectWidth = widthPerValue - (barFormatting.gapWidth / 2);
+        const xOffset = widthPerValue / 2;
+        const h = plotDataArea.height;
+        let x = 0;
+        const rectsToDraw = [...series.getValuesForColumn(0)].map(d => {
+            const [value, index] = d;
+            x += widthPerValue;
+            const scaledValue = scaler(value);
+            if (Number.isNaN(value))
+                return undefined;
+            const barHeight = scaledValue * h;
+            return {
+                x: x - xOffset,
+                y: h - barHeight,
+                width: rectWidth,
+                height: barHeight,
+                value, index
+            };
         });
-        d.dot(trimmed, { filled: true, fillStyle: colour });
+        const filtered = rectsToDraw.filter(f => f !== undefined);
+        const hitboxes = filtered.map(d => ({
+            height: Math.max(5, d.height),
+            width: d.width,
+            x: plotDataAreaOffset.x + d.x,
+            y: plotDataAreaOffset.y + d.y,
+            series,
+            index: d.index,
+            value: series.getValue(d.index),
+        }));
+        this.#hitboxes.push(...hitboxes);
+        const drawOpts = { filled: false, fillStyle: `transparent`, stroked: false, strokeStyle: `transparent` };
+        if (formatting.fill.type === `solid`) {
+            drawOpts.filled = true;
+            drawOpts.fillStyle = formatting.fill.colour;
+        }
+        if (formatting.outline.type === `solid`) {
+            drawOpts.stroked = true;
+            drawOpts.strokeStyle = formatting.outline.colour;
+        }
+        d.rect(filtered, drawOpts);
+        //d.textBlock([ `hello` ], { fillStyle: `black`, anchor: { x: 1, y: 1 } })
     }
-    computePlot(c, plotHeight, axisYwidth, padding) {
+    calculatePlotDataArea(c, plotHeight, axisYwidth, padding) {
         return {
             x: axisYwidth,
             y: 0,
-            width: c.width - axisYwidth - padding,
-            height: plotHeight - padding - padding
+            width: c.width - axisYwidth - padding - padding,
+            height: plotHeight - padding
         };
     }
     computeAxisYWidth(_c) {
         return 0;
     }
-    #swatchSize;
     computeLegend(c, maxWidth, padding) {
         if (this.hideLegend) {
             return {
@@ -367,109 +715,207 @@ let PlotElement = class PlotElement extends LitElement {
             bounds, parts
         };
     }
+    getOrCreateSeries(name) {
+        let s = this.#series.get(name.toLowerCase());
+        if (s)
+            return s;
+        s = new PlotSeries(name, this);
+        const seriesDefault = {
+            limit: Number.NaN,
+            ...this.seriesDefault
+        };
+        if (!Number.isNaN(seriesDefault.limit)) {
+            s.setCapacityLimit(seriesDefault.limit);
+        }
+        this.#series.set(name.toLowerCase(), s);
+        return s;
+    }
     getSeries(name) {
         return this.#series.get(name);
     }
+    render() {
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        return html `<canvas @pointerleave="${this.#onPointerLeave}" @pointermove="${this.#onPointerMove}" ${ref(this.canvasEl)}></canvas><div class="hidden" ${ref(this.tooltipEl)} id="tooltip">Tooltip!</div>`;
+    }
     static { this.styles = css `
   :host {
     width: 100%;
     height: 100%;
     display: block;
   }
+
+  #tooltip {
+    border: 1px solid black;
+    background: white;
+    color: black;
+    padding: 0.3em;
+    font-size: 10px;
+    display: inline-block;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    opacity:1;
+    pointer-events: none;
+  }
+
+  .hidden {
+    opacity:0 !important;
+  }
   `; }
 };
-__decorate([
-    property({ attribute: `streaming`, type: Boolean })
-], PlotElement.prototype, "streaming", void 0);
 __decorate([
     property({ attribute: `hide-legend`, type: Boolean })
 ], PlotElement.prototype, "hideLegend", void 0);
-__decorate([
-    property({ attribute: `max-length`, type: Number })
-], PlotElement.prototype, "maxLength", void 0);
-__decorate([
-    property({ attribute: `data-width`, type: Number })
-], PlotElement.prototype, "dataWidth", void 0);
-__decorate([
-    property({ attribute: `fixed-max`, type: Number })
-], PlotElement.prototype, "fixedMax", void 0);
-__decorate([
-    property({ attribute: `fixed-min`, type: Number })
-], PlotElement.prototype, "fixedMin", void 0);
-__decorate([
-    property({ attribute: `line-width`, type: Number })
-], PlotElement.prototype, "lineWidth", void 0);
 __decorate([
     property({ attribute: `render`, type: String })
 ], PlotElement.prototype, "renderStyle", void 0);
 __decorate([
-    property({ attribute: `manual-draw`, type: Boolean })
-], PlotElement.prototype, "manualDraw", void 0);
+    property({ attribute: `padding`, type: Number })
+], PlotElement.prototype, "padding", void 0);
 PlotElement = __decorate([
     customElement(`ixfx-plot-element`)
 ], PlotElement);
 export { PlotElement };
+const resolveFillDrawStyle = (s) => {
+    if (s.type === `none`)
+        return s;
+    const c = Colour.resolveCss(s.colour);
+    return {
+        type: `solid`,
+        colour: c
+    };
+};
+const resolveOutlineDrawStyle = (s) => {
+    if (s.type === `none`)
+        return s;
+    const c = Colour.resolveCss(s.colour);
+    return {
+        ...s,
+        colour: c
+    };
+};
+//export type Range = { min: number, max: number }
+// const initRange = (): Range => ({ min: Number.MAX_SAFE_INTEGER, max: Number.MIN_SAFE_INTEGER });
+// function computeRangeWithNewValue(v: number | undefined, prev: Range): Range {
+//   if (typeof v === `number`) {
+//     // Skip creating an object if it's in range
+//     if (v >= prev.min && v <= prev.max) return prev;
+//     return {
+//       min: Math.min(v, prev.min),
+//       max: Math.max(v, prev.max),
+//     }
+//   }
+//   return prev;
+// }
+// function computeMergedRange(newRange: Range, existingRange: Range): Range {
+//   if (newRange.max <= existingRange.max && newRange.min >= existingRange.min) return existingRange;
+//   return {
+//     min: Math.min(newRange.min, existingRange.min),
+//     max: Math.max(newRange.max, existingRange.max)
+//   }
+// }
 export class PlotSeries {
-    constructor(name, colour, plot) {
+    #data = [];
+    #capacityLimit = Number.NaN;
+    #dirty = false;
+    #onPrimaryAxis = true;
+    constructor(name, plot) {
         this.name = name;
-        this.colour = colour;
         this.plot = plot;
-        this.data = [];
-        this.minSeen = Number.MAX_SAFE_INTEGER;
-        this.maxSeen = Number.MIN_SAFE_INTEGER;
     }
-    clear() {
-        this.data = [];
-        this.resetScale();
+    get length() {
+        return this.#data.length;
     }
-    /**
-     * Returns a copy of the data scaled by the current
-     * range of the data
-     * @returns
-     */
-    getScaled() {
-        //const r = this.maxSeen - this.minSeen;
-        let min = this.minSeen;
-        let max = this.maxSeen;
-        if (Number.isNaN(min))
-            min = 0;
-        if (Number.isNaN(max))
-            max = 1;
-        const s = Numbers.scaler(min, max);
-        return this.getScaledBy(s);
-    }
-    getScaledBy(scaler) {
-        return this.data.map(v => {
-            if (typeof v !== `number`)
-                throw new Error(`Data should just be numbers. Got: ${typeof v}`);
-            if (Number.isNaN(v))
-                throw new Error(`data contains NaN`);
-            const scaled = scaler(v);
-            if (Number.isNaN(scaled))
-                throw new Error(`NaN. v: ${v} scaled: ${scaled}`);
-            return Numbers.clamp(scaled);
-        });
+    *getValuesForColumn(column) {
+        let index = 0;
+        for (const dv of this.#data) {
+            if (dv && column in dv) {
+                yield [dv[column], index];
+            }
+            else {
+                yield [Number.NaN, index];
+            }
+            index++;
+        }
     }
-    push(value) {
-        if (typeof value !== 'number')
-            throw new Error(`Can only add numbers. Got: ${typeof value}`);
-        this.data.push(value);
-        if (this.data.length > this.plot.maxLength && this.plot.streaming) {
-            this.data = this.data.slice(1);
+    getValue(index) {
+        return this.#data[index];
+    }
+    pushValue(value, automaticallyDraw) {
+        if (!Array.isArray(value)) {
+            value = [value];
+        }
+        if (value.length === 0)
+            throw new Error(`Param 'value' is empty. Expected a value or array of value components`);
+        this.#data.push(value);
+        if (!Number.isNaN(this.#capacityLimit)) {
+            this.#data = Arrays.ensureLength(this.#data, this.#capacityLimit, `undefined`, `from-start`);
         }
-        this.minSeen = Math.min(this.minSeen, value);
-        this.maxSeen = Math.max(this.maxSeen, value);
+        this.#dirty = true;
+        if (automaticallyDraw)
+            this.plot.draw();
     }
-    setValues(values) {
+    setValues(values, automaticallyDraw) {
         if (!Array.isArray(values))
             throw new TypeError(`Param 'values' is not an array`);
-        this.data = values;
-        this.minSeen = Math.min(...values);
-        this.maxSeen = Math.max(...values);
+        this.#data = Arrays.ensureLength(values, this.#capacityLimit, `undefined`);
+        //this.#updateRanges();
+        this.#dirty = true;
+        if (automaticallyDraw)
+            this.plot.draw();
+    }
+    humanFormatValue(value) {
+        let v = `${this.name} `;
+        if (this.onPrimaryAxis) {
+            v += this.plot.primaryAxis.humanFormatValue(value);
+        }
+        else {
+            v += this.plot.secondaryAxis.humanFormatValue(value);
+        }
+        return v;
+    }
+    setRawValues(values, automaticallyDraw) {
+        this.setValues(values.map(v => [v]), automaticallyDraw);
+    }
+    setCapacityLimit(v) {
+        if (typeof v !== `number`)
+            throw new TypeError(`Expect type number. Got: ${typeof v}`);
+        if (!Number.isFinite(v)) {
+            throw new TypeError(`Param 'v' is not finite`);
+        }
+        if (Number.isNaN(v)) {
+            throw new TypeError(`Param 'v' is NaN`);
+        }
+        this.#capacityLimit = v;
+        this.#data = Arrays.ensureLength(this.#data, this.#capacityLimit, `undefined`);
+    }
+    unsetCapacityLimit() {
+        this.#capacityLimit = Number.NaN;
+    }
+    setFormatting(formatting) {
+        this.plot.setSeriesFormatting(this.name, formatting);
     }
-    resetScale() {
-        this.minSeen = Number.MAX_SAFE_INTEGER;
-        this.maxSeen = Number.MIN_SAFE_INTEGER;
+    getFormatting() {
+        return this.plot.getSeriesFormatting(this.name, true);
+    }
+    get isDirty() {
+        return this.#dirty;
+    }
+    set isDirty(value) {
+        this.#dirty = value;
+    }
+    get onPrimaryAxis() {
+        return this.#onPrimaryAxis;
+    }
+    set onPrimaryAxis(value) {
+        if (value === this.#onPrimaryAxis)
+            return;
+        this.#onPrimaryAxis = value;
+        this.#dirty = true;
+    }
+    clear() {
+        this.#data = [];
+        this.#dirty = true;
     }
 }
 //# sourceMappingURL=plot.js.map