@vuu-ui/vuu-chart 2.1.19-beta.2 → 2.1.19-beta.3

package/src/ChartSeries.js

@@ -1,101 +0,0 @@
-import { EventEmitter, Range, buildColumnMap, metadataKeys } from "@vuu-ui/vuu-utils";
-import { MovingDataRowWindow } from "./DataRowMovingWindow.js";
-const defaultItemColorFunction = ({ color })=>color;
-const { KEY: KEY } = metadataKeys;
-function DataSourceValue(key, row, value) {
-    return {
-        key,
-        row,
-        value
-    };
-}
-function getCategoriesAndSeries(columnMap, data, categoryColumn, seriesColumns, itemColorFunction = defaultItemColorFunction) {
-    const categoryValues = [];
-    const seriesMap = new Map();
-    data.forEach((row)=>{
-        const categoryValue = row[columnMap[categoryColumn]];
-        categoryValues.push(categoryValue);
-        for (const seriesColumn of seriesColumns){
-            let series = seriesMap.get(seriesColumn);
-            if (!series) {
-                series = {
-                    id: seriesColumn,
-                    name: seriesColumn,
-                    label: seriesColumn,
-                    data: [],
-                    type: "line",
-                    itemStyle: {
-                        color: itemColorFunction
-                    },
-                    lineStyle: {
-                        width: 1.5
-                    },
-                    symbol: "circle"
-                };
-                seriesMap.set(seriesColumn, series);
-            }
-            const key = row[KEY];
-            const value = row[columnMap[seriesColumn]];
-            series.data.push(DataSourceValue(key, row, value));
-        }
-    });
-    return [
-        categoryValues,
-        Array.from(seriesMap.values())
-    ];
-}
-class ChartSeries extends EventEmitter {
-    #categoryColumn = "";
-    #columnMap = {};
-    #itemColorFunction;
-    #dataWindow = new MovingDataRowWindow(Range(0, 1000));
-    #dates = [];
-    #series = [];
-    #seriesColumns = [];
-    handleData = (message)=>{
-        if ("subscribed" === message.type) this.#columnMap = buildColumnMap(message.tableSchema.columns);
-        else if ("viewport-update" === message.type) {
-            if ("size-only" === message.mode) ;
-            else if (message.rows) {
-                for (const row of message.rows)this.#dataWindow.add(row);
-                this.buildCategoriesAndSeries();
-            }
-        } else console.warn(JSON.stringify(message));
-    };
-    buildCategoriesAndSeries() {
-        if (this.#categoryColumn && this.#seriesColumns.length > 0) {
-            const [dates, series] = getCategoriesAndSeries(this.#columnMap, this.#dataWindow.data, this.#categoryColumn, this.#seriesColumns, this.#itemColorFunction);
-            this.#dates = dates;
-            this.#series = series;
-            this.emit("update");
-        }
-    }
-    constructor({ dataSource, itemColorFunction }){
-        super();
-        this.#itemColorFunction = itemColorFunction;
-        dataSource.subscribe({
-            range: Range(0, 1000)
-        }, this.handleData);
-    }
-    get categoryColumn() {
-        return this.#categoryColumn;
-    }
-    set categoryColumn(categoryColumn) {
-        this.#categoryColumn = categoryColumn;
-        if (this.#seriesColumns.length > 0) this.buildCategoriesAndSeries();
-    }
-    get seriesColumnNames() {
-        return this.#seriesColumns;
-    }
-    set seriesColumnNames(seriesColumnNames) {
-        this.#seriesColumns = seriesColumnNames;
-        if (this.#categoryColumn) this.buildCategoriesAndSeries();
-    }
-    get categories() {
-        return this.#dates;
-    }
-    get series() {
-        return this.#series;
-    }
-}
-export { ChartSeries };

package/src/DataRowMovingWindow.js

@@ -1,64 +0,0 @@
-import { WindowRange, metadataKeys } from "@vuu-ui/vuu-utils";
-const { IDX: IDX, KEY: KEY } = metadataKeys;
-class MovingDataRowWindow {
-    data;
-    rowCount = 0;
-    #range;
-    constructor({ from, to }){
-        this.#range = new WindowRange(from, to);
-        this.data = new Array(Math.max(0, to - from));
-        this.rowCount = 0;
-    }
-    setRowCount = (rowCount)=>{
-        if (rowCount < this.data.length) this.data.length = rowCount;
-        this.rowCount = rowCount;
-    };
-    add(data) {
-        const index = data[IDX];
-        if (this.isWithinRange(index)) {
-            const internalIndex = index - this.#range.from;
-            this.data[internalIndex] = data;
-        }
-    }
-    getAtIndex(index) {
-        return this.#range.isWithin(index) && null != this.data[index - this.#range.from] ? this.data[index - this.#range.from] : void 0;
-    }
-    getByKey(key) {
-        return this.data.find((row)=>row[KEY] === key);
-    }
-    isWithinRange(index) {
-        return this.#range.isWithin(index);
-    }
-    setRange({ from, to }) {
-        if (from !== this.#range.from || to !== this.#range.to) {
-            const [overlapFrom, overlapTo] = this.#range.overlap(from, to);
-            const newData = new Array(Math.max(0, to - from));
-            for(let i = overlapFrom; i < overlapTo; i++){
-                const data = this.getAtIndex(i);
-                if (data) {
-                    const index = i - from;
-                    newData[index] = data;
-                }
-            }
-            this.data = newData;
-            this.#range.from = from;
-            this.#range.to = to;
-        }
-    }
-    get hasData() {
-        return this.data.some((d)=>void 0 !== d);
-    }
-    get firstRow() {
-        for(let i = 0; i < this.data.length; i++)if (this.data[i]) return this.data[i];
-        throw Error("[DataRowMovingWinddow] firstRow, no data");
-    }
-    get range() {
-        return this.#range;
-    }
-    get hasAllRowsWithinRange() {
-        const { from, to } = this.#range;
-        for(let i = from; i < to; i++)if (void 0 === this.getAtIndex(i)) return false;
-        return true;
-    }
-}
-export { MovingDataRowWindow };

package/src/index.js

@@ -1,2 +0,0 @@
-export { Chart } from "./Chart.js";
-export { ChartSeries } from "./ChartSeries.js";

package/src/useChartContextMenu.js

@@ -1,29 +0,0 @@
-import { useContextMenu } from "@vuu-ui/vuu-context-menu";
-import { useCallback } from "react";
-const useChartContextMenu = ({ categoryColumnName })=>{
-    const showContextMenu = useContextMenu();
-    const onContextMenu = useCallback(({ data, event, name: categoryValue, seriesName: valueColumn, value: keyedValue, ...rest })=>{
-        event.stop();
-        console.log({
-            rest
-        });
-        const { row, value } = data;
-        const menuOptions = {
-            categoryColumn: categoryColumnName,
-            categoryValue,
-            row,
-            valueColumn,
-            value
-        };
-        showContextMenu(event.event, "series", menuOptions, {
-            onOpenChange: (isOpen)=>{
-                console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);
-            }
-        });
-    }, [
-        categoryColumnName,
-        showContextMenu
-    ]);
-    return onContextMenu;
-};
-export { useChartContextMenu };

package/src/useChartOptions.js

@@ -1,76 +0,0 @@
-import { useMemo, useState } from "react";
-import { ChartSeries } from "./ChartSeries.js";
-import { itemsChanged } from "@vuu-ui/vuu-utils";
-const defaultPalette = [
-    "#4676bf",
-    "#ab6528",
-    "#9f55c2",
-    "#2a8285",
-    "#697694",
-    "#B0549d"
-];
-const useChartOptions = ({ categoryColumnName, dataSource, itemColorFunction, palette = defaultPalette, seriesColumnNames, showTooltip = true })=>{
-    const [, forceRender] = useState({});
-    const chartSeries = useMemo(()=>{
-        console.log("new ChartSeries");
-        const cs = new ChartSeries({
-            itemColorFunction,
-            dataSource
-        });
-        cs.on("update", ()=>forceRender({}));
-        return cs;
-    }, [
-        dataSource,
-        itemColorFunction
-    ]);
-    useMemo(()=>{
-        if (categoryColumnName !== chartSeries.categoryColumn) chartSeries.categoryColumn = categoryColumnName;
-        if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) chartSeries.seriesColumnNames = seriesColumnNames;
-    }, [
-        categoryColumnName,
-        chartSeries,
-        seriesColumnNames
-    ]);
-    return {
-        animation: false,
-        color: palette,
-        dataZoom: [
-            {
-                backgroundColor: "var(--vuuChart-zoom-background, transparent)",
-                borderColor: "var(--vuuChart-zoom-borderColor, white)",
-                handleStyle: {
-                    color: "var(--vuuChart-zoom-handleColor, white)"
-                },
-                moveHandleStyle: {
-                    color: "var(--vuuChart-zoom-slideColor, white)"
-                },
-                type: "slider",
-                start: 0,
-                end: 100
-            }
-        ],
-        grid: {
-            left: "0",
-            bottom: 0,
-            right: 5
-        },
-        series: chartSeries.series,
-        tooltip: showTooltip ? {
-            backgroundColor: "",
-            borderColor: "",
-            className: "vuuChartTooltip",
-            trigger: "axis"
-        } : void 0,
-        xAxis: {
-            data: chartSeries.categories
-        },
-        yAxis: {
-            splitLine: {
-                lineStyle: {
-                    color: "var(--salt-separable-tertiary-borderColor)"
-                }
-            }
-        }
-    };
-};
-export { useChartOptions };