@vuu-ui/vuu-chart 4.1.2 → 4.2.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.1.2",
+  "version": "4.2.1",
   "description": "support for apache echarts using vuu data",
   "main": "./src/index.js",
   "license": "Apache-2.0",
@@ -8,16 +8,16 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.1.2",
-    "@vuu-ui/vuu-protocol-types": "4.1.2",
-    "@vuu-ui/vuu-data-local": "4.1.2"
+    "@vuu-ui/vuu-data-types": "4.2.1",
+    "@vuu-ui/vuu-protocol-types": "4.2.1",
+    "@vuu-ui/vuu-data-local": "4.2.1"
   },
   "dependencies": {
     "@salt-ds/styles": "0.4.2",
     "@salt-ds/window": "0.1.2",
-    "@vuu-ui/vuu-context-menu": "4.1.2",
-    "@vuu-ui/vuu-ui-controls": "4.1.2",
-    "@vuu-ui/vuu-utils": "4.1.2",
+    "@vuu-ui/vuu-context-menu": "4.2.1",
+    "@vuu-ui/vuu-ui-controls": "4.2.1",
+    "@vuu-ui/vuu-utils": "4.2.1",
     "clsx": "^2.0.0",
     "echarts": "6.1.0"
   },

package/src/Chart.css.js

@@ -26,6 +26,7 @@ const css = `
     background-color: var(--salt-container-primary-background) !important;
     border-color: var(--salt-selectable-borderColor-selected) !important;
     font-family: var(--salt-text-fontFamily) !important;
+    z-index: var(--salt-zIndex-popout) !important;
     border-radius: 6px !important;
 
     & .vuuChart-tooltip-title {

package/src/Chart.js

@@ -5,18 +5,24 @@ import { MeasuredContainer } from "@vuu-ui/vuu-ui-controls";
 import { buildColumnMap } from "@vuu-ui/vuu-utils";
 import clsx from "clsx";
 import { getInstanceByDom, init } from "./echarts.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useChartContextMenu } from "./useChartContextMenu.js";
 import { useChartOptions } from "./useChartOptions.js";
 import { useChartSelection } from "./useChartSelection.js";
 import Chart from "./Chart.css";
 const classBase = "vuuChart";
-const Chart_Chart = ({ categoryColumnName, chartSettings = {
+const defaultOptionSettings = {
+    notMerge: false
+};
+const seriesChangedOptionSettings = {
+    notMerge: true
+};
+const seriesIds = (option)=>(option.series ?? []).map(({ id })=>id).join("|");
+const defaultChartSettings = {
     useCoarsePointer: true,
     renderer: "svg"
-}, className, config, dataExclusions, dataSource, height, optionSettings = {
-    notMerge: true
-}, palette, resizeStrategy, showTooltip, style = {
+};
+const Chart_Chart = ({ categoryColumnName, chartSettings = defaultChartSettings, className, config, dataExclusions, dataSource, height, optionSettings = defaultOptionSettings, palette, resizeStrategy, showTooltip, style = {
     width: "100%",
     height: "100%"
 }, seriesColumnNames, width, ...htmlAttributes })=>{
@@ -38,8 +44,10 @@ const Chart_Chart = ({ categoryColumnName, chartSettings = {
             width: size.width
         });
     }, []);
-    const columnMap = buildColumnMap(dataSource.columns);
-    const onContextMenu = useChartContextMenu({
+    const columnMap = useMemo(()=>buildColumnMap(dataSource.columns), [
+        dataSource.columns
+    ]);
+    const { onContextMenu, onMouseMove } = useChartContextMenu({
         categoryColumnName,
         columnMap
     });
@@ -58,30 +66,60 @@ const Chart_Chart = ({ categoryColumnName, chartSettings = {
         symbolSizeFunction,
         showTooltip
     });
+    const { renderer = "svg", useCoarsePointer = true } = chartSettings;
     useEffect(()=>{
         if (!chartElement) return;
-        const chart = init(chartElement, null, chartSettings);
+        const chart = init(chartElement, null, {
+            renderer,
+            useCoarsePointer
+        });
         chartElement.echartsInstance = chart;
+        return ()=>{
+            chart?.dispose();
+            delete chartElement.echartsInstance;
+        };
+    }, [
+        chartElement,
+        renderer,
+        useCoarsePointer
+    ]);
+    useEffect(()=>{
+        const chart = chartElement ? getInstanceByDom(chartElement) : void 0;
+        if (!chart) return;
         chart.on("contextmenu", onContextMenu);
         chart.on("click", onClick);
         chart.on("mouseover", onMouseOver);
         chart.on("mouseout", onMouseOut);
+        chart.getZr().on("mousemove", onMouseMove);
         return ()=>{
-            chart?.dispose();
-            delete chartElement.echartsInstance;
+            if (!chart.isDisposed()) {
+                chart.getZr().off("mousemove", onMouseMove);
+                chart.off("contextmenu", onContextMenu);
+                chart.off("click", onClick);
+                chart.off("mouseover", onMouseOver);
+                chart.off("mouseout", onMouseOut);
+            }
         };
     }, [
         chartElement,
-        chartSettings,
         onClick,
         onContextMenu,
+        onMouseMove,
         onMouseOver,
-        onMouseOut
+        onMouseOut,
+        renderer,
+        useCoarsePointer
     ]);
+    const seriesIdsRef = useRef(void 0);
     useEffect(()=>{
         if (chartElement) {
             const chart = getInstanceByDom(chartElement);
-            chart?.setOption(option, optionSettings);
+            if (chart) {
+                const ids = seriesIds(option);
+                const seriesChanged = ids !== seriesIdsRef.current;
+                seriesIdsRef.current = ids;
+                chart.setOption(option, seriesChanged ? seriesChangedOptionSettings : optionSettings);
+            }
         }
     }, [
         chartElement,

package/src/ChartSeries.js

@@ -2,6 +2,7 @@ import { EventEmitter, Range, buildColumnMap, metadataKeys } from "@vuu-ui/vuu-u
 import { MovingDataRowWindow } from "./DataRowMovingWindow.js";
 import { defaultItemColorFunction } from "./chart-types.js";
 const { KEY: KEY } = metadataKeys;
+const CHART_RANGE = Range(0, 1000);
 function DataSourceValue(key, row, value) {
     return {
         key,
@@ -17,7 +18,8 @@ class ChartSeries extends EventEmitter {
     #dataExclusions;
     #dataSource;
     #subscribed = false;
-    #dataWindow = new MovingDataRowWindow(Range(0, 1000));
+    #previousRange;
+    #dataWindow = new MovingDataRowWindow(CHART_RANGE);
     #dates = [];
     #palette;
     #series = [];
@@ -47,22 +49,36 @@ class ChartSeries extends EventEmitter {
         this.#dataExclusions = dataExclusions;
         this.#palette = palette;
         this.#dataSource = dataSource;
-        this.subscribe();
+    }
+    get dataSource() {
+        return this.#dataSource;
     }
     subscribe() {
-        if (!this.#subscribed) {
-            this.#subscribed = true;
-            this.#dataSource.subscribe({
-                range: Range(0, 1000)
-            }, this.handleData);
+        if (this.#subscribed) return;
+        this.#subscribed = true;
+        const dataSource = this.#dataSource;
+        const { status } = dataSource;
+        if ("initialising" === status || "unsubscribed" === status) dataSource.subscribe({
+            range: CHART_RANGE
+        }, this.handleData);
+        else {
+            const columns = dataSource.columns.length > 0 ? dataSource.columns : dataSource.tableSchema?.columns;
+            this.#columnMap = buildColumnMap(columns);
+            this.#previousRange = dataSource.range;
+            dataSource.range = CHART_RANGE;
+            if ("subscribed" === status) dataSource.suspend?.(false);
+            dataSource.resume?.(this.handleData);
         }
     }
-    detach() {
-        this.#subscribed = false;
-    }
-    dispose() {
+    release(escalateToDisable) {
+        if (!this.#subscribed) return;
         this.#subscribed = false;
-        this.#dataSource.unsubscribe();
+        const dataSource = this.#dataSource;
+        dataSource.suspend?.(escalateToDisable);
+        if (this.#previousRange) {
+            dataSource.range = this.#previousRange;
+            this.#previousRange = void 0;
+        }
     }
     get palette() {
         return this.#seriesColumns.map((col)=>this.#colorMap.get(col));
@@ -79,8 +95,38 @@ class ChartSeries extends EventEmitter {
     }
     set seriesColumnNames(seriesColumnNames) {
         this.#seriesColumns = seriesColumnNames;
+        this.assignColors();
         if (this.#categoryColumn) this.buildCategoriesAndSeries();
     }
+    assignColors() {
+        const colorMap = this.#colorMap;
+        const seriesColumns = this.#seriesColumns;
+        const count = seriesColumns.length;
+        if (0 === count || 0 === this.#palette.length) return;
+        const runtimePalette = Array.from({
+            length: count
+        }, (_, i)=>this.#palette[i % this.#palette.length]);
+        const usedColors = new Set();
+        for (const column of seriesColumns){
+            const color = colorMap.get(column);
+            if (void 0 !== color) usedColors.add(color);
+        }
+        seriesColumns.forEach((column, preferredSlot)=>{
+            if (!colorMap.has(column)) {
+                let slot = preferredSlot;
+                for(let i = 0; i < count; i++){
+                    const candidate = (preferredSlot + i) % count;
+                    if (!usedColors.has(runtimePalette[candidate])) {
+                        slot = candidate;
+                        break;
+                    }
+                }
+                const color = runtimePalette[slot];
+                usedColors.add(color);
+                colorMap.set(column, color);
+            }
+        });
+    }
     get categories() {
         return this.#dates;
     }
@@ -88,7 +134,6 @@ class ChartSeries extends EventEmitter {
         return this.#series;
     }
     getCategoriesAndSeries() {
-        const colorMap = this.#colorMap;
         const columnMap = this.#columnMap;
         const data = this.#dataWindow.data;
         const categoryColumn = this.#categoryColumn;
@@ -106,13 +151,15 @@ class ChartSeries extends EventEmitter {
                 const seriesTuple = seriesMap.get(seriesColumn);
                 if (seriesTuple) [lineSeries, scatterSeries] = seriesTuple;
                 else {
-                    if (!colorMap.has(seriesColumn)) colorMap.set(seriesColumn, this.#palette[this.#colorMap.size]);
                     lineSeries = {
                         id: seriesColumn,
                         name: seriesColumn,
                         label: seriesColumn,
                         connectNulls: true,
                         data: [],
+                        emphasis: {
+                            disabled: true
+                        },
                         type: "line",
                         itemStyle: {
                             color: itemColorFunction

package/src/useChartContextMenu.js

@@ -1,7 +1,10 @@
-import { useContextMenu } from "@vuu-ui/vuu-context-menu";
-import { useCallback } from "react";
+import { useContextMenu, useHideContextMenu } from "@vuu-ui/vuu-context-menu";
+import { useCallback, useRef } from "react";
+const CLOSE_MENU_DISTANCE = 8;
 const useChartContextMenu = ({ columnMap })=>{
     const showContextMenu = useContextMenu();
+    const hideContextMenu = useHideContextMenu();
+    const menuPositionRef = useRef(void 0);
     const onContextMenu = useCallback(({ data, event, seriesName })=>{
         if (event && seriesName) {
             event?.stop();
@@ -11,12 +14,38 @@ const useChartContextMenu = ({ columnMap })=>{
                 columnMap,
                 row
             };
-            showContextMenu(event.event, "series", menuOptions);
+            const mouseEvent = event.event;
+            const onOpenChange = (open)=>{
+                if (!open) menuPositionRef.current = void 0;
+            };
+            const shown = showContextMenu(mouseEvent, "series", menuOptions, {
+                onOpenChange
+            });
+            if (shown) menuPositionRef.current = {
+                x: mouseEvent.clientX,
+                y: mouseEvent.clientY
+            };
         }
     }, [
         columnMap,
         showContextMenu
     ]);
-    return onContextMenu;
+    const onMouseMove = useCallback(({ event })=>{
+        const menuPosition = menuPositionRef.current;
+        if (menuPosition) {
+            const { clientX, clientY } = event;
+            const distance = Math.hypot(clientX - menuPosition.x, clientY - menuPosition.y);
+            if (distance > CLOSE_MENU_DISTANCE) {
+                menuPositionRef.current = void 0;
+                hideContextMenu();
+            }
+        }
+    }, [
+        hideContextMenu
+    ]);
+    return {
+        onContextMenu,
+        onMouseMove
+    };
 };
 export { useChartContextMenu };

package/src/useChartOptions.js

@@ -8,7 +8,21 @@ const defaultPalette = [
     "#9f55c2",
     "#2a8285",
     "#697694",
-    "#B0549d"
+    "#b0549d",
+    "#6d7c4d",
+    "#bd5558",
+    "#7665cf",
+    "#2d8543",
+    "#877410",
+    "#bd5a13",
+    "#946694",
+    "#008094",
+    "#72757a",
+    "#c24795",
+    "#667d15",
+    "#996a45",
+    "#636ebf",
+    "#23855e"
 ];
 const combineConfig = (config, overrides)=>({
         ...config,
@@ -47,14 +61,14 @@ const useChartOptions = ({ categoryColumnName, config, dataExclusions, dataSourc
                 cancelAnimationFrame(frameRef.current);
                 frameRef.current = void 0;
             }
-            chartSeries.detach();
+            const { dataSource } = chartSeries;
+            const replacement = chartSeriesRef.current.dataSource;
+            const escalateToDisable = replacement !== dataSource && replacement.isSessionDataSourceOf?.(dataSource) ? false : void 0;
+            chartSeries.release(escalateToDisable);
         };
     }, [
         chartSeries
     ]);
-    useEffect(()=>()=>{
-            chartSeriesRef.current.dispose();
-        }, []);
     useMemo(()=>{
         if (categoryColumnName !== chartSeries.categoryColumn) chartSeries.categoryColumn = categoryColumnName;
         if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) chartSeries.seriesColumnNames = seriesColumnNames;
@@ -97,6 +111,9 @@ const useChartOptions = ({ categoryColumnName, config, dataExclusions, dataSourc
             trigger: "axis"
         } : void 0,
         xAxis: {
+            axisPointer: {
+                triggerEmphasis: false
+            },
             data: chartSeries.categories
         },
         yAxis: {

package/types/Chart.d.ts

@@ -1,7 +1,7 @@
 import { type MeasuredContainerProps } from "@vuu-ui/vuu-ui-controls";
 import { type ChartOptionsProps } from "./useChartOptions";
 type OptionSettings = {
-    notMerge: boolean;
+    notMerge?: boolean;
 };
 type ChartSettings = {
     /**

package/types/ChartSeries.d.ts

@@ -1,7 +1,7 @@
-import { DataSource, DataSourceRow, DataSourceSubscribeCallback } from "@vuu-ui/vuu-data-types";
+import type { DataSource, DataSourceRow, DataSourceSubscribeCallback } from "@vuu-ui/vuu-data-types";
 import { EventEmitter } from "@vuu-ui/vuu-utils";
-import { Series } from "./chart-types";
-import { ChartConfig, DataExclusionOptions } from "./useChartOptions";
+import { type Series } from "./chart-types";
+import type { ChartConfig, DataExclusionOptions } from "./useChartOptions";
 export type DataSourceValue = {
     key: string;
     readonly row: DataSourceRow;
@@ -21,26 +21,41 @@ export declare class ChartSeries extends EventEmitter<ChartEvents> {
     handleData: DataSourceSubscribeCallback;
     buildCategoriesAndSeries(): void;
     constructor({ config, dataExclusions, dataSource, palette, }: ChartSeriesConstructorProps);
+    get dataSource(): DataSource;
     /**
-     * Subscribes to the DataSource. Invoked by the constructor, only needs to
-     * be invoked again after dispose.
+     * Starts receiving data from the DataSource. A new DataSource is
+     * subscribed. A DataSource already in use, e.g. one suspended by a Table
+     * showing the same data, is resumed with the chart's range. The previous
+     * range is restored by release.
      */
     subscribe(): void;
     /**
-     * Stops processing data from the DataSource, without unsubscribing it.
-     * Used when the DataSource is replaced, the caller may still be using
-     * the previous DataSource (e.g. as the source of an edit session).
+     * Stops processing data and suspends the DataSource, restoring the range
+     * it had when the chart took it over. The DataSource is never
+     * unsubscribed, the caller owns it. Unsubscribing a session DataSource
+     * would end its edit session.
+     * @param escalateToDisable pass false when another component will resume
+     * the DataSource, so the suspend is not promoted to a disable.
      */
-    detach(): void;
-    /**
-     * Stops processing data and unsubscribes from the DataSource.
-     */
-    dispose(): void;
+    release(escalateToDisable?: boolean): void;
     get palette(): (string | undefined)[];
     get categoryColumn(): string;
     set categoryColumn(categoryColumn: string);
     get seriesColumnNames(): string[];
     set seriesColumnNames(seriesColumnNames: string[]);
+    /**
+     * Assigns a colour to each series column that does not yet have one.
+     * Colours are taken from a runtime palette with one slot per charted
+     * column, filled from the palette (repeating if there are more columns
+     * than palette colours). A new column takes the slot matching its
+     * position in the charted columns. When the user switches between sets
+     * of columns, e.g. alpha_set_a, beta_set_a and alpha_set_b, beta_set_b,
+     * the nth column of each set gets the same colour, whatever the number
+     * of columns. Colour assignments are retained, so a column keeps its
+     * colour when it is charted again. If that colour is already used by
+     * another charted series, the next unused slot is taken.
+     */
+    private assignColors;
     get categories(): string[];
     get series(): Series[];
     private getCategoriesAndSeries;

package/types/chart-types.d.ts

@@ -29,6 +29,9 @@ export interface SeriesBase {
 }
 export interface LineSeries extends SeriesBase {
     connectNulls?: boolean;
+    emphasis?: {
+        disabled: boolean;
+    };
     lineStyle: {
         color?: string;
         width: number;

package/types/useChartContextMenu.d.ts

@@ -1,6 +1,6 @@
-import { DataSourceRow } from "@vuu-ui/vuu-data-types";
-import type { ECElementEvent } from "echarts/core";
-import { ColumnMap } from "@vuu-ui/vuu-utils";
+import type { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import type { ECElementEvent, ElementEvent } from "echarts/core";
+import type { ColumnMap } from "@vuu-ui/vuu-utils";
 export type ChartMenuLocation = "canvas" | "series";
 export type ChartContextMenuOptions = {
     column: string;
@@ -12,5 +12,8 @@ interface ChartContextMenuHookProps {
     categoryColumnName?: string;
     columnMap: ColumnMap;
 }
-export declare const useChartContextMenu: ({ columnMap, }: ChartContextMenuHookProps) => ({ data, event, seriesName }: ECElementEvent) => void;
+export declare const useChartContextMenu: ({ columnMap, }: ChartContextMenuHookProps) => {
+    onContextMenu: ({ data, event, seriesName }: ECElementEvent) => void;
+    onMouseMove: ({ event }: ElementEvent) => void;
+};
 export {};

package/types/useChartOptions.d.ts

@@ -1,6 +1,6 @@
-import { DataSource, DataSourceRow } from "@vuu-ui/vuu-data-types";
-import { ColumnMap } from "@vuu-ui/vuu-utils";
-import { type EChartsCoreOption } from "echarts/core";
+import type { DataSource, DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { type ColumnMap } from "@vuu-ui/vuu-utils";
+import type { EChartsCoreOption } from "echarts/core";
 import type { ChartSelectionModel, ItemColorFunction, SymbolSize, SymbolSizeFunction, SymbolType } from "./chart-types";
 export interface ChartConfig {
     itemColorFunction?: ItemColorFunction;