mirror of
https://github.com/ArenMg/aren.git
synced 2024-09-30 06:45:57 +00:00
configure apex chart
This commit is contained in:
parent
8a95a6114f
commit
8418b86203
4 changed files with 384 additions and 3 deletions
|
@ -18,7 +18,7 @@ const router = new VueRouter({
|
||||||
{path: '/agenda', component: vueLoader('views/agenda')},
|
{path: '/agenda', component: vueLoader('views/agenda')},
|
||||||
{path: '/sondages', component: vueLoader('views/sondages')},
|
{path: '/sondages', component: vueLoader('views/sondages')},
|
||||||
{path: '/sondage', component: vueLoader('views/sondage')},
|
{path: '/sondage', component: vueLoader('views/sondage')},
|
||||||
{path: '/test', component: vueLoader('views/test')},
|
{path: '/votemajoritaire', component: vueLoader('views/votemajoritaire')},
|
||||||
{path: '*', component: vueLoader('views/404')},
|
{path: '*', component: vueLoader('views/404')},
|
||||||
]
|
]
|
||||||
});
|
});
|
263
src/main/webapp/assets/js/vendors/vue-apexcharts.js
vendored
Normal file
263
src/main/webapp/assets/js/vendors/vue-apexcharts.js
vendored
Normal 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;
|
||||||
|
|
||||||
|
})));
|
114
src/main/webapp/assets/js/views/votemajoritaire.vue
Normal file
114
src/main/webapp/assets/js/views/votemajoritaire.vue
Normal 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>
|
|
@ -43,10 +43,11 @@
|
||||||
<script src="assets/js/router.min.js"></script>
|
<script src="assets/js/router.min.js"></script>
|
||||||
<script src="assets/js/vueCfg.min.js"></script>
|
<script src="assets/js/vueCfg.min.js"></script>
|
||||||
|
|
||||||
|
<!-- new dependecies -->
|
||||||
<script src="assets/js/vendors/v-calendar.umd.js"></script>
|
<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/axios.js"></script>
|
||||||
<script src="assets/js/vendors/sweetalert.min.js"></script>
|
<script src="assets/js/vendors/sweetalert.min.js"></script>
|
||||||
|
<script src="assets/js/vendors/vue-apexcharts.js"></script>
|
||||||
|
|
||||||
<% } else { %>
|
<% } else { %>
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/quill.snow.css">
|
<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/vueCfg.js"></script>
|
||||||
|
|
||||||
<script src="assets/js/vendors/v-calendar.umd.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/axios.js"></script>
|
||||||
<script src="assets/js/vendors/sweetalert.min.js"></script>
|
<script src="assets/js/vendors/sweetalert.min.js"></script>
|
||||||
|
<script src="assets/js/vendors/vue-apexcharts.js"></script>
|
||||||
<% }%>
|
<% }%>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
@ -104,6 +105,9 @@
|
||||||
<li v-if="user.is('ADMIN')">
|
<li v-if="user.is('ADMIN')">
|
||||||
<router-link to="/sondages" v-bind:class="{ active: $route.path === '/sondages' || $route.path === '/sondage' }">Sondages</router-link>
|
<router-link to="/sondages" v-bind:class="{ active: $route.path === '/sondages' || $route.path === '/sondage' }">Sondages</router-link>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/votemajoritaire" v-bind:class="{ active: $route.path === '/votemajoritaire' }">Votes majoritaires</router-link>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul class="right">
|
<ul class="right">
|
||||||
|
|
Loading…
Reference in a new issue