From cf4f42d5b1f973066ee183a42f1ea36c9890beb0 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 10 Feb 2021 15:40:00 -0300
Subject: [PATCH] Install apexcharts and tests some graphs.

---
 package-lock.json                            |  82 +++++++
 package.json                                 |   4 +-
 src/views/reports/components/chart-block.vue |  18 ++
 src/views/reports/js/reports-main.js         |   7 +
 src/views/reports/pages/reports-list.vue     | 231 ++++++++++++++++++-
 src/views/reports/reports.vue                |  98 +-------
 src/views/reports/scss/reports-basics.sass   |  13 ++
 7 files changed, 353 insertions(+), 100 deletions(-)
 create mode 100644 src/views/reports/components/chart-block.vue
 create mode 100644 src/views/reports/scss/reports-basics.sass

diff --git a/package-lock.json b/package-lock.json
index 75b370569..6efb55564 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1665,6 +1665,19 @@
         }
       }
     },
+    "apexcharts": {
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.24.0.tgz",
+      "integrity": "sha512-iT6czJCIVrmAtrcO90MZTQCvC+xi6R6Acf0jNH/d40FVTtCfcqECuKIh5iAMyOTtgUb7+fQ8rbadH2bm1kbL9Q==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -9983,6 +9996,70 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "swiper": {
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
@@ -10699,6 +10776,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-apexcharts": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.0.tgz",
+      "integrity": "sha512-sT6tuVTLBwfH3TA7azecDNS/W70bmz14ZJI7aE7QIqcG9I6OywyH7x3hcOeY1v1DxttI8Svc5RuYj4Dd+A5F4g=="
+    },
     "vue-awesome-swiper": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
diff --git a/package.json b/package.json
index 0227f7253..c77aa34c9 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,9 @@
     "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
   },
   "dependencies": {
-    "blurhash": "^1.1.3",
+    "apexcharts": "^3.24.0",
     "axios": "^0.21.1",
+    "blurhash": "^1.1.3",
     "buefy": "^0.9.4",
     "bulma": "^0.9.1",
     "css-vars-ponyfill": "^2.3.1",
@@ -23,6 +24,7 @@
     "t": "^0.5.1",
     "v-tooltip": "^2.0.3",
     "vue": "^2.6.11",
+    "vue-apexcharts": "^1.6.0",
     "vue-awesome-swiper": "^4.1.1",
     "vue-blurhash": "^0.1.4",
     "vue-masonry-css": "^1.0.3",
diff --git a/src/views/reports/components/chart-block.vue b/src/views/reports/components/chart-block.vue
new file mode 100644
index 000000000..7f8121996
--- /dev/null
+++ b/src/views/reports/components/chart-block.vue
@@ -0,0 +1,18 @@
+<template>
+    <article class="tile is-child">
+        <apexchart
+                height="350" 
+                :options="chartOptions" 
+                :series="chartSeries" />
+    </article>
+</template>
+
+<script>
+export default {
+    props: {
+        chartTitle: String,
+        chartOptions: Object,
+        chartSeries: Array
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/reports/js/reports-main.js b/src/views/reports/js/reports-main.js
index bc6f626b9..857994c9e 100644
--- a/src/views/reports/js/reports-main.js
+++ b/src/views/reports/js/reports-main.js
@@ -3,6 +3,7 @@ import store from '../../admin/js/store/store';
 import router from './reports-router';
 import VTooltip from 'v-tooltip';
 import { Snackbar, Modal } from 'buefy';
+import VueApexCharts from 'vue-apexcharts';
 
 // Vue Dev Tools!
 Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
@@ -10,12 +11,18 @@ Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'develo
 import { I18NPlugin } from './wp-i18n-plugin';
 
 import ReportsPage from '../reports.vue';
+import ChartBlock from '../components/chart-block.vue';
+
+Vue.use(VueApexCharts)
 
 Vue.use(I18NPlugin);
 Vue.use(VTooltip);
 Vue.use(Snackbar);
 Vue.use(Modal);
 
+Vue.component('chart-block', ChartBlock);
+Vue.component('apexchart', VueApexCharts);
+
 // Changing title of pages
 router.beforeEach((to, from, next) => {
     document.title = to.meta.title;
diff --git a/src/views/reports/pages/reports-list.vue b/src/views/reports/pages/reports-list.vue
index 9e6518bce..346744db7 100644
--- a/src/views/reports/pages/reports-list.vue
+++ b/src/views/reports/pages/reports-list.vue
@@ -1,17 +1,238 @@
 <template>
     <div>
         <h1 class="wp-heading-inline">{{ $route.meta.title }}</h1>
+        <div class="tile is-ancestor is-vertical">
+            <div class="tile">
+                <div class="tile is-parent">
+                    <chart-block 
+                            :chart-series="chartSeries1"
+                            :chart-options="chartOptions1" />
+                    <chart-block 
+                            :chart-series="chartSeries2"
+                            :chart-options="chartOptions2" />
+                </div>
+                <div class="tile is-parent">
+                    <chart-block 
+                            :chart-series="chartSeries3"
+                            :chart-options="chartOptions3" />
+                </div>
+            </div>
+            <div class="tile is-parent">
+                <chart-block 
+                        :chart-series="chartSeries4"
+                        :chart-options="chartOptions4" />
+            </div>
+        </div>
     </div>
 </template>
 
-<script>
-    //import { mapActions, mapGetters } from 'vuex';
-     
+<script>    
     export default { 
         name: "ReportsList",
         data() {
-            return {}
-        },
+            return {
+                chartSeries1: [44, 55, 13, 43, 22],
+                chartOptions1: {
+                    chart: {
+                        width: 380,
+                        type: 'pie',
+                    },
+                    labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
+
+                    title: {
+                        text: 'Pie chart'
+                    },
+                    responsive: [{
+                        breakpoint: 480,
+                        options: {
+                            chart: {
+                                width: 200
+                            },
+                            legend: {
+                                position: 'bottom'
+                            }
+                        }
+                    }]
+                },
+                chartSeries2: [
+                    {
+                        name: 'Marine Sprite',
+                        data: [44, 55, 41, 37, 22]
+                    }, {
+                        name: 'Striking Calf',
+                        data: [53, 32, 33, 52, 13]
+                    }, {
+                        name: 'Tank Picture',
+                        data: [12, 17, 11, 9, 15]
+                    }, {
+                        name: 'Bucket Slope',
+                        data: [9, 7, 5, 8, 6]
+                    }
+                ],
+                chartOptions2: {
+                    chart: {
+                        type: 'bar',
+                        height: 350,
+                        stacked: true,
+                        stackType: '100%'
+                    },
+                    plotOptions: {
+                        bar: {
+                            horizontal: true,
+                        },
+                    },
+                    stroke: {
+                        width: 1,
+                        colors: ['#fff']
+                    },
+                    title: {
+                        text: '100% Stacked Bar'
+                    },
+                    xaxis: {
+                        categories: [2008, 2009, 2010, 2011, 2012],
+                    },
+                    tooltip: {
+                        y: {
+                            formatter: function (val) {
+                            return val + "K"
+                            }
+                        }
+                    },
+                    fill: {
+                        opacity: 1
+                    },
+                    legend: {
+                        position: 'top',
+                        horizontalAlign: 'left',
+                        offsetX: 40
+                    }
+                },
+                chartSeries3: [
+                    {
+                        data: [
+                            {
+                                x: 'New Delhi',
+                                y: 218
+                            },
+                            {
+                                x: 'Kolkata',
+                                y: 149
+                            },
+                            {
+                                x: 'Mumbai',
+                                y: 184
+                            },
+                            {
+                                x: 'Ahmedabad',
+                                y: 55
+                            },
+                            {
+                                x: 'Bangaluru',
+                                y: 84
+                            },
+                            {
+                                x: 'Pune',
+                                y: 31
+                            },
+                            {
+                                x: 'Chennai',
+                                y: 70
+                            },
+                            {
+                                x: 'Jaipur',
+                                y: 30
+                            },
+                            {
+                                x: 'Surat',
+                                y: 44
+                            },
+                            {
+                                x: 'Hyderabad',
+                                y: 68
+                            },
+                            {
+                                x: 'Lucknow',
+                                y: 28
+                            },
+                            {
+                                x: 'Indore',
+                                y: 19
+                            },
+                            {
+                                x: 'Kanpur',
+                                y: 29
+                            }
+                        ]
+                    }
+                ],
+                chartOptions3: {
+                    legend: {
+                        show: false
+                    },
+                    chart: {
+                        height: 350,
+                        type: 'treemap'
+                    },
+                    title: {
+                        text: 'Basic Treemap'
+                    }
+                },
+                chartSeries4: [
+                    {
+                        name: 'Net Profit',
+                        data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
+                    }, {
+                        name: 'Revenue',
+                        data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
+                    }, {
+                        name: 'Free Cash Flow',
+                        data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
+                    }
+                ],
+                chartOptions4: {
+                    chart: {
+                        type: 'bar',
+                        height: 350
+                    },
+                    plotOptions: {
+                        bar: {
+                            horizontal: false,
+                            columnWidth: '55%',
+                            endingShape: 'rounded'
+                        },
+                    },
+                    dataLabels: {
+                        enabled: false
+                    },
+                    stroke: {
+                        show: true,
+                        width: 2,
+                        colors: ['transparent']
+                    },
+                    xaxis: {
+                        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+                    },
+                    yaxis: {
+                        title: {
+                            text: '$ (thousands)'
+                        }
+                    },
+                    title: {
+                        text: 'Vertical columns'
+                    },
+                    fill: {
+                        opacity: 1
+                    },
+                    tooltip: {
+                        y: {
+                            formatter: function (val) {
+                                return "$ " + val + " thousands"
+                            }
+                        }
+                    }
+                },
+            }
+        }
     }
 </script>
 
diff --git a/src/views/reports/reports.vue b/src/views/reports/reports.vue
index 3ea847b47..f2039babb 100644
--- a/src/views/reports/reports.vue
+++ b/src/views/reports/reports.vue
@@ -13,106 +13,16 @@
 </script>
 
 <style lang="scss">
+
+    // Bulma imports
+    @import "./scss/reports-basics.sass";
+
     .tainacan_page_tainacan_reports #wpbody {
         overflow-x: hidden;
     }
     #tainacan-reports-app {
-        margin-top: 42px;
         a:hover {
             cursor: pointer;
         }
     }
-    .tainacan-reports-tooltip {
-        display: block !important;
-        z-index: 10000;
-        max-width: 300px;
-
-        .tooltip-inner {
-            background: black;
-            padding: 0.35em 0.45em;
-            color: white;
-            text-align: center;
-        }
-
-        .tooltip-arrow {
-            width: 0;
-            height: 0;
-            border-style: solid;
-            position: absolute;
-            margin: 5px;
-            border-color: black;
-            z-index: 1;
-        }
-        &[x-placement^="top"] {
-            margin-bottom: 5px;
-
-            .tooltip-arrow {
-            border-width: 5px 5px 0 5px;
-            border-left-color: transparent !important;
-            border-right-color: transparent !important;
-            border-bottom-color: transparent !important;
-            bottom: -5px;
-            left: calc(50% - 5px);
-            margin-top: 0;
-            margin-bottom: 0;
-            }
-        }
-
-        &[x-placement^="bottom"] {
-            margin-top: 5px;
-
-            .tooltip-arrow {
-            border-width: 0 5px 5px 5px;
-            border-left-color: transparent !important;
-            border-right-color: transparent !important;
-            border-top-color: transparent !important;
-            top: -5px;
-            left: calc(50% - 5px);
-            margin-top: 0;
-            margin-bottom: 0;
-            }
-        }
-
-        &[x-placement^="right"] {
-            margin-left: 5px;
-
-            .tooltip-arrow {
-            border-width: 5px 5px 5px 0;
-            border-left-color: transparent !important;
-            border-top-color: transparent !important;
-            border-bottom-color: transparent !important;
-            left: -5px;
-            top: calc(50% - 5px);
-            margin-left: 0;
-            margin-right: 0;
-            }
-        }
-
-        &[x-placement^="left"] {
-            margin-right: 5px;
-
-            .tooltip-arrow {
-            border-width: 5px 0 5px 5px;
-            border-top-color: transparent !important;
-            border-right-color: transparent !important;
-            border-bottom-color: transparent !important;
-            right: -5px;
-            top: calc(50% - 5px);
-            margin-left: 0;
-            margin-right: 0;
-            }
-        }
-
-        &[aria-hidden='true'] {
-            visibility: hidden;
-            opacity: 0;
-            transition: opacity .15s, visibility .15s;
-        }
-
-        &[aria-hidden='false'] {
-            visibility: visible;
-            opacity: 1;
-            transition: opacity .15s;
-        }
-    }
 </style>
\ No newline at end of file
diff --git a/src/views/reports/scss/reports-basics.sass b/src/views/reports/scss/reports-basics.sass
new file mode 100644
index 000000000..475489744
--- /dev/null
+++ b/src/views/reports/scss/reports-basics.sass
@@ -0,0 +1,13 @@
+@import "../../../../node_modules/bulma/sass/utilities/_all.sass"
+@import "../../../../node_modules/bulma/sass/helpers/_all.sass"
+@import "../../../../node_modules/bulma/sass/form/_all.sass"
+@import "../../../../node_modules/bulma/sass/grid/_all.sass"
+@import "../../../../node_modules/bulma/sass/components/pagination.sass"
+@import "../../../../node_modules/bulma/sass/components/card.sass"
+@import "../../../../node_modules/bulma/sass/elements/icon.sass"
+@import "../../../../node_modules/bulma/sass/elements/tag.sass"
+@import "../../../../node_modules/bulma/sass/elements/notification.sass"
+@import "../../../../node_modules/bulma/sass/components/tabs.sass"
+@import "../../../../node_modules/bulma/sass/elements/button.sass"
+@import "../../../../node_modules/bulma/sass/components/dropdown.sass"
+@import "../../../../node_modules/bulma/sass/components/modal.sass"
\ No newline at end of file