text: /* ------------------------------------------------------------------------------
   *
   *  # Echarts - Basic area chart example
   *
   *  Demo JS code for basic area chart [dark theme]
   *
   * ---------------------------------------------------------------------------- */
  
  
  // Setup module
  // ------------------------------
  
  var EchartsAreaBasicDark = function () {
  
  
      //
      // Setup module components
      //
  
      // Basic area chart
      var _areaBasicDarkExample = function () {
          if (typeof echarts == 'undefined') {
              console.warn('Warning - echarts.min.js is not loaded.');
              return;
          }
  
          // Define element
          var area_basic_element = document.getElementById('area_basic');
  
  
          //
          // Charts configuration
          //
  
          if (area_basic_element) {
  
              // Initialize chart
              var area_basic = echarts.init(area_basic_element);
  
  
              //
              // Chart config
              //
  
              // Options
              area_basic.setOption({
  
                  // Define colors
                  color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80'],
  
                  // Global text styles
                  textStyle: {
                      fontFamily: 'Roboto, Arial, Verdana, sans-serif',
                      fontSize: 13
                  },
  
                  // Chart animation duration
                  animationDuration: 750,
  
                  // Setup grid
                  grid: {
                      left: 0,
                      right: 40,
                      top: 35,
                      bottom: 0,
                      containLabel: true
                  },
  
                  // Add legend
                  legend: {
                      data: ['New orders', 'In progress', 'Closed deals'],
                      itemHeight: 8,
                      itemGap: 20,
                      textStyle: {
                          color: '#fff'
                      }
                  },
  
                  // Add tooltip
                  tooltip: {
                      trigger: 'axis',
                      backgroundColor: 'rgba(255,255,255,0.9)',
                      padding: [10, 15],
                      textStyle: {
                          color: '#222',
                          fontSize: 13,
                          fontFamily: 'Roboto, sans-serif'
                      }
                  },
  
                  // Horizontal axis
                  xAxis: [{
                      type: 'category',
                      boundaryGap: false,
                      data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                      axisLabel: {
                          color: '#fff'
                      },
                      axisLine: {
                          lineStyle: {
                              color: 'rgba(255,255,255,0.25)'
                          }
                      },
                      splitLine: {
                          show: true,
                          lineStyle: {
                              color: 'rgba(255,255,255,0.1)',
                              type: 'dashed'
                          }
                      }
                  }],
  
                  // Vertical axis
                  yAxis: [{
                      type: 'value',
                      axisLabel: {
                          color: '#fff'
                      },
                      axisLine: {
                          lineStyle: {
                              color: 'rgba(255,255,255,0.25)'
                          }
                      },
                      splitLine: {
                          lineStyle: {
                              color: 'rgba(255,255,255,0.1)'
                          }
                      },
                      splitArea: {
                          show: true,
                          areaStyle: {
                              color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
                          }
                      }
                  }],
  
                  // Axis pointer
                  axisPointer: [{
                      lineStyle: {
                          color: 'rgba(255,255,255,0.25)'
                      }
                  }],
  
                  // Add series
                  series: [
                      {
                          name: 'Closed deals',
                          type: 'line',
                          data: [10, 12, 21, 54, 260, 830, 710],
                          areaStyle: {
                              normal: {
                                  opacity: 0.25
                              }
                          },
                          smooth: true,
                          symbol: 'circle',
                          symbolSize: 7,
                          itemStyle: {
                              normal: {
                                  borderWidth: 2
                              }
                          }
                      },
                      {
                          name: 'In progress',
                          type: 'line',
                          smooth: true,
                          symbol: 'circle',
                          symbolSize: 7,
                          itemStyle: {
                              normal: {
                                  borderWidth: 2
                              }
                          },
                          areaStyle: {
                              normal: {
                                  opacity: 0.25
                              }
                          },
                          data: [30, 182, 434, 791, 390, 30, 10]
                      },
                      {
                          name: 'New orders',
                          type: 'line',
                          smooth: true,
                          symbol: 'circle',
                          symbolSize: 7,
                          itemStyle: {
                              normal: {
                                  borderWidth: 2
                              }
                          },
                          areaStyle: {
                              normal: {
                                  opacity: 0.25
                              }
                          },
                          data: [1320, 1132, 601, 234, 120, 90, 20]
                      }
                  ]
              });
          }
  
  
          //
          // Resize charts
          //
  
          // Resize function
          var triggerChartResize = function () {
              area_basic_element && area_basic.resize();
          };
  
          // On sidebar width change
          var sidebarToggle = document.querySelectorAll('.sidebar-control');
          if (sidebarToggle) {
              sidebarToggle.forEach(function (togglers) {
                  togglers.addEventListener('click', triggerChartResize);
              });
          }
  
          // On window resize
          var resizeCharts;
          window.addEventListener('resize', function () {
              clearTimeout(resizeCharts);
              resizeCharts = setTimeout(function () {
                  triggerChartResize();
              }, 200);
          });
      };
  
  
      //
      // Return objects assigned to module
      //
  
      return {
          init: function () {
              _areaBasicDarkExample();
          }
      }
  }();
  
  
  // Initialize module
  // ------------------------------
  
  document.addEventListener('DOMContentLoaded', function () {
      EchartsAreaBasicDark.init();
  });
  