fix(chart-beta): add build:chartTheme command and implement chartBetaTheme function (#1436)

* fix(chart-beta): formatting issues in chart components

* fix(chart-beta): formatting issues in chart components

* fix(chart-beta): Update dependencies and imports in chart modules

* fix(chart-beta): Update dependencies and imports in chart modules

* Merge branch 'dev' of https://github.com/opentiny/tiny-vue into dev

* fix: add build:chartTheme command and implement chartBetaTheme function

internals/cli/package.json

@@ -50,7 +50,8 @@
     "create:mapping": "esno src/commands/create/create-mapping.ts",
     "build:entry-react": "esno src/index.ts build:entry-react",
     "create:mapping-react": "esno src/commands/create/create-mapping-react.ts",
-    "build:react": "esno src/index.ts build:react"
+    "build:react": "esno src/index.ts build:react",
+    "build:chartTheme": "esno src/index.ts build:chartTheme"
   },
   "dependencies": {
     "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",

internals/cli/src/commands/build/build-chart-theme.ts

@@ -0,0 +1,42 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const changeTheme = () => {
+  const THEMES = {
+    dark: 'DARK',
+    light: 'LIGHT',
+    bpit: 'BPIT_LIGHT',
+    bpit_dark: 'BPIT_DARK',
+    cloud_dark: 'CLOUD_DARK',
+    cloud: 'CLOUD_LIGHT',
+    hdesign: 'HDESIGN_LIGHT',
+    hdesign_dark: 'HDESIGN_DARK'
+  }
+
+  // 获取命令行参数
+  const theme = THEMES[process.argv[3]] || process.argv[3] || THEMES.bpit
+
+  // 确保提供了正确的主题参数
+  if (!theme) {
+    process.exit(1)
+  }
+
+  // 你想要替换的文件
+  const filePath = path.join(
+    __dirname,
+    '../../../../../packages/vue/scr/chart-beta/chart-core/base/feature/token/constants.ts'
+  )
+
+  // 读取文件内容
+  let content = fs.readFileSync(filePath, 'utf-8')
+
+  // 替换 process.env.VAR_NAME 为对应主题的值
+  content = content.replace(/const\sDEFAULT_THEME\s=\sTHEMES\.[a-zA-Z_]+/g, `const DEFAULT_THEME = THEMES.${theme}`)
+
+  // 写入新内容到文件
+  fs.writeFileSync(filePath, content, 'utf-8')
+}
+
+export const chartBetaTheme = () => {
+  changeTheme()
+}

internals/cli/src/commands/build/index.ts

@@ -2,4 +2,5 @@ export * from './build-ui'
 export * from './build-entry'
 export * from './build-runtime'
 export * from './build-ui-react'
-export * from './build-entry-react'
+export * from './build-entry-react'
+export * from './build-chart-theme'

internals/cli/src/index.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { Command, Option } from 'commander'
 import { createIconSaas } from './commands/create/index.js'
-import { buildUi, buildEntry, buildRuntime, buildReact, buildEntryReact } from './commands/build'
+import { buildUi, buildEntry, buildRuntime, buildReact, buildEntryReact, chartBetaTheme } from './commands/build'
 import { releaseAurora } from './commands/release/releaseAurora'
 
 const program = new Command()
@@ -14,6 +14,8 @@ program.command('build:entry-react').description('生成 react 组件库入口')
 
 program.command('build:entry').description('生成组件库入口').action(buildEntry)
 
+program.command('build:chartTheme').description('切换chart-beta主题').action(chartBetaTheme)
+
 program
   .command('build:ui')
   .description('打包组件库')

package.json

@@ -59,6 +59,7 @@
     "build:runtime": "pnpm -C internals/cli build:runtime",
     "// ---------- 构建相关脚本 ----------": "",
     "build:ui": "pnpm create:icon-saas && pnpm create:mapping && pnpm build:entry && gulp themeConcat && pnpm -C internals/cli build:ui",
+    "build:chartTheme": "pnpm -C internals/cli build:chartTheme",
     "build:renderless": "pnpm -C packages/renderless build:fast",
     "build:theme": "gulp themeConcat && pnpm -C packages/theme build:fast",
     "build:themeSaas": "pnpm -C packages/theme-saas build:fast",
@@ -251,4 +252,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

packages/vue/src/chart-beta/chart-histogram/src/histogram.ts

@@ -102,6 +102,9 @@ const getValueData = (seriesTemp, dims) => {
 
 const getBarSeries = (args) => {
   const { axisSite, barGap, dimAxisType, dims, innerRows, isHistogram, itemStyle } = args
+  if (!itemStyle.barWidth) {
+    itemStyle.barWidth = 'auto'
+  }
   const { label, labelMap, metrics, opacity, showLine = [], stack } = args
   let { secondAxis, secondDimAxisIndex, series = [], seriesTemp = {}, stackMap, stackNum = 0 } = {}
   secondAxis = (isHistogram ? axisSite?.right : axisSite?.top) || []