lovasoa / SQLpage

SQL-only webapp builder, empowering data analysts to build websites and applications quickly
https://sql.ophir.dev
MIT License
895 stars 63 forks source link

Charts are getting cutoff at the right end #172

Closed accforgithubtest closed 6 days ago

accforgithubtest commented 6 months ago

The bars on the right most corner are cutoff (see next image for the correct number of bars) - Dec 23 data is cut off at the right side of the chart - image

After manually adding an empty row for an extra month, to create extra space on the right side - image

If it helps - Viewing this on a standard 27" 1140p monitor, maximized window as well.

lovasoa commented 6 months ago

Thanks for reporting this ! Can you please provide a small sql file that reproduces this ?

lovasoa commented 6 months ago

Ok, I can reproduce it with the following SQLite snippet:

select 
    'chart'    as component,
    'bar'      as type,
    TRUE       as toolbar,
    TRUE       as time;

with recursive integers(i) as (
    select 0 as i
    union all
    select i + 1
    from integers
    where i + 1 < 100
)
select 
    'S' || (i%10) as series,
    format('%d-01-01', 2010 + (i/10))     as x,
    abs(random() % 10)   as value
from integers;

image

(the problem appears on the left)

lovasoa commented 6 months ago

I reported the issue upstream, since the bug seems to be in apexcharts, not in SQLPage itself: https://github.com/apexcharts/apexcharts.js/issues/4178

DSMejantel commented 6 months ago

I have similar problems with long series. I want series as stacked values for each classes. It's ok for 1st et 2nd and after it's horrible. Some classes are a lot of times on x axys. For the 3rd, instead of the "34" we have the "41" ! image

There is the code :

-- Différents Dispositifs en place par Classe
select 
    'chart'               as component,
    'Différents dispositifs par classe' as title,
    'bar'             as type,
        500 as height,
    TRUE as labels,
    TRUE as stacked,
    'Classes' as xtitle,
    'Nombre de dispositifs' as ytitle;
select 
    Nom_dispositif as series,
    classe as x,
    coalesce(Nombre,0) as value
    FROM stats01 WHERE etab=$id ORDER BY classe;

This is the beginning of the debug with "34" as 3rd position...

Debug output

{"component":"debug","title":"Différents dispositifs par classe","type":"bar","height":500,"labels":true,"stacked":true,"xtitle":"Classes","ytitle":"Nombre de dispositifs"}

{"series":"SEGPA","x":"31","value":5}

{"series":"UEE","x":"31","value":2}

{"series":"ULIS","x":"31","value":2}

{"series":"Mat. Pédagogique","x":"33","value":2}

{"series":"PAI","x":"33","value":1}

{"series":"PIAL","x":"33","value":2}

{"series":"PPRE","x":"33","value":2}

{"series":"SEGPA","x":"33","value":1}

{"series":"ULIS","x":"33","value":2}

{"series":"FLS","x":"34","value":3}

{"series":"Mat. Pédagogique","x":"34","value":1}
lovasoa commented 5 months ago

ApexCharts just merged a fix for this issue. It will be included in SQLPage's next version :confetti_ball:

(currently just waiting for apex charts to release a new version containing the fix)