@easy-editor/materials-dashboard-bar-chart 0.0.2

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@easy-editor/materials-dashboard-bar-chart",
+  "version": "0.0.2",
+  "description": "Bar Chart component for EasyEditor dashboard",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "jsdelivr": "dist/index.min.js",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "homepage": "https://github.com/Easy-Editor/EasyMaterials",
+  "license": "MIT",
+  "author": "JinSo <kimjinso@qq.com>",
+  "keywords": [
+    "@easy-editor",
+    "easyeditor",
+    "low-code",
+    "dashboard",
+    "bar-chart",
+    "chart",
+    "echarts",
+    "component",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Easy-Editor/EasyMaterials",
+    "directory": "packages/dashboard/chart/bar-chart"
+  },
+  "bugs": {
+    "url": "https://github.com/Easy-Editor/EasyMaterials/issues"
+  },
+  "peerDependencies": {
+    "@easy-editor/core": "*",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "echarts": "^5.6.0",
+    "@easy-editor/materials-shared": "0.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "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"
+  },
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/index.min.js"
+}

package/rollup.config.js

@@ -0,0 +1,212 @@
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import json from '@rollup/plugin-json'
+import { terser } from 'rollup-plugin-terser'
+import cleanup from 'rollup-plugin-cleanup'
+import postcss from 'rollup-plugin-postcss'
+import pkg from './package.json' with { type: 'json' }
+
+const GLOBAL_NAME = 'EasyEditorMaterialsTechBarChart'
+
+// 外部依赖（不打包进组件）
+const external = ['react', 'react-dom', 'react/jsx-runtime', '@easy-editor/core']
+
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react/jsx-runtime': 'jsxRuntime',
+  '@easy-editor/core': 'EasyEditorCore',
+}
+
+const plugins = [
+  nodeResolve({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+  }),
+  commonjs(),
+  json(),
+  postcss({
+    modules: {
+      generateScopedName: '[name]__[local]___[hash:base64:5]',
+    },
+    autoModules: true,
+    minimize: true,
+    inject: true,
+  }),
+  babel({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+    exclude: 'node_modules/**',
+    babelrc: false,
+    babelHelpers: 'bundled',
+    presets: [
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      [
+        '@babel/preset-typescript',
+        {
+          allowDeclareFields: true,
+        },
+      ],
+    ],
+  }),
+  cleanup({
+    comments: ['some', /PURE/],
+    extensions: ['.js', '.ts'],
+  }),
+]
+
+export default [
+  /* ---------------------------------- 元数据构建 --------------------------------- */
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-bar-chart v${pkg.version} (meta, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-bar-chart v${pkg.version} (meta) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-bar-chart v${pkg.version} (meta, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 组件构建 ---------------------------------- */
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-bar-chart v${pkg.version} (component, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-bar-chart v${pkg.version} (component) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-bar-chart v${pkg.version} (component, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 完整构建 ---------------------------------- */
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-bar-chart v${pkg.version} */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.esm.js',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.cjs',
+        format: 'cjs',
+        sourcemap: true,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.min.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-bar-chart v${pkg.version} (minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+]

package/src/component.module.css

@@ -0,0 +1,16 @@
+.container {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 20, 40, 0.9) 0%,
+    rgba(0, 10, 20, 0.95) 100%
+  );
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}

package/src/component.tsx

@@ -0,0 +1,260 @@
+import { useEffect, useRef, type CSSProperties, type Ref } from 'react'
+import * as echarts from 'echarts/core'
+import { BarChart } 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 styles from './component.module.css'
+
+// 按需注册 ECharts 组件
+echarts.use([BarChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer])
+
+interface BarChartProps {
+  ref?: Ref<HTMLDivElement>
+  data?: DataPoint[]
+  xField?: string
+  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
+}
+
+interface SeriesOptions {
+  stacked: boolean
+  gradient: boolean
+  borderRadius: number
+  glowEffect: boolean
+  layout: string
+  barGap?: string
+}
+
+// 获取渐变色
+const getGradientColor = (color: string, isVertical: boolean) =>
+  new echarts.graphic.LinearGradient(isVertical ? 0 : 1, isVertical ? 1 : 0, isVertical ? 0 : 0, isVertical ? 0 : 1, [
+    { offset: 0, color: `${color}99` },
+    { offset: 1, color },
+  ])
+
+// 构建单个 series 配置
+const createBarSeries = (field: string, data: DataPoint[], color: string, options: SeriesOptions): SeriesOption => {
+  const { stacked, gradient, borderRadius, glowEffect, layout } = options
+  const isVertical = layout === 'vertical'
+
+  return {
+    name: field,
+    type: 'bar' as const,
+    data: data.map(item => item[field] as number),
+    stack: stacked ? 'total' : undefined,
+    barGap: options.barGap,
+    itemStyle: {
+      color: gradient ? getGradientColor(color, isVertical) : color,
+      borderRadius,
+      shadowColor: glowEffect ? color : 'transparent',
+      shadowBlur: glowEffect ? 10 : 0,
+    },
+  }
+}
+
+// 构建 series 配置
+const buildSeries = (yFields: string[], data: DataPoint[], colors: string[], options: SeriesOptions): SeriesOption[] =>
+  yFields.map((field, index) => {
+    const color = colors[index % colors.length]
+    return createBarSeries(field, data, color, options)
+  })
+
+// 构建图表配置
+const buildOption = (
+  data: DataPoint[],
+  xField: string,
+  series: SeriesOption[],
+  options: {
+    layout: string
+    showGrid: boolean
+    showLegend: boolean
+    showTooltip: boolean
+    glowEffect: boolean
+  },
+) => {
+  const { layout, showGrid, showLegend, showTooltip } = options
+  const isHorizontal = layout === 'horizontal'
+
+  return {
+    backgroundColor: 'transparent',
+    grid: {
+      top: showLegend ? 40 : 20,
+      right: 20,
+      bottom: 30,
+      left: isHorizontal ? 80 : 50,
+      containLabel: false,
+    },
+    xAxis: {
+      type: isHorizontal ? 'value' : 'category',
+      data: isHorizontal ? undefined : data.map(item => item[xField]),
+      axisLine: {
+        lineStyle: {
+          color: '#8899aa',
+          opacity: 0.3,
+        },
+      },
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#8899aa',
+        fontSize: isHorizontal ? 11 : 12,
+      },
+      splitLine: {
+        show: showGrid,
+        lineStyle: {
+          color: '#00d4ff',
+          opacity: 0.1,
+          type: 'dashed',
+        },
+      },
+    },
+    yAxis: {
+      type: isHorizontal ? 'category' : 'value',
+      data: isHorizontal ? data.map(item => item[xField]) : undefined,
+      axisLine: {
+        lineStyle: {
+          color: '#8899aa',
+          opacity: 0.3,
+        },
+      },
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#8899aa',
+        fontSize: isHorizontal ? 12 : 11,
+      },
+      splitLine: {
+        show: showGrid && !isHorizontal,
+        lineStyle: {
+          color: '#00d4ff',
+          opacity: 0.1,
+          type: 'dashed',
+        },
+      },
+    },
+    tooltip: showTooltip
+      ? {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+          backgroundColor: 'rgba(0, 20, 40, 0.9)',
+          borderColor: '#00d4ff',
+          borderWidth: 1,
+          textStyle: {
+            color: '#fff',
+          },
+        }
+      : undefined,
+    legend: showLegend
+      ? {
+          show: true,
+          top: 10,
+          textStyle: {
+            color: '#8899aa',
+            fontSize: 11,
+          },
+        }
+      : undefined,
+    series,
+  }
+}
+
+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
+
+  const chartRef = useRef<HTMLDivElement>(null)
+  const chartInstance = useRef<echarts.ECharts | null>(null)
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      return
+    }
+
+    chartInstance.current = echarts.init(chartRef.current)
+
+    // 构建 series
+    const series = buildSeries(yFields, data, colors, {
+      stacked,
+      gradient,
+      borderRadius,
+      glowEffect,
+      layout,
+      barGap,
+    })
+
+    const option = buildOption(data, xField, series, {
+      layout,
+      showGrid,
+      showLegend,
+      showTooltip,
+      glowEffect,
+    })
+
+    chartInstance.current.setOption(option)
+
+    const resizeObserver = new ResizeObserver(() => {
+      chartInstance.current?.resize()
+    })
+    resizeObserver.observe(chartRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+      chartInstance.current?.dispose()
+    }
+  }, [
+    data,
+    xField,
+    yFields,
+    colors,
+    layout,
+    stacked,
+    gradient,
+    borderRadius,
+    barGap,
+    showGrid,
+    showLegend,
+    showTooltip,
+    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 BarChartComponent