sqlpage / SQLPage

Fast SQL-only data application builder. Automatically build a UI on top of SQL queries.
https://sql.datapage.app
MIT License
1.57k stars 89 forks source link

Treemap Chart - Ability to specify color for each data #593

Closed accforgithubtest closed 3 weeks ago

accforgithubtest commented 3 weeks ago

Would be nice to be able to specify the colors for each each of the data point in a treemap chart.

Currently this works and applies the color to all data in the chart -

select 
    'chart'   as component,
    'treemap' as type,
    'Quarterly Results By Region (in k$)' as title,
    'green' as color,
    TRUE      as labels;

while this does not work while attempting to specify color for each data in the chart -

select 
    'North America' as series,
    'United States' as label,
    'orange' as color,
    35              as value;
select 
    'North America' as series,
    'Canada'        as label,
    'red' as color,
    15              as value;
select 
    'Europe'  as series,
    'Germany' as label,
    'blue' as color,
    55        as value;
lovasoa commented 3 weeks ago

Unfortunately, the properties are common to the entire chart component (and not specific per visualisation type). Colors are set as top-level properties, and they are not set per datapoint, but per series.

But nothing prevents you from having a single datapoint per series:

select 
    'chart'   as component,
    'treemap' as type,
    'Quarterly Results By Region (in k$)' as title,
    TRUE      as labels,
    'yellow' as color, 'purple' as color, 'cyan' as color; -- or jsonb_build_array('yellow', 'purple', 'cyan') if your database supports it

select 1 as series, 'United States' as label, 35 as value;
select 2 as series, 'France' as label, 30 as value;
select 3 as series, 'Germany' as label, 350 as value;
accforgithubtest commented 3 weeks ago

Thanks for the answer, using multiple color specs at the chart component works and I used a order by to ensure the ordering of the series in my results does not change. This works now, and thank you !