@ixfx/components 0.2.2 → 0.2.4

package/dist/charts/plot.js

@@ -1,916 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.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 { Flow, 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;
-    #persistentScale;
-    #currentScaler;
-    constructor(name) {
-        this.name = name;
-        this.bounds = `auto`;
-        this.#persistentScale = Numbers.rangeInit();
-        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 === `auto`)
-            return this.computeActualRange(series);
-        if (this.bounds === `auto-persistent`) {
-            const r = this.computeActualRange(series);
-            this.#persistentScale = Numbers.rangeMergeRange(r, this.#persistentScale);
-            return this.#persistentScale;
-        }
-        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)
- * * max-length: number (default: 500). How many data points per series to store
- * * data-width: when streaming, how much horizontal width per point
- * * fixed-max/fixed-min: global input scaling (default: NaN, ie. disabled)
- *
- * * line-width: stroke width of drawing line (default:2)
- *
- * * render: 'dot', 'line' or 'bar'(default: 'dot')
- * * hide-legend: If added, legend is not shown
- * * manual-draw: If added, automatic drawning is disabled
- *
- * Styling variables
- * * --legend-fg: legend foreground text
- */
-let PlotElement = class PlotElement extends LitElement {
-    constructor() {
-        //@property({ attribute: `streaming`, type: Boolean })
-        //streaming = true;
-        super(...arguments);
-        this.hideLegend = false;
-        //@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`;
-        //@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.#autoSeriesColour = 0;
-        this.#hitboxes = [];
-        this.#seriesFormatting = new Map();
-        this.#swatchSize = 10;
-        this.canvasEl = createRef();
-        this.tooltipEl = createRef();
-        this.#drawThrottled = Flow.throttle(() => this.#drawImpl(), 100);
-        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;
-    #autoSeriesColour;
-    #hitboxes;
-    #seriesFormatting;
-    #swatchSize;
-    #drawThrottled;
-    setDrawDebounce(millis) {
-        this.#drawThrottled = Flow.throttle(() => this.#drawImpl(), millis);
-    }
-    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: 3
-                },
-                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
-     * PlotElement.fromQuery(`#someplot`); // PlotElement
-     * ```
-     *
-     * Throws an error if query does not match.
-     * @param query
-     * @returns
-     */
-    static fromQuery(query) {
-        const el = document.querySelector(query);
-        if (!el)
-            throw new Error(`Query does not match an element`);
-        if (el.nodeName === 'IXFX-PLOT-ELEMENT')
-            return el;
-        throw new Error(`Element is not a PlotElement ('${el.nodeName}')`);
-    }
-    /**
-     * Delete a series.
-     * Returns _true_ if there was a series to delete
-     * @param name
-     * @returns
-     */
-    deleteSeries(name) {
-        name = name.toLowerCase();
-        const s = this.#series.get(name);
-        if (!s)
-            return false;
-        this.#series.delete(name);
-        return true;
-    }
-    /**
-     * Keeps the series, but deletes its data
-     * @param name
-     * @returns
-     */
-    clearSeries(name) {
-        name = name.toLowerCase();
-        const s = this.#series.get(name);
-        if (!s)
-            return false;
-        this.#series.clear();
-        return true;
-    }
-    /**
-     * Delete all data & series
-     */
-    clear() {
-        this.#series.clear();
-        this.#autoSeriesColour = 0;
-    }
-    /**
-     * Keeps all series, but deletes their data
-     */
-    clearData() {
-        for (const s of this.#series.values()) {
-            s.clear();
-        }
-    }
-    #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 (hb.width <= 0)
-                continue;
-            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)
-            return this.#canvas;
-        const canvas = this.canvasEl.value; // this.shadowRoot?.querySelector(`canvas`);
-        if (!canvas)
-            throw new Error(`canvas element not found`);
-        const c = new CanvasHelper(canvas);
-        this.#canvas = c;
-        this.#drawing = Drawing.makeHelper(c.ctx);
-        return c;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-    }
-    firstUpdated(_changedProperties) {
-        const ro = new ResizeObserver((event) => {
-            const c = this.#setupCanvas();
-            if (!c)
-                return;
-            const entry = event[0];
-            c.setLogicalSize(entry.contentRect);
-            if (this.#hasDirty()) {
-                this.#drawImpl();
-            }
-        });
-        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`);
-    }
-    setRawValues(values, seriesName, automaticallyDraw) {
-        if (!Array.isArray(values))
-            throw new TypeError(`Param 'values' is not an array`);
-        let s = this.getOrCreateSeries(seriesName);
-        s.setRawValues(values, automaticallyDraw);
-        return s;
-    }
-    /**
-     * Treats each property of an object as the series name
-     * @param value
-     * @param automaticallyDraw
-     */
-    appendObjectBySeries(value, automaticallyDraw) {
-        for (const p of Pathed.getPathsAndData(value, true)) {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const v = p.value;
-            if (typeof v === `number`) {
-                this.appendRawValues(v, p.path, false);
-            }
-        }
-        if (automaticallyDraw)
-            this.draw();
-    }
-    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(force = false) {
-        if (force) {
-            this.#drawImpl();
-        }
-        else {
-            void this.#drawThrottled();
-        }
-    }
-    #drawImpl() {
-        if (this.paused)
-            return;
-        const c = this.#canvas;
-        const d = this.#drawing;
-        const padding = this.padding;
-        if (!d || !c) {
-            return;
-        }
-        c.clear();
-        const ctx = d.ctx;
-        const axisYwidth = this.computeAxisYWidth(c);
-        const remainingWidth = c.width - axisYwidth;
-        const clLegend = this.computeLegend(c, remainingWidth, padding);
-        const plotHeight = c.height - clLegend.bounds.height - padding;
-        const cy = { width: axisYwidth, height: plotHeight };
-        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();
-            ctx.translate(cl.x + padding, cl.y + padding);
-            this.drawLegend(cl, d);
-            ctx.restore();
-        }
-        ctx.save();
-        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()) {
-            switch (this.renderStyle) {
-                case `line`: {
-                    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(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;
-        const padding = this.padding;
-        let x = 0;
-        let y = padding;
-        const swatchSize = 10;
-        const ctx = d.ctx;
-        for (const series of this.#series.values()) {
-            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;
-            const m = ctx.measureText(series.name);
-            ctx.textBaseline = `middle`;
-            ctx.fillText(series.name, x, y + swatchSize / 2);
-            x += m.width + padding;
-            if (x >= cl.width) {
-                y += 10 + padding;
-                x = 0;
-            }
-        }
-    }
-    // #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;
-        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 - xOffset,
-                y: (1 - scaledValue) * h,
-                value, index
-            };
-        });
-        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;
-        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 - xOffset,
-                y: (1 - scaledValue) * h,
-                radius: radius,
-                value, index
-            };
-        });
-        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
-            };
-        });
-        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 } })
-    }
-    calculatePlotDataArea(c, plotHeight, axisYwidth, padding) {
-        return {
-            x: axisYwidth,
-            y: 0,
-            width: c.width - axisYwidth - padding - padding,
-            height: plotHeight - padding
-        };
-    }
-    computeAxisYWidth(_c) {
-        return 0;
-    }
-    computeLegend(c, maxWidth, padding) {
-        if (this.hideLegend) {
-            return {
-                bounds: { width: 0, height: 0 },
-                parts: []
-            };
-        }
-        const ctx = c.ctx;
-        const series = [...this.#series.values()];
-        let largestH = 0;
-        const sizes = series.map(s => {
-            let width = this.#swatchSize + padding;
-            const m = ctx.measureText(s.name);
-            width += m.width;
-            const height = m.emHeightAscent + m.emHeightDescent;
-            largestH = Math.max(height, largestH);
-            return {
-                width,
-                height
-            };
-        });
-        const parts = [];
-        let x = padding;
-        let y = padding;
-        let usedWidthMax = 0;
-        for (const s of sizes) {
-            parts.push({
-                x, y, ...s
-            });
-            x += s.width;
-            usedWidthMax = Math.max(x, usedWidthMax);
-            if (x >= maxWidth) {
-                x = padding;
-                y += largestH + padding;
-            }
-        }
-        const bounds = { width: usedWidthMax, height: y + largestH + padding };
-        return {
-            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"></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: `hide-legend`, type: Boolean })
-], PlotElement.prototype, "hideLegend", void 0);
-__decorate([
-    property({ attribute: `render`, type: String })
-], PlotElement.prototype, "renderStyle", void 0);
-__decorate([
-    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 {
-    #data = [];
-    #capacityLimit = Number.NaN;
-    #dirty = false;
-    #onPrimaryAxis = true;
-    constructor(name, plot) {
-        this.name = name;
-        this.plot = plot;
-    }
-    get length() {
-        return this.#data.length;
-    }
-    *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++;
-        }
-    }
-    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.#dirty = true;
-        if (automaticallyDraw)
-            this.plot.draw();
-    }
-    setValues(values, automaticallyDraw) {
-        if (!Array.isArray(values))
-            throw new TypeError(`Param 'values' is not an array`);
-        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);
-    }
-    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