mirror of
https://github.com/ArenMg/aren.git
synced 2024-11-22 08:30:51 +00:00
configure apex chart
This commit is contained in:
ArenMg
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: '/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')},
|
||||
]
|
||||
});
|
||||
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/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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue