Release 14.1.0 (#595)

.github/workflows/release.yml

@@ -13,4 +13,4 @@ jobs:
     uses: datavisyn/github-workflows/.github/workflows/release-source.yml@main
     secrets: inherit
     with:
-      release_version: ${{ inputs.release_version }}
+      release_version: ${{ inputs.release_version }}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "visyn_core",
   "description": "Core repository for datavisyn applications.",
-  "version": "14.0.2",
+  "version": "14.1.0",
   "author": {
     "name": "datavisyn GmbH",
     "email": "[email protected]",
@@ -26,6 +26,7 @@
     "./hooks": "./src/hooks/index.ts",
     "./i18n": "./src/i18n/index.ts",
     "./idtype": "./src/idtype/index.ts",
+    "./echarts": "./src/echarts/index.ts",
     "./plotly/full": "./src/plotly/full/index.ts",
     "./plotly": "./src/plotly/index.tsx",
     "./plugin": "./src/plugin/index.ts",
@@ -103,6 +104,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-plotly.js": "^2.6.3",
     "arquero": "5.4.0",
+    "comlink": "^4.4.1",
     "d3-force-boundary": "^0.0.3",
     "d3-hexbin": "^0.2.2",
     "d3v7": "npm:d3@^7.9.0",

playwright/boxPlot/04_subcategory.spec.ts

@@ -15,7 +15,7 @@ test('subcategory selected', async ({ page }) => {
 
   await expect(page.locator('g[class="subplot xy"]').locator('g[class="trace boxes"]').nth(1).locator('path[class="box"]')).toHaveCSS(
     'fill',
-    'rgb(236, 104, 54)',
+    'rgb(247, 90, 30)',
   );
 
   await expect(page.locator('g[class="subplot xy"]').locator('g[class="trace boxes"]').nth(2).locator('path[class="box"]')).toHaveCSS(

src/echarts/index.ts

@@ -0,0 +1 @@
+export * from './useChart';

src/vis/vishooks/hooks/useChart.ts → src/echarts/useChart.ts

@@ -1,35 +1,55 @@
 /* eslint-disable react-compiler/react-compiler */
 import * as React from 'react';
+
 import { useDebouncedCallback, useSetState } from '@mantine/hooks';
-import type { ECElementEvent, ECharts, ComposeOption } from 'echarts/core';
-import { use, init } from 'echarts/core';
-import { BarChart, LineChart } from 'echarts/charts';
-import { DataZoomComponent, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
+import { BarChart, FunnelChart, LineChart, PieChart, SankeyChart, ScatterChart } from 'echarts/charts';
 import type {
   // The series option types are defined with the SeriesOption suffix
   BarSeriesOption,
   LineSeriesOption,
+  PieSeriesOption,
+  SankeySeriesOption,
+  FunnelSeriesOption,
+  ScatterSeriesOption,
 } from 'echarts/charts';
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  SingleAxisComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  BrushComponent,
+} from 'echarts/components';
 import type {
   // The component option types are defined with the ComponentOption suffix
   TitleComponentOption,
   TooltipComponentOption,
   GridComponentOption,
   DatasetComponentOption,
 } from 'echarts/components';
-import { useSetRef } from '../../../hooks';
+import type { ComposeOption, ECElementEvent, ECharts } from 'echarts/core';
+import { init, use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useSetRef } from '../hooks/useSetRef';
+
+export type ECSeries = BarSeriesOption | LineSeriesOption | SankeySeriesOption | FunnelSeriesOption | ScatterSeriesOption | PieSeriesOption;
 
-export type ECOption = ComposeOption<
-  BarSeriesOption | LineSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption | DatasetComponentOption
->;
+export type ECOption = ComposeOption<ECSeries | TooltipComponentOption | GridComponentOption | DatasetComponentOption | TitleComponentOption>;
 
 // Original code from https://dev.to/manufac/using-apache-echarts-with-react-and-typescript-optimizing-bundle-size-29l8
 // Register the required components
 use([
+  SingleAxisComponent,
+  BrushComponent,
   LegendComponent,
   LineChart,
   BarChart,
+  PieChart,
+  FunnelChart,
+  SankeyChart,
+  ScatterChart,
   GridComponent,
   TooltipComponent,
   TitleComponent,
@@ -57,26 +77,41 @@ type ElementEventName =
   | 'drop'
   | 'globalout';
 
+type ExoticEventName = 'brush' | 'brushEnd' | 'brushselected' | 'highlight' | 'downplay';
+
 // Type for mouse handlers in function form
 export type CallbackFunction = (event: ECElementEvent) => void;
 
+export type ExoticCallbackFunction = (event: unknown) => void;
+
 // Type for mouse handlers in object form
 export type CallbackObject = {
   query?: string | object;
   handler: CallbackFunction;
 };
 
+export type ExoticCallbackObject = {
+  query?: string | object;
+  handler: ExoticCallbackFunction;
+};
+
 // Array of mouse handlers
 export type CallbackArray = (CallbackFunction | CallbackObject)[];
 
+export type ExoticCallbackArray = (ExoticCallbackFunction | ExoticCallbackObject)[];
+
 export function useChart({
   options,
   settings,
   mouseEvents,
 }: {
   options?: ECOption;
   settings?: Parameters<ECharts['setOption']>[1];
-  mouseEvents?: Partial<{ [K in ElementEventName]: CallbackArray | CallbackFunction | CallbackObject }>;
+  mouseEvents?: Partial<
+    { [K in ElementEventName]: CallbackArray | CallbackFunction | CallbackObject } & {
+      [K in ExoticEventName]: ExoticCallbackArray | ExoticCallbackFunction | ExoticCallbackObject;
+    }
+  >;
 }) {
   const [state, setState] = useSetState({
     width: 0,
@@ -85,11 +120,6 @@ export function useChart({
     instance: null as ECharts | null,
   });
 
-  const debouncedResizeObserver = useDebouncedCallback((entries: ResizeObserverEntry[]) => {
-    const newDimensions = entries[0]?.contentRect;
-    setState({ width: newDimensions?.width, height: newDimensions?.height });
-  }, 250);
-
   const mouseEventsRef = React.useRef(mouseEvents);
   mouseEventsRef.current = mouseEvents;
 
@@ -137,7 +167,13 @@ export function useChart({
 
   const { ref, setRef } = useSetRef<HTMLElement>({
     register: (element) => {
-      const observer = new ResizeObserver(debouncedResizeObserver);
+      const observer = new ResizeObserver(
+        // NOTE: @dv-usama-ansari: This callback can be debounced for performance reasons
+        (entries: ResizeObserverEntry[]) => {
+          const newDimensions = entries[0]?.contentRect;
+          setState({ width: newDimensions?.width, height: newDimensions?.height });
+        },
+      );
       // create the instance
       const instance = init(element);
       // Save the mouse events