feat(ui-core): ECharts-based /charts module to replace recharts

openmetadata-ui-core-components/src/main/resources/ui/package.json

@@ -42,6 +42,11 @@
       "types": "./dist/types/src/icon/index.d.ts",
       "import": "./dist/icon/index.es.js",
       "require": "./dist/icon/index.cjs.js"
+    },
+    "./charts": {
+      "types": "./dist/types/src/charts/index.d.ts",
+      "import": "./dist/charts/index.es.js",
+      "require": "./dist/charts/index.cjs.js"
     }
   },
   "files": [
@@ -102,6 +107,8 @@
     "@tailwindcss/typography": ">=0.5.0",
     "@tailwindcss/vite": ">=4.0.0",
     "@untitledui/icons": "^0.0.21",
+    "echarts": "^6.1.0",
+    "echarts-for-react": "^3.0.6",
     "i18next": "^21.10.0",
     "input-otp": "^1.4.2",
     "react": ">=18.0.0",
@@ -116,6 +123,14 @@
     "tailwindcss-animate": ">=1.0.0",
     "tailwindcss-react-aria-components": ">=2.0.0"
   },
+  "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    },
+    "echarts-for-react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
     "@fontsource/inter": "^5.2.8",
@@ -143,6 +158,8 @@
     "@types/react-dom": "^18.2.0",
     "@untitledui/icons": "^0.0.21",
     "@vitejs/plugin-react": "^5.0.1",
+    "echarts": "^6.1.0",
+    "echarts-for-react": "^3.0.6",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.3",

openmetadata-ui-core-components/src/main/resources/ui/src/charts/area-chart.tsx

@@ -0,0 +1,21 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { CartesianChartBase } from './cartesian-chart-base';
+import { buildAreaOption } from './options/cartesian';
+import type { CartesianChartProps } from './props';
+
+/** Area chart: lines filled with a fading gradient of their colour. */
+export const AreaChart = <T extends object>(props: CartesianChartProps<T>) => (
+  <CartesianChartBase {...props} build={buildAreaOption} />
+);

openmetadata-ui-core-components/src/main/resources/ui/src/charts/bar-chart.tsx

@@ -0,0 +1,21 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { CartesianChartBase } from './cartesian-chart-base';
+import { buildBarOption } from './options/cartesian';
+import type { BarChartProps } from './props';
+
+/** Bar chart, vertical or horizontal. */
+export const BarChart = <T extends object>(props: BarChartProps<T>) => (
+  <CartesianChartBase {...props} build={buildBarOption} />
+);

openmetadata-ui-core-components/src/main/resources/ui/src/charts/cartesian-chart-base.tsx

@@ -0,0 +1,130 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import type { ECElementEvent } from 'echarts';
+import { useCallback, useMemo } from 'react';
+import { EChart } from './echart';
+import type { BarChartProps } from './props';
+import type { CartesianBuildInput, ChartOption, ChartTheme } from './types';
+
+type CartesianBuilder = <T extends object>(
+  input: CartesianBuildInput<T>,
+  theme: ChartTheme
+) => ChartOption;
+
+export type CartesianChartBaseProps<T extends object> = BarChartProps<T> & {
+  build: CartesianBuilder;
+};
+
+/**
+ * Shared body of the line, area, bar and composed charts: builds the option
+ * from props + theme, maps clicks back to the caller's row, and renders
+ * through `EChart`.
+ */
+export const CartesianChartBase = <T extends object>({
+  build,
+  data,
+  xKey,
+  series,
+  ariaLabel,
+  xAxis,
+  yAxis,
+  tooltip,
+  legend,
+  referenceLines,
+  zoom,
+  option,
+  layout,
+  getBarColor,
+  showValueLabels,
+  radius,
+  onPointClick,
+  height,
+  isDark,
+  loading,
+  emptyState,
+  className,
+  'data-testid': dataTestId,
+}: CartesianChartBaseProps<T>) => {
+  const getOption = useCallback(
+    (theme: ChartTheme) =>
+      build(
+        {
+          data,
+          xKey,
+          series,
+          ariaLabel,
+          xAxis,
+          yAxis,
+          tooltip,
+          legend,
+          referenceLines,
+          zoom,
+          option,
+          layout,
+          getBarColor,
+          showValueLabels,
+          radius,
+        },
+        theme
+      ),
+    [
+      build,
+      data,
+      xKey,
+      series,
+      ariaLabel,
+      xAxis,
+      yAxis,
+      tooltip,
+      legend,
+      referenceLines,
+      zoom,
+      option,
+      layout,
+      getBarColor,
+      showValueLabels,
+      radius,
+    ]
+  );
+
+  const onEvents = useMemo(
+    () =>
+      onPointClick
+        ? {
+            click: (event: ECElementEvent) => {
+              const datum = data[event.dataIndex];
+              if (datum) {
+                onPointClick(datum, String(event.seriesId), event);
+              }
+            },
+          }
+        : undefined,
+    [data, onPointClick]
+  );
+
+  return (
+    <EChart
+      ariaLabel={ariaLabel}
+      className={className}
+      data-testid={dataTestId}
+      emptyState={emptyState}
+      height={height}
+      isDark={isDark}
+      isEmpty={data.length === 0}
+      loading={loading}
+      option={getOption}
+      onEvents={onEvents}
+    />
+  );
+};