@tipp/ui 1.0.28 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "private": false,
   "sideEffects": false,
   "type": "module",
@@ -30,6 +30,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.1",
     "@tanstack/react-table": "^8.19.3",
+    "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
     "i": "^0.3.7",
     "lodash-es": "^4.17.21",

package/src/charts/chart.tsx

@@ -1,17 +1,61 @@
 import React, { useMemo } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
-import ReactECharts from 'echarts-for-react';
-import type { EChartOption } from 'echarts';
 import { merge } from 'lodash-es';
+import type { EChartsOption } from 'echarts';
+import * as echarts from 'echarts/core';
+import ReactEChartsCore from 'echarts-for-react/lib/core';
+import { PieChart, LineChart } from 'echarts/charts';
+import { SVGRenderer } from 'echarts/renderers';
+import {
+  GridSimpleComponent,
+  // PolarComponent,
+  // RadarComponent,
+  // GeoComponent,
+  // SingleAxisComponent,
+  // ParallelComponent,
+  // CalendarComponent,
+  // GraphicComponent,
+  AxisPointerComponent,
+  // BrushComponent,
+  // TimelineComponent,
+  // MarkPointComponent,
+  // MarkLineComponent,
+  // MarkAreaComponent,
+  // LegendScrollComponent,
+  // LegendPlainComponent,
+  // DataZoomComponent,
+  // DataZoomInsideComponent,
+  // DataZoomSliderComponent,
+  // VisualMapComponent,
+  // VisualMapContinuousComponent,
+  // VisualMapPiecewiseComponent,
+  AriaComponent,
+  // TransformComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  ToolboxComponent,
+} from 'echarts/components';
 import chartTheme from './chart-theme.json';
 
-export { chartTheme };
+echarts.use([
+  SVGRenderer,
+  PieChart,
+  LineChart,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  ToolboxComponent,
+  AriaComponent,
+  AxisPointerComponent,
+  GridSimpleComponent,
+]);
 
 export type ChartProps = Omit<
-  React.ComponentProps<typeof ReactECharts>,
+  React.ComponentProps<typeof ReactEChartsCore>,
   'option'
 > & {
-  option: EChartOption;
+  option: EChartsOption;
 };
 
 export function Chart(props: ChartProps): JSX.Element {
@@ -22,7 +66,7 @@ export function Chart(props: ChartProps): JSX.Element {
   });
 
   const option = useMemo(() => {
-    const baseOption: EChartOption = {
+    const baseOption: EChartsOption = {
       textStyle: { fontFamily: 'Noto Sans KR' },
       tooltip: { textStyle: { fontSize: 16 } },
     };
@@ -31,9 +75,10 @@ export function Chart(props: ChartProps): JSX.Element {
 
   return (
     <div ref={ref} style={{ width: '100%', height: '100%' }}>
-      <ReactECharts
+      <ReactEChartsCore
+        echarts={echarts}
         opts={{ renderer: 'svg' }}
-        style={{ width, height }}
+        style={{ height, width }}
         theme={chartTheme}
         {...props}
         option={option}
@@ -41,3 +86,5 @@ export function Chart(props: ChartProps): JSX.Element {
     </div>
   );
 }
+
+export { chartTheme };