-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Rendering tooltips and dataView with slots #838
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 8.0
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
The limitation is that the tooltip detached from the current component tree, not provide/inject will try teleport next
How about we go over the external API first? |
We could consider supporting multiple or dynamic slots—e.g., tooltip, tooltip-series-line, etc.—which could then map to the corresponding tooltip configurations at different levels. The idea would be to let slots fully override the tooltip formatters.
From what I’ve seen, showTip is triggered whenever the pointer moves within the chart. Could you clarify what specific information is missing for our use case?
If we can implement tooltips as slots, we should be able to make the content reactive to async states or even render The most tricky part I can think of is when and how to update the slot props when |
I also considered this, but then I remembered that For multiple series of the same type but with different formatters, should we add a modifier like Most series support formatter for each single datum. But I think users can achieve similar functionality by using a series-level tooltip formatter and
I think the slotProps should be the
We could override users' formatter(params) {
// slotName.slotProps is a shallowRef
slotName.slotProps.value = params
return toHtml(slotContent)
} The slot props would be updated whenever |
How about use the property path of the
<template #tooltip />
<template #tooltip:xAxis[1] />
<template #tooltip:series[3] />
<template #tooltip:series[3].data[2] />
<template #tooltip:baseOption />
<template #tooltip:[1].option /> |
I feel the base functionality is mostly complete. However, it currently doesn't support dynamically changing slot names or adding/removing slots. With the current approach, implementing this might be tricky. For example: <script setup>
// Work
const slotNames = ref(['tooltip', 'tooltip:series[0]'])
// Don't work
setTimeout(()=>{
slotNames.value.push('tooltip:series[1]')
},1000)
</script>
<template>
<v-chart>
<template v-for="slotName in slotNames" #[slotName]={ params } >
<!-- content -->
</template>
</v-chart>
</template> Edit: Supported in the latest commit |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the design and implementation is pretty good now. Left a few small questions.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have another option: how do we support [contentToOption](https://echarts.apache.org/zh/option.html#toolbox.feature.dataView.contentToOption)
?
The usage of <script>
const input = useTemplateRef("input");
const option = {
toolbox: {
feature: {
dataView: {
contentToOption(_container) {
return inputToOption(input);
},
},
},
},
};
</script>
<template>
<v-chart :option="option">
<template #dataView>
<div>
<div>title</div>
<textarea ref="input" />
</div>
</template>
</v-chart>
</template> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR introduces a slot-based tooltip rendering system for vue-echarts, allowing developers to define tooltip content using Vue template syntax instead of the traditional ECharts formatter callbacks. The implementation includes support for both tooltip and dataView slots with a flexible naming convention.
- Adds a new composable
useSlotOption
that handles slot-based rendering by teleporting content to detached DOM elements - Integrates slot functionality directly into the main ECharts component with automatic option patching
- Provides utility functions for array index validation and set comparison
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
File | Description |
---|---|
src/utils.ts | Adds utility functions for array index validation and set comparison |
src/composables/slot.ts | New composable implementing the core slot rendering functionality |
src/composables/index.ts | Exports the new slot composable |
src/ECharts.ts | Integrates slot functionality into the main component with slot type definitions |
demo/examples/LineChart.vue | Demo implementation showcasing tooltip and dataView slots |
demo/examples/Example.vue | CSS selector specificity fix for nested charts |
demo/data/line.js | Test data for the line chart demo |
demo/Demo.vue | Adds the new line chart demo to the demo list |
README.zh-Hans.md | Chinese documentation for the new slot features |
README.md | English documentation for the new slot features |
LGTM |
Note
This is an AI generated summary of this PR after all the discussion we had. Reviewed by @Justineo.
Slot-based Custom Rendering for
tooltip
anddataView
This PR introduces slot-based rendering for
tooltip.formatter
andtoolbox.dataView.optionToContent
in Vue-ECharts.During review we briefly experimented with an internal POC component, but that approach was discarded in favor of first-class Vue slots, so no extra component is shipped.
Key Features
tooltip
ordataView
and map to the corresponding option path. Join path segments with hyphens and use numbers for array indices — e.g.tooltip-series-2-data-4
→option.series[2].data[4].tooltip.formatter
.Implementation Highlights
src/composables/slot.ts
Parses slot names into option paths and returns wrapped
formatter
/optionToContent
callbacks. These callbacks return a container HTMLElement with the rendered slot content.src/ECharts.ts
Collects user slots in
setup()
, injects them into the correct option paths, and callssetOption
. Watches slot changes so the chart updates reactively.Deprecated design
Summary
This PR proposes a new
echarts-tooltip
component. The component provides aformatter
method that can be used with ECharts'tooltip.formatter
option, allowing users to define tooltip content using Vue's template syntax.The slot props are what users passed to the
formatter
method. The component teleports its slot content to a detached DOM element so that it does not exist in the html body.Example
For a practical example, see the Line Chart in the demo preview which features a Pie Chart as its tooltip.
Design Rationale
Why a Separate Component?
VChart
would make it difficult to handle these various use cases intuitively.The
showTip
event doesn't provide sufficient information for implementing the approach suggested in Use Web Components without native class support detection #836 (comment).We may need to support ECharts' asynchronous tooltip formatting:
By making it a separate component, users can:
@Justineo , do you have any other ideas for us to try?