kumo-svelte 0.3.0 → 0.7.0

package/ai/component-registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.7.0",
   "components": {
     "Autocomplete": {
       "name": "Autocomplete",
@@ -2054,7 +2054,7 @@
             "xl"
           ],
           "default": "base",
-          "description": "Dialog width preset."
+          "description": "Fixed dialog width preset: sm (288px), base (384px), lg (512px), or xl (768px)."
         },
         "style": {
           "type": "string",
@@ -3636,7 +3636,7 @@
             "value": {
               "type": "Value",
               "optional": true,
-              "description": "Controlled value."
+              "description": "Controlled value. Parameterized by the radio value type Value, which defaults to string."
             },
             "disabled": {
               "type": "boolean",
@@ -3666,7 +3666,7 @@
             "defaultValue": {
               "type": "Value",
               "optional": true,
-              "description": "Initial uncontrolled value."
+              "description": "Initial uncontrolled value. Parameterized by the radio value type Value, which defaults to string."
             },
             "required": {
               "type": "boolean",
@@ -3676,7 +3676,7 @@
             "onValueChange": {
               "type": "(value: Value, eventDetails?: unknown) => void",
               "optional": true,
-              "description": "Called when the value changes."
+              "description": "Called when the value changes. The second argument carries native event details about the interaction."
             }
           }
         },
@@ -3733,7 +3733,7 @@
               "type": "Value",
               "optional": false,
               "required": true,
-              "description": "Controlled value."
+              "description": "Item value. Parameterized by the radio value type Value to match the enclosing Radio.Group value type."
             }
           }
         },
@@ -5212,7 +5212,7 @@
             "lg"
           ],
           "default": "base",
-          "description": "Locks every supported toolbar item to this size."
+          "description": "Locks every toolbar item to this size."
         },
         "class": {
           "type": "string",
@@ -5224,7 +5224,6 @@
         "bg-kumo-control",
         "border-kumo-line",
         "ring-kumo-brand",
-        "ring-kumo-focus",
         "ring-kumo-line"
       ],
       "subComponents": {

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Kumo Svelte Component Registry
 
-Version: 0.3.0
+Version: 0.7.0
 
 ## Autocomplete
 

package/dist/components/button/Button.svelte

@@ -46,7 +46,7 @@
     variant: {
       primary: {
         classes:
-          'relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50',
+          'relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active:ring-(--kumo-button-emphasis-ring) disabled:opacity-50',
         description: 'High-emphasis button for primary actions'
       },
       secondary: {
@@ -60,7 +60,7 @@
       },
       destructive: {
         classes:
-          'relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50',
+          'relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active:ring-(--kumo-button-emphasis-ring) disabled:opacity-50',
         description: 'Danger button for destructive actions like delete'
       },
       'secondary-destructive': {
@@ -190,7 +190,7 @@
     {#if emphasisToken}
       <span
         aria-hidden="true"
-        class="absolute inset-0 translate-y-px rounded-[inherit] bg-linear-to-b from-(--kumo-button-emphasis-gradient-start) to-(--kumo-button-emphasis-gradient-end) group-hover:from-(--kumo-button-emphasis-bg)"
+        class="absolute inset-0 rounded-[inherit] bg-linear-to-b from-(--kumo-button-emphasis-gradient-start) to-(--kumo-button-emphasis-gradient-end) shadow-[inset_0_1px_0_0_var(--kumo-button-emphasis-bg)] group-hover:from-(--kumo-button-emphasis-bg)"
       ></span>
       <span class="relative flex items-center gap-1.5">
         {#if loading}

package/dist/components/button/Button.svelte.d.ts

@@ -64,7 +64,7 @@ declare const Button: Component<{
         };
         readonly variant: {
             readonly primary: {
-                readonly classes: "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50";
+                readonly classes: "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active:ring-(--kumo-button-emphasis-ring) disabled:opacity-50";
                 readonly description: "High-emphasis button for primary actions";
             };
             readonly secondary: {
@@ -76,7 +76,7 @@ declare const Button: Component<{
                 readonly description: "Minimal button with no background";
             };
             readonly destructive: {
-                readonly classes: "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50";
+                readonly classes: "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) focus:ring-(--kumo-button-emphasis-ring) focus-visible:ring-(--kumo-button-emphasis-ring) active:ring-(--kumo-button-emphasis-ring) disabled:opacity-50";
                 readonly description: "Danger button for destructive actions like delete";
             };
             readonly 'secondary-destructive': {

package/dist/components/button/button.test.js

@@ -30,4 +30,17 @@ describe('Button', () => {
         expect(button.disabled).toBe(true);
         expect(button.getAttribute('aria-busy')).toBe('true');
     });
+    it('keeps emphasized variant rings color-matched when pressed or focused', () => {
+        for (const variant of ['primary', 'destructive']) {
+            render(Button, {
+                variant,
+                'aria-label': variant
+            });
+            const className = screen.getByRole('button', { name: variant }).className;
+            expect(className).toContain('ring-(--kumo-button-emphasis-ring)');
+            expect(className).toContain('focus:ring-(--kumo-button-emphasis-ring)');
+            expect(className).toContain('focus-visible:ring-(--kumo-button-emphasis-ring)');
+            expect(className).toContain('active:ring-(--kumo-button-emphasis-ring)');
+        }
+    });
 });

package/dist/components/chart/BubbleMap.svelte

@@ -0,0 +1,369 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { EChartsType } from 'echarts/core';
+  import { geoMercator } from 'd3-geo';
+  import Chart, { type ChartEvents, type KumoChartOption } from './Chart.svelte';
+  import { ChartPalette } from './Color';
+  import { defaultValueFormat, escapeHtml } from './tooltip-utils';
+
+  export interface MapGeoJson {
+    type: 'FeatureCollection';
+    features: Array<{
+      type: 'Feature';
+      id?: string | number;
+      properties?: Record<string, unknown> | null;
+      geometry: unknown;
+    }>;
+  }
+
+  /** Accessor for a value on a data row: a key of `T`, or a function of the row. */
+  export type MapAccessor<T, V> = keyof T | ((row: T) => V);
+
+  function resolve<T, V>(row: T, accessor: MapAccessor<T, V>): V {
+    return typeof accessor === 'function' ? accessor(row) : (row[accessor] as V);
+  }
+
+  /** Per-datum style value: a constant, or a function of the row. */
+  export type MapStyle<T, V> = V | ((row: T) => V);
+
+  function resolveStyle<T, V>(row: T, style: MapStyle<T, V>): V {
+    return typeof style === 'function' ? (style as (row: T) => V)(row) : (style as V);
+  }
+
+  const MAX_ZOOM_FACTOR = 8;
+  const MERCATOR_MAX_LAT = 85.0511;
+  const DEFAULT_BOUNDING_COORDS: [[number, number], [number, number]] = [
+    [-180, 80],
+    [180, -58]
+  ];
+  const geoJsonMapNames = new WeakMap<MapGeoJson, string>();
+  const mercatorProjection = geoMercator();
+
+  export interface MapProjection {
+    project: (point: number[]) => number[];
+    unproject: (point: number[]) => number[];
+  }
+
+  const DEFAULT_PROJECTION: MapProjection = {
+    project: (point) => {
+      const lat = Math.max(-MERCATOR_MAX_LAT, Math.min(MERCATOR_MAX_LAT, point[1]));
+      return mercatorProjection([point[0], lat]) ?? [0, 0];
+    },
+    unproject: (point) => mercatorProjection.invert?.(point as [number, number]) ?? [0, 0]
+  };
+
+  function resolveProjection(projection: MapProjection | null | undefined): MapProjection | undefined {
+    if (projection === null) return undefined;
+    return projection ?? DEFAULT_PROJECTION;
+  }
+
+  function projectedAspect(
+    projection: MapProjection | undefined,
+    [[west, north], [east, south]]: [[number, number], [number, number]]
+  ): number {
+    const project = projection ? projection.project : (point: number[]) => point;
+    const midLat = Math.min(north, Math.max(south, 0));
+    const width = Math.abs(project([east, midLat])[0] - project([west, midLat])[0]);
+    const height = Math.abs(project([0, north])[1] - project([0, south])[1]);
+    return width > 0 && height > 0 ? width / height : 16 / 9;
+  }
+
+  function sanitizeMapName(name: string) {
+    return name.replace(/[^a-zA-Z0-9_-]/g, '-');
+  }
+
+  function hashString(value: string) {
+    let hash = 0;
+    for (let i = 0; i < value.length; i++) {
+      hash = Math.imul(31, hash) + value.charCodeAt(i);
+    }
+    return (hash >>> 0).toString(36);
+  }
+
+  function getMapName(geoJson: MapGeoJson, mapName?: string) {
+    if (mapName) return sanitizeMapName(mapName);
+
+    const existing = geoJsonMapNames.get(geoJson);
+    if (existing) return existing;
+
+    const generated = `kumo-map-${hashString(JSON.stringify(geoJson))}`;
+    geoJsonMapNames.set(geoJson, generated);
+    return generated;
+  }
+
+  function buildGeo({
+    mapName,
+    areaColor,
+    center,
+    zoom,
+    roam,
+    projection
+  }: {
+    mapName: string;
+    areaColor: string;
+    center?: [number, number];
+    zoom: number;
+    roam: boolean;
+    projection?: MapProjection;
+  }) {
+    return {
+      map: mapName,
+      nameProperty: 'name',
+      roam,
+      ...(roam
+        ? {
+            scaleLimit: {
+              min: Math.min(1, zoom),
+              max: zoom * MAX_ZOOM_FACTOR
+            }
+          }
+        : {}),
+      center,
+      zoom,
+      boundingCoords: DEFAULT_BOUNDING_COORDS,
+      ...(projection ? { projection } : { aspectScale: 1 }),
+      silent: true,
+      itemStyle: {
+        areaColor,
+        borderColor: areaColor,
+        borderWidth: 0.5
+      },
+      emphasis: { disabled: true }
+    };
+  }
+
+  export interface BubbleMapProps<T = Record<string, unknown>> {
+    echarts: any;
+    geoJson: MapGeoJson;
+    mapName?: string;
+    data: T[];
+    lng: MapAccessor<T, number>;
+    lat: MapAccessor<T, number>;
+    value: MapAccessor<T, number>;
+    name?: MapAccessor<T, string>;
+    minRadius?: number;
+    maxRadius?: number;
+    bubbleSize?: (value: number) => number;
+    bubbleColor?: MapStyle<T, string>;
+    bubbleBorderColor?: MapStyle<T, string>;
+    bubbleBorderWidth?: MapStyle<T, number>;
+    center?: [number, number];
+    zoom?: number;
+    roam?: boolean;
+    projection?: MapProjection | null;
+    showTooltip?: boolean;
+    valueFormat?: (value: number) => string;
+    tooltipFormatter?: (row: T) => string;
+    onBubbleHover?: (row: T | undefined) => void;
+    onBubbleClick?: (row: T) => void;
+    aspectRatio?: number | string;
+    height?: number;
+    class?: string;
+    isDarkMode?: boolean;
+    chartRef?: EChartsType | null;
+  }
+
+  interface BubblePoint<T> {
+    name?: string;
+    value: [number, number, number];
+    symbolSize: number;
+    itemStyle: { color: string; borderColor: string; borderWidth: number };
+    datum: T;
+  }
+
+  let {
+    echarts,
+    geoJson,
+    mapName: mapNameProp,
+    data,
+    lng,
+    lat,
+    value,
+    name,
+    minRadius = 6,
+    maxRadius = 26,
+    bubbleSize,
+    bubbleColor,
+    bubbleBorderColor = 'transparent',
+    bubbleBorderWidth = 0,
+    center,
+    zoom = 1.25,
+    roam = false,
+    projection,
+    showTooltip = true,
+    valueFormat = defaultValueFormat,
+    tooltipFormatter,
+    onBubbleHover,
+    onBubbleClick,
+    aspectRatio,
+    height,
+    class: className,
+    isDarkMode,
+    chartRef = $bindable(null)
+  }: BubbleMapProps = $props();
+
+  let detectedDarkMode = $state(false);
+  const effectiveDarkMode = $derived(isDarkMode ?? detectedDarkMode);
+  const mapName = $derived(getMapName(geoJson, mapNameProp));
+
+  onMount(() => {
+    const updateDetectedDarkMode = () => {
+      const root = document.documentElement;
+      const mode = root.dataset.mode;
+      if (mode === 'dark') {
+        detectedDarkMode = true;
+        return;
+      }
+      if (mode === 'light') {
+        detectedDarkMode = false;
+        return;
+      }
+      if (root.classList.contains('dark')) {
+        detectedDarkMode = true;
+        return;
+      }
+      if (root.classList.contains('light')) {
+        detectedDarkMode = false;
+        return;
+      }
+      detectedDarkMode = window.matchMedia?.('(prefers-color-scheme: dark)').matches === true;
+    };
+    const themeObserver = new MutationObserver(updateDetectedDarkMode);
+    updateDetectedDarkMode();
+    [document.documentElement, document.body].forEach((node) => {
+      themeObserver.observe(node, { attributes: true, attributeFilter: ['data-mode', 'class'] });
+    });
+    const mediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+    mediaQuery?.addEventListener('change', updateDetectedDarkMode);
+
+    return () => {
+      themeObserver.disconnect();
+      mediaQuery?.removeEventListener('change', updateDetectedDarkMode);
+    };
+  });
+
+  $effect.pre(() => {
+    // ECharts requires GeoJSON maps to be registered before setOption uses them.
+    echarts.registerMap(mapName, geoJson);
+  });
+
+  const resolvedProjection = $derived(resolveProjection(projection));
+  const resolvedAspectRatio = $derived(
+    height === undefined ? (aspectRatio ?? projectedAspect(resolvedProjection, DEFAULT_BOUNDING_COORDS)) : undefined
+  );
+
+  const options = $derived.by(() => {
+    const palette = ChartPalette.mapColors(effectiveDarkMode);
+    const values = data.map((row) => resolve(row, value));
+    const vmin = values.length ? Math.min(...values) : 0;
+    const vmax = values.length ? Math.max(...values) : 1;
+
+    const radiusFor = (datumValue: number) => {
+      if (bubbleSize) return bubbleSize(datumValue);
+      if (vmax <= 0) return minRadius;
+      const ratio = Math.sqrt(Math.max(0, datumValue) / vmax);
+      return minRadius + ratio * (maxRadius - minRadius);
+    };
+
+    const points: BubblePoint<Record<string, unknown>>[] = data.map((row) => {
+      const datumValue = resolve(row, value);
+      return {
+        name: name ? resolve(row, name) : undefined,
+        value: [resolve(row, lng), resolve(row, lat), datumValue],
+        symbolSize: radiusFor(datumValue),
+        itemStyle: {
+          color: bubbleColor ? resolveStyle(row, bubbleColor) : palette.bubble,
+          borderColor: resolveStyle(row, bubbleBorderColor),
+          borderWidth: resolveStyle(row, bubbleBorderWidth)
+        },
+        datum: row
+      };
+    });
+
+    return {
+      backgroundColor: 'transparent',
+      animation: true,
+      animationDuration: 500,
+      animationDurationUpdate: 0,
+      geo: buildGeo({
+        mapName,
+        areaColor: palette.area,
+        center,
+        zoom,
+        roam,
+        projection: resolvedProjection
+      }),
+      tooltip: showTooltip
+        ? {
+            trigger: 'item',
+            triggerOn: 'mousemove',
+            backgroundColor: 'var(--color-kumo-base)',
+            borderColor: 'var(--color-kumo-line)',
+            borderWidth: 1,
+            padding: 8,
+            textStyle: {
+              color: 'var(--text-color-kumo-default)',
+              fontSize: 13
+            },
+            extraCssText: 'border-radius: 0.5rem;',
+            dangerousHtmlFormatter: (params: unknown) => {
+              const param = params as { name?: string; value?: number[]; data?: { datum?: Record<string, unknown> } };
+              const row = param.data?.datum;
+              if (tooltipFormatter && row !== undefined) return tooltipFormatter(row);
+
+              const tooltipValue = param.value?.[2];
+              const nameStr = param.name ? `<strong>${escapeHtml(param.name)}</strong>` : '';
+              const valueStr =
+                tooltipValue !== undefined
+                  ? `<span style="color:var(--text-color-kumo-subtle)">${escapeHtml(valueFormat(tooltipValue))}</span>`
+                  : '';
+              return `<div style="display:flex;flex-direction:column;gap:2px;">${nameStr}${valueStr}</div>`;
+            }
+          }
+        : undefined,
+      series: [
+        {
+          id: 'bubbles',
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          data: points,
+          itemStyle: { opacity: 0.8 },
+          emphasis: { scale: 1.2, itemStyle: { opacity: 1 } },
+          z: 3
+        }
+      ]
+    } satisfies KumoChartOption;
+  });
+
+  const events = $derived<Partial<ChartEvents>>({
+    ...(onBubbleHover
+      ? {
+          mouseover: (params: any) => {
+            const datum = params.data?.datum;
+            if (datum !== undefined) onBubbleHover?.(datum);
+          },
+          mouseout: () => onBubbleHover?.(undefined),
+          globalout: () => onBubbleHover?.(undefined)
+        }
+      : {}),
+    ...(onBubbleClick
+      ? {
+          click: (params: any) => {
+            const datum = params.data?.datum;
+            if (datum !== undefined) onBubbleClick?.(datum);
+          }
+        }
+      : {})
+  });
+</script>
+
+<Chart
+  {echarts}
+  options={options}
+  bind:chartRef
+  {height}
+  aspectRatio={resolvedAspectRatio}
+  class={className}
+  isDarkMode={effectiveDarkMode}
+  onEvents={events}
+/>

package/dist/components/chart/BubbleMap.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { EChartsType } from 'echarts/core';
+export interface MapGeoJson {
+    type: 'FeatureCollection';
+    features: Array<{
+        type: 'Feature';
+        id?: string | number;
+        properties?: Record<string, unknown> | null;
+        geometry: unknown;
+    }>;
+}
+/** Accessor for a value on a data row: a key of `T`, or a function of the row. */
+export type MapAccessor<T, V> = keyof T | ((row: T) => V);
+/** Per-datum style value: a constant, or a function of the row. */
+export type MapStyle<T, V> = V | ((row: T) => V);
+export interface MapProjection {
+    project: (point: number[]) => number[];
+    unproject: (point: number[]) => number[];
+}
+export interface BubbleMapProps<T = Record<string, unknown>> {
+    echarts: any;
+    geoJson: MapGeoJson;
+    mapName?: string;
+    data: T[];
+    lng: MapAccessor<T, number>;
+    lat: MapAccessor<T, number>;
+    value: MapAccessor<T, number>;
+    name?: MapAccessor<T, string>;
+    minRadius?: number;
+    maxRadius?: number;
+    bubbleSize?: (value: number) => number;
+    bubbleColor?: MapStyle<T, string>;
+    bubbleBorderColor?: MapStyle<T, string>;
+    bubbleBorderWidth?: MapStyle<T, number>;
+    center?: [number, number];
+    zoom?: number;
+    roam?: boolean;
+    projection?: MapProjection | null;
+    showTooltip?: boolean;
+    valueFormat?: (value: number) => string;
+    tooltipFormatter?: (row: T) => string;
+    onBubbleHover?: (row: T | undefined) => void;
+    onBubbleClick?: (row: T) => void;
+    aspectRatio?: number | string;
+    height?: number;
+    class?: string;
+    isDarkMode?: boolean;
+    chartRef?: EChartsType | null;
+}
+declare const BubbleMap: import("svelte").Component<BubbleMapProps<Record<string, unknown>>, {}, "chartRef">;
+type BubbleMap = ReturnType<typeof BubbleMap>;
+export default BubbleMap;

package/dist/components/chart/BubbleMap.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/chart/BubbleMap.test.js

@@ -0,0 +1,104 @@
+// @vitest-environment happy-dom
+import { render, waitFor } from '@testing-library/svelte';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import BubbleMap, {} from './BubbleMap.svelte';
+const geoJson = {
+    type: 'FeatureCollection',
+    features: [
+        {
+            type: 'Feature',
+            id: 'US',
+            properties: { name: 'United States' },
+            geometry: { type: 'Polygon', coordinates: [] }
+        }
+    ]
+};
+const data = [
+    { city: 'San Francisco', lat: 37.77, lon: -122.42, requests: 10 },
+    { city: 'London', lat: 51.5, lon: -0.12, requests: 20 }
+];
+function createMockChart() {
+    return {
+        setOption: vi.fn(),
+        on: vi.fn(),
+        off: vi.fn(),
+        resize: vi.fn(),
+        dispose: vi.fn()
+    };
+}
+function createMockEcharts(mockChart = createMockChart()) {
+    return {
+        init: vi.fn(() => mockChart),
+        registerMap: vi.fn()
+    };
+}
+beforeEach(() => {
+    class ResizeObserver {
+        observe = vi.fn();
+        disconnect = vi.fn();
+    }
+    vi.stubGlobal('ResizeObserver', ResizeObserver);
+    vi.stubGlobal('matchMedia', vi.fn(() => ({
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        matches: false
+    })));
+});
+describe('BubbleMap', () => {
+    it('reuses the generated map name across remounts for the same GeoJSON', () => {
+        const mockEcharts = createMockEcharts();
+        const first = render(BubbleMap, {
+            echarts: mockEcharts,
+            geoJson,
+            data,
+            lng: 'lon',
+            lat: 'lat',
+            name: 'city',
+            value: 'requests'
+        });
+        first.unmount();
+        render(BubbleMap, {
+            echarts: mockEcharts,
+            geoJson,
+            data,
+            lng: 'lon',
+            lat: 'lat',
+            name: 'city',
+            value: 'requests'
+        });
+        expect(mockEcharts.registerMap).toHaveBeenCalledTimes(2);
+        expect(mockEcharts.registerMap.mock.calls[0][0]).toBe(mockEcharts.registerMap.mock.calls[1][0]);
+    });
+    it('sanitizes custom map names before registering them', () => {
+        const mockEcharts = createMockEcharts();
+        render(BubbleMap, {
+            echarts: mockEcharts,
+            geoJson,
+            mapName: 'world:traffic/map',
+            data,
+            lng: 'lon',
+            lat: 'lat',
+            name: 'city',
+            value: 'requests'
+        });
+        expect(mockEcharts.registerMap).toHaveBeenCalledWith('world-traffic-map', geoJson);
+    });
+    it('uses bubbleSize when provided', async () => {
+        const mockChart = createMockChart();
+        const mockEcharts = createMockEcharts(mockChart);
+        render(BubbleMap, {
+            echarts: mockEcharts,
+            geoJson,
+            data,
+            lng: 'lon',
+            lat: 'lat',
+            name: 'city',
+            value: 'requests',
+            bubbleSize: (value) => value / 2
+        });
+        await waitFor(() => expect(mockChart.setOption).toHaveBeenCalled());
+        const options = mockChart.setOption.mock.calls[0][0];
+        expect(options.series[0].data[0].symbolSize).toBe(5);
+        expect(options.series[0].data[1].symbolSize).toBe(10);
+    });
+});