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

General
16

hello .. i worked a little bit on the restructuring of the data.
it needs a lot of processing and i dont know how easy it is to do it straight from Mongodb queries.
if you are interested to see the javascript ...

Test Flow:
flows.json (65.0 KB)

Some problem i noticed was that not all objects had data so those had to filtered

Added vue v-if v-else conditional rendering of a warning msg
when no data has been received from Node-red

<body>
      <div id="app">
        <b-container id="app_container" fluid class="ml-5">
          <h1 class="mt-5">Vue-apexcharts in Uibuilder</h1>
          <b-row v-if="chartData.length > 0" >
            <b-card col class="mt-3 m-3" style="width: 40%;" v-for="(chart,index) in chartData" :key="index"
              ><apexchart width="95%" :options="chart.chartOptions" :series="chart.chartSeries"></apexchart
            ></b-card>
          </b-row>
          <b-row v-else class="ml-2 mt-5"><b-alert show variant="warning" class="w-75">No data received from NR yet</b-alert></b-row>
        </b-container>
      </div>
    </body>

index.js

/** 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: [],
  }, // --- End of data --- //
  computed: {}, // --- End of computed --- //
  methods: {}, // --- End of methods --- //

  // Available hooks: init,mounted,updated,destroyed
  mounted: function() {
    uibuilder.start();

    var vueApp = this;

    // Process new messages from Node-RED
    uibuilder.onChange("msg", function(msg) {
      if (msg) {
        console.table(msg.payload[0].chartSeries[0].data);
        console.log(msg.payload);
        vueApp.chartData = msg.payload;
      }
    });
  }, // --- End of mounted hook --- //
}); // --- End of app1 --- //

// EOF

image
image1611×586 35.8 KB