Grafana "Groupby" Transformation + echarts Bug

[badikipiten]

Hi. There is a bug when using the groupby transformation on grafana and wanting to chart the result using echarts. The data is available on the table but when I switch to the chart is come blank. Is any one experiencing this?

I have 15 transformations and as soon as I add the groupby transformation, it ignores all other transformation and hence I get a black chart.

[badikipiten]

You can also see from the transformation debug. I have all transformation on the input but the output results with just one transformation.

[yosiasz]

@badikipiten

15 transformations

15 sounds way too much and renders your dashboard to be super fragile. What is your version of grafana, what data source and what visualization do you want in echart

[mikhailvolkov]

@badikipiten I just tested Group by transformations in the Apache ECharts, and it works as expected.

I quickly updates the default Function and used Static Data source to emulate data:

const series = data.series.map((s) => {
  const sData = s.fields.find((f) => f.type === 'number').values;
  const sTime = s.fields.find((f) => f.type === 'string').values;

  return {
    name: 'Test',
    type: 'line',
    showSymbol: false,
    areaStyle: {
      opacity: 0.1,
    },
    lineStyle: {
      width: 1,
    },
    data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),
  };
});

/**
 * Enable Data Zoom by default
 */
setTimeout(() => echartsInstance.dispatchAction({
  type: 'takeGlobalCursor',
  key: 'dataZoomSelect',
  dataZoomSelectActive: true,
}), 500);

/**
 * Update Time Range on Zoom
 */
echartsInstance.on('datazoom', function (params) {
  const startValue = params.batch[0]?.startValue;
  const endValue = params.batch[0]?.endValue;
  locationService.partial({ from: startValue, to: endValue });
});

return {
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    left: '0',
    bottom: '0',
    data: data.series.map((s) => 'Test'),
    textStyle: {
      color: 'rgba(128, 128, 128, .9)',
    },
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none',
        icon: {
          zoom: 'path://',
          back: 'path://',
        },
      },
      saveAsImage: {},
    }
  },
  xAxis: {
    type: 'category',
  },
  yAxis: {
    type: 'value',
    min: 'dataMin',
  },
  grid: {
    left: '2%',
    right: '2%',
    top: '2%',
    bottom: 24,
    containLabel: true,
  },
  series,
};