random svg path preview

[moolight-seashell]

hi,

i have this code :

export component Graph {
    in property <[{values: [float],background: color, name: string}]> graphes: 
        [{values: [0.5,0.75,0.25,0.1,0.4,0.5,0.9,0.25,0.1],background: #2bc2ae71, name: "temperature"}];

    for graphe in graphes.length : Rectangle {
        for value in graphes[graphe].values.length - 1:
        Path {
            width: parent.width;
            height: parent.height;
            fill: graphes[graphe].background;
            viewbox-width: parent.width/1px;
            viewbox-height: parent.height/1px;

            MoveTo {
                x : value * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : parent.viewbox-height;
            }
            LineTo{
                x : value * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : graphes[graphe].values[value] * parent.viewbox-height;
            }
            CubicTo{
                control-1-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                control-1-y : graphes[graphe].values[value] * parent.viewbox-height;
                control-2-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                control-2-y : graphes[graphe].values[value + 1] * parent.viewbox-height;
                x : (value+1) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : graphes[graphe].values[value + 1] * parent.viewbox-height;
            }
            LineTo{
                x : (value+1) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : parent.viewbox-height;
            }
            Close {
            }
        }

        for value in graphes[graphe].values.length - 1:
        Path {
            width: parent.width;
            height: parent.height;
            stroke: blue;
            stroke-width: 5px;
            viewbox-width: (parent.width - self.stroke-width)/1px;
            viewbox-height: (parent.height - self.stroke-width)/1px;

            
            MoveTo{
                x : value * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : graphes[graphe].values[value] * parent.viewbox-height;
            }
            CubicTo{
                control-1-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                control-1-y : graphes[graphe].values[value] * parent.viewbox-height;
                control-2-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                control-2-y : graphes[graphe].values[value + 1] * parent.viewbox-height;
                x : (value+1) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : graphes[graphe].values[value + 1] * parent.viewbox-height;
            }
        }
    }

somtime i have a good preview like this :

but very often i have these preview :

[moolight-seashell]

and well it's quite annoying to not be able to chain if and for without using an object in between

the preview looks a little bit more stable with if in between like that :

export component Graph {
    in property <[{values: [float],underline_color: color, line_color : color, draw_line : bool , draw_underline: bool, name: string}]> graphes: 
        [{values: [0.5,0.75,0.25,0.1,0.4,0.5,0.9,0.25,0.1],underline_color: #2bc2ae71, line_color : #45968b, draw_line : true, draw_underline : false,name: "temperature"},
        {values: [0.7,0.2,0.8,0.4,0.5,0.4,0.8,0.7,0.2],underline_color: #30c22b70,line_color: #3c9139, draw_line : true, draw_underline : true, name: "huminidtée"}];

    for graphe in graphes.length : Rectangle {
        Text {
            horizontal-alignment: left;
            text: graphes[graphe].name;
            y : graphe*1px * 20;
            x : 10px;
            color: graphes[graphe].line_color;
            font-size: 15px;
            
        }

        if(graphes[graphe].draw_underline):  Rectangle {
            for value in graphes[graphe].values.length - 1:
            Path {
                width: parent.width;
                height: parent.height;
                fill: graphes[graphe].underline_color;
                viewbox-width: parent.width/1px;
                viewbox-height: parent.height/1px;

                MoveTo {
                    x : value * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    y : parent.viewbox-height;
                }
                LineTo{
                    x : value * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    y : graphes[graphe].values[value] * parent.viewbox-height;
                }
                CubicTo{
                    control-1-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    control-1-y : graphes[graphe].values[value] * parent.viewbox-height;
                    control-2-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    control-2-y : graphes[graphe].values[value + 1] * parent.viewbox-height;
                    x : (value+1) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    y : graphes[graphe].values[value + 1] * parent.viewbox-height;
                }
                LineTo{
                    x : (value+1) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    y : parent.viewbox-height;
                }
                Close {
                }
            }
        }

        if(graphes[graphe].draw_line): Rectangle {
            for value in graphes[graphe].values.length - 1:
            Path {
                width: parent.width;
                height: parent.height;
                stroke: graphes[graphe].line_color;
                stroke-width: 3px;
                viewbox-width: (parent.width - self.stroke-width)/1px;
                viewbox-height: (parent.height - self.stroke-width)/1px;
    
                
                MoveTo{
                    x : value * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    y : graphes[graphe].values[value] * parent.viewbox-height;
                }
                CubicTo{
                    control-1-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    control-1-y : graphes[graphe].values[value] * parent.viewbox-height;
                    control-2-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    control-2-y : graphes[graphe].values[value + 1] * parent.viewbox-height;
                    x : (value+1) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                    y : graphes[graphe].values[value + 1] * parent.viewbox-height;
                }
            }
        }
    }

[tronical]

I've tried to reproduce this, but I haven't had any luck yet. Is this on Linux with wayland by chance?

[moolight-seashell]

i am on manjaro with xserver