evidence-dev/evidence

[Bug]: Series order unpredictable in AreaChart and others

Closed this issue · 0 comments

Describe the bug

When there's more than one series in an AreaChart (and other types, e.g. LineCharts), the order of series depends on the data in (depending on the use-case) non-intuitive and hard to predict ways where playing with order by or sort=true/false doesn't result in a robust solution.

For some kinds of visualization we care about the order the series are represented, either because they imply a certain meaning or because we use more sophisticated echarts features that rely on the order of series for their logic.

Steps to Reproduce

As an example, I was trying to build a chart where one series is subtracted from the other:

```sql data
select 10000 as amount,  '2022-01-01'::date as month, 'a' as type   union
select 20000 as amount,  '2022-02-01'::date as month, 'a' as type   union
select 15000 as amount,  '2022-03-01'::date as month, 'a' as type   union
select  8000 as amount,  '2022-04-01'::date as month, 'a' as type   union
select  7000 as amount,  '2022-05-01'::date as month, 'a' as type   union
select 12000 as amount,  '2022-06-01'::date as month, 'a' as type   union
select 10000 as amount,  '2022-07-01'::date as month, 'a' as type   union
                                                                         
select -8000 as amount,  '2022-01-01'::date as month, 'b' as type union
select -10000 as amount, '2022-02-01'::date as month, 'b' as type union
select -12000 as amount, '2022-03-01'::date as month, 'b' as type union
select -11000 as amount, '2022-04-01'::date as month, 'b' as type union
select -10000 as amount, '2022-05-01'::date as month, 'b' as type union
select -15000 as amount, '2022-06-01'::date as month, 'b' as type union
select -20000 as amount, '2022-07-01'::date as month, 'b' as type 
```

```sql ordered_data
select * from ${data}
         order by type
```

<AreaChart
data={ordered_data}
x=month
y=amount
series=type
seriesOptions={{
'stackStrategy': 'positive'
}}
seriesColors={{
'a': 'green',
'b': 'red'
}}
sort=false
/>

ordered_data_2024-10-20T17-53-56

Now drop the first data point and the order of series has flipped, breaking the whole visualisation
ordered_data_2024-10-20T17-55-10

Logs

No response

System Info

No response

Severity

annoyance

Additional Information, or Workarounds

Digging around on Slack a bit, the introduction of a seriesOrder configuration has come up a few times but as far as I can see hasn't been implemented so far.
I've prototyped this for myself (duplicating the AreaChart component and sorting the seriesConfig according to a specific seriesOrder) and it seems to be working fine.

I'm happy to work on a PR (maybe building this into the getSeriesConfig function so the behavior is consistent for other types of chart) if that's the way we want to go with this.