configure apex chart

This commit is contained in:
ArenMg 2021-06-25 10:23:45 +03:00
parent 8a95a6114f
commit 8418b86203
4 changed files with 384 additions and 3 deletions

View file

@ -18,7 +18,7 @@ const router = new VueRouter({
{path: '/agenda', component: vueLoader('views/agenda')},
{path: '/sondages', component: vueLoader('views/sondages')},
{path: '/sondage', component: vueLoader('views/sondage')},
{path: '/test', component: vueLoader('views/test')},
{path: '/votemajoritaire', component: vueLoader('views/votemajoritaire')},
{path: '*', component: vueLoader('views/404')},
]
});

View file

@ -0,0 +1,263 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('apexcharts/dist/apexcharts.min')) :
typeof define === 'function' && define.amd ? define(['apexcharts/dist/apexcharts.min'], factory) :
(global.VueApexCharts = factory(global.ApexCharts));
}(this, (function (ApexCharts) { 'use strict';
ApexCharts = ApexCharts && ApexCharts.hasOwnProperty('default') ? ApexCharts['default'] : ApexCharts;
function _typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
var ApexChartsComponent = {
props: {
options: {
type: Object
},
type: {
type: String
},
series: {
type: Array,
required: true,
default: function _default() {
return [];
}
},
width: {
default: "100%"
},
height: {
default: "auto"
}
},
data: function data() {
return {
chart: null
};
},
beforeMount: function beforeMount() {
window.ApexCharts = ApexCharts;
},
mounted: function mounted() {
this.init();
},
created: function created() {
var _this = this;
this.$watch("options", function (options) {
if (!_this.chart && options) {
_this.init();
} else {
_this.chart.updateOptions(_this.options);
}
});
this.$watch("series", function (series) {
if (!_this.chart && series) {
_this.init();
} else {
_this.chart.updateSeries(_this.series);
}
});
var watched = ["type", "width", "height"];
watched.forEach(function (prop) {
_this.$watch(prop, function () {
_this.refresh();
});
});
},
beforeDestroy: function beforeDestroy() {
if (!this.chart) {
return;
}
this.destroy();
},
render: function render(createElement) {
return createElement("div");
},
methods: {
init: function init() {
var _this2 = this;
var newOptions = {
chart: {
type: this.type || this.options.chart.type || "line",
height: this.height,
width: this.width,
events: {}
},
series: this.series
};
Object.keys(this.$listeners).forEach(function (evt) {
newOptions.chart.events[evt] = _this2.$listeners[evt];
});
var config = this.extend(this.options, newOptions);
this.chart = new ApexCharts(this.$el, config);
return this.chart.render();
},
isObject: function isObject(item) {
return item && _typeof(item) === "object" && !Array.isArray(item) && item != null;
},
extend: function extend(target, source) {
var _this3 = this;
if (typeof Object.assign !== "function") {
(function () {
Object.assign = function (target) {
// We must check against these specific cases.
if (target === undefined || target === null) {
throw new TypeError("Cannot convert undefined or null to object");
}
var output = Object(target);
for (var index = 1; index < arguments.length; index++) {
var _source = arguments[index];
if (_source !== undefined && _source !== null) {
for (var nextKey in _source) {
if (_source.hasOwnProperty(nextKey)) {
output[nextKey] = _source[nextKey];
}
}
}
}
return output;
};
})();
}
var output = Object.assign({}, target);
if (this.isObject(target) && this.isObject(source)) {
Object.keys(source).forEach(function (key) {
if (_this3.isObject(source[key])) {
if (!(key in target)) {
Object.assign(output, _defineProperty({}, key, source[key]));
} else {
output[key] = _this3.extend(target[key], source[key]);
}
} else {
Object.assign(output, _defineProperty({}, key, source[key]));
}
});
}
return output;
},
refresh: function refresh() {
this.destroy();
return this.init();
},
destroy: function destroy() {
this.chart.destroy();
},
updateSeries: function updateSeries(newSeries, animate) {
return this.chart.updateSeries(newSeries, animate);
},
updateOptions: function updateOptions(newOptions, redrawPaths, animate, updateSyncedCharts) {
return this.chart.updateOptions(newOptions, redrawPaths, animate, updateSyncedCharts);
},
toggleSeries: function toggleSeries(seriesName) {
return this.chart.toggleSeries(seriesName);
},
showSeries: function showSeries(seriesName) {
this.chart.showSeries(seriesName);
},
hideSeries: function hideSeries(seriesName) {
this.chart.hideSeries(seriesName);
},
appendSeries: function appendSeries(newSeries, animate) {
return this.chart.appendSeries(newSeries, animate);
},
resetSeries: function resetSeries() {
this.chart.resetSeries();
},
zoomX: function zoomX(min, max) {
this.chart.zoomX(min, max);
},
toggleDataPointSelection: function toggleDataPointSelection(seriesIndex, dataPointIndex) {
this.chart.toggleDataPointSelection(seriesIndex, dataPointIndex);
},
appendData: function appendData(newData) {
return this.chart.appendData(newData);
},
addText: function addText(options) {
this.chart.addText(options);
},
addImage: function addImage(options) {
this.chart.addImage(options);
},
addShape: function addShape(options) {
this.chart.addShape(options);
},
dataURI: function dataURI() {
return this.chart.dataURI();
},
setLocale: function setLocale(localeName) {
return this.chart.setLocale(localeName);
},
addXaxisAnnotation: function addXaxisAnnotation(options, pushToMemory) {
this.chart.addXaxisAnnotation(options, pushToMemory);
},
addYaxisAnnotation: function addYaxisAnnotation(options, pushToMemory) {
this.chart.addYaxisAnnotation(options, pushToMemory);
},
addPointAnnotation: function addPointAnnotation(options, pushToMemory) {
this.chart.addPointAnnotation(options, pushToMemory);
},
removeAnnotation: function removeAnnotation(id, options) {
this.chart.removeAnnotation(id, options);
},
clearAnnotations: function clearAnnotations() {
this.chart.clearAnnotations();
}
}
};
var VueApexCharts = ApexChartsComponent;
window.ApexCharts = ApexCharts;
VueApexCharts.install = function (Vue) {
//adding a global method or property
Vue.ApexCharts = ApexCharts;
window.ApexCharts = ApexCharts; // add the instance method
Object.defineProperty(Vue.prototype, '$apexcharts', {
get: function get() {
return ApexCharts;
}
});
};
return VueApexCharts;
})));

View file

@ -0,0 +1,114 @@
<template>
<div class="box-container">
<base-layout id="votelayout">
<template v-slot:title>
<h1>Vote majoritaire</h1>
</template>
<div class="space-top">
<div id="chart">
<apexchart
type="bar"
height="350"
:options="chartOptions"
:series="series"
></apexchart>
</div>
</div>
</base-layout>
</div>
</template>
<style lang="css" scoped>
.box-container {
border: 1px solid #a1a3a1;
border-radius: 10px;
padding-top: 2em;
width: 50%;
margin: 2em auto;
}
.space-top {
margin-top: 4em;
}
.block {
display: block;
}
</style>
<script>
module.exports = {
data() {
return {
series: [
{
name: "Marine Sprite",
data: [44, 55, 41, 37, 22, 43, 21],
},
{
name: "Striking Calf",
data: [53, 32, 33, 52, 13, 43, 32],
},
{
name: "Tank Picture",
data: [12, 17, 11, 9, 15, 11, 20],
},
{
name: "Bucket Slope",
data: [9, 7, 5, 8, 6, 9, 4],
},
{
name: "Reborn Kid",
data: [25, 12, 19, 32, 25, 24, 10],
},
],
chartOptions: {
chart: {
type: "bar",
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ["#fff"],
},
title: {
text: "Fiction Books Sales",
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
formatter: function (val) {
return val + "K";
},
},
},
yaxis: {
title: {
text: undefined,
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K";
},
},
},
fill: {
opacity: 1,
},
legend: {
position: "top",
horizontalAlign: "left",
offsetX: 40,
},
},
};
},
methods: {},
};
</script>

View file

@ -43,10 +43,11 @@
<script src="assets/js/router.min.js"></script>
<script src="assets/js/vueCfg.min.js"></script>
<!-- new dependecies -->
<script src="assets/js/vendors/v-calendar.umd.js"></script>
<!-- For test -->
<script src="assets/js/vendors/axios.js"></script>
<script src="assets/js/vendors/sweetalert.min.js"></script>
<script src="assets/js/vendors/vue-apexcharts.js"></script>
<% } else { %>
<link rel="stylesheet" type="text/css" href="assets/css/quill.snow.css">
@ -66,9 +67,9 @@
<script src="assets/js/vueCfg.js"></script>
<script src="assets/js/vendors/v-calendar.umd.js"></script>
<script src="assets/js/vendors/axios.js"></script>
<script src="assets/js/vendors/sweetalert.min.js"></script>
<script src="assets/js/vendors/vue-apexcharts.js"></script>
<% }%>
</head>
@ -104,6 +105,9 @@
<li v-if="user.is('ADMIN')">
<router-link to="/sondages" v-bind:class="{ active: $route.path === '/sondages' || $route.path === '/sondage' }">Sondages</router-link>
</li>
<li>
<router-link to="/votemajoritaire" v-bind:class="{ active: $route.path === '/votemajoritaire' }">Votes majoritaires</router-link>
</li>
</ul>
<ul class="right">