+ {Array.isArray(params) ? (
+ params.map((param) => (
+
+ ))
+ ) : (
+
+ )}
+
+ >
+ )
+}
+
+/**
+ * One line of the tooltip, including the colored symbol, series name and value.
+ */
+function ChartTooltipLine({
+ params,
+ percentage,
+ dimension,
+}: { params: any; percentage: boolean; dimension?: number }) {
+ return (
+ <>
+
+
+
+
+
+ {params.seriesName}
+
+
+
+ {getValueForTooltip(params, percentage, dimension)}
+
+
+
+
+
+ >
+ )
+}
+
+/**
+ * Extracts the value to be shown in the tooltip from the series
+ * @param params contains series values
+ */
+function getValueForTooltip(
+ params: any,
+ percentage: boolean,
+ dimension?: number
+) {
+ if (percentage) {
+ return `${Math.round(params.value * 1000) / 10}%`
+ }
+
+ if (!Array.isArray(params.value)) {
+ return params.value
+ }
+
+ if (dimension && params.value.length > dimension) {
+ return params.value[dimension]
+ }
+ // Default choice for echarts
+ return params.value[1]
+}
+
+/**
+ * Renders the tooltip statically so that it can be passed as an echarts tooltip
+ * formatter.
+ */
+export const getTooltipStaticString = (props: FormatterParams) => {
+ const { params, invert = false, percentage = false, dimension } = props
+
+ return renderToStaticMarkup(
+