@ixfx/components 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 CH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# components
+ 

package/dist/charts/frequency-histogram-plot.d.ts

@@ -0,0 +1,33 @@
+import type { HistogramVis } from "./histogram-vis.js";
+/**
+ * Creates and drives a HistogramVis instance.
+ * Data should be an outer array containing two-element arrays for each
+ * data point. The first element of the inner array is expected to be the key, the second the frequency.
+ * For example,  `[`apples`, 2]` means the key `apples` was counted twice.
+ *
+ * Usage:
+ * .sortBy() automatically sorts prior to visualisation. By default off.
+ * .update(data) full set of data to plot
+ * .clear() empties plot - same as calling `update([])`
+ * .el - The `HistogramVis` instance, or undefined if not created/disposed
+ *
+ * ```
+ * const plot = new FrequencyHistogramPlot(document.getElementById('histogram'));
+ * plot.sortBy('key'); // Automatically sort by key
+ * ...
+ * plot.update([[`apples`, 2], [`oranges', 0], [`bananas`, 5]])
+ * ```
+ *
+ * @export
+ * @class FrequencyHistogramPlot
+ */
+export declare class FrequencyHistogramPlot {
+    #private;
+    readonly el: HistogramVis | undefined;
+    constructor(el: HistogramVis);
+    setAutoSort(sortStyle: `value` | `value-reverse` | `key` | `key-reverse`): void;
+    clear(): void;
+    dispose(): void;
+    update(data: readonly (readonly [key: string, count: number])[]): void;
+}
+//# sourceMappingURL=frequency-histogram-plot.d.ts.map

package/dist/charts/frequency-histogram-plot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frequency-histogram-plot.d.ts","sourceRoot":"","sources":["../../src/charts/frequency-histogram-plot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,sBAAsB;;IAClC,QAAQ,CAAC,EAAE,EAAE,YAAY,GAAG,SAAS,CAAC;gBAE1B,EAAE,EAAE,YAAY;IAI5B,WAAW,CACV,SAAS,EAAE,OAAO,GAAG,eAAe,GAAG,KAAK,GAAG,aAAa,GAC1D,IAAI;IAIP,KAAK;IAKL,OAAO;IAMP,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE;CAW/D"}

package/dist/charts/frequency-histogram-plot.js

@@ -0,0 +1,54 @@
+import { getSorter } from "../util/key-value.js";
+/**
+ * Creates and drives a HistogramVis instance.
+ * Data should be an outer array containing two-element arrays for each
+ * data point. The first element of the inner array is expected to be the key, the second the frequency.
+ * For example,  `[`apples`, 2]` means the key `apples` was counted twice.
+ *
+ * Usage:
+ * .sortBy() automatically sorts prior to visualisation. By default off.
+ * .update(data) full set of data to plot
+ * .clear() empties plot - same as calling `update([])`
+ * .el - The `HistogramVis` instance, or undefined if not created/disposed
+ *
+ * ```
+ * const plot = new FrequencyHistogramPlot(document.getElementById('histogram'));
+ * plot.sortBy('key'); // Automatically sort by key
+ * ...
+ * plot.update([[`apples`, 2], [`oranges', 0], [`bananas`, 5]])
+ * ```
+ *
+ * @export
+ * @class FrequencyHistogramPlot
+ */
+export class FrequencyHistogramPlot {
+    #sorter;
+    constructor(el) {
+        this.el = el;
+    }
+    setAutoSort(sortStyle) {
+        this.#sorter = getSorter(sortStyle);
+    }
+    clear() {
+        if (this.el === undefined)
+            return;
+        this.el.data = [];
+    }
+    dispose() {
+        const el = this.el;
+        if (el === undefined)
+            return; // already disposed
+        el.remove();
+    }
+    update(data) {
+        if (this.el === undefined) {
+            console.warn(`FrequencyHistogramPlot this.el undefined`);
+            return;
+        }
+        this.el.data =
+            this.#sorter === undefined
+                ? [...data]
+                : this.#sorter(data);
+    }
+}
+//# sourceMappingURL=frequency-histogram-plot.js.map

package/dist/charts/frequency-histogram-plot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frequency-histogram-plot.js","sourceRoot":"","sources":["../../src/charts/frequency-histogram-plot.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,sBAAsB;IAElC,OAAO,CAA6B;IACpC,YAAY,EAAgB;QAC3B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,CAAC;IAED,WAAW,CACV,SAA4D;QAE5D,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC;IAED,KAAK;QACJ,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS;YAAE,OAAO;QAClC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC;IACnB,CAAC;IAED,OAAO;QACN,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,IAAI,EAAE,KAAK,SAAS;YAAE,OAAO,CAAC,mBAAmB;QACjD,EAAE,CAAC,MAAM,EAAE,CAAC;IACb,CAAC;IAED,MAAM,CAAC,IAAwD;QAC9D,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;YACzD,OAAO;QACR,CAAC;QAED,IAAI,CAAC,EAAE,CAAC,IAAI;YACX,IAAI,CAAC,OAAO,KAAK,SAAS;gBACzB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;gBACX,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;CACD"}

package/dist/charts/histogram-vis.d.ts

@@ -0,0 +1,57 @@
+import { LitElement } from "lit";
+import { type KeyValue } from "../util/primitive-types.js";
+type Bar = {
+    readonly percentage: number;
+    readonly data: KeyValue;
+};
+/**
+ * Usage in HTML:
+ * ```html
+ * <style>
+ * histogram-vis {
+ *  display: block;
+ *  height: 7em;
+ *  --histogram-bar-color: pink;
+ * }
+ * </style>
+ * <histogram-vis>
+ * [
+ *  ["apples", 5],
+ *  ["oranges", 3],
+ *  ["pineapple", 0],
+ *  ["limes", 9]
+ * ]
+ * </histogram-vis>
+ * ```
+ *
+ * CSS colour theming:
+ * --histogram-bar-color
+ * --histogram-label-color
+ *
+ * HTML tag attributes
+ * showXAxis (boolean)
+ * showDataLabels (boolean)
+ *
+ * @export
+ * @class HistogramVis
+ * @extends {LitElement}
+ **/
+export declare class HistogramVis extends LitElement {
+    static readonly styles: import("lit").CSSResult;
+    data: readonly KeyValue[];
+    showDataLabels: boolean;
+    height: string;
+    showXAxis: boolean;
+    json: readonly KeyValue[] | undefined;
+    constructor();
+    connectedCallback(): void;
+    barTemplate(bar: Bar, index: number, _totalBars: number): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        readonly "histogram-vis": HistogramVis;
+    }
+}
+export {};
+//# sourceMappingURL=histogram-vis.d.ts.map

package/dist/charts/histogram-vis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"histogram-vis.d.ts","sourceRoot":"","sources":["../../src/charts/histogram-vis.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAE3D,KAAK,GAAG,GAAG;IACV,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;CACxB,CAAC;AA+CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BI;AACJ,qBACa,YAAa,SAAQ,UAAU;IAC3C,MAAM,CAAC,QAAQ,CAAC,MAAM,0BA2CnB;IAGK,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IAG1B,cAAc,EAAE,OAAO,CAAC;IAGxB,MAAM,EAAE,MAAM,CAAC;IAGf,SAAS,EAAE,OAAO,CAAC;IAGnB,IAAI,EAAE,SAAS,QAAQ,EAAE,GAAG,SAAS,CAAC;;IAW9C,iBAAiB;IAOjB,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM;IA+BvD,MAAM;CAyCN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC;KACvC;CACD"}

package/dist/charts/histogram-vis.js

@@ -0,0 +1,222 @@
+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 { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators/custom-element.js";
+import { property } from "lit/decorators/property.js";
+import { repeat } from "lit/directives/repeat.js";
+import {} from "../util/primitive-types.js";
+const jsonData = (object) => {
+    if (object === null || object === undefined || object === `undefined`)
+        return;
+    try {
+        if (typeof object === `string`) {
+            if (object.length === 0)
+                return;
+            const o = JSON.parse(object);
+            if (!Array.isArray(o)) {
+                console.error(`Histogram innerText should be JSON array`);
+                return;
+            }
+            for (const [index, element] of o.entries()) {
+                if (!Array.isArray(element)) {
+                    console.error(`Histogram array should consist of inner arrays`);
+                    return;
+                }
+                if (element.length !== 2) {
+                    console.error(`Histogram inner arrays should consist of two elements`);
+                    return;
+                }
+                if (typeof element[0] !== `string`) {
+                    console.error(`First element of inner array should be a string (index ${index})`);
+                    return;
+                }
+                if (typeof element[1] !== `number`) {
+                    console.error(`Second element of inner array should be a number (index ${index})`);
+                    return;
+                }
+            }
+            return o;
+        }
+    }
+    catch (error) {
+        console.log(object);
+        console.error(error);
+    }
+    return;
+};
+/**
+ * Usage in HTML:
+ * ```html
+ * <style>
+ * histogram-vis {
+ *  display: block;
+ *  height: 7em;
+ *  --histogram-bar-color: pink;
+ * }
+ * </style>
+ * <histogram-vis>
+ * [
+ *  ["apples", 5],
+ *  ["oranges", 3],
+ *  ["pineapple", 0],
+ *  ["limes", 9]
+ * ]
+ * </histogram-vis>
+ * ```
+ *
+ * CSS colour theming:
+ * --histogram-bar-color
+ * --histogram-label-color
+ *
+ * HTML tag attributes
+ * showXAxis (boolean)
+ * showDataLabels (boolean)
+ *
+ * @export
+ * @class HistogramVis
+ * @extends {LitElement}
+ **/
+let HistogramVis = class HistogramVis extends LitElement {
+    static { this.styles = css `
+    :host {
+    }
+    div.container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    div.chart {
+      display: grid;
+      flex: 1;
+      grid-template-rows: 1fr 1px min-content;
+      justify-items: center;
+    }
+    div.bar {
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
+      justify-self: normal;
+      padding-left: 0.3vw;
+      padding-right: 0.3vw;
+    }
+    div.bar > div.barTrack {
+      background-color: var(--histogram-bar-color, gray);
+      align-self: stretch;
+    }
+    div.xAxisLabels,
+    div.data {
+      font-size: min(1vw, 1em);
+      color: var(--histogram-label-color, currentColor);
+    }
+    div.xAxisLabels {
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      text-align: center;
+    }
+    div.xAxis {
+      background-color: var(--histogram-axis-color, silver);
+      width: 100%;
+      height: 100%;
+    }
+  `; }
+    constructor() {
+        super();
+        this.data = [];
+        this.showDataLabels = true;
+        this.height = `100%`;
+        this.showXAxis = true;
+        this.json = undefined;
+    }
+    connectedCallback() {
+        if (!this.hasAttribute(`json`)) {
+            this.setAttribute(`json`, this.innerText);
+        }
+        super.connectedCallback();
+    }
+    barTemplate(bar, index, _totalBars) {
+        const { percentage } = bar;
+        const [key, freq] = bar.data;
+        // grid-area: rowStart / gridColStart / gridRowEnd / gridColEnd
+        const rowStart = 1;
+        const rowEnd = 2;
+        const colStart = index + 1;
+        const colEnd = colStart + 1;
+        const dataLabel = html `<div class="data">${freq}</div>`;
+        const xAxis = html `${key}`;
+        return html `
+      <div
+             class="bar"
+             style="grid-area: ${rowStart} / ${colStart} / ${rowEnd} / ${colEnd}"
+           >
+             <div class="barTrack" style="height: ${(percentage ?? 0) * 100}%"></div>
+             ${this.showDataLabels ? dataLabel : ``}
+           </div>
+           <div
+             class="xAxisLabels"
+             style="grid-area: ${rowStart + 2} / ${colStart} / ${rowEnd + 2} / ${colEnd}"
+           >
+             ${this.showXAxis ? xAxis : ``}
+           </div>
+    `;
+    }
+    render() {
+        if ((this.data === undefined || this.data.length === 0) &&
+            this.json === undefined) {
+            return html ``;
+        }
+        const d = this.data ?? this.json;
+        const length = d.length;
+        const highestCount = Math.max(...d.map((d) => d[1]));
+        const bars = d.map((kv) => ({
+            data: kv,
+            percentage: kv[1] / highestCount,
+        }));
+        const xAxis = html `
+      <div
+            class="xAxis"
+            style="grid-area: 2 / 1 / 3 / ${d.length + 1}"
+          ></div>
+    `;
+        const height = this.height ? `height: ${this.height};` : ``;
+        const h = html `
+      <style>
+             div.chart {
+               grid-template-columns: repeat(${d.length}, minmax(2px, 1fr));
+             }
+           </style>
+           <div class="container" style="${height}">
+             <div class="chart">
+               ${repeat(bars, (bar) => bar.data[0], (b, index) => this.barTemplate(b, index, length))}
+               ${this.showXAxis ? xAxis : ``}
+             </div>
+           </div>
+    `;
+        return h;
+    }
+};
+__decorate([
+    property()
+], HistogramVis.prototype, "data", void 0);
+__decorate([
+    property()
+], HistogramVis.prototype, "showDataLabels", void 0);
+__decorate([
+    property()
+], HistogramVis.prototype, "height", void 0);
+__decorate([
+    property()
+], HistogramVis.prototype, "showXAxis", void 0);
+__decorate([
+    property({ converter: jsonData, type: Object })
+], HistogramVis.prototype, "json", void 0);
+HistogramVis = __decorate([
+    customElement(`histogram-vis`)
+], HistogramVis);
+export { HistogramVis };
+//# sourceMappingURL=histogram-vis.js.map

package/dist/charts/histogram-vis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"histogram-vis.js","sourceRoot":"","sources":["../../src/charts/histogram-vis.ts"],"names":[],"mappings":"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"}

package/dist/charts/plot.d.ts

@@ -0,0 +1,128 @@
+import { LitElement, type PropertyValues } from "lit";
+import { type Ref } from "lit/directives/ref.js";
+import { CanvasHelper } from "@ixfx/visual";
+import type { Rect, RectPositioned } from "@ixfx/geometry/rect";
+import { Drawing } from "@ixfx/visual";
+import type { Colourish } from "@ixfx/visual/colour";
+/**
+ * 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' or 'line' (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
+ */
+export declare class PlotElement extends LitElement {
+    #private;
+    streaming: boolean;
+    hideLegend: boolean;
+    maxLength: number;
+    dataWidth: number;
+    fixedMax: number;
+    fixedMin: number;
+    lineWidth: number;
+    renderStyle: string;
+    manualDraw: boolean;
+    padding: number;
+    paused: boolean;
+    canvasEl: Ref<HTMLCanvasElement>;
+    seriesRanges: Map<string, [min: number, max: number]>;
+    get series(): PlotSeries[];
+    get seriesCount(): number;
+    /**
+     * 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: string): PlotElement;
+    /**
+     * Delete a series.
+     * Returns _true_ if there was a series to delete
+     * @param name
+     * @returns
+     */
+    deleteSeries(name: string): boolean;
+    /**
+     * Keeps the series, but deletes its data
+     * @param name
+     * @returns
+     */
+    clearSeries(name: string): boolean;
+    /**
+     * Delete all data & series
+     */
+    clear(): void;
+    /**
+     * Keeps all series, but deletes their data
+     */
+    clearData(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    updateColours(): void;
+    plot(value: number, seriesName?: string, skipDrawing?: boolean): PlotSeries;
+    /**
+     * Draw a set of key-value pairs as a batch.
+     * @param value
+     */
+    plotObject(value: object): void;
+    colourGenerator(_series: string): Colourish;
+    draw(): void;
+    drawLegend(cl: RectPositioned, d: Drawing.DrawingHelper): void;
+    drawLineSeries(data: number[], cp: Rect, d: Drawing.DrawingHelper, colour: string): void;
+    drawDotSeries(data: number[], cp: Rect, d: Drawing.DrawingHelper, colour: string): void;
+    computePlot(c: CanvasHelper, plotHeight: number, axisYwidth: number, padding: number): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    computeAxisYWidth(_c: CanvasHelper): number;
+    computeLegend(c: CanvasHelper, maxWidth: number, padding: number): {
+        bounds: {
+            width: number;
+            height: number;
+        };
+        parts: {
+            width: number;
+            height: number;
+            x: number;
+            y: number;
+        }[];
+    };
+    getSeries(name: string): PlotSeries | undefined;
+    static styles: import("lit").CSSResult;
+}
+export declare class PlotSeries {
+    name: string;
+    colour: Colourish;
+    private plot;
+    data: number[];
+    minSeen: number;
+    maxSeen: number;
+    constructor(name: string, colour: Colourish, plot: PlotElement);
+    clear(): void;
+    /**
+     * Returns a copy of the data scaled by the current
+     * range of the data
+     * @returns
+     */
+    getScaled(): number[];
+    getScaledBy(scaler: (v: number) => number): number[];
+    push(value: number): void;
+    resetScale(): void;
+}
+//# sourceMappingURL=plot.d.ts.map

package/dist/charts/plot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plot.d.ts","sourceRoot":"","sources":["../../src/charts/plot.ts"],"names":[],"mappings":"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"}