feat: replace echarts to ting-charts (#21) #29
Conversation
WalkthroughThis update migrates several Vue components from direct, imperative usage of the ECharts library to a declarative, component-based approach using the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant VueComponent
participant HuichartsComponent
User->>VueComponent: Mounts component
VueComponent->>HuichartsComponent: Passes reactive options/props
HuichartsComponent-->>VueComponent: Renders chart based on options
User->>VueComponent: Triggers resize or locale change
VueComponent->>HuichartsComponent: Calls resize() or updates props
HuichartsComponent-->>VueComponent: Updates chart display
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
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. 🪧 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: 0
🧹 Nitpick comments (5)
template/tinyvue/src/views/board/home/components/falls.vue (2)
12-15: Remove unused import.The
injectimport from Vue is not used in this component after migrating to Ting-Charts. Consider removing it to keep the imports clean.-import { onMounted, watch, inject, ref, nextTick } from 'vue'; +import { onMounted, watch, ref, nextTick } from 'vue';
70-111: Consider extracting hardcoded chart configurations as constants or computed properties.The chart configuration contains numerous hardcoded values. For better maintainability, consider extracting these values into constants or computed properties, especially for values that might need to change based on themes or other application state.
template/tinyvue/src/views/board/home/components/curve.vue (3)
12-15: Remove unused import.The
injectimport from Vue is not used in this component after migrating to Ting-Charts. Consider removing it to keep the imports clean.-import { onMounted, watch, inject, ref, nextTick } from 'vue'; +import { onMounted, watch, ref, nextTick } from 'vue';
213-230: Consider using i18n directly in chart config for better maintainability.While the current approach works well for locale handling, consider using the
tfunction directly in the initial configuration to make the code more DRY and easier to maintain:const getLegendData = () => [t('home.main.down'), t('home.curve.play'), t('home.curve.page')]; const chartExtend = ref({ legend: { data: getLegendData(), // ...other config }, // ...other config series: [ { name: t('home.main.down'), // ...other config }, // ...other series ] }); // Then in the watch function, just call: watch(currentLocale, () => { chartExtend.value.legend.data = getLegendData(); chartExtend.value.series[0].name = t('home.main.down'); // ...other updates chartRef.value.resize(); });This would reduce duplication and automatically handle translations.
127-128: Translate Chinese comment to English for consistency.There's a comment in Chinese. Consider translating it to English for consistency with the rest of the codebase.
- // 区域填充样式 + // Area fill style
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
package.json(1 hunks)template/tinyvue/src/App.vue(1 hunks)template/tinyvue/src/views/board/home/components/curve.vue(1 hunks)template/tinyvue/src/views/board/home/components/falls.vue(1 hunks)template/tinyvue/src/views/board/home/components/region.vue(1 hunks)template/tinyvue/src/views/board/home/components/round.vue(1 hunks)
🔇 Additional comments (15)
package.json (1)
74-74: New dependency added for chart upgrade.The addition of
@opentiny/vue-huichartsat version^3.22.0supports the migration from ECharts to Ting-Charts, which matches the PR title "feat: replace echarts to ting-charts".template/tinyvue/src/App.vue (1)
8-15: Global ECharts injection removed.As part of migrating from direct ECharts usage to Ting-Charts components, the global echarts injection (
provide('echarts', echarts)) has been correctly removed. This is consistent with moving away from imperative chart initialization to a component-based approach.template/tinyvue/src/views/board/home/components/region.vue (4)
9-9: Successfully migrated to declarative chart components.The code has been refactored to use
<tiny-chart-map>component instead of manually initializing an ECharts instance, which simplifies the code and makes it more maintainable.
18-22: Clean dependency update.The code correctly imports
TinyHuichartsMapand aliases it toTinyChartMapfor better readability, while removing the dependency on the injectedechartsinstance.
60-119: Well-structured configuration with reactive refs.The chart configuration has been properly converted to a reactive
refobject, which is the recommended approach for Vue 3. The options include all necessary properties from the previous ECharts configuration with additional improvements likeselectedMode: falseand propermarkPointconfiguration.
121-128: Updated resize handling.The resize event handling has been properly adapted to work with the Ting-Charts component API, maintaining the same functionality but with the new implementation.
template/tinyvue/src/views/board/home/components/round.vue (5)
7-7: Successfully migrated pie chart to component-based approach.The code has been refactored to use
<tiny-chart-ring>component with properly bound props (optionsandextend) instead of manually initializing an ECharts instance.
17-21: Clean dependency update.The code correctly imports
TinyHuichartsRingand aliases it toTinyChartRing, while removing the dependency on the injectedechartsinstance.
25-77: Well-organized chart configuration split into data and styling.The chart configuration has been cleanly separated into:
options.data- containing just the data pointschartExtend- containing styling, tooltips, legend configuration, and other visual aspectsThis separation of concerns makes the code more maintainable and easier to understand.
79-86: Updated resize handling.The resize event handling has been properly adapted to work with the Ting-Charts component API, maintaining the same functionality with the new implementation.
88-90: Simplified locale change handling.The watch on
currentLocalehas been updated to use the component's resize method instead of completely reinitializing the chart, which is a more efficient approach.template/tinyvue/src/views/board/home/components/falls.vue (2)
6-6: Great migration to the declarative chart approach.The refactoring from imperative ECharts usage to a declarative component-based approach with
tiny-chart-waterfalllooks good. This approach simplifies chart integration and makes updates more reactive.
190-201: Good implementation of resize handling.The resize logic is properly implemented, triggered on window resize, after component mount, and on locale changes.
template/tinyvue/src/views/board/home/components/curve.vue (2)
6-6: Great migration to the declarative chart approach.The refactoring from imperative ECharts usage to a declarative component-based approach with
tiny-chart-histogramlooks good. This approach simplifies chart integration and makes updates more reactive.
20-28: Good use of dataZoom configuration for improved user interaction.The dataZoom configuration is well-structured and provides good user interaction options with both inside (mouse wheel/pinch zoom) and slider controls.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #21
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Refactor
Chores