Added Viewer

27ca663e · Rushikesh Padsala · e21f1f45 · 27ca663e · 27ca663e · 27ca663e
Commit 27ca663e authored 4 years ago by Rushikesh Padsala
Hide whitespace changes
Inline Side-by-side

Showing

with 2881 additions and 0 deletions
+2881 -0
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/basic-line.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/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 - React</title>
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class LineChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            chart: {
+                  zoom: {
+                      enabled: false
+                  }
+              },
+              dataLabels: {
+                  enabled: false
+              },
+              stroke: {
+                  curve: 'straight'
+              },
+              title: {
+                  text: 'Product Trends by Month',
+                  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', 'Jul', 'Aug', 'Sep'],
+              }
+          },
+          series: [{
+              name: "Desktops",
+              data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
+          }],
+        }
+      }
+
+      render() {
+
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(LineChart), domContainer);
+
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/brush-charts.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/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>Brush Chart - React</title>
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+  
+  <style>
+    #chart1, #chart2 {
+    max-width: 650px;
+    margin: 35px auto;
+  }
+
+    #chart2 {
+    position: relative;
+    margin-top: -70px;
+    margin-bottom: 0px;
+  }
+
+  #app {
+    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;
+  }
+</style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;charts&quot;&gt;&#10;            &lt;div id=&quot;chart1&quot;&gt;&#10;              &lt;ReactApexChart options={this.state.chartOptionsArea} series={this.state.series} type=&quot;line&quot; height=&quot;230&quot; /&gt;&#10;            &lt;/div&gt;&#10;            &lt;div id=&quot;chart2&quot;&gt;&#10;              &lt;ReactApexChart options={this.state.chartOptionsBrush} series={this.state.series} type=&quot;area&quot; height=&quot;130&quot; /&gt;&#10;            &lt;/div&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class LineChart extends React.Component {
+    
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        chartOptionsArea: {
+          chart: {
+            id: 'chartArea',
+            toolbar: {
+              autoSelected: 'pan',
+              show: false
+            }
+          },
+          colors: ['#546E7A'],
+          stroke: {
+            width: 3
+          },
+          dataLabels: {
+            enabled: false
+          },
+          fill: {
+            opacity: 1,
+          },
+          markers: {
+            size: 0
+          },
+          xaxis: {
+            type: 'datetime'
+          }
+        },
+        chartOptionsBrush: {
+          chart: {
+            id: 'chartBrush',
+            brush: {
+              target: 'chartArea',
+              enabled: true
+            },
+            selection: {
+              enabled: true,
+              xaxis: {
+                min: new Date('19 Jun 2017').getTime(),
+                max: new Date('14 Aug 2017').getTime()
+              }
+            },
+          },
+          colors: ['#008FFB'],
+          fill: {
+            type: 'gradient',
+            gradient: {
+              opacityFrom: 0.91,
+              opacityTo: 0.1,
+            }
+          },
+          xaxis: {
+            type: 'datetime',
+            tooltip: {
+              enabled: false
+            }
+          },
+          yaxis: {
+            tickAmount: 2
+          }
+      },
+      series: [{
+          data: this.generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 185, {
+            min: 30,
+            max: 90
+          })
+        }], 
+      }
+
+    }
+
+    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;
+    }
+
+    render() {
+
+      return (
+        <div>
+          <div id="charts">
+            <div id="chart1">
+              <ReactApexChart options={this.state.chartOptionsArea} series={this.state.series} type="line" height="230" />
+            </div>
+            <div id="chart2">
+              <ReactApexChart options={this.state.chartOptionsBrush} series={this.state.series} type="area" height="130" />
+            </div>
+          </div>
+          <div id="html-dist">
+          </div>
+        </div>
+      );
+    }
+  }
+
+  const domContainer = document.querySelector('#app');
+  ReactDOM.render(React.createElement(LineChart), domContainer);
+
+</script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/dashed-line.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/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 - React</title>
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class LineChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            chart: {
+            zoom: {
+              enabled: false
+            },
+          },
+          dataLabels: {
+            enabled: false
+          },
+          stroke: {
+            width: [5, 7, 5],
+            curve: 'straight',
+            dashArray: [0, 8, 5]
+          },
+
+          title: {
+            text: 'Page Statistics',
+            align: 'left'
+          },
+          markers: {
+            size: 0,
+            
+            hover: {
+              sizeOffset: 6
+            }
+          },
+          xaxis: {
+            categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
+              '10 Jan', '11 Jan', '12 Jan'
+            ],
+          },
+          tooltip: {
+            y: [{
+              title: {
+                formatter: function (val) {
+                  return val + " (mins)"
+                }
+              }
+            }, {
+              title: {
+                formatter: function (val) {
+                  return val + " per session"
+                }
+              }
+            }, {
+              title: {
+                formatter: function (val) {
+                  return val;
+                }
+              }
+            }]
+          },
+          grid: {
+            borderColor: '#f1f1f1',
+          }
+          },
+          series: [{
+            name: "Session Duration",
+            data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
+          },
+          {
+            name: "Page Views",
+            data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
+          },
+          {
+            name: 'Total Visits',
+            data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
+          }
+        ],
+        }
+      }
+
+      render() {
+
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(LineChart), domContainer);
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/gradient-line.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/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>Basic Line - React</title>
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+    max-width: 650px;
+    margin: 35px auto;
+  }
+</style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+class LineChart extends React.Component {
+    
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        options: {
+          chart: {
+            type: 'line',
+            shadow: {
+              enabled: false,
+              color: '#bbb',
+              top: 3,
+              left: 2,
+              blur: 3,
+              opacity: 1
+            },
+          },
+          stroke: {
+            width: 7,
+            curve: 'smooth'
+          },
+
+          xaxis: {
+            type: 'datetime',
+            categories: ['1/11/2000', '2/11/2000', '3/11/2000', '4/11/2000', '5/11/2000', '6/11/2000', '7/11/2000',
+              '8/11/2000', '9/11/2000', '10/11/2000', '11/11/2000', '12/11/2000', '1/11/2001', '2/11/2001',
+              '3/11/2001', '4/11/2001', '5/11/2001', '6/11/2001'
+            ],
+          },
+          title: {
+            text: 'Social Media',
+            align: 'left',
+            style: {
+              fontSize: "16px",
+              color: '#666'
+            }
+          },
+          fill: {
+            type: 'gradient',
+            gradient: {
+              shade: 'dark',
+              gradientToColors: ['#FDD835'],
+              shadeIntensity: 1,
+              type: 'horizontal',
+              opacityFrom: 1,
+              opacityTo: 1,
+              stops: [0, 100, 100, 100]
+            },
+          },
+          markers: {
+            size: 4,
+            opacity: 0.9,
+            colors: ["#FFA41B"],
+            strokeColor: "#fff",
+            strokeWidth: 2,
+             
+            hover: {
+              size: 7,
+            }
+          },
+          yaxis: {
+            min: -10,
+            max: 40,
+            title: {
+              text: 'Engagement',
+            },
+          }
+        },
+        series: [{
+          name: 'Likes',
+          data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5]
+        }],
+      }
+    }
+
+    render() {
+
+      return (
+        <div>
+          <div id="chart">
+            <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+          </div>
+          <div id="html-dist">
+          </div>
+        </div>
+      );
+    }
+  }
+
+  const domContainer = document.querySelector('#app');
+  ReactDOM.render(React.createElement(LineChart), domContainer);
+</script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-annotations.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/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>Basic Line - React</title>
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+
+  <style>
+      #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+  <script src="../../assets/stock-prices.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+class LineChart extends React.Component {
+  
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      options: {
+        annotations: {
+          yaxis: [{
+            y: 8200,
+            borderColor: '#00E396',
+            label: {
+              borderColor: '#00E396',
+              style: {
+                color: '#fff',
+                background: '#00E396',
+              },
+              text: 'Support',
+            }
+          }, {
+            y: 8600,
+            y2: 9000,
+            borderColor: '#FEB019',
+            opacity: 0.1,
+            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(),
+            borderColor: '#B3F7CA',
+            opacity: 0.5,
+            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
+          }
+        },
+
+        title: {
+          text: 'Line with Annotations',
+          align: 'left'
+        },
+        labels: series.monthDataSeries1.dates,
+        xaxis: {
+          type: 'datetime',
+        }
+      },
+      series: [{
+        data: series.monthDataSeries1.prices
+      }],
+    }
+  }
+
+  render() {
+
+    return (
+      <div>
+        <div id="chart">
+          <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+        </div>
+        <div id="html-dist">
+        </div>
+      </div>
+    );
+  }
+}
+
+const domContainer = document.querySelector('#app');
+ReactDOM.render(React.createElement(LineChart), domContainer);
+</script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-data-labels.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/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="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class LineChart extends React.Component {
+    
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        options: {
+          chart: {
+            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'
+          },
+          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
+          }
+        },
+        series: [
+          {
+            name: "High - 2013",
+            data: [28, 29, 33, 36, 32, 32, 33]
+          },
+          {
+            name: "Low - 2013",
+            data: [12, 11, 14, 18, 17, 13, 13]
+          }
+        ],
+      }
+    }
+
+    render() {
+
+      return (
+        <div>
+          <div id="chart">
+            <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+          </div>
+          <div id="html-dist">
+          </div>
+        </div>
+      );
+    }
+  }
+
+  const domContainer = document.querySelector('#app');
+  ReactDOM.render(React.createElement(LineChart), domContainer);
+
+</script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-image.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-image.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 Image Fill</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class LineChart extends React.Component {
+    
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        options: {
+          stroke: {
+            width: 5,
+            curve: 'smooth'
+          },
+          colors: ['#2e93fa'],
+
+          xaxis: {
+            categories: ['1990', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999',
+              '2000', '2001', '2002', '2003', '2004', '2005'
+            ],
+            labels: {
+              formatter: function (val) {
+                return val
+              }
+            }
+          },
+          title: {
+            text: 'Line Chart - Image fill',
+            align: 'left',
+            style: {
+              fontSize: "16px",
+            }
+          },
+          fill: {
+            type: 'image',
+            image: {
+              src: [
+                '../../assets/images/abstract.jpg'
+              ],
+              width: 800,
+              height: 800
+            },
+          },
+          markers: {
+            size: 0,
+            opacity: 0,
+            colors: ['#fff'],
+            strokeColor: "#2e93fa",
+            strokeWidth: 2,
+             
+            hover: {
+              size: 8,
+            }
+          },
+          yaxis: {
+            title: {
+              text: '$ (million)',
+            },
+          },
+          legend: {
+            position: 'top',
+            horizontalAlign: 'right',
+            floating: true,
+            offsetY: -25,
+            offsetX: -5
+          }
+      },
+      series: [
+        {
+          name: 'Dataset 2',
+          data: [10, 5, 20, 13, 15, 12, 13, 24, 24, 34, 7, 15, 10, 9, 26]
+        }
+      ],
+    }
+
+  }
+
+  render() {
+
+    return (
+      <div>
+        <div id="chart">
+          <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+        </div>
+        <div id="html-dist">
+        </div>
+      </div>
+    );
+  }
+}
+
+const domContainer = document.querySelector('#app');
+ReactDOM.render(React.createElement(LineChart), domContainer);
+
+</script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-missing-data.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-missing-data.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 missing data</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class LineChart extends React.Component {
+    
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        options: {
+          chart: {
+            zoom: {
+              enabled: false
+            },
+            animations: {
+              enabled: false
+            }
+          },
+          stroke: {
+            width: [5, 5, 4],
+            curve: 'straight'
+          },
+          title: {
+            text: 'Missing data (null values)'
+          }
+        },
+        series: [{
+          name: 'Peter',
+          data: [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9]
+        }, {
+          name: 'Johnny',
+          data: [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null]
+        }, {
+          name: 'David',
+          data: [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null]
+        }],
+      }
+    }
+
+    render() {
+
+      return (
+        <div>
+          <div id="chart">
+            <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+          </div>
+          <div id="html-dist">
+          </div>
+        </div>
+      );
+    }
+  }
+
+  const domContainer = document.querySelector('#app');
+  ReactDOM.render(React.createElement(LineChart), domContainer);
+
+</script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/logarithmic-line.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/line/logarithmic-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>Chart with Logarithmic Scale</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    var data = [{
+        x: 1994,
+        y: 2543763
+      },
+      {
+        x: 1995,
+        y: 4486659
+      },
+      {
+        x: 1996,
+        y: 7758386
+      },
+      {
+        x: 1997,
+        y: 12099221
+      },
+      {
+        x: 1998,
+        y: 18850762
+      },
+      {
+        x: 1999,
+        y: 28153765
+      },
+      {
+        x: 2000,
+        y: 41479495
+      },
+      {
+        x: 2001,
+        y: 50229224
+      },
+      {
+        x: 2002,
+        y: 66506501
+      },
+      {
+        x: 2003,
+        y: 78143598
+      },
+      {
+        x: 2004,
+        y: 91332777
+      },
+      {
+        x: 2005,
+        y: 103010128
+      },
+      {
+        x: 2006,
+        y: 116291681
+      },
+      {
+        x: 2007,
+        y: 137322698
+      },
+      {
+        x: 2008,
+        y: 157506752
+      },
+      {
+        x: 2009,
+        y: 176640381
+      },
+      {
+        x: 2010,
+        y: 202320297
+      },
+      {
+        x: 2011,
+        y: 223195735
+      },
+      {
+        x: 2012,
+        y: 249473624
+      },
+      {
+        x: 2013,
+        y: 272842810
+      },
+      {
+        x: 2014,
+        y: 295638556
+      },
+      {
+        x: 2015,
+        y: 318599615
+      },
+      {
+        x: 2016,
+        y: 342497123
+      }
+    ]
+
+    var labelFormatter = function (value) {
+      var val = Math.abs(value)
+      if (val >= 1000000) {
+        val = (val / 1000000).toFixed(1) + ' M';
+      }
+      return val;
+    }
+
+  class LineChart extends React.Component {
+  
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      options: {
+        chart: {
+            zoom: {
+              enabled: false
+            }
+          },
+          dataLabels: {
+            enabled: false
+          },
+          stroke: {
+            curve: 'straight'
+          },
+          title: {
+            text: 'Logarithmic Scale',
+            align: 'left'
+          },
+          xaxis: {
+            type: 'datetime'
+          },
+          yaxis: [{
+              min: 1000000,
+              max: 500000000,
+              tickAmount: 4,
+              logarithmic: true,
+              seriesName: 'Logarithmic',
+              labels: {
+                formatter: labelFormatter,
+              }
+            },
+            {
+              min: 1000000,
+              max: 500000000,
+              opposite: true,
+              tickAmount: 4,
+              seriesName: 'Linear',
+              labels: {
+                formatter: labelFormatter
+              }
+            }
+          ]
+      },
+      series: [{
+        name: "Logarithmic",
+        data: data
+      }, {
+        name: "Linear",
+        data: data
+      }],
+    }
+  }
+
+  render() {
+
+    return (
+      <div>
+        <div id="chart">
+          <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+        </div>
+        <div id="html-dist">
+        </div>
+      </div>
+    );
+  }
+}
+
+const domContainer = document.querySelector('#app');
+ReactDOM.render(React.createElement(LineChart), domContainer);
+
+</script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/realtime.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/line/realtime.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>Dynamic Updating Line Chart</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+<style>
+  #chart {
+    max-width: 650px;
+    margin: 35px auto;
+  }
+</style>
+</head>
+
+<body>
+<div id="app"></div>
+
+<div id="html">
+        &lt;div id=&quot;chart&quot;&gt;&#10;          &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;        &lt;/div&gt;
+</div>
+
+<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+<script type="text/babel">
+
+  var lastDate = 0;
+    var data = []
+
+    function getDayWiseTimeSeries(baseval, count, yrange) {
+      var i = 0;
+      while (i < count) {
+        var x = baseval;
+        var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+        data.push({
+          x,
+          y
+        });
+        lastDate = baseval
+        baseval += 86400000;
+        i++;
+      }
+    }
+
+    getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
+      min: 10,
+      max: 90
+    })
+
+    function getNewSeries(baseval, yrange) {
+      var newDate = baseval + 86400000;
+      lastDate = newDate
+      data.push({
+        x: newDate,
+        y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
+      })
+    }
+
+    function resetData() {
+      data = data.slice(data.length - 10, data.length);
+    }
+
+  class LineChart extends React.Component {
+  
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      options: {
+        chart: {
+            id: 'realtime',
+            animations: {
+              enabled: true,
+              easing: 'linear',
+              dynamicAnimation: {
+                speed: 2000
+              }
+            },
+            toolbar: {
+              show: false
+            },
+            zoom: {
+              enabled: false
+            }
+          },
+          dataLabels: {
+            enabled: false
+          },
+          stroke: {
+            curve: 'smooth'
+          },
+
+          title: {
+            text: 'Dynamic Updating Chart',
+            align: 'left'
+          },
+          markers: {
+            size: 0
+          },
+          xaxis: {
+            type: 'datetime',
+            range: 777600000,
+          },
+          yaxis: {
+            max: 100
+          },
+          legend: {
+            show: false
+          }
+      },
+      series: [{
+        data: data.slice()
+      }],
+    }
+  }
+  
+  componentDidMount() {
+    this.intervals()
+  }
+
+  intervals () {
+    window.setInterval(() => {
+      getNewSeries(lastDate, {
+        min: 10,
+        max: 90
+      })
+      
+      ApexCharts.exec('realtime', 'updateSeries', [{
+        data: data
+      }])
+    }, 2000)
+
+    // every 60 seconds, we reset the data 
+    window.setInterval(() => {
+      resetData()
+
+      ApexCharts.exec('realtime', 'updateSeries', [{
+        data: data
+      }], false, true)
+    }, 60000)
+  }
+
+  render() {
+
+    return (
+      <div>
+        <div id="chart">
+          <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+        </div>
+        <div id="html-dist">
+        </div>
+      </div>
+    );
+  }
+
+}
+
+const domContainer = document.querySelector('#app');
+ReactDOM.render(React.createElement(LineChart), domContainer);
+
+</script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/stepline.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/line/stepline.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>Stepline - React</title>
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class LineChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            chart: {
+              zoom: {
+                  enabled: false
+              }
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                curve: 'stepline'
+            },
+            title: {
+              text: 'Stepline Chart',
+              align: 'left'
+            },
+            markers: {
+              hover: {
+                sizeOffset: 4
+              }
+            },
+          },
+          series: [{
+            data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
+          }],
+        }
+      }
+
+      render() {
+
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(LineChart), domContainer);
+
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/syncing-charts.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/line/syncing-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;
+  }
+</style>
+</head>
+
+<body>
+<div id="app"></div>
+
+<div id="html">
+        &lt;div id=&quot;wrapper&quot;&gt;&#10;          &lt;div id=&quot;chart-line&quot;&gt;&#10;            &lt;ReactApexChart type=&quot;line&quot; height=&quot;160&quot;  options={this.state.chartOptionsLine1} series={this.state.series1}/&gt;&#10;          &lt;/div&gt;&#10;&#10;          &lt;div id=&quot;chart-line2&quot;&gt;&#10;            &lt;ReactApexChart type=&quot;line&quot; height=&quot;160&quot;  options={this.state.chartOptionsLine2} series={this.state.series2}/&gt;&#10;          &lt;/div&gt;&#10;&#10;          &lt;div id=&quot;chart-area&quot;&gt;&#10;            &lt;ReactApexChart type=&quot;area&quot; height=&quot;160&quot;  options={this.state.chartOptionsArea} series={this.state.series3}/&gt;&#10;          &lt;/div&gt;&#10;        &lt;/div&gt;
+</div>
+
+<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+<script type="text/babel">
+
+  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;
+    }
+
+    // The global window.Apex variable below can be used to set common options for all charts on the page
+    Apex = {
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        curve: 'straight'
+      },
+      toolbar: {
+        tools: {
+          selection: false
+        }
+      },
+      markers: {
+        size: 6,
+        hover: {
+          size: 10
+        }
+      },
+      tooltip: {
+        followCursor: false,
+        theme: 'dark',
+        x: {
+          show: false
+        },
+        marker: {
+          show: false
+        },
+        y: {
+          title: {
+            formatter: function () {
+              return ''
+            }
+          }
+        }
+      },
+      grid: {
+        clipMarkers: false
+      },
+      yaxis: {
+        tickAmount: 2
+      },
+      xaxis: {
+        type: 'datetime'
+      },
+    }
+
+  class LineChart extends React.Component {
+    
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        series1: [{
+          data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
+            min: 10,
+            max: 60
+          })
+        }],
+        series2: [{
+          data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
+            min: 10,
+            max: 30
+          })
+        }],
+        series3: [{
+          data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
+            min: 10,
+            max: 90
+          })
+        }],
+        chartOptionsLine1: {
+          chart: {
+            id: 'fb',
+            group: 'social',
+          },
+          colors: ['#008FFB'],
+        },
+        chartOptionsLine2: {
+          chart: {
+            id: 'tw',
+            group: 'social',
+          },
+          colors: ['#546E7A'],
+
+        },
+        chartOptionsArea: {
+          chart: {
+            id: 'yt',
+            group: 'social',
+          },
+          colors: ['#00E396'],
+
+        }
+      }
+    }
+
+    render() {
+
+      return (
+        <div>
+          <div id="wrapper">
+            <div id="chart-line">
+              <ReactApexChart type="line" height="160"  options={this.state.chartOptionsLine1} series={this.state.series1}/>
+            </div>
+
+            <div id="chart-line2">
+              <ReactApexChart type="line" height="160"  options={this.state.chartOptionsLine2} series={this.state.series2}/>
+            </div>
+
+            <div id="chart-area">
+              <ReactApexChart type="area" height="160"  options={this.state.chartOptionsArea} series={this.state.series3}/>
+            </div>
+          </div>
+          <div id="html-dist">
+          </div>
+        </div>
+      );
+    }
+  }
+
+  const domContainer = document.querySelector('#app');
+  ReactDOM.render(React.createElement(LineChart), domContainer);
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/line/zoomable-timeseries.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/line/zoomable-timeseries.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>Zoomable TimeSeries</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+  
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;area&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="../../assets/irregular-data-series.js"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+
+    var ts2 = 1484418600000;
+    var dates = [];
+    var spikes = [5, -5, 3, -3, 8, -8]
+    for (var i = 0; i < 120; i++) {
+      ts2 = ts2 + 86400000;
+      var innerArr = [ts2, dataSeries[1][i].value];
+      dates.push(innerArr)
+    }
+
+    class LineChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            chart: {
+              stacked: false,
+              zoom: {
+                type: 'x',
+                enabled: true
+              },
+              toolbar: {
+                autoSelected: 'zoom'
+              }
+            },
+            plotOptions: {
+              line: {
+                curve: 'smooth',
+              }
+            },
+            dataLabels: {
+              enabled: false
+            },
+
+            markers: {
+              size: 0,
+              style: 'full',
+            },
+            //colors: ['#0165fc'],
+            title: {
+              text: 'Stock Price Movement',
+              align: 'left'
+            },
+            fill: {
+              type: 'gradient',
+              gradient: {
+                shadeIntensity: 1,
+                inverseColors: false,
+                opacityFrom: 0.5,
+                opacityTo: 0,
+                stops: [0, 90, 100]
+              },
+            },
+            yaxis: {
+              min: 20000000,
+              max: 250000000,
+              labels: {
+                formatter: function (val) {
+                  return (val / 1000000).toFixed(0);
+                },
+              },
+              title: {
+                text: 'Price'
+              },
+            },
+            xaxis: {
+              type: 'datetime',
+            },
+
+            tooltip: {
+              shared: false,
+              y: {
+                formatter: function (val) {
+                  return (val / 1000000).toFixed(0)
+                }
+              }
+            }
+          },
+          series: [{
+            name: 'XYZ MOTORS',
+            data: dates
+          }],
+        }
+      }
+
+      render() {
+
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="area" height="350" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(LineChart), domContainer);
+
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-area.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-area.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, Column &amp; Area</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class MixedChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            stroke: {
+              curve: 'smooth'
+            },
+            fill: {
+              type: 'solid',
+              opacity: [0.35, 1],
+            },
+            labels: ['Dec 01', 'Dec 02', 'Dec 03', 'Dec 04', 'Dec 05', 'Dec 06', 'Dec 07', 'Dec 08', 'Dec 09 ',
+              'Dec 10', 'Dec 11'
+            ],
+            markers: {
+              size: 0
+            },
+            yaxis: [{
+                title: {
+                  text: 'Series A',
+                },
+              },
+              {
+                opposite: true,
+                title: {
+                  text: 'Series B',
+                },
+              },
+            ],
+            tooltip: {
+              shared: true,
+              intersect: false,
+              y: {
+                formatter: function (y) {
+                  if (typeof y !== "undefined") {
+                    return y.toFixed(0) + " points";
+                  }
+                  return y;
+
+                }
+              }
+            }
+          },
+          series: [{
+            name: 'TEAM A',
+            type: 'area',
+            data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33]
+          }, {
+            name: 'TEAM B',
+            type: 'line',
+            data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43]
+          }],
+        }
+      }
+
+      render() {
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(MixedChart), domContainer);
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-column-area.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-column-area.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, Column &amp; Area</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class MixedChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            chart: {
+              stacked: false,
+            },
+            stroke: {
+              width: [0, 2, 5],
+              curve: 'smooth'
+            },
+            plotOptions: {
+              bar: {
+                columnWidth: '50%'
+              }
+            },
+
+            fill: {
+              opacity: [0.85, 0.25, 1],
+              gradient: {
+                inverseColors: false,
+                shade: 'light',
+                type: "vertical",
+                opacityFrom: 0.85,
+                opacityTo: 0.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: {
+              title: {
+                text: 'Points',
+              },
+              min: 0
+            },
+            tooltip: {
+              shared: true,
+              intersect: false,
+              y: {
+                formatter: function (y) {
+                  if (typeof y !== "undefined") {
+                    return y.toFixed(0) + " points";
+                  }
+                  return y;
+                }
+              }
+            }
+          },
+          series: [{
+            name: 'TEAM A',
+            type: 'column',
+            data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
+          }, {
+            name: 'TEAM B',
+            type: 'area',
+            data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
+          }, {
+            name: 'TEAM C',
+            type: 'line',
+            data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
+          }],
+        }
+      }
+
+      render() {
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(MixedChart), domContainer);
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-column.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-column.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, Column &amp; Area</title>
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class MixedChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            stroke: {
+              width: [0, 4]
+            },
+            title: {
+              text: 'Traffic Sources'
+            },
+            labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'
+            ],
+            xaxis: {
+              type: 'datetime'
+            },
+            yaxis: [{
+              title: {
+                text: 'Website Blog',
+              },
+
+            }, {
+              opposite: true,
+              title: {
+                text: 'Social Media'
+              }
+            }]
+          },
+          series: [{
+            name: 'Website Blog',
+            type: 'column',
+            data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
+          }, {
+            name: 'Social Media',
+            type: 'line',
+            data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
+          }],
+        }
+      }
+
+      render() {
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(MixedChart), domContainer);
+
+  </script>
+</body>
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-scatter.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-scatter.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 &amp; scatter</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class MixedChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            fill: {
+              type: 'solid',
+            },
+            markers: {
+              size: [6, 0]
+            },
+            tooltip: {
+              shared: false,
+              intersect: true,
+            },
+            legend: {
+              show: false
+            },
+            xaxis: {
+              type: 'numeric',
+              min: 0,
+              max: 12,
+              tickAmount: 12
+            }
+          },
+          series: [{
+          name: 'Points',
+          type: 'scatter',
+          data: [
+            {
+              x: 1,
+              y: 2.14
+            }, {
+              x: 1.2,
+              y: 2.19
+            }, {
+              x: 1.8,
+              y: 2.43
+            }, {
+              x: 2.3,
+              y: 3.8
+            }, {
+              x: 2.6,
+              y: 4.14
+            }, {
+              x: 2.9,
+              y: 5.4
+            }, {
+              x: 3.2,
+              y: 5.8
+            }, {
+              x: 3.8,
+              y: 6.04
+            }, {
+              x: 4.55,
+              y: 6.77
+            }, {
+              x: 4.9,
+              y: 8.1
+            }, {
+              x: 5.1,
+              y: 9.4
+            }, {
+              x: 7.1,
+              y: 7.14
+            }, {
+              x: 9.18,
+              y: 8.4
+            }]
+          }, {
+            name: 'Line',
+            type: 'line',
+            data: [{
+              x: 1,
+              y: 2
+            }, {
+              x: 2,
+              y: 3
+            }, {
+              x: 3,
+              y: 4
+            }, {
+              x: 4,
+              y: 5
+            }, {
+              x: 5,
+              y: 6
+            }, {
+              x: 6,
+              y: 7
+            }, {
+              x: 7,
+              y: 8
+            }, {
+              x: 8,
+              y: 9
+            }, {
+              x: 9,
+              y: 10
+            }, {
+              x: 10,
+              y: 11
+            }]
+          }]
+        }
+      }
+
+      render() {
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(MixedChart), domContainer);
+
+  </script>
+</body>
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/mixed/multiple-yaxes.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/mixed/multiple-yaxes.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>Multiple Y Axis Chart</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 650px;
+      margin: 35px auto;
+    }
+    .apexcharts-tooltip-title {
+      display: none;
+    }
+    #chart .apexcharts-tooltip {
+      display: flex;
+      border: 0;
+      box-shadow: none;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class MixedChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            dataLabels: {
+              enabled: false
+            },
+
+            stroke: {
+              width: [1, 1, 4]
+            },
+            title: {
+              text: 'XYZ - Stock Analysis (2009 - 2016)',
+              align: 'left',
+              offsetX: 110
+            },
+            xaxis: {
+              categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
+            },
+            yaxis: [
+              {
+                axisTicks: {
+                  show: true,
+                },
+                axisBorder: {
+                  show: true,
+                  color: '#008FFB'
+                },
+                labels: {
+                  style: {
+                    color: '#008FFB',
+                  }
+                },
+                title: {
+                  text: "Income (thousand crores)",
+                  style: {
+                    color: '#008FFB',
+                  }
+                },
+                tooltip: {
+                  enabled: true
+                }
+              },
+
+              {
+                seriesName: 'Income',
+                opposite: true,
+                axisTicks: {
+                  show: true,
+                },
+                axisBorder: {
+                  show: true,
+                  color: '#00E396'
+                },
+                labels: {
+                  style: {
+                    color: '#00E396',
+                  }
+                },
+                title: {
+                  text: "Operating Cashflow (thousand crores)",
+                  style: {
+                    color: '#00E396',
+                  }
+                },
+              },
+              {
+                seriesName: 'Revenue',
+                opposite: true,
+                axisTicks: {
+                  show: true,
+                },
+                axisBorder: {
+                  show: true,
+                  color: '#FEB019'
+                },
+                labels: {
+                  style: {
+                    color: '#FEB019',
+                  },
+                },
+                title: {
+                  text: "Revenue (thousand crores)",
+                  style: {
+                    color: '#FEB019',
+                  }
+                }
+              },
+            ],
+            tooltip: {
+              fixed: {
+                enabled: true,
+                position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
+                offsetY: 30,
+                offsetX: 60
+              },
+            },
+            legend: {
+              horizontalAlign: 'left',
+              offsetX: 40
+            }
+          },
+          series: [{
+            name: 'Income',
+            type: 'column',
+            data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
+          }, {
+            name: 'Cashflow',
+            type: 'column',
+            data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
+          }, {
+            name: 'Revenue',
+            type: 'line',
+            data: [20, 29, 37, 36, 44, 45, 50, 58]
+          }],
+        }
+      }
+
+      render() {
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(MixedChart), domContainer);
+
+  </script>
+</body>
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/pie/donut-update.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/pie/donut-update.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 Pie</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+        max-width: 480px;
+        margin: 35px auto;
+    }
+    .actions {
+        margin-top: -80px;
+        text-align: center;
+        position: relative;
+        z-index: 10;
+        left: -60px;
+    }
+    button {
+        color: #fff;
+        background: #20b2aa;
+        padding: 5px 10px;
+        margin: 5px;
+        font-weight: bold;
+        font-size: 13px;
+        border-radius: 5px;
+    }
+
+    @media only screen and (max-width: 480px) {
+        .actions {
+            margin-top: 0;
+            left: 0
+        }
+
+    }
+    </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;donut&quot;&gt;&#10;            &lt;div className=&quot;chart-wrap&quot;&gt;&#10;              &lt;div id=&quot;chart&quot;&gt;&#10;                &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;donut&quot; width=&quot;380&quot; /&gt;&#10;              &lt;/div&gt;&#10;            &lt;/div&gt;&#10;            &lt;div className=&quot;actions&quot;&gt;&#10;              &lt;button onClick={() =&gt; this.randomize()}&gt;RANDOMIZE&lt;/button&gt;&#10;              &lt;button onClick={() =&gt; this.appendData()}&gt;ADD&lt;/button&gt;&#10;              &lt;button onClick={() =&gt; this.removeData()}&gt;REMOVE&lt;/button&gt;&#10;              &lt;button onClick={() =&gt; this.reset()}&gt;RESET&lt;/button&gt;&#10;            &lt;/div&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class DonutChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            dataLabels: {
+              enabled: false
+            },
+
+            responsive: [{
+              breakpoint: 480,
+              options: {
+                chart: {
+                  width: 200
+                },
+                legend: {
+                  show: false
+                }
+              }
+            }],
+            legend: {
+                position: 'right',
+                offsetY: 0,
+                height: 230,
+            }
+          },
+          series: [44, 55, 13, 33],
+        }
+      }
+
+      appendData () {
+        var arr = this.state.series.slice()
+        arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1)
+
+        this.setState({
+          series: arr
+        })
+      }
+
+      removeData() {
+        if(this.state.series.length === 1) return
+        
+        var arr = this.state.series.slice()
+        arr.pop()
+
+        this.setState({
+          series: arr
+        })
+      }
+
+      randomize() {
+        this.setState({
+          series: this.state.series.map(() => {
+            return Math.floor(Math.random() * (100 - 1 + 1)) + 1
+          })
+        })
+      }
+
+      reset() {
+        this.setState({
+          series: [44, 55, 13, 33]
+        })
+      }
+
+      render() {
+        return (
+          <div>
+            <div id="donut">
+              <div className="chart-wrap">
+                <div id="chart">
+                  <ReactApexChart options={this.state.options} series={this.state.series} type="donut" width="380" />
+                </div>
+              </div>
+              <div className="actions">
+                <button onClick={() => this.randomize()}>RANDOMIZE</button>
+                <button onClick={() => this.appendData()}>ADD</button>
+                <button onClick={() => this.removeData()}>REMOVE</button>
+                <button onClick={() => this.reset()}>RESET</button>
+              </div>
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(DonutChart), domContainer);
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
--- a/public/ThirdParty/apexcharts-bundle/samples/react/pie/donut-with-pattern.html
+++ b/public/ThirdParty/apexcharts-bundle/samples/react/pie/donut-with-pattern.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>Donut Chart with pattern</title>
+
+
+  <link href="../../assets/styles.css" rel="stylesheet" />
+
+  <style>
+    #chart {
+      max-width: 380px;
+      margin: 35px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  
+  <div id="html">
+          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;donut&quot; width=&quot;380&quot; /&gt;&#10;          &lt;/div&gt;
+  </div>
+
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
+  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
+
+  <script type="text/babel">
+
+    class DonutChart extends React.Component {
+      
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          options: {
+            chart: {
+              dropShadow: {
+                enabled: true,
+                color: '#111',
+                top: -1,
+                left: 3,
+                blur: 3,
+                opacity: 0.2
+              }
+            },
+            stroke: {
+              width: 0,
+            },
+            labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"],
+            dataLabels: {
+              dropShadow: {
+                blur: 3,
+                opacity: 0.8
+              }
+            },
+            fill: {
+              type: 'pattern',
+              opacity: 1,
+              pattern: {
+                enabled: true,
+                style: ['verticalLines', 'squares', 'horizontalLines', 'circles', 'slantedLines'],
+              },
+            },
+            states: {
+              hover: {
+                enabled: false
+              }
+            },
+            theme: {
+              palette: 'palette2'
+            },
+            title: {
+              text: "Favourite Movie Type"
+            },
+            responsive: [{
+              breakpoint: 480,
+              options: {
+                chart: {
+                  width: 200
+                },
+                legend: {
+                  position: 'bottom'
+                }
+              }
+            }]
+          },
+          series: [44, 55, 41, 17, 15]
+        }
+      }
+
+      render() {
+        return (
+          <div>
+            <div id="chart">
+              <ReactApexChart options={this.state.options} series={this.state.series} type="donut" width="380" />
+            </div>
+            <div id="html-dist">
+            </div>
+          </div>
+        );
+      }
+    }
+
+    const domContainer = document.querySelector('#app');
+    ReactDOM.render(React.createElement(DonutChart), domContainer);
+
+  </script>
+</body>
+
+
+</html>
\ No newline at end of file