@easy-editor/materials-dashboard-radar-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-radar-chart
-
-## 0.0.3
-
-### Patch Changes
-
-- fix: build error
-
-## 0.0.2
-
-### Patch Changes
-
-- feat: new setters
+# @easy-editor/materials-dashboard-radar-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-radar-chart",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Radar Chart component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -48,20 +48,16 @@
   },
   "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 5005",
     "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,14 +1,20 @@
-import { useEffect, useRef, type CSSProperties, type Ref } from 'react'
+/**
+ * Radar Chart Component
+ * 雷达图组件 - 支持数据源绑定和事件交互
+ */
+
+import { useEffect, useMemo, useRef, type CSSProperties } from 'react'
 import * as echarts from 'echarts/core'
-import { RadarChart } from 'echarts/charts'
+import { RadarChart as EChartsRadarChart } from 'echarts/charts'
 import { TooltipComponent, LegendComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
 import type { EChartsOption } from 'echarts'
+import { type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
 import { DEFAULT_DATA, DEFAULT_SERIES, type RadarDataPoint } from './constants'
 import styles from './component.module.css'
 
 // 按需注册 ECharts 组件
-echarts.use([RadarChart, TooltipComponent, LegendComponent, CanvasRenderer])
+echarts.use([EChartsRadarChart, TooltipComponent, LegendComponent, CanvasRenderer])
 
 interface RadarSeries {
   name: string
@@ -16,17 +22,31 @@ interface RadarSeries {
   color: string
 }
 
-interface RadarChartProps {
-  ref?: Ref<HTMLDivElement>
+export interface RadarChartProps extends MaterialComponet {
+  /** 静态数据（兼容旧版） */
   data?: RadarDataPoint[]
+  /** 维度字段 */
   dimensionKey?: string
+  /** 系列配置 */
   series?: RadarSeries[]
+  /** 显示网格 */
   showGrid?: boolean
+  /** 填充透明度 */
   fillOpacity?: number
+  /** 发光效果 */
   glowEffect?: boolean
+  /** 显示图例 */
   showLegend?: boolean
+  /** 显示提示 */
   showTooltip?: boolean
-  style?: CSSProperties
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
 }
 
 // 构建图表配置
@@ -138,23 +158,39 @@ const buildOption = (
   }
 }
 
-const RadarChartComponent = (props: RadarChartProps) => {
-  const {
-    ref,
-    data = DEFAULT_DATA,
-    dimensionKey = 'dimension',
-    series = DEFAULT_SERIES,
-    showGrid = true,
-    fillOpacity = 0.3,
-    glowEffect = true,
-    showLegend = true,
-    showTooltip = true,
-    style: externalStyle,
-  } = props
-
+export const RadarChart: React.FC<RadarChartProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  data: staticData,
+  dimensionKey = 'dimension',
+  series = DEFAULT_SERIES,
+  showGrid = true,
+  fillOpacity = 0.3,
+  glowEffect = true,
+  showLegend = true,
+  showTooltip = 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<RadarDataPoint[]>(() => {
+    if (dataSource.length > 0) {
+      return dataSource as RadarDataPoint[]
+    }
+    return staticData ?? DEFAULT_DATA
+  }, [dataSource, staticData])
+
   useEffect(() => {
     if (!chartRef.current) {
       return
@@ -186,14 +222,25 @@ const RadarChartComponent = (props: RadarChartProps) => {
   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 RadarChartComponent
+export default RadarChart

package/src/configure.ts

@@ -1,247 +1,135 @@
-/**
- * Radar Chart Configure
- * 雷达图组件配置
- */
-
-import type { Configure } from '@easy-editor/core'
-
-const configure: Configure = {
-  props: [
-    {
-      type: 'group',
-      title: '属性',
-      setter: 'TabSetter',
-      items: [
-        {
-          type: 'group',
-          key: 'config',
-          title: '配置',
-          setter: {
-            componentName: 'CollapseSetter',
-            props: {
-              icon: false,
-            },
-          },
-          items: [
-            // 基础配置
-            {
-              name: 'id',
-              title: 'ID',
-              setter: 'NodeIdSetter',
-              extraProps: {
-                // @ts-expect-error label is not a valid extra prop
-                label: false,
-              },
-            },
-            {
-              name: 'title',
-              title: '标题',
-              setter: 'StringSetter',
-              extraProps: {
-                getValue(target) {
-                  return target.getExtraPropValue('title')
-                },
-                setValue(target, value) {
-                  target.setExtraPropValue('title', value)
-                },
-              },
-            },
-            {
-              type: 'group',
-              title: '基础属性',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'rect',
-                  title: '位置尺寸',
-                  setter: 'RectSetter',
-                  extraProps: {
-                    getValue(target) {
-                      return target.getExtraPropValue('$dashboard.rect')
-                    },
-                    setValue(target, value) {
-                      target.setExtraPropValue('$dashboard.rect', value)
-                    },
-                  },
-                },
-              ],
-            },
-            // 组件配置
-            {
-              type: 'group',
-              title: '数据',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'data',
-                  title: '数据',
-                  setter: 'JsonSetter',
-                },
-                {
-                  name: 'dimensionKey',
-                  title: '维度字段',
-                  setter: 'StringSetter',
-                  extraProps: {
-                    defaultValue: 'dimension',
-                  },
-                },
-                {
-                  name: 'series',
-                  title: '系列',
-                  setter: 'JsonSetter',
-                },
-              ],
-            },
-            {
-              type: 'group',
-              title: '数值格式',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'valuePrefix',
-                  title: '前缀',
-                  setter: 'StringSetter',
-                },
-                {
-                  name: 'valueSuffix',
-                  title: '后缀',
-                  setter: 'StringSetter',
-                },
-                {
-                  name: 'valueDecimals',
-                  title: '小数位数',
-                  setter: {
-                    componentName: 'NumberSetter',
-                    props: {
-                      suffix: '位',
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 0,
-                  },
-                },
-              ],
-            },
-            {
-              type: 'group',
-              title: '样式',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'showGrid',
-                  title: '显示网格',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: true,
-                  },
-                },
-                {
-                  name: 'fillOpacity',
-                  title: '填充透明度',
-                  setter: {
-                    componentName: 'SliderSetter',
-                    props: {
-                      min: 0,
-                      max: 1,
-                      step: 0.1,
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 0.3,
-                  },
-                },
-                {
-                  name: 'showLegend',
-                  title: '显示图例',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: true,
-                  },
-                },
-                {
-                  name: 'legendPosition',
-                  title: '图例位置',
-                  setter: {
-                    componentName: 'SelectSetter',
-                    props: {
-                      options: [
-                        { label: '顶部', value: 'top' },
-                        { label: '底部', value: 'bottom' },
-                        { label: '左侧', value: 'left' },
-                        { label: '右侧', value: 'right' },
-                      ],
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 'bottom',
-                  },
-                },
-                {
-                  name: 'glowEffect',
-                  title: '发光效果',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: true,
-                  },
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: 'group',
-          key: 'data',
-          title: '数据',
-          items: [
-            {
-              name: 'dataBinding',
-              title: '数据绑定',
-              setter: 'DataBindingSetter',
-            },
-          ],
-        },
-        {
-          type: 'group',
-          key: 'advanced',
-          title: '高级',
-          items: [
-            {
-              name: 'condition',
-              title: '显隐控制',
-              setter: 'SwitchSetter',
-              extraProps: {
-                defaultValue: true,
-                supportVariable: true,
-              },
-            },
-          ],
-        },
-      ],
-    },
-  ],
-  component: {},
-  supports: {},
-  advanced: {},
-}
-
-export default configure
+/**
+ * Radar Chart Configure
+ * 雷达图组件配置
+ */
+
+import type { FieldConfig } from '@easy-editor/core'
+import { createCollapseGroup, createDataConfigGroup, createStandardConfigure } from '@easy-editor/materials-shared'
+
+/** 组件配置 */
+const componentConfigGroup: FieldConfig = createCollapseGroup(
+  '组件配置',
+  [
+    {
+      type: 'group',
+      title: '组件配置',
+      setter: 'SubTabSetter',
+      items: [
+        // 数据 Tab
+        {
+          type: 'group',
+          key: 'chartData',
+          title: '数据',
+          items: [
+            {
+              name: 'dimensionKey',
+              title: '维度字段',
+              setter: 'StringSetter',
+              extraProps: {
+                defaultValue: 'dimension',
+              },
+            },
+            {
+              name: 'series',
+              title: '系列配置',
+              setter: 'JsonSetter',
+            },
+          ],
+        },
+        // 样式 Tab
+        {
+          type: 'group',
+          key: 'style',
+          title: '样式',
+          items: [
+            {
+              name: 'showGrid',
+              title: '显示网格',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+              },
+            },
+            {
+              name: 'fillOpacity',
+              title: '填充透明度',
+              setter: {
+                componentName: 'SliderSetter',
+                props: {
+                  min: 0,
+                  max: 1,
+                  step: 0.1,
+                },
+              },
+              extraProps: {
+                defaultValue: 0.3,
+              },
+            },
+            {
+              name: 'glowEffect',
+              title: '发光效果',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+              },
+            },
+          ],
+        },
+        // 图例 Tab
+        {
+          type: 'group',
+          key: 'legend',
+          title: '图例',
+          items: [
+            {
+              name: 'showLegend',
+              title: '显示图例',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+              },
+            },
+            {
+              name: 'legendPosition',
+              title: '图例位置',
+              setter: {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { label: '顶部', value: 'top' },
+                    { label: '底部', value: 'bottom' },
+                    { label: '左侧', value: 'left' },
+                    { label: '右侧', value: 'right' },
+                  ],
+                },
+              },
+              extraProps: {
+                defaultValue: 'bottom',
+              },
+            },
+            {
+              name: 'showTooltip',
+              title: '显示提示',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  {
+    padding: '6px 16px 12px',
+  },
+)
+
+/** 数据配置 */
+const dataConfigGroup: FieldConfig = createDataConfigGroup([
+  { name: 'dimension', label: 'dimension', type: 'string', required: true, description: '维度名称' },
+  { name: 'value1', label: 'value1', type: 'number', required: true, description: '数值1' },
+  { name: 'value2', label: 'value2', type: 'number', required: false, description: '数值2' },
+])
+
+export const configure = createStandardConfigure(componentConfigGroup, dataConfigGroup)