From 5468d64e64a08e8660df79cb80fb03776137ca82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=92=E9=85=92=E7=9A=84=E6=9D=8E=E7=99=BD?=
<670939375@qq.com>
Date: Wed, 3 Jul 2024 12:34:03 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=9C=B0=E5=9B=BE=E9=85=8D=E7=BD=AE?=
=?UTF-8?q?=E3=80=91=E5=88=9D=E5=A7=8B=E5=8C=96=E4=B8=89=E4=B8=AA=E4=B8=8D?=
=?UTF-8?q?=E5=90=8C=E7=9A=84=E4=BA=A4=E4=BA=92=E5=BC=8F=E4=B8=96=E7=95=8C?=
=?UTF-8?q?=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
static/js/chart-custom.js | 6149 ++++++++++++++++++++++++++++++++
static/js/countdown.js | 46 +
static/js/customizer.js | 51 +
static/js/flex-tree.min.js | 2 +
static/js/table-treeview.js | 528 +++
static/js/vector-map-custom.js | 488 +++
6 files changed, 7264 insertions(+)
create mode 100644 static/js/chart-custom.js
create mode 100644 static/js/countdown.js
create mode 100644 static/js/customizer.js
create mode 100644 static/js/flex-tree.min.js
create mode 100644 static/js/table-treeview.js
create mode 100644 static/js/vector-map-custom.js
diff --git a/static/js/chart-custom.js b/static/js/chart-custom.js
new file mode 100644
index 0000000..9912661
--- /dev/null
+++ b/static/js/chart-custom.js
@@ -0,0 +1,6149 @@
+(function(jQuery) {
+
+ "use strict";
+
+// for apexchart
+function apexChartUpdate(chart, detail) {
+ let color = getComputedStyle(document.documentElement).getPropertyValue('--dark');
+ if (detail.dark) {
+ color = getComputedStyle(document.documentElement).getPropertyValue('--white');
+ }
+ chart.updateOptions({
+ chart: {
+ foreColor: color
+ }
+ })
+ }
+
+// for am chart
+function amChartUpdate(chart, detail) {
+ // let color = getComputedStyle(document.documentElement).getPropertyValue('--dark');
+ if (detail.dark) {
+ // color = getComputedStyle(document.documentElement).getPropertyValue('--white');
+ chart.stroke = am4core.color(getComputedStyle(document.documentElement).getPropertyValue('--white'));
+ }
+ chart.validateData();
+}
+
+/*---------------------------------------------------------------------
+ Apex Charts
+-----------------------------------------------------------------------*/
+if (jQuery("#apex-basic").length) {
+ options = {
+ chart: {
+ height: 350,
+ type: "line",
+ zoom: {
+ enabled: !1
+ }
+ },
+ colors: ["#4788ff"],
+ series: [{
+ name: "Desktops",
+ data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
+ }],
+ dataLabels: {
+ enabled: !1
+ },
+ stroke: {
+ curve: "straight"
+ },
+ title: {
+ text: "Product Trends by Month",
+ align: "left"
+ },
+ grid: {
+ row: {
+ colors: ["#f3f3f3", "transparent"],
+ opacity: .5
+ }
+ },
+ xaxis: {
+ categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
+ }
+ };
+ if(typeof ApexCharts !== typeof undefined){
+ (chart = new ApexCharts(document.querySelector("#apex-basic"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+ }
+}
+if (jQuery("#apex-line-area").length) {
+ options = {
+ chart: {
+ height: 350,
+ type: "area"
+ },
+ dataLabels: {
+ enabled: !1
+ },
+ stroke: {
+ curve: "smooth"
+ },
+ colors: ["#4788ff", "#ff4b4b"],
+ series: [{
+ name: "series1",
+ data: [31, 40, 28, 51, 42, 109, 100]
+ }, {
+ name: "series2",
+ data: [11, 32, 45, 32, 34, 52, 41]
+ }],
+ xaxis: {
+ type: "datetime",
+ categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"]
+ },
+ tooltip: {
+ x: {
+ format: "dd/MM/yy HH:mm"
+ }
+ }
+ };
+ (chart = new ApexCharts(document.querySelector("#apex-line-area"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#apex-bar").length) {
+ options = {
+ chart: {
+ height: 350,
+ type: "bar"
+ },
+ plotOptions: {
+ bar: {
+ horizontal: !0
+ }
+ },
+ dataLabels: {
+ enabled: !1
+ },
+ colors: ["#4788ff"],
+ series: [{
+ data: [470, 540, 580, 690, 1100, 1200, 1380]
+ }],
+ xaxis: {
+ categories: ["Netherlands", "Italy", "France", "Japan", "United States", "China", "Germany"]
+ }
+ };
+ (chart = new ApexCharts(document.querySelector("#apex-bar"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#apex-column").length) {
+ options = {
+ chart: {
+ height: 350,
+ type: "bar"
+ },
+ plotOptions: {
+ bar: {
+ horizontal: !1,
+ columnWidth: "55%",
+ endingShape: "rounded"
+ }
+ },
+ dataLabels: {
+ enabled: !1
+ },
+ stroke: {
+ show: !0,
+ width: 2,
+ colors: ["transparent"]
+ },
+ colors: ["#4788ff", "#37e6b0", "#ff4b4b"],
+ series: [{
+ name: "Net Profit",
+ data: [44, 55, 57, 56, 61, 58]
+ }, {
+ name: "Revenue",
+ data: [76, 85, 101, 98, 87, 105]
+ }, {
+ name: "Free Cash Flow",
+ data: [35, 41, 36, 26, 45, 48]
+ }],
+ xaxis: {
+ categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul"]
+ },
+ yaxis: {
+ title: {
+ text: "$ (thousands)"
+ }
+ },
+ fill: {
+ opacity: 1
+ },
+ tooltip: {
+ y: {
+ formatter: function(e) {
+ return "$ " + e + " thousands"
+ }
+ }
+ }
+ };
+ (chart = new ApexCharts(document.querySelector("#apex-column"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#apex-mixed-chart").length) {
+ options = {
+ chart: {
+ height: 350,
+ type: "line",
+ stacked: !1
+ },
+ stroke: {
+ width: [0, 2, 5],
+ curve: "smooth"
+ },
+ plotOptions: {
+ bar: {
+ columnWidth: "50%"
+ }
+ },
+ colors: ["#ff4b4b", "#37e6b0", "#4788ff"],
+ series: [{
+ name: "Facebook",
+ type: "column",
+ data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
+ }, {
+ name: "Vine",
+ type: "area",
+ data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
+ }, {
+ name: "Dribbble",
+ type: "line",
+ data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
+ }],
+ fill: {
+ opacity: [.85, .25, 1],
+ gradient: {
+ inverseColors: !1,
+ shade: "light",
+ type: "vertical",
+ opacityFrom: .85,
+ opacityTo: .55,
+ stops: [0, 100, 100, 100]
+ }
+ },
+ labels: ["01/01/2003", "02/01/2003", "03/01/2003", "04/01/2003", "05/01/2003", "06/01/2003", "07/01/2003", "08/01/2003", "09/01/2003", "10/01/2003", "11/01/2003"],
+ markers: {
+ size: 0
+ },
+ xaxis: {
+ type: "datetime"
+ },
+ yaxis: {
+ min: 0
+ },
+ tooltip: {
+ shared: !0,
+ intersect: !1,
+ y: {
+ formatter: function(e) {
+ return void 0 !== e ? e.toFixed(0) + " views" : e
+ }
+ }
+ },
+ legend: {
+ labels: {
+ useSeriesColors: !0
+ },
+ markers: {
+ customHTML: [function() {
+ return ""
+ }, function() {
+ return ""
+ }, function() {
+ return ""
+ }]
+ }
+ }
+ };
+ (chart = new ApexCharts(document.querySelector("#apex-mixed-chart"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#apex-candlestick-chart").length) {
+ options = {
+ chart: {
+ height: 350,
+ type: "candlestick"
+ },
+ colors: ["#4788ff", "#37e6b0", "#37e6b0"],
+ series: [{
+ data: [{
+ x: new Date(15387786e5),
+ y: [6629.81, 6650.5, 6623.04, 6633.33]
+ }, {
+ x: new Date(15387804e5),
+ y: [6632.01, 6643.59, 6620, 6630.11]
+ }, {
+ x: new Date(15387822e5),
+ y: [6630.71, 6648.95, 6623.34, 6635.65]
+ }, {
+ x: new Date(1538784e6),
+ y: [6635.65, 6651, 6629.67, 6638.24]
+ }, {
+ x: new Date(15387858e5),
+ y: [6638.24, 6640, 6620, 6624.47]
+ }, {
+ x: new Date(15387876e5),
+ y: [6624.53, 6636.03, 6621.68, 6624.31]
+ }, {
+ x: new Date(15387894e5),
+ y: [6624.61, 6632.2, 6617, 6626.02]
+ }, {
+ x: new Date(15387912e5),
+ y: [6627, 6627.62, 6584.22, 6603.02]
+ }, {
+ x: new Date(1538793e6),
+ y: [6605, 6608.03, 6598.95, 6604.01]
+ }, {
+ x: new Date(15387948e5),
+ y: [6604.5, 6614.4, 6602.26, 6608.02]
+ }, {
+ x: new Date(15387966e5),
+ y: [6608.02, 6610.68, 6601.99, 6608.91]
+ }, {
+ x: new Date(15387984e5),
+ y: [6608.91, 6618.99, 6608.01, 6612]
+ }, {
+ x: new Date(15388002e5),
+ y: [6612, 6615.13, 6605.09, 6612]
+ }, {
+ x: new Date(1538802e6),
+ y: [6612, 6624.12, 6608.43, 6622.95]
+ }, {
+ x: new Date(15388038e5),
+ y: [6623.91, 6623.91, 6615, 6615.67]
+ }, {
+ x: new Date(15388056e5),
+ y: [6618.69, 6618.74, 6610, 6610.4]
+ }, {
+ x: new Date(15388074e5),
+ y: [6611, 6622.78, 6610.4, 6614.9]
+ }, {
+ x: new Date(15388092e5),
+ y: [6614.9, 6626.2, 6613.33, 6623.45]
+ }, {
+ x: new Date(1538811e6),
+ y: [6623.48, 6627, 6618.38, 6620.35]
+ }, {
+ x: new Date(15388128e5),
+ y: [6619.43, 6620.35, 6610.05, 6615.53]
+ }, {
+ x: new Date(15388146e5),
+ y: [6615.53, 6617.93, 6610, 6615.19]
+ }, {
+ x: new Date(15388164e5),
+ y: [6615.19, 6621.6, 6608.2, 6620]
+ }, {
+ x: new Date(15388182e5),
+ y: [6619.54, 6625.17, 6614.15, 6620]
+ }, {
+ x: new Date(153882e7),
+ y: [6620.33, 6634.15, 6617.24, 6624.61]
+ }, {
+ x: new Date(15388218e5),
+ y: [6625.95, 6626, 6611.66, 6617.58]
+ }, {
+ x: new Date(15388236e5),
+ y: [6619, 6625.97, 6595.27, 6598.86]
+ }, {
+ x: new Date(15388254e5),
+ y: [6598.86, 6598.88, 6570, 6587.16]
+ }, {
+ x: new Date(15388272e5),
+ y: [6588.86, 6600, 6580, 6593.4]
+ }, {
+ x: new Date(1538829e6),
+ y: [6593.99, 6598.89, 6585, 6587.81]
+ }, {
+ x: new Date(15388308e5),
+ y: [6587.81, 6592.73, 6567.14, 6578]
+ }, {
+ x: new Date(15388326e5),
+ y: [6578.35, 6581.72, 6567.39, 6579]
+ }, {
+ x: new Date(15388344e5),
+ y: [6579.38, 6580.92, 6566.77, 6575.96]
+ }, {
+ x: new Date(15388362e5),
+ y: [6575.96, 6589, 6571.77, 6588.92]
+ }, {
+ x: new Date(1538838e6),
+ y: [6588.92, 6594, 6577.55, 6589.22]
+ }, {
+ x: new Date(15388398e5),
+ y: [6589.3, 6598.89, 6589.1, 6596.08]
+ }, {
+ x: new Date(15388416e5),
+ y: [6597.5, 6600, 6588.39, 6596.25]
+ }, {
+ x: new Date(15388434e5),
+ y: [6598.03, 6600, 6588.73, 6595.97]
+ }, {
+ x: new Date(15388452e5),
+ y: [6595.97, 6602.01, 6588.17, 6602]
+ }, {
+ x: new Date(1538847e6),
+ y: [6602, 6607, 6596.51, 6599.95]
+ }, {
+ x: new Date(15388488e5),
+ y: [6600.63, 6601.21, 6590.39, 6591.02]
+ }, {
+ x: new Date(15388506e5),
+ y: [6591.02, 6603.08, 6591, 6591]
+ }, {
+ x: new Date(15388524e5),
+ y: [6591, 6601.32, 6585, 6592]
+ }, {
+ x: new Date(15388542e5),
+ y: [6593.13, 6596.01, 6590, 6593.34]
+ }, {
+ x: new Date(1538856e6),
+ y: [6593.34, 6604.76, 6582.63, 6593.86]
+ }, {
+ x: new Date(15388578e5),
+ y: [6593.86, 6604.28, 6586.57, 6600.01]
+ }, {
+ x: new Date(15388596e5),
+ y: [6601.81, 6603.21, 6592.78, 6596.25]
+ }, {
+ x: new Date(15388614e5),
+ y: [6596.25, 6604.2, 6590, 6602.99]
+ }, {
+ x: new Date(15388632e5),
+ y: [6602.99, 6606, 6584.99, 6587.81]
+ }, {
+ x: new Date(1538865e6),
+ y: [6587.81, 6595, 6583.27, 6591.96]
+ }, {
+ x: new Date(15388668e5),
+ y: [6591.97, 6596.07, 6585, 6588.39]
+ }, {
+ x: new Date(15388686e5),
+ y: [6587.6, 6598.21, 6587.6, 6594.27]
+ }, {
+ x: new Date(15388704e5),
+ y: [6596.44, 6601, 6590, 6596.55]
+ }, {
+ x: new Date(15388722e5),
+ y: [6598.91, 6605, 6596.61, 6600.02]
+ }, {
+ x: new Date(1538874e6),
+ y: [6600.55, 6605, 6589.14, 6593.01]
+ }, {
+ x: new Date(15388758e5),
+ y: [6593.15, 6605, 6592, 6603.06]
+ }]
+ }],
+ title: {
+ text: "CandleStick Chart",
+ align: "left"
+ },
+ xaxis: {
+ type: "datetime"
+ },
+ yaxis: {
+ tooltip: {
+ enabled: !0
+ }
+ }
+ };
+ (chart = new ApexCharts(document.querySelector("#apex-candlestick-chart"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#apex-bubble-chart").length) {
+ function generateData(e, t, a) {
+ for (var n = 0, o = []; n < t;) {
+ var r = Math.floor(Math.random() * (a.max - a.min + 1)) + a.min,
+ i = Math.floor(61 * Math.random()) + 15;
+ o.push([e, r, i]), e += 864e5, n++
+ }
+ return o
+ }
+ options = {
+ chart: {
+ height: 350,
+ type: "bubble"
+ },
+ dataLabels: {
+ enabled: !1
+ },
+ series: [{
+ name: "Product1",
+ data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
+ min: 10,
+ max: 40
+ })
+ }, {
+ name: "Product2",
+ data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
+ min: 10,
+ max: 40
+ })
+ }, {
+ name: "Product3",
+ data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
+ min: 10,
+ max: 40
+ })
+ }],
+ fill: {
+ type: "gradient"
+ },
+ colors: ["#4788ff", "#37e6b0", "#37e6b0"],
+ title: {
+ text: "3D Bubble Chart"
+ },
+ xaxis: {
+ tickAmount: 12,
+ type: "datetime",
+ labels: {
+ rotate: 0
+ }
+ },
+ yaxis: {
+ max: 40
+ },
+ theme: {
+ palette: "palette2"
+ }
+ };
+ (chart = new ApexCharts(document.querySelector("#apex-bubble-chart"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#apex-scatter-chart").length) {
+ options = {
+ chart: {
+ height: 350,
+ type: "scatter",
+ zoom: {
+ enabled: !0,
+ type: "xy"
+ }
+ },
+ colors: ["#4788ff", "#ff4b4b", "#37e6b0"],
+ series: [{
+ name: "SAMPLE A",
+ data: [
+ [16.4, 5.4],
+ [21.7, 2],
+ [10.9, 0],
+ [10.9, 8.2],
+ [16.4, 0],
+ [16.4, 1.8],
+ [13.6, .3],
+ [13.6, 0],
+ [29.9, 0],
+ [27.1, 2.3],
+ [16.4, 0],
+ [13.6, 3.7],
+ [10.9, 5.2],
+ [16.4, 6.5],
+ [10.9, 0],
+ [24.5, 7.1],
+ [10.9, 0],
+ [8.1, 4.7]
+ ]
+ }, {
+ name: "SAMPLE B",
+ data: [
+ [36.4, 13.4],
+ [1.7, 11],
+ [1.9, 9],
+ [1.9, 13.2],
+ [1.4, 7],
+ [6.4, 8.8],
+ [3.6, 4.3],
+ [1.6, 10],
+ [9.9, 2],
+ [7.1, 15],
+ [1.4, 0],
+ [3.6, 13.7],
+ [1.9, 15.2],
+ [6.4, 16.5],
+ [.9, 10],
+ [4.5, 17.1],
+ [10.9, 10],
+ [.1, 14.7]
+ ]
+ }, {
+ name: "SAMPLE C",
+ data: [
+ [21.7, 3],
+ [23.6, 3.5],
+ [28, 4],
+ [27.1, .3],
+ [16.4, 4],
+ [13.6, 0],
+ [19, 5],
+ [22.4, 3],
+ [24.5, 3],
+ [32.6, 3],
+ [27.1, 4],
+ [29.6, 6],
+ [31.6, 8],
+ [21.6, 5],
+ [20.9, 4],
+ [22.4, 0],
+ [32.6, 10.3],
+ [29.7, 20.8]
+ ]
+ }],
+ xaxis: {
+ tickAmount: 5,
+ labels: {
+ formatter: function(e) {
+ return parseFloat(e).toFixed(1)
+ }
+ }
+ },
+ yaxis: {
+ tickAmount: 5
+ }
+ };
+ (chart = new ApexCharts(document.querySelector("#apex-scatter-chart"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#apex-radialbar-chart").length) {
+ options = {
+ chart: {
+ height: 350,
+ type: "radialBar"
+ },
+ plotOptions: {
+ radialBar: {
+ dataLabels: {
+ name: {
+ fontSize: "22px"
+ },
+ value: {
+ fontSize: "16px"
+ },
+ total: {
+ show: !0,
+ label: "Total",
+ formatter: function(e) {
+ return 249
+ }
+ }
+ }
+ }
+ },
+ series: [44, 55, 67, 83],
+ labels: ["Apples", "Oranges", "Bananas", "Berries"],
+ colors: ["#4788ff", "#ff4b4b", "#876cfe", "#37e6b0"]
+ };
+ (chart = new ApexCharts(document.querySelector("#apex-radialbar-chart"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#apex-pie-chart").length) {
+ options = {
+ chart: {
+ width: 380,
+ type: "pie"
+ },
+ labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
+ series: [44, 55, 13, 43, 22],
+ colors: ["#4788ff", "#ff4b4b", "#876cfe", "#37e6b0", "#c8c8c8"],
+ responsive: [{
+ breakpoint: 480,
+ options: {
+ chart: {
+ width: 200
+ },
+ legend: {
+ position: "bottom"
+ }
+ }
+ }]
+ };
+ (chart = new ApexCharts(document.querySelector("#apex-pie-chart"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#advanced-chart").length) {
+ var options = {
+ series: [
+ {
+ name: 'Bob',
+ data: [
+ {
+ x: 'Design',
+ y: [
+ new Date('2019-03-05').getTime(),
+ new Date('2019-03-08').getTime()
+ ]
+ },
+ {
+ x: 'Code',
+ y: [
+ new Date('2019-03-02').getTime(),
+ new Date('2019-03-05').getTime()
+ ]
+ },
+ {
+ x: 'Code',
+ y: [
+ new Date('2019-03-05').getTime(),
+ new Date('2019-03-07').getTime()
+ ]
+ },
+ {
+ x: 'Test',
+ y: [
+ new Date('2019-03-03').getTime(),
+ new Date('2019-03-09').getTime()
+ ]
+ },
+ {
+ x: 'Test',
+ y: [
+ new Date('2019-03-08').getTime(),
+ new Date('2019-03-11').getTime()
+ ]
+ },
+ {
+ x: 'Validation',
+ y: [
+ new Date('2019-03-11').getTime(),
+ new Date('2019-03-16').getTime()
+ ]
+ },
+ {
+ x: 'Design',
+ y: [
+ new Date('2019-03-01').getTime(),
+ new Date('2019-03-03').getTime()
+ ]
+ }
+ ]
+ },
+ {
+ name: 'Joe',
+ data: [
+ {
+ x: 'Design',
+ y: [
+ new Date('2019-03-02').getTime(),
+ new Date('2019-03-05').getTime()
+ ]
+ },
+ {
+ x: 'Test',
+ y: [
+ new Date('2019-03-06').getTime(),
+ new Date('2019-03-16').getTime()
+ ]
+ },
+ {
+ x: 'Code',
+ y: [
+ new Date('2019-03-03').getTime(),
+ new Date('2019-03-07').getTime()
+ ]
+ },
+ {
+ x: 'Deployment',
+ y: [
+ new Date('2019-03-20').getTime(),
+ new Date('2019-03-22').getTime()
+ ]
+ },
+ {
+ x: 'Design',
+ y: [
+ new Date('2019-03-10').getTime(),
+ new Date('2019-03-16').getTime()
+ ]
+ }
+ ]
+ },
+ {
+ name: 'Dan',
+ data: [
+ {
+ x: 'Code',
+ y: [
+ new Date('2019-03-10').getTime(),
+ new Date('2019-03-17').getTime()
+ ]
+ },
+ {
+ x: 'Validation',
+ y: [
+ new Date('2019-03-05').getTime(),
+ new Date('2019-03-09').getTime()
+ ]
+ },
+ ]
+ }
+ ],
+ colors: ["#4788ff", "#ff4b4b", "#37e6b0"],
+ chart: {
+ height: 450,
+ type: 'rangeBar'
+ },
+ plotOptions: {
+ bar: {
+ horizontal: true,
+ barHeight: '80%'
+ }
+ },
+ xaxis: {
+ type: 'datetime'
+ },
+ stroke: {
+ width: 1
+ },
+ fill: {
+ type: 'solid',
+ opacity: 0.6
+ },
+ legend: {
+ position: 'top',
+ horizontalAlign: 'left'
+ }
+ };
+
+ (chart = new ApexCharts(document.querySelector("#advanced-chart"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#radar-multiple-chart").length) {
+ var options = {
+ series: [{
+ name: 'Series 1',
+ data: [80, 50, 30, 40, 100, 20],
+ }, {
+ name: 'Series 2',
+ data: [20, 30, 40, 80, 20, 80],
+ }, {
+ name: 'Series 3',
+ data: [44, 76, 78, 13, 43, 10],
+ }],
+ colors: ["#4788ff", "#ff4b4b", "#37e6b0"],
+ chart: {
+ height: 350,
+ type: 'radar',
+ dropShadow: {
+ enabled: true,
+ blur: 1,
+ left: 1,
+ top: 1
+ }
+ },
+ title: {
+ text: 'Radar Chart - Multi Series'
+ },
+ stroke: {
+ width: 2
+ },
+ fill: {
+ opacity: 0.1
+ },
+ markers: {
+ size: 0
+ },
+ xaxis: {
+ categories: ['2011', '2012', '2013', '2014', '2015', '2016']
+ }
+ };
+
+ (chart = new ApexCharts(document.querySelector("#radar-multiple-chart"), options)).render()
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+
+
+
+/*---------------------------------------------------------------------
+ Am Charts
+-----------------------------------------------------------------------*/
+
+ if(jQuery('#am-simple-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ // Create chart instance
+ var chart = am4core.create("am-simple-chart", am4charts.XYChart);
+ chart.colors.list = [am4core.color("#4788ff"),];
+
+ // Add data
+ chart.data = [{
+ "country": "USA",
+ "visits": 2025
+ }, {
+ "country": "China",
+ "visits": 1882
+ }, {
+ "country": "Japan",
+ "visits": 1809
+ }, {
+ "country": "Germany",
+ "visits": 1322
+ }, {
+ "country": "UK",
+ "visits": 1122
+ }, {
+ "country": "France",
+ "visits": 1114
+ }];
+
+ // Create axes
+
+ var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+ categoryAxis.dataFields.category = "country";
+ categoryAxis.renderer.grid.template.location = 0;
+ categoryAxis.renderer.minGridDistance = 30;
+
+ categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
+ if (target.dataItem && target.dataItem.index & 2 == 2) {
+ return dy + 25;
+ }
+ return dy;
+ });
+
+ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+
+ // Create series
+ var series = chart.series.push(new am4charts.ColumnSeries());
+ series.dataFields.valueY = "visits";
+ series.dataFields.categoryX = "country";
+ series.name = "Visits";
+ series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
+ series.columns.template.fillOpacity = .8;
+
+ var columnTemplate = series.columns.template;
+ columnTemplate.strokeWidth = 2;
+ columnTemplate.strokeOpacity = 1;
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ }); // end am4core.ready()
+ }
+
+ if(jQuery('#am-columnlinr-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ // Create chart instance
+ var chart = am4core.create("am-columnlinr-chart", am4charts.XYChart);
+ chart.colors.list = [am4core.color("#4788ff"),];
+
+ // Export
+ chart.exporting.menu = new am4core.ExportMenu();
+
+ // Data for both series
+ var data = [ {
+ "year": "2009",
+ "income": 23.5,
+ "expenses": 21.1
+ }, {
+ "year": "2010",
+ "income": 26.2,
+ "expenses": 30.5
+ }, {
+ "year": "2011",
+ "income": 30.1,
+ "expenses": 34.9
+ }, {
+ "year": "2012",
+ "income": 29.5,
+ "expenses": 31.1
+ }, {
+ "year": "2013",
+ "income": 30.6,
+ "expenses": 28.2,
+ "lineDash": "5,5",
+ }, {
+ "year": "2014",
+ "income": 34.1,
+ "expenses": 32.9,
+ "strokeWidth": 1,
+ "columnDash": "5,5",
+ "fillOpacity": 0.2,
+ "additional": "(projection)"
+ } ];
+
+ /* Create axes */
+ var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+ categoryAxis.dataFields.category = "year";
+ categoryAxis.renderer.minGridDistance = 30;
+
+ /* Create value axis */
+ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+
+ /* Create series */
+ var columnSeries = chart.series.push(new am4charts.ColumnSeries());
+ columnSeries.name = "Income";
+ columnSeries.dataFields.valueY = "income";
+ columnSeries.dataFields.categoryX = "year";
+
+ columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} in {categoryX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
+ columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
+ columnSeries.columns.template.propertyFields.stroke = "stroke";
+ columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
+ columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
+ columnSeries.tooltip.label.textAlign = "middle";
+
+ var lineSeries = chart.series.push(new am4charts.LineSeries());
+ lineSeries.name = "Expenses";
+ lineSeries.dataFields.valueY = "expenses";
+ lineSeries.dataFields.categoryX = "year";
+
+ lineSeries.stroke = am4core.color("#4788ff");
+ lineSeries.strokeWidth = 3;
+ lineSeries.propertyFields.strokeDasharray = "lineDash";
+ lineSeries.tooltip.label.textAlign = "middle";
+
+ var bullet = lineSeries.bullets.push(new am4charts.Bullet());
+ bullet.fill = am4core.color("#fdd400"); // tooltips grab fill from parent by default
+ bullet.tooltipText = "[#fff font-size: 15px]{name} in {categoryX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
+ var circle = bullet.createChild(am4core.Circle);
+ circle.radius = 4;
+ circle.fill = am4core.color("#fff");
+ circle.strokeWidth = 3;
+
+ chart.data = data;
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ });
+ }
+
+ if(jQuery('#am-stackedcolumn-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ // Create chart instance
+ var chart = am4core.create("am-stackedcolumn-chart", am4charts.XYChart);
+ chart.colors.list = [am4core.color("#ff4b4b"),
+ am4core.color("#37e6b0"),
+ am4core.color("#fe721c")];
+
+
+ // Add data
+ chart.data = [{
+ "year": "2016",
+ "europe": 2.5,
+ "namerica": 2.5,
+ "asia": 2.1,
+ "lamerica": 0.3,
+ "meast": 0.2
+ }, {
+ "year": "2017",
+ "europe": 2.6,
+ "namerica": 2.7,
+ "asia": 2.2,
+ "lamerica": 0.3,
+ "meast": 0.3
+ }, {
+ "year": "2018",
+ "europe": 2.8,
+ "namerica": 2.9,
+ "asia": 2.4,
+ "lamerica": 0.3,
+ "meast": 0.3
+ }];
+
+ // Create axes
+ var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+ categoryAxis.dataFields.category = "year";
+ categoryAxis.renderer.grid.template.location = 0;
+
+
+ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+ valueAxis.renderer.inside = true;
+ valueAxis.renderer.labels.template.disabled = true;
+ valueAxis.min = 0;
+
+ // Create series
+ function createSeries(field, name) {
+
+ // Set up series
+ var series = chart.series.push(new am4charts.ColumnSeries());
+ series.name = name;
+ series.dataFields.valueY = field;
+ series.dataFields.categoryX = "year";
+ series.sequencedInterpolation = true;
+
+ // Make it stacked
+ series.stacked = true;
+
+ // Configure columns
+ series.columns.template.width = am4core.percent(60);
+ series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}";
+
+ // Add label
+ var labelBullet = series.bullets.push(new am4charts.LabelBullet());
+ labelBullet.label.text = "{valueY}";
+ labelBullet.locationY = 0.5;
+
+ return series;
+ }
+
+ createSeries("europe", "Europe");
+ createSeries("namerica", "North America");
+ createSeries("asia", "Asia-Pacific");
+
+ // Legend
+ chart.legend = new am4charts.Legend();
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ }); // end am4core.ready()
+ }
+
+ if(jQuery('#am-barline-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ var chart = am4core.create("am-barline-chart", am4charts.XYChart);
+ chart.colors.list = [am4core.color("#4788ff"),
+ am4core.color("#37e6b0")];
+
+ chart.data = [{
+ "year": "2005",
+ "income": 23.5,
+ "expenses": 18.1
+ }, {
+ "year": "2006",
+ "income": 26.2,
+ "expenses": 22.8
+ }, {
+ "year": "2007",
+ "income": 30.1,
+ "expenses": 23.9
+ }, {
+ "year": "2008",
+ "income": 29.5,
+ "expenses": 25.1
+ }, {
+ "year": "2009",
+ "income": 24.6,
+ "expenses": 25
+ }];
+
+ //create category axis for years
+ var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
+ categoryAxis.dataFields.category = "year";
+ categoryAxis.renderer.inversed = true;
+ categoryAxis.renderer.grid.template.location = 0;
+
+ //create value axis for income and expenses
+ var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
+ valueAxis.renderer.opposite = true;
+
+
+ //create columns
+ var series = chart.series.push(new am4charts.ColumnSeries());
+ series.dataFields.categoryY = "year";
+ series.dataFields.valueX = "income";
+ series.name = "Income";
+ series.columns.template.fillOpacity = 0.5;
+ series.columns.template.strokeOpacity = 0;
+ series.tooltipText = "Income in {categoryY}: {valueX.value}";
+
+ //create line
+ var lineSeries = chart.series.push(new am4charts.LineSeries());
+ lineSeries.dataFields.categoryY = "year";
+ lineSeries.dataFields.valueX = "expenses";
+ lineSeries.name = "Expenses";
+ lineSeries.strokeWidth = 3;
+ lineSeries.tooltipText = "Expenses in {categoryY}: {valueX.value}";
+
+ //add bullets
+ var circleBullet = lineSeries.bullets.push(new am4charts.CircleBullet());
+ circleBullet.circle.fill = am4core.color("#fff");
+ circleBullet.circle.strokeWidth = 2;
+
+ //add chart cursor
+ chart.cursor = new am4charts.XYCursor();
+ chart.cursor.behavior = "zoomY";
+
+ //add legend
+ chart.legend = new am4charts.Legend();
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ }); // end am4core.ready()
+ }
+
+ if(jQuery('#am-datedata-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ // Create chart instance
+ var chart = am4core.create("am-datedata-chart", am4charts.XYChart);
+ chart.colors.list = [am4core.color("#57aeff")];
+
+ // Add data
+ chart.data = [{
+ "date": "2012-07-27",
+ "value": 13
+ }, {
+ "date": "2012-07-28",
+ "value": 11
+ }, {
+ "date": "2012-07-29",
+ "value": 15
+ }, {
+ "date": "2012-07-30",
+ "value": 16
+ }, {
+ "date": "2012-07-31",
+ "value": 18
+ }, {
+ "date": "2012-08-01",
+ "value": 13
+ }, {
+ "date": "2012-08-02",
+ "value": 22
+ }, {
+ "date": "2012-08-03",
+ "value": 23
+ }, {
+ "date": "2012-08-04",
+ "value": 20
+ }, {
+ "date": "2012-08-05",
+ "value": 17
+ }, {
+ "date": "2012-08-06",
+ "value": 16
+ }, {
+ "date": "2012-08-07",
+ "value": 18
+ }, {
+ "date": "2012-08-08",
+ "value": 21
+ }, {
+ "date": "2012-08-09",
+ "value": 26
+ }, {
+ "date": "2012-08-10",
+ "value": 24
+ }, {
+ "date": "2012-08-11",
+ "value": 29
+ }, {
+ "date": "2012-08-12",
+ "value": 32
+ }, {
+ "date": "2012-08-13",
+ "value": 18
+ }, {
+ "date": "2012-08-14",
+ "value": 24
+ }, {
+ "date": "2012-08-15",
+ "value": 22
+ }, {
+ "date": "2012-08-16",
+ "value": 18
+ }, {
+ "date": "2012-08-17",
+ "value": 19
+ }, {
+ "date": "2012-08-18",
+ "value": 14
+ }, {
+ "date": "2012-08-19",
+ "value": 15
+ }, {
+ "date": "2012-08-20",
+ "value": 12
+ }, {
+ "date": "2012-08-21",
+ "value": 8
+ }, {
+ "date": "2012-08-22",
+ "value": 9
+ }, {
+ "date": "2012-08-23",
+ "value": 8
+ }, {
+ "date": "2012-08-24",
+ "value": 7
+ }, {
+ "date": "2012-08-25",
+ "value": 5
+ }, {
+ "date": "2012-08-26",
+ "value": 11
+ }, {
+ "date": "2012-08-27",
+ "value": 13
+ }, {
+ "date": "2012-08-28",
+ "value": 18
+ }, {
+ "date": "2012-08-29",
+ "value": 20
+ }, {
+ "date": "2012-08-30",
+ "value": 29
+ }, {
+ "date": "2012-08-31",
+ "value": 33
+ }, {
+ "date": "2012-09-01",
+ "value": 42
+ }, {
+ "date": "2012-09-02",
+ "value": 35
+ }, {
+ "date": "2012-09-03",
+ "value": 31
+ }, {
+ "date": "2012-09-04",
+ "value": 47
+ }, {
+ "date": "2012-09-05",
+ "value": 52
+ }, {
+ "date": "2012-09-06",
+ "value": 46
+ }, {
+ "date": "2012-09-07",
+ "value": 41
+ }, {
+ "date": "2012-09-08",
+ "value": 43
+ }, {
+ "date": "2012-09-09",
+ "value": 40
+ }, {
+ "date": "2012-09-10",
+ "value": 39
+ }, {
+ "date": "2012-09-11",
+ "value": 34
+ }, {
+ "date": "2012-09-12",
+ "value": 29
+ }, {
+ "date": "2012-09-13",
+ "value": 34
+ }, {
+ "date": "2012-09-14",
+ "value": 37
+ }, {
+ "date": "2012-09-15",
+ "value": 42
+ }, {
+ "date": "2012-09-16",
+ "value": 49
+ }, {
+ "date": "2012-09-17",
+ "value": 46
+ }, {
+ "date": "2012-09-18",
+ "value": 47
+ }, {
+ "date": "2012-09-19",
+ "value": 55
+ }, {
+ "date": "2012-09-20",
+ "value": 59
+ }, {
+ "date": "2012-09-21",
+ "value": 58
+ }, {
+ "date": "2012-09-22",
+ "value": 57
+ }, {
+ "date": "2012-09-23",
+ "value": 61
+ }, {
+ "date": "2012-09-24",
+ "value": 59
+ }, {
+ "date": "2012-09-25",
+ "value": 67
+ }, {
+ "date": "2012-09-26",
+ "value": 65
+ }, {
+ "date": "2012-09-27",
+ "value": 61
+ }, {
+ "date": "2012-09-28",
+ "value": 66
+ }, {
+ "date": "2012-09-29",
+ "value": 69
+ }, {
+ "date": "2012-09-30",
+ "value": 71
+ }, {
+ "date": "2012-10-01",
+ "value": 67
+ }, {
+ "date": "2012-10-02",
+ "value": 63
+ }, {
+ "date": "2012-10-03",
+ "value": 46
+ }, {
+ "date": "2012-10-04",
+ "value": 32
+ }, {
+ "date": "2012-10-05",
+ "value": 21
+ }, {
+ "date": "2012-10-06",
+ "value": 18
+ }, {
+ "date": "2012-10-07",
+ "value": 21
+ }, {
+ "date": "2012-10-08",
+ "value": 28
+ }, {
+ "date": "2012-10-09",
+ "value": 27
+ }, {
+ "date": "2012-10-10",
+ "value": 36
+ }, {
+ "date": "2012-10-11",
+ "value": 33
+ }, {
+ "date": "2012-10-12",
+ "value": 31
+ }, {
+ "date": "2012-10-13",
+ "value": 30
+ }, {
+ "date": "2012-10-14",
+ "value": 34
+ }, {
+ "date": "2012-10-15",
+ "value": 38
+ }, {
+ "date": "2012-10-16",
+ "value": 37
+ }, {
+ "date": "2012-10-17",
+ "value": 44
+ }, {
+ "date": "2012-10-18",
+ "value": 49
+ }, {
+ "date": "2012-10-19",
+ "value": 53
+ }, {
+ "date": "2012-10-20",
+ "value": 57
+ }, {
+ "date": "2012-10-21",
+ "value": 60
+ }, {
+ "date": "2012-10-22",
+ "value": 61
+ }, {
+ "date": "2012-10-23",
+ "value": 69
+ }, {
+ "date": "2012-10-24",
+ "value": 67
+ }, {
+ "date": "2012-10-25",
+ "value": 72
+ }, {
+ "date": "2012-10-26",
+ "value": 77
+ }, {
+ "date": "2012-10-27",
+ "value": 75
+ }, {
+ "date": "2012-10-28",
+ "value": 70
+ }, {
+ "date": "2012-10-29",
+ "value": 72
+ }, {
+ "date": "2012-10-30",
+ "value": 70
+ }, {
+ "date": "2012-10-31",
+ "value": 72
+ }, {
+ "date": "2012-11-01",
+ "value": 73
+ }, {
+ "date": "2012-11-02",
+ "value": 67
+ }, {
+ "date": "2012-11-03",
+ "value": 68
+ }, {
+ "date": "2012-11-04",
+ "value": 65
+ }, {
+ "date": "2012-11-05",
+ "value": 71
+ }, {
+ "date": "2012-11-06",
+ "value": 75
+ }, {
+ "date": "2012-11-07",
+ "value": 74
+ }, {
+ "date": "2012-11-08",
+ "value": 71
+ }, {
+ "date": "2012-11-09",
+ "value": 76
+ }, {
+ "date": "2012-11-10",
+ "value": 77
+ }, {
+ "date": "2012-11-11",
+ "value": 81
+ }, {
+ "date": "2012-11-12",
+ "value": 83
+ }, {
+ "date": "2012-11-13",
+ "value": 80
+ }, {
+ "date": "2012-11-14",
+ "value": 81
+ }, {
+ "date": "2012-11-15",
+ "value": 87
+ }, {
+ "date": "2012-11-16",
+ "value": 82
+ }, {
+ "date": "2012-11-17",
+ "value": 86
+ }, {
+ "date": "2012-11-18",
+ "value": 80
+ }, {
+ "date": "2012-11-19",
+ "value": 87
+ }, {
+ "date": "2012-11-20",
+ "value": 83
+ }, {
+ "date": "2012-11-21",
+ "value": 85
+ }, {
+ "date": "2012-11-22",
+ "value": 84
+ }, {
+ "date": "2012-11-23",
+ "value": 82
+ }, {
+ "date": "2012-11-24",
+ "value": 73
+ }, {
+ "date": "2012-11-25",
+ "value": 71
+ }, {
+ "date": "2012-11-26",
+ "value": 75
+ }, {
+ "date": "2012-11-27",
+ "value": 79
+ }, {
+ "date": "2012-11-28",
+ "value": 70
+ }, {
+ "date": "2012-11-29",
+ "value": 73
+ }, {
+ "date": "2012-11-30",
+ "value": 61
+ }, {
+ "date": "2012-12-01",
+ "value": 62
+ }, {
+ "date": "2012-12-02",
+ "value": 66
+ }, {
+ "date": "2012-12-03",
+ "value": 65
+ }, {
+ "date": "2012-12-04",
+ "value": 73
+ }, {
+ "date": "2012-12-05",
+ "value": 79
+ }, {
+ "date": "2012-12-06",
+ "value": 78
+ }, {
+ "date": "2012-12-07",
+ "value": 78
+ }, {
+ "date": "2012-12-08",
+ "value": 78
+ }, {
+ "date": "2012-12-09",
+ "value": 74
+ }, {
+ "date": "2012-12-10",
+ "value": 73
+ }, {
+ "date": "2012-12-11",
+ "value": 75
+ }, {
+ "date": "2012-12-12",
+ "value": 70
+ }, {
+ "date": "2012-12-13",
+ "value": 77
+ }, {
+ "date": "2012-12-14",
+ "value": 67
+ }, {
+ "date": "2012-12-15",
+ "value": 62
+ }, {
+ "date": "2012-12-16",
+ "value": 64
+ }, {
+ "date": "2012-12-17",
+ "value": 61
+ }, {
+ "date": "2012-12-18",
+ "value": 59
+ }, {
+ "date": "2012-12-19",
+ "value": 53
+ }, {
+ "date": "2012-12-20",
+ "value": 54
+ }, {
+ "date": "2012-12-21",
+ "value": 56
+ }, {
+ "date": "2012-12-22",
+ "value": 59
+ }, {
+ "date": "2012-12-23",
+ "value": 58
+ }, {
+ "date": "2012-12-24",
+ "value": 55
+ }, {
+ "date": "2012-12-25",
+ "value": 52
+ }, {
+ "date": "2012-12-26",
+ "value": 54
+ }, {
+ "date": "2012-12-27",
+ "value": 50
+ }, {
+ "date": "2012-12-28",
+ "value": 50
+ }, {
+ "date": "2012-12-29",
+ "value": 51
+ }, {
+ "date": "2012-12-30",
+ "value": 52
+ }, {
+ "date": "2012-12-31",
+ "value": 58
+ }, {
+ "date": "2013-01-01",
+ "value": 60
+ }, {
+ "date": "2013-01-02",
+ "value": 67
+ }, {
+ "date": "2013-01-03",
+ "value": 64
+ }, {
+ "date": "2013-01-04",
+ "value": 66
+ }, {
+ "date": "2013-01-05",
+ "value": 60
+ }, {
+ "date": "2013-01-06",
+ "value": 63
+ }, {
+ "date": "2013-01-07",
+ "value": 61
+ }, {
+ "date": "2013-01-08",
+ "value": 60
+ }, {
+ "date": "2013-01-09",
+ "value": 65
+ }, {
+ "date": "2013-01-10",
+ "value": 75
+ }, {
+ "date": "2013-01-11",
+ "value": 77
+ }, {
+ "date": "2013-01-12",
+ "value": 78
+ }, {
+ "date": "2013-01-13",
+ "value": 70
+ }, {
+ "date": "2013-01-14",
+ "value": 70
+ }, {
+ "date": "2013-01-15",
+ "value": 73
+ }, {
+ "date": "2013-01-16",
+ "value": 71
+ }, {
+ "date": "2013-01-17",
+ "value": 74
+ }, {
+ "date": "2013-01-18",
+ "value": 78
+ }, {
+ "date": "2013-01-19",
+ "value": 85
+ }, {
+ "date": "2013-01-20",
+ "value": 82
+ }, {
+ "date": "2013-01-21",
+ "value": 83
+ }, {
+ "date": "2013-01-22",
+ "value": 88
+ }, {
+ "date": "2013-01-23",
+ "value": 85
+ }, {
+ "date": "2013-01-24",
+ "value": 85
+ }, {
+ "date": "2013-01-25",
+ "value": 80
+ }, {
+ "date": "2013-01-26",
+ "value": 87
+ }, {
+ "date": "2013-01-27",
+ "value": 84
+ }, {
+ "date": "2013-01-28",
+ "value": 83
+ }, {
+ "date": "2013-01-29",
+ "value": 84
+ }, {
+ "date": "2013-01-30",
+ "value": 81
+ }];
+
+ // Set input format for the dates
+ chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
+
+ // Create axes
+ var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
+ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+
+ // Create series
+ var series = chart.series.push(new am4charts.LineSeries());
+ series.dataFields.valueY = "value";
+ series.dataFields.dateX = "date";
+ series.tooltipText = "{value}"
+ series.strokeWidth = 2;
+ series.minBulletDistance = 15;
+
+ // Drop-shaped tooltips
+ series.tooltip.background.cornerRadius = 20;
+ series.tooltip.background.strokeOpacity = 0;
+ series.tooltip.pointerOrientation = "vertical";
+ series.tooltip.label.minWidth = 40;
+ series.tooltip.label.minHeight = 40;
+ series.tooltip.label.textAlign = "middle";
+ series.tooltip.label.textValign = "middle";
+
+ // Make bullets grow on hover
+ var bullet = series.bullets.push(new am4charts.CircleBullet());
+ bullet.circle.strokeWidth = 2;
+ bullet.circle.radius = 4;
+ bullet.circle.fill = am4core.color("#fff");
+
+ var bullethover = bullet.states.create("hover");
+ bullethover.properties.scale = 1.3;
+
+ // Make a panning cursor
+ chart.cursor = new am4charts.XYCursor();
+ chart.cursor.behavior = "panXY";
+ chart.cursor.xAxis = dateAxis;
+ chart.cursor.snapToSeries = series;
+
+ // Create vertical scrollbar and place it before the value axis
+ chart.scrollbarY = new am4core.Scrollbar();
+ chart.scrollbarY.parent = chart.leftAxesContainer;
+ chart.scrollbarY.toBack();
+
+ // Create a horizontal scrollbar with previe and place it underneath the date axis
+ chart.scrollbarX = new am4charts.XYChartScrollbar();
+ chart.scrollbarX.series.push(series);
+ chart.scrollbarX.parent = chart.bottomAxesContainer;
+
+ dateAxis.start = 0.79;
+ dateAxis.keepSelection = true;
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+
+ }); // end am4core.ready()
+ }
+ if(jQuery('#am-linescrollzoiq-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ // Create chart instance
+ var chart = am4core.create("am-linescrollzoiq-chart", am4charts.XYChart);
+ chart.colors.list = [am4core.color("#57aeff")];
+
+ // Add data
+ chart.data = generateChartData();
+
+ // Create axes
+ var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
+ dateAxis.renderer.minGridDistance = 50;
+
+ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+
+ // Create series
+ var series = chart.series.push(new am4charts.LineSeries());
+ series.dataFields.valueY = "visits";
+ series.dataFields.dateX = "date";
+ series.strokeWidth = 2;
+ series.minBulletDistance = 10;
+ series.tooltipText = "{valueY}";
+ series.tooltip.pointerOrientation = "vertical";
+ series.tooltip.background.cornerRadius = 20;
+ series.tooltip.background.fillOpacity = 0.5;
+ series.tooltip.label.padding(12,12,12,12)
+
+ // Add scrollbar
+ chart.scrollbarX = new am4charts.XYChartScrollbar();
+ chart.scrollbarX.series.push(series);
+
+ // Add cursor
+ chart.cursor = new am4charts.XYCursor();
+ chart.cursor.xAxis = dateAxis;
+ chart.cursor.snapToSeries = series;
+
+ function generateChartData() {
+ var chartData = [];
+ var firstDate = new Date();
+ firstDate.setDate(firstDate.getDate() - 1000);
+ var visits = 1200;
+ for (var i = 0; i < 500; i++) {
+ var newDate = new Date(firstDate);
+ newDate.setDate(newDate.getDate() + i);
+
+ visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
+
+ chartData.push({
+ date: newDate,
+ visits: visits
+ });
+ }
+ return chartData;
+ }
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ });
+ }
+
+ if(jQuery('#am-zoomable-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ // Create chart instance
+ var chart = am4core.create("am-zoomable-chart", am4charts.XYChart);
+ chart.colors.list = [am4core.color("#57aeff")];
+
+ // Add data
+ chart.data = [ {
+ "date": "2012-07-27",
+ "value": 13
+ }, {
+ "date": "2012-07-28",
+ "value": 11
+ }, {
+ "date": "2012-07-29",
+ "value": 15
+ }, {
+ "date": "2012-07-30",
+ "value": 16
+ }, {
+ "date": "2012-07-31",
+ "value": 18
+ }, {
+ "date": "2012-08-01",
+ "value": 13
+ }, {
+ "date": "2012-08-02",
+ "value": 22
+ }, {
+ "date": "2012-08-03",
+ "value": 23
+ }, {
+ "date": "2012-08-04",
+ "value": 20
+ }, {
+ "date": "2012-08-05",
+ "value": 17
+ }, {
+ "date": "2012-08-06",
+ "value": 16
+ }, {
+ "date": "2012-08-07",
+ "value": 18
+ }, {
+ "date": "2012-08-08",
+ "value": 21
+ }, {
+ "date": "2012-08-09",
+ "value": 26
+ }, {
+ "date": "2012-08-10",
+ "value": 24
+ }, {
+ "date": "2012-08-11",
+ "value": 29
+ }, {
+ "date": "2012-08-12",
+ "value": 32
+ }, {
+ "date": "2012-08-13",
+ "value": 18
+ }, {
+ "date": "2012-08-14",
+ "value": 24
+ }, {
+ "date": "2012-08-15",
+ "value": 22
+ }, {
+ "date": "2012-08-16",
+ "value": 18
+ }, {
+ "date": "2012-08-17",
+ "value": 19
+ }, {
+ "date": "2012-08-18",
+ "value": 14
+ }, {
+ "date": "2012-08-19",
+ "value": 15
+ }, {
+ "date": "2012-08-20",
+ "value": 12
+ }, {
+ "date": "2012-08-21",
+ "value": 8
+ }, {
+ "date": "2012-08-22",
+ "value": 9
+ }, {
+ "date": "2012-08-23",
+ "value": 8
+ }, {
+ "date": "2012-08-24",
+ "value": 7
+ }, {
+ "date": "2012-08-25",
+ "value": 5
+ }, {
+ "date": "2012-08-26",
+ "value": 11
+ }, {
+ "date": "2012-08-27",
+ "value": 13
+ }, {
+ "date": "2012-08-28",
+ "value": 18
+ }, {
+ "date": "2012-08-29",
+ "value": 20
+ }, {
+ "date": "2012-08-30",
+ "value": 29
+ }, {
+ "date": "2012-08-31",
+ "value": 33
+ }, {
+ "date": "2012-09-01",
+ "value": 42
+ }, {
+ "date": "2012-09-02",
+ "value": 35
+ }, {
+ "date": "2012-09-03",
+ "value": 31
+ }, {
+ "date": "2012-09-04",
+ "value": 47
+ }, {
+ "date": "2012-09-05",
+ "value": 52
+ }, {
+ "date": "2012-09-06",
+ "value": 46
+ }, {
+ "date": "2012-09-07",
+ "value": 41
+ }, {
+ "date": "2012-09-08",
+ "value": 43
+ }, {
+ "date": "2012-09-09",
+ "value": 40
+ }, {
+ "date": "2012-09-10",
+ "value": 39
+ }, {
+ "date": "2012-09-11",
+ "value": 34
+ }, {
+ "date": "2012-09-12",
+ "value": 29
+ }, {
+ "date": "2012-09-13",
+ "value": 34
+ }, {
+ "date": "2012-09-14",
+ "value": 37
+ }, {
+ "date": "2012-09-15",
+ "value": 42
+ }, {
+ "date": "2012-09-16",
+ "value": 49
+ }, {
+ "date": "2012-09-17",
+ "value": 46
+ }, {
+ "date": "2012-09-18",
+ "value": 47
+ }, {
+ "date": "2012-09-19",
+ "value": 55
+ }, {
+ "date": "2012-09-20",
+ "value": 59
+ }, {
+ "date": "2012-09-21",
+ "value": 58
+ }, {
+ "date": "2012-09-22",
+ "value": 57
+ }, {
+ "date": "2012-09-23",
+ "value": 61
+ }, {
+ "date": "2012-09-24",
+ "value": 59
+ }, {
+ "date": "2012-09-25",
+ "value": 67
+ }, {
+ "date": "2012-09-26",
+ "value": 65
+ }, {
+ "date": "2012-09-27",
+ "value": 61
+ }, {
+ "date": "2012-09-28",
+ "value": 66
+ }, {
+ "date": "2012-09-29",
+ "value": 69
+ }, {
+ "date": "2012-09-30",
+ "value": 71
+ }, {
+ "date": "2012-10-01",
+ "value": 67
+ }, {
+ "date": "2012-10-02",
+ "value": 63
+ }, {
+ "date": "2012-10-03",
+ "value": 46
+ }, {
+ "date": "2012-10-04",
+ "value": 32
+ }, {
+ "date": "2012-10-05",
+ "value": 21
+ }, {
+ "date": "2012-10-06",
+ "value": 18
+ }, {
+ "date": "2012-10-07",
+ "value": 21
+ }, {
+ "date": "2012-10-08",
+ "value": 28
+ }, {
+ "date": "2012-10-09",
+ "value": 27
+ }, {
+ "date": "2012-10-10",
+ "value": 36
+ }, {
+ "date": "2012-10-11",
+ "value": 33
+ }, {
+ "date": "2012-10-12",
+ "value": 31
+ }, {
+ "date": "2012-10-13",
+ "value": 30
+ }, {
+ "date": "2012-10-14",
+ "value": 34
+ }, {
+ "date": "2012-10-15",
+ "value": 38
+ }, {
+ "date": "2012-10-16",
+ "value": 37
+ }, {
+ "date": "2012-10-17",
+ "value": 44
+ }, {
+ "date": "2012-10-18",
+ "value": 49
+ }, {
+ "date": "2012-10-19",
+ "value": 53
+ }, {
+ "date": "2012-10-20",
+ "value": 57
+ }, {
+ "date": "2012-10-21",
+ "value": 60
+ }, {
+ "date": "2012-10-22",
+ "value": 61
+ }, {
+ "date": "2012-10-23",
+ "value": 69
+ }, {
+ "date": "2012-10-24",
+ "value": 67
+ }, {
+ "date": "2012-10-25",
+ "value": 72
+ }, {
+ "date": "2012-10-26",
+ "value": 77
+ }, {
+ "date": "2012-10-27",
+ "value": 75
+ }, {
+ "date": "2012-10-28",
+ "value": 70
+ }, {
+ "date": "2012-10-29",
+ "value": 72
+ }, {
+ "date": "2012-10-30",
+ "value": 70
+ }, {
+ "date": "2012-10-31",
+ "value": 72
+ }, {
+ "date": "2012-11-01",
+ "value": 73
+ }, {
+ "date": "2012-11-02",
+ "value": 67
+ }, {
+ "date": "2012-11-03",
+ "value": 68
+ }, {
+ "date": "2012-11-04",
+ "value": 65
+ }, {
+ "date": "2012-11-05",
+ "value": 71
+ }, {
+ "date": "2012-11-06",
+ "value": 75
+ }, {
+ "date": "2012-11-07",
+ "value": 74
+ }, {
+ "date": "2012-11-08",
+ "value": 71
+ }, {
+ "date": "2012-11-09",
+ "value": 76
+ }, {
+ "date": "2012-11-10",
+ "value": 77
+ }, {
+ "date": "2012-11-11",
+ "value": 81
+ }, {
+ "date": "2012-11-12",
+ "value": 83
+ }, {
+ "date": "2012-11-13",
+ "value": 80
+ }, {
+ "date": "2012-11-18",
+ "value": 80
+ }, {
+ "date": "2012-11-19",
+ "value": 87
+ }, {
+ "date": "2012-11-20",
+ "value": 83
+ }, {
+ "date": "2012-11-21",
+ "value": 85
+ }, {
+ "date": "2012-11-22",
+ "value": 84
+ }, {
+ "date": "2012-11-23",
+ "value": 82
+ }, {
+ "date": "2012-11-24",
+ "value": 73
+ }, {
+ "date": "2012-11-25",
+ "value": 71
+ }, {
+ "date": "2012-11-26",
+ "value": 75
+ }, {
+ "date": "2012-11-27",
+ "value": 79
+ }, {
+ "date": "2012-11-28",
+ "value": 70
+ }, {
+ "date": "2012-11-29",
+ "value": 73
+ }, {
+ "date": "2012-11-30",
+ "value": 61
+ }, {
+ "date": "2012-12-01",
+ "value": 62
+ }, {
+ "date": "2012-12-02",
+ "value": 66
+ }, {
+ "date": "2012-12-03",
+ "value": 65
+ }, {
+ "date": "2012-12-04",
+ "value": 73
+ }, {
+ "date": "2012-12-05",
+ "value": 79
+ }, {
+ "date": "2012-12-06",
+ "value": 78
+ }, {
+ "date": "2012-12-07",
+ "value": 78
+ }, {
+ "date": "2012-12-08",
+ "value": 78
+ }, {
+ "date": "2012-12-09",
+ "value": 74
+ }, {
+ "date": "2012-12-10",
+ "value": 73
+ }, {
+ "date": "2012-12-11",
+ "value": 75
+ }, {
+ "date": "2012-12-12",
+ "value": 70
+ }, {
+ "date": "2012-12-13",
+ "value": 77
+ }, {
+ "date": "2012-12-14",
+ "value": 67
+ }, {
+ "date": "2012-12-15",
+ "value": 62
+ }, {
+ "date": "2012-12-16",
+ "value": 64
+ }, {
+ "date": "2012-12-17",
+ "value": 61
+ }, {
+ "date": "2012-12-18",
+ "value": 59
+ }, {
+ "date": "2012-12-19",
+ "value": 53
+ }, {
+ "date": "2012-12-20",
+ "value": 54
+ }, {
+ "date": "2012-12-21",
+ "value": 56
+ }, {
+ "date": "2012-12-22",
+ "value": 59
+ }, {
+ "date": "2012-12-23",
+ "value": 58
+ }, {
+ "date": "2012-12-24",
+ "value": 55
+ }, {
+ "date": "2012-12-25",
+ "value": 52
+ }, {
+ "date": "2012-12-26",
+ "value": 54
+ }, {
+ "date": "2012-12-27",
+ "value": 50
+ }, {
+ "date": "2012-12-28",
+ "value": 50
+ }, {
+ "date": "2012-12-29",
+ "value": 51
+ }, {
+ "date": "2012-12-30",
+ "value": 52
+ }, {
+ "date": "2012-12-31",
+ "value": 58
+ }, {
+ "date": "2013-01-01",
+ "value": 60
+ }, {
+ "date": "2013-01-02",
+ "value": 67
+ }, {
+ "date": "2013-01-03",
+ "value": 64
+ }, {
+ "date": "2013-01-04",
+ "value": 66
+ }, {
+ "date": "2013-01-05",
+ "value": 60
+ }, {
+ "date": "2013-01-06",
+ "value": 63
+ }, {
+ "date": "2013-01-07",
+ "value": 61
+ }, {
+ "date": "2013-01-08",
+ "value": 60
+ }, {
+ "date": "2013-01-09",
+ "value": 65
+ }, {
+ "date": "2013-01-10",
+ "value": 75
+ }, {
+ "date": "2013-01-11",
+ "value": 77
+ }, {
+ "date": "2013-01-12",
+ "value": 78
+ }, {
+ "date": "2013-01-13",
+ "value": 70
+ }, {
+ "date": "2013-01-14",
+ "value": 70
+ }, {
+ "date": "2013-01-15",
+ "value": 73
+ }, {
+ "date": "2013-01-16",
+ "value": 71
+ }, {
+ "date": "2013-01-17",
+ "value": 74
+ }, {
+ "date": "2013-01-18",
+ "value": 78
+ }, {
+ "date": "2013-01-19",
+ "value": 85
+ }, {
+ "date": "2013-01-20",
+ "value": 82
+ }, {
+ "date": "2013-01-21",
+ "value": 83
+ }, {
+ "date": "2013-01-22",
+ "value": 88
+ }, {
+ "date": "2013-01-23",
+ "value": 85
+ }, {
+ "date": "2013-01-24",
+ "value": 85
+ }, {
+ "date": "2013-01-25",
+ "value": 80
+ }, {
+ "date": "2013-01-26",
+ "value": 87
+ }, {
+ "date": "2013-01-27",
+ "value": 84
+ }, {
+ "date": "2013-01-28",
+ "value": 83
+ }, {
+ "date": "2013-01-29",
+ "value": 84
+ }, {
+ "date": "2013-01-30",
+ "value": 81
+ } ];
+
+ // Create axes
+ var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
+ dateAxis.renderer.grid.template.location = 0;
+ dateAxis.renderer.minGridDistance = 50;
+
+ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+
+ // Create series
+ var series = chart.series.push(new am4charts.LineSeries());
+ series.dataFields.valueY = "value";
+ series.dataFields.dateX = "date";
+ series.strokeWidth = 3;
+ series.fillOpacity = 0.5;
+
+ // Add vertical scrollbar
+ chart.scrollbarY = new am4core.Scrollbar();
+ chart.scrollbarY.marginLeft = 0;
+
+ // Add cursor
+ chart.cursor = new am4charts.XYCursor();
+ chart.cursor.behavior = "zoomY";
+ chart.cursor.lineX.disabled = true;
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ }); // end am4core.ready()
+ }
+ if(jQuery('#am-radar-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ /* Create chart instance */
+ var chart = am4core.create("am-radar-chart", am4charts.RadarChart);
+ chart.colors.list = [am4core.color("#4788ff")];
+
+ /* Add data */
+ chart.data = [{
+ "country": "Lithuania",
+ "litres": 501
+ }, {
+ "country": "Czechia",
+ "litres": 301
+ }, {
+ "country": "Ireland",
+ "litres": 266
+ }, {
+ "country": "Germany",
+ "litres": 165
+ }, {
+ "country": "Australia",
+ "litres": 139
+ }, {
+ "country": "Austria",
+ "litres": 336
+ }, {
+ "country": "UK",
+ "litres": 290
+ }, {
+ "country": "Belgium",
+ "litres": 325
+ }, {
+ "country": "The Netherlands",
+ "litres": 40
+ }];
+
+ /* Create axes */
+ var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+ categoryAxis.dataFields.category = "country";
+
+ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+ valueAxis.renderer.axisFills.template.fill = chart.colors.getIndex(2);
+ valueAxis.renderer.axisFills.template.fillOpacity = 0.05;
+
+ /* Create and configure series */
+ var series = chart.series.push(new am4charts.RadarSeries());
+ series.dataFields.valueY = "litres";
+ series.dataFields.categoryX = "country";
+ series.name = "Sales";
+ series.strokeWidth = 3;
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ }); // end am4core.ready()
+ }
+ if(jQuery('#am-polar-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ /* Create chart instance */
+ var chart = am4core.create("am-polar-chart", am4charts.RadarChart);
+
+ /* Add data */
+ chart.data = [ {
+ "direction": "N",
+ "value": 8
+ }, {
+ "direction": "NE",
+ "value": 9
+ }, {
+ "direction": "E",
+ "value": 4.5
+ }, {
+ "direction": "SE",
+ "value": 3.5
+ }, {
+ "direction": "S",
+ "value": 9.2
+ }, {
+ "direction": "SW",
+ "value": 8.4
+ }, {
+ "direction": "W",
+ "value": 11.1
+ }, {
+ "direction": "NW",
+ "value": 10
+ } ];
+
+ /* Create axes */
+ var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+ categoryAxis.dataFields.category = "direction";
+
+ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+ //valueAxis.renderer.gridType = "polygons";
+
+ var range = categoryAxis.axisRanges.create();
+ range.category = "NW";
+ range.endCategory = "NW";
+ range.axisFill.fill = am4core.color("#4788ff");
+ range.axisFill.fillOpacity = 0.3;
+
+ var range2 = categoryAxis.axisRanges.create();
+ range2.category = "N";
+ range2.endCategory = "N";
+ range2.axisFill.fill = am4core.color("#ff4b4b");
+ range2.axisFill.fillOpacity = 0.3;
+
+ var range3 = categoryAxis.axisRanges.create();
+ range3.category = "SE";
+ range3.endCategory = "SW";
+ range3.axisFill.fill = am4core.color("#37e6b0");
+ range3.axisFill.fillOpacity = 0.3;
+ range3.locations.endCategory = 0;
+
+ /* Create and configure series */
+ var series = chart.series.push(new am4charts.RadarSeries());
+ series.dataFields.valueY = "value";
+ series.dataFields.categoryX = "direction";
+ series.name = "Wind direction";
+ series.strokeWidth = 3;
+ series.fillOpacity = 0.2;
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ }); // end am4core.ready()
+ }
+
+ if(jQuery('#am-polarscatter-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ /* Create chart instance */
+ var chart = am4core.create("am-polarscatter-chart", am4charts.RadarChart);
+ chart.colors.list = [am4core.color("#4788ff"),am4core.color("#fe721c"),am4core.color("#37e6b0")];
+
+ /* Add data */
+ chart.data = [{
+ "country": "Lithuania",
+ "litres": 501,
+ "units": 250
+ }, {
+ "country": "Czech Republic",
+ "litres": 301,
+ "units": 222
+ }, {
+ "country": "Ireland",
+ "litres": 266,
+ "units": 179
+ }, {
+ "country": "Germany",
+ "litres": 165,
+ "units": 298
+ }, {
+ "country": "Australia",
+ "litres": 139,
+ "units": 299
+ }];
+
+ /* Create axes */
+ var xAxis = chart.xAxes.push(new am4charts.ValueAxis());
+ xAxis.renderer.maxLabelPosition = 0.99;
+
+ var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
+ yAxis.renderer.labels.template.verticalCenter = "bottom";
+ yAxis.renderer.labels.template.horizontalCenter = "right";
+ yAxis.renderer.maxLabelPosition = 0.99;
+ yAxis.renderer.labels.template.paddingBottom = 1;
+ yAxis.renderer.labels.template.paddingRight = 3;
+
+ /* Create and configure series */
+ var series1 = chart.series.push(new am4charts.RadarSeries());
+ series1.bullets.push(new am4charts.CircleBullet());
+ series1.strokeOpacity = 0;
+ series1.dataFields.valueX = "x";
+ series1.dataFields.valueY = "y";
+ series1.name = "Series #1";
+ series1.sequencedInterpolation = true;
+ series1.sequencedInterpolationDelay = 10;
+ series1.data = [
+ { "x": 83, "y": 5.1 },
+ { "x": 44, "y": 5.8 },
+ { "x": 76, "y": 9 },
+ { "x": 2, "y": 1.4 },
+ { "x": 100, "y": 8.3 },
+ { "x": 96, "y": 1.7 },
+ { "x": 68, "y": 3.9 },
+ { "x": 0, "y": 3 },
+ { "x": 100, "y": 4.1 },
+ { "x": 16, "y": 5.5 },
+ { "x": 71, "y": 6.8 },
+ { "x": 100, "y": 7.9 },
+ { "x": 35, "y": 8 },
+ { "x": 44, "y": 6 },
+ { "x": 64, "y": 0.7 },
+ { "x": 53, "y": 3.3 },
+ { "x": 92, "y": 4.1 },
+ { "x": 43, "y": 7.3 },
+ { "x": 15, "y": 7.5 },
+ { "x": 43, "y": 4.3 },
+ { "x": 90, "y": 9.9 }
+ ];
+
+ var series2 = chart.series.push(new am4charts.RadarSeries());
+ series2.bullets.push(new am4charts.CircleBullet());
+ series2.strokeOpacity = 0;
+ series2.dataFields.valueX = "x";
+ series2.dataFields.valueY = "y";
+ series2.name = "Series #2";
+ series2.sequencedInterpolation = true;
+ series2.sequencedInterpolationDelay = 10;
+ series2.data = [
+ { "x": 178, "y": 1.3 },
+ { "x": 129, "y": 3.4 },
+ { "x": 99, "y": 2.4 },
+ { "x": 80, "y": 9.9 },
+ { "x": 118, "y": 9.4 },
+ { "x": 103, "y": 8.7 },
+ { "x": 91, "y": 4.2 },
+ { "x": 151, "y": 1.2 },
+ { "x": 168, "y": 5.2 },
+ { "x": 168, "y": 1.6 },
+ { "x": 152, "y": 1.2 },
+ { "x": 138, "y": 7.7 },
+ { "x": 107, "y": 3.9 },
+ { "x": 124, "y": 0.7 },
+ { "x": 130, "y": 2.6 },
+ { "x": 86, "y": 9.2 },
+ { "x": 169, "y": 7.5 },
+ { "x": 122, "y": 9.9 },
+ { "x": 100, "y": 3.8 },
+ { "x": 172, "y": 4.1 },
+ { "x": 140, "y": 7.3 },
+ { "x": 161, "y": 2.3 },
+ { "x": 141, "y": 0.9 }
+ ];
+
+ var series3 = chart.series.push(new am4charts.RadarSeries());
+ series3.bullets.push(new am4charts.CircleBullet());
+ series3.strokeOpacity = 0;
+ series3.dataFields.valueX = "x";
+ series3.dataFields.valueY = "y";
+ series3.name = "Series #3";
+ series3.sequencedInterpolation = true;
+ series3.sequencedInterpolationDelay = 10;
+ series3.data = [
+ { "x": 419, "y": 4.9 },
+ { "x": 417, "y": 5.5 },
+ { "x": 434, "y": 0.1 },
+ { "x": 344, "y": 2.5 },
+ { "x": 279, "y": 7.5 },
+ { "x": 307, "y": 8.4 },
+ { "x": 279, "y": 9 },
+ { "x": 220, "y": 8.4 },
+ { "x": 201, "y": 9.7 },
+ { "x": 288, "y": 1.2 },
+ { "x": 333, "y": 7.4 },
+ { "x": 308, "y": 1.9 },
+ { "x": 330, "y": 8 },
+ { "x": 408, "y": 1.7 },
+ { "x": 274, "y": 0.8 },
+ { "x": 296, "y": 3.1 },
+ { "x": 279, "y": 4.3 },
+ { "x": 379, "y": 5.6 },
+ { "x": 175, "y": 6.8 }
+ ];
+
+ /* Add legend */
+ chart.legend = new am4charts.Legend();
+
+ /* Add cursor */
+ chart.cursor = new am4charts.RadarCursor();
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ }); // end am4core.ready()
+ }
+ if(jQuery('#am-3dpie-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ var chart = am4core.create("am-3dpie-chart", am4charts.PieChart3D);
+ chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
+
+ chart.legend = new am4charts.Legend();
+
+ chart.data = [
+ {
+ country: "Lithuania",
+ litres: 501.9,
+ fill: "red"
+ },
+ {
+ country: "Germany",
+ litres: 165.8
+ },
+ {
+ country: "Australia",
+ litres: 139.9
+ },
+ {
+ country: "Austria",
+ litres: 128.3
+ },
+ {
+ country: "UK",
+ litres: 99
+ },
+ {
+ country: "Belgium",
+ litres: 60
+ }
+ ];
+
+ var series = chart.series.push(new am4charts.PieSeries3D());
+ series.colors.list = [am4core.color("#4788ff"),am4core.color("#37e6b0"),am4core.color("#ff4b4b"),
+ am4core.color("#fe721c"),am4core.color("#876cfe"),am4core.color("#01041b")];
+ series.dataFields.value = "litres";
+ series.dataFields.category = "country";
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ }); // end am4core.ready()
+ }
+
+ if(jQuery('#am-layeredcolumn-chart').length){
+ am4core.ready(function() {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ // Create chart instance
+ var chart = am4core.create("am-layeredcolumn-chart", am4charts.XYChart);
+ chart.colors.list = [am4core.color("#37e6b0"),am4core.color("#4788ff")];
+
+ // Add percent sign to all numbers
+ chart.numberFormatter.numberFormat = "#.#'%'";
+
+ // Add data
+ chart.data = [{
+ "country": "USA",
+ "year2004": 3.5,
+ "year2005": 4.2
+ }, {
+ "country": "UK",
+ "year2004": 1.7,
+ "year2005": 3.1
+ }, {
+ "country": "Canada",
+ "year2004": 2.8,
+ "year2005": 2.9
+ }, {
+ "country": "Japan",
+ "year2004": 2.6,
+ "year2005": 2.3
+ }, {
+ "country": "France",
+ "year2004": 1.4,
+ "year2005": 2.1
+ }, {
+ "country": "Brazil",
+ "year2004": 2.6,
+ "year2005": 4.9
+ }];
+
+ // Create axes
+ var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+ categoryAxis.dataFields.category = "country";
+ categoryAxis.renderer.grid.template.location = 0;
+ categoryAxis.renderer.minGridDistance = 30;
+
+ var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+ valueAxis.title.text = "GDP growth rate";
+ valueAxis.title.fontWeight = 800;
+
+ // Create series
+ var series = chart.series.push(new am4charts.ColumnSeries());
+ series.dataFields.valueY = "year2004";
+ series.dataFields.categoryX = "country";
+ series.clustered = false;
+ series.tooltipText = "GDP grow in {categoryX} (2004): [bold]{valueY}[/]";
+
+ var series2 = chart.series.push(new am4charts.ColumnSeries());
+ series2.dataFields.valueY = "year2005";
+ series2.dataFields.categoryX = "country";
+ series2.clustered = false;
+ series2.columns.template.width = am4core.percent(50);
+ series2.tooltipText = "GDP grow in {categoryX} (2005): [bold]{valueY}[/]";
+
+ chart.cursor = new am4charts.XYCursor();
+ chart.cursor.lineX.disabled = true;
+ chart.cursor.lineY.disabled = true;
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ }); // end am4core.ready()
+ }
+
+/*---------------------------------------------------------------------
+ Morris Charts
+-----------------------------------------------------------------------*/
+
+if(jQuery('#morris-line-chart').length){
+ new Morris.Line({
+ // ID of the element in which to draw the chart.
+ element: 'morris-line-chart',
+ // Chart data records -- each entry in this array corresponds to a point on
+ // the chart.
+ data: [
+ { year: '2008', value: 20 },
+ { year: '2009', value: 10 },
+ { year: '2010', value: 5 },
+ { year: '2011', value: 5 },
+ { year: '2012', value: 20 }
+ ],
+ // The name of the data record attribute that contains x-values.
+ xkey: 'year',
+ // A list of names of data record attributes that contain y-values.
+ ykeys: ['value'],
+ // Labels for the ykeys -- will be displayed when you hover over the
+ // chart.
+ labels: ['Value'],
+ lineColors: ['#4788ff']
+ });
+}
+
+if(jQuery('#morris-bar-chart').length){
+ Morris.Bar({
+element: 'morris-bar-chart',
+data: [
+ {x: '2011 Q1', y: 3, z: 2, a: 3},
+ {x: '2011 Q2', y: 2, z: null, a: 1},
+ {x: '2011 Q3', y: 0, z: 2, a: 4},
+ {x: '2011 Q4', y: 2, z: 4, a: 3}
+],
+xkey: 'x',
+ykeys: ['y', 'z', 'a'],
+labels: ['Y', 'Z', 'A'],
+barColors: ['#4788ff', '#fe721c', '#37e6b0'],
+hoverCallback: function (index, options, content, row) {
+ return '';
+ }
+}).on('click', function(i, row){
+console.log(i, row);
+});
+}
+
+if(jQuery('#morris-area-chart').length){
+ var area = new Morris.Area({
+ element: 'morris-area-chart',
+ resize: true,
+ data: [
+ {y: '2011 Q1', item1: 2666, item2: 2666},
+ {y: '2011 Q2', item1: 2778, item2: 2294},
+ {y: '2011 Q3', item1: 4912, item2: 1969},
+ {y: '2011 Q4', item1: 3767, item2: 3597},
+ {y: '2012 Q1', item1: 6810, item2: 1914},
+ {y: '2012 Q2', item1: 5670, item2: 4293},
+ {y: '2012 Q3', item1: 4820, item2: 3795},
+ {y: '2012 Q4', item1: 15073, item2: 5967},
+ {y: '2013 Q1', item1: 10687, item2: 4460},
+ {y: '2013 Q2', item1: 8432, item2: 5713}
+ ],
+ xkey: 'y',
+ ykeys: ['item1', 'item2'],
+ labels: ['Item 1', 'Item 2'],
+ lineColors: ['#75e275', '#75bcff'],
+ hoverCallback: function (index, options, content, row) {
+ return '';
+ }
+ });
+}
+
+if(jQuery('#morris-donut-chart').length){
+ var donut = new Morris.Donut({
+ element: 'morris-donut-chart',
+ resize: true,
+ colors: ["#4788ff", "#ff4b4b", "#37e6b0"],
+ data: [
+ {label: "Download Sales", value: 12},
+ {label: "In-Store Sales", value: 30},
+ {label: "Mail-Order Sales", value: 20}
+ ],
+ hideHover: 'auto'
+ });
+}
+
+/*---------------------------------------------------------------------
+ High Charts
+-----------------------------------------------------------------------*/
+if (jQuery("#high-basicline-chart").length && Highcharts.chart("high-basicline-chart", {
+ chart: {
+ type: "spline",
+ inverted: !0
+ },
+ title: {
+ text: "Atmosphere Temperature by Altitude"
+ },
+ subtitle: {
+ text: "According to the Standard Atmosphere Model"
+ },
+ xAxis: {
+ reversed: !1,
+ title: {
+ enabled: !0,
+ text: "Altitude"
+ },
+ labels: {
+ format: "{value} km"
+ },
+ maxPadding: .05,
+ showLastLabel: !0
+ },
+ yAxis: {
+ title: {
+ text: "Temperature"
+ },
+ labels: {
+ format: "{value}°"
+ },
+ lineWidth: 2
+ },
+ legend: {
+ enabled: !1
+ },
+ tooltip: {
+ headerFormat: "{series.name}
",
+ pointFormat: "{point.x} km: {point.y}°C"
+ },
+ plotOptions: {
+ spline: {
+ marker: {
+ enable: !1
+ }
+ }
+ },
+ series: [{
+ name: "Temperature",
+ color: "#4788ff",
+ data: [
+ [0, 15],
+ [10, -50],
+ [20, -56.5],
+ [30, -46.5],
+ [40, -22.1],
+ [50, -2.5],
+ [60, -27.7],
+ [70, -55.7],
+ [80, -76.5]
+ ]
+ }]
+ }), jQuery("#high-area-chart").length && Highcharts.chart("high-area-chart", {
+ chart: {
+ type: "areaspline"
+ },
+ title: {
+ text: "Average fruit consumption during one week"
+ },
+ legend: {
+ layout: "vertical",
+ align: "left",
+ verticalAlign: "top",
+ x: 150,
+ y: 100,
+ floating: !0,
+ borderWidth: 1,
+ backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || "#FFFFFF"
+ },
+ xAxis: {
+ categories: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+ plotBands: [{
+ from: 4.5,
+ to: 6.5,
+ color: "rgba(68, 170, 213, .2)"
+ }]
+ },
+ yAxis: {
+ title: {
+ text: "Fruit units"
+ }
+ },
+ tooltip: {
+ shared: !0,
+ valueSuffix: " units"
+ },
+ credits: {
+ enabled: !1
+ },
+ plotOptions: {
+ areaspline: {
+ fillOpacity: .5
+ }
+ },
+ series: [{
+ name: "John",
+ color: "#4788ff",
+ data: [3, 4, 3, 5, 4, 10, 12]
+ }, {
+ name: "Jane",
+ color: "#37e6b0",
+ data: [1, 3, 4, 3, 3, 5, 4]
+ }]
+ }), jQuery("#high-columnndbar-chart").length && Highcharts.chart("high-columnndbar-chart", {
+ chart: {
+ type: "bar"
+ },
+ title: {
+ text: "Stacked bar chart"
+ },
+ xAxis: {
+ categories: ["Apples", "Oranges", "Pears", "Grapes", "Bananas"]
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: "Total fruit consumption"
+ }
+ },
+ legend: {
+ reversed: !0
+ },
+ plotOptions: {
+ series: {
+ stacking: "normal"
+ }
+ },
+ series: [{
+ name: "John",
+ color: "#4788ff",
+ data: [5, 3, 4, 7, 2]
+ }, {
+ name: "Jane",
+ color: "#ff4b4b",
+ data: [2, 2, 3, 2, 1]
+ }, {
+ name: "Joe",
+ color: "#37e6b0",
+ data: [3, 4, 4, 2, 5]
+ }]
+ }), jQuery("#high-pie-chart").length && Highcharts.chart("high-pie-chart", {
+ chart: {
+ plotBackgroundColor: null,
+ plotBorderWidth: null,
+ plotShadow: !1,
+ type: "pie"
+ },
+ colorAxis: {},
+ title: {
+ text: "Browser market shares in January, 2018"
+ },
+ tooltip: {
+ pointFormat: "{series.name}: {point.percentage:.1f}%"
+ },
+ plotOptions: {
+ pie: {
+ allowPointSelect: !0,
+ cursor: "pointer",
+ dataLabels: {
+ enabled: !0,
+ format: "{point.name}: {point.percentage:.1f} %"
+ }
+ }
+ },
+ series: [{
+ name: "Brands",
+ colorByPoint: !0,
+ data: [{
+ name: "Chrome",
+ y: 61.41,
+ sliced: !0,
+ selected: !0,
+ color: "#4788ff"
+ }, {
+ name: "Internet Explorer",
+ y: 11.84,
+ color: "#ff4b4b"
+ }, {
+ name: "Firefox",
+ y: 10.85,
+ color: "#65f9b3"
+ }, {
+ name: "Edge",
+ y: 4.67,
+ color: "#6ce6f4"
+ }, {
+ name: "Other",
+ y: 2.61
+ }]
+ }]
+ }), jQuery("#high-scatterplot-chart").length && Highcharts.chart("high-scatterplot-chart", {
+ chart: {
+ type: "scatter",
+ zoomType: "xy"
+ },
+ accessibility: {
+ description: "A scatter plot compares the height and weight of 507 individuals by gender. Height in centimeters is plotted on the X-axis and weight in kilograms is plotted on the Y-axis. The chart is interactive, and each data point can be hovered over to expose the height and weight data for each individual. The scatter plot is fairly evenly divided by gender with females dominating the left-hand side of the chart and males dominating the right-hand side. The height data for females ranges from 147.2 to 182.9 centimeters with the greatest concentration between 160 and 165 centimeters. The weight data for females ranges from 42 to 105.2 kilograms with the greatest concentration at around 60 kilograms. The height data for males ranges from 157.2 to 198.1 centimeters with the greatest concentration between 175 and 180 centimeters. The weight data for males ranges from 53.9 to 116.4 kilograms with the greatest concentration at around 80 kilograms."
+ },
+ title: {
+ text: "Height Versus Weight of 507 Individuals by Gender"
+ },
+ subtitle: {
+ text: "Source: Heinz 2003"
+ },
+ xAxis: {
+ title: {
+ enabled: !0,
+ text: "Height (cm)"
+ },
+ startOnTick: !0,
+ endOnTick: !0,
+ showLastLabel: !0
+ },
+ yAxis: {
+ title: {
+ text: "Weight (kg)"
+ }
+ },
+ legend: {
+ layout: "vertical",
+ align: "left",
+ verticalAlign: "top",
+ x: 100,
+ y: 70,
+ floating: !0,
+ backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
+ borderWidth: 1
+ },
+ plotOptions: {
+ scatter: {
+ marker: {
+ radius: 5,
+ states: {
+ hover: {
+ enabled: !0,
+ lineColor: "rgb(100,100,100)"
+ }
+ }
+ },
+ states: {
+ hover: {
+ marker: {
+ enabled: !1
+ }
+ }
+ },
+ tooltip: {
+ headerFormat: "{series.name}
",
+ pointFormat: "{point.x} cm, {point.y} kg"
+ }
+ }
+ },
+ series: [{
+ name: "Female",
+ color: "rgba(223, 83, 83, .5)",
+ data: [
+ [161.2, 51.6],
+ [167.5, 59],
+ [159.5, 49.2],
+ [157, 63],
+ [155.8, 53.6],
+ [170, 59],
+ [159.1, 47.6],
+ [166, 69.8],
+ [176.2, 66.8],
+ [160.2, 75.2],
+ [172.7, 62],
+ [155, 49.2],
+ [156.5, 67.2],
+ [164, 53.8],
+ [160.9, 54.4]
+ ],
+ color: "#4788ff"
+ }, {
+ name: "Male",
+ color: "rgba(119, 152, 191, .5)",
+ data: [
+ [174, 65.6],
+ [175.3, 71.8],
+ [193.5, 80.7],
+ [186.5, 72.6],
+ [187.2, 78.8],
+ [181.5, 74.8],
+ [184, 86.4],
+ [184.5, 78.4],
+ [175, 62],
+ [184, 81.6],
+ [180.1, 93],
+ [175.5, 80.9],
+ [180.6, 72.7],
+ [184.4, 68],
+ [175.5, 70.9],
+ [180.3, 83.2],
+ [180.3, 83.2]
+ ],
+ color: "#ff4b4b"
+ }]
+ }), jQuery("#high-linendcolumn-chart").length && Highcharts.chart("high-linendcolumn-chart", {
+ chart: {
+ zoomType: "xy"
+ },
+ title: {
+ text: "Average Monthly Temperature and Rainfall in Tokyo"
+ },
+ subtitle: {
+ text: "Source: WorldClimate.com"
+ },
+ xAxis: [{
+ categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+ crosshair: !0
+ }],
+ yAxis: [{
+ labels: {
+ format: "{value}°C",
+ style: {
+ color: Highcharts.getOptions().colors[1]
+ }
+ },
+ title: {
+ text: "Temperature",
+ style: {
+ color: Highcharts.getOptions().colors[1]
+ }
+ }
+ }, {
+ title: {
+ text: "Rainfall",
+ style: {
+ color: Highcharts.getOptions().colors[0]
+ }
+ },
+ labels: {
+ format: "{value} mm",
+ style: {
+ color: Highcharts.getOptions().colors[0]
+ }
+ },
+ opposite: !0
+ }],
+ tooltip: {
+ shared: !0
+ },
+ legend: {
+ layout: "vertical",
+ align: "left",
+ x: 120,
+ verticalAlign: "top",
+ y: 100,
+ floating: !0,
+ backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || "rgba(255,255,255,0.25)"
+ },
+ series: [{
+ name: "Rainfall",
+ type: "column",
+ yAxis: 1,
+ data: [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
+ color: "#4788ff",
+ tooltip: {
+ valueSuffix: " mm"
+ }
+ }, {
+ name: "Temperature",
+ type: "spline",
+ data: [7, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
+ color: "#ff4b4b",
+ tooltip: {
+ valueSuffix: "°C"
+ }
+ }]
+ }), jQuery("#high-dynamic-chart").length && Highcharts.chart("high-dynamic-chart", {
+ chart: {
+ type: "spline",
+ animation: Highcharts.svg,
+ marginRight: 10,
+ events: {
+ load: function() {
+ var e = this.series[0];
+ setInterval(function() {
+ var t = (new Date).getTime(),
+ a = Math.random();
+ e.addPoint([t, a], !0, !0)
+ }, 1e3)
+ }
+ }
+ },
+ time: {
+ useUTC: !1
+ },
+ title: {
+ text: "Live random data"
+ },
+ accessibility: {
+ announceNewData: {
+ enabled: !0,
+ minAnnounceInterval: 15e3,
+ announcementFormatter: function(e, t, a) {
+ return !!a && "New point added. Value: " + a.y
+ }
+ }
+ },
+ xAxis: {
+ type: "datetime",
+ tickPixelInterval: 150
+ },
+ yAxis: {
+ title: {
+ text: "Value"
+ },
+ plotLines: [{
+ value: 0,
+ width: 1,
+ color: "#808080"
+ }]
+ },
+ tooltip: {
+ headerFormat: "{series.name}
",
+ pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}
{point.y:.2f}"
+ },
+ legend: {
+ enabled: !1
+ },
+ exporting: {
+ enabled: !1
+ },
+ series: [{
+ name: "Random data",
+ color: "#4788ff",
+ data: function() {
+ var e, t = [],
+ a = (new Date).getTime();
+ for (e = -19; e <= 0; e += 1) t.push({
+ x: a + 1e3 * e,
+ y: Math.random()
+ });
+ return t
+ }()
+ }]
+ }), jQuery("#high-3d-chart").length) {
+ var chart = new Highcharts.Chart({
+ chart: {
+ renderTo: "high-3d-chart",
+ type: "column",
+ options3d: {
+ enabled: !0,
+ alpha: 15,
+ beta: 15,
+ depth: 50,
+ viewDistance: 25
+ }
+ },
+ title: {
+ text: "Chart rotation demo"
+ },
+ subtitle: {
+ text: "Test options by dragging the sliders below"
+ },
+ plotOptions: {
+ column: {
+ depth: 25
+ }
+ },
+ series: [{
+ data: [29.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
+ color: "#4788ff"
+ }]
+ });
+
+ function showValues() {
+ $("#alpha-value").html(chart.options.chart.options3d.alpha), $("#beta-value").html(chart.options.chart.options3d.beta), $("#depth-value").html(chart.options.chart.options3d.depth)
+ }
+ $("#sliders input").on("input change", function() {
+ chart.options.chart.options3d[this.id] = parseFloat(this.value), showValues(), chart.redraw(!1)
+ }), showValues()
+}
+if (jQuery("#high-gauges-chart").length && Highcharts.chart("high-gauges-chart", {
+ chart: {
+ type: "gauge",
+ plotBackgroundColor: null,
+ plotBackgroundImage: null,
+ plotBorderWidth: 0,
+ plotShadow: !1
+ },
+ title: {
+ text: "Speedometer"
+ },
+ pane: {
+ startAngle: -150,
+ endAngle: 150,
+ background: [{
+ backgroundColor: {
+ linearGradient: {
+ x1: 0,
+ y1: 0,
+ x2: 0,
+ y2: 1
+ },
+ stops: [
+ [0, "#FFF"],
+ [1, "#333"]
+ ]
+ },
+ borderWidth: 0,
+ outerRadius: "109%"
+ }, {
+ backgroundColor: {
+ linearGradient: {
+ x1: 0,
+ y1: 0,
+ x2: 0,
+ y2: 1
+ },
+ stops: [
+ [0, "#333"],
+ [1, "#FFF"]
+ ]
+ },
+ borderWidth: 1,
+ outerRadius: "107%"
+ }, {}, {
+ backgroundColor: "#DDD",
+ borderWidth: 0,
+ outerRadius: "105%",
+ innerRadius: "103%"
+ }]
+ },
+ yAxis: {
+ min: 0,
+ max: 200,
+ minorTickInterval: "auto",
+ minorTickWidth: 1,
+ minorTickLength: 10,
+ minorTickPosition: "inside",
+ minorTickColor: "#666",
+ tickPixelInterval: 30,
+ tickWidth: 2,
+ tickPosition: "inside",
+ tickLength: 10,
+ tickColor: "#666",
+ labels: {
+ step: 2,
+ rotation: "auto"
+ },
+ title: {
+ text: "km/h"
+ },
+ plotBands: [{
+ from: 0,
+ to: 120,
+ color: "#55BF3B"
+ }, {
+ from: 120,
+ to: 160,
+ color: "#DDDF0D"
+ }, {
+ from: 160,
+ to: 200,
+ color: "#DF5353"
+ }]
+ },
+ series: [{
+ name: "Speed",
+ data: [80],
+ tooltip: {
+ valueSuffix: " km/h"
+ }
+ }]
+ }, function(e) {
+ e.renderer.forExport || setInterval(function() {
+ var t, a = e.series[0].points[0],
+ n = Math.round(20 * (Math.random() - .5));
+ ((t = a.y + n) < 0 || t > 200) && (t = a.y - n), a.update(t)
+ }, 3e3)
+ }), jQuery("#high-barwithnagative-chart").length) {
+ var categories = ["0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84", "85-89", "90-94", "95-99", "100 + "];
+ Highcharts.chart("high-barwithnagative-chart", {
+ chart: {
+ type: "bar"
+ },
+ title: {
+ text: "Population pyramid for Germany, 2018"
+ },
+ subtitle: {
+ text: 'Source: Population Pyramids of the World from 1950 to 2100'
+ },
+ accessibility: {
+ point: {
+ descriptionFormatter: function(e) {
+ return e.index + 1 + ", Age " + e.category + ", " + Math.abs(e.y) + "%. " + e.series.name + "."
+ }
+ }
+ },
+ xAxis: [{
+ categories: categories,
+ reversed: !1,
+ labels: {
+ step: 1
+ },
+ accessibility: {
+ description: "Age (male)"
+ }
+ }, {
+ opposite: !0,
+ reversed: !1,
+ categories: categories,
+ linkedTo: 0,
+ labels: {
+ step: 1
+ },
+ accessibility: {
+ description: "Age (female)"
+ }
+ }],
+ yAxis: {
+ title: {
+ text: null
+ },
+ labels: {
+ formatter: function() {
+ return Math.abs(this.value) + "%"
+ }
+ },
+ accessibility: {
+ description: "Percentage population",
+ rangeDescription: "Range: 0 to 5%"
+ }
+ },
+ plotOptions: {
+ series: {
+ stacking: "normal"
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ return "" + this.series.name + ", age " + this.point.category + "
Population: " + Highcharts.numberFormat(Math.abs(this.point.y), 1) + "%"
+ }
+ },
+ series: [{
+ name: "Male",
+ data: [-2.2, -2.1, -2.2, -2.4, -2.7, -3, -3.3, -3.2, -2.9, -3.5, -4.4, -4.1, -0],
+ color: "#4788ff"
+ }, {
+ name: "Female",
+ data: [2.1, 2, 2.1, 2.3, 2.6, 2.9, 3.2, 3.1, 2.9, 3.4, 0],
+ color: "#ff4b4b"
+ }]
+ })
+}
+
+/*--------------Widget Chart 1----------------*/
+
+var options = {
+ chart: {
+ height: 80,
+ type: 'area',
+ sparkline: {
+ enabled: true
+ },
+ group: 'sparklines',
+
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ width: 3,
+ curve: 'smooth'
+ },
+ fill: {
+ type: 'gradient',
+ gradient: {
+ shadeIntensity: 1,
+ opacityFrom: 0.5,
+ opacityTo: 0,
+ }
+ },
+
+ series: [{
+ name: 'series1',
+ data: [60, 15, 50, 30, 70]
+ }, ],
+ colors: ['#50b5ff'],
+
+ xaxis: {
+ type: 'datetime',
+ categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
+ },
+ tooltip: {
+ x: {
+ format: 'dd/MM/yy HH:mm'
+ },
+ }
+};
+
+if(jQuery('#chart-1').length){
+ var chart = new ApexCharts(
+ document.querySelector("#chart-1"),
+ options
+ );
+ chart.render();
+}
+
+
+/*--------------Widget Chart 2----------------*/
+var options = {
+ chart: {
+ height: 80,
+ type: 'area',
+ sparkline: {
+ enabled: true
+ },
+ group: 'sparklines',
+
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ width: 3,
+ curve: 'smooth'
+ },
+ fill: {
+ type: 'gradient',
+ gradient: {
+ shadeIntensity: 1,
+ opacityFrom: 0.5,
+ opacityTo: 0,
+ }
+ },
+ series: [{
+ name: 'series1',
+ data: [70, 40, 60, 30, 60]
+ }, ],
+ colors: ['#fd7e14'],
+
+ xaxis: {
+ type: 'datetime',
+ categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
+ },
+ tooltip: {
+ x: {
+ format: 'dd/MM/yy HH:mm'
+ },
+ }
+};
+
+if(jQuery('#chart-2').length){
+ var chart = new ApexCharts(
+ document.querySelector("#chart-2"),
+ options
+ );
+
+ chart.render();
+}
+
+/*--------------Widget Chart 3----------------*/
+var options = {
+ chart: {
+ height: 80,
+ type: 'area',
+ sparkline: {
+ enabled: true
+ },
+ group: 'sparklines',
+
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ width: 3,
+ curve: 'smooth'
+ },
+ fill: {
+ type: 'gradient',
+ gradient: {
+ shadeIntensity: 1,
+ opacityFrom: 0.5,
+ opacityTo: 0,
+ }
+ },
+ series: [{
+ name: 'series1',
+ data: [60, 40, 60, 40, 70]
+ }, ],
+ colors: ['#49f0d3'],
+
+ xaxis: {
+ type: 'datetime',
+ categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
+ },
+ tooltip: {
+ x: {
+ format: 'dd/MM/yy HH:mm'
+ },
+ }
+};
+if(jQuery('#chart-3').length){
+ var chart = new ApexCharts(
+ document.querySelector("#chart-3"),
+ options
+ );
+ chart.render();
+}
+
+/*--------------Widget Chart 4----------------*/
+var options = {
+ chart: {
+ height: 80,
+ type: 'area',
+ sparkline: {
+ enabled: true
+ },
+ group: 'sparklines',
+
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ width: 3,
+ curve: 'smooth'
+ },
+ fill: {
+ type: 'gradient',
+ gradient: {
+ shadeIntensity: 1,
+ opacityFrom: 0.5,
+ opacityTo: 0,
+ }
+ },
+ series: [{
+ name: 'series1',
+ data: [75, 30, 60, 35, 60]
+ }, ],
+ colors: ['#ff9b8a'],
+
+ xaxis: {
+ type: 'datetime',
+ categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"],
+ },
+ tooltip: {
+ x: {
+ format: 'dd/MM/yy HH:mm'
+ },
+ }
+};
+
+if(jQuery('#chart-4').length){
+ var chart = new ApexCharts(
+ document.querySelector("#chart-4"),
+ options
+ );
+
+ chart.render();
+}
+
+/*--------------Widget Box----------------*/
+
+if(jQuery('#iq-chart-box1').length){
+ var options = {
+ series: [{
+ name: "Total sales",
+ data: [10, 10, 35, 10]
+ }],
+ colors: ["#50b5ff"],
+ chart: {
+ height: 50,
+ width: 100,
+ type: 'line',
+ sparkline: {
+ enabled: true,
+ },
+ zoom: {
+ enabled: false
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'straight'
+ },
+ title: {
+ text: '',
+ align: 'left'
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0.5
+ },
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar'],
+ }
+ };
+
+ var chart = new ApexCharts(document.querySelector("#iq-chart-box1"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if(jQuery('#iq-chart-box2').length){
+ var options = {
+ series: [{
+ name: "Sale Today",
+ data: [10, 10, 35, 10]
+ }],
+ colors: ["#ff9b8a"],
+ chart: {
+ height: 50,
+ width: 100,
+ type: 'line',
+ sparkline: {
+ enabled: true,
+ },
+ zoom: {
+ enabled: false
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'straight'
+ },
+ title: {
+ text: '',
+ align: 'left'
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0.5
+ },
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar'],
+ }
+ };
+
+ var chart = new ApexCharts(document.querySelector("#iq-chart-box2"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if(jQuery('#iq-chart-box3').length){
+ var options = {
+ series: [{
+ name: "Total Classon",
+ data: [10, 10, 35, 10]
+ }],
+ colors: ["#49f0d3"],
+ chart: {
+ height: 50,
+ width: 100,
+ type: 'line',
+ sparkline: {
+ enabled: true,
+ },
+ zoom: {
+ enabled: false
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'straight'
+ },
+ title: {
+ text: '',
+ align: 'left'
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0.5
+ },
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar'],
+ }
+ };
+
+ var chart = new ApexCharts(document.querySelector("#iq-chart-box3"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if(jQuery('#iq-chart-box4').length){
+ var options = {
+ series: [{
+ name: "Total Profit",
+ data: [10, 10, 35, 10]
+ }],
+ colors: ["#fd7e14"],
+ chart: {
+ height: 50,
+ width: 100,
+ type: 'line',
+ sparkline: {
+ enabled: true,
+ },
+ zoom: {
+ enabled: false
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'straight'
+ },
+ title: {
+ text: '',
+ align: 'left'
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0.5
+ },
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar'],
+ }
+ };
+
+ var chart = new ApexCharts(document.querySelector("#iq-chart-box4"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+/*--------------Widget End----------------*/
+
+/*-------------- Widget Chart ----------------*/
+if (jQuery("#ethernet-chart-01").length) {
+ var options = {
+ series: [{
+ name: "Desktops",
+ data: [5, 30, 6, 20, 5, 18, 10]
+ }],
+ colors: ['#4788ff'],
+ chart: {
+ height: 60,
+ width: 100,
+ type: 'line',
+ zoom: {
+ enabled: false
+ },
+ sparkline: {
+ enabled: true,
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'smooth',
+ width: 3
+ },
+ title: {
+ text: '',
+ align: 'left'
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0.5
+ },
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+ }
+ };
+
+ var chart = new ApexCharts(document.querySelector("#ethernet-chart-01"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#ethernet-chart-02").length) {
+ var options = {
+ series: [{
+ name: "Desktops",
+ data: [5, 20, 4, 18, 3, 15, 10]
+ }],
+ colors: ['#1ee2ac'],
+ chart: {
+ height: 60,
+ width: 100,
+ type: 'line',
+ zoom: {
+ enabled: false
+ },
+ sparkline: {
+ enabled: true,
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'smooth',
+ width: 3
+ },
+ title: {
+ text: '',
+ align: 'left'
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0.5
+ },
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+ }
+ };
+
+ var chart = new ApexCharts(document.querySelector("#ethernet-chart-02"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#ethernet-chart-03").length) {
+ var options = {
+ series: [{
+ name: "Desktops",
+ data: [5, 20, 6, 18, 5, 15, 4]
+ }],
+ colors: ['#ff4b4b'],
+ chart: {
+ height: 60,
+ width: 100,
+ type: 'line',
+ zoom: {
+ enabled: false
+ },
+ sparkline: {
+ enabled: true,
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'smooth',
+ width: 3
+ },
+ title: {
+ text: '',
+ align: 'left'
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0.5
+ },
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+ }
+ };
+
+ var chart = new ApexCharts(document.querySelector("#ethernet-chart-03"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+if (jQuery("#ethernet-chart-04").length) {
+ var options = {
+ series: [{
+ name: "Desktops",
+ data: [5, 15, 3, 20, 5, 18, 13]
+ }],
+ colors: ['#4788ff'],
+ chart: {
+ height: 60,
+ width: 100,
+ type: 'line',
+ zoom: {
+ enabled: false
+ },
+ sparkline: {
+ enabled: true,
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'smooth',
+ width: 3
+ },
+ title: {
+ text: '',
+ align: 'left'
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0.5
+ },
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+ }
+ };
+
+ var chart = new ApexCharts(document.querySelector("#ethernet-chart-04"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+}
+
+/*-------------- Widget Chart End ----------------*/
+
+/*--------------Widget Chart ----------------*/
+function getNewSeries(e, t) {
+ var a = e + TICKINTERVAL;
+ lastDate = a;
+ for (var n = 0; n < data.length - 10; n++) data[n].x = a - XAXISRANGE - TICKINTERVAL, data[n].y = 0;
+ data.push({
+ x: a,
+ y: Math.floor(Math.random() * (t.max - t.min + 1)) + t.min
+ })
+}
+if (jQuery("#chart-9").length) {
+ var chart9 = new ApexCharts(document.querySelector("#chart-9"), options);
+ chart9.render(), window.setInterval(function() {
+ getNewSeries(lastDate, {
+ min: 10,
+ max: 90
+ }), jQuery("#chart-9").length && chart9.updateSeries([{
+ data: data
+ }])
+ }, 1e3)
+}
+
+function generateData(e, t, a) {
+ for (var n = 0, o = []; n < t;) {
+ var r = Math.floor(750 * Math.random()) + 1,
+ i = Math.floor(Math.random() * (a.max - a.min + 1)) + a.min,
+ c = Math.floor(61 * Math.random()) + 15;
+ o.push([r, i, c]), 864e5, n++
+ }
+ return o
+}
+options = {
+ chart: {
+ height: 440,
+ type: "bubble",
+ stacked: !1,
+ toolbar: {
+ show: !1
+ },
+ animations: {
+ enabled: !0,
+ easing: "linear",
+ dynamicAnimation: {
+ speed: 1e3
+ }
+ },
+ sparkline: {
+ enabled: !0
+ },
+ group: "sparklines"
+ },
+ dataLabels: {
+ enabled: !1
+ },
+ series: [{
+ name: "Bubble1",
+ data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, {
+ min: 10,
+ max: 60
+ })
+ }, {
+ name: "Bubble2",
+ data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, {
+ min: 10,
+ max: 60
+ })
+ }, {
+ name: "Bubble3",
+ data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, {
+ min: 10,
+ max: 60
+ })
+ }, {
+ name: "Bubble4",
+ data: generateData(new Date("11 Feb 2017 GMT").getTime(), 10, {
+ min: 10,
+ max: 60
+ })
+ }],
+ fill: {
+ opacity: .8
+ },
+ title: {
+ show: !1
+ },
+ xaxis: {
+ tickAmount: 8,
+ type: "category",
+ labels: {
+ show: !1
+ }
+ },
+ yaxis: {
+ max: 70,
+ labels: {
+ show: !1
+ }
+ },
+ legend: {
+ show: !1
+ }
+};
+
+/*-------------- Widget Chart End ----------------*/
+/*--------index-----*/
+if (jQuery("#site-trafic-chart").length) {
+ var options = {
+ series: [{
+ name: "series1",
+ data: [0, 70, 30, 90, 80, 150]
+ }, {
+ name: 'series2',
+ data: [0, 20, 90, 70, 130, 110]
+ }],
+ colors: ['#fe721c','#4788ff'],
+ chart: {
+ height: 365,
+ type: 'line',
+ zoom: {
+ enabled: false
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'smooth'
+ },
+ title: {
+ text: 'Product Trends by Month',
+ align: 'left'
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0
+ },
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+ },
+ yaxis: {
+ title: {
+ text: ''
+ },
+ labels: {
+ offsetX: -20,
+ offsetY: 0
+ },
+ }
+ };
+
+ if(typeof ApexCharts !== typeof undefined){
+ var chart = new ApexCharts(document.querySelector("#site-trafic-chart"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+ }
+}
+
+/*---------------------------------------------------------------------
+ Editable Table
+-----------------------------------------------------------------------*/
+const $tableID = $('#table');
+ const $BTN = $('#export-btn');
+ const $EXPORT = $('#export');
+
+ const newTr = `
+
+ | Example |
+ Example |
+ Example |
+ Example |
+ Example |
+
+
+
+ |
+
+
+ |
+
`;
+
+ $('.table-add').on('click', 'i', () => {
+
+ const $clone = $tableID.find('tbody tr').last().clone(true).removeClass('hide table-line');
+
+ if ($tableID.find('tbody tr').length === 0) {
+
+ $('tbody').append(newTr);
+ }
+
+ $tableID.find('table').append($clone);
+ });
+
+ $tableID.on('click', '.table-remove', function () {
+
+ $(this).parents('tr').detach();
+ });
+
+ $tableID.on('click', '.table-up', function () {
+
+ const $row = $(this).parents('tr');
+
+ if ($row.index() === 1) {
+ return;
+ }
+
+ $row.prev().before($row.get(0));
+ });
+
+ $tableID.on('click', '.table-down', function () {
+
+ const $row = $(this).parents('tr');
+ $row.next().after($row.get(0));
+ });
+
+ // A few jQuery helpers for exporting only
+ jQuery.fn.pop = [].pop;
+ jQuery.fn.shift = [].shift;
+
+ $BTN.on('click', () => {
+
+ const $rows = $tableID.find('tr:not(:hidden)');
+ const headers = [];
+ const data = [];
+
+ // Get the headers (add special header logic here)
+ $($rows.shift()).find('th:not(:empty)').each(function () {
+
+ headers.push($(this).text().toLowerCase());
+ });
+
+ // Turn all existing rows into a loopable array
+ $rows.each(function () {
+ const $td = $(this).find('td');
+ const h = {};
+
+ // Use the headers from earlier to name our hash keys
+ headers.forEach((header, i) => {
+
+ h[header] = $td.eq(i).text();
+ });
+
+ data.push(h);
+ });
+
+ // Output the result
+ $EXPORT.text(JSON.stringify(data));
+ });
+
+/*---------------------------------------------------------------------
+ Form Wizard - 1
+-----------------------------------------------------------------------*/
+
+$(document).ready(function(){
+
+ var current_fs, next_fs, previous_fs; //fieldsets
+ var opacity;
+ var current = 1;
+ var steps = $("fieldset").length;
+
+ setProgressBar(current);
+
+ $(".next").click(function(){
+
+ current_fs = $(this).parent();
+ next_fs = $(this).parent().next();
+
+ //Add Class Active
+ $("#top-tab-list li").eq($("fieldset").index(next_fs)).addClass("active");
+ $("#top-tab-list li").eq($("fieldset").index(current_fs)).addClass("done");
+
+ //show the next fieldset
+ next_fs.show();
+ //hide the current fieldset with style
+ current_fs.animate({opacity: 0}, {
+ step: function(now) {
+ // for making fielset appear animation
+ opacity = 1 - now;
+
+ current_fs.css({
+ 'display': 'none',
+ 'position': 'relative',
+
+ });
+
+ next_fs.css({'opacity': opacity});
+ },
+ duration: 500
+ });
+ setProgressBar(++current);
+ });
+
+ $(".previous").click(function(){
+
+ current_fs = $(this).parent();
+ previous_fs = $(this).parent().prev();
+
+ //Remove class active
+ $("#top-tab-list li").eq($("fieldset").index(current_fs)).removeClass("active");
+ $("#top-tab-list li").eq($("fieldset").index(previous_fs)).removeClass("done");
+
+ //show the previous fieldset
+ previous_fs.show();
+
+ //hide the current fieldset with style
+ current_fs.animate({opacity: 0}, {
+ step: function(now) {
+ // for making fielset appear animation
+ opacity = 1 - now;
+
+ current_fs.css({
+ 'display': 'none',
+ 'position': 'relative'
+ });
+ previous_fs.css({'opacity': opacity});
+ },
+ duration: 500
+ });
+ setProgressBar(--current);
+ });
+
+ function setProgressBar(curStep){
+ var percent = parseFloat(100 / steps) * curStep;
+ percent = percent.toFixed();
+ $(".progress-bar")
+ .css("width",percent+"%")
+ }
+
+ $(".submit").click(function(){
+ return false;
+ })
+
+});
+
+ /*---------------------------------------------------------------------
+ validate form wizard
+-----------------------------------------------------------------------*/
+
+$(document).ready(function () {
+
+ var navListItems = $('div.setup-panel div a'),
+ allWells = $('.setup-content'),
+ allNextBtn = $('.nextBtn');
+
+ allWells.hide();
+
+ navListItems.click(function (e) {
+ e.preventDefault();
+ var $target = $($(this).attr('href')),
+ $item = $(this);
+
+ if (!$item.hasClass('disabled')) {
+ navListItems.addClass('active');
+ $item.parent().addClass('active');
+ allWells.hide();
+ $target.show();
+ $target.find('input:eq(0)').focus();
+ }
+ });
+
+ allNextBtn.click(function(){
+ var curStep = $(this).closest(".setup-content"),
+ curStepBtn = curStep.attr("id"),
+ nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
+ curInputs = curStep.find("input[type='text'],input[type='email'],input[type='password'],input[type='url'],textarea"),
+ isValid = true;
+
+ $(".form-group").removeClass("has-error");
+ for(var i=0; i{point.percentage:.1f}%'
+ },
+ accessibility: {
+ point: {
+ valueSuffix: '%'
+ }
+ },
+ plotOptions: {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: false
+ },
+ showInLegend: true
+ }
+ },
+ colors: ["#fe721c", "#05bbc9", "#876cfe"],
+ series: [{
+ name: 'Brands',
+ colorByPoint: true,
+ data: [{
+ name: 'Desktop',
+ y: 30,
+ sliced: true,
+ selected: true
+ }, {
+ name: 'Mobile',
+ y: 40
+ },{
+ name: 'Tablet',
+ y: 30
+ }]
+ }]
+ });
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+ }
+ if (jQuery('#layout-2-chart-04').length) {
+ am4core.ready(function () {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ var continents = {
+ "AF": 0,
+ "AN": 1,
+ "AS": 2,
+ "EU": 3,
+ "NA": 4,
+ "OC": 5,
+ "SA": 6
+ }
+
+ // Create map instance
+ var chart = am4core.create("layout-2-chart-04", am4maps.MapChart);
+ chart.projection = new am4maps.projections.Miller();
+
+ // Create map polygon series for world map
+ var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
+ worldSeries.useGeodata = true;
+ worldSeries.geodata = am4geodata_worldLow;
+ worldSeries.exclude = ["AQ"];
+
+ var worldPolygon = worldSeries.mapPolygons.template;
+ worldPolygon.tooltipText = "{name}";
+ worldPolygon.nonScalingStroke = true;
+ worldPolygon.strokeOpacity = 0.5;
+ worldPolygon.fill = am4core.color("#eee");
+ worldPolygon.propertyFields.fill = "color";
+
+ var hs = worldPolygon.states.create("hover");
+ hs.properties.fill = chart.colors.getIndex(9);
+
+
+ // Create country specific series (but hide it for now)
+ var countrySeries = chart.series.push(new am4maps.MapPolygonSeries());
+ countrySeries.useGeodata = true;
+ countrySeries.hide();
+ countrySeries.geodataSource.events.on("done", function (ev) {
+ worldSeries.hide();
+ countrySeries.show();
+ });
+
+ var countryPolygon = countrySeries.mapPolygons.template;
+ countryPolygon.tooltipText = "{name}";
+ countryPolygon.nonScalingStroke = true;
+ countryPolygon.strokeOpacity = 0.5;
+ countryPolygon.fill = am4core.color("#eee");
+
+ var hs = countryPolygon.states.create("hover");
+ hs.properties.fill = chart.colors.getIndex(9);
+
+ // Set up click events
+ worldPolygon.events.on("hit", function (ev) {
+ ev.target.series.chart.zoomToMapObject(ev.target);
+ var map = ev.target.dataItem.dataContext.map;
+ if (map) {
+ ev.target.isHover = false;
+ countrySeries.geodataSource.url = "https://www.amcharts.com/lib/4/geodata/json/" + map + ".json";
+ countrySeries.geodataSource.load();
+ }
+ });
+
+ // Set up data for countries
+ var data = [];
+ for (var id in am4geodata_data_countries2) {
+ if (am4geodata_data_countries2.hasOwnProperty(id)) {
+ var country = am4geodata_data_countries2[id];
+ if (country.maps.length) {
+ data.push({
+ id: id,
+ color: chart.colors.getIndex(continents[country.continent_code]),
+ map: country.maps[0]
+ });
+ }
+ }
+ }
+ worldSeries.data = data;
+
+ // Zoom control
+ chart.zoomControl = new am4maps.ZoomControl();
+
+ var homeButton = new am4core.Button();
+ homeButton.events.on("hit", function () {
+ worldSeries.show();
+ countrySeries.hide();
+ chart.goHome();
+ });
+
+ homeButton.icon = new am4core.Sprite();
+ homeButton.padding(7, 5, 7, 5);
+ homeButton.width = 30;
+ homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
+ homeButton.marginBottom = 10;
+ homeButton.parent = chart.zoomControl;
+ homeButton.insertBefore(chart.zoomControl.plusButton);
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ });
+ }
+ //layout-3
+
+ if (jQuery("#layout-3-chart-01").length) {
+ am4core.ready(function () {
+
+ // Themes begin
+ am4core.useTheme(am4themes_animated);
+ // Themes end
+
+ // Create map instance
+ var chart = am4core.create("layout-3-chart-01", am4maps.MapChart);
+ // Set map definition
+ chart.geodata = am4geodata_worldLow;
+
+ // Set projection
+ chart.projection = new am4maps.projections.Miller();
+
+ // Create map polygon series
+ var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
+
+ // Exclude Antartica
+ polygonSeries.exclude = ["AQ"];
+
+ // Make map load polygon (like country names) data from GeoJSON
+ polygonSeries.useGeodata = true;
+
+ // Configure series
+ var polygonTemplate = polygonSeries.mapPolygons.template;
+ polygonTemplate.fill = '#585858';
+
+ polygonTemplate.tooltipText = "{name}";
+ polygonTemplate.polygon.fillOpacity = 0.6;
+
+
+ // Create hover state and set alternative fill color
+ var hs = polygonTemplate.states.create("hover");
+ hs.properties.fill = chart.colors.getIndex(0);
+
+ // Add image series
+ var imageSeries = chart.series.push(new am4maps.MapImageSeries());
+ imageSeries.mapImages.template.propertyFields.longitude = "longitude";
+ imageSeries.mapImages.template.propertyFields.latitude = "latitude";
+ imageSeries.mapImages.template.tooltipText = "{title}";
+ imageSeries.mapImages.template.propertyFields.url = "url";
+
+ var circle = imageSeries.mapImages.template.createChild(am4core.Circle);
+ circle.radius = 3;
+ circle.propertyFields.fill = "color";
+
+ var circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
+ circle2.radius = 3;
+ circle2.propertyFields.fill = "color";
+
+
+ circle2.events.on("inited", function (event) {
+ animateBullet(event.target);
+ })
+
+
+ function animateBullet(circle) {
+ var animation = circle.animate([{ property: "scale", from: 1, to: 5 }, { property: "opacity", from: 1, to: 0 }], 1000, am4core.ease.circleOut);
+ animation.events.on("animationended", function (event) {
+ animateBullet(event.target.object);
+ })
+ }
+
+ var colorSet = new am4core.ColorSet();
+
+ imageSeries.data = [{
+ "title": "Brussels",
+ "latitude": 50.8371,
+ "longitude": 4.3676,
+ "color": colorSet.next()
+ }, {
+ "title": "Copenhagen",
+ "latitude": 55.6763,
+ "longitude": 12.5681,
+ "color": colorSet.next()
+ }, {
+ "title": "Paris",
+ "latitude": 48.8567,
+ "longitude": 2.3510,
+ "color": colorSet.next()
+ }, {
+ "title": "Reykjavik",
+ "latitude": 64.1353,
+ "longitude": -21.8952,
+ "color": colorSet.next()
+ }, {
+ "title": "Moscow",
+ "latitude": 55.7558,
+ "longitude": 37.6176,
+ "color": colorSet.next()
+ }, {
+ "title": "Madrid",
+ "latitude": 40.4167,
+ "longitude": -3.7033,
+ "color": colorSet.next()
+ }, {
+ "title": "London",
+ "latitude": 51.5002,
+ "longitude": -0.1262,
+ "url": "http://www.google.co.uk",
+ "color": colorSet.next()
+ }, {
+ "title": "Peking",
+ "latitude": 39.9056,
+ "longitude": 116.3958,
+ "color": colorSet.next()
+ }, {
+ "title": "New Delhi",
+ "latitude": 28.6353,
+ "longitude": 77.2250,
+ "color": colorSet.next()
+ }, {
+ "title": "Tokyo",
+ "latitude": 35.6785,
+ "longitude": 139.6823,
+ "url": "http://www.google.co.jp",
+ "color": colorSet.next()
+ }, {
+ "title": "Ankara",
+ "latitude": 39.9439,
+ "longitude": 32.8560,
+ "color": colorSet.next()
+ }, {
+ "title": "Buenos Aires",
+ "latitude": -34.6118,
+ "longitude": -58.4173,
+ "color": colorSet.next()
+ }, {
+ "title": "Brasilia",
+ "latitude": -15.7801,
+ "longitude": -47.9292,
+ "color": colorSet.next()
+ }, {
+ "title": "Ottawa",
+ "latitude": 45.4235,
+ "longitude": -75.6979,
+ "color": colorSet.next()
+ }, {
+ "title": "Washington",
+ "latitude": 38.8921,
+ "longitude": -77.0241,
+ "color": colorSet.next()
+ }, {
+ "title": "Kinshasa",
+ "latitude": -4.3369,
+ "longitude": 15.3271,
+ "color": colorSet.next()
+ }, {
+ "title": "Cairo",
+ "latitude": 30.0571,
+ "longitude": 31.2272,
+ "color": colorSet.next()
+ }, {
+ "title": "Pretoria",
+ "latitude": -25.7463,
+ "longitude": 28.1876,
+ "color": colorSet.next()
+ }];
+
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ amChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ amChartUpdate(chart, e.detail)
+ })
+
+ });
+ }
+
+ if (jQuery('#layout-3-chart-02').length) {
+ Highcharts.chart('layout-3-chart-02', {
+ chart: {
+ plotBackgroundColor: null,
+ plotBorderWidth: null,
+ plotShadow: false,
+ height: 300,
+ type: 'pie'
+ },
+ title: {
+ text: ''
+ },
+ tooltip: {
+ pointFormat: '{series.name}: {point.percentage:.1f}%'
+ },
+ accessibility: {
+ point: {
+ valueSuffix: '%'
+ }
+ },
+ plotOptions: {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: false
+ },
+ showInLegend: true
+ }
+ },
+ colors: ["#876cfe", "#05bbc9"],
+ series: [{
+ name: 'Brands',
+ colorByPoint: true,
+ data: [{
+ name: 'Man : 3,272978',
+ y: 80,
+ sliced: true,
+ selected: true
+ }, {
+ name: 'Woman : 83,272978',
+ y: 30
+ }]
+ }]
+ });
+ }
+ if (jQuery("#layout-3-chart-03").length) {
+ const options = {
+ series: [{
+ name: 'Frauds',
+ data: [53, 55, 45, 40, 40, 28, 35, 25, 2]
+ }, {
+ name: 'Paid Clicks',
+ data: [63, 62, 52, 72, 55, 80, 70, 50, 60]
+ }, {
+ name: 'Total Clicks',
+ data: [150, 135, 144, 115, 120, 114, 133, 124, 100]
+ }],
+ colors: ['#05bbc9', '#ffca44', '#876cfe'],
+ labels: ['20 Feb', '21 Feb', '22 Feb', '23 Feb', '24 Feb', '25 Feb', '25 Feb', '26 Feb', '27 Feb', '28 Feb' ],
+ chart: {
+ type: 'bar',
+ height: 330,
+ stacked: true,
+ zoom: {
+ enabled: true
+ }
+ },
+ responsive: [{
+ breakpoint: 480,
+ options: {
+ legend: {
+ position: 'bottom',
+ offsetX: -10,
+ offsetY: 0
+ }
+ }
+ }],
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '12%',
+ endingShape: 'rounded'
+ },
+ },
+ xaxis: {
+ show: true
+
+ },
+ yaxis: {
+ show: true,
+ labels: {
+ minWidth: 20,
+ maxWidth: 20
+ }
+ },
+ legend: {
+ position: 'bottom',
+ offsetX: 0,
+ offsetY: -10
+
+ },
+ fill: {
+ opacity: 1
+ },
+ dataLabels: {
+ enabled: false
+ }
+
+ };
+ const chart = new ApexCharts(document.querySelector("#layout-3-chart-03"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+ }
+
+ if (jQuery("#layout-3-chart-04").length) {
+ var options = {
+ series: [86, 40, 53, 63],
+ chart: {
+ height: 350,
+ type: 'radialBar',
+ },
+ plotOptions: {
+ radialBar: {
+ dataLabels: {
+ name: {
+ fontSize: '22px',
+ },
+ value: {
+ fontSize: '16px',
+ },
+ total: {
+ show: true,
+ label: 'Total',
+ formatter: function (w) {
+ // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
+ return 249
+ }
+ }
+ }
+ }
+ },
+ colors: ['#876cfe', '#4788ff', '#ffca44', '#fe721c'],
+ labels: ['Picture view', 'Comments', 'Video plays', 'Impressions'],
+ };
+
+ var chart = new ApexCharts(document.querySelector("#layout-3-chart-04"), options);
+ chart.render();
+ const body = document.querySelector('body')
+ if (body.classList.contains('dark')) {
+ apexChartUpdate(chart, {
+ dark: true
+ })
+ }
+
+ document.addEventListener('ChangeColorMode', function (e) {
+ apexChartUpdate(chart, e.detail)
+ })
+
+ }
+})(jQuery);
+
+
diff --git a/static/js/countdown.js b/static/js/countdown.js
new file mode 100644
index 0000000..26f937d
--- /dev/null
+++ b/static/js/countdown.js
@@ -0,0 +1,46 @@
+function getTimeRemaining(endtime) {
+ const total = Date.parse(endtime) - Date.parse(new Date());
+ const seconds = Math.floor((total / 1000) % 60);
+ const minutes = Math.floor((total / 1000 / 60) % 60);
+ const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
+ const days = Math.floor(total / (1000 * 60 * 60 * 24));
+
+ return {
+ total,
+ days,
+ hours,
+ minutes,
+ seconds
+ };
+ }
+
+ function initializeClock(elem, endtime) {
+ const clock = document.querySelector(elem)
+ const daysSpan = clock.querySelector('[data-days]')
+ const hoursSpan = clock.querySelector('[data-hours]')
+ const minutesSpan = clock.querySelector('[data-minutes]')
+ const secondsSpan = clock.querySelector('[data-seconds]')
+
+ function updateClock() {
+ const t = getTimeRemaining(endtime)
+
+ daysSpan.innerHTML = t.days
+ hoursSpan.innerHTML = ('0' + t.hours).slice(-2)
+ minutesSpan.innerHTML = ('0' + t.minutes).slice(-2)
+ secondsSpan.innerHTML = ('0' + t.seconds).slice(-2)
+
+ if (t.total <= 0) {
+ clearInterval(timeinterval)
+ }
+ }
+
+ updateClock()
+ const timeinterval = setInterval(updateClock, 1000)
+ }
+
+ let time = document.querySelector('.countdown').getAttribute('data-date')
+ if (time == undefined) {
+ time = Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000
+ }
+ const deadline = new Date(time)
+ initializeClock('.countdown', deadline)
diff --git a/static/js/customizer.js b/static/js/customizer.js
new file mode 100644
index 0000000..1cce59f
--- /dev/null
+++ b/static/js/customizer.js
@@ -0,0 +1,51 @@
+(function (jQuery) {
+ "use strict";
+ // data-mode="click" for using event
+ // data-dark="false" for property
+ // icon class // la-sun // la-moon
+ const storageDark = localStorage.getItem('dark')
+ if($('body').hasClass('dark')){
+ changeMode('true');
+ } else {
+ changeMode('false');
+ }
+ if (storageDark !== 'null') {
+ changeMode(storageDark)
+ }
+ jQuery(document).on("change", '.change-mode input[type="checkbox"]' ,function (e) {
+ const dark = $(this).attr('data-active');
+ if (dark === 'true') {
+ $(this).attr('data-active','false')
+ } else {
+ $(this).attr('data-active','true')
+ }
+ changeMode(dark)
+ })
+ function changeMode (dark) {
+ const body = jQuery('body')
+ if (dark === 'true') {
+ // $('[data-mode="toggle"]').find('i.a-right').removeClass('ri-sun-line');
+ // $('[data-mode="toggle"]').find('i.a-left').addClass('ri-moon-clear-line');
+ $('#dark-mode').prop('checked', true).attr('data-active', 'false')
+ $('.darkmode-logo').removeClass('d-none')
+ $('.light-logo').addClass('d-none')
+ body.addClass('dark')
+ dark = true
+ } else {
+ // $('[data-mode="toggle"]').find('i.a-left').removeClass('ri-moon-clear-line');
+ // $('[data-mode="toggle"]').find('i.a-right').addClass('ri-sun-line');
+ $('#dark-mode').prop('checked', false).attr('data-active', 'true');
+ $('.light-logo').removeClass('d-none')
+ $('.darkmode-logo').addClass('d-none')
+ body.removeClass('dark')
+ dark = false
+ }
+ updateLocalStorage(dark)
+ const event = new CustomEvent("ChangeColorMode", {detail: {dark: dark} });
+ document.dispatchEvent(event);
+ }
+ function updateLocalStorage(dark) {
+ localStorage.setItem('dark', dark)
+ }
+
+})(jQuery)
\ No newline at end of file
diff --git a/static/js/flex-tree.min.js b/static/js/flex-tree.min.js
new file mode 100644
index 0000000..873af0a
--- /dev/null
+++ b/static/js/flex-tree.min.js
@@ -0,0 +1,2 @@
+/*! jQuery Flex Tree 1.2.0 2020-08-19 */
+!function(a){var b="flexTree",c={};a.fn[b]=function(b){b=a.extend(!0,{id:void 0,targetElement:a(this),type:void 0,debug:!1,name:"flex_tree",items:{},className:"flex-tree",buildTree:!0,collapsed:!1,collapsable:!0,addControlOnParent:!0,threeState:!0},c,b),!1===b.collapsable&&(b.collapsed=!1),!1===b.addControlOnParent&&(b.threeState=!1);var d;if(b.buildTree){d=a("").attr("class",b.className).attr("id",b.id);var e=function(b){b=a.extend(!0,{items:{},ul:d,collapsed:!1,collapsable:!0,addControlOnParent:!0,threeState:!0},b),a.each(b.items,function(c,d){if("object"==typeof d.childrens&&d.childrens.length){var f=a("");!b.addControlOnParent||"checkbox"!==b.type&&"radio"!==b.type||f.append(a("").attr("type",b.type).attr("name","radio"===b.type||!1===b.threeState?d.name||b.name:d.name).attr("name",d.name).attr("value",d.value).attr("class","node").attr("id",d.id).prop("checked",d.checked)),f.append(a(' ').addClass(b.collapsable?b.collapsed?"open":"closed":"").append(a("").append(d.label).attr("class","node")));var g=a("");b.ul.append(f),f.append(g),!0===b.collapsed&&g.hide(),e({items:d.childrens,name:b.name,ul:g,collapsed:b.collapsed,collapsable:b.collapsable,type:b.type,addControlOnParent:b.addControlOnParent,threeState:b.threeState})}else b.ul.append(a("").append(a("").append("undefined"!=typeof b.type?a("").attr("type",b.type).attr("name","checkbox"===b.type?d.name||b.name:b.name).attr("value",d.value).attr("class","leaf").attr("id",d.id).prop("checked",d.checked):void 0).append(d.label)))})};e(b),a(b.targetElement).append(d)}else d=b.targetElement,d.addClass(b.className);if(b.collapsable&&a("li span.node",d).on("click",function(b){a(this).toggleClass("closed").toggleClass("open").next().toggle(200)}),b.threeState&&"checkbox"===b.type){a('input[type="checkbox"].node',d).on("click",function(b){a(this).removeClass("indeterminate").prop("indeterminate",!1);var c=a(this);c.parent().find('ul input[type="checkbox"]').each(function(){a(this).prop("checked",c.prop("checked")).prop("indeterminate",!1).removeClass("indeterminate")})});var f=function(){var b=a(this).closest("ul").prevAll('input[type="checkbox"].node');if(b.length){a(this).prop("checked")||b.prop("checked",!1);var c=a(this).prop("checked"),d=a(this).prop("checked");a(this).closest("li").siblings("li").find("input:first").each(function(){a(this).prop("checked")&&!0!==a(this).prop("indeterminate")||(c=!1),(a(this).prop("checked")||!0===a(this).prop("indeterminate"))&&(d=!0)}),d||!0===a(this).prop("indeterminate")?b.addClass("indeterminate").prop("indeterminate",!0):b.removeClass("indeterminate").prop("indeterminate",!1),c&&b.prop("checked",!0).prop("indeterminate",!1).removeClass("indeterminate"),f.apply(b)}};a('input[type="checkbox"]',d).on("click",f),a('input[type="checkbox"].leaf',d).each(function(){f.apply(this)})}}}(jQuery);
\ No newline at end of file
diff --git a/static/js/table-treeview.js b/static/js/table-treeview.js
new file mode 100644
index 0000000..4581204
--- /dev/null
+++ b/static/js/table-treeview.js
@@ -0,0 +1,528 @@
+
+ $(function () {
+ var
+ $table = $('#tree-table-1'),
+ rows = $table.find('tr');
+
+ rows.each(function (index, row) {
+ var
+ $row = $(row),
+ level = $row.data('level'),
+ id = $row.data('id'),
+ $columnName = $row.find('td[data-column="name"]'),
+ children = $table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ var expander = $columnName.prepend('' +
+ '' +
+ '');
+
+ children.hide();
+
+ expander.on('click', function (e) {
+ var $target = $(e.target);
+ if ($target.hasClass('glyphicon-chevron-right')) {
+ $target
+ .removeClass('glyphicon-chevron-right')
+ .addClass('glyphicon-chevron-down');
+
+ children.show();
+ } else {
+ $target
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ reverseHide($table, $row);
+ }
+ });
+ }
+
+ $columnName.prepend('' +
+ '' +
+ '');
+ });
+
+ // Reverse hide all elements
+ reverseHide = function (table, element) {
+ var
+ $element = $(element),
+ id = $element.data('id'),
+ children = table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ children.each(function (i, e) {
+ reverseHide(table, e);
+ });
+
+ $element
+ .find('.glyphicon-chevron-down')
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ children.hide();
+ }
+ };
+});
+
+
+ // table 2
+ $(function () {
+ var
+ $table = $('#tree-table-2'),
+ rows = $table.find('tr');
+
+ rows.each(function (index, row) {
+ var
+ $row = $(row),
+ level = $row.data('level'),
+ id = $row.data('id'),
+ $columnName = $row.find('td[data-column="name"]'),
+ children = $table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ var expander = $columnName.prepend('' +
+ '' +
+ '');
+
+ children.hide();
+
+ expander.on('click', function (e) {
+ var $target = $(e.target);
+ if ($target.hasClass('glyphicon-plus')) {
+ $target
+ .removeClass('glyphicon-plus')
+ .addClass('glyphicon-minus');
+
+ children.show();
+ } else {
+ $target
+ .removeClass('glyphicon-minus')
+ .addClass('glyphicon-plus');
+
+ reverseHide($table, $row);
+ }
+ });
+ }
+
+ $columnName.prepend('' +
+ '' +
+ '');
+ });
+
+ // Reverse hide all elements
+ reverseHide = function (table, element) {
+ var
+ $element = $(element),
+ id = $element.data('id'),
+ children = table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ children.each(function (i, e) {
+ reverseHide(table, e);
+ });
+
+ $element
+ .find('.glyphicon-chevron-down')
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ children.hide();
+ }
+ };
+});
+
+// table 3
+ $(function () {
+ var
+ $table = $('#tree-table-3'),
+ rows = $table.find('tr');
+
+ rows.each(function (index, row) {
+ var
+ $row = $(row),
+ level = $row.data('level'),
+ id = $row.data('id'),
+ $columnName = $row.find('td[data-column="name"]'),
+ children = $table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ var expander = $columnName.prepend('' +
+ '' +
+ '');
+
+ children.hide();
+
+ expander.on('click', function (e) {
+ var $target = $(e.target);
+ if ($target.hasClass('glyphicon-chevron-right')) {
+ $target
+ .removeClass('glyphicon-chevron-right')
+ .addClass('glyphicon-chevron-down');
+
+ children.show();
+ } else {
+ $target
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ reverseHide($table, $row);
+ }
+ });
+ }
+
+ $columnName.prepend('' +
+ '' +
+ '');
+ });
+
+ // Reverse hide all elements
+ reverseHide = function (table, element) {
+ var
+ $element = $(element),
+ id = $element.data('id'),
+ children = table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ children.each(function (i, e) {
+ reverseHide(table, e);
+ });
+
+ $element
+ .find('.glyphicon-chevron-down')
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ children.hide();
+ }
+ };
+});
+
+ // table 4
+ $(function () {
+ var
+ $table = $('#tree-table-4'),
+ rows = $table.find('tr');
+
+ rows.each(function (index, row) {
+ var
+ $row = $(row),
+ level = $row.data('level'),
+ id = $row.data('id'),
+ $columnName = $row.find('td[data-column="name"]'),
+ children = $table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ var expander = $columnName.prepend('' +
+ '' +
+ '');
+
+ children.hide();
+
+ expander.on('click', function (e) {
+ var $target = $(e.target);
+ if ($target.hasClass('glyphicon-chevron-right')) {
+ $target
+ .removeClass('glyphicon-chevron-right')
+ .addClass('glyphicon-chevron-down');
+
+ children.show();
+ } else {
+ $target
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ reverseHide($table, $row);
+ }
+ });
+ }
+
+ $columnName.prepend('' +
+ '' +
+ '');
+ });
+
+ // Reverse hide all elements
+ reverseHide = function (table, element) {
+ var
+ $element = $(element),
+ id = $element.data('id'),
+ children = table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ children.each(function (i, e) {
+ reverseHide(table, e);
+ });
+
+ $element
+ .find('.glyphicon-chevron-down')
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ children.hide();
+ }
+ };
+});
+ // table 5
+ $(function () {
+ var
+ $table = $('#tree-table-5'),
+ rows = $table.find('tr');
+
+ rows.each(function (index, row) {
+ var
+ $row = $(row),
+ level = $row.data('level'),
+ id = $row.data('id'),
+ $columnName = $row.find('td[data-column="name"]'),
+ children = $table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ var expander = $columnName.prepend('' +
+ '' +
+ '');
+
+ children.hide();
+
+ expander.on('click', function (e) {
+ var $target = $(e.target);
+ if ($target.hasClass('glyphicon-chevron-right')) {
+ $target
+ .removeClass('glyphicon-chevron-right')
+ .addClass('glyphicon-chevron-down');
+
+ children.show();
+ } else {
+ $target
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ reverseHide($table, $row);
+ }
+ });
+ }
+
+ $columnName.prepend('' +
+ '' +
+ '');
+ });
+
+ // Reverse hide all elements
+ reverseHide = function (table, element) {
+ var
+ $element = $(element),
+ id = $element.data('id'),
+ children = table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ children.each(function (i, e) {
+ reverseHide(table, e);
+ });
+
+ $element
+ .find('.glyphicon-chevron-down')
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ children.hide();
+ }
+ };
+});
+
+
+// table 6
+ $(function () {
+ var
+ $table = $('#tree-table-6'),
+ rows = $table.find('tr');
+
+ rows.each(function (index, row) {
+ var
+ $row = $(row),
+ level = $row.data('level'),
+ id = $row.data('id'),
+ $columnName = $row.find('td[data-column="name"]'),
+ children = $table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ var expander = $columnName.prepend('' +
+ '' +
+ '');
+
+ children.hide();
+
+ expander.on('click', function (e) {
+ var $target = $(e.target);
+ if ($target.hasClass('glyphicon-chevron-right')) {
+ $target
+ .removeClass('glyphicon-chevron-right')
+ .addClass('glyphicon-chevron-down');
+
+ children.show();
+ } else {
+ $target
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ reverseHide($table, $row);
+ }
+ });
+ }
+
+ $columnName.prepend('' +
+ '' +
+ '');
+ });
+
+ // Reverse hide all elements
+ reverseHide = function (table, element) {
+ var
+ $element = $(element),
+ id = $element.data('id'),
+ children = table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ children.each(function (i, e) {
+ reverseHide(table, e);
+ });
+
+ $element
+ .find('.glyphicon-chevron-down')
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ children.hide();
+ }
+ };
+});
+
+// table 7
+ $(function () {
+ var
+ $table = $('#tree-table-7'),
+ rows = $table.find('tr');
+
+ rows.each(function (index, row) {
+ var
+ $row = $(row),
+ level = $row.data('level'),
+ id = $row.data('id'),
+ $columnName = $row.find('td[data-column="name"]'),
+ children = $table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ var expander = $columnName.prepend('' +
+ '' +
+ '');
+
+ children.hide();
+
+ expander.on('click', function (e) {
+ var $target = $(e.target);
+ if ($target.hasClass('glyphicon-chevron-right')) {
+ $target
+ .removeClass('glyphicon-chevron-right')
+ .addClass('glyphicon-chevron-down');
+
+ children.show();
+ } else {
+ $target
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ reverseHide($table, $row);
+ }
+ });
+ }
+
+ $columnName.prepend('' +
+ '' +
+ '');
+ });
+
+ // Reverse hide all elements
+ reverseHide = function (table, element) {
+ var
+ $element = $(element),
+ id = $element.data('id'),
+ children = table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ children.each(function (i, e) {
+ reverseHide(table, e);
+ });
+
+ $element
+ .find('.glyphicon-chevron-down')
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ children.hide();
+ }
+ };
+});
+
+ // table 8
+ $(function () {
+ var
+ $table = $('#tree-table-8'),
+ rows = $table.find('tr');
+
+ rows.each(function (index, row) {
+ var
+ $row = $(row),
+ level = $row.data('level'),
+ id = $row.data('id'),
+ $columnName = $row.find('td[data-column="name"]'),
+ children = $table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ var expander = $columnName.prepend('' +
+ '' +
+ '');
+
+ children.hide();
+
+ expander.on('click', function (e) {
+ var $target = $(e.target);
+ if ($target.hasClass('glyphicon-chevron-right')) {
+ $target
+ .removeClass('glyphicon-chevron-right')
+ .addClass('glyphicon-chevron-down');
+
+ children.show();
+ } else {
+ $target
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ reverseHide($table, $row);
+ }
+ });
+ }
+
+ $columnName.prepend('' +
+ '' +
+ '');
+ });
+
+ // Reverse hide all elements
+ reverseHide = function (table, element) {
+ var
+ $element = $(element),
+ id = $element.data('id'),
+ children = table.find('tr[data-parent="' + id + '"]');
+
+ if (children.length) {
+ children.each(function (i, e) {
+ reverseHide(table, e);
+ });
+
+ $element
+ .find('.glyphicon-chevron-down')
+ .removeClass('glyphicon-chevron-down')
+ .addClass('glyphicon-chevron-right');
+
+ children.hide();
+ }
+ };
+});
\ No newline at end of file
diff --git a/static/js/vector-map-custom.js b/static/js/vector-map-custom.js
new file mode 100644
index 0000000..bf750e5
--- /dev/null
+++ b/static/js/vector-map-custom.js
@@ -0,0 +1,488 @@
+var gdpData = {
+ "AF": 16.63,
+ "AL": 11.58,
+ "DZ": 158.97,
+ "AO": 85.81,
+ "AG": 1.1,
+ "AR": 351.02,
+ "AM": 8.83,
+ "AU": 1219.72,
+ "AT": 366.26,
+ "AZ": 52.17,
+ "BS": 7.54,
+ "BH": 21.73,
+ "BD": 105.4,
+ "BB": 3.96,
+ "BY": 52.89,
+ "BE": 461.33,
+ "BZ": 1.43,
+ "BJ": 6.49,
+ "BT": 1.4,
+ "BO": 19.18,
+ "BA": 16.2,
+ "BW": 12.5,
+ "BR": 2023.53,
+ "BN": 11.96,
+ "BG": 44.84,
+ "BF": 8.67,
+ "BI": 1.47,
+ "KH": 11.36,
+ "CM": 21.88,
+ "CA": 1563.66,
+ "CV": 1.57,
+ "CF": 2.11,
+ "TD": 7.59,
+ "CL": 199.18,
+ "CN": 5745.13,
+ "CO": 283.11,
+ "KM": 0.56,
+ "CD": 12.6,
+ "CG": 11.88,
+ "CR": 35.02,
+ "CI": 22.38,
+ "HR": 59.92,
+ "CY": 22.75,
+ "CZ": 195.23,
+ "DK": 304.56,
+ "DJ": 1.14,
+ "DM": 0.38,
+ "DO": 50.87,
+ "EC": 61.49,
+ "EG": 216.83,
+ "SV": 21.8,
+ "GQ": 14.55,
+ "ER": 2.25,
+ "EE": 19.22,
+ "ET": 30.94,
+ "FJ": 3.15,
+ "FI": 231.98,
+ "FR": 2555.44,
+ "GA": 12.56,
+ "GM": 1.04,
+ "GE": 11.23,
+ "DE": 3305.9,
+ "GH": 18.06,
+ "GR": 305.01,
+ "GD": 0.65,
+ "GT": 40.77,
+ "GN": 4.34,
+ "GW": 0.83,
+ "GY": 2.2,
+ "HT": 6.5,
+ "HN": 15.34,
+ "HK": 226.49,
+ "HU": 132.28,
+ "IS": 12.77,
+ "IN": 1430.02,
+ "ID": 695.06,
+ "IR": 337.9,
+ "IQ": 84.14,
+ "IE": 204.14,
+ "IL": 201.25,
+ "IT": 2036.69,
+ "JM": 13.74,
+ "JP": 5390.9,
+ "JO": 27.13,
+ "KZ": 129.76,
+ "KE": 32.42,
+ "KI": 0.15,
+ "KR": 986.26,
+ "UNDEFINED": 5.73,
+ "KW": 117.32,
+ "KG": 4.44,
+ "LA": 6.34,
+ "LV": 23.39,
+ "LB": 39.15,
+ "LS": 1.8,
+ "LR": 0.98,
+ "LY": 77.91,
+ "LT": 35.73,
+ "LU": 52.43,
+ "MK": 9.58,
+ "MG": 8.33,
+ "MW": 5.04,
+ "MY": 218.95,
+ "MV": 1.43,
+ "ML": 9.08,
+ "MT": 7.8,
+ "MR": 3.49,
+ "MU": 9.43,
+ "MX": 1004.04,
+ "MD": 5.36,
+ "MN": 5.81,
+ "ME": 3.88,
+ "MA": 91.7,
+ "MZ": 10.21,
+ "MM": 35.65,
+ "NA": 11.45,
+ "NP": 15.11,
+ "NL": 770.31,
+ "NZ": 138,
+ "NI": 6.38,
+ "NE": 5.6,
+ "NG": 206.66,
+ "NO": 413.51,
+ "OM": 53.78,
+ "PK": 174.79,
+ "PA": 27.2,
+ "PG": 8.81,
+ "PY": 17.17,
+ "PE": 153.55,
+ "PH": 189.06,
+ "PL": 438.88,
+ "PT": 223.7,
+ "QA": 126.52,
+ "RO": 158.39,
+ "RU": 1476.91,
+ "RW": 5.69,
+ "WS": 0.55,
+ "ST": 0.19,
+ "SA": 434.44,
+ "SN": 12.66,
+ "RS": 38.92,
+ "SC": 0.92,
+ "SL": 1.9,
+ "SG": 217.38,
+ "SK": 86.26,
+ "SI": 46.44,
+ "SB": 0.67,
+ "ZA": 354.41,
+ "ES": 1374.78,
+ "LK": 48.24,
+ "KN": 0.56,
+ "LC": 1,
+ "VC": 0.58,
+ "SD": 65.93,
+ "SR": 3.3,
+ "SZ": 3.17,
+ "SE": 444.59,
+ "CH": 522.44,
+ "SY": 59.63,
+ "TW": 426.98,
+ "TJ": 5.58,
+ "TZ": 22.43,
+ "TH": 312.61,
+ "TL": 0.62,
+ "TG": 3.07,
+ "TO": 0.3,
+ "TT": 21.2,
+ "TN": 43.86,
+ "TR": 729.05,
+ "TM": 0,
+ "UG": 17.12,
+ "UA": 136.56,
+ "AE": 239.65,
+ "GB": 2258.57,
+ "US": 14624.18,
+ "UY": 40.71,
+ "UZ": 37.72,
+ "VU": 0.72,
+ "VE": 285.21,
+ "VN": 101.99,
+ "YE": 30.02,
+ "ZM": 15.69,
+ "ZW": 5.57
+};
+$(function () {
+ if(typeof $.fn.vectorMap !== typeof undefined && $('#world-map-gdp1').length > 0){
+ $('#world-map-gdp1').vectorMap({
+ map: 'world_mill',
+ series: {
+ regions: [{
+ normalizeFunction: 'polynomial'
+ }]
+ },
+ onRegionTipShow: function (e, el, code) {
+ el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
+ }
+ });
+ }
+ if(typeof $.fn.vectorMap !== typeof undefined && $('#world-map-gdp').length > 0){
+ $('#world-map-gdp').vectorMap({
+ map: 'world_mill',
+ series: {
+ regions: [{
+ values: gdpData,
+ scale: ['#C8EEFF', '#0071A4'],
+ normalizeFunction: 'polynomial'
+ }]
+ },
+ onRegionTipShow: function (e, el, code) {
+ el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
+ }
+ });
+ }
+ if(typeof $.fn.vectorMap !== typeof undefined && $('#world-map-markers') > 0){
+ $('#world-map-markers').vectorMap({
+ map: 'world_mill',
+ scaleColors: ['#C8EEFF', '#0071A4'],
+ normalizeFunction: 'polynomial',
+ hoverOpacity: 0.7,
+ hoverColor: false,
+ markerStyle: {
+ initial: {
+ fill: '#F8E23B',
+ stroke: '#383f47'
+ }
+ },
+ backgroundColor: '#383f47',
+ lines: [
+ { points: [[41.90, 12.45], [43.73, 7.41], [-0.52, 166.93]], text: "first road" },
+ { points: [[31.52, -87.37], [21.18, -157.49]], text: "second path" }
+ ],
+ markers: [
+ { latLng: [41.90, 12.45], name: 'Vatican City' },
+ { latLng: [43.73, 7.41], name: 'Monaco' },
+ { latLng: [-0.52, 166.93], name: 'Nauru' },
+ { latLng: [-8.51, 179.21], name: 'Tuvalu' },
+ { latLng: [43.93, 12.46], name: 'San Marino' },
+ { latLng: [47.14, 9.52], name: 'Liechtenstein' },
+ { latLng: [7.11, 171.06], name: 'Marshall Islands' },
+ { latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis' },
+ { latLng: [3.2, 73.22], name: 'Maldives' },
+ { latLng: [35.88, 14.5], name: 'Malta' },
+ { latLng: [12.05, -61.75], name: 'Grenada' },
+ { latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines' },
+ { latLng: [13.16, -59.55], name: 'Barbados' },
+ { latLng: [17.11, -61.85], name: 'Antigua and Barbuda' },
+ { latLng: [-4.61, 55.45], name: 'Seychelles' },
+ { latLng: [7.35, 134.46], name: 'Palau' },
+ { latLng: [42.5, 1.51], name: 'Andorra' },
+ { latLng: [14.01, -60.98], name: 'Saint Lucia' },
+ { latLng: [6.91, 158.18], name: 'Federated States of Micronesia' },
+ { latLng: [1.3, 103.8], name: 'Singapore' },
+ { latLng: [1.46, 173.03], name: 'Kiribati' },
+ { latLng: [-21.13, -175.2], name: 'Tonga' },
+ { latLng: [15.3, -61.38], name: 'Dominica' },
+ { latLng: [-20.2, 57.5], name: 'Mauritius' },
+ { latLng: [26.02, 50.55], name: 'Bahrain' },
+ { latLng: [0.33, 6.73], name: 'São Tomé and Príncipe' }
+ ]
+ });
+ }
+})
+$(function () {
+ var map,
+ markers = [
+ { latLng: [52.50, 13.39], name: 'Berlin' },
+ { latLng: [53.56, 10.00], name: 'Hamburg' },
+ { latLng: [48.13, 11.56], name: 'Munich' },
+ { latLng: [50.95, 6.96], name: 'Cologne' },
+ { latLng: [50.11, 8.68], name: 'Frankfurt am Main' },
+ { latLng: [48.77, 9.17], name: 'Stuttgart' },
+ { latLng: [51.23, 6.78], name: 'Düsseldorf' },
+ { latLng: [51.51, 7.46], name: 'Dortmund' },
+ { latLng: [51.45, 7.01], name: 'Essen' },
+ { latLng: [53.07, 8.80], name: 'Bremen' }
+ ],
+ cityAreaData = [
+ 887.70,
+ 755.16,
+ 310.69,
+ 405.17,
+ 248.31,
+ 207.35,
+ 217.22,
+ 280.71,
+ 210.32,
+ 325.42
+ ]
+ if ($.fn.vectorMap !== undefined && $('#rusia-map').length > 0) {
+ $('#rusia-map').vectorMap({
+ map: 'de_merc',
+ regionsSelectable: true,
+ markersSelectable: true,
+ markers: markers,
+ markerStyle: {
+ initial: {
+ fill: '#4DAC26'
+ },
+ selected: {
+ fill: '#CA0020'
+ }
+ },
+ regionStyle: {
+ initial: {
+ fill: '#B8E186'
+ },
+ selected: {
+ fill: '#F4A582'
+ }
+ },
+ series: {
+ markers: [{
+ attribute: 'r',
+ scale: [5, 15],
+ values: cityAreaData
+ }]
+ },
+ onRegionSelected: function () {
+ if (window.localStorage) {
+ window.localStorage.setItem(
+ 'jvectormap-selected-regions',
+ JSON.stringify(map.getSelectedRegions())
+ );
+ }
+ },
+ onMarkerSelected: function () {
+ if (window.localStorage) {
+ window.localStorage.setItem(
+ 'jvectormap-selected-markers',
+ JSON.stringify(map.getSelectedMarkers())
+ );
+ }
+ }
+ })
+ }
+});
+
+$(function () {
+ if ($.fn.vectorMap !== undefined && $('#legend-map').length > 0) {
+ $('#legend-map').vectorMap({
+ map: 'us_aea',
+ markers: [
+ [61.18, -149.53],
+ [21.18, -157.49],
+ [40.66, -73.56],
+ [41.52, -87.37],
+ [35.22, -80.84],
+ [31.52, -87.37]
+ ],
+ series: {
+ markers: [{
+ attribute: 'fill',
+ scale: ['#C8EEFF', '#0071A4'],
+ normalizeFunction: 'polynomial',
+ values: [408, 512, 550, 781],
+ legend: {
+ vertical: true
+ }
+ }, {
+ attribute: 'image',
+ scale: {
+ bank: '../assets/images/vectormap/icon-bank.png',
+ factory: '../assets/images/vectormap/icon-factory.png'
+ },
+ values: {
+ '4': 'bank',
+ '5': 'factory'
+ },
+ legend: {
+ horizontal: true,
+ cssClass: 'jvectormap-legend-icons',
+ title: 'Business type'
+ }
+ }],
+ regions: [{
+ scale: {
+ red: '#ff0000',
+ green: '#00ff00'
+ },
+ attribute: 'fill',
+ values: {
+ "US-KS": 'red',
+ "US-MO": 'red',
+ "US-IA": 'green',
+ "US-NE": 'green'
+ },
+ legend: {
+ horizontal: true,
+ title: 'Color'
+ }
+ }, {
+ scale: {
+ redGreen: '../assets/images/vectormap/bg-red-green.png',
+ yellowBlue: '../assets/images/vectormap/bg-yellow-blue.png'
+ },
+ values: {
+ "US-TX": 'redGreen',
+ "US-CA": 'yellowBlue'
+ },
+ attribute: 'fill',
+ legend: {
+ horizontal: true,
+ cssClass: 'jvectormap-legend-bg',
+ title: 'Pattern',
+ labelRender: function (v) {
+ return {
+ redGreen: 'low',
+ yellowBlue: 'high'
+ }[v];
+ }
+ }
+ }]
+ }
+ })
+ }
+});
+
+$(function () {
+ var plants = [
+ { name: 'VAK', coords: [50.0091294, 9.0371812], status: 'closed', offsets: [0, 2] },
+ { name: 'MZFR', coords: [49.0543102, 8.4825862], status: 'closed', offsets: [0, 2] },
+ { name: 'AVR', coords: [50.9030599, 6.4213693], status: 'closed' },
+ { name: 'KKR', coords: [53.1472465, 12.9903674], status: 'closed' },
+ { name: 'KRB', coords: [48.513264, 10.4020357], status: 'activeUntil2018' },
+ { name: 'KWO', coords: [49.364503, 9.076252], status: 'closed' },
+ { name: 'KWL', coords: [52.5331853, 7.2505223], status: 'closed', offsets: [0, -2] },
+ { name: 'HDR', coords: [50.1051446, 8.9348691], status: 'closed', offsets: [0, -2] },
+ { name: 'KKS', coords: [53.6200685, 9.5306289], status: 'closed' },
+ { name: 'KKN', coords: [48.6558015, 12.2500848], status: 'closed', offsets: [0, -2] },
+ { name: 'KGR', coords: [54.1417497, 13.6583877], status: 'closed' },
+ { name: 'KWB', coords: [49.709331, 8.415865], status: 'closed' },
+ { name: 'KWW', coords: [51.6396481, 9.3915617], status: 'closed' },
+ { name: 'GKN', coords: [49.0401151, 9.1721088], status: 'activeUntil2022' },
+ { name: 'KKB', coords: [53.8913533, 9.2005777], status: 'closed', offsets: [0, -5] },
+ { name: 'KKI', coords: [48.5544748, 12.3472095], status: 'activeUntil2022', offsets: [0, 2] },
+ { name: 'KKU', coords: [53.4293465, 8.4774649], status: 'closed' },
+ { name: 'KNK', coords: [49.1473279, 8.3827739], status: 'closed' },
+ { name: 'KKP', coords: [49.2513078, 8.4356761], status: 'activeUntil2022', offsets: [0, -2] },
+ { name: 'KKG', coords: [49.9841308, 10.1846373], status: 'activeUntil2018' },
+ { name: 'KKK', coords: [53.4104656, 10.4091597], status: 'closed' },
+ { name: 'KWG', coords: [52.0348748, 9.4097793], status: 'activeUntil2022' },
+ { name: 'KBR', coords: [53.850666, 9.3457603], status: 'closed', offsets: [0, 5] },
+ { name: 'KMK', coords: [50.408791, 7.4861956], status: 'closed' },
+ { name: 'THTR', coords: [51.6786228, 7.9700232], status: 'closed' },
+ { name: 'KKE', coords: [52.4216974, 7.3706389], status: 'activeUntil2022', offsets: [0, 2] }
+ ];
+ if ($.fn.vectorMap !== undefined && $('#icon-map').length > 0) {
+ $('#icon-map').vectorMap({
+ map: 'de_merc',
+ markers: plants.map(function (h) { return { name: h.name, latLng: h.coords } }),
+ labels: {
+ markers: {
+ render: function (index) {
+ return plants[index].name;
+ },
+ offsets: function (index) {
+ var offset = plants[index]['offsets'] || [0, 0];
+
+ return [offset[0] - 7, offset[1] + 3];
+ }
+ }
+ },
+ series: {
+ markers: [{
+ attribute: 'image',
+ scale: {
+ 'closed': '../assets/images/vectormap/icon-np-3.png',
+ 'activeUntil2018': '../assets/images/vectormap/icon-np-2.png',
+ 'activeUntil2022': '../assets/images/vectormap/icon-np-1.png'
+ },
+ values: plants.reduce(function (p, c, i) { p[i] = c.status; return p }, {}),
+ legend: {
+ horizontal: true,
+ title: 'Nuclear power station status',
+ labelRender: function (v) {
+ return {
+ closed: 'Closed',
+ activeUntil2018: 'Scheduled for shut down
before 2018',
+ activeUntil2022: 'Scheduled for shut down
before 2022'
+ }[v];
+ }
+ }
+ }]
+ }
+ })
+ }
+});
\ No newline at end of file