PieChart flash with animation

[vallemar]

When I used PieChart with animation, there are times when the chart is seen for a moment and then it does the animation. Gives the sensation of flash. It is random, sometimes it is done well and sometimes it is not.

My config:

  chart.animateY(500);
  chart.setHoleColor(new Color("transparent"))
  chart.setTransparentCircleRadius(10)
  chart.setDrawEntryLabels(false)
  chart.setHoleRadius(50)

[farfromrefug]

@vallemar you need to share a full repro sample

[vallemar]

My code:

<template>
<GridLayout width="160">
            <PieChart
              id="chart"
              width="160"
              height="160"
              @loaded="loadChart"
            />
          </GridLayout>
</template>

....script

export type CurrencyChart = {
  label: string;
  value: number;
  color: string;
  percentage: string;
  stake: string;
};

const transparentCircleRadius = 45;
const drawEntryLabels = false;
const holeRadius = 70;

export const drawPieChart = (
  currencies: Currency[],
  chart: PieChart
) => {
  chart.animateY(500);
  chart.setHoleColor(new Color("transparent"));
  chart.setTransparentCircleRadius(transparentCircleRadius);
  chart.setDrawEntryLabels(drawEntryLabels);
  chart.setHoleRadius(holeRadius);

 const data = new ObservableArray(
        new Array(5).fill(0).map(function (v, i) {
            const value = Math.random() * 1;
            return { index: i, value: value , color: getColor(value.toString()), };
        })
    );

  const sets = [];
  const set = new PieDataSet(data, "Dataset Label", "value");
  set.setColors(data.map((d) => d.color));
  set.setDrawValues(true);
  sets.push(set);

  // Create a data object with the data sets
  const pd = new PieData(sets);

  // Set data
  chart.setData(pd);
  chart.highlightValues(null);
  chart.invalidate();
  return data;
};

function getColor(stringInput: string) {
  let stringUniqueHash = [...stringInput].reduce((acc, char) => {
    return char.charCodeAt(0) + ((acc << 5) - acc);
  }, 0);
  return `hsl(${stringUniqueHash % 360},70%,70%)`;
  /*  return `hsla(${~~(360 * (Math.random() * Math.random() * Math.random()))},70%,70%,0.8)`*/
}

[farfromrefug]

@vallemar your code is weird. You animate before setting the data. The consequence would indeed be a flash during animation

[vallemar]

I don't think I get it. Am I animating the graph before the data? I'm not sure where this code would go: chart.animateY(500);

[farfromrefug]

@vallemar move the chart.animateY(500); to the end of drawPieChart . Where is drawPieChart called by the way? What s the difference with loadChart?

[vallemar]

@farfromrefug Ok I'll move this, I thought the setting was before .setData. The loadChart method makes the server call and when I have the data I call drawPieChart.

Anyway it seems that the flash does not appear now. I've put another pieChart as background and it doesn't seem to happen now. It usually happened on the first load of the chart.

I'm going to give you access to the project in case you want to look at it.

[farfromrefug]

@vallemar see animateY as animate in N. The animation starts right away. So it is fixed now ?

[vallemar]

@farfromrefug Oh, okay! then that must be the problem yeah! if it has stopped happening when putting the other graphic in the background! Thank you!

[vallemar]

I think this problem has to be opened, the same happens with a BarChart, if you uncomment these lines of code when you start the app you will see a flash

https://github.com/vallemar/freqtrade-app/blob/master/app/utils/charts/BarChart.ts#L55

[vallemar]

Sorry I have moved animateY and animateX above setData and it no longer does the flashing, disregard the comment above.