Added Viewer

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/modern/assets/scripts.js

+Apex.grid = {
+  padding: {
+    right: 0,
+    left: 0
+  }
+}
+
+Apex.dataLabels = {
+  enabled: false
+}
+
+var randomizeArray = function (arg) {
+  var array = arg.slice();
+  var currentIndex = array.length, temporaryValue, randomIndex;
+  
+  while (0 !== currentIndex) {
+
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    temporaryValue = array[currentIndex];
+    array[currentIndex] = array[randomIndex];
+    array[randomIndex] = temporaryValue;
+  }
+
+  return array;
+}
+
+// data for the sparklines that appear below header area
+var sparklineData = [47, 45, 54, 38, 56, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46];
+
+// the default colorPalette for this dashboard
+//var colorPalette = ['#01BFD6', '#5564BE', '#F7A600', '#EDCD24', '#F74F58'];
+var colorPalette = ['#00D8B6','#008FFB',  '#FEB019', '#FF4560', '#775DD0']
+
+var spark1 = {
+  chart: {
+    id: 'sparkline1',
+    group: 'sparklines',
+    type: 'area',
+    height: 160,
+    sparkline: {
+      enabled: true
+    },
+  },
+  stroke: {
+    curve: 'straight'
+  },
+  fill: {
+    opacity: 1,
+  },
+  series: [{
+    name: 'Sales',
+    data: randomizeArray(sparklineData)
+  }],
+  labels: [...Array(24).keys()].map(n => `2018-09-0${n+1}`),
+  yaxis: {
+    min: 0
+  },
+  xaxis: {
+    type: 'datetime',
+  },
+  colors: ['#DCE6EC'],
+  title: {
+    text: '$424,652',
+    offsetX: 30,
+    style: {
+      fontSize: '24px',
+      cssClass: 'apexcharts-yaxis-title'
+    }
+  },
+  subtitle: {
+    text: 'Sales',
+    offsetX: 30,
+    style: {
+      fontSize: '14px',
+      cssClass: 'apexcharts-yaxis-title'
+    }
+  }
+}
+
+var spark2 = {
+  chart: {
+    id: 'sparkline2',
+    group: 'sparklines',
+    type: 'area',
+    height: 160,
+    sparkline: {
+      enabled: true
+    },
+  },
+  stroke: {
+    curve: 'straight'
+  },
+  fill: {
+    opacity: 1,
+  },
+  series: [{
+    name: 'Expenses',
+    data: randomizeArray(sparklineData)
+  }],
+  labels: [...Array(24).keys()].map(n => `2018-09-0${n+1}`),
+  yaxis: {
+    min: 0
+  },
+  xaxis: {
+    type: 'datetime',
+  },
+  colors: ['#DCE6EC'],
+  title: {
+    text: '$235,312',
+    offsetX: 30,
+    style: {
+      fontSize: '24px',
+      cssClass: 'apexcharts-yaxis-title'
+    }
+  },
+  subtitle: {
+    text: 'Expenses',
+    offsetX: 30,
+    style: {
+      fontSize: '14px',
+      cssClass: 'apexcharts-yaxis-title'
+    }
+  }
+}
+
+var spark3 = {
+  chart: {
+    id: 'sparkline3',
+    group: 'sparklines',
+    type: 'area',
+    height: 160,
+    sparkline: {
+      enabled: true
+    },
+  },
+  stroke: {
+    curve: 'straight'
+  },
+  fill: {
+    opacity: 1,
+  },
+  series: [{
+    name: 'Profits',
+    data: randomizeArray(sparklineData)
+  }],
+  labels: [...Array(24).keys()].map(n => `2018-09-0${n+1}`),
+  xaxis: {
+    type: 'datetime',
+  },
+  yaxis: {
+    min: 0
+  },
+  colors: ['#008FFB'],
+  //colors: ['#5564BE'],
+  title: {
+    text: '$135,965',
+    offsetX: 30,
+    style: {
+      fontSize: '24px',
+      cssClass: 'apexcharts-yaxis-title'
+    }
+  },
+  subtitle: {
+    text: 'Profits',
+    offsetX: 30,
+    style: {
+      fontSize: '14px',
+      cssClass: 'apexcharts-yaxis-title'
+    }
+  }
+}
+
+var monthlyEarningsOpt = {
+  chart: {
+    type: 'area',
+    height: 260,
+    background: '#eff4f7',
+    sparkline: {
+      enabled: true
+    },
+    offsetY: 20
+  },
+  stroke: {
+    curve: 'straight'
+  },
+  fill: {
+    type: 'solid',
+    opacity: 1,
+  },
+  series: [{
+    data: randomizeArray(sparklineData)
+  }],
+  xaxis: {
+    crosshairs: {
+      width: 1
+    },
+  },
+  yaxis: {
+    min: 0,
+    max: 130
+  },
+  colors: ['#dce6ec'],
+  
+  title: {
+    text: 'Total Earned',
+    offsetX: -30,
+    offsetY: 100,
+    align: 'right',
+    style: {
+      color: '#7c939f',
+      fontSize: '16px',
+      cssClass: 'apexcharts-yaxis-title'
+    }
+  },
+  subtitle: {
+    text: '$135,965',
+    offsetX: -30,
+    offsetY: 100,
+    align: 'right',
+    style: {
+      color: '#7c939f',
+      fontSize: '24px',
+      cssClass: 'apexcharts-yaxis-title'
+    }
+  }
+}
+
+
+new ApexCharts(document.querySelector("#spark1"), spark1).render();
+new ApexCharts(document.querySelector("#spark2"), spark2).render();
+new ApexCharts(document.querySelector("#spark3"), spark3).render();
+
+var monthlyEarningsChart = new ApexCharts(document.querySelector("#monthly-earnings-chart"), monthlyEarningsOpt);
+
+
+var optionsArea = {
+  chart: {
+    height: 340,
+    type: 'area',
+    zoom: {
+      enabled: false
+    },
+  },
+  stroke: {
+    curve: 'straight'
+  },
+  colors: colorPalette,
+  series: [
+    {
+      name: "Blog",
+      data: [{
+        x: 0, 
+        y: 0
+      }, {
+        x: 4,
+        y: 5
+      }, {
+        x: 5,
+        y: 3
+      }, {
+        x: 9,
+        y: 8
+      }, {
+        x: 14,
+        y: 4
+      }, {
+        x: 18,
+        y: 5
+      }, {
+        x: 25,
+        y: 0
+      }]
+    },
+    {
+      name: "Social Media",
+      data: [{
+        x: 0, 
+        y: 0
+      }, {
+        x: 4,
+        y: 6
+      }, {
+        x: 5,
+        y: 4
+      }, {
+        x: 14,
+        y: 8
+      }, {
+        x: 18,
+        y: 5.5
+      }, {
+        x: 21,
+        y: 6
+      }, {
+        x: 25,
+        y: 0
+      }]
+    },
+    {
+      name: "External",
+      data: [{
+        x: 0, 
+        y: 0
+      }, {
+        x: 2,
+        y: 5
+      }, {
+        x: 5,
+        y: 4
+      }, {
+        x: 10,
+        y: 11
+      }, {
+        x: 14,
+        y: 4
+      }, {
+        x: 18,
+        y: 8
+      }, {
+        x: 25,
+        y: 0
+      }]
+    }
+  ],
+  fill: {
+    opacity: 1,
+  },
+  title: {
+    text: 'Daily Visits Insights',
+    align: 'left',
+    style: {
+      fontSize: '18px'
+    }
+  },
+  markers: {
+    size: 0,
+    style: 'hollow',
+    hover: {
+      opacity: 5,
+    }
+  },
+  tooltip: {
+    intersect: true,
+    shared: false,
+  },
+  xaxis: {
+    tooltip: {
+      enabled: false
+    },
+    labels: {
+      show: false
+    },
+    axisTicks: {
+      show: false
+    }
+  },
+  yaxis: {
+    tickAmount: 4,
+    max: 12,
+    axisBorder: {
+      show: false
+    },
+    axisTicks: {
+      show: false
+    },
+    labels: {
+      style: {
+        color: '#78909c'
+      }
+    }
+  },
+  legend: {
+    show: false
+  }
+}
+
+var chartArea = new ApexCharts(document.querySelector('#area'), optionsArea);
+chartArea.render();
+
+var optionsBar = {
+  chart: {
+    type: 'bar',
+    height: 380,
+    width: '100%',
+    stacked: true,
+  },
+  plotOptions: {
+    bar: {
+      columnWidth: '45%',
+    }
+  },
+  colors: colorPalette,
+  series: [{
+    name: "Clothing",
+    data: [42, 52, 16, 55, 59, 51, 45, 32, 26, 33, 44, 51, 42, 56],
+  }, {
+    name: "Food Products",
+    data: [6, 12, 4, 7, 5, 3, 6, 4, 3, 3, 5, 6, 7, 4],
+  }],
+  labels: [10,11,12,13,14,15,16,17,18,19,20,21,22,23],
+  xaxis: {
+    labels: {
+      show: false
+    },
+    axisBorder: {
+      show: false
+    },
+    axisTicks: {
+      show: false
+    },
+  },
+  yaxis: {
+    axisBorder: {
+      show: false
+    },
+    axisTicks: {
+      show: false
+    },
+    labels: {
+      style: {
+        color: '#78909c'
+      }
+    }
+  },
+  title: {
+    text: 'Monthly Sales',
+    align: 'left',
+    style: {
+      fontSize: '18px'
+    }
+  }
+
+}
+
+var chartBar = new ApexCharts(document.querySelector('#bar'), optionsBar);
+chartBar.render();
+
+
+var optionDonut = {
+  chart: {
+      type: 'donut',
+      width: '100%'
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  plotOptions: {
+    pie: {
+      donut: {
+        size: '75%',
+      },
+      offsetY: 20,
+    },
+    stroke: {
+      colors: undefined
+    }
+  },
+  colors: colorPalette,
+  title: {
+    text: 'Department Sales',
+    style: {
+      fontSize: '18px'
+    }
+  },
+  series: [21, 23, 19, 14, 6],
+  labels: ['Clothing', 'Food Products', 'Electronics', 'Kitchen Utility', 'Gardening'],
+  legend: {
+    position: 'left',
+    offsetY: 80
+  }
+}
+
+var donut = new ApexCharts(
+  document.querySelector("#donut"),
+  optionDonut
+)
+donut.render();
+
+
+function trigoSeries(cnt, strength) {
+  var data = [];
+  for (var i = 0; i < cnt; i++) {
+      data.push((Math.sin(i / strength) * (i / strength) + i / strength+1) * (strength*2));
+  }
+
+  return data;
+}
+
+
+
+var optionsLine = {
+  chart: {
+    height: 340,
+    type: 'line',
+    zoom: {
+      enabled: false
+    }
+  },
+  plotOptions: {
+    stroke: {
+      width: 4,
+      curve: 'smooth'
+    },
+  },
+  colors: colorPalette,
+  series: [
+    {
+      name: "Day Time",
+      data: trigoSeries(52, 20)
+    },
+    {
+      name: "Night Time",
+      data: trigoSeries(52, 27)
+    },
+  ],
+  title: {
+    floating: false,
+    text: 'Customers',
+    align: 'left',
+    style: {
+      fontSize: '18px'
+    }
+  },
+  subtitle: {
+    text: '168,215',
+    align: 'center',
+    margin: 30,
+    offsetY: 40,
+    style: {
+      color: '#222',
+      fontSize: '24px',
+    }
+  },
+  markers: {
+    size: 0
+  },
+    
+  grid: {
+  
+  },
+  xaxis: {
+    labels: {
+      show: false
+    },
+    axisTicks: {
+      show: false
+    },
+    tooltip: {
+      enabled: false
+    }
+  },
+  yaxis: {
+    tickAmount: 2,
+    labels: {
+      show: false
+    },
+    axisBorder: {
+      show: false,
+    },
+    axisTicks: {
+      show: false
+    },
+    min: 0,
+  },
+  legend: {
+    position: 'top',
+    horizontalAlign: 'left',
+    offsetY: -20,
+    offsetX: -30
+  }
+ 
+}
+
+var chartLine = new ApexCharts(document.querySelector('#line'), optionsLine);
+
+// a small hack to extend height in website sample dashboard
+chartLine.render().then(function () {
+  var ifr = document.querySelector("#wrapper");
+  if (ifr.contentDocument) {
+    ifr.style.height = ifr.contentDocument.body.scrollHeight + 20 + 'px';
+  }
+});
+
+
+// on smaller screen, change the legends position for donut
+var mobileDonut = function() {
+  if($(window).width() < 768) {
+    donut.updateOptions({
+      plotOptions: {
+        pie: {
+          offsetY: -15,
+        }
+      },
+      legend: {
+        position: 'bottom'
+      }
+    }, false, false)
+  }
+  else {
+    donut.updateOptions({
+      plotOptions: {
+        pie: {
+          offsetY: 20,
+        }
+      },
+      legend: {
+        position: 'left'
+      }
+    }, false, false)
+  }
+}
+
+$(window).resize(function() {
+  mobileDonut()
+})
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/modern/assets/styles.css

+
+body {
+  background-color: #eff4f7;  
+  color: #777;
+  font-family: 'Titillium Web', Arial, Helvetica, sans-serif
+}
+
+h1, h2, h3, h4, h5, h6, strong {
+  font-weight: 600;
+}
+
+.content-area {
+  max-width: 1070px;
+  margin: 0 auto;
+}
+
+#topnav {
+  background: #37474f;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 14px;
+}
+
+.admin-menu {
+  color: #fff;
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 15px;
+  flex: 0.05 0 0;
+}
+
+.logo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1 0 0;
+}
+
+.logo-t {
+  width: 32px;
+  height: 32px;
+  border: 2px solid #26c6da;
+  text-align: center;
+  line-height: 28px;
+  border-radius: 50%;
+  margin-right: 15px;
+  margin-left: 5px;
+  padding-left: 3px;
+}
+
+.search-bar {
+  flex: 2 0 0;
+  align-items: center;
+  justify-content: space-between;
+  background: #232e34;
+  overflow: hidden;
+  display: flex;
+  height: 36px;
+  border-radius: 35px;
+  color: rgba(255,255,255,0.5);
+}
+
+.search-bar-dropdown {
+  flex: 1 0 0;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 18px;
+  margin-right: 15px;
+  background: #2c393f;
+  
+}
+.search-bar-input {
+  flex: 2 0 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 18px;
+  line-height: 40px;
+  align-items: center;
+}
+
+.search-bar-input input[type="text"] {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  color: rgba(255,255,255,0.5);
+}
+.search-bar-input input:focus{
+  outline: none;
+}
+
+.box.banana_map {
+  color: #fff;
+  background: #eff4f7;
+  padding: 0;
+  box-shadow: none;
+}
+.box.banana_map .title {
+  padding-top: 40px;
+  padding-left: 25px;
+  font-size: 16px;
+}
+.box.banana_map .subtitle {
+  font-weight: 700;
+  padding-top: 10px;
+  padding-left: 25px;
+  font-size: 22px;
+}
+
+.box {
+  max-height: 444px;
+}
+
+.box .banana {
+  min-height: 404px;
+  background-image: url('img/banana.png');
+  background-size: cover;
+}
+.box .map {
+  min-height: 404px;
+  background-image: url('img/map.png');
+  background-size: cover;
+}
+.box .cog-icon {
+  cursor: pointer;
+  position: absolute;
+  right: 55px;
+  top: 25px;
+  z-index: 10;
+}
+
+@media screen and (max-width:760px) {
+  #topnav { flex-wrap: wrap; }
+  .admin-menu { flex-basis: 20%; }
+  .logo { justify-content: flex-end; padding-right: 10px; }
+  .logo { flex-basis: 80%; }
+  .topnav-rightmenu, .search-bar { display: none; }
+}
+
+.box {
+  box-shadow: 0px 1px 22px -12px #607D8B;
+  background-color: #fff;
+  padding: 25px 35px 25px 30px;
+}
+
+#monthly-earnings-chart #apexcharts-canvas {
+  position: relative;
+}
+#monthly-earnings-chart #apexcharts-canvas:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 58%;
+  top: 0;
+  bottom: 0;
+  background: #24bdd3;
+  opacity: 0.65;
+}
+#monthly-earnings-chart #apexcharts-title-text {
+  font-weight: 600;
+}
+#monthly-earnings-chart #apexcharts-subtitle-text {
+  font-weight: 700;
+}
+.monthly-earnings-text {
+  position: absolute;
+  left: 70px;
+  top: 187px;
+  color: #fff;
+  z-index: 10;
+}
+
+.monthly-earnings-text h6 {
+  font-size: 16px;
+}
+.chart-title h5 {
+  font-size: 18px;
+  color: rgba(51,51,51,1);
+  margin-bottom: 38px;
+}
+
+
+@media screen and (max-width:760px) {
+  .monthly-earnings-text {
+    left: 30px;
+  }
+  .box {
+    padding: 25px 0;
+  }
+}
+
+.sparkboxes .box {
+  padding: 3px 0 0 0;
+  position: relative;
+}
+
+#spark1, #spark2, #spark3, #spark4 {
+  position: relative;
+  padding-top: 15px;
+}
+
+
+/* overrides */
+.sparkboxes #apexcharts-subtitle-text { fill: #8799a2 !important; }
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/modern/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Balkan Dashboard</title>
+
+	
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
+
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700" rel="stylesheet">
+
+	<link rel="stylesheet" href="assets/styles.css">
+
+</head>
+
+<body>
+
+
+	<div id="wrapper">
+
+		<div class="content-area">
+			<div class="container-fluid">
+				<div class="main">
+					<div class="row sparkboxes mt-4 mb-4">
+						<div class="col-md-4">
+							<div class="box box1">
+								<div id="spark1"></div>
+							</div>
+						</div>
+						<div class="col-md-4">
+							<div class="box box2">
+								<div id="spark2"></div>
+							</div>
+						</div>
+						<div class="col-md-4">
+							<div class="box box3">
+								<div id="spark3"></div>
+							</div>
+						</div>
+					</div>
+
+					<div class="row mt-5 mb-4">
+						<div class="col-md-6">
+							<div class="box">
+								<div id="bar"> </div>
+							</div>
+						</div>
+						<div class="col-md-6">
+							<div class="box">
+								
+								<div id="donut"> </div>
+							</div>
+						</div>
+					</div>
+
+					<div class="row mt-4 mb-4">
+						<div class="col-md-6">
+							<div class="box">
+								<div id="area"> </div>
+							</div>
+						</div>
+						<div class="col-md-6">
+							<div class="box">
+								<div id="line"> </div>
+							</div>
+						</div>
+					</div>
+
+				</div>
+
+			</div>
+		</div>
+	</div>
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
+	<script src="assets/data.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+	<script src="assets/scripts.js"></script>
+
+	<script>
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/realtime/assets/scripts.js

+window.Apex = {
+  chart: {
+    foreColor: '#fff',
+    toolbar: {
+      show: false
+    },
+  },
+  colors: ['#FCCF31', '#17ead9', '#f02fc2'],
+  stroke: {
+    width: 3
+  },
+  dataLabels: {
+    enabled: false
+  },
+  grid: {
+    borderColor: "#40475D",
+  },
+  xaxis: {
+    axisTicks: {
+      color: '#333'
+    },
+    axisBorder: {
+      color: "#333"
+    }
+  },
+  fill: {
+    type: 'gradient',
+    gradient: {
+      gradientToColors: ['#F55555', '#6078ea', '#6094ea']
+    },
+  },
+  tooltip: {
+    theme: 'dark',
+    x: {
+      formatter: function (val) {
+        return moment(new Date(val)).format("HH:mm:ss")
+      }
+    }
+  },
+  yaxis: {
+    opposite: true,
+    labels: {
+      offsetX: -10
+    }
+  }
+};
+
+var trigoStrength = 3
+var iteration = 11
+
+function getRandom() {
+  var i = iteration;
+  return (Math.sin(i / trigoStrength) * (i / trigoStrength) + i / trigoStrength + 1) * (trigoStrength * 2)
+}
+
+function getRangeRandom(yrange) {
+  return Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
+}
+
+function generateMinuteWiseTimeSeries(baseval, count, yrange) {
+  var i = 0;
+  var series = [];
+  while (i < count) {
+    var x = baseval;
+    var y = ((Math.sin(i / trigoStrength) * (i / trigoStrength) + i / trigoStrength + 1) * (trigoStrength * 2))
+
+    series.push([x, y]);
+    baseval += 300000;
+    i++;
+  }
+  return series;
+}
+
+
+
+function getNewData(baseval, yrange) {
+  var newTime = baseval + 300000;
+  return {
+    x: newTime,
+    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
+  }
+}
+
+var optionsColumn = {
+  chart: {
+    height: 350,
+    type: 'bar',
+    animations: {
+      enabled: true,
+      easing: 'linear',
+      dynamicAnimation: {
+        speed: 1000
+      }
+    },
+    // dropShadow: {
+    //   enabled: true,
+    //   left: -14,
+    //   top: -10,
+    //   opacity: 0.05
+    // },
+    events: {
+      animationEnd: function (chartCtx) {
+        const newData = chartCtx.w.config.series[0].data.slice()
+        newData.shift()
+        window.setTimeout(function () {
+          chartCtx.updateOptions({
+            series: [{
+              data: newData
+            }],
+            xaxis: {
+              min: chartCtx.minX,
+              max: chartCtx.maxX
+            },
+            subtitle: {
+              text: parseInt(getRangeRandom({min: 1, max: 20})).toString() + '%',
+            }
+          }, false, false)
+        }, 300)
+      }
+    },
+    toolbar: {
+      show: false
+    },
+    zoom: {
+      enabled: false
+    }
+  },
+  dataLabels: {
+    enabled: false
+  },
+  stroke: {
+    width: 0,
+  },
+  series: [{
+    name: 'Load Average',
+    data: generateMinuteWiseTimeSeries(new Date("12/12/2016 00:20:00").getTime(), 12, {
+      min: 10,
+      max: 110
+    })
+  }],
+  title: {
+    text: 'Load Average',
+    align: 'left',
+    style: {
+      fontSize: '12px'
+    }
+  },
+  subtitle: {
+    text: '20%',
+    floating: true,
+    align: 'right',
+    offsetY: 0,
+    style: {
+      fontSize: '22px'
+    }
+  },
+  fill: {
+    type: 'gradient',
+    gradient: {
+      shade: 'dark',
+      type: 'vertical',
+      shadeIntensity: 0.5,
+      inverseColors: false,
+      opacityFrom: 1,
+      opacityTo: 0.8,
+      stops: [0, 100]
+    }
+  },
+  xaxis: {
+    type: 'datetime',
+    range: 2700000
+  },
+  legend: {
+    show: true
+  },
+}
+
+
+
+var chartColumn = new ApexCharts(
+  document.querySelector("#columnchart"),
+  optionsColumn
+);
+chartColumn.render()
+
+var optionsLine = {
+  chart: {
+    height: 350,
+    type: 'line',
+    stacked: true,
+    animations: {
+      enabled: true,
+      easing: 'linear',
+      dynamicAnimation: {
+        speed: 1000
+      }
+    },
+    dropShadow: {
+      enabled: true,
+      opacity: 0.3,
+      blur: 5,
+      left: -7,
+      top: 22
+    },
+    events: {
+      animationEnd: function (chartCtx) {
+        const newData1 = chartCtx.w.config.series[0].data.slice()
+        newData1.shift()
+        const newData2 = chartCtx.w.config.series[1].data.slice()
+        newData2.shift()
+        window.setTimeout(function () {
+          chartCtx.updateOptions({
+            series: [{
+              data: newData1
+            }, {
+              data: newData2
+            }],
+            subtitle: {
+              text: parseInt(getRandom() * Math.random()).toString(),
+            }
+          }, false, false)
+        }, 300)
+      }
+    },
+    toolbar: {
+      show: false
+    },
+    zoom: {
+      enabled: false
+    }
+  },
+  dataLabels: {
+    enabled: false
+  },
+  stroke: {
+    curve: 'straight',
+    width: 5,
+  },
+  grid: {
+    padding: {
+      left: 0,
+      right: 0
+    }
+  },
+  markers: {
+    size: 0,
+    hover: {
+      size: 0
+    }
+  },
+  series: [{
+    name: 'Running',
+    data: generateMinuteWiseTimeSeries(new Date("12/12/2016 00:20:00").getTime(), 12, {
+      min: 30,
+      max: 110
+    })
+  }, {
+    name: 'Waiting',
+    data: generateMinuteWiseTimeSeries(new Date("12/12/2016 00:20:00").getTime(), 12, {
+      min: 30,
+      max: 110
+    })
+  }],
+  xaxis: {
+    type: 'datetime',
+    range: 2700000
+  },
+  title: {
+    text: 'Processes',
+    align: 'left',
+    style: {
+      fontSize: '12px'
+    }
+  },
+  subtitle: {
+    text: '20',
+    floating: true,
+    align: 'right',
+    offsetY: 0,
+    style: {
+      fontSize: '22px'
+    }
+  },
+  legend: {
+    show: true,
+    floating: true,
+    horizontalAlign: 'left',
+    onItemClick: {
+      toggleDataSeries: false
+    },
+    position: 'top',
+    offsetY: -33,
+    offsetX: 60
+  },
+}
+
+var chartLine = new ApexCharts(
+  document.querySelector("#linechart"),
+  optionsLine
+);
+chartLine.render()
+
+var optionsCircle = {
+  chart: {
+    type: 'radialBar',
+    height: 320,
+    offsetY: -30,
+    offsetX: 20
+  },
+  plotOptions: {
+    radialBar: {
+      size: undefined,
+      inverseOrder: false,
+      hollow: {
+        margin: 5,
+        size: '48%',
+        background: 'transparent',
+      },
+      track: {
+        show: true,
+        background: '#40475D',
+        strokeWidth: '10%',
+        opacity: 1,
+        margin: 3, // margin is in pixels
+      },
+
+
+    },
+  },
+  series: [71, 63],
+  labels: ['Device 1', 'Device 2'],
+  legend: {
+    show: true,
+    position: 'left',
+    offsetX: -40,
+    offsetY: -10,
+    formatter: function (val, opts) {
+      return val + " - " + opts.w.globals.series[opts.seriesIndex] + '%'
+    }
+  },
+  fill: {
+    type: 'gradient',
+    gradient: {
+      shade: 'dark',
+      type: 'horizontal',
+      shadeIntensity: 0.5,
+      inverseColors: true,
+      opacityFrom: 1,
+      opacityTo: 1,
+      stops: [0, 100]
+    }
+  }
+}
+
+var chartCircle = new ApexCharts(document.querySelector('#circlechart'), optionsCircle);
+chartCircle.render();
+
+var optionsProgress1 = {
+  chart: {
+    height: 70,
+    type: 'bar',
+    stacked: true,
+    sparkline: {
+      enabled: true
+    }
+  },
+  plotOptions: {
+    bar: {
+      horizontal: true,
+      barHeight: '20%',
+      colors: {
+        backgroundBarColors: ['#40475D']
+      }
+    },
+  },
+  stroke: {
+    width: 0,
+  },
+  series: [{
+    name: 'Process 1',
+    data: [44]
+  }],
+  title: {
+    floating: true,
+    offsetX: -10,
+    offsetY: 5,
+    text: 'Process 1'
+  },
+  subtitle: {
+    floating: true,
+    align: 'right',
+    offsetY: 0,
+    text: '44%',
+    style: {
+      fontSize: '20px'
+    }
+  },
+  tooltip: {
+    enabled: false
+  },
+  xaxis: {
+    categories: ['Process 1'],
+  },
+  yaxis: {
+    max: 100
+  },
+  fill: {
+    opacity: 1
+  }
+}
+
+var chartProgress1 = new ApexCharts(document.querySelector('#progress1'), optionsProgress1);
+chartProgress1.render();
+
+
+var optionsProgress2 = {
+  chart: {
+    height: 70,
+    type: 'bar',
+    stacked: true,
+    sparkline: {
+      enabled: true
+    }
+  },
+  plotOptions: {
+    bar: {
+      horizontal: true,
+      barHeight: '20%',
+      colors: {
+        backgroundBarColors: ['#40475D']
+      }
+    },
+  },
+  colors: ['#17ead9'],
+  stroke: {
+    width: 0,
+  },
+  series: [{
+    name: 'Process 2',
+    data: [80]
+  }],
+  title: {
+    floating: true,
+    offsetX: -10,
+    offsetY: 5,
+    text: 'Process 2'
+  },
+  subtitle: {
+    floating: true,
+    align: 'right',
+    offsetY: 0,
+    text: '80%',
+    style: {
+      fontSize: '20px'
+    }
+  },
+  tooltip: {
+    enabled: false
+  },
+  xaxis: {
+    categories: ['Process 2'],
+  },
+  yaxis: {
+    max: 100
+  },
+  fill: {
+    type: 'gradient',
+    gradient: {
+      inverseColors: false,
+      gradientToColors: ['#6078ea']
+    }
+  },
+}
+
+var chartProgress2 = new ApexCharts(document.querySelector('#progress2'), optionsProgress2);
+chartProgress2.render();
+
+
+var optionsProgress3 = {
+  chart: {
+    height: 70,
+    type: 'bar',
+    stacked: true,
+    sparkline: {
+      enabled: true
+    }
+  },
+  plotOptions: {
+    bar: {
+      horizontal: true,
+      barHeight: '20%',
+      colors: {
+        backgroundBarColors: ['#40475D']
+      }
+    },
+  },
+  colors: ['#f02fc2'],
+  stroke: {
+    width: 0,
+  },
+  series: [{
+    name: 'Process 3',
+    data: [74]
+  }],
+  fill: {
+    type: 'gradient',
+    gradient: {
+      gradientToColors: ['#6094ea']
+    }
+  },
+  title: {
+    floating: true,
+    offsetX: -10,
+    offsetY: 5,
+    text: 'Process 3'
+  },
+  subtitle: {
+    floating: true,
+    align: 'right',
+    offsetY: 0,
+    text: '74%',
+    style: {
+      fontSize: '20px'
+    }
+  },
+  tooltip: {
+    enabled: false
+  },
+  xaxis: {
+    categories: ['Process 3'],
+  },
+  yaxis: {
+    max: 100
+  },
+}
+
+var chartProgress3 = new ApexCharts(document.querySelector('#progress3'), optionsProgress3);
+chartProgress3.render();
+
+window.setInterval(function () {
+
+  iteration++;
+
+  chartColumn.updateSeries([{
+    data: [...chartColumn.w.config.series[0].data,
+      [
+        chartColumn.w.globals.maxX + 210000,
+        getRandom()
+      ]
+    ]
+  }])
+
+  chartLine.updateSeries([{
+    data: [...chartLine.w.config.series[0].data,
+      [
+        chartLine.w.globals.maxX + 300000,
+        getRandom()
+      ]
+    ]
+  }, {
+    data: [...chartLine.w.config.series[1].data,
+      [
+        chartLine.w.globals.maxX + 300000,
+        getRandom()
+      ]
+    ]
+  }])
+
+  chartCircle.updateSeries([getRangeRandom({ min: 10, max: 100 }), getRangeRandom({ min: 10, max: 100 })])
+
+  var p1Data = getRangeRandom({ min: 10, max: 100 });
+  chartProgress1.updateOptions({
+    series: [{
+      data: [p1Data]
+    }],
+    subtitle: {
+      text: p1Data + "%"
+    }
+  })
+
+  var p2Data = getRangeRandom({ min: 10, max: 100 });
+  chartProgress2.updateOptions({
+    series: [{
+      data: [p2Data]
+    }],
+    subtitle: {
+      text: p2Data + "%"
+    }
+  })
+
+  var p3Data = getRangeRandom({ min: 10, max: 100 });
+  chartProgress3.updateOptions({
+    series: [{
+      data: [p3Data]
+    }],
+    subtitle: {
+      text: p3Data + "%"
+    }
+  })
+
+
+
+}, 3000)
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/realtime/assets/styles.css

+
+body {
+  background: #1B213B;
+  color: #777;
+  font-family: Montserrat, Arial, sans-serif;
+}
+
+.body-bg {
+  background: #F3F4FA !important;
+}
+
+h1, h2, h3, h4, h5, h6, strong {
+  font-weight: 600;
+}
+
+.box .apexcharts-xaxistooltip {
+  background: #1B213B;
+  color: #fff;
+}
+
+.content-area {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.box {
+  background-color: #262D47;
+  padding: 25px 25px; 
+  border-radius: 4px; 
+}
+
+.columnbox {
+  padding-right: 15px;
+}
+.radialbox {
+  max-height: 333px;
+  margin-bottom: 60px;
+}
+
+.apexcharts-legend-series tspan:nth-child(3) {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.edit-on-codepen {
+  text-align: right;
+  width: 100%;
+  padding: 0 20px 40px;
+  position: relative;
+  top: -30px;
+  cursor: pointer;
+}
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/realtime/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Dashboard - Dark Style</title>
+
+	
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
+	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="assets/styles.css">
+
+
+</head>
+
+<body>
+
+
+	<div id="wrapper">
+
+		<div class="content-area">
+			<div class="container-fluid">
+				<div class="main">
+
+					
+					<div class="row mt-4">
+						<div class="col-md-5">
+								<div class="box columnbox mt-4">
+									<div id="columnchart"> </div>
+								</div>
+						</div>
+						<div class="col-md-7">
+								<div class="box  mt-4">
+									<div id="linechart"> </div>
+								</div>
+						</div>
+					</div>
+
+					<div class="row">
+						<div class="col-md-5">
+								<div class="box radialbox mt-4">
+										<div id="circlechart"> </div>
+									</div>
+						</div>
+						<div class="col-md-7">
+								<div class="box mt-4">
+									<div class="mt-4">
+										<div id="progress1"></div>
+									</div>
+									<div class="mt-4">
+										<div id="progress2"></div>
+									</div>
+									<div class="mt-4">
+										<div id="progress3"></div>
+									</div>
+								</div>
+						</div>
+					</div>
+
+					<div class="row">
+						<div class="float-right edit-on-codepen">
+							<a target="_blank" href="https://codepen.io/apexcharts/pen/pxZKqL"><img src="assets/edit-on-codepen.png" alt="Edit on Codepen"></a>
+						</div>
+					</div>
+				</div>
+
+			</div>
+		</div>
+	</div>
+
+
+
+	</div>
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+	<script src="assets/scripts.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/heatmap/basic.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Simple HeatMap</title>
+
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <style>
+        #chart {
+            max-width: 650px;
+            margin: 35px auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="chart">
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+    <script>
+        function generateData(count, yrange) {
+            var i = 0;
+            var series = [];
+            while (i < count) {
+                var x = 'w' + (i + 1).toString();
+                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+                series.push({
+                    x: x,
+                    y: y
+                });
+                i++;
+            }
+            return series;
+        }
+
+
+        var options = {
+            chart: {
+                height: 350,
+                type: 'heatmap',
+            },
+            dataLabels: {
+                enabled: false
+            },
+            colors: ["#008FFB"],
+            series: [{
+                    name: 'Metric1',
+                    data: generateData(18, {
+                        min: 0,
+                        max: 90
+                    })
+                },
+                {
+                    name: 'Metric2',
+                    data: generateData(18, {
+                        min: 0,
+                        max: 90
+                    })
+                },
+                {
+                    name: 'Metric3',
+                    data: generateData(18, {
+                        min: 0,
+                        max: 90
+                    })
+                },
+                {
+                    name: 'Metric4',
+                    data: generateData(18, {
+                        min: 0,
+                        max: 90
+                    })
+                },
+                {
+                    name: 'Metric5',
+                    data: generateData(18, {
+                        min: 0,
+                        max: 90
+                    })
+                },
+                {
+                    name: 'Metric6',
+                    data: generateData(18, {
+                        min: 0,
+                        max: 90
+                    })
+                },
+                {
+                    name: 'Metric7',
+                    data: generateData(18, {
+                        min: 0,
+                        max: 90
+                    })
+                },
+                {
+                    name: 'Metric8',
+                    data: generateData(18, {
+                        min: 0,
+                        max: 90
+                    })
+                },
+                {
+                    name: 'Metric9',
+                    data: generateData(18, {
+                        min: 0,
+                        max: 90
+                    })
+                }
+            ],
+            title: {
+                text: 'HeatMap Chart (Single color)'
+            },
+
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#chart"),
+            options
+        );
+
+        chart.render();
+    </script>
+</body>
+
+</html>
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/heatmap/color-range.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Range HeatMap</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="chart">
+
+  </div>
+
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+  <script>
+    function generateData(count, yrange) {
+      var i = 0;
+      var series = [];
+      while (i < count) {
+        var x = (i + 1).toString();
+        var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+        series.push({
+          x: x,
+          y: y
+        });
+        i++;
+      }
+      return series;
+    }
+
+
+    var options = {
+      chart: {
+        height: 350,
+        type: 'heatmap',
+      },
+      plotOptions: {
+        heatmap: {
+          shadeIntensity: 0.5,
+
+          colorScale: {
+            ranges: [{
+                from: -30,
+                to: 5,
+                name: 'low',
+                color: '#00A100'
+              },
+              {
+                from: 6,
+                to: 20,
+                name: 'medium',
+                color: '#128FD9'
+              },
+              {
+                from: 21,
+                to: 45,
+                name: 'high',
+                color: '#FFB200'
+              },
+              {
+                from: 46,
+                to: 55,
+                name: 'extreme',
+                color: '#FF0000'
+              }
+            ]
+          }
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      series: [{
+          name: 'Jan',
+          data: generateData(20, {
+            min: -30,
+            max: 55
+          })
+        },
+        {
+          name: 'Feb',
+          data: generateData(20, {
+            min: -30,
+            max: 55
+          })
+        },
+        {
+          name: 'Mar',
+          data: generateData(20, {
+            min: -30,
+            max: 55
+          })
+        },
+        {
+          name: 'Apr',
+          data: generateData(20, {
+            min: -30,
+            max: 55
+          })
+        },
+        {
+          name: 'May',
+          data: generateData(20, {
+            min: -30,
+            max: 55
+          })
+        },
+        {
+          name: 'Jun',
+          data: generateData(20, {
+            min: -30,
+            max: 55
+          })
+        },
+        {
+          name: 'Jul',
+          data: generateData(20, {
+            min: -30,
+            max: 55
+          })
+        },
+        {
+          name: 'Aug',
+          data: generateData(20, {
+            min: -30,
+            max: 55
+          })
+        },
+        {
+          name: 'Sep',
+          data: generateData(20, {
+            min: -30,
+            max: 55
+          })
+        }
+      ],
+      title: {
+        text: 'HeatMap Chart with Color Range'
+      },
+
+    }
+
+    var chart = new ApexCharts(
+      document.querySelector("#chart"),
+      options
+    );
+
+    chart.render();
+  </script>
+</body>
+
+</html>
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/heatmap/multiple-color-scales-flipped.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Simple HeatMap</title>
+
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <style>
+        #chart {
+            max-width: 650px;
+            margin: 35px auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="chart">
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+    <script>
+        function generateData(count, yrange) {
+            var i = 0;
+            var series = [];
+            while (i < count) {
+                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+                series.push(y);
+                i++;
+            }
+            return series;
+        }
+
+        var data = [{
+                name: '10:00',
+                data: generateData(15, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: '10:30',
+                data: generateData(15, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: '11:00',
+                data: generateData(15, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: '11:30',
+                data: generateData(15, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: '12:00',
+                data: generateData(15, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: '12:30',
+                data: generateData(15, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: '13:00',
+                data: generateData(15, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: '13:30',
+                data: generateData(15, {
+                    min: 0,
+                    max: 90
+                })
+            }
+        ]
+
+        data.reverse()
+
+
+        var options = {
+            chart: {
+                height: 350,
+                type: 'heatmap'
+            },
+            dataLabels: {
+                enabled: false
+            },
+            plotOptions: {
+                heatmap: {
+                    colorScale: {
+                        inverse: true
+                    }
+                }
+            },
+            colors: ["#F3B415", "#F27036", "#663F59", "#6A6E94", "#4E88B4", "#00A7C6", "#18D8D8", '#A9D794',
+                '#46AF78', '#A93F55', '#8C5E58', '#2176FF', '#33A1FD', '#7A918D', '#BAFF29'
+            ],
+            series: data,
+            xaxis: {
+                type: 'category',
+                categories: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13',
+                    'W14', 'W15'
+                ]
+            },
+
+            title: {
+                text: 'Color Scales flipped Vertically'
+            },
+
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#chart"),
+            options
+        );
+
+        chart.render();
+    </script>
+</body>
+
+</html>
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/heatmap/multiple-color.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Simple HeatMap</title>
+
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <style>
+        #chart {
+            max-width: 500px;
+            margin: 35px auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="chart">
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+    <script>
+        function generateData(count, yrange) {
+            var i = 0;
+            var series = [];
+            while (i < count) {
+                var x = (i + 1).toString();
+                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+                series.push({
+                    x: x,
+                    y: y
+                });
+                i++;
+            }
+            return series;
+        }
+
+        var data = [{
+                name: 'W1',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W2',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W3',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W4',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W5',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W6',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W7',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W8',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W9',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W10',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W11',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W12',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W13',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W14',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            },
+            {
+                name: 'W15',
+                data: generateData(8, {
+                    min: 0,
+                    max: 90
+                })
+            }
+        ]
+
+        data.reverse()
+
+        var colors = ["#F3B415", "#F27036", "#663F59", "#6A6E94", "#4E88B4", "#00A7C6", "#18D8D8", '#A9D794','#46AF78', '#A93F55', '#8C5E58', '#2176FF', '#33A1FD', '#7A918D', '#BAFF29'
+            ]
+
+            colors.reverse()
+
+
+        var options = {
+            chart: {
+                height: 450,
+                type: 'heatmap',
+            },
+            dataLabels: {
+                enabled: false
+            },
+            colors: colors,
+            series: data,
+            xaxis: {
+                type: 'category',
+                categories: ['10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '01:00', '01:30']
+            },
+            title: {
+                text: 'HeatMap Chart (Different color shades for each series)'
+            },
+            grid: {
+                padding: {
+                    right: 20
+                }
+            }
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#chart"),
+            options
+        );
+
+        chart.render();
+    </script>
+</body>
+
+</html>
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/heatmap/rounded.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Simple HeatMap</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="chart">
+
+  </div>
+
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+  <script>
+    function generateData(count, yrange) {
+      var i = 0;
+      var series = [];
+      while (i < count) {
+        var x = (i + 1).toString();
+        var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+        series.push({
+          x: x,
+          y: y
+        });
+        i++;
+      }
+      return series;
+    }
+
+
+    var options = {
+      chart: {
+        height: 350,
+        type: 'heatmap',
+      },
+      stroke: {
+        width: 0
+      },
+      plotOptions: {
+        heatmap: {
+          radius: 30,
+          enableShades: false,
+          colorScale: {
+            ranges: [{
+                from: 0,
+                to: 50,
+                color: '#008FFB'
+              },
+              {
+                from: 51,
+                to: 100,
+                color: '#00E396'
+              },
+            ],
+          },
+
+        }
+      },
+      dataLabels: {
+        enabled: true,
+        style: {
+          colors: ['#fff']
+        }
+      },
+      series: [{
+          name: 'Metric1',
+          data: generateData(20, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric2',
+          data: generateData(20, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric3',
+          data: generateData(20, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric4',
+          data: generateData(20, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric5',
+          data: generateData(20, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric6',
+          data: generateData(20, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric7',
+          data: generateData(20, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric8',
+          data: generateData(20, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric8',
+          data: generateData(20, {
+            min: 0,
+            max: 90
+          })
+        }
+      ],
+
+      xaxis: {
+        type: 'category',
+      },
+      title: {
+        text: 'Rounded (Range without Shades)'
+      },
+
+    }
+
+    var chart = new ApexCharts(
+      document.querySelector("#chart"),
+      options
+    );
+
+    chart.render();
+  </script>
+</body>
+
+</html>
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/line/basic-line.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Basic Line Chart</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div id="chart">
+
+  </div>
+
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+  <script>
+    var options = {
+      chart: {
+        toolbar: {
+          show: true
+        }
+      },
+      grid: {
+        padding: {
+          right: 30,
+          left: 30
+        }
+      },
+      dataLabels: {
+        enabled: true,
+        formatter: v => v
+      },
+      stroke: {
+        curve: "smooth"
+      },
+      xaxis: {
+        type: "categories",
+        categories: ["апр. 2017", "май 2017", "июнь 2017", "июль 2017", "авг. 2017", "сент. 2017", "окт. 2017",
+          "нояб. 2017", "дек. 2017", "янв. 2018", "февр. 2018", "март 2018", "апр. 2018", "май 2018", "июнь 2018",
+          "июль 2018", "авг. 2018", "сент. 2018", "окт. 2018", "нояб. 2018", "дек. 2018", "янв. 2019", "февр. 2019",
+          "март 2019"
+        ],
+        title: {
+          text: "Месяц"
+        }
+      },
+      yaxis: {
+        labels: {
+          formatter: v => v
+        }
+      },
+      markers: {
+        size: 5
+      },
+      series: [{
+        name: "График",
+        data: [21346, 19770, 18583, 14256, 16651, 16798, 19265, 20404, 32267, 14006, 23277, 23930, 22089, 19245, 17401, 14866, 17900, 16928, 20711, 19641, 29243, 9872, 22103, 5572
+        ]
+      }]
+    }
+
+    var chart = new ApexCharts(
+      document.querySelector("#chart"),
+      options
+    );
+
+    chart.render();
+
+  </script>
+</body>
+
+</html>

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/line/brush-charts.html

+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Syncing charts</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #wrapper {
+      padding-top: 20px;
+      padding-left: 10px;
+      background: #fff;
+      border: 1px solid #ddd;
+      box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.1);
+      max-width: 650px;
+      margin: 35px auto;
+    }
+
+    #chart-line {
+      position: relative;
+      margin-top: -40px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="wrapper">
+    <div id="chart-line2">
+
+    </div>
+    <div id="chart-line">
+
+    </div>
+  </div>
+
+
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+  <script>
+
+    var data = generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 185, {
+      min: 30,
+      max: 90
+    })
+    var optionsline2 = {
+      chart: {
+        id: 'chart2',
+        type: 'line',
+        height: 230,
+        toolbar: {
+          autoSelected: 'pan',
+          show: false
+        }
+      },
+      colors: ['#546E7A'],
+      stroke: {
+        width: 3
+      },
+      dataLabels: {
+        enabled: false
+      },
+      fill: {
+        opacity: 1,
+      },
+      markers: {
+        size: 0
+      },
+      series: [{
+        data: data
+      }],
+      xaxis: {
+        type: 'datetime'
+      }
+    }
+
+    var chartline2 = new ApexCharts(
+      document.querySelector("#chart-line2"),
+      optionsline2
+    );
+
+    chartline2.render();
+
+    var options = {
+      chart: {
+        id: 'chart1',
+        height: 130,
+        type: 'area',
+        brush:{
+          target: 'chart2',
+          enabled: true
+        },
+        selection: {
+          enabled: true,
+          xaxis: {
+            min: new Date('19 Jun 2017').getTime(),
+            max: new Date('14 Aug 2017').getTime()
+          }
+        },       
+      },
+      colors: ['#008FFB'],
+      series: [{
+        data: data
+      }],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          opacityFrom: 0.91,
+          opacityTo: 0.1,
+        }
+      },
+      xaxis: {
+        type: 'datetime',
+        tooltip: {
+          enabled: false
+        }
+      },
+      yaxis: {
+        tickAmount: 2
+      }
+    }
+
+    var chart = new ApexCharts(
+      document.querySelector("#chart-line"),
+      options
+    );
+
+    chart.render();
+
+    /*
+      // this function will generate output in this format
+      // data = [
+          [timestamp, 23],
+          [timestamp, 33],
+          [timestamp, 12]
+          ...
+      ]
+    */
+    function generateDayWiseTimeSeries(baseval, count, yrange) {
+      var i = 0;
+      var series = [];
+      while (i < count) {
+        var x = baseval;
+        var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+        series.push([x, y]);
+        baseval += 86400000;
+        i++;
+      }
+      return series;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/line/dashed-line.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Dashed Line Chart</title>
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div id="chart">
+
+  </div>
+
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+  <script>
+    var options = {
+
+      "annotations": {
+        "xaxis": [{
+            "x": 0.9991725030347123,
+            "x2": null,
+            "strokeDashArray": 2,
+            "fillColor": "#c2c2c2",
+            "borderColor": "#00E396",
+            "opacity": 0.3,
+            "offsetX": 0,
+            "offsetY": 0,
+            "label": {
+              "borderColor": "#00E396",
+              "borderWidth": 1,
+              "text": "Average Profit",
+              "textAnchor": "middle",
+              "orientation": "vertical",
+              "position": "top",
+              "offsetX": 0,
+              "offsetY": 0,
+              "style": {
+                "background": "#00E396",
+                "color": "#fff",
+                "fontSize": "11px",
+                "cssClass": "",
+                "padding": {
+                  "left": 5,
+                  "right": 5,
+                  "top": 2,
+                  "bottom": 2
+                }
+              }
+            }
+          },
+          {
+            "x": 1.000032771264139,
+            "x2": null,
+            "strokeDashArray": 2,
+            "fillColor": "#c2c2c2",
+            "borderColor": "#775DD0",
+            "opacity": 0.3,
+            "offsetX": 0,
+            "offsetY": 0,
+            "label": {
+              "borderColor": "#775DD0",
+              "borderWidth": 1,
+              "text": "Median Profit",
+              "textAnchor": "middle",
+              "orientation": "vertical",
+              "position": "top",
+              "offsetX": 0,
+              "offsetY": 0,
+              "style": {
+                "background": "#775DD0",
+                "color": "#fff",
+                "fontSize": "11px",
+                "cssClass": "",
+                "padding": {
+                  "left": 5,
+                  "right": 5,
+                  "top": 2,
+                  "bottom": 2
+                }
+              }
+            }
+          }
+        ],
+        "yaxis": [],
+        "points": []
+      },
+      "chart": {
+        "id": "PortFolioChart",
+        type: 'bar',
+        "animations": {
+          "enabled": false
+        },
+        "stacked": false,
+        "background": "#fff",
+        "toolbar": {
+          "show": false,
+          "autoSelected": "pan"
+        }
+      },
+      "dataLabels": {
+        "enabled": false
+      },
+      "plotOptions": {
+        "bar": {
+          "columnWidth": "100%"
+        }
+      },
+      "xaxis": {
+        "labels": {
+          formatter: function(val) {
+            return val.toFixed(3)
+          }
+        },
+        "min": 0.993,
+        "max": 1.0019999999999998
+      },
+      "yaxis": {
+        "tickAmount": 3
+      },
+      "series": [{
+        "data": [
+          [
+            0.994,
+            1
+          ],
+          [
+            0.999,
+            1
+          ],
+          [
+            1,
+            4
+          ],
+          [
+            1.001,
+            1
+          ]
+        ],
+        "name": "Number of trades"
+      }]
+    }
+    var chart = new ApexCharts(
+      document.querySelector("#chart"),
+      options
+    );
+
+    chart.render();
+
+  </script>
+</body>
+
+</html>

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/line/gradient-line.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Gradient Line</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart,
+    #chart-gradient {
+      max-width: 300px;
+      margin: 35px auto;
+    }
+
+  </style>
+</head>
+
+<body>
+
+  <div class="container">
+    <div id="chart">
+    </div>
+
+    <div id="chart-gradient">
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+    <script>
+      var options = {
+        chart: {
+          height: 200,
+          width: "100%",
+          type: "line"
+        },
+        series: [{
+          name: "Series 1",
+          data: [2, 2, 2, 2]
+        }]
+      };
+
+      var optionsGradient = {
+        chart: {
+          height: 200,
+          width: "100%",
+          type: "line"
+        },
+        fill: {
+           type: "gradient",
+        },
+        series: [{
+          name: "Series 1",
+          data: [1, 1, 1, 1, 1, 1, 1]
+        }],
+        tooltip: {
+            y: {
+                formatter: function(val) {
+                    return val
+                }
+            }
+        }
+      };
+
+      var chart = new ApexCharts(document.querySelector("#chart"), options);
+      chart.render();
+
+      var chartGradient = new ApexCharts(document.querySelector("#chart-gradient"), optionsGradient);
+      chartGradient.render();
+
+    </script>
+</body>
+
+</html>

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/line/line-with-annotations.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Line Chart with Annotations</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div id="chart">
+
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="../../assets/stock-prices.js"></script>
+
+  <script>
+    var options = {
+      annotations: {
+        yaxis: [{
+          y: 8200,
+          borderColor: '#00E396',
+          label: {
+            borderColor: '#00E396',
+            style: {
+              color: '#fff',
+              background: '#00E396',
+            },
+            text: 'Support',
+          }
+        }, {
+          y: 8600,
+          y2: 9000,
+          borderColor: '#000',
+          fillColor: '#FEB019',
+          opacity: 0.2,
+          label: {
+            borderColor: '#333',
+            style: {
+              fontSize: '10px',
+              color: '#333',
+              background: '#FEB019',
+            },
+            text: 'Y-axis range',
+          }
+        }],
+        xaxis: [{
+          x: new Date('23 Nov 2017').getTime(),
+          strokeDashArray: 0,
+          borderColor: '#775DD0',
+          label: {
+            borderColor: '#775DD0',
+            style: {
+              color: '#fff',
+              background: '#775DD0',
+            },
+            text: 'Anno Test',
+          }
+        }, {
+          x: new Date('26 Nov 2017').getTime(),
+          x2: new Date('28 Nov 2017').getTime(),
+          fillColor: '#B3F7CA',
+          opacity: 0.4,
+          label: {
+            borderColor: '#B3F7CA',
+            style: {
+              fontSize: '10px',
+              color: '#fff',
+              background: '#00E396',
+            },
+            offsetY: -10,
+            text: 'X-axis range',
+          }
+        }],
+        points: [{
+          x: new Date('01 Dec 2017').getTime(),
+          y: 8607.55,
+          marker: {
+            size: 8,
+            fillColor: '#fff',
+            strokeColor: 'red',
+            radius: 2,
+            cssClass: 'apexcharts-custom-class'
+          },
+          label: {
+            borderColor: '#FF4560',
+            offsetY: 0,
+            style: {
+              color: '#fff',
+              background: '#FF4560',
+            },
+
+            text: 'Point Annotation',
+          }
+        }]
+      },
+      chart: {
+        height: 350,
+        type: 'line',
+        id: 'areachart-2'
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        curve: 'straight'
+      },
+      grid: {
+        padding: {
+          right: 30,
+          left: 20
+        }
+      },
+      series: [{
+        data: series.monthDataSeries1.prices
+      }],
+      title: {
+        text: 'Line with Annotations',
+        align: 'left'
+      },
+      labels: series.monthDataSeries1.dates,
+      xaxis: {
+        type: 'datetime',
+      },
+    }
+
+    var chart = new ApexCharts(
+      document.querySelector("#chart"),
+      options
+    );
+
+    chart.render();
+
+  </script>
+</body>
+
+</html>

public/ThirdParty/apexcharts-bundle/samples/vanilla-js/line/line-with-data-labels.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Line with Data Labels</title>
+
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <style>
+        #chart {
+            max-width: 650px;
+            margin: 35px auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="chart">
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+
+    <script>
+        var options = {
+            chart: {
+                height: 350,
+                type: 'line',
+                shadow: {
+                    enabled: true,
+                    color: '#000',
+                    top: 18,
+                    left: 7,
+                    blur: 10,
+                    opacity: 1
+                },
+                toolbar: {
+                    show: false
+                }
+            },
+            colors: ['#77B6EA', '#545454'],
+            dataLabels: {
+                enabled: true,
+            },
+            stroke: {
+                curve: 'smooth'
+            },
+            series: [{
+                    name: "High - 2013",
+                    data: [28, 29, 33, 36, 32, 32, 33]
+                },
+                {
+                    name: "Low - 2013",
+                    data: [12, 11, 14, 18, 17, 13, 13]
+                }
+            ],
+            title: {
+                text: 'Average High & Low Temperature',
+                align: 'left'
+            },
+            grid: {
+                borderColor: '#e7e7e7',
+                row: {
+                    colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+                    opacity: 0.5
+                },
+            },
+            markers: {
+                
+                size: 6
+            },
+            xaxis: {
+                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+                title: {
+                    text: 'Month'
+                }
+            },
+            yaxis: {
+                title: {
+                    text: 'Temperature'
+                },
+                min: 5,
+                max: 40
+            },
+            legend: {
+                position: 'top',
+                horizontalAlign: 'right',
+                floating: true,
+                offsetY: -25,
+                offsetX: -5
+            }
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#chart"),
+            options
+        );
+
+        chart.render();
+    </script>
+</body>
+
+</html>
\ No newline at end of file