fix: ApexCharts components default and Home graph data

weni-ai · Apr 18, 2024 · c8fcc58 · c8fcc58
1 parent ad831a6
commit c8fcc58
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 67 deletions.
diff --git a/src/components/ColumnCharts.vue b/src/components/ColumnCharts.vue
@@ -1,66 +1,60 @@
 <template>
-  <!-- Use "Apexchart" (with PascalCase) brake the component -->
-  <!-- eslint-disable-next-line -->
+  <section class="column-charts">
+    <header class="column-charts__header">
+      <h1 class="header__title">{{ title }}</h1>
+      <a
+        class="header__see-more"
+        v-if="seeMore"
+        href="#"
+        >Ver mais</a
+      >
+    </header>
+    <!-- Use "Apexchart" (with PascalCase) brake the component -->
+    <!-- eslint-disable-next-line -->
   <apexchart
-    width="500"
-    type="bar"
-    :options="options"
-    :series="series"
-  />
+      width="100%"
+      height="100%"
+      type="bar"
+      :options="options"
+      :series="series"
+    />
+  </section>
 </template>
 
 <script>
 export default {
   name: 'ColumnChart',
   props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    seeMore: Boolean,
     chartData: {
       type: Object,
       required: true,
     },
   },
   data: () => ({
     options: {
-      colors: ['var(--unnnic-color-neutral-clean)'],
       chart: {
         id: 'column-chart',
-        toolbar: {
-          show: false,
-        },
-        fontFamily: '$unnnic-font-family-secondary',
-      },
-      grid: {
-        show: false,
-        xaxis: {
-          lines: {
-            show: false,
-          },
-        },
-        yaxis: {
-          lines: {
-            show: false,
-          },
+        plotPadding: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
         },
       },
       xaxis: {
         categories: [],
-        axisBorder: {
-          show: false,
+        labels: {
+          offsetY: -5,
         },
-        axisTicks: {
-          show: false,
-        },
-      },
-      yaxis: {
-        show: false,
-      },
-      dataLabels: {
-        enabled: false,
-        enabledOnSeries: false,
       },
     },
     series: [
       {
-        name: 'Atendimentos',
         data: [],
       },
     ],
@@ -76,3 +70,38 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.column-charts {
+  position: relative;
+  margin: $unnnic-spacing-xs 0 $unnnic-spacing-md;
+
+  &__header {
+    position: absolute;
+    top: $unnnic-spacing-sm;
+    z-index: 1000;
+
+    width: 100%;
+
+    display: flex;
+    justify-content: space-between;
+
+    .header__title {
+      font-family: $unnnic-font-family-primary;
+      font-weight: $unnnic-font-weight-bold;
+    }
+
+    .header__see-more {
+      font-family: Lato;
+      font-weight: $unnnic-font-weight-bold;
+      text-decoration-line: underline;
+    }
+
+    .header__title,
+    .header__see-more {
+      font-size: $unnnic-font-size-body-gt;
+      color: $unnnic-color-neutral-dark;
+    }
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -3,8 +3,7 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 
-import VueApexCharts from 'vue3-apexcharts';
-
+import ApexCharts from './utils/plugins/ApexCharts';
 import Unnnic from './utils/plugins/UnnnicSystem';
 import '@weni/unnnic-system/dist/style.css';
 
@@ -15,6 +14,6 @@ const app = createApp(App);
 app.use(router);
 app.use(store);
 app.use(Unnnic);
-app.use(VueApexCharts);
+app.use(ApexCharts);
 
 app.mount('#app');
diff --git a/src/mocks/chartData.json b/src/mocks/chartData.json
@@ -1,17 +1,32 @@
-{
-  "categories": [
-    "7:00",
-    "8:00",
-    "9:00",
-    "10:00",
-    "11:00",
-    "12:00",
-    "13:00",
-    "14:00",
-    "14:00",
-    "14:00",
-    "14:00",
-    "14:00"
-  ],
-  "data": [30, 40, 45, 50, 49, 60, 70, 91, 10, 32, 55, 60]
-}
+{
+  "categories": [
+    "00:00",
+    "01:00",
+    "02:00",
+    "03:00",
+    "04:00",
+    "05:00",
+    "06:00",
+    "07:00",
+    "08:00",
+    "09:00",
+    "10:00",
+    "10:00",
+    "11:00",
+    "12:00",
+    "13:00",
+    "14:00",
+    "15:00",
+    "16:00",
+    "17:00",
+    "18:00",
+    "18:00",
+    "19:00",
+    "20:00",
+    "21:00",
+    "22:00",
+    "23:00",
+    "24:00"
+  ],
+  "data": [100, 60, 80, 70, 85, 75, 80, 83, 90, 85, 80, 83, 85, 35, 38, 60, 65, 75, 60, 65, 62, 60, 60, 65, 60, 50, 40]
+}
diff --git a/src/utils/plugins/ApexCharts.js b/src/utils/plugins/ApexCharts.js
@@ -0,0 +1,80 @@
+import VueApexCharts from 'vue3-apexcharts';
+
+/* Global ApexChart settings */
+window.Apex = {
+  colors: ['#00A49F'],
+  chart: {
+    offsetY: 0,
+    parentHeightOffset: 0,
+    redrawOnParentResize: true,
+    FontFamily: 'Lato, sans-serif',
+    toolbar: {
+      show: false,
+    },
+  },
+  grid: {
+    show: false,
+    xaxis: {
+      lines: {
+        show: false,
+      },
+    },
+    yaxis: {
+      lines: {
+        show: false,
+      },
+    },
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  },
+  xaxis: {
+    axisBorder: {
+      show: false,
+    },
+    axisTicks: {
+      show: false,
+    },
+    labels: {
+      style: {
+        fontFamily: 'Lato, sans-serif',
+        fontSize: '8px',
+      },
+    },
+  },
+  yaxis: {
+    show: false,
+    labels: {
+      style: {
+        fontFamily: 'Lato, sans-serif',
+      },
+    },
+  },
+  dataLabels: {
+    enabled: false,
+    enabledOnSeries: false,
+    style: {
+      fontFamily: 'Lato, sans-serif',
+    },
+  },
+  plotOptions: {
+    bar: {
+      borderRadius: 4,
+      columnWidth: '90%',
+      colors: {
+        backgroundBarOpacity: 1,
+      },
+    },
+  },
+  fill: {
+    opacity: 1,
+  },
+  tooltip: {
+    enabled: false,
+  },
+};
+
+export default VueApexCharts;
diff --git a/src/views/insights/Home/index.vue b/src/views/insights/Home/index.vue
@@ -16,14 +16,14 @@
         />
       </section>
     </header>
-    <section>
-      <ColumnCharts
-        v-if="contentHeight === 0"
-        :chartData="chartData"
-        :height="chartHeight"
-        :width="chartWidth"
-      />
-    </section>
+
+    <ColumnCharts
+      v-if="contentHeight === 0"
+      title="Mensagens trocadas via bot"
+      seeMore
+      :chartData="chartData"
+    />
+
     <section class="home__cards">
       <InsightsCard
         v-for="{ title, subtitle, click } of cards"
@@ -58,8 +58,6 @@ export default {
       end: moment().format('YYYY-MM-DD'),
     },
     chartData: chartData,
-    chartHeight: '100%',
-    chartWidth: '100%',
     cards: [],
   }),