@tipp/ui 1.0.30 → 1.0.32

package/dist/molecules/navigation.js

@@ -1,34 +1,45 @@
 import {
   Navigation
-} from "../chunk-QOY42XM2.js";
+} from "../chunk-IBR5PQVX.js";
 import "../chunk-2ANGYYEV.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-JPIZP2PZ.js";
+import "../chunk-355MU6BH.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-5H3YPCZK.js";
+import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
+import "../chunk-6IVCARWS.js";
+import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
 import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
-import "../chunk-355MU6BH.js";
-import "../chunk-HYITAA4J.js";
-import "../chunk-5H3YPCZK.js";
-import "../chunk-FR2GDOU2.js";
+import "../chunk-O3T3TM3V.js";
+import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-XQOZWYUA.js";
-import "../chunk-3R2IB6WJ.js";
+import "../chunk-QGBUYEQN.js";
 import "../chunk-5AVBYDPB.js";
-import "../chunk-365QMK4D.js";
-import "../chunk-YO3BQW6S.js";
-import "../chunk-6IVCARWS.js";
-import "../chunk-6DJOIRMF.js";
+import "../chunk-YTZSKMX3.js";
+import "../chunk-4IKPNQV5.js";
+import "../chunk-ACVANQJ4.js";
+import "../chunk-2DZ2Y3JI.js";
+import "../chunk-CNQ7RNNY.js";
+import "../chunk-O3XTRD7R.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-2CVXGGI5.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HLOY6BIP.js";
-import "../chunk-O3T3TM3V.js";
-import "../chunk-XQOL7UBI.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-JEHDCZQU.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-KGLIAFTI.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-P6B2PNYI.js";
@@ -36,28 +47,17 @@ import "../chunk-3ANMLRG4.js";
 import "../chunk-PL3Q4UVY.js";
 import "../chunk-5XILGULJ.js";
 import "../chunk-O3DNDMV3.js";
-import "../chunk-YTZSKMX3.js";
-import "../chunk-4IKPNQV5.js";
-import "../chunk-ACVANQJ4.js";
-import "../chunk-2DZ2Y3JI.js";
-import "../chunk-CHHLIPDN.js";
-import "../chunk-25HMMI7R.js";
-import "../chunk-O3XTRD7R.js";
+import "../chunk-CZEGRZBK.js";
+import "../chunk-ALOPZ54P.js";
+import "../chunk-YGL6SWKN.js";
+import "../chunk-4Y5BEXVN.js";
 import "../chunk-AQX7DQLI.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-FYEASFUU.js";
 import "../chunk-MIMJ7LON.js";
-import "../chunk-IQEEPHOY.js";
-import "../chunk-JEHDCZQU.js";
-import "../chunk-OHMOP5PV.js";
-import "../chunk-KGLIAFTI.js";
+import "../chunk-4UZQXJQO.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
-import "../chunk-CZEGRZBK.js";
-import "../chunk-ALOPZ54P.js";
-import "../chunk-YGL6SWKN.js";
-import "../chunk-4Y5BEXVN.js";
-import "../chunk-4UZQXJQO.js";
 import "../chunk-N552FDTV.js";
 export {
   Navigation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "private": false,
   "sideEffects": false,
   "type": "module",

package/src/charts/chart-test.tsx

@@ -0,0 +1,90 @@
+import React, { useMemo } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+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';
+
+echarts.use([
+  SVGRenderer,
+  PieChart,
+  LineChart,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  ToolboxComponent,
+  AriaComponent,
+  AxisPointerComponent,
+  GridSimpleComponent,
+]);
+
+export type ChartProps = Omit<
+  React.ComponentProps<typeof ReactEChartsCore>,
+  'option'
+> & {
+  option: EChartsOption;
+};
+
+export function Chart(props: ChartProps): JSX.Element {
+  const { width, height, ref } = useResizeDetector({
+    handleHeight: false,
+    refreshMode: 'debounce',
+    refreshRate: 100,
+  });
+
+  const option = useMemo(() => {
+    const baseOption: EChartsOption = {
+      textStyle: { fontFamily: 'Noto Sans KR' },
+      tooltip: { textStyle: { fontSize: 16 } },
+    };
+    return merge(baseOption, props.option);
+  }, [props.option]);
+
+  return (
+    <div ref={ref} style={{ width: '100%', height: '100%' }}>
+      <ReactEChartsCore
+        echarts={echarts}
+        opts={{ renderer: 'svg' }}
+        style={{ height, width }}
+        theme={chartTheme}
+        {...props}
+        option={option}
+      />
+    </div>
+  );
+}
+
+export { chartTheme };

package/src/charts/chart.tsx

@@ -1,61 +1,17 @@
 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';
 
-echarts.use([
-  SVGRenderer,
-  PieChart,
-  LineChart,
-  TooltipComponent,
-  GridComponent,
-  LegendComponent,
-  ToolboxComponent,
-  AriaComponent,
-  AxisPointerComponent,
-  GridSimpleComponent,
-]);
+export { chartTheme };
 
 export type ChartProps = Omit<
-  React.ComponentProps<typeof ReactEChartsCore>,
+  React.ComponentProps<typeof ReactECharts>,
   'option'
 > & {
-  option: EChartsOption;
+  option: EChartOption;
 };
 
 export function Chart(props: ChartProps): JSX.Element {
@@ -66,7 +22,7 @@ export function Chart(props: ChartProps): JSX.Element {
   });
 
   const option = useMemo(() => {
-    const baseOption: EChartsOption = {
+    const baseOption: EChartOption = {
       textStyle: { fontFamily: 'Noto Sans KR' },
       tooltip: { textStyle: { fontSize: 16 } },
     };
@@ -75,10 +31,9 @@ export function Chart(props: ChartProps): JSX.Element {
 
   return (
     <div ref={ref} style={{ width: '100%', height: '100%' }}>
-      <ReactEChartsCore
-        echarts={echarts}
+      <ReactECharts
         opts={{ renderer: 'svg' }}
-        style={{ height, width }}
+        style={{ width, height }}
         theme={chartTheme}
         {...props}
         option={option}
@@ -86,5 +41,3 @@ export function Chart(props: ChartProps): JSX.Element {
     </div>
   );
 }
-
-export { chartTheme };