tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Install apexcharts and tests some graphs.

This commit is contained in:
mateuswetah 2021-02-10 15:40:00 -03:00
parent 4bb7aae467
commit cf4f42d5b1
7 changed files with 353 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
package-lock.json generated
View File

@ -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",

4
package.json
View File

@ -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",

18
src/views/reports/components/chart-block.vue Normal file
View File

@ -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>

7
src/views/reports/js/reports-main.js
View File

@ -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;

227
src/views/reports/pages/reports-list.vue
View File

@ -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';
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>

98
src/views/reports/reports.vue
View File

@ -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>

13
src/views/reports/scss/reports-basics.sass Normal file
View File

@ -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"