Merge pull request #24 from weni-ai/feature/flow-trigger-page

[ENGAGE-644] -  Add new page flow trigger

src/components/BarChart.vue

@@ -0,0 +1,105 @@
+<!-- eslint-disable vue/component-name-in-template-casing -->
+<template>
+  <apexchart
+    type="bar"
+    :options="options"
+    :series="series"
+  />
+</template>
+
+<script>
+export default {
+  name: 'BarChart',
+  props: {
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    options: {
+      colors: ['var(--unnnic-color-neutral-clean)'],
+      chart: {
+        id: 'bar-chart',
+        toolbar: {
+          show: false,
+        },
+        fontFamily: '$unnnic-font-family-secondary',
+        fontWeight: '$unnnic-font-weight-regular;',
+      },
+      stroke: {
+        colors: ['transparent'],
+        width: 0,
+      },
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontSize: '$unnnic-font-size-body-md',
+          fontWeight: '$unnnic-font-weight-regular;',
+        },
+        formatter: function (val) {
+          return val + ' runs';
+        },
+      },
+      plotOptions: {
+        bar: {
+          horizontal: true,
+          barHeight: '80%',
+        },
+      },
+      grid: {
+        show: false,
+        xaxis: {
+          lines: {
+            show: false,
+          },
+        },
+        yaxis: {
+          lines: {
+            show: false,
+          },
+        },
+      },
+      xaxis: {
+        categories: [],
+        axisBorder: {
+          show: false,
+        },
+        axisTicks: {
+          show: false,
+        },
+        labels: {
+          show: false,
+        },
+      },
+      yaxis: {
+        labels: {
+          show: true,
+          align: 'left',
+          minWidth: 0,
+          maxWidth: 160,
+          style: {
+            fontSize: '$unnnic-font-size-body-md',
+            fontWeight: '$unnnic-font-weight-regular;',
+          },
+        },
+      },
+    },
+    series: [
+      {
+        name: 'Runs',
+        data: [],
+      },
+    ],
+  }),
+  created() {
+    this.importData();
+  },
+  methods: {
+    importData() {
+      this.options.xaxis.categories = this.chartData.categories;
+      this.series[0].data = this.chartData.data;
+    },
+  },
+};
+</script>

src/mocks/barChartData.json

@@ -0,0 +1,15 @@
+{
+    "categories": [
+      "Fluxo principal",
+      "Pós compra",
+      "Recuperar carrinho",
+      "Busca de produtos",
+      "Fechamento de pedidos",
+      "Disparo fornecedores",
+      "[Zero shot] Classificação",
+      "Ofertas",
+      "Carrinho abandonado",
+      "Pesquisa satisfação"
+    ],
+    "data": ["759", "623", "589", "511", "416", "387", "234", "215", "189", "146"]
+}

src/mocks/dashboards.json

@@ -1,5 +1,4 @@
 [
   { "id": 1, "title": "Atendimento humano" },
-  { "id": 2, "title": "Chatbot" },
-  { "id": 3, "title": "Disparo de fluxos" }
+  { "id": 2, "title": "Chatbot" }
 ]

src/router/index.js

@@ -3,6 +3,7 @@ import store from '@/store';
 import Home from '@/views/insights/Home/index.vue';
 import Dashboards from '@/views/dashboards/Home/index.vue';
 import Dashboard from '@/views/dashboards/Dashboard/index.vue';
+import FlowTrigger from '@/views/dashboards/Dashboard/FlowTrigger.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -33,6 +34,11 @@ const router = createRouter({
         cardId: route.params.cardId,
       }),
     },
+    {
+      path: '/dashboards/flow-trigger',
+      name: 'flow',
+      component: FlowTrigger,
+    },
   ],
 });