Charts example

Example with embedded charts JS (charJs must be added to the application):

{
    "$description": "ChartJS",
    "schema": {
        "type": "object",
        "properties": {
            "values": {
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {
                        "number": {
                            "type": "number",
                            "required": true,
                            "default": 0
                        },
                        "color": {
                            "type": "string"
                        }
                    }
                }
            }
        }
    },
    "value": {
        "values": [
            {
                "number": 883,
                "color": "hsl(79.866453845212,94.86949088624512%,69.8944470007463%)"
            },
            {
                "number": 640,
                "color": "hsl(158.41348158051002,34.8475379719533%,71.01536965630156%)"
            },
            {
                "number": 359,
                "color": "hsl(58.86869099207512,53.92863365016491%,68.5683215935954%)"
            },
            {
                "number": 611,
                "color": "hsl(352.39137723563476,38.2524840377004%,73.24108731047215%)"
            },
            {
                "number": 825,
                "color": "hsl(339.95878913396166,29.45131348109329%,66.33522124884799%)"
            },
            {
                "number": 745,
                "color": "hsl(49.49550030374822,28.95087126896668%,70.43305712909455%)"
            }
        ]
    },
    "layout": {
        "type": "div",
        "items": [
            {
                "type": "div",
                "htmlClass": "wrapper",
                "items": [
                    {
                        "type": "div",
                        "htmlClass": "container",
                        "items": [
                            {
                                "type": "row",
                                "items": [
                                    {
                                        "type": "col",
                                        "xs": 8,
                                        "items": [
                                            {
                                                "type": "div",
                                                "htmlClass": "mt-2",
                                                "items": [
                                                    {
                                                        "type": "chartjs",
                                                        "config": {
                                                            "$eval": "return { \n                                type: 'bar',\n                                data: {\n                                  labels: $val.values.map((x, idx) => 'Input ' + idx),\n                                  datasets: [{\n                                    label: 'Dataset 1',\n                                    data: $val.values.map(x => x.number),\n                                    backgroundColor: $val.values.map(x => x.color),\n                                    hoverBackgroundColor: $val.values.map(x => $color(x.color).darken(.2).hex()),\n                                  }]\n                                }\n                              }",
                                                            "dependencies": [
                                                                "values"
                                                            ]
                                                        }
                                                    },
                                                    {
                                                        "type": "chartjs",
                                                        "config": {
                                                            "$eval": "return { \n                                type: 'line',\n                                data: {\n                                  labels: $val.values.map((x, idx) => 'Input ' + idx),\n                                  datasets: [{\n                                    label: 'Dataset 1',\n                                    data: $val.values.map(x => x.number),\n                                    borderColor: $color('#D5AAFF').alpha(.7).hex(),\n                                    hoverBorderColor: $color('#D5AAFF').alpha(.7).darken(.2).hex(),\n                                    fill: false\n                                  }]\n                                }\n                              }",
                                                            "dependencies": [
                                                                "values"
                                                            ]
                                                        }
                                                    },
                                                    {
                                                        "type": "chartjs",
                                                        "config": {
                                                            "$eval": "return { \n                                type: 'pie',\n                                data: {\n                                  labels: $val.values.map((x, idx) => 'Input ' + idx),\n                                  datasets: [\n                                    {\n                                      label: 'Dataset 1',\n                                      data: $val.values.map(x => x.number),\n                                      backgroundColor: $val.values.map(x => x.color),\n                                      hoverBackgroundColor: $val.values.map(x => $color(x.color).darken(.2).hex()),\n                                    }\n                                  ]\n                                },\n                                options: {\n                                  plugins: {\n                                    deferred: {\n                                      delay: 400,\n                                      yOffset: 150\n                                    }\n                                  }\n                                }\n                              }",
                                                            "dependencies": [
                                                                "values"
                                                            ]
                                                        }
                                                    },
                                                    {
                                                        "type": "chartjs",
                                                        "config": {
                                                            "$eval": "return { \n                                type: 'bar',\n                                data: {\n                                  labels: $val.values.map((x, idx) => 'Input ' + idx),\n                                  datasets: [\n                                    {\n                                      label: 'Dataset 2',\n                                      type: 'line',\n                                      data: $val.values.reverse().map(x => x.number),\n                                      borderColor: $color('#AFCBFF').alpha(.7).hex(),\n                                      hoverBorderColor: $color('#AFCBFF').alpha(.7).darken(.2).hex(),\n                                      fill: false,\n                                      lineTension: 0\n                                    },\n                                    {\n                                      label: 'Dataset 1',\n                                      data: $val.values.map(x => x.number),\n                                      backgroundColor: $val.values.map(x => x.color),\n                                      hoverBackgroundColor: $val.values.map(x => $color(x.color).darken(.2).hex()),\n                                    }\n                                  ]\n                                },\n                                options: {\n                                  plugins: {\n                                    deferred: {\n                                      delay: 400,\n                                      yOffset: 150\n                                    }\n                                  }\n                                }\n                              }",
                                                            "dependencies": [
                                                                "values"
                                                            ]
                                                        }
                                                    },
                                                    {
                                                        "type": "custom-component"
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        "type": "col",
                                        "xs": 4,
                                        "items": [
                                            {
                                                "key": "values",
                                                "type": "array",
                                                "items": [
                                                    {
                                                        "type": "row",
                                                        "items": [
                                                            {
                                                                "type": "col",
                                                                "xs": 8,
                                                                "items": [
                                                                    {
                                                                        "key": "values[].number"
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "type": "col",
                                                                "xs": 4,
                                                                "items": [
                                                                    {
                                                                        "type": "array-item-remove",
                                                                        "title": "Remove"
                                                                    }
                                                                ]
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "type": "button",
                                                "title": "Add input",
                                                "htmlClass": "mt-2",
                                                "onClick": {
                                                    "arrayItemAdd": {
                                                        "path": "values",
                                                        "value": {
                                                            "$eval": "return {\n                                number: Math.floor(Math.random() * 1000),\n                                color: 'hsl(' + 360 * Math.random() + ',' + (25 + 70 * Math.random()) + '%,' + (65 + 10 * Math.random()) + '%)'\n                              }"
                                                        }
                                                    }
                                                }
                                            },
                                            {
                                                "type": "button",
                                                "title": "Randomize",
                                                "htmlClass": "ml-2 mt-2",
                                                "onClick": {
                                                    "$eval": "$builder.patchJsonValue({ values: $val.values.map(x => ({ ...x, number: Math.floor(Math.random() * 1000) })) })"
                                                }
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
}