@easy-editor/materials-dashboard-radar-chart 0.0.3 → 0.0.4

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)

package/src/index.tsx

@@ -1,7 +1,7 @@
-/**
- * RadarChart Entry
- * 雷达图组件入口
- */
-
-export { default as component } from './component'
-export { default as meta } from './meta'
+/**
+ * RadarChart Entry
+ * 雷达图组件入口
+ */
+
+export { RadarChart as component } from './component'
+export { meta } from './meta'

package/src/meta.ts

@@ -1,23 +1,23 @@
-import type { ComponentMetadata } from '@easy-editor/core'
-import { MaterialGroup } from '@easy-editor/materials-shared'
-import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
-import configure from './configure'
-import snippets from './snippets'
-import pkg from '../package.json'
-
-const meta: ComponentMetadata = {
-  componentName: COMPONENT_NAME,
-  title: '雷达图',
-  group: MaterialGroup.CHART,
-  devMode: 'proCode',
-  npm: {
-    package: PACKAGE_NAME,
-    version: pkg.version,
-    globalName: COMPONENT_NAME,
-    componentName: COMPONENT_NAME,
-  },
-  snippets,
-  configure,
-}
-
-export default meta
+import type { ComponentMetadata } from '@easy-editor/core'
+import { MaterialGroup } from '@easy-editor/materials-shared'
+import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
+import { configure } from './configure'
+import { snippets } from './snippets'
+import pkg from '../package.json'
+
+const meta: ComponentMetadata = {
+  componentName: COMPONENT_NAME,
+  title: '雷达图',
+  group: MaterialGroup.CHART,
+  devMode: 'proCode',
+  npm: {
+    package: PACKAGE_NAME,
+    version: pkg.version,
+    globalName: COMPONENT_NAME,
+    componentName: COMPONENT_NAME,
+  },
+  snippets,
+  configure,
+}
+
+export { meta }

package/src/snippets.ts

@@ -1,57 +1,86 @@
-import type { Snippet } from '@easy-editor/core'
-import { COMPONENT_NAME, DEFAULT_DATA, DEFAULT_SERIES } from './constants'
-
-const snippets: Snippet[] = [
-  {
-    title: '雷达图',
-    screenshot: '',
-    schema: {
-      componentName: COMPONENT_NAME,
-      props: {
-        data: DEFAULT_DATA,
-        dimensionKey: 'dimension',
-        series: DEFAULT_SERIES,
-        showGrid: true,
-        fillOpacity: 0.3,
-        glowEffect: true,
-        showLegend: true,
-      },
-      $dashboard: {
-        rect: {
-          width: 400,
-          height: 300,
-        },
-      },
-    },
-  },
-  {
-    title: '单系列雷达图',
-    screenshot: '',
-    schema: {
-      componentName: COMPONENT_NAME,
-      props: {
-        data: [
-          { dimension: 'Attack', value: 85 },
-          { dimension: 'Defense', value: 70 },
-          { dimension: 'Speed', value: 95 },
-          { dimension: 'Magic', value: 60 },
-          { dimension: 'HP', value: 75 },
-        ],
-        dimensionKey: 'dimension',
-        series: [{ name: 'Stats', dataKey: 'value', color: '#00d4ff' }],
-        showGrid: true,
-        fillOpacity: 0.4,
-        glowEffect: true,
-        showLegend: false,
-      },
-      $dashboard: {
-        rect: {
-          width: 400,
-          height: 300,
-        },
-      },
-    },
-  },
-]
-
-export default snippets
+/**
+ * Radar Chart Snippets
+ * 雷达图代码片段 - 使用共享数据源生成函数
+ */
+
+import type { Snippet } from '@easy-editor/core'
+import { generateStaticDataSource } from '@easy-editor/materials-shared'
+import { COMPONENT_NAME } from './constants'
+
+/** 默认雷达图数据 */
+const DEFAULT_RADAR_DATA = [
+  { dimension: '销售', series1: 80, series2: 65 },
+  { dimension: '管理', series1: 70, series2: 85 },
+  { dimension: '技术', series1: 90, series2: 75 },
+  { dimension: '客服', series1: 75, series2: 80 },
+  { dimension: '研发', series1: 85, series2: 70 },
+]
+
+/** 默认系列配置 */
+const DEFAULT_RADAR_SERIES = [
+  { name: '系列1', dataKey: 'series1', color: '#00d4ff' },
+  { name: '系列2', dataKey: 'series2', color: '#00ff88' },
+]
+
+const snippets: Snippet[] = [
+  {
+    title: '雷达图',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      title: '雷达图',
+      props: {
+        $data: generateStaticDataSource(DEFAULT_RADAR_DATA),
+        dimensionKey: 'dimension',
+        series: DEFAULT_RADAR_SERIES,
+        showGrid: true,
+        fillOpacity: 0.3,
+        glowEffect: true,
+        showLegend: true,
+        rotation: 0,
+        opacity: 100,
+        background: 'transparent',
+      },
+      $dashboard: {
+        rect: {
+          width: 400,
+          height: 300,
+        },
+      },
+    },
+  },
+  {
+    title: '单系列雷达图',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      title: '单系列雷达图',
+      props: {
+        $data: generateStaticDataSource([
+          { dimension: 'Attack', value: 85 },
+          { dimension: 'Defense', value: 70 },
+          { dimension: 'Speed', value: 95 },
+          { dimension: 'Magic', value: 60 },
+          { dimension: 'HP', value: 75 },
+        ]),
+        dimensionKey: 'dimension',
+        series: [{ name: 'Stats', dataKey: 'value', color: '#00d4ff' }],
+        showGrid: true,
+        fillOpacity: 0.4,
+        glowEffect: true,
+        showLegend: false,
+        rotation: 0,
+        opacity: 100,
+        background: 'transparent',
+      },
+      $dashboard: {
+        rect: {
+          width: 400,
+          height: 300,
+        },
+      },
+    },
+  },
+]
+
+export { snippets }

package/tsconfig.json

@@ -1,9 +1,20 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "extends": "./tsconfig.build.json",
-  "include": ["./src", "./test"]
-}
+{
+  "compilerOptions": {
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "target": "ESNext",
+    "newLine": "LF",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strictPropertyInitialization": false,
+    "outDir": "./dist",
+    "skipLibCheck": true,
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["./src"]
+}