fix(theme): fix the bug where the progress bar color does not change when switching themes #374
Conversation
Added handleData.js to handle empty data case Added handleEvent method in utils.js for bind/unbind events Improved code structrure
…or percent in (asc) or (desc) Added a sorting API that supports sorting by value or percent in asc or desc order.
delete a test file
…when switching themes
WalkthroughReworks color handling in RankProcessChart: default color becomes an empty array, adds getColorsFromToken(), threads a colorArray through option resolution, row/rowList now support colorArray and color-fallback logic, and replaces updateTheme with updateStyles across components to propagate token/user colors. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App
participant Chart as RankProcessChart
participant Utils as utils.getColorsFromToken
participant Header as HeaderRow
participant Rows as RowList / ContentRow
participant Scroll as ScrollArea
participant Tip as Tooltip
App->>Chart: render/update(options)
Chart->>Utils: getColorsFromToken()
Utils-->>Chart: tokenColors []
alt user supplied colors
Chart->>Chart: colorArray = options.color || tokenColors
else fallback to token
Chart->>Chart: colorArray = tokenColors
end
Chart->>Header: updateStyles(latestChartToken)
Chart->>Rows: updateStyles(latestChartToken, colorArray)
Note over Rows: ContentRow uses data.color or colorArray[index % len]
Chart->>Scroll: updateStyles(latestChartToken)
Chart->>Tip: updateStyles(latestChartToken)
Chart-->>App: UI updated with styles & colors
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 22
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (7)
src/components/RankProcessChart/handleHeader.js (2)
83-101: Resolve the merge conflict before merging.The code contains unresolved Git merge conflict markers that prevent compilation. The conflict shows two method declarations (
updateStylesvsupdateTheme) with identical implementations.Based on the PR objectives to fix theme switching for progress bar colors, you need to decide whether:
updateStylesshould replaceupdateThemeentirely, or- Both methods should coexist with different responsibilities
Once you resolve the conflict, if both methods are needed, consider whether they can share implementation logic to avoid duplication:
// Shared implementation _applyThemeUpdates(latestChartToken) { this.styles = getHeaderStyles(latestChartToken); const newStyle = this.styles.getThemeUpdates(); updateSvgs([ { el: this.headerBg, attrs: newStyle.headerBg }, ...this.textElements.map(text => ({ el: text, attrs: newStyle.headerText })) ]); } updateStyles(latestChartToken) { this._applyThemeUpdates(latestChartToken); } updateTheme(latestChartToken) { this._applyThemeUpdates(latestChartToken); }
83-101: Resolve the merge conflict blocking compilation.Lines 83-87 contain unresolved git merge conflict markers that prevent the code from compiling. The conflict shows two method declarations (
updateStylesvsupdateTheme) with identical implementation bodies.Based on the PR objectives around fixing theme switching for progress bar colors, you need to decide whether to:
- Keep both methods if they serve different purposes in the styling update flow
- Replace
updateThemewithupdateStylesif this is a rename- Keep
updateThemeand removeupdateStylesif the HEAD changes should be discardedApply this diff to resolve the conflict (assuming both methods should coexist based on the broader PR context suggesting a two-phase update flow):
- // 更新主题样式 -<<<<<<< HEAD - updateStyles(latestChartToken) { -======= - updateTheme(latestChartToken) { ->>>>>>> 36ad2d3953e279156d4255f82b8e916067efaacc + // 更新主题样式 + updateTheme(latestChartToken) { this.styles = getHeaderStyles(latestChartToken); const newStyle = this.styles.getThemeUpdates(); updateSvgs([ { el: this.headerBg, attrs: newStyle.headerBg }, ...this.textElements.map(text => ({ el: text, attrs: newStyle.headerText })) ]); } + + // 更新样式(包含主题和颜色) + updateStyles(latestChartToken) { + this.updateTheme(latestChartToken); + }src/components/RankProcessChart/handleRowList.js (1)
83-96: Resolve the merge conflict in createAndRegisterRow.This method has an unresolved Git merge conflict when passing options to
ContentRow. The HEAD branch passescolorArrayto the row constructor, enabling individual rows to access color information for theme updates.After resolving, ensure colorArray is passed to ContentRow:
createAndRegisterRow(index) { const row = new ContentRow({ data: this.data[index], index, rowWidth: this.containerWidth, -<<<<<<< HEAD rowHeight: this.rowHeight, colorArray: this.colorArray -======= - rowHeight: this.rowHeight ->>>>>>> 36ad2d3953e279156d4255f82b8e916067efaacc }); this.registerRow(index, row); }src/components/RankProcessChart/handleTooltip.js (2)
155-165: Resolve the merge conflict in the theme update method.The code contains an unresolved Git merge conflict between
updateStyles(newTheme)andupdateTheme(newTheme). Both method signatures and implementations appear identical, suggesting this might be a simple rename rather than a functional change.After reviewing the conflict, decide whether to:
- Keep only
updateStylesif it's meant to replaceupdateTheme- Keep both if they serve different purposes (though currently they're identical)
- Keep only
updateThemeif the rename isn't needed for tooltipsResolution example if keeping
updateStyles:-<<<<<<< HEAD updateStyles(newTheme) { -======= - updateTheme(newTheme) { ->>>>>>> 36ad2d3953e279156d4255f82b8e916067efaacc this.theme = newTheme; if (this.tooltip) { this.tooltip.style.cssText = this.styles.getThemeUpdate(newTheme); } }
155-165: Resolve the merge conflict in tooltip style update methods.Lines 155-159 contain an unresolved merge conflict between
updateStylesandupdateThememethod declarations with identical implementation bodies. This prevents compilation.Based on the enriched summary indicating that
updateStylesshould participate in the broader styling update flow coordinated byindex.js, both methods should coexist.Apply this diff to resolve the conflict:
// 更新主题 -<<<<<<< HEAD - updateStyles(newTheme) { -======= updateTheme(newTheme) { ->>>>>>> 36ad2d3953e279156d4255f82b8e916067efaacc this.theme = newTheme; if (this.tooltip) { this.tooltip.style.cssText = this.styles.getThemeUpdate(newTheme); } } + + // 更新样式(包含主题) + updateStyles(newTheme) { + this.updateTheme(newTheme); + }src/components/RankProcessChart/handleOption.js (1)
99-137: CRITICAL: Resolve merge conflict in data processing logic.The file contains an unresolved Git merge conflict in the data processing functions. This completely blocks execution.
Two conflicting approaches exist:
- HEAD (lines 99-117): Separate
processData(data, sort)andprocessColor(color)functions with color fallback togetColorsFromToken()- Base (lines 118-136): Single
processData(data, color, sort)that resolves color per itemChoose one approach and remove the conflict markers. The HEAD approach appears more aligned with the PR's goal of fixing theme-based color updates, as it centralizes color token resolution.
-<<<<<<< HEAD -// 封装排序处理 -function processData(data, sort) { - // 排序 - const { field, order } = sort || { field: 'value', order: 'desc' }; - const sortedData = sortData(data, field, order); - - return sortedData; -} - -function processColor(color) { - if(color && !isArray(color)) { - color = [color] - } - - if(!color || color.length === 0) color = getColorsFromToken(); - - return color -======= -// 封装颜色处理和排序处理 -function processData(data, color, sort) { - // 处理默认颜色配置 - if(color && !isArray(color)) { - color = [color]; - } - - // 处理进度条颜色，如果item有就使用，否则换为用户自定义或者默认颜色 - const resolvedData = data.map((item, index) => ({ - ...item, - color: item.color || color[index % color.length] - })); - - // 排序 - const { field, order } = sort || { field: 'value', order: 'desc' }; - const sortedData = sortData(resolvedData, field, order); - - return sortedData; ->>>>>>> 36ad2d3953e279156d4255f82b8e916067efaacc +// 封装排序处理 +function processData(data, sort) { + // 排序 + const { field, order } = sort || { field: 'value', order: 'desc' }; + const sortedData = sortData(data, field, order); + + return sortedData; +} + +function processColor(color) { + if(color && !isArray(color)) { + color = [color] + } + + if(!color || color.length === 0) color = getColorsFromToken(); + + return color }src/components/RankProcessChart/index.js (1)
203-234: CRITICAL: Resolve merge conflict between updateStyles and updateTheme methods.Unresolved Git merge conflict introduces two different method names for theme/style updates.
The conflict shows:
- HEAD (lines 203-222): New
updateStyles()method that merges user colors with token colors and callsupdateStyles()on child components- Base (lines 223-233): Existing
updateTheme()method that callsupdateTheme()on child componentsThese represent fundamentally different APIs. Choose one approach:
- If the PR aims to fix color updates on theme switching, the HEAD approach with
updateStyles()and explicit color handling appears more aligned with the PR objectives.- Ensure child components (headerGroup, rowList, scrollArea, tooltip) have matching method signatures.
-<<<<<<< HEAD - // 更新样式和颜色 updateStyles() { // 动态获取最新的 chartToken import('../../feature/token/index.js').then(Token => { const latestChartToken = Token.default.getTokenByName('RankProcessChart'); // 更新时优先使用用户设置的颜色，如果没有则使用主题颜色 let colorArray = null; if (this.option.color && this.option.color.length > 0) { colorArray = this.option.color; } else { colorArray = getColorsFromToken(); } if(this.headerGroup) this.headerGroup.updateStyles(latestChartToken); if(this.rowList) this.rowList.updateStyles(latestChartToken, colorArray); if(this.scrollArea) this.scrollArea.updateStyles(latestChartToken); if(this.tooltip) this.tooltip.updateStyles(this.option.theme); -======= - // 更新主题 - updateTheme() { - // 动态获取最新的 chartToken - import('../../feature/token/index.js').then(Token => { - const latestChartToken = Token.default.getTokenByName('RankProcessChart'); - - if(this.headerGroup) this.headerGroup.updateTheme(latestChartToken); - if(this.rowList) this.rowList.updateTheme(latestChartToken); - if(this.scrollArea) this.scrollArea.updateTheme(latestChartToken); - if(this.tooltip) this.tooltip.updateTheme(this.option.theme); ->>>>>>> 36ad2d3953e279156d4255f82b8e916067efaacc }); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (30)
public/image/theme/cloud-light/RankProcessChart/RankProcessChart-1.pngis excluded by!**/*.pngpublic/image/theme/cloud-light/RankProcessChart/RankProcessChart-2.pngis excluded by!**/*.pngpublic/image/theme/cloud-light/RankProcessChart/RankProcessChart-3.pngis excluded by!**/*.pngpublic/image/theme/cloud-light/RankProcessChart/RankProcessChart-4.pngis excluded by!**/*.pngpublic/image/theme/cloud-light/RankProcessChart/RankProcessChart-5.pngis excluded by!**/*.pngpublic/image/theme/cloud-light/RankProcessChart/RankProcessChart-6.pngis excluded by!**/*.pngpublic/image/theme/dark/RankProcessChart/RankProcessChart-1.pngis excluded by!**/*.pngpublic/image/theme/dark/RankProcessChart/RankProcessChart-2.pngis excluded by!**/*.pngpublic/image/theme/dark/RankProcessChart/RankProcessChart-3.pngis excluded by!**/*.pngpublic/image/theme/dark/RankProcessChart/RankProcessChart-4.pngis excluded by!**/*.pngpublic/image/theme/dark/RankProcessChart/RankProcessChart-5.pngis excluded by!**/*.pngpublic/image/theme/dark/RankProcessChart/RankProcessChart-6.pngis excluded by!**/*.pngpublic/image/theme/hdesign-dark/RankProcessChart/RankProcessChart-1.pngis excluded by!**/*.pngpublic/image/theme/hdesign-dark/RankProcessChart/RankProcessChart-2.pngis excluded by!**/*.pngpublic/image/theme/hdesign-dark/RankProcessChart/RankProcessChart-3.pngis excluded by!**/*.pngpublic/image/theme/hdesign-dark/RankProcessChart/RankProcessChart-4.pngis excluded by!**/*.pngpublic/image/theme/hdesign-dark/RankProcessChart/RankProcessChart-5.pngis excluded by!**/*.pngpublic/image/theme/hdesign-dark/RankProcessChart/RankProcessChart-6.pngis excluded by!**/*.pngpublic/image/theme/hdesign-light/RankProcessChart/RankProcessChart-1.pngis excluded by!**/*.pngpublic/image/theme/hdesign-light/RankProcessChart/RankProcessChart-2.pngis excluded by!**/*.pngpublic/image/theme/hdesign-light/RankProcessChart/RankProcessChart-3.pngis excluded by!**/*.pngpublic/image/theme/hdesign-light/RankProcessChart/RankProcessChart-4.pngis excluded by!**/*.pngpublic/image/theme/hdesign-light/RankProcessChart/RankProcessChart-5.pngis excluded by!**/*.pngpublic/image/theme/hdesign-light/RankProcessChart/RankProcessChart-6.pngis excluded by!**/*.pngpublic/image/theme/light/RankProcessChart/RankProcessChart-1.pngis excluded by!**/*.pngpublic/image/theme/light/RankProcessChart/RankProcessChart-2.pngis excluded by!**/*.pngpublic/image/theme/light/RankProcessChart/RankProcessChart-3.pngis excluded by!**/*.pngpublic/image/theme/light/RankProcessChart/RankProcessChart-4.pngis excluded by!**/*.pngpublic/image/theme/light/RankProcessChart/RankProcessChart-5.pngis excluded by!**/*.pngpublic/image/theme/light/RankProcessChart/RankProcessChart-6.pngis excluded by!**/*.png
📒 Files selected for processing (9)
src/components/RankProcessChart/constants.js(1 hunks)src/components/RankProcessChart/handleHeader.js(1 hunks)src/components/RankProcessChart/handleOption.js(4 hunks)src/components/RankProcessChart/handleRow.js(5 hunks)src/components/RankProcessChart/handleRowList.js(3 hunks)src/components/RankProcessChart/handleScroll.js(1 hunks)src/components/RankProcessChart/handleTooltip.js(1 hunks)src/components/RankProcessChart/index.js(7 hunks)src/components/RankProcessChart/utils.js(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
src/components/RankProcessChart/handleHeader.js (1)
src/components/RankProcessChart/index.js (2)
latestChartToken(208-208)latestChartToken(227-227)
src/components/RankProcessChart/handleOption.js (3)
src/components/RankProcessChart/utils.js (2)
isChanged(157-162)getColorsFromToken(179-182)src/components/RankProcessChart/handleRow.js (1)
data(165-171)doc/api/RankProcessChart/index.js (1)
data(11-34)
src/components/RankProcessChart/index.js (2)
src/components/RankProcessChart/utils.js (2)
updateSvgs(144-154)getColorsFromToken(179-182)src/components/RankProcessChart/handleOption.js (2)
resolveOption(180-216)updates(168-168)
src/components/RankProcessChart/handleScroll.js (1)
src/components/RankProcessChart/index.js (2)
latestChartToken(208-208)latestChartToken(227-227)
src/components/RankProcessChart/handleRow.js (3)
src/components/RankProcessChart/index.js (3)
colorArray(211-211)latestChartToken(208-208)latestChartToken(227-227)src/components/RankProcessChart/utils.js (2)
createSvgElement(12-26)createSvgElement(12-26)src/components/RankProcessChart/style.js (1)
getRowStyles(42-196)
🪛 Biome (2.1.2)
src/components/RankProcessChart/handleHeader.js
[error] 87-87: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found '<<'.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
src/components/RankProcessChart/handleOption.js
[error] 5-6: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 7-8: Expected a statement but instead found '>>>>>>> 36ad2d3'.
Expected a statement here.
(parse)
[error] 8-8: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 7-7: Shouldn't redeclare 'isChanged'. Consider to delete it or rename it.
'isChanged' is defined here:
(lint/suspicious/noRedeclare)
[error] 103-103: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 202-202: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 206-206: Expected an expression but instead found '==='.
Expected an expression here.
(parse)
[error] 206-206: Expected an expression but instead found '='.
Expected an expression here.
(parse)
[error] 205-206: Invalid assignment to processColor(color) ======
This expression cannot be assigned to
(parse)
[error] 209-209: Expected an expression, or an assignment but instead found 'const'.
Expected an expression, or an assignment here.
(parse)
[error] 209-210: Shouldn't redeclare 'processedData'. Consider to delete it or rename it.
'processedData' is defined here:
(lint/suspicious/noRedeclare)
src/components/RankProcessChart/index.js
[error] 8-9: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 10-11: Expected a statement but instead found '>>>>>>> 36ad2d3'.
Expected a statement here.
(parse)
[error] 11-11: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 16-17: Expected an identifier but instead found '<<'.
Expected an identifier here.
(parse)
[error] 21-21: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 10-10: Shouldn't redeclare 'updateSvgs'. Consider to delete it or rename it.
'updateSvgs' is defined here:
(lint/suspicious/noRedeclare)
[error] 113-113: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found '.'.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
[error] 114-114: Expected a parameter but instead found ''clip-path''.
Expected a parameter here.
(parse)
[error] 114-116: Expected a parameter but instead found ''url(#contentClipPath)''.
Expected a parameter here.
(parse)
[error] 116-116: Expected a class method body but instead found ';'.
Expected a class method body here.
(parse)
[error] 207-207: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 207-207: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 208-208: expected } but instead found ;
Remove ;
(parse)
[error] 212-212: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 212-212: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 213-213: Expected a JSX attribute but instead found '()'.
Expected a JSX attribute here.
(parse)
[error] 215-215: expected ... but instead found import
Remove import
(parse)
[error] 255-258: Expected a statement but instead found '>>>>>>> 36ad2d3'.
Expected a statement here.
(parse)
[error] 256-258: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 259-259: Expected a semicolon or an implicit semicolon after a statement, but found none
An explicit or implicit semicolon is expected here...
...Which is required to end this statement
(parse)
[error] 259-259: Expected a semicolon or an implicit semicolon after a statement, but found none
An explicit or implicit semicolon is expected here...
...Which is required to end this statement
(parse)
[error] 266-266: Expected an identifier, a member name, or a rest pattern but instead found '<<'.
Expected an identifier, a member name, or a rest pattern here.
(parse)
[error] 264-266: Object and Array patterns require initializers.
This pattern is declared, but it is not given an initialized value.
(parse)
[error] 267-268: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
src/components/RankProcessChart/handleRowList.js
[error] 12-13: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 18-18: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 10-10: This variable is used before its declaration.
The variable is declared here:
(lint/correctness/noInvalidUseBeforeDeclaration)
[error] 11-11: This variable is used before its declaration.
The variable is declared here:
(lint/correctness/noInvalidUseBeforeDeclaration)
[error] 14-14: Shouldn't redeclare 'data'. Consider to delete it or rename it.
'data' is defined here:
(lint/suspicious/noRedeclare)
[error] 14-14: Shouldn't redeclare 'containerWidth'. Consider to delete it or rename it.
'containerWidth' is defined here:
(lint/suspicious/noRedeclare)
[error] 14-14: Shouldn't redeclare 'scrollCallback'. Consider to delete it or rename it.
'scrollCallback' is defined here:
(lint/suspicious/noRedeclare)
[error] 137-137: expected } but instead found return
Remove return
(parse)
[error] 138-138: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 139-139: expected } but instead found ;
Remove ;
(parse)
[error] 143-143: expected } but instead found ;
Remove ;
(parse)
[error] 143-143: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 143-143: Unexpected token. Did you mean {'}'} or }?
(parse)
[error] 143-143: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 145-145: Expected a JSX attribute but instead found '('.
Expected a JSX attribute here.
(parse)
[error] 145-145: Expected a JSX attribute but instead found ','.
Expected a JSX attribute here.
(parse)
[error] 145-145: Expected a JSX attribute but instead found ')'.
Expected a JSX attribute here.
(parse)
[error] 145-145: expected ... but instead found for
Remove for
(parse)
[error] 135-137: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 138-138: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 142-143: This variable is used before its declaration.
The variable is declared here:
(lint/correctness/noInvalidUseBeforeDeclaration)
src/components/RankProcessChart/handleRow.js
[error] 17-18: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 19-22: Expected a statement but instead found '>>>>>>> 36ad2d3
this.data = data'.
Expected a statement here.
(parse)
[error] 20-20: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 25-27: Expected a statement but instead found '<<<<<<< HEAD
this.colorArray = colorArray'.
Expected a statement here.
(parse)
[error] 29-29: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 19-19: Shouldn't redeclare 'data'. Consider to delete it or rename it.
'data' is defined here:
(lint/suspicious/noRedeclare)
[error] 19-19: Shouldn't redeclare 'index'. Consider to delete it or rename it.
'index' is defined here:
(lint/suspicious/noRedeclare)
[error] 19-19: Shouldn't redeclare 'rowWidth'. Consider to delete it or rename it.
'rowWidth' is defined here:
(lint/suspicious/noRedeclare)
[error] 19-19: Shouldn't redeclare 'rowHeight'. Consider to delete it or rename it.
'rowHeight' is defined here:
(lint/suspicious/noRedeclare)
[error] 45-46: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found '<<'.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
[error] 143-143: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 147-147: Expected an expression for the left hand side of the === operator.
This operator requires a left hand side value
(parse)
[error] 147-147: Expected an expression but instead found '==='.
Expected an expression here.
(parse)
[error] 147-147: Expected an expression but instead found '='.
Expected an expression here.
(parse)
[error] 147-147: Invalid assignment to ======
This expression cannot be assigned to
(parse)
[error] 236-236: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found '<<'.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
[error] 237-242: Expected a statement but instead found '=======
// 更新主题样式
updateTheme(latestChartToken)'.
Expected a statement here.
(parse)
[error] 242-248: Expected a statement but instead found '>>>>>>> 36ad2d3
// 更新样式对象
this.styles = getRowStyles(latestChartToken)'.
Expected a statement here.
(parse)
[error] 242-245: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 236-236: Duplicate class member name "HEAD"
(lint/suspicious/noDuplicateClassMembers)
[error] 273-273: Expected a semicolon or an implicit semicolon after a statement, but found none
An explicit or implicit semicolon is expected here...
...Which is required to end this statement
(parse)
[error] 275-275: Expected a statement but instead found ','.
Expected a statement here.
(parse)
🔇 Additional comments (5)
src/components/RankProcessChart/utils.js (4)
4-4: LGTM!The Token import is correctly added to support the new
getColorsFromTokenfunction.
178-182: LGTM!The utility function correctly retrieves token-based colors with a safe fallback to an empty array, aligning with the array-based color handling pattern introduced in this PR.
4-4: LGTM!The Token import is appropriately added to support the new color token functionality.
178-182: LGTM!The new
getColorsFromToken()utility function correctly retrieves the color group from the token configuration with a safe fallback to an empty array. This aligns with the updated default color handling across the RankProcessChart components.src/components/RankProcessChart/constants.js (1)
50-50: No null-checks oncolordetected — default switch to[]is safe.
Global ripgrep across all JS/TS/JSX/TSX files found no instances ofcolor === nullorcolor == null, so the new default value won’t break any existing logic.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/RankProcessChart/index.js (1)
229-231: Consider checking for 'color' in the data/sort/padding condition.The condition on lines 229-231 checks for
data,sort, orpaddingupdates but doesn't check forcolor. However, line 243 has a separate condition that handlesdata,color, orpaddingupdates for the scroll area.If color changes should trigger row updates (which makes sense since rows need to re-render with new colors), consider including
colorin the condition:- if (updates.includes('data') || - updates.includes('sort') || - updates.includes('padding')) + if (updates.includes('data') || + updates.includes('color') || + updates.includes('sort') || + updates.includes('padding'))Otherwise, color changes might not trigger row data updates until the next theme change.
src/components/RankProcessChart/handleOption.js (1)
104-112: Add a fallback for when getColorsFromToken returns empty.The
processColorfunction correctly normalizes the color input and falls back to token colors. However, ifgetColorsFromToken()returns an empty array or undefined, the function should provide a safe default.Consider adding a final fallback:
function processColor(color) { if(color && !isArray(color)) { color = [color] } - if(!color || color.length === 0) color = getColorsFromToken(); + if(!color || color.length === 0) { + color = getColorsFromToken(); + if (!color || color.length === 0) { + color = ['#5470c6']; // Safe default color + } + } return color }This ensures that rows always have a valid color even if token initialization fails.
src/components/RankProcessChart/handleRow.js (1)
38-50: Add a default color fallback in getProgressBarColor.The method can return
undefinedif bothdata.colorandcolorArrayare missing or empty. This could cause issues when rendering the progress bar.Add a safe default color:
getProgressBarColor() { // 如果data中有颜色,直接使用 if (this.data.color) { return this.data.color; } // 否则使用colorArray中的颜色 if (this.colorArray && this.colorArray.length > 0) { return this.colorArray[this.index % this.colorArray.length]; } + // 返回默认颜色作为最后的备选 + return '#5470c6'; }This ensures the progress bar always has a valid color, preventing rendering errors.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/RankProcessChart/handleHeader.js(1 hunks)src/components/RankProcessChart/handleOption.js(3 hunks)src/components/RankProcessChart/handleRow.js(5 hunks)src/components/RankProcessChart/handleRowList.js(3 hunks)src/components/RankProcessChart/handleScroll.js(1 hunks)src/components/RankProcessChart/handleTooltip.js(1 hunks)src/components/RankProcessChart/index.js(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/RankProcessChart/handleHeader.js
- src/components/RankProcessChart/handleTooltip.js
🧰 Additional context used
🧬 Code graph analysis (4)
src/components/RankProcessChart/index.js (2)
src/components/RankProcessChart/utils.js (1)
getColorsFromToken(179-182)src/components/RankProcessChart/handleOption.js (1)
resolveOption(155-181)
src/components/RankProcessChart/handleRow.js (2)
public/option/RankProcessChart/RankProcessChart-5.js (1)
option(1-87)src/components/RankProcessChart/style.js (1)
getRowStyles(42-196)
src/components/RankProcessChart/handleOption.js (2)
doc/api/RankProcessChart/index.js (1)
data(11-34)src/components/RankProcessChart/utils.js (1)
getColorsFromToken(179-182)
src/components/RankProcessChart/handleRowList.js (1)
doc/api/RankProcessChart/index.js (1)
data(11-34)
🔇 Additional comments (5)
src/components/RankProcessChart/handleScroll.js (1)
210-225: LGTM! Method rename is consistent with the refactor.The rename from
updateThemetoupdateStylesaligns with the broader refactor across all RankProcessChart components to support dynamic color updates during theme switching.Note: Unlike other components, this method doesn't require a
colorArrayparameter since scroll bars derive their styling entirely from the theme token, which is the correct design.src/components/RankProcessChart/handleRowList.js (2)
7-11: LGTM! Color array properly stored and propagated.The constructor correctly accepts and stores the
colorArray, enabling color data to flow through to individual rows.
124-129: LGTM! updateStyles correctly propagates color data.The method properly iterates over visible rows and calls
row.updateStyles(latestChartToken, colorArray), ensuring all visible rows receive both theme and color updates.src/components/RankProcessChart/handleRow.js (1)
212-258: LGTM! updateStyles correctly handles color updates.The method properly:
- Updates the style object with the latest token
- Updates the colorArray when provided
- Recalculates the progress bar color
- Applies all style updates to the row elements
The progress bar fill is correctly set to
progressBarColor, ensuring color updates are reflected during theme switching.src/components/RankProcessChart/index.js (1)
188-207: Ignore adding colorArray to headerGroup.updateStyles. handleHeader.updateStyles only accepts the chart token, so the existing call is correct.Likely an incorrect or invalid review comment.
2 participants
fix the bug where the progress bar color does not change when switching themes
fix: replace demo images with higher-resolution versions
Summary by CodeRabbit