Feature/FOUR-12253: Add Metric defined in Launchpad Setting - Chart.

package.json

@@ -39,6 +39,7 @@
         "sass-loader": "^12.6.0",
         "vue-loader": "^15.10.0"
     },
+
     "dependencies": {
         "@braintree/sanitize-url": "^6.0.2",
         "@fortawesome/fontawesome-free": "^5.15.1",
@@ -83,6 +84,7 @@
         "tooltip.js": "^1.3.3",
         "v-tooltip": "^2.0.3",
         "vue": "^2.6.14",
+        "vue-chartjs": "^3.5.0",
         "vue-color": "^2.7.1",
         "vue-cookies": "^1.8.2",
         "vue-croppie": "1.3.12",

resources/js/components/shared/ModalSaveVersion.vue

@@ -666,6 +666,7 @@ export default {
             type: "add",
           };
           ProcessMaker.EventBus.$emit("getLaunchpadImagesEvent", params);
+          ProcessMaker.EventBus.$emit("getChartId");
           this.hideModal();
         })
         .catch((error) => {

resources/js/processes-catalogue/components/BaseChart.vue

@@ -0,0 +1,283 @@
+<template>
+  <div>
+    <template v-if="hasData">
+      <div class="base-chart h-100 w-100 custom-settings">
+        <component
+          ref="chart"
+          :is="chartComponent"
+          :saved-search-type="chart.saved_search.type"
+          :data="chartData"
+          :config="chartConfig"
+          :options="chartOptions"
+          :additionalPmql="additionalPmql"
+          :height="height"
+          :width="width"
+          :styles="styles"
+        >
+        </component>
+      </div>
+    </template>
+    <div v-else>
+      <div class="image-container">
+        <img
+          src="/img/launchpad-images/defaultImage.svg"
+          alt="Chart"
+          style="width: 100%; height: 100%; object-fit: cover"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ChartDataMixin from "./mixins/ChartData.js";
+import BarHorizontalChart from "./charts/BarHorizontalChart.vue";
+import BarVerticalChart from "./charts/BarVerticalChart.vue";
+import DoughnutChart from "./charts/DoughnutChart.vue";
+import LineChart from "./charts/LineChart.vue";
+import PieChart from "./charts/PieChart.vue";
+import CountChart from "./charts/CountChart.vue";
+import ListChart from "./charts/ListChart.vue";
+
+export default {
+  mixins: [ChartDataMixin],
+  components: {
+    BarHorizontalChart,
+    BarVerticalChart,
+    DoughnutChart,
+    LineChart,
+    PieChart,
+    CountChart,
+    ListChart,
+  },
+  props: {
+    value: {
+      type: Object,
+    },
+    additionalPmql: {
+      type: String,
+      default: null,
+    },
+    responsive: {
+      type: Boolean,
+      default: true,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    width: {
+      type: Number,
+      default: 260,
+    },
+    process: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      chartData: null,
+      chartConfig: null,
+      chartOptions: null,
+      error: null,
+      hint: null,
+      styles: {
+        position: "relative",
+      },
+      options: {
+        responsive: this.responsive,
+        maintainAspectRatio: false,
+        legend: {
+          display: true,
+        },
+      },
+      hasData: false,
+      chartId: "",
+      chartName: "",
+    };
+  },
+  watch: {
+    value: {
+      handler: function (value) {
+        this.transform(value);
+      },
+      deep: true,
+    },
+    chart: {
+      handler: function (value) {
+        this.$emit("input", value);
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    chartComponent() {
+      if (!this.chart) {
+        return null;
+      }
+
+      switch (this.chart.type) {
+        case "list":
+          return "list-chart";
+        case "count":
+          return "count-chart";
+        case "doughnut":
+          return "doughnut-chart";
+        case "pie":
+          return "pie-chart";
+        case "line":
+          return "line-chart";
+        case "bar-vertical":
+          return "bar-vertical-chart";
+        case "bar":
+        default:
+          return "bar-horizontal-chart";
+      }
+    },
+  },
+  beforeMount() {
+    this.setDefaults();
+  },
+  mounted() {
+    this.getChartSettings();
+    ProcessMaker.EventBus.$on("getChartId", () => {
+      this.getChartSettings();
+    });
+  },
+  methods: {
+    fetchChart(idChart) {
+      ProcessMaker.apiClient
+        .get(`saved-searches/charts/${idChart}`, { timeout: 0 })
+        .then((response) => {
+          this.charts = response.data;
+          this.transform(this.charts);
+        })
+        .catch((error) => {
+          console.error("Error", error);
+        });
+    },
+    getChartSettings() {
+      ProcessMaker.apiClient
+        .get(`processes/${this.process.id}/media`)
+        .then((response) => {
+          const firstResponse = response.data.data.shift();
+          const launchpadProperties = JSON.parse(
+            firstResponse?.launchpad_properties
+          );
+
+          if (
+            launchpadProperties &&
+            Object.keys(launchpadProperties).length > 0
+          ) {
+            this.selectedSavedChart = launchpadProperties.saved_chart_title
+              ? launchpadProperties.saved_chart_title
+              : "";
+            this.selectedSavedChartId = launchpadProperties.saved_chart_id;
+          } else {
+            this.selectedSavedChart = "";
+            this.selectedSavedChartId = 0;
+          }
+          this.fetchChart(this.selectedSavedChartId);
+        })
+        .catch((error) => {
+          console.error("Error getting chart id", error);
+        });
+    },
+    refresh() {
+      this.transform(this.chart);
+    },
+    setDefaults() {
+      Chart.defaults.global.defaultFontFamily = "'Open Sans'";
+      Chart.defaults.global.defaultFontSize = 12;
+      Chart.defaults.global.defaultFontStyle = "bold";
+      Chart.defaults.global.layout.padding = 1;
+
+      Chart.scaleService.updateScaleDefaults("linear", {
+        ticks: {
+          min: 0,
+        },
+      });
+    },
+    setupChartOptions() {
+      let options = this.options;
+      if (this.chart.config.display) {
+        if (this.chart.config.display.legend) {
+          options.legend.display = true;
+          options.legend.position = this.chart.config.display.legend;
+        } else {
+          options.legend.display = false;
+        }
+
+        if (["bar", "bar-vertical", "line"].includes(this.chart.type)) {
+          options.scales = {
+            xAxes: [
+              {
+                stacked: this.chart.config.display.stacked,
+              },
+            ],
+            yAxes: [
+              {
+                stacked: this.chart.config.display.stacked,
+              },
+            ],
+          };
+        } else {
+          options.scales = {
+            xAxes: [
+              {
+                display: false,
+              },
+            ],
+            yAxes: [
+              {
+                display: false,
+              },
+            ],
+          };
+        }
+      }
+
+      return options;
+    },
+    transform(data) {
+      this.chart = data;
+      if (this.chart.chart_data && this.chart.config) {
+        this.chartData = this.transformChartData(this.chart);
+        this.chartConfig = this.chart.config;
+        this.chartOptions = this.setupChartOptions();
+        this.hasData = true;
+        this.error = null;
+        this.hint = null;
+      } else {
+        this.hasData = false;
+        if (this.chart.chart_error) {
+          this.error = this.chart.chart_error;
+          this.hint = this.chart.chart_hint;
+        }
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.image-container {
+  width: 100%;
+  padding-top: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.image-container img {
+  position: absolute;
+  width: 90%;
+  height: 90%;
+  top: 0%;
+  left: 0%;
+  object-fit: cover;
+}
+
+.custom-settings {
+  margin-top: 10px;
+}
+</style>

resources/js/processes-catalogue/components/ProcessOptions.vue

@@ -6,7 +6,7 @@
       <img src="../../../img/wizard-icon.svg" :alt="$t('Guided Template Icon')" />
       {{ $t('Re-run Wizard') }}
     </b-button>
-    <chart-save-search />
+    <chart-save-search :process="process"/>
 
     <wizard-helper-process-modal
       v-if="createdFromWizardTemplate"

resources/js/processes-catalogue/components/charts/BarHorizontalChart.vue

@@ -0,0 +1,82 @@
+<script>
+import { HorizontalBar } from 'vue-chartjs'
+
+export default {
+  extends: HorizontalBar,
+  props: ['data', 'options', 'preview'],
+  computed: {
+    chartData: function() {
+      return this.data;
+    },
+    previewData: function() {
+      return {
+        datasets: [{
+          data: [
+            5, 10, 15
+          ]
+        }],
+        labels: [
+          1,
+          2,
+          3
+        ]
+      };
+    },
+    previewOptions: function() {
+      return {
+        layout: {
+          padding: {
+            top: 1,
+            right: 2,
+            bottom: 1,
+            left: 2,
+          },
+        },
+        legend: {
+          display: false,
+        },
+        maintainAspectRatio: true,
+        responsive: true,
+        tooltips: {
+          enabled: false
+        },
+        scales: {
+          xAxes: [{
+            display: false,
+            ticks: {
+              max: 15,
+            }
+          }],
+          yAxes: [{
+            display: false,
+          }],
+        }
+      }
+    }
+  },
+  mounted () {
+    this.render();
+  },
+  methods: {
+    render() {
+      if (! this.preview) {
+        this.renderChart(this.chartData, this.options);
+      } else {
+        this.renderChart(this.previewData, this.previewOptions);
+      }
+      this.$emit('render');
+    },
+    describe() {
+      return this.$t('Horizontal Bar Graph');
+    }
+  },
+  watch: {
+    data: function() {
+      this.render();
+    }
+  }
+}
+</script>
+
+<style>
+</style>