Enhancement Proposal: Customizable Chart Tooltips

[graphieros]

Enhancement Proposal: Customizable Chart Tooltips

[graphieros]

It's not a problem, as I said it's something I knew I had to tackle anyway. It's also the right time.
I already prototyped it and it works great, so I just need to apply it everywhere, and add ts types. I'll let you know when it's released:)

[graphieros]

Released in v.2.0.9

Using customFormat tooltip option makes the tooltip headless.
Custom styles can be applied by targeting the following css class:

.vue-data-ui-custom-tooltip

[graphieros]

Hey Adeiko !

Thanks for your kind words :)

That's a very good idea. I was thinking about this exact limitation some weeks ago, but did not get to think of the implementation yet.

Feel free to send me a PR with your implementation for custom tooltips, as it would be clearly a win for the project. Most datasets passed in by the user go through some internal mapping. It would make sense to expose formatted datasets. For example, if no colors are provided for given datasets / datapoints, default colors are mapped. Also additional calculations may be mapped, as percentages. The solution should work seamlessly for all charts bearing a tooltip option.

Thanks again for your interest in the project, it means a great deal to me:)

Cheers
A.

[graphieros]

After taking a look, the approach would be:

1. Adding a config tooltip option called customFormat, defaulting to null, which is used as a callback to expose required data to customize tooltip contents

2. Inside the useTooltip component functions, calling the customFormat if it exists and its return value is of type string; passing in necessary data (seriesIndex (absolute, non dependent on serie segregation), datapoint, the complete dataset series, and maybe the full config object as well), and assign its return value (the user's custom format) to the tooltipContent. If customFormat is null, or its return type is not a string, the default behavior will apply.

3. Tweaking lib.js #treeShake to add a check for function types

Here would be an example of use, in the client component, in the config passed to the component:

const config = {
  ...
  tooltip: {
    customFormat: ({ datapoint, seriesIndex, series, config }) => {
        return `<div style="color:${datapoint.color}">${datapoint.name}</div>`
      }
  }
}

If this fits what you imagined, I can start working on applying it to all charts with tooltips.

[Adeiko]

Yeah that is more of less what i was thinking. but I didn't mean any imposition for you to work on it, i was happy to do a pr with an attemp.

if it helps, for example AG-Charts (also chart-js I think) uses a similar setup:

export interface AgSeriesTooltipRendererParams<TDatum = any> extends AgChartCallbackParams<TDatum> {
    /** Series title or yName depending on series configuration. */
    readonly title?: string;
    /** Series primary colour, as selected from the active theme, series options or formatter. */
    readonly color?: CssColor;
}
export interface AgChartCallbackParams<TDatum = any> {
    /** The data point associated with the label. */
    datum: TDatum;
    /** The unique identifier of the item. */
    itemId?: string;
    /** The unique identifier of the series. */
    seriesId: string;
}
interface iChartScatterTooltipParams extends iChartScatterSeries, AgSeriesTooltipRendererParams<customTypeOfYourData> {}
export function genTooltipPickExample({ title, datum}: iChartScatterTooltipParams) {
return `<div><div>${title}</div><span>(${datum.value})</span></div>`
}

[graphieros]

Released in v.2.0.6

Docs are updated.

Basically exposed data is the same for all charts (except for VueUiXy which exposes more stuff).
Under the tooltip attribute of config objects, a customFormat attribute was added, set by default to null, which results in the default tooltip behaviour. It is to be used in the following fashion:

customFormat: ({ seriesIndex, datapoint, series, config }) => {
  return `<div>${ ... your custom content  }</div>`
}

customFormat must return a string to work.
Depending on the chart, typings for datapoint, series and config are specific. All these types were added in the .d.ts file. Thank you very much for pushing the idea, and providing inspiration for tooltip generics :)

[Adeiko]

Hey there!
Tried to implement it in the heatmap chart for example:

There seems to be a background and border leftover from the 'base' tooltip.
The only way to disable the border is also disabling it on the "selected" setting that adds the border to the items. selected.

I think it would be better to if there is a "custom tooltip add a class with only the z-index:2 and position: fixed" and if not add the defaultClass.

[graphieros]

Hey Adeiko,

nice render btw :)

Yeah I only worked on allowing content customization.
I'm reopening the issue until I implement headless styles for this mode. Totally forgot about that part.

The css class will be .vue-data-ui-custom-tooltip

I'll keep you posted.