@easy-editor/materials-dashboard-bar-chart 0.0.3 → 0.0.5

package/.vite/echarts-external-plugin.ts

@@ -0,0 +1,61 @@
+// 自定义插件：处理 echarts 模块的命名导出
+export const echartsExternalPlugin = () => {
+  const ECHARTS_MODULES = ['echarts', 'echarts/core', 'echarts/charts', 'echarts/components', 'echarts/renderers']
+  const VIRTUAL_PREFIX = '\0virtual:echarts-external:'
+
+  return {
+    name: 'vite-plugin-echarts-external',
+    enforce: 'pre',
+    resolveId(id) {
+      if (ECHARTS_MODULES.includes(id)) {
+        return VIRTUAL_PREFIX + id
+      }
+      return null
+    },
+    load(id) {
+      if (!id.startsWith(VIRTUAL_PREFIX)) {
+        return null
+      }
+      const moduleName = id.slice(VIRTUAL_PREFIX.length)
+      const globalKey = moduleName.includes('/') ? `["${moduleName}"]` : `.${moduleName}`
+
+      return `
+// External module: ${moduleName} -> window${globalKey}
+const mod = window${globalKey} || window.echarts;
+if (!mod) {
+  throw new Error('External dependency "${moduleName}" is not available on window.');
+}
+export default mod;
+export const {
+  ${getExportsForModule(moduleName)}
+} = mod;
+`
+    },
+  }
+}
+
+// 根据模块名返回需要导出的属性
+function getExportsForModule(moduleName) {
+  switch (moduleName) {
+    case 'echarts/core':
+      return 'use, init, graphic, registerMap, getMap'
+    case 'echarts/charts':
+      return 'MapChart, LinesChart, EffectScatterChart, BarChart, LineChart, PieChart, RadarChart, ScatterChart, GaugeChart'
+    case 'echarts/components':
+      return 'GeoComponent, TooltipComponent, LegendComponent, GridComponent, VisualMapComponent, TitleComponent'
+    case 'echarts/renderers':
+      return 'CanvasRenderer, SVGRenderer'
+    default:
+      return 'use, init, graphic, registerMap'
+  }
+}
+
+// echarts 模块列表
+export const ECHARTS_EXTERNALS = ['echarts', 'echarts/core', 'echarts/charts', 'echarts/components', 'echarts/renderers']
+export const ECHARTS_GLOBALS = {
+  echarts: 'echarts',
+  'echarts/core': 'echarts',
+  'echarts/charts': 'echarts',
+  'echarts/components': 'echarts',
+  'echarts/renderers': 'echarts',
+}

package/CHANGELOG.md

@@ -1,13 +1,27 @@
-# @easy-editor/materials-dashboard-bar-chart
-
-## 0.0.3
-
-### Patch Changes
-
-- fix: build error
-
-## 0.0.2
-
-### Patch Changes
-
-- feat: new setters
+# @easy-editor/materials-dashboard-bar-chart
+
+## 0.0.5
+
+### Patch Changes
+
+- fix: component export error
+
+## 0.0.4
+
+### Patch Changes
+
+- perf: configure & datasource
+- Updated dependencies
+  - @easy-editor/materials-shared@0.0.1
+
+## 0.0.3
+
+### Patch Changes
+
+- fix: build error
+
+## 0.0.2
+
+### Patch Changes
+
+- feat: new setters

package/easypack.config.ts

@@ -0,0 +1,19 @@
+/**
+ * @easy-editor/easypack configuration
+ * @type {import('@easy-editor/easypack').EasypackConfig}
+ */
+import { ECHARTS_EXTERNALS, ECHARTS_GLOBALS, echartsExternalPlugin } from './.vite/echarts-external-plugin'
+
+export default {
+  preset: 'material',
+  dev: {
+    port: 5001,
+  },
+  rollup: {
+    external: ECHARTS_EXTERNALS,
+    output: {
+      globals: ECHARTS_GLOBALS,
+    },
+  },
+  vitePlugins: [echartsExternalPlugin()],
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/materials-dashboard-bar-chart",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Bar Chart component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -44,24 +44,20 @@
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "@types/react": "^18 || ^19",
-    "@types/react-dom": "^18 || ^19"
+    "@types/react-dom": "^18 || ^19",
+    "echarts": "^5"
   },
   "dependencies": {
-    "echarts": "^5.6.0",
-    "@easy-editor/materials-shared": "0.0.0"
+    "@easy-editor/materials-shared": "0.0.1"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "easypack dev",
     "dev:debug": "vite --port 5003",
     "format": "biome format --write .",
     "lint": "biome check .",
     "build": "npm-run-all -nl build:*",
     "build:clean": "rimraf dist/",
-    "build:js": "rollup -c",
-    "build:types": "pnpm types",
-    "types": "npm-run-all -nl types:*",
-    "types:src": "tsc --project tsconfig.build.json",
-    "test-types": "tsc --project tsconfig.test.json"
+    "build:js": "easypack build"
   },
   "module": "dist/index.esm.js",
   "unpkg": "dist/index.min.js"

package/src/component.tsx

@@ -1,31 +1,54 @@
-import { useEffect, useRef, type CSSProperties, type Ref } from 'react'
+/**
+ * Bar Chart Component
+ * 柱状图组件 - 支持数据源绑定和事件交互
+ */
+
+import { useEffect, useMemo, useRef, type CSSProperties } from 'react'
 import * as echarts from 'echarts/core'
-import { BarChart } from 'echarts/charts'
+import { BarChart as EChartsBarChart } from 'echarts/charts'
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
 import type { SeriesOption } from 'echarts'
-import { DEFAULT_COLORS, DEFAULT_DATA, type DataPoint } from './constants'
+import { type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
+import { DEFAULT_COLORS, type DataPoint } from './constants'
 import styles from './component.module.css'
 
 // 按需注册 ECharts 组件
-echarts.use([BarChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer])
+echarts.use([EChartsBarChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer])
 
-interface BarChartProps {
-  ref?: Ref<HTMLDivElement>
-  data?: DataPoint[]
+export interface BarChartProps extends MaterialComponet {
+  /** X轴字段 */
   xField?: string
+  /** Y轴字段列表 */
   yFields?: string[]
+  /** 颜色列表 */
   colors?: string[]
+  /** 布局方向 */
   layout?: 'vertical' | 'horizontal'
+  /** 堆叠模式 */
   stacked?: boolean
+  /** 渐变填充 */
   gradient?: boolean
+  /** 圆角 */
   borderRadius?: number
+  /** 柱间距 */
   barGap?: string
+  /** 显示网格 */
   showGrid?: boolean
+  /** 显示图例 */
   showLegend?: boolean
+  /** 显示提示 */
   showTooltip?: boolean
+  /** 发光效果 */
   glowEffect?: boolean
-  style?: CSSProperties
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
 }
 
 interface SeriesOptions {
@@ -170,28 +193,47 @@ const buildOption = (
   }
 }
 
-const BarChartComponent = (props: BarChartProps) => {
-  const {
-    ref,
-    data = DEFAULT_DATA,
-    xField = 'name',
-    yFields = ['value1', 'value2'],
-    colors = DEFAULT_COLORS,
-    layout = 'vertical',
-    stacked = false,
-    gradient = true,
-    borderRadius = 4,
-    barGap = '20%',
-    showGrid = true,
-    showLegend = true,
-    showTooltip = true,
-    glowEffect = true,
-    style: externalStyle,
-  } = props
-
+export const BarChart: React.FC<BarChartProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  xField = 'name',
+  yFields = ['value1', 'value2'],
+  colors = DEFAULT_COLORS,
+  layout = 'vertical',
+  stacked = false,
+  gradient = true,
+  borderRadius = 4,
+  barGap = '20%',
+  showGrid = true,
+  showLegend = true,
+  showTooltip = true,
+  glowEffect = true,
+  rotation = 0,
+  opacity = 100,
+  background = 'transparent',
+  style: externalStyle,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
   const chartRef = useRef<HTMLDivElement>(null)
   const chartInstance = useRef<echarts.ECharts | null>(null)
 
+  // 解析数据源
+  const dataSource = useDataSource($data, __dataSource)
+  const data = useMemo<DataPoint[]>(() => {
+    if (dataSource.length > 0 && dataSource[0]?.name && dataSource[0]?.value1 && dataSource[0]?.value2) {
+      return dataSource.map(item => ({
+        name: String(item.name),
+        value1: Number(item.value1),
+        value2: Number(item.value2),
+      }))
+    }
+    return []
+  }, [dataSource])
+
   useEffect(() => {
     if (!chartRef.current) {
       return
@@ -247,14 +289,25 @@ const BarChartComponent = (props: BarChartProps) => {
   const containerStyle: CSSProperties = {
     width: '100%',
     height: '100%',
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
+    backgroundColor: background,
     ...externalStyle,
   }
 
   return (
-    <div className={styles.container} ref={ref} style={containerStyle}>
+    <div
+      className={styles.container}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={containerStyle}
+    >
       <div className={styles.chart} ref={chartRef} />
     </div>
   )
 }
 
-export default BarChartComponent
+export default BarChart