@easy-editor/materials-dashboard-gauge-chart 0.0.2 → 0.0.3

package/dist/meta.min.js

@@ -1,2 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsGaugeChartMeta={})}(this,function(e){"use strict";const t="EasyEditorMaterialsGaugeChart";const r={componentName:t,title:"仪表盘",group:"chart",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-gauge-chart",version:"0.0.1",globalName:t,componentName:t},snippets:[{title:"仪表盘",screenshot:"",schema:{componentName:t,props:{value:65,min:0,max:100,showScale:!0,divisions:10,showLabels:!0,pointerType:"needle",pointerColor:"#ffffff"},$dashboard:{rect:{width:220,height:140}}}},{title:"发光仪表盘",screenshot:"",schema:{componentName:t,props:{value:78,min:0,max:100,unit:"%",showScale:!0,divisions:10,showLabels:!0,pointerType:"needle",pointerColor:"#00ffff",glowEffect:!0},$dashboard:{rect:{width:220,height:140}}}}],configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"id",title:"ID",setter:"NodeIdSetter",extraProps:{label:!1}},{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{type:"group",title:"基础属性",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}}]},{type:"group",title:"数值",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"value",title:"当前值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"min",title:"最小值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"max",title:"最大值",setter:"NumberSetter",extraProps:{defaultValue:100}},{name:"unit",title:"单位",setter:"StringSetter"}]},{type:"group",title:"数值格式",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"valuePrefix",title:"前缀",setter:"StringSetter"},{name:"valueSuffix",title:"后缀",setter:"StringSetter"},{name:"valueDecimals",title:"小数位数",setter:{componentName:"NumberSetter",props:{suffix:"位"}},extraProps:{defaultValue:0}},{name:"valueSeparator",title:"千分位分隔",setter:"SwitchSetter",extraProps:{defaultValue:!1}}]},{type:"group",title:"刻度",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"showScale",title:"显示刻度",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"divisions",title:"刻度数量",setter:{componentName:"SliderSetter",props:{min:2,max:20,step:1}},extraProps:{defaultValue:10}},{name:"showLabels",title:"显示刻度值",setter:"SwitchSetter",extraProps:{defaultValue:!0}}]},{type:"group",title:"样式",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"pointerType",title:"指针类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"针形",value:"needle"},{label:"三角形",value:"triangle"},{label:"矩形",value:"rect"}]}},extraProps:{defaultValue:"needle"}},{name:"pointerColor",title:"指针颜色",setter:"ColorSetter",extraProps:{defaultValue:"#ffffff"}},{name:"glowEffect",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}}]}]},{type:"group",key:"data",title:"数据",items:[{name:"dataBinding",title:"数据绑定",setter:"DataBindingSetter"}]},{type:"group",key:"advanced",title:"高级",items:[{name:"condition",title:"显隐控制",setter:"SwitchSetter",extraProps:{defaultValue:!0,supportVariable:!0}}]}]}],component:{},supports:{},advanced:{}}};e.default=r,Object.defineProperty(e,"__esModule",{value:!0})});
-//# sourceMappingURL=meta.min.js.map
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsGaugeChartMeta={})}(this,function(e){"use strict";const t=(e,t)=>{const a=Array.isArray(e)?e:[e],r=a[0]||{};return{sourceType:"static",staticData:a,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},a=(e,t,a)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...a}},items:t}),r={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o=a("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),l=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],i=((e=l)=>a("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),s=a("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]),n="EasyEditorMaterialsGaugeChart";const p=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[r,o,e]},{type:"group",key:"data",title:"数据",items:[r,t]},{type:"group",key:"advanced",title:"高级",items:[r,i,s]}]}],component:{},supports:{},advanced:{}}))(a("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"value",title:"数值",items:[{name:"min",title:"最小值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"max",title:"最大值",setter:"NumberSetter",extraProps:{defaultValue:100}},{name:"unit",title:"单位",setter:"StringSetter"}]},{type:"group",key:"scale",title:"刻度",items:[{name:"showScale",title:"显示刻度",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"divisions",title:"刻度数量",setter:{componentName:"SliderSetter",props:{min:2,max:20,step:1}},extraProps:{defaultValue:10}},{name:"showLabels",title:"显示刻度值",setter:"SwitchSetter",extraProps:{defaultValue:!0}}]},{type:"group",key:"style",title:"样式",items:[{name:"pointerType",title:"指针类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"针形",value:"needle"},{label:"三角形",value:"triangle"},{label:"矩形",value:"rect"}]}},extraProps:{defaultValue:"needle"}},{name:"pointerColor",title:"指针颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}},{name:"glowEffect",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!0}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"value",label:"value",type:"number",required:!0,description:"当前值"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const u={componentName:n,title:"仪表盘",group:"chart",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-gauge-chart",version:"0.0.3",globalName:n,componentName:n},snippets:[{title:"仪表盘",screenshot:"",schema:{componentName:n,title:"仪表盘",props:{$data:t({value:65}),min:0,max:100,showScale:!0,divisions:10,showLabels:!0,pointerType:"needle",pointerColor:"#ffffff",rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:220,height:140}}}},{title:"发光仪表盘",screenshot:"",schema:{componentName:n,title:"发光仪表盘",props:{$data:t({value:78}),min:0,max:100,unit:"%",showScale:!0,divisions:10,showLabels:!0,pointerType:"needle",pointerColor:"#00ffff",glowEffect:!0,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:220,height:140}}}}],configure:p};e.meta=u});

package/easypack.config.ts

@@ -0,0 +1,10 @@
+/**
+ * @easy-editor/easypack configuration
+ * @type {import('@easy-editor/easypack').EasypackConfig}
+ */
+export default {
+  preset: 'material',
+  dev: {
+    port: 5001,
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/materials-dashboard-gauge-chart",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Gauge Chart component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -47,20 +47,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 5006",
     "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,180 +1,225 @@
-import { useEffect, useRef, type CSSProperties, type Ref } from 'react'
-import * as echarts from 'echarts/core'
-import { GaugeChart } from 'echarts/charts'
-import { TooltipComponent } from 'echarts/components'
-import { CanvasRenderer } from 'echarts/renderers'
-import type { EChartsOption } from 'echarts'
-import { DEFAULT_RANGES, type GaugeRange } from './constants'
-import styles from './component.module.css'
-
-// 按需注册 ECharts 组件
-echarts.use([GaugeChart, TooltipComponent, CanvasRenderer])
-
-interface GaugeChartProps {
-  ref?: Ref<HTMLDivElement>
-  value?: number
-  min?: number
-  max?: number
-  unit?: string
-  showScale?: boolean
-  divisions?: number
-  showLabels?: boolean
-  pointerType?: 'needle' | 'triangle' | 'rect'
-  pointerColor?: string
-  ranges?: GaugeRange[]
-  glowEffect?: boolean
-  style?: CSSProperties
-}
-
-const GaugeChartComponent = (props: GaugeChartProps) => {
-  const {
-    ref,
-    value = 0,
-    min = 0,
-    max = 100,
-    unit = '',
-    showScale = true,
-    divisions = 10,
-    showLabels = true,
-    pointerType = 'needle',
-    pointerColor = '#00d4ff',
-    ranges = DEFAULT_RANGES,
-    glowEffect = true,
-    style: externalStyle,
-  } = props
-
-  const chartRef = useRef<HTMLDivElement>(null)
-  const chartInstance = useRef<echarts.ECharts | null>(null)
-
-  useEffect(() => {
-    if (!chartRef.current) {
-      return
-    }
-
-    chartInstance.current = echarts.init(chartRef.current)
-
-    // 构建颜色区间
-    const axisLineColors: [number, string][] = ranges.map(range => [(range.to - min) / (max - min), range.color])
-
-    // 指针宽度根据类型调整
-    const pointerWidthMap: Record<string, number> = {
-      needle: 4,
-      triangle: 8,
-      rect: 6,
-    }
-    const pointerWidth = pointerWidthMap[pointerType] ?? 6
-
-    const option: EChartsOption = {
-      backgroundColor: 'transparent',
-      series: [
-        {
-          type: 'gauge',
-          min,
-          max,
-          startAngle: 180,
-          endAngle: 0,
-          center: ['50%', '70%'],
-          radius: '90%',
-          progress: {
-            show: false,
-          },
-          axisLine: {
-            lineStyle: {
-              width: 20,
-              color: axisLineColors,
-              shadowColor: glowEffect ? 'rgba(0, 212, 255, 0.3)' : 'transparent',
-              shadowBlur: glowEffect ? 10 : 0,
-            },
-          },
-          axisTick: {
-            show: showScale,
-            distance: -25,
-            length: 6,
-            lineStyle: {
-              color: '#8899aa',
-              width: 1,
-            },
-            splitNumber: divisions / 5,
-          },
-          splitLine: {
-            show: showScale,
-            distance: -30,
-            length: 12,
-            lineStyle: {
-              color: '#8899aa',
-              width: 2,
-            },
-          },
-          axisLabel: {
-            show: showLabels,
-            distance: -40,
-            color: '#8899aa',
-            fontSize: 10,
-          },
-          pointer: {
-            show: true,
-            length: '60%',
-            width: pointerWidth,
-            itemStyle: {
-              color: pointerColor,
-              shadowColor: glowEffect ? pointerColor : 'transparent',
-              shadowBlur: glowEffect ? 10 : 0,
-            },
-          },
-          anchor: {
-            show: true,
-            size: 12,
-            itemStyle: {
-              color: pointerColor,
-              shadowColor: glowEffect ? pointerColor : 'transparent',
-              shadowBlur: glowEffect ? 5 : 0,
-            },
-          },
-          title: {
-            show: true,
-            offsetCenter: [0, '30%'],
-            color: '#8899aa',
-            fontSize: 12,
-          },
-          detail: {
-            valueAnimation: true,
-            offsetCenter: [0, '50%'],
-            fontSize: 28,
-            fontWeight: 'bold',
-            color: '#fff',
-            formatter: (val: number) => `${val}${unit}`,
-            textShadowColor: glowEffect ? 'rgba(0, 212, 255, 0.5)' : 'transparent',
-            textShadowBlur: glowEffect ? 10 : 0,
-          },
-          data: [{ value }],
-        },
-      ],
-    }
-
-    chartInstance.current.setOption(option)
-
-    const resizeObserver = new ResizeObserver(() => {
-      chartInstance.current?.resize()
-    })
-    resizeObserver.observe(chartRef.current)
-
-    return () => {
-      resizeObserver.disconnect()
-      chartInstance.current?.dispose()
-    }
-  }, [value, min, max, unit, showScale, divisions, showLabels, pointerType, pointerColor, ranges, glowEffect])
-
-  const containerStyle: CSSProperties = {
-    width: '100%',
-    height: '100%',
-    ...externalStyle,
-  }
-
-  return (
-    <div className={styles.container} ref={ref} style={containerStyle}>
-      <div className={styles.chart} ref={chartRef} />
-    </div>
-  )
-}
-
-export default GaugeChartComponent
+/**
+ * Gauge Chart Component
+ * 仪表盘组件 - 支持数据源绑定和事件交互
+ */
+
+import { useEffect, useMemo, useRef, type CSSProperties } from 'react'
+import * as echarts from 'echarts/core'
+import { GaugeChart as EChartsGaugeChart } from 'echarts/charts'
+import { TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import type { EChartsOption } from 'echarts'
+import { type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
+import { DEFAULT_RANGES, type GaugeRange } from './constants'
+import styles from './component.module.css'
+
+// 按需注册 ECharts 组件
+echarts.use([EChartsGaugeChart, TooltipComponent, CanvasRenderer])
+
+export interface GaugeChartProps extends MaterialComponet {
+  /** 最小值 */
+  min?: number
+  /** 最大值 */
+  max?: number
+  /** 单位 */
+  unit?: string
+  /** 显示刻度 */
+  showScale?: boolean
+  /** 刻度数量 */
+  divisions?: number
+  /** 显示刻度值 */
+  showLabels?: boolean
+  /** 指针类型 */
+  pointerType?: 'needle' | 'triangle' | 'rect'
+  /** 指针颜色 */
+  pointerColor?: string
+  /** 颜色区间 */
+  ranges?: GaugeRange[]
+  /** 发光效果 */
+  glowEffect?: boolean
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
+}
+
+export const GaugeChart: React.FC<GaugeChartProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  min = 0,
+  max = 100,
+  unit = '',
+  showScale = true,
+  divisions = 10,
+  showLabels = true,
+  pointerType = 'needle',
+  pointerColor = '#00d4ff',
+  ranges = DEFAULT_RANGES,
+  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 value = useMemo<number>(() => {
+    if (dataSource.length > 0 && dataSource[0]?.value !== undefined) {
+      return Number(dataSource[0].value)
+    }
+    return 0
+  }, [dataSource])
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      return
+    }
+
+    chartInstance.current = echarts.init(chartRef.current)
+
+    // 构建颜色区间
+    const axisLineColors: [number, string][] = ranges.map(range => [(range.to - min) / (max - min), range.color])
+
+    // 指针宽度根据类型调整
+    const pointerWidthMap: Record<string, number> = {
+      needle: 4,
+      triangle: 8,
+      rect: 6,
+    }
+    const pointerWidth = pointerWidthMap[pointerType] ?? 6
+
+    const option: EChartsOption = {
+      backgroundColor: 'transparent',
+      series: [
+        {
+          type: 'gauge',
+          min,
+          max,
+          startAngle: 180,
+          endAngle: 0,
+          center: ['50%', '80%'],
+          radius: '72%',
+          progress: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              width: 16,
+              color: axisLineColors,
+              shadowColor: glowEffect ? 'rgba(0, 212, 255, 0.3)' : 'transparent',
+              shadowBlur: glowEffect ? 10 : 0,
+            },
+          },
+          axisTick: {
+            show: showScale,
+            distance: -20,
+            length: 4,
+            lineStyle: {
+              color: '#8899aa',
+              width: 1,
+            },
+            splitNumber: divisions / 5,
+          },
+          splitLine: {
+            show: showScale,
+            distance: -24,
+            length: 8,
+            lineStyle: {
+              color: '#8899aa',
+              width: 2,
+            },
+          },
+          axisLabel: {
+            show: showLabels,
+            distance: -32,
+            color: '#8899aa',
+            fontSize: 9,
+          },
+          pointer: {
+            show: true,
+            length: '55%',
+            width: pointerWidth,
+            itemStyle: {
+              color: pointerColor,
+              shadowColor: glowEffect ? pointerColor : 'transparent',
+              shadowBlur: glowEffect ? 10 : 0,
+            },
+          },
+          anchor: {
+            show: true,
+            size: 10,
+            itemStyle: {
+              color: pointerColor,
+              shadowColor: glowEffect ? pointerColor : 'transparent',
+              shadowBlur: glowEffect ? 5 : 0,
+            },
+          },
+          title: {
+            show: true,
+            offsetCenter: [0, '20%'],
+            color: '#8899aa',
+            fontSize: 11,
+          },
+          detail: {
+            valueAnimation: true,
+            offsetCenter: [0, '40%'],
+            fontSize: 22,
+            fontWeight: 'bold',
+            color: '#fff',
+            formatter: (val: number) => `${val}${unit}`,
+            textShadowColor: glowEffect ? 'rgba(0, 212, 255, 0.5)' : 'transparent',
+            textShadowBlur: glowEffect ? 10 : 0,
+          },
+          data: [{ value }],
+        },
+      ],
+    }
+
+    chartInstance.current.setOption(option)
+
+    const resizeObserver = new ResizeObserver(() => {
+      chartInstance.current?.resize()
+    })
+    resizeObserver.observe(chartRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+      chartInstance.current?.dispose()
+    }
+  }, [value, min, max, unit, showScale, divisions, showLabels, pointerType, pointerColor, ranges, glowEffect])
+
+  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}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={containerStyle}
+    >
+      <div className={styles.chart} ref={chartRef} />
+    </div>
+  )
+}