evidence-dev / evidence

Business intelligence as code: build fast, interactive data visualizations in SQL and markdown
https://evidence.dev
MIT License
4.48k stars 215 forks source link

[Bug]: Series order unpredictable in AreaChart and others #2663

Closed flosell closed 2 weeks ago

flosell commented 1 month ago

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 
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](https://github.com/user-attachments/assets/ce86973a-5178-496d-8477-8d85b761816f)

Now drop the first data point and the order of series has flipped, breaking the whole visualisation
![ordered_data_2024-10-20T17-55-10](https://github.com/user-attachments/assets/22268fcf-25a3-4fd3-850f-ee6a9d3e654d)

### 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.