This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/echarts-theme-builder.git
commit 2a708147eee74de335f0eb5bc098ce873aa60fe6 Author: Ovilia <[email protected]> AuthorDate: Thu Sep 18 14:33:02 2025 +0800 feat: add debounce; fix background --- .gitignore | 1 + config/env.asf.js | 11 ++++-- index.html | 2 +- package-lock.json | 76 ++++++++++++++++++++++++++++++++++++ package.json | 7 +++- public/vite.svg | 1 - src/components/ChartPreviewPanel.vue | 22 ++++++++++- src/utils/chartConfigs.ts | 36 +---------------- src/utils/themeGenerator.ts | 4 +- vite.config.ts | 12 +++--- 10 files changed, 122 insertions(+), 50 deletions(-) diff --git a/.gitignore b/.gitignore index 6c37f57..1b8c48f 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ app/bower_components test/bower_components app/vendors/echarts.js .DS_Store +app diff --git a/config/env.asf.js b/config/env.asf.js index 5ad8110..0a31d34 100644 --- a/config/env.asf.js +++ b/config/env.asf.js @@ -1,6 +1,11 @@ -const path = require('path'); +import path from 'path'; +import { fileURLToPath } from 'url'; -module.exports = { +// Get __dirname equivalent in ESM +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +export default { releaseDestDir: path.resolve(__dirname, '../../echarts-website'), ecWWWGeneratedDir: path.resolve(__dirname, '../../echarts-www/_generated') -}; \ No newline at end of file +}; diff --git a/index.html b/index.html index 8471fe0..cae8da6 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ <title>Apache ECharts Theme Builder</title> </head> <body> - <div id="app"></div> + <div id="theme-builder"></div> <script type="module" src="/src/main.ts"></script> </body> </html> diff --git a/package-lock.json b/package-lock.json index 2d242d5..edc6243 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,9 +15,12 @@ "vue3-colorpicker": "^2.3.0" }, "devDependencies": { + "@types/fs-extra": "^11.0.4", "@types/node": "^24.4.0", "@vitejs/plugin-vue": "^6.0.1", "@vue/tsconfig": "^0.7.0", + "copy-dir": "^1.3.0", + "fs-extra": "^11.3.1", "typescript": "~5.8.3", "vite": "^7.1.2", "vue-tsc": "^3.0.5" @@ -871,6 +874,27 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/fs-extra": { + "version": "11.0.4", + "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.4.tgz";, + "integrity": "sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/jsonfile": "*", + "@types/node": "*" + } + }, + "node_modules/@types/jsonfile": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/@types/jsonfile/-/jsonfile-6.1.4.tgz";, + "integrity": "sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/node": { "version": "24.4.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-24.4.0.tgz";, @@ -1204,6 +1228,13 @@ "dev": true, "license": "MIT" }, + "node_modules/copy-dir": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/copy-dir/-/copy-dir-1.3.0.tgz";, + "integrity": "sha512-Q4+qBFnN4bwGwvtXXzbp4P/4iNk0MaiGAzvQ8OiMtlLjkIKjmNN689uVzShSM0908q7GoFHXIPx4zi75ocoaHw==", + "dev": true, + "license": "MIT" + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz";, @@ -1305,6 +1336,21 @@ } } }, + "node_modules/fs-extra": { + "version": "11.3.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.1.tgz";, + "integrity": "sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz";, @@ -1320,6 +1366,13 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz";, + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true, + "license": "ISC" + }, "node_modules/gradient-parser": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-1.1.1.tgz";, @@ -1347,6 +1400,19 @@ "node": ">=0.10.0" } }, + "node_modules/jsonfile": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz";, + "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/lodash-es": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz";, @@ -1540,6 +1606,16 @@ "dev": true, "license": "MIT" }, + "node_modules/universalify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz";, + "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/vant": { "version": "4.9.21", "resolved": "https://registry.npmjs.org/vant/-/vant-4.9.21.tgz";, diff --git a/package.json b/package.json index 4054f72..f077d96 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "scripts": { "dev": "vite", "build": "vue-tsc -b && vite build", - "preview": "vite preview" + "preview": "http-server app", + "serve": "http-server app", + "release": "RELEASE=true vue-tsc -b && RELEASE=true vite build" }, "dependencies": { "echarts": "^6.0.0", @@ -16,9 +18,12 @@ "vue3-colorpicker": "^2.3.0" }, "devDependencies": { + "@types/fs-extra": "^11.0.4", "@types/node": "^24.4.0", "@vitejs/plugin-vue": "^6.0.1", "@vue/tsconfig": "^0.7.0", + "copy-dir": "^1.3.0", + "fs-extra": "^11.3.1", "typescript": "~5.8.3", "vite": "^7.1.2", "vue-tsc": "^3.0.5" diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb [...] \ No newline at end of file diff --git a/src/components/ChartPreviewPanel.vue b/src/components/ChartPreviewPanel.vue index 839e29a..37e0919 100644 --- a/src/components/ChartPreviewPanel.vue +++ b/src/components/ChartPreviewPanel.vue @@ -26,6 +26,22 @@ import { getChartConfigs } from '../utils/chartConfigs' import { useThemeStore } from '../stores/theme' import type { ECharts } from 'echarts' +// Debounce function to limit how often a function can be called +function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void { + let timer: ReturnType<typeof setTimeout> | null = null + + return function(this: any, ...args: Parameters<T>) { + if (timer) { + clearTimeout(timer) + } + + timer = setTimeout(() => { + fn.apply(this, args) + timer = null + }, delay) + } +} + // Initialize i18n // const { t } = useI18n() // Not currently being used @@ -80,8 +96,8 @@ function initializeCharts() { }) } -// Update charts when theme changes -function updateCharts() { +// Original update charts implementation +function _updateChartsImpl() { if (chartInstances.value.length === 0) { initializeCharts() return @@ -110,6 +126,8 @@ function updateCharts() { }) } +const updateCharts = debounce(_updateChartsImpl, 100) + // Expose updateCharts method for external calling defineExpose({ updateCharts diff --git a/src/utils/chartConfigs.ts b/src/utils/chartConfigs.ts index 7ce05c3..cd31ceb 100644 --- a/src/utils/chartConfigs.ts +++ b/src/utils/chartConfigs.ts @@ -22,13 +22,6 @@ export function getChartConfigs(seriesCnt: number = 4): ChartConfig[] { const axisCat = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] const legendData = Array.from({ length: seriesCnt }, (_, i) => `Series ${i + 1}`) - const commonGrid = { - left: 60, - right: 20, - top: 60, - bottom: 50 - } - const commonTooltip = { trigger: 'axis' as const } @@ -57,7 +50,6 @@ export function getChartConfigs(seriesCnt: number = 4): ChartConfig[] { data: legendData, right: 0 }, - grid: commonGrid, tooltip: commonTooltip, toolbox: commonToolbox, xAxis: { @@ -92,7 +84,6 @@ export function getChartConfigs(seriesCnt: number = 4): ChartConfig[] { data: legendData, right: 0 }, - grid: commonGrid, tooltip: commonTooltip, toolbox: commonToolbox, xAxis: { @@ -127,7 +118,6 @@ export function getChartConfigs(seriesCnt: number = 4): ChartConfig[] { data: legendData, right: 0 }, - grid: commonGrid, tooltip: commonTooltip, toolbox: commonToolbox, xAxis: { @@ -162,7 +152,6 @@ export function getChartConfigs(seriesCnt: number = 4): ChartConfig[] { data: legendData, right: 0 }, - grid: commonGrid, tooltip: commonTooltip, toolbox: commonToolbox, xAxis: { @@ -195,7 +184,6 @@ export function getChartConfigs(seriesCnt: number = 4): ChartConfig[] { data: legendData, right: 0 }, - grid: commonGrid, tooltip: { trigger: 'item' as const }, @@ -296,12 +284,6 @@ export function getChartConfigs(seriesCnt: number = 4): ChartConfig[] { text: 'Candlestick Chart', subtext: 'K-line chart with data zoom' }, - grid: { - left: 60, - right: 20, - top: 40, - bottom: 70 - }, tooltip: { trigger: 'axis' as const }, @@ -351,12 +333,6 @@ export function getChartConfigs(seriesCnt: number = 4): ChartConfig[] { text: 'Heatmap', subtext: 'Basic heatmap example' }, - grid: { - left: 90, - right: 20, - top: 40, - bottom: 40 - }, tooltip: { trigger: 'item' as const }, @@ -532,19 +508,11 @@ export function getChartConfigs(seriesCnt: number = 4): ChartConfig[] { trigger: 'axis' as const }, legend: { - data: ['Primary', 'Secondary', 'Tertiary'], - right: 0 - }, - grid: { - top: 80, - bottom: 100, - left: 60, - right: 20 + data: ['Primary', 'Secondary', 'Tertiary'] }, xAxis: { type: 'category', - data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], - splitLine: { show: false } + data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, yAxis: { type: 'value', diff --git a/src/utils/themeGenerator.ts b/src/utils/themeGenerator.ts index b9dc843..86d3a3e 100644 --- a/src/utils/themeGenerator.ts +++ b/src/utils/themeGenerator.ts @@ -3,7 +3,7 @@ import type { ThemeData } from '../types/theme' /** * Generate ECharts theme configuration based on theme data * @param themeData - Theme configuration data - * @param isToExport - Whether this is for export (includes backgroundColor) + * @param isToExport - Reserved for backward compatibility (no longer used) * @returns ECharts theme configuration object */ export function generateEChartsTheme(themeData: ThemeData, isToExport: boolean = false) { @@ -153,7 +153,7 @@ export function generateEChartsTheme(themeData: ThemeData, isToExport: boolean = // Main theme configuration object const themeConfig = { color: themeData.color, - backgroundColor: isToExport ? themeData.backgroundColor : 'transparent', + backgroundColor: themeData.backgroundColor, // Apply background color regardless of export state textStyle: themeData.textColorShow ? { color: themeData.textColor } : {}, diff --git a/vite.config.ts b/vite.config.ts index d13f052..7159e53 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -39,10 +39,10 @@ export default defineConfig({ // Generate HTML content - just div + script tag const divContent = '<div id="theme-builder"></div>' const scriptTag = '<script type="module" src="./theme-builder/app.min.js"></script>' - + // Create simplified index.html for both languages - const indexHTML = `${divContent}\n ${scriptTag}` - + const indexHTML = `${divContent}\n${scriptTag}` + // Write index.html files (only these, no body.html) fs.writeFileSync('app/en/index.html', indexHTML, 'utf-8') fs.writeFileSync('app/zh/index.html', indexHTML, 'utf-8') @@ -91,13 +91,13 @@ export default defineConfig({ console.error(`Error: ECharts www project not found: ${ecWWWBaseDir}`) return } - + // Create destination directory if needed fse.ensureDirSync(config.ecWWWGeneratedDir) - + // Copy the entire app directory to ecWWWGeneratedDir console.log(`Copying app contents to ${config.ecWWWGeneratedDir}`) - + // Copy app directory to ecWWWGeneratedDir fse.copySync('app', config.ecWWWGeneratedDir) --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
