@vuu-ui/vuu-chart 4.0.0 → 4.1.0

package/src/options/mergeOptions.js

@@ -0,0 +1,37 @@
+const isPlainObject = (value)=>null !== value && "object" == typeof value && (Object.getPrototypeOf(value) === Object.prototype || null === Object.getPrototypeOf(value));
+const hasId = (value)=>isPlainObject(value) && void 0 !== value.id;
+const mergeArrays = (base, override)=>{
+    const result = base.slice();
+    override.forEach((item, i)=>{
+        if (hasId(item)) {
+            const index = result.findIndex((b)=>hasId(b) && b.id === item.id);
+            if (-1 !== index) result[index] = mergeValues(result[index], item);
+            else result.push(item);
+        } else if (i < result.length) result[i] = mergeValues(result[i], item);
+        else result.push(item);
+    });
+    return result;
+};
+const mergeValues = (base, override)=>{
+    if (void 0 === override) return base;
+    if (isPlainObject(base) && isPlainObject(override)) {
+        const result = {
+            ...base
+        };
+        for (const [key, value] of Object.entries(override))result[key] = mergeValues(base[key], value);
+        return result;
+    }
+    if (Array.isArray(override) && (Array.isArray(base) || isPlainObject(base))) {
+        const baseArray = Array.isArray(base) ? base : [
+            base
+        ];
+        if (override.every((o)=>isPlainObject(o))) return mergeArrays(baseArray, override);
+        return override;
+    }
+    if (Array.isArray(base) && isPlainObject(override)) return mergeArrays(base, [
+        override
+    ]);
+    return override;
+};
+const mergeEChartsOptions = (base, ...overrides)=>overrides.reduce((result, override)=>override ? mergeValues(result, override) : result, base);
+export { mergeEChartsOptions };

package/src/theme/chartTheme.js

@@ -0,0 +1,74 @@
+const defaultPalette = [
+    "#4676bf",
+    "#ab6528",
+    "#9f55c2",
+    "#2a8285",
+    "#697694",
+    "#b0549d",
+    "#c69d26",
+    "#5c8a3a"
+];
+const defaultChartTheme = {
+    axisLineColor: "#9fa3a8",
+    backgroundColor: "transparent",
+    crosshairColor: "#697694",
+    downColor: "#e52135",
+    fontFamily: "sans-serif",
+    foregroundColor: "#15171b",
+    heatmapColors: [
+        "#e2ebf8",
+        "#1b4f9c"
+    ],
+    palette: defaultPalette,
+    secondaryForegroundColor: "#5f646d",
+    splitLineColor: "#e6e8ea",
+    tooltipBackgroundColor: "#ffffff",
+    tooltipBorderColor: "#2670a9",
+    upColor: "#00875d"
+};
+const PALETTE_SIZE = 8;
+const read = (style, name, fallback)=>{
+    const value = style.getPropertyValue(name).trim();
+    return "" === value ? fallback : value;
+};
+const resolveChartTheme = (element, overrides)=>{
+    let theme = defaultChartTheme;
+    if (element && "function" == typeof getComputedStyle) {
+        const style = getComputedStyle(element);
+        const d = defaultChartTheme;
+        const palette = [];
+        for(let i = 0; i < PALETTE_SIZE; i++)palette.push(read(style, `--vuuChart-color-${i + 1}`, d.palette[i]));
+        theme = {
+            axisLineColor: read(style, "--vuuChart-axisLineColor", d.axisLineColor),
+            backgroundColor: read(style, "--vuuChart-background", d.backgroundColor),
+            crosshairColor: read(style, "--vuuChart-crosshairColor", d.crosshairColor),
+            downColor: read(style, "--vuuChart-downColor", d.downColor),
+            fontFamily: read(style, "--vuuChart-fontFamily", d.fontFamily),
+            foregroundColor: read(style, "--vuuChart-foreground", d.foregroundColor),
+            heatmapColors: [
+                read(style, "--vuuChart-heatmap-lowColor", d.heatmapColors[0]),
+                read(style, "--vuuChart-heatmap-highColor", d.heatmapColors[1])
+            ],
+            palette,
+            secondaryForegroundColor: read(style, "--vuuChart-secondaryForeground", d.secondaryForegroundColor),
+            splitLineColor: read(style, "--vuuChart-splitLineColor", d.splitLineColor),
+            tooltipBackgroundColor: read(style, "--vuuChart-tooltip-background", d.tooltipBackgroundColor),
+            tooltipBorderColor: read(style, "--vuuChart-tooltip-borderColor", d.tooltipBorderColor),
+            upColor: read(style, "--vuuChart-upColor", d.upColor)
+        };
+    }
+    return overrides ? {
+        ...theme,
+        ...overrides
+    } : theme;
+};
+const resolveColor = (color, theme)=>{
+    if ("up" === color) return theme.upColor;
+    if ("down" === color) return theme.downColor;
+    if (color?.startsWith("palette-")) {
+        const index = parseInt(color.slice(8), 10) - 1;
+        return theme.palette[index % theme.palette.length];
+    }
+    return color;
+};
+export { defaultChartTheme, defaultPalette, resolveChartTheme, resolveColor };

package/src/useChartOptions.js

@@ -1,5 +1,5 @@
 import { itemsChanged } from "@vuu-ui/vuu-utils";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ChartSeries } from "./ChartSeries.js";
 import { chartTooltip } from "./chartTooltip.js";
 const defaultPalette = [
@@ -16,6 +16,7 @@ const combineConfig = (config, overrides)=>({
     });
 const useChartOptions = ({ categoryColumnName, config, dataExclusions, dataSource, itemColorFunction, palette = defaultPalette, seriesColumnNames, showTooltip = true, symbolSizeFunction: symbolSize })=>{
     const [, forceRender] = useState({});
+    const frameRef = useRef(void 0);
     const chartSeries = useMemo(()=>{
         const cs = new ChartSeries({
             config: combineConfig(config, {
@@ -26,12 +27,34 @@ const useChartOptions = ({ categoryColumnName, config, dataExclusions, dataSourc
             dataSource,
             palette
         });
-        cs.on("update", ()=>forceRender({}));
+        cs.on("update", ()=>{
+            if (void 0 === frameRef.current) frameRef.current = requestAnimationFrame(()=>{
+                frameRef.current = void 0;
+                forceRender({});
+            });
+        });
         return cs;
     }, [
         dataSource,
         config
     ]);
+    const chartSeriesRef = useRef(chartSeries);
+    chartSeriesRef.current = chartSeries;
+    useEffect(()=>{
+        chartSeries.subscribe();
+        return ()=>{
+            if (void 0 !== frameRef.current) {
+                cancelAnimationFrame(frameRef.current);
+                frameRef.current = void 0;
+            }
+            chartSeries.detach();
+        };
+    }, [
+        chartSeries
+    ]);
+    useEffect(()=>()=>{
+            chartSeriesRef.current.dispose();
+        }, []);
     useMemo(()=>{
         if (categoryColumnName !== chartSeries.categoryColumn) chartSeries.categoryColumn = categoryColumnName;
         if (itemsChanged(seriesColumnNames, chartSeries.seriesColumnNames)) chartSeries.seriesColumnNames = seriesColumnNames;

package/types/Chart.d.ts

@@ -24,5 +24,5 @@ export interface ChartProps extends ChartOptionsProps, Omit<MeasuredContainerPro
     palette?: string[];
     showTooltip?: boolean;
 }
-export declare const Chart: ({ categoryColumnName, chartSettings, className, config, dataExclusions, dataSource, height, optionSettings, palette, resizeStrategy, showTooltip, style, seriesColumnNames, width, ...htmlAttributes }: ChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chart: ({ categoryColumnName, chartSettings, className, config, dataExclusions, dataSource, height, optionSettings, palette, resizeStrategy, showTooltip, style, seriesColumnNames, width, ...htmlAttributes }: ChartProps) => import("react").JSX.Element;
 export {};

package/types/ChartSeries.d.ts

@@ -21,6 +21,21 @@ export declare class ChartSeries extends EventEmitter<ChartEvents> {
     handleData: DataSourceSubscribeCallback;
     buildCategoriesAndSeries(): void;
     constructor({ config, dataExclusions, dataSource, palette, }: ChartSeriesConstructorProps);
+    /**
+     * Subscribes to the DataSource. Invoked by the constructor, only needs to
+     * be invoked again after dispose.
+     */
+    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).
+     */
+    detach(): void;
+    /**
+     * Stops processing data and unsubscribes from the DataSource.
+     */
+    dispose(): void;
     get palette(): (string | undefined)[];
     get categoryColumn(): string;
     set categoryColumn(categoryColumn: string);

package/types/charts/CandlestickChart.d.ts

@@ -6,4 +6,4 @@ export interface CandlestickChartProps extends Omit<VuuChartBaseProps, "legend">
  * OHLC candlestick chart with optional volume pane and overlay series
  * (e.g. a vwap line, or fills as scatter markers from a second DataSource).
  */
-export declare const CandlestickChart: ({ crosshair, dataSource, dataZoom, formatTime, legend, markLines, ohlcColumnNames, overlays, showTooltip, timeColumnName, volumeColumnName, volumePaneHeight, xAxisType, ...props }: CandlestickChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CandlestickChart: ({ crosshair, dataSource, dataZoom, formatTime, legend, markLines, ohlcColumnNames, overlays, showTooltip, timeColumnName, volumeColumnName, volumePaneHeight, xAxisType, ...props }: CandlestickChartProps) => import("react").JSX.Element;

package/types/charts/CartesianChart.d.ts

@@ -7,4 +7,4 @@ export interface CartesianChartProps extends Omit<VuuChartBaseProps, "legend">,
  * scatter series, on a category, time or value x axis. Series may be read
  * from multiple DataSources.
  */
-export declare const CartesianChart: ({ aggregation, crosshair, dataSource, dataZoom, legend, orientation, series, showTooltip, xAxis, yAxes, ...props }: CartesianChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CartesianChart: ({ aggregation, crosshair, dataSource, dataZoom, legend, orientation, series, showTooltip, xAxis, yAxes, ...props }: CartesianChartProps) => import("react").JSX.Element;

package/types/charts/DepthChart.d.ts

@@ -5,4 +5,4 @@ export interface DepthChartProps extends Omit<VuuChartBaseProps, "legend">, Dept
 /**
  * Market depth chart: stepped cumulative bid and ask areas, by price.
  */
-export declare const DepthChart: ({ askValue, bidValue, cumulativeSizeColumnName, dataSource, legend, priceColumnName, showMidPrice, showTooltip, sideColumnName, sizeColumnName, ...props }: DepthChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DepthChart: ({ askValue, bidValue, cumulativeSizeColumnName, dataSource, legend, priceColumnName, showMidPrice, showTooltip, sideColumnName, sizeColumnName, ...props }: DepthChartProps) => import("react").JSX.Element;

package/types/charts/HeatmapChart.d.ts

@@ -6,4 +6,4 @@ export interface HeatmapChartProps extends Omit<VuuChartBaseProps, "legend">, He
  * Heatmap of a value column by two dimensions, e.g. traded quantity by
  * price level and time bucket.
  */
-export declare const HeatmapChart: ({ aggregation, colorScale, dataSource, dataZoom, formatTime, max, min, showTooltip, showVisualMap, valueColumnName, where, xAxis, yAxis, ...props }: HeatmapChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HeatmapChart: ({ aggregation, colorScale, dataSource, dataZoom, formatTime, max, min, showTooltip, showVisualMap, valueColumnName, where, xAxis, yAxis, ...props }: HeatmapChartProps) => import("react").JSX.Element;

package/types/charts/HierarchyChart.d.ts

@@ -6,10 +6,10 @@ export interface HierarchyChartProps extends Omit<VuuChartBaseProps, "legend">,
  * Treemap, sunburst or pie breakdown of a value column, grouped by one or
  * more columns e.g. exposure by sector -> ric.
  */
-export declare const HierarchyChart: ({ aggregation, colorMode, dataSource, donut, formatValue, groupByColumnNames, legend, showTooltip, type, valueColumnName, where, ...props }: HierarchyChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HierarchyChart: ({ aggregation, colorMode, dataSource, donut, formatValue, groupByColumnNames, legend, showTooltip, type, valueColumnName, where, ...props }: HierarchyChartProps) => import("react").JSX.Element;
 export type TreemapChartProps = Omit<HierarchyChartProps, "type" | "donut">;
-export declare const TreemapChart: (props: TreemapChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TreemapChart: (props: TreemapChartProps) => import("react").JSX.Element;
 export type SunburstChartProps = Omit<HierarchyChartProps, "type" | "donut">;
-export declare const SunburstChart: (props: SunburstChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SunburstChart: (props: SunburstChartProps) => import("react").JSX.Element;
 export type PieChartProps = Omit<HierarchyChartProps, "type">;
-export declare const PieChart: (props: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PieChart: (props: PieChartProps) => import("react").JSX.Element;

package/types/engine/VuuChartContainer.d.ts

@@ -14,4 +14,4 @@ export interface VuuChartContainerProps extends VuuChartBaseProps {
  * - applies data updates as a partial option, merged by component id, at
  *   most once per animation frame, without re-rendering React
  */
-export declare const VuuChartContainer: ({ chartType, className, echartsOptions, height, legend: _legend, maxRows, model, onChartReady, onItemClick, onItemContextMenu, renderer, resizeStrategy, showTooltip: _showTooltip, style, theme: themeOverrides, width, ...htmlAttributes }: VuuChartContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VuuChartContainer: ({ chartType, className, echartsOptions, height, legend: _legend, maxRows, model, onChartReady, onItemClick, onItemContextMenu, renderer, resizeStrategy, showTooltip: _showTooltip, style, theme: themeOverrides, width, ...htmlAttributes }: VuuChartContainerProps) => import("react").JSX.Element;

package/types/index.d.ts

@@ -1,5 +1,19 @@
 export { Chart, type ChartProps } from "./Chart";
-export type { ItemColorFunction, LineSeries as Series } from './chart-types';
-export { ChartSeries, type DataSourceValue } from "./ChartSeries";
-export type { ChartContextMenuOptions, ChartMenuLocation } from "./useChartContextMenu";
-export type { ChartConfig, DataExclusionOptions } from './useChartOptions';
+export type { ItemColorFunction, LineSeries as Series } from "./chart-types";
+export { ChartSeries, type DataSourceValue, } from "./ChartSeries";
+export type { ChartContextMenuOptions, ChartMenuLocation, } from "./useChartContextMenu";
+export type { ChartConfig, DataExclusionOptions } from "./useChartOptions";
+export { CandlestickChart, type CandlestickChartProps, } from "./charts/CandlestickChart";
+export type { CandlestickChartOptions, CandlestickOverlayDef, OhlcColumnNames, } from "./charts/candlestick-model";
+export { CartesianChart, type CartesianChartProps, } from "./charts/CartesianChart";
+export type { CartesianChartOptions, CartesianSeriesDef, CartesianSeriesType, CartesianXAxisDef, CartesianYAxisDef, } from "./charts/cartesian-model";
+export { DepthChart, type DepthChartProps } from "./charts/DepthChart";
+export type { DepthChartOptions } from "./charts/depth-model";
+export { HeatmapChart, type HeatmapChartProps } from "./charts/HeatmapChart";
+export type { HeatmapAxisDef, HeatmapChartOptions, } from "./charts/heatmap-model";
+export { HierarchyChart, type HierarchyChartProps, PieChart, type PieChartProps, SunburstChart, type SunburstChartProps, TreemapChart, type TreemapChartProps, } from "./charts/HierarchyChart";
+export type { HierarchyChartOptions, HierarchyChartType, HierarchyColorMode, } from "./charts/hierarchy-model";
+export { ChartDataStore } from "./chart-data/ChartDataStore";
+export { mergeEChartsOptions } from "./options/mergeOptions";
+export { defaultChartTheme, resolveChartTheme, } from "./theme/chartTheme";
+export type * from "./vuu-chart-types";

package/types/useChartContextMenu.d.ts

@@ -1,5 +1,5 @@
 import { DataSourceRow } from "@vuu-ui/vuu-data-types";
-import { ECElementEvent } from "echarts";
+import type { ECElementEvent } from "echarts/core";
 import { ColumnMap } from "@vuu-ui/vuu-utils";
 export type ChartMenuLocation = "canvas" | "series";
 export type ChartContextMenuOptions = {

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";
+import { type EChartsCoreOption } from "echarts/core";
 import type { ChartSelectionModel, ItemColorFunction, SymbolSize, SymbolSizeFunction, SymbolType } from "./chart-types";
 export interface ChartConfig {
     itemColorFunction?: ItemColorFunction;

package/types/useChartSelection.d.ts

@@ -1,4 +1,4 @@
-import { ECElementEvent } from "echarts";
+import type { ECElementEvent } from "echarts/core";
 import { ChartSelectionModel, ItemColorFunction, SymbolSizeFunction } from "./chart-types";
 interface ChartSelectionHookProps {
     selectionModel?: ChartSelectionModel;