@tsingroc/tsingroc-components 4.3.0 → 4.4.0

package/src/components/LineChartTable.tsx

@@ -1,18 +1,18 @@
-import type { ColumnsType, ColumnType, TableRef } from "antd/es/table";
-import { ConfigProvider, Flex, type FlexProps, Table, theme } from "antd";
+import { ConfigProvider, Flex, Table, theme, type FlexProps } from "antd";
+import { createStyles } from "antd-style";
+import type { ColumnType, ColumnsType, TableRef } from "antd/es/table";
 import type { ElementEvent, LineSeriesOption } from "echarts";
 import {
-  type TdHTMLAttributes,
   useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type TdHTMLAttributes,
 } from "react";
-import { createStyles } from "antd-style";
-import EChartsReact from "echarts-for-react";
 
 import * as echarts from "../echarts";
+import StrictECharts from "./StrictECharts";
 
 export interface LineChartTableProps extends Omit<FlexProps, "children"> {
   /** X 轴的数据。*/
@@ -70,18 +70,19 @@ function LineChartTable(props: LineChartTableProps) {
   const isDark =
     useContext(ConfigProvider.ConfigContext).theme?.algorithm ===
     theme.darkAlgorithm;
-  const echartsRef = useRef<EChartsReact>(null);
+  const echartsRef = useRef<StrictECharts>(null);
   const tableRef = useRef<TableRef>(null);
   type HoverSource = "chart" | "table";
   const [[hoverSource, hoverXIndex, hoverY], setHover] = useState<
     [] | [HoverSource, number] | [HoverSource, number, number]
   >(EMPTY);
-  let [closestYIndex, closestY]: (number | undefined)[] = [];
+  let closestYIndex: number | undefined;
+  let closestY: number | undefined;
   if (hoverXIndex !== undefined && hoverY !== undefined) {
     let minDist = Infinity;
     series.forEach((series, index) => {
       const y = series.data[hoverXIndex];
-      const dist = Math.abs(y - hoverY!);
+      const dist = Math.abs(y - hoverY);
       if (dist < minDist) {
         closestYIndex = index;
         closestY = y;
@@ -127,7 +128,7 @@ function LineChartTable(props: LineChartTableProps) {
     },
   );
   useEffect(() => {
-    const inst = echartsRef.current?.getEchartsInstance()?.getZr();
+    const inst = echartsRef.current?.getEchartsInstance().getZr();
     if (!inst) return () => {};
     const onMousemove = (event: ElementEvent) => {
       const inst = echartsRef.current?.getEchartsInstance();
@@ -199,7 +200,7 @@ function LineChartTable(props: LineChartTableProps) {
           className: cx({
             [styles.rowHovered]: data.hover !== undefined,
           }),
-          onMouseEnter: () => setHover(["table", index!]),
+          onMouseEnter: () => setHover(["table", index as number]),
           onMouseLeave: () => setHover(EMPTY),
         }),
       },
@@ -218,7 +219,7 @@ function LineChartTable(props: LineChartTableProps) {
               [styles.cellHovered]: data.hover === yIndex,
             }),
             onMouseEnter: () =>
-              setHover(["table", xIndex!, data[`y${series.name}`]]),
+              setHover(["table", xIndex as number, data[`y${series.name}`]]),
             onMouseLeave: () => setHover(EMPTY),
           }),
         }),
@@ -241,7 +242,7 @@ function LineChartTable(props: LineChartTableProps) {
   };
   return (
     <Flex vertical gap={token.marginXS} {...rest}>
-      <EChartsReact
+      <StrictECharts
         ref={echartsRef}
         option={option}
         theme={isDark ? "dark" : undefined}

package/src/components/LinkedECharts.tsx

@@ -0,0 +1,51 @@
+import * as echarts from "echarts";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+
+import StrictECharts, { type StrictEChartsProps } from "./StrictECharts";
+
+const LinkContext = createContext<string>("global");
+
+/**
+ * 联动上下文的 Provider，用于包裹需要联动的图表。
+ */
+export function EChartsLinkProvider(props: { children: ReactNode }) {
+  return (
+    <LinkContext.Provider value={useId()}>{props.children}</LinkContext.Provider>
+  );
+}
+
+/**
+ * 高阶组件，用于为任何签名与 `StrictECharts` 相同的图表组件添加联动功能。
+ */
+export function withEChartsLink(ECharts: ComponentType<StrictEChartsProps>) {
+  return forwardRef<StrictECharts, StrictEChartsProps>(
+    (props, ref): ReactNode => {
+      const group = useContext(LinkContext);
+      return (
+        <ECharts
+          // @ts-expect-error unfixable error
+          ref={ref}
+          {...props}
+          onChartReady={(instance) => {
+            instance.group = group;
+            echarts.connect(group);
+            props.onChartReady?.(instance);
+          }}
+        />
+      );
+    },
+  );
+}
+
+/**
+ * 具有联动功能的 `StrictECharts` 组件，签名与 `StrictECharts` 完全一致。
+ */
+const LinkedECharts = withEChartsLink(StrictECharts);
+export default LinkedECharts;

package/src/components/LinkedLineChart.tsx

@@ -1,33 +1,17 @@
 import { ConfigProvider, theme } from "antd";
-import {
-  createContext,
-  type ReactNode,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-} from "react";
-import EChartsReact, { type EChartsReactProps } from "echarts-for-react";
-import type { LineSeriesOption, Payload } from "echarts";
+import type { LineSeriesOption } from "echarts";
+import { createContext, useContext, type ReactNode } from "react";
 
 import * as echarts from "../echarts";
+import LinkedECharts, { EChartsLinkProvider } from "./LinkedECharts";
+import type { StrictEChartsProps } from "./StrictECharts";
 
 interface LineChartLinkContext {
-  listeners: LinkEventListener[];
   xData: (string | number)[];
   xName: string;
 }
 
-type LinkEvent = { sourceId: string } & (
-  | { type: "highlight"; xIndex: number }
-  | { type: "downplay" }
-  | { type: "datazoom"; start: number; end: number }
-);
-type LinkEventListener = (event: LinkEvent) => void;
-
 const LineChartLinkContext = createContext<LineChartLinkContext>({
-  listeners: [],
   xData: [],
   xName: "时间",
 });
@@ -50,23 +34,22 @@ export interface LineChartLinkProviderProps {
  * 用于包裹需要联动的 {@linkcode LinkedLineChart} 组件。
  */
 export function LineChartLinkProvider(props: LineChartLinkProviderProps) {
-  const listenersRef = useRef<LinkEventListener[]>([]);
-
   return (
-    <LineChartLinkContext.Provider
-      value={{
-        listeners: listenersRef.current,
-        xData: props.xData,
-        xName: props.xName ?? "时间",
-      }}
-    >
-      {props.children}
-    </LineChartLinkContext.Provider>
+    <EChartsLinkProvider>
+      <LineChartLinkContext.Provider
+        value={{
+          xData: props.xData,
+          xName: props.xName ?? "时间",
+        }}
+      >
+        {props.children}
+      </LineChartLinkContext.Provider>
+    </EChartsLinkProvider>
   );
 }
 
 export interface LinkedLineChartProps
-  extends Omit<EChartsReactProps, "option"> {
+  extends Omit<StrictEChartsProps, "option"> {
   /**
    * Y 轴的名称。
    * @default "数值"
@@ -98,9 +81,7 @@ function LinkedLineChart(props: LinkedLineChartProps) {
   const isDark =
     useContext(ConfigProvider.ConfigContext).theme?.algorithm ===
     theme.darkAlgorithm;
-  const echartsRef = useRef<EChartsReact>(null);
-  const { listeners, xData, xName } = useContext(LineChartLinkContext);
-  const currentId = useId();
+  const { xData, xName } = useContext(LineChartLinkContext);
   const option = echarts.buildEChartsOption(
     {
       backgroundColor: "transparent",
@@ -151,69 +132,9 @@ function LinkedLineChart(props: LinkedLineChartProps) {
       ],
     },
   );
-  const onEvents = useMemo(
-    () => ({
-      highlight: (payload: Payload) => {
-        const batch = payload.batch;
-        if (!batch || batch.length === 0) return;
-        listeners.forEach((listener) =>
-          listener({
-            type: "highlight",
-            sourceId: currentId,
-            xIndex: batch[0].dataIndex,
-          }),
-        );
-      },
-      downplay: () => {
-        listeners.forEach((listener) =>
-          listener({ type: "downplay", sourceId: currentId }),
-        );
-      },
-      datazoom: (payload: Payload) => {
-        listeners.forEach((listener) =>
-          listener({
-            type: "datazoom",
-            sourceId: currentId,
-            start: payload.start,
-            end: payload.end,
-          }),
-        );
-      },
-    }),
-    [currentId, listeners],
-  );
-  useEffect(() => {
-    const listener = (event: LinkEvent) => {
-      if (event.sourceId === currentId) return;
-      const chart = echartsRef.current?.getEchartsInstance();
-      if (!chart) return;
-      switch (event.type) {
-        case "highlight":
-          chart.dispatchAction(
-            { type: "showTip", seriesIndex: 0, dataIndex: event.xIndex },
-            { silent: true },
-          );
-          break;
-        case "downplay":
-          chart.setOption({ xAxis: { axisPointer: { status: "hide" } } });
-          chart.dispatchAction({ type: "hideTip" }, { silent: true });
-          break;
-        case "datazoom":
-          chart.dispatchAction(
-            { type: "dataZoom", start: event.start, end: event.end },
-            { silent: true },
-          );
-          break;
-      }
-    };
-    listeners.push(listener);
-    return () => listeners.splice(listeners.indexOf(listener), 1) && undefined;
-  }, [currentId, listeners]);
   return (
-    <EChartsReact
-      ref={echartsRef}
+    <LinkedECharts
       option={option}
-      onEvents={onEvents}
       theme={isDark ? "dark" : undefined}
       {...rest}
     />

package/src/components/QuickDateRangePicker.tsx

@@ -1,13 +1,13 @@
 import {
   Button,
-  type ButtonProps,
   DatePicker,
   Space,
+  type ButtonProps,
   type SpaceProps,
 } from "antd";
+import type { RangePickerProps } from "antd/es/date-picker";
 import dayjs, { type Dayjs } from "dayjs";
 import type { NoUndefinedRangeValueType } from "rc-picker/lib/PickerInput/RangePicker";
-import type { RangePickerProps } from "antd/es/date-picker";
 import { useState } from "react";
 
 export interface QuickDateRangePickerProps
@@ -72,8 +72,8 @@ function QuickDateRangePicker(props: QuickDateRangePickerProps) {
         value={range}
         allowClear={false}
         onChange={(range) => {
-          setRange(range!);
-          onChange?.(range!); // 由于 allowClear=false，这里 range 不可能为 null
+          setRange(range as NoUndefinedRangeValueType<Dayjs>);
+          onChange?.(range as NoUndefinedRangeValueType<Dayjs>); // 由于 allowClear=false，这里 range 不可能为 null
         }}
         {...pickerProps}
       />

package/src/components/SegmentedButtons.tsx

@@ -37,7 +37,7 @@ export function TimeUnitSwitcher(props: TimeUnitSwitcherProps) {
     <Radio.Group
       optionType="button"
       options={TIME_UNIT_OPTIONS}
-      onChange={(e) => onChange?.(e.target.value)}
+      onChange={(e) => onChange?.(e.target.value as "day" | "week" | "month")}
       {...rest}
     />
   );

package/src/components/Sidebar.tsx

@@ -1,3 +1,6 @@
+import { Button, Flex, Layout, Menu, type MenuProps } from "antd";
+import { createStyles } from "antd-style";
+import { useState, type CSSProperties, type Key, type ReactNode } from "react";
 import {
   BarChartOutlined,
   LeftOutlined,
@@ -5,9 +8,6 @@ import {
   SwapOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
-import { Button, Flex, Layout, Menu, type MenuProps } from "antd";
-import { type CSSProperties, type Key, type ReactNode, useState } from "react";
-import { createStyles } from "antd-style";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { AuthCheck, AuthProvider } from "./Auth";
@@ -178,7 +178,7 @@ function Sidebar(props: SidebarProps) {
         className={cx(styles.sidebarMenu)}
         {...rest}
       />
-      {footer === null ? null : footer?.(collapsed)}
+      {footer === null ? null : footer(collapsed)}
       {collapsible && (
         <Button
           className={cx(styles.sidebarBtn)}

package/src/components/StrictECharts.d.ts

@@ -0,0 +1,47 @@
+import type { ECharts, EChartsOption, init } from "echarts";
+import type { EChartsReactProps as OrigEChartsReactProps } from "echarts-for-react/lib/types";
+import type {
+  ECElementEvent,
+  ZRElementEventName,
+} from "echarts/types/src/util/types.js";
+import type { PureComponent } from "react";
+
+export declare type ECEventDefinition = {
+  [K in ZRElementEventName]: (params: ECElementEvent) => boolean | undefined;
+} & {
+  rendered: (params: { elapsedTime: number }) => boolean | undefined;
+  finished: () => boolean | undefined;
+} & {
+  [key: string]: (...args: unknown[]) => boolean | undefined;
+};
+
+export declare type EChartsInitOpts = typeof init extends (
+  dom?: infer _,
+  theme?: infer _,
+  opts?: infer Opts,
+) => unknown
+  ? Opts
+  : never;
+
+export declare interface StrictEChartsProps
+  extends Omit<OrigEChartsReactProps, "opts" | "shouldSetOption"> {
+  readonly option: EChartsOption;
+  readonly onEvents?: ECEventDefinition;
+  readonly onChartReady?: (instance: ECharts) => void;
+  readonly opts?: EChartsInitOpts;
+  readonly shouldSetOption?: (
+    prevProps: StrictEChartsProps,
+    props: StrictEChartsProps,
+  ) => boolean;
+}
+
+/**
+ * 类型更加严格的 `EChartsReact`，在运行时只是 `EChartsReact` 的别名。
+ */
+declare class StrictECharts extends PureComponent<StrictEChartsProps> {
+  constructor(props: StrictEChartsProps);
+  ele: HTMLElement;
+  getEchartsInstance(): ECharts;
+}
+
+export default StrictECharts;

package/src/components/StrictECharts.js

@@ -0,0 +1 @@
+export { default } from "echarts-for-react";

package/src/components/TsingrocDatePicker.tsx

@@ -1,14 +1,14 @@
 import {
-  type DatePickerProps as AntdDatePickerProps,
   Button,
-  type ButtonProps,
   DatePicker,
   Space,
+  type DatePickerProps as AntdDatePickerProps,
+  type ButtonProps,
 } from "antd";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import type { Dayjs } from "dayjs";
 import type { SpaceCompactProps } from "antd/es/space/Compact";
+import type { Dayjs } from "dayjs";
 import { useState } from "react";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 
 export interface DatePickerProps extends Omit<SpaceCompactProps, "onChange"> {
   value?: Dayjs;

package/src/components/TsingrocTheme.tsx

@@ -1,7 +1,8 @@
 import { ConfigProvider, theme } from "antd";
+import zhCN from "antd/es/locale/zh_CN";
 import dayjs from "dayjs";
 import type { ReactNode } from "react";
-import zhCN from "antd/es/locale/zh_CN";
+
 import "dayjs/locale/zh-cn";
 
 export interface TsingrocThemeProps {

package/src/components/UserButton.tsx

@@ -1,25 +1,25 @@
 import {
   Avatar,
   Button,
-  type ButtonProps,
   Dropdown,
-  type DropdownProps,
   theme,
+  type ButtonProps,
+  type DropdownProps,
 } from "antd";
+import type { Account } from "casdoor-js-sdk/lib/esm/sdk";
 import {
   DownOutlined,
   LogoutOutlined,
   UpOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import type { Account } from "casdoor-js-sdk/lib/esm/sdk";
 
 import {
   AuthCheck, // eslint-disable-line @typescript-eslint/no-unused-vars
   AuthProvider, // eslint-disable-line @typescript-eslint/no-unused-vars
+  useAuth,
   type CasdoorAuth,
   type LocalAuth,
-  useAuth,
 } from "./Auth";
 
 export interface UserButtonProps extends ButtonProps {

package/src/components/VerticalColorLegend.tsx

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "react";
 import { theme } from "antd";
+import type { HTMLAttributes } from "react";
 
 export interface VerticalColorLegendProps
   extends HTMLAttributes<HTMLDivElement> {
@@ -10,7 +10,7 @@ export interface VerticalColorLegendProps
 function VerticalColorLegend(props: VerticalColorLegendProps) {
   const { title, palette, ...rest } = props;
   const { token } = theme.useToken();
-  const max = palette.at(-1)![0];
+  const max = (palette.at(-1) as [number, [number, number, number]])[0];
   const min = palette[0][0];
   const range = max - min;
   return (
@@ -58,7 +58,7 @@ function VerticalColorLegend(props: VerticalColorLegendProps) {
               key={i}
               style={{
                 position: "relative",
-                top: ((max - value) / range) * 100 + "%",
+                top: `${((max - value) / range) * 100}%`,
               }}
             >
               {value.toFixed(1)}

package/src/components/WeatherMap.tsx

@@ -1,11 +1,13 @@
-import * as wl from "weatherlayers-gl";
-import { Button, type ButtonProps, Flex, Slider, Spin, theme } from "antd";
+import { Button, Flex, Slider, Spin, theme, type ButtonProps } from "antd";
+import { createStyles } from "antd-style";
+import dayjs from "dayjs";
+import DeckGL from "deck.gl";
 import {
+  useMemo,
+  useState,
   type CSSProperties,
   type HTMLAttributes,
   type ReactNode,
-  useMemo,
-  useState,
 } from "react";
 import { MdDewPoint, MdThermostat } from "react-icons/md";
 import {
@@ -15,10 +17,9 @@ import {
   WiRain,
   WiStrongWind,
 } from "react-icons/wi";
-import { createStyles } from "antd-style";
-import dayjs from "dayjs";
-import DeckGL from "deck.gl";
+import * as wl from "weatherlayers-gl";
 
+import { TiandituLayer } from "../deckgl";
 import {
   extractMagnitudeData,
   extractScalarData,
@@ -26,7 +27,6 @@ import {
   getBounds,
   type WeatherData,
 } from "../deckgl/WeatherData";
-import { TiandituLayer } from "../deckgl";
 import TsingrocTheme from "./TsingrocTheme";
 import VerticalColorLegend from "./VerticalColorLegend";
 
@@ -88,7 +88,7 @@ function WeatherMap(props: WeatherMapProps) {
     return adaptiveColorCoding(
       scalarFrame.min,
       scalarFrame.max,
-      selectedScalar.adaptivePalette!,
+      selectedScalar.adaptivePalette,
     );
   }, [selectedScalar, scalarFrame]);
   return (
@@ -141,7 +141,7 @@ function WeatherMap(props: WeatherMapProps) {
               tooltip={{
                 formatter: (value) =>
                   dayjs
-                    .unix(data.coords.time[value!])
+                    .unix(data.coords.time[value as number])
                     .format("YYYY-MM-DD HH:mm:ss"),
               }}
             />
@@ -298,8 +298,8 @@ interface ScalarInfo {
 }
 
 const iconSizeFix = (ratio: number): CSSProperties => ({
-  fontSize: ratio + "em",
-  margin: -(1 - 1 / ratio) / 3 + "em " + -(1 - 1 / ratio) / 2 + "em",
+  fontSize: `${ratio}em`,
+  margin: `${-(1 - 1 / ratio) / 3}em ${-(1 - 1 / ratio) / 2}em`,
 });
 
 const TEMPERATURE_ADAPTIVE_PALETTE: AdaptivePalette = {
@@ -506,6 +506,7 @@ function adaptiveColorCoding(
 }
 
 // 参考 https://dbba.sacinfo.org.cn/attachment/downloadStdFile?pk=dda6960be9435ed7ab01e336e197cd67a072a28725f03685bfbdaf19cbfeb267
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function fixedColorCoding<T>(min: number, max: number, palette: [number, T][]) {
   let minIdx = palette.findIndex(([value]) => value > min) - 1;
   if (minIdx < -1) {

package/src/deckgl/TiandituLayer.ts

@@ -1,6 +1,6 @@
 import { BitmapLayer, CompositeLayer } from "deck.gl";
-import { TileLayer, type TileLayerProps } from "@deck.gl/geo-layers";
 import type { DefaultProps } from "@deck.gl/core";
+import { TileLayer, type TileLayerProps } from "@deck.gl/geo-layers";
 
 export interface TiandituLayerProps {
   tiandituTk: string;
@@ -14,7 +14,7 @@ export default class TiandituLayer extends CompositeLayer<TiandituLayerProps> {
     type: { type: "object", value: "vec" },
     layer: { type: "object", value: "base" },
   };
-  renderLayers() {
+  renderLayers(): TileLayer {
     const { tiandituTk, type, layer } = this.props;
     const actualType = layer === "base" ? type : "c" + type[0] + "a";
     return new TileLayer(
@@ -24,7 +24,7 @@ export default class TiandituLayer extends CompositeLayer<TiandituLayerProps> {
         maxZoom: 18,
         zoomOffset: 1,
         renderSubLayers,
-      }),
+      }) as TileLayerProps,
     );
   }
 }

package/src/deckgl/WeatherData.ts

@@ -42,11 +42,11 @@ export interface WeatherData {
 export const getBounds = (data: WeatherData): BitmapBoundingBox => {
   const [lngMin, lngMax] = [
     data.coords.longitude[0],
-    data.coords.longitude.at(-1)!,
+    data.coords.longitude.at(-1) as number,
   ].sort();
   const [latMin, latMax] = [
     data.coords.latitude[0],
-    data.coords.latitude.at(-1)!,
+    data.coords.latitude.at(-1) as number,
   ].sort();
   return [lngMin, latMin, lngMax, latMax];
 };
@@ -69,7 +69,7 @@ export function extractScalarData(
   for (let i = 0; i < data.dims.longitude; i++) {
     for (let j = 0; j < data.dims.latitude; j++) {
       for (let t = 0; t < data.dims.time; t++) {
-        let value = data.data_vars[variable]![i][j][t];
+        let value = (data.data_vars[variable] as number[][][])[i][j][t];
         if (value === -9999) value = NaN;
         result[t].image.data[p] = value;
         if (value > result[t].max) result[t].max = value;
@@ -104,8 +104,8 @@ export function extractVectorData(
   for (let i = 0; i < data.dims.longitude; i++) {
     for (let j = 0; j < data.dims.latitude; j++) {
       for (let t = 0; t < data.dims.time; t++) {
-        let u = data.data_vars[variableU]![i][j][t];
-        let v = data.data_vars[variableV]![i][j][t];
+        let u = (data.data_vars[variableU] as number[][][])[i][j][t];
+        let v = (data.data_vars[variableV] as number[][][])[i][j][t];
         if (u === -9999) u = NaN;
         if (v === -9999) v = NaN;
         result[t].data[p] = u;
@@ -136,8 +136,8 @@ export function extractMagnitudeData(
   for (let i = 0; i < data.dims.longitude; i++) {
     for (let j = 0; j < data.dims.latitude; j++) {
       for (let t = 0; t < data.dims.time; t++) {
-        let u = data.data_vars[variableU]![i][j][t];
-        let v = data.data_vars[variableV]![i][j][t];
+        let u = (data.data_vars[variableU] as number[][][])[i][j][t];
+        let v = (data.data_vars[variableV] as number[][][])[i][j][t];
         if (u === -9999) u = NaN;
         if (v === -9999) v = NaN;
         const value = Math.sqrt(u * u + v * v);

package/src/echarts/coordinateSystem.ts

@@ -84,7 +84,7 @@ export function useGrid(option: GridOption): EChartsComponent {
     id: gridId + "y",
     type: option.yAxis?.type ?? "value",
     gridId,
-    nameGap: 12,
+    nameGap: 10,
     ...option.yAxis,
     nameTextStyle: {
       align: "left",
@@ -100,7 +100,7 @@ export function useGrid(option: GridOption): EChartsComponent {
     yAxis: [yAxis],
     series: option.series
       ?.flatMap((item) => item.series)
-      ?.map((series) => ({
+      .map((series) => ({
         ...series,
         coordinateSystem: "cartesian2d",
         xAxisId,
@@ -113,7 +113,7 @@ const MINIMAL_GRID: GridPreset = (grid, xAxis, yAxis) => {
   grid.top = 0;
   xAxis.show = false;
   if (
-    (xAxis.type === undefined && (xAxis as { data: [] }).data !== undefined) ||
+    (xAxis.type === undefined && (xAxis as { data?: [] }).data !== undefined) ||
     xAxis.type === "category"
   ) {
     (xAxis as { boundaryGap: boolean }).boundaryGap = false;

package/src/echarts/gl.ts

@@ -1,9 +1,10 @@
+import type { FlowGLSeriesOption as OrigFlowGLSeriesOption } from "echarts";
 import type {
   ComponentOption,
   SeriesOnCartesianOptionMixin,
   SeriesOnGeoOptionMixin,
 } from "echarts/types/src/util/types.js";
-import type { FlowGLSeriesOption as OrigFlowGLSeriesOption } from "echarts";
+
 import "echarts-gl";
 
 import type { EChartsSeries } from ".";