Dynamically create charts / front end elements with Ui-Builder based on size of array?

General
12

Dunno .. i was trying to get an example working with the apexcharts

index.html

<body>
      <div id="app">
        <b-container id="app_container">
          <b-row v-for="(chart,index) in chartData">
            <b-card col class="w-75 mt-3"><apexchart width="95%" :options="chart.chartOptions" :series="chart.chartSeries"></apexchart></b-card>
          </b-row>
        </b-container>
      </div>
    </body>

index.js

/* jshint browser: true, esversion: 5, asi: true */
/*globals Vue, uibuilder */
// @ts-nocheck
/*
  Copyright (c) 2021 Julian Knight (Totally Information)

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/
"use strict";

/** @see https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-library */

/** Reference the apexchart component (removes need for a build step) */
Vue.component("apexchart", VueApexCharts);

var app1 = new Vue({
  el: "#app",
  data: {
    // Data for apex charts
    chartData: [
      // chart1 data
      {
        chartOptions: {
          chart: {
            id: "vuechart-example1",
          },
          xaxis: {
            type: "datetime",
          },
        },
        chartSeries: [
          {
            name: "series-1",
            data: [
              [1324508400000, 34],
              [1324594800000, 54],
              [1326236400000, 43],
            ],
          },
        ],
      },

      // chart2 data
      {
        chartOptions: {
          chart: {
            id: "vuechart-example2",
          },
          xaxis: {
            type: "datetime",
          },
        },
        chartSeries: [
          {
            name: "series-1",
            data: [
              [1224508400000, 24],
              [1224594800000, 31],
              [1226236400000, 53],
            ],
          },
        ],
      },
    ],
  }, // --- End of data --- //
  computed: {}, // --- End of computed --- //
  methods: {}, // --- End of methods --- //

  // Available hooks: init,mounted,updated,destroyed
  mounted: function() {
    /** **REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3
     * Pass the namespace and ioPath variables if hosting page is not in the instance root folder
     * e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.
     * e.g. uibuilder.start('/nr/uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names
     */
    uibuilder.start();

    var vueApp = this;

    // Process new messages from Node-RED
    uibuilder.onChange("msg", function(msg) {
      if (msg) {
       console.log(msg)
      }
    });
  }, // --- End of mounted hook --- //
}); // --- End of app1 --- //

// EOF

now we need to find a way to restucture your real data to the same format as the above example