slint/demos/home-automation/ui/components/graph.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Palette,Measurements } from "../common.slint";
import { HaText } from "general/haText.slint";

export component Graph {
    in property <string> name;
    in property <string> id;
    in property <bool> full-screen: false;
    property <[int]> grid: [ 2, 3, 4, 5, 6, 7, 8, 9];
    property <[int]> values: [0, 1, 2, 3, 4, 5, 6,];
    tile := Rectangle {
        clip: true;
        background: Palette.graph-background;
        border-radius: Measurements.tile-radius;
        VerticalLayout {
            padding: (tile.height > Measurements.small-height-tile) ? 18px : 9px;
            width: 100%;
            height: tile.height;
            VerticalLayout {
                alignment: start;
                spacing: 5px;

                HaText {
                    text: root.name;
                    font-size: 10pt;
                    font-weight: 400;
                    color: Palette.graph-foreground;
                }

                Rectangle {
                    height: 10px;
                }
            }
        }

        Rectangle {
            width: 1px;
            height: parent.height * 0.6;
            background: Palette.graph-foreground.transparentize(0.8);
            x: tile.width * 0.1;
            y: tile.height * 0.3;
        }

        for i in grid: Rectangle {
            width: 1px;
            height: parent.height * 0.6;
            background: Palette.graph-foreground.transparentize(0.9);
            x: tile.width * 0.1 * i;
            y: tile.height * 0.3;
        }
        for i in values: HaText {
            horizontal-alignment: right;
            y: tile.height * 0.9 - (tile.height * i / 10);
            x: tile.width * 0.03;
            text: i * 20;
            color: Palette.graph-foreground.transparentize(0.8);
            font-size: 5pt;
        }
        Rectangle {
            height: 1px;
            width: parent.width * 0.8;
            background: Palette.graph-foreground.transparentize(0.8);
            x: tile.width * 0.1;
            y: tile.height * 0.9;
        }

        property <[int]> days: [ 58, 60, 22, 90, 40, 30, 50, 40, 20];

        HorizontalLayout {
            x: 25px;
            y: parent.height - self.height - 25px;
            alignment: start;
            spacing: 10px;
            for i in days: Rectangle {
                y: parent.height - self.height;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                width: 10px;
                height: i * 1px;
                background: Palette.graph-alternate-foreground;
                opacity: 90%;
            }
        }
    }
}