Tooltip not works with e_flip_coords

[artemklevtsov]

Hi.

Plots with e_flip_coords not shows tooltips.

To reproduce:

library(echarts4r)
library(dplyr)

mtcars %>% 
    mutate(
        model = row.names(.),
        total = mpg + qsec
    ) %>% 
    arrange(desc(total)) %>% 
    e_charts(model) %>% 
    e_bar(mpg, stack = "grp") %>% 
    e_bar(qsec, stack = "grp") %>% 
    e_tooltip(
        trigger = "item",
        formatter = e_tooltip_item_formatter(style = "percent", locale = "ru")
    )

mtcars %>% 
    mutate(
        model = row.names(.),
        total = mpg + qsec
    ) %>% 
    arrange(desc(total)) %>% 
    e_charts(model) %>% 
    e_bar(mpg, stack = "grp") %>% 
    e_bar(qsec, stack = "grp") %>% 
    e_tooltip(
        trigger = "item",
        formatter = e_tooltip_item_formatter(style = "percent", locale = "ru")
    ) %>% 
    e_flip_coords()

[artemklevtsov]

Now formatter code looks like this:

function(params, ticket, callback) {
    var locale = "ru-RU";
    var opts = {
        "style":"decimal",
        "minimumFractionDigits":0,
        "maximumFractionDigits":0,
        "currency":"RUB"
    };
    var fmt = new Intl.NumberFormat(locale, opts);
    return params.name + '<br>' +
           params.marker + ' ' +
           params.seriesName + ': ' +
           fmt.format(parseFloat(params.value[1]));
}

To solve this issue we should swap the value[0] and value[1]. So final tooltip callback must be written as following:

function(params, ticket, callback) {
    var locale = "ru-RU";
    var opts = {
        "style":"decimal",
        "minimumFractionDigits":0,
        "maximumFractionDigits":0,
        "currency":"RUB"
    };
    var fmt = new Intl.NumberFormat(locale, opts);
    return params.name + '<br>' +
           params.marker + ' ' +
           params.seriesName + ': ' +
           fmt.format(parseFloat(params.value[0]));
}

[artemklevtsov]

@JohnCoene, so seems I find robust way to detect it:

function(params, ticket, callback) {
    var locale = "ru-RU";
    var opts = {
        "style":"decimal",
        "minimumFractionDigits":0,
        "maximumFractionDigits":0,
        "currency":"RUB"
    };
    var fmt = new Intl.NumberFormat(locale, opts);
    var idx = 0;
    if (params.name == params.value[0]) {
        idx = 1;
    }
    return params.name + '<br>' +
           params.marker + ' ' +
           params.seriesName + ': ' +
           fmt.format(parseFloat(params.value[idx]));
}

[artemklevtsov]

Note with dataset[i].source flip coordinates is more easy.

option = {
  dataset: [{
    id: "cars",
    source: {
        "model":["Toyota Corolla","Fiat 128","Honda Civic","Lotus Europa","Fiat X1-9"],
        "total":[53.8,51.87,48.92,47.3,46.2],
        "mpg":[33.9,32.4,30.4,30.4,27.3]
    }
  }],
  xAxis: {show: true, type: 'value'},
  yAxis: {show: true, type: 'category'},
  tooltip: {show: true},
  series: [
    {
      type: 'bar',
      stack: 'grp',
      encode: {
          y: 'model',
          x: 'total',
          tooltip: 'total'
      },
    },
    {
      type: 'bar',
      stack: 'grp',
      encode: {
          y: 'model',
          x: 'mpg',
          tooltip: 'mpg'
      }
    }
  ]
};

To flip coordinates we must simply swap the encode and axis types.
To get source with this format use toJSON(data, dataframe = "columns").

[JohnCoene]

Thanks @artemklevtsov, I'll look into this tomorrow!