Export types for formatter callback params

[sthenault]

What problem does this feature solve?

would allow to define callback formatter with properly typed arguments: for now I have to type params to any, loosing typing within the formatter function. For instance:

    tooltip.formatter = (params: any) => {
        // access to whatever in params is allowed
        ...
        return content;
    };

What does the proposed API look like?

As I get it, params is expected to be of FormatterParams type, so exporting in within echarts.d.ts would allow something along the line of :

import {FormatterParams} from "echarts";

...
tooltip.formatter = (params: FormatterParams) => {
        // compilation error on access to something to defined in FormatterParams
        return content;
    };

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[azureabaaba]

模块“"echarts"”没有导出的成员“FormatterParams”。

[MaewenPell]

Hello, 👋

Any news regarding this point please ?

[Loongphy]

import { CallbackDataParams } from 'echarts/types/dist/shared.js'
import { TooltipMarker } from 'echarts/types/src/util/format.js'

export type TooltipCallbackDataParams = CallbackDataParams & {
  axisDim?: string
  axisIndex?: number
  axisType?: string
  axisId?: string
  axisValue?: string | number
  axisValueLabel?: string
  marker?: TooltipMarker
}

https://github.com/apache/echarts/blob/75dd430d77e8949d56f2129f05018fe8629e5b2d/src/component/tooltip/TooltipView.ts#L127

[mkf62]

I'm also stuck on this.

import { TooltipComponentOption } from 'echarts'

let tooltipConfig: TooltipComponentOption = {
    formatter: function (params) {
        return params.value
    },
}

Typescript squiggly lines .value and reports:

Property 'value' does not exist on type 'TopLevelFormatterParams'.
  Property 'value' does not exist on type 'CallbackDataParams[]'.

Well, TopLevelFormatterParams looks like this:

type TopLevelFormatterParams = CallbackDataParams | CallbackDataParams[];

Since properties like value or dimensionNames etc live on CallbackDataParams type (not an array), you can't guarantee you can access it via the TopLevelFormatterParams type which is why Typescript is throwing an error. It's also why you can't do params[0].value because, again, using the type TopLevelFormatterParams does not guarantee the type CallbackDataParams[].

You can't really do anything other than (params: any) since the union of types by TopLevelFormatterParams conflict with each other.

I am new to TypeScript so if there's a solution here that I'm not seeing please let me know...

Edit: I guess instead of any you could assert the type if you know for sure it will be one or the other, then you at least get intellisense (VS Code) working with the various properties available:

import { TooltipComponentOption } from 'echarts'
import { CallbackDataParams } from 'echarts/types/dist/shared.js'

let tooltipConfig: TooltipComponentOption = {
    formatter: function (params) {
        let p = params as CallbackDataParams[]
        return p[0].dimensionNames[0]
    },
}

You could also write a type guard, but you still have to use // @ts-ignore to suppress errors for a few properties due to other typing problems. The code will run fine despite typescript complaining.

import { TooltipComponentOption } from 'echarts'
import { CallbackDataParams } from 'echarts/types/dist/shared.js'

//Type guard for tooltip formatter
function isParamsArray(params: any): params is CallbackDataParams[] {
    return params[0].seriesName !== undefined
}

let tooltipConfig: TooltipComponentOption = {
    formatter: function (params) {
        if (isParamsArray(params)) {
            const s1 = params[0]
            const s2 = params[1]
            //@ts-ignore
            const date = new Date(s1.value[s1.encode.x[0]]).toLocaleDateString('en-US', {
                timeZone: 'UTC', year: 'numeric', month: 'long', day: 'numeric'})
            //@ts-ignore
            const s1data = s1.value[s1.encode.y[0]]
            //@ts-ignore
            const s2data = s2.value[s2.encode.y[0]]
            return (
                `<b>Date:</b> ${date}
                <br />
                ${s1.marker} <b>${s1.seriesName}:</b> ${s1data} years
                <br />
                ${s2.marker} <b>${s2.seriesName}:</b> ${s2data} years`
            )
        }
        else {
            //@ts-ignore
            const date = new Date(params.value[params.encode.x[0]]).toLocaleDateString('en-US', {
                timeZone: 'UTC', year: 'numeric', month: 'long', day: 'numeric'})
            //@ts-ignore
            const sdata = params.value[params.encode.y[0]]
            return (
                `<b>Date:</b> ${date}
                <br />
                ${params.marker} <b>${params.seriesName}:</b> ${sdata} years`
            )
        }
    },
}