Skip to content

feat: enhance chart tools with common styles and color palettes; add …#43

Open
xwang152-jack wants to merge 1 commit into
hustcc:mainfrom
xwang152-jack:main
Open

feat: enhance chart tools with common styles and color palettes; add …#43
xwang152-jack wants to merge 1 commit into
hustcc:mainfrom
xwang152-jack:main

Conversation

@xwang152-jack
Copy link
Copy Markdown

…CLAUDE.md for project guidance

@hustcc
Copy link
Copy Markdown
Owner

hustcc commented Mar 27, 2026

@xwang152-jack 是修改图表的默认风格样式吗?

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a centralized theming utility for ECharts (common styles + palettes) and updates multiple chart tools to use it, alongside repository guidance and gitignore tweaks.

Changes:

  • Introduce src/utils/theme.ts with shared palettes/styles and helper functions (apply styles, gradients, animations).
  • Update several chart tools (bar/line/pie/radar/scatter/sankey/heatmap/gauge/funnel) to apply the new theme helpers.
  • Add CLAUDE.md guidance and ignore snapshot test artifacts in .gitignore.

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
src/utils/theme.ts New shared palettes/common styling helpers for ECharts options
src/utils/index.ts Re-export theme helpers from utils barrel
src/tools/bar.ts Apply palette/common styles + new bar aesthetics
src/tools/line.ts Apply common styles + animation config
src/tools/pie.ts Apply palette/common styles + updated pie aesthetics
src/tools/radar.ts Apply palette/common styles + updated radar aesthetics
src/tools/scatter.ts Apply palette/common styles + updated scatter aesthetics
src/tools/sankey.ts Apply palette/common styles + updated sankey aesthetics
src/tools/heatmap.ts Apply common styles + updated visualMap palette and tooltip styling
src/tools/gauge.ts Apply palette/common styles + updated gauge aesthetics
src/tools/funnel.ts Apply palette/common styles + updated funnel aesthetics
CLAUDE.md Add project/development guidance document
.gitignore Ignore snapshot “actual/diff” artifacts from image tests

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/utils/theme.ts
Comment on lines +180 to +209
...COMMON_STYLES.axisLine,
...COMMON_STYLES.splitLine,
...COMMON_STYLES.axisLabel,
...COMMON_STYLES.axisName,
...axis,
}))
: {
...COMMON_STYLES.axisLine,
...COMMON_STYLES.splitLine,
...COMMON_STYLES.axisLabel,
...COMMON_STYLES.axisName,
...option.xAxis,
}
: undefined,
yAxis: option.yAxis
? Array.isArray(option.yAxis)
? option.yAxis.map((axis) => ({
...COMMON_STYLES.axisLine,
...COMMON_STYLES.splitLine,
...COMMON_STYLES.axisLabel,
...COMMON_STYLES.axisName,
...axis,
}))
: {
...COMMON_STYLES.axisLine,
...COMMON_STYLES.splitLine,
...COMMON_STYLES.axisLabel,
...COMMON_STYLES.axisName,
...option.yAxis,
}
Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

applyCommonStyles is spreading COMMON_STYLES.axisLine/splitLine/axisLabel/axisName directly into the axis object. Since those constants currently contain the inner option objects (e.g. { lineStyle: ... }) rather than being nested under axisLine, splitLine, axisLabel, etc., this produces invalid ECharts axis configs (e.g. xAxis.lineStyle instead of xAxis.axisLine.lineStyle), so the styles won’t apply. Restructure the merge to set axisLine: COMMON_STYLES.axisLine, splitLine: COMMON_STYLES.splitLine, axisLabel: COMMON_STYLES.axisLabel, and use nameTextStyle (not axisName) for axis name styling, then merge user-provided axis options on top.

Suggested change
...COMMON_STYLES.axisLine,
...COMMON_STYLES.splitLine,
...COMMON_STYLES.axisLabel,
...COMMON_STYLES.axisName,
...axis,
}))
: {
...COMMON_STYLES.axisLine,
...COMMON_STYLES.splitLine,
...COMMON_STYLES.axisLabel,
...COMMON_STYLES.axisName,
...option.xAxis,
}
: undefined,
yAxis: option.yAxis
? Array.isArray(option.yAxis)
? option.yAxis.map((axis) => ({
...COMMON_STYLES.axisLine,
...COMMON_STYLES.splitLine,
...COMMON_STYLES.axisLabel,
...COMMON_STYLES.axisName,
...axis,
}))
: {
...COMMON_STYLES.axisLine,
...COMMON_STYLES.splitLine,
...COMMON_STYLES.axisLabel,
...COMMON_STYLES.axisName,
...option.yAxis,
}
axisLine: {
...COMMON_STYLES.axisLine,
...(axis && typeof axis === "object" && "axisLine" in axis
? (axis as any).axisLine
: {}),
},
splitLine: {
...COMMON_STYLES.splitLine,
...(axis && typeof axis === "object" && "splitLine" in axis
? (axis as any).splitLine
: {}),
},
axisLabel: {
...COMMON_STYLES.axisLabel,
...(axis && typeof axis === "object" && "axisLabel" in axis
? (axis as any).axisLabel
: {}),
},
nameTextStyle: {
...COMMON_STYLES.axisName,
...(axis && typeof axis === "object" && "nameTextStyle" in axis
? (axis as any).nameTextStyle
: {}),
},
...axis,
}))
: option.xAxis
? {
axisLine: {
...COMMON_STYLES.axisLine,
...(option.xAxis && typeof option.xAxis === "object" && "axisLine" in option.xAxis
? (option.xAxis as any).axisLine
: {}),
},
splitLine: {
...COMMON_STYLES.splitLine,
...(option.xAxis && typeof option.xAxis === "object" && "splitLine" in option.xAxis
? (option.xAxis as any).splitLine
: {}),
},
axisLabel: {
...COMMON_STYLES.axisLabel,
...(option.xAxis && typeof option.xAxis === "object" && "axisLabel" in option.xAxis
? (option.xAxis as any).axisLabel
: {}),
},
nameTextStyle: {
...COMMON_STYLES.axisName,
...(option.xAxis && typeof option.xAxis === "object" && "nameTextStyle" in option.xAxis
? (option.xAxis as any).nameTextStyle
: {}),
},
...option.xAxis,
}
: undefined
: undefined,
yAxis: option.yAxis
? Array.isArray(option.yAxis)
? option.yAxis.map((axis) => ({
axisLine: {
...COMMON_STYLES.axisLine,
...(axis && typeof axis === "object" && "axisLine" in axis
? (axis as any).axisLine
: {}),
},
splitLine: {
...COMMON_STYLES.splitLine,
...(axis && typeof axis === "object" && "splitLine" in axis
? (axis as any).splitLine
: {}),
},
axisLabel: {
...COMMON_STYLES.axisLabel,
...(axis && typeof axis === "object" && "axisLabel" in axis
? (axis as any).axisLabel
: {}),
},
nameTextStyle: {
...COMMON_STYLES.axisName,
...(axis && typeof axis === "object" && "nameTextStyle" in axis
? (axis as any).nameTextStyle
: {}),
},
...axis,
}))
: option.yAxis
? {
axisLine: {
...COMMON_STYLES.axisLine,
...(option.yAxis && typeof option.yAxis === "object" && "axisLine" in option.yAxis
? (option.yAxis as any).axisLine
: {}),
},
splitLine: {
...COMMON_STYLES.splitLine,
...(option.yAxis && typeof option.yAxis === "object" && "splitLine" in option.yAxis
? (option.yAxis as any).splitLine
: {}),
},
axisLabel: {
...COMMON_STYLES.axisLabel,
...(option.yAxis && typeof option.yAxis === "object" && "axisLabel" in option.yAxis
? (option.yAxis as any).axisLabel
: {}),
},
nameTextStyle: {
...COMMON_STYLES.axisName,
...(option.yAxis && typeof option.yAxis === "object" && "nameTextStyle" in option.yAxis
? (option.yAxis as any).nameTextStyle
: {}),
},
...option.yAxis,
}
: undefined

Copilot uses AI. Check for mistakes.
Comment thread src/utils/theme.ts
*/
export function createGradientColor(
colors: [string, string],
index: number,
Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

createGradientColor(colors, index) declares an index parameter but never uses it. With Biome’s recommended rules enabled, this will be reported as an unused parameter and can fail lint. Either remove the parameter or rename it to _index (or actually use it) to satisfy linting.

Suggested change
index: number,
_index: number,

Copilot uses AI. Check for mistakes.
Comment thread src/tools/bar.ts
import { generateChartImage } from "../utils";
import {
applyCommonStyles,
createGradientColor,
Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

createGradientColor is imported from ../utils but never used in this file. With Biome’s recommended rules, unused imports can fail CI. Remove the import (or use it where intended).

Suggested change
createGradientColor,

Copilot uses AI. Check for mistakes.
Comment thread src/tools/line.ts
applyCommonStyles,
generateChartImage,
getAnimationConfig,
getColorPalette,
Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getColorPalette is imported from ../utils but never used in this file. With Biome’s recommended rules, unused imports can fail CI. Remove the import (or use it where intended).

Suggested change
getColorPalette,

Copilot uses AI. Check for mistakes.
Comment thread src/tools/bar.ts
Comment on lines +203 to +205
// 应用清新简约风格样式
const styledOption = applyCommonStyles(echartsOption, theme);

Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR changes chart styling (colors, symbol sizes, tooltip/legend/title layout) for multiple tools, but no snapshot updates are included. The image snapshot tests under __tests__/tools/*.spec.ts (e.g. __tests__/tools/bar.spec.ts) are likely to fail until the golden images in __tests__/snapshots/*.png are regenerated/updated for the new look.

Copilot uses AI. Check for mistakes.
@hustcc
Copy link
Copy Markdown
Owner

hustcc commented Mar 27, 2026

需要更新下单测截图。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants