fix(JadeJueChart): update barWidth and barGap #136
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/components/JadeJueChart/handleOption.jsOops! Something went wrong! :( ESLint: 8.56.0 ReferenceError: require is not defined in ES module scope, you can use import instead WalkthroughThe pull request introduces enhancements to the JadeJueChart component's documentation and configuration handling. The changes focus on improving the Changes
Sequence DiagramsequenceDiagram
participant Chart as JadeJueChart
participant Handler as HandleOption
participant Config as ChartConfig
Chart->>Handler: Call setbarWidth()
Handler->>Handler: setThemeBarRule()
Handler->>Config: Calculate bar width
Handler->>Chart: Return configured options
Chart->>Chart: Update chart rendering
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/JadeJueChart/handleOption.js (2)
34-49: Consider enhancing code readability.The function logic is correct, but could benefit from these improvements:
- Extract magic number 5 into a named constant
- Use more descriptive names for the size categories
+const DATA_LENGTH_THRESHOLDS = { + LARGE: 5, + MEDIUM: 4 +}; function setThemeBarRule(theme, data, position){ const isCloud = theme.includes('cloud'); let barWidth, textGap; - if(data.length >= 5){ + if(data.length >= DATA_LENGTH_THRESHOLDS.LARGE){ barWidth = isCloud ? cloudThemeBarWidth.small: defaultThemeBarWidth.small; textGap = gap.small; - }else if(data.length === 4){ + }else if(data.length === DATA_LENGTH_THRESHOLDS.MEDIUM){
71-82: Optimize object destructuring and add safety checks.The function could benefit from:
- Safe object destructuring
- Default value handling
export function setbarWidth(iChartOption, baseOpt, chartInstance) { - const { barWidth, theme, data, position } = iChartOption; + const { barWidth, theme, data, position = {} } = iChartOption || {}; + if (!data) { + console.warn('No data provided for bar width calculation'); + return; + } let themeBarWidth; if(theme){ let themeBarRile = setThemeBarRule(theme, data, position); themeBarWidth = themeBarRile.barWidth; - if(!position?.radius || position?.radius?.[0] === 'auto') setThemeRadius(iChartOption, baseOpt, chartInstance, themeBarRile.textGap) + if(!position.radius || position.radius?.[0] === 'auto') { + setThemeRadius(iChartOption, baseOpt, chartInstance, themeBarRile.textGap); + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
doc/api/JadeJueChart/position.md(1 hunks)src/components/JadeJueChart/handleOption.js(1 hunks)src/components/JadeJueChart/index.js(1 hunks)
🔇 Additional comments (3)
src/components/JadeJueChart/index.js (1)
46-46: LGTM! Method signature update is consistent.The addition of the
chartInstanceparameter aligns with the updated method signature in handleOption.js.src/components/JadeJueChart/handleOption.js (1)
16-32: LGTM! Well-structured theme constants.The constants are well-organized and provide clear size variations for different themes:
- Cloud theme uses smaller widths (4-8)
- Default theme uses larger widths (8-16)
- Gaps are proportionally defined (0-8)
doc/api/JadeJueChart/position.md (1)
15-15: LGTM! Clear documentation update.The documentation clearly explains the new auto-calculation feature for the inner radius when set to 'auto'.
| // 主题中 线间距为文本的行高 + 字间距（当前规范字体12 行高为20） 减去线宽 | ||
| // 计算内圈的大小，用外圈尺寸 - (lineHeight*data.length) | ||
| function setThemeRadius(iChartOption, baseOpt, chartInstance, textGap){ | ||
| const lineHeight = 20; | ||
| const { _dom } = chartInstance; | ||
| const { data } = iChartOption; | ||
| const { width, height } = _dom.getBoundingClientRect(); | ||
| const canvasRadius = width > height ? height / 2 : width / 2; | ||
| let outerRing = baseOpt.polar.radius[1]; | ||
| let innerRing; | ||
| if(typeof outerRing === 'number'){ | ||
| innerRing = outerRing - ((lineHeight + textGap) * data.length) | ||
| }else if(outerRing.indexOf('%')>-1){ | ||
| outerRing = Number(outerRing.slice(0,-1)) / 100; | ||
| innerRing = outerRing*canvasRadius - ((lineHeight + textGap) * data.length) | ||
| } | ||
| baseOpt.polar.radius[0] = innerRing; | ||
| } |
There was a problem hiding this comment.
Add safety checks for edge cases.
The radius calculation logic should include validation for:
- DOM element existence
- Negative inner radius results
function setThemeRadius(iChartOption, baseOpt, chartInstance, textGap){
const lineHeight = 20;
+ if (!chartInstance?._dom) {
+ console.warn('Chart DOM element not found');
+ return;
+ }
const { _dom } = chartInstance;
const { data } = iChartOption;
const { width, height } = _dom.getBoundingClientRect();
const canvasRadius = width > height ? height / 2 : width / 2;
let outerRing = baseOpt.polar.radius[1];
let innerRing;
if(typeof outerRing === 'number'){
innerRing = outerRing - ((lineHeight + textGap) * data.length)
}else if(outerRing.indexOf('%')>-1){
outerRing = Number(outerRing.slice(0,-1)) / 100;
innerRing = outerRing*canvasRadius - ((lineHeight + textGap) * data.length)
}
+ // Ensure inner radius is not negative
+ innerRing = Math.max(0, innerRing);
baseOpt.polar.radius[0] = innerRing;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // 主题中 线间距为文本的行高 + 字间距（当前规范字体12 行高为20） 减去线宽 | |
| // 计算内圈的大小，用外圈尺寸 - (lineHeight*data.length) | |
| function setThemeRadius(iChartOption, baseOpt, chartInstance, textGap){ | |
| const lineHeight = 20; | |
| const { _dom } = chartInstance; | |
| const { data } = iChartOption; | |
| const { width, height } = _dom.getBoundingClientRect(); | |
| const canvasRadius = width > height ? height / 2 : width / 2; | |
| let outerRing = baseOpt.polar.radius[1]; | |
| let innerRing; | |
| if(typeof outerRing === 'number'){ | |
| innerRing = outerRing - ((lineHeight + textGap) * data.length) | |
| }else if(outerRing.indexOf('%')>-1){ | |
| outerRing = Number(outerRing.slice(0,-1)) / 100; | |
| innerRing = outerRing*canvasRadius - ((lineHeight + textGap) * data.length) | |
| } | |
| baseOpt.polar.radius[0] = innerRing; | |
| } | |
| function setThemeRadius(iChartOption, baseOpt, chartInstance, textGap){ | |
| const lineHeight = 20; | |
| if (!chartInstance?._dom) { | |
| console.warn('Chart DOM element not found'); | |
| return; | |
| } | |
| const { _dom } = chartInstance; | |
| const { data } = iChartOption; | |
| const { width, height } = _dom.getBoundingClientRect(); | |
| const canvasRadius = width > height ? height / 2 : width / 2; | |
| let outerRing = baseOpt.polar.radius[1]; | |
| let innerRing; | |
| if(typeof outerRing === 'number'){ | |
| innerRing = outerRing - ((lineHeight + textGap) * data.length) | |
| }else if(outerRing.indexOf('%')>-1){ | |
| outerRing = Number(outerRing.slice(0,-1)) / 100; | |
| innerRing = outerRing*canvasRadius - ((lineHeight + textGap) * data.length) | |
| } | |
| // Ensure inner radius is not negative | |
| innerRing = Math.max(0, innerRing); | |
| baseOpt.polar.radius[0] = innerRing; | |
| } |
Summary by CodeRabbit
Documentation
position.radiusattribute with more detailed explanation about inner and outer radius configurationImprovements