From 8418b86203d2db3239de0dd2d89951391ea81f69 Mon Sep 17 00:00:00 2001 From: ArenMg Date: Fri, 25 Jun 2021 10:23:45 +0300 Subject: [PATCH] configure apex chart --- src/main/webapp/assets/js/router.js | 2 +- .../assets/js/vendors/vue-apexcharts.js | 263 ++++++++++++++++++ .../assets/js/views/votemajoritaire.vue | 114 ++++++++ src/main/webapp/index.jsp | 8 +- 4 files changed, 384 insertions(+), 3 deletions(-) create mode 100644 src/main/webapp/assets/js/vendors/vue-apexcharts.js create mode 100644 src/main/webapp/assets/js/views/votemajoritaire.vue diff --git a/src/main/webapp/assets/js/router.js b/src/main/webapp/assets/js/router.js index 0419957..a817d0c 100644 --- a/src/main/webapp/assets/js/router.js +++ b/src/main/webapp/assets/js/router.js @@ -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')}, ] }); \ No newline at end of file diff --git a/src/main/webapp/assets/js/vendors/vue-apexcharts.js b/src/main/webapp/assets/js/vendors/vue-apexcharts.js new file mode 100644 index 0000000..b7749d4 --- /dev/null +++ b/src/main/webapp/assets/js/vendors/vue-apexcharts.js @@ -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; + +}))); diff --git a/src/main/webapp/assets/js/views/votemajoritaire.vue b/src/main/webapp/assets/js/views/votemajoritaire.vue new file mode 100644 index 0000000..0a23eac --- /dev/null +++ b/src/main/webapp/assets/js/views/votemajoritaire.vue @@ -0,0 +1,114 @@ + + + + + diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp index 548e01b..131c0a3 100644 --- a/src/main/webapp/index.jsp +++ b/src/main/webapp/index.jsp @@ -43,10 +43,11 @@ + - + <% } else { %> @@ -66,9 +67,9 @@ - + <% }%> @@ -104,6 +105,9 @@
  • Sondages
    • +
  • + Votes majoritaires +