vuexy 0.1.0

data/app/assets/javascripts/vuexy/scripts/cards/card-analytics.min.js

@@ -0,0 +1 @@
+$(window).on("load",(function(){"use strict";var e,o,r,t,a,s,i,n,l,d,c,h,p="#5e5873",w="#ebe9f1",g="#ebf0f7",u="#b9b9c3",y=document.querySelector("#support-tracker-chart"),m=document.querySelector("#avg-session-chart"),b=document.querySelector("#revenue-report-chart"),f=document.querySelector("#budget-chart"),k=document.querySelector("#goal-overview-chart"),x=document.querySelector("#revenue-chart"),S=document.querySelector("#sales-chart"),z=document.querySelector("#sales-line-chart"),A=document.querySelector("#session-chart"),C=document.querySelector("#customer-chart"),v=document.querySelector("#product-order-chart"),T=document.querySelector("#earnings-donut-chart");e={chart:{height:270,type:"radialBar"},plotOptions:{radialBar:{size:150,offsetY:20,startAngle:-150,endAngle:150,hollow:{size:"65%"},track:{background:"#fff",strokeWidth:"100%"},dataLabels:{name:{offsetY:-5,color:p,fontSize:"1rem"},value:{offsetY:15,color:p,fontSize:"1.714rem"}}}},colors:[window.colors.solid.danger],fill:{type:"gradient",gradient:{shade:"dark",type:"horizontal",shadeIntensity:.5,gradientToColors:[window.colors.solid.primary],inverseColors:!0,opacityFrom:1,opacityTo:1,stops:[0,100]}},stroke:{dashArray:8},series:[83],labels:["Completed Tickets"]},new ApexCharts(y,e).render(),o={chart:{type:"bar",height:200,sparkline:{enabled:!0},toolbar:{show:!1}},states:{hover:{filter:"none"}},colors:[g,g,window.colors.solid.primary,g,g,g],series:[{name:"Sessions",data:[75,125,225,175,125,75,25]}],grid:{show:!1,padding:{left:0,right:0}},plotOptions:{bar:{columnWidth:"45%",distributed:!0,endingShape:"rounded"}},tooltip:{x:{show:!1}},xaxis:{type:"numeric"}},new ApexCharts(m,o).render(),r={chart:{height:230,stacked:!0,type:"bar",toolbar:{show:!1}},plotOptions:{bar:{columnWidth:"17%",endingShape:"rounded"},distributed:!0},colors:[window.colors.solid.primary,window.colors.solid.warning],series:[{name:"Earning",data:[95,177,284,256,105,63,168,218,72]},{name:"Expense",data:[-145,-80,-60,-180,-100,-60,-85,-75,-100]}],dataLabels:{enabled:!1},legend:{show:!1},grid:{padding:{top:-20,bottom:-10},yaxis:{lines:{show:!1}}},xaxis:{categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep"],labels:{style:{colors:u,fontSize:"0.86rem"}},axisTicks:{show:!1},axisBorder:{show:!1}},yaxis:{labels:{style:{colors:u,fontSize:"0.86rem"}}}},new ApexCharts(b,r).render(),t={chart:{height:80,toolbar:{show:!1},zoom:{enabled:!1},type:"line",sparkline:{enabled:!0}},stroke:{curve:"smooth",dashArray:[0,5],width:[2]},colors:[window.colors.solid.primary,"#dcdae3"],series:[{data:[61,48,69,52,60,40,79,60,59,43,62]},{data:[20,10,30,15,23,0,25,15,20,5,27]}],tooltip:{enabled:!1}},new ApexCharts(f,t).render(),a={chart:{height:245,type:"radialBar",sparkline:{enabled:!0},dropShadow:{enabled:!0,blur:3,left:1,top:1,opacity:.1}},colors:["#51e5a8"],plotOptions:{radialBar:{offsetY:-10,startAngle:-150,endAngle:150,hollow:{size:"77%"},track:{background:w,strokeWidth:"50%"},dataLabels:{name:{show:!1},value:{color:p,fontSize:"2.86rem",fontWeight:"600"}}}},fill:{type:"gradient",gradient:{shade:"dark",type:"horizontal",shadeIntensity:.5,gradientToColors:[window.colors.solid.success],inverseColors:!0,opacityFrom:1,opacityTo:1,stops:[0,100]}},series:[83],stroke:{lineCap:"round"},grid:{padding:{bottom:30}}},new ApexCharts(k,a).render(),s={chart:{height:240,toolbar:{show:!1},zoom:{enabled:!1},type:"line",offsetX:-10},stroke:{curve:"smooth",dashArray:[0,12],width:[4,3]},grid:{borderColor:"#e7eef7"},legend:{show:!1},colors:["#d0ccff",w],fill:{type:"gradient",gradient:{shade:"dark",inverseColors:!1,gradientToColors:[window.colors.solid.primary,w],shadeIntensity:1,type:"horizontal",opacityFrom:1,opacityTo:1,stops:[0,100,100,100]}},markers:{size:0,hover:{size:5}},xaxis:{labels:{style:{colors:u,fontSize:"1rem"}},axisTicks:{show:!1},categories:["01","05","09","13","17","21","26","31"],axisBorder:{show:!1},tickPlacement:"on"},yaxis:{tickAmount:5,labels:{style:{colors:u,fontSize:"1rem"},formatter:function(e){return e>999?(e/1e3).toFixed(0)+"k":e}}},grid:{padding:{top:-20,bottom:-10,left:20}},tooltip:{x:{show:!1}},series:[{name:"This Month",data:[45e3,47e3,44800,47500,45500,48e3,46500,48600]},{name:"Last Month",data:[46e3,48e3,45500,46600,44500,46500,45e3,47e3]}]},new ApexCharts(x,s).render(),i={chart:{height:300,type:"radar",dropShadow:{enabled:!0,blur:8,left:1,top:1,opacity:.2},toolbar:{show:!1},offsetY:5},series:[{name:"Sales",data:[90,50,86,40,100,20]},{name:"Visit",data:[70,75,70,76,20,85]}],stroke:{width:0},colors:[window.colors.solid.primary,window.colors.solid.info],plotOptions:{radar:{polygons:{strokeColors:[w,"transparent","transparent","transparent","transparent","transparent"],connectorColors:"transparent"}}},fill:{type:"gradient",gradient:{shade:"dark",gradientToColors:[window.colors.solid.primary,window.colors.solid.info],shadeIntensity:1,type:"horizontal",opacityFrom:1,opacityTo:1,stops:[0,100,100,100]}},markers:{size:0},legend:{show:!1},labels:["Jan","Feb","Mar","Apr","May","Jun"],dataLabels:{background:{foreColor:[w,w,w,w,w,w]}},yaxis:{show:!1},grid:{show:!1,padding:{bottom:-27}}},new ApexCharts(S,i).render(),n={chart:{height:240,toolbar:{show:!1},zoom:{enabled:!1},type:"line",dropShadow:{enabled:!0,top:18,left:2,blur:5,opacity:.2},offsetX:-10},stroke:{curve:"smooth",width:4},grid:{borderColor:w,padding:{top:-20,bottom:5,left:20}},legend:{show:!1},colors:["#df87f2"],fill:{type:"gradient",gradient:{shade:"dark",inverseColors:!1,gradientToColors:[window.colors.solid.primary],shadeIntensity:1,type:"horizontal",opacityFrom:1,opacityTo:1,stops:[0,100,100,100]}},markers:{size:0,hover:{size:5}},xaxis:{labels:{offsetY:5,style:{colors:u,fontSize:"0.857rem"}},axisTicks:{show:!1},categories:["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"],axisBorder:{show:!1},tickPlacement:"on"},yaxis:{tickAmount:5,labels:{style:{colors:u,fontSize:"0.857rem"},formatter:function(e){return e>999?(e/1e3).toFixed(1)+"k":e}}},tooltip:{x:{show:!1}},series:[{name:"Sales",data:[140,180,150,205,160,295,125,255,205,305,240,295]}]},new ApexCharts(z,n).render(),l={chart:{type:"donut",height:300,toolbar:{show:!1}},dataLabels:{enabled:!1},series:[58.6,34.9,6.5],legend:{show:!1},comparedResult:[2,-3,8],labels:["Desktop","Mobile","Tablet"],stroke:{width:0},colors:[window.colors.solid.primary,window.colors.solid.warning,window.colors.solid.danger]},new ApexCharts(A,l).render(),d={chart:{type:"pie",height:325,toolbar:{show:!1}},labels:["New","Returning","Referrals"],series:[690,258,149],dataLabels:{enabled:!1},legend:{show:!1},stroke:{width:4},colors:[window.colors.solid.primary,window.colors.solid.warning,window.colors.solid.danger]},new ApexCharts(C,d).render(),c={chart:{height:325,type:"radialBar"},colors:[window.colors.solid.primary,window.colors.solid.warning,window.colors.solid.danger],stroke:{lineCap:"round"},plotOptions:{radialBar:{size:150,hollow:{size:"20%"},track:{strokeWidth:"100%",margin:15},dataLabels:{value:{fontSize:"1rem",colors:p,fontWeight:"500",offsetY:5},total:{show:!0,label:"Total",fontSize:"1.286rem",colors:p,fontWeight:"500",formatter:function(e){return 42459}}}}},series:[70,52,26],labels:["Finished","Pending","Rejected"]},new ApexCharts(v,c).render(),h={chart:{type:"donut",height:120,toolbar:{show:!1}},dataLabels:{enabled:!1},series:[53,16,31],legend:{show:!1},comparedResult:[2,-3,8],labels:["App","Service","Product"],stroke:{width:0},colors:["#28c76f66","#28c76f33",window.colors.solid.success],grid:{padding:{right:-20,bottom:-8,left:-20}},plotOptions:{pie:{startAngle:-10,donut:{labels:{show:!0,name:{offsetY:15},value:{offsetY:-15,formatter:function(e){return parseInt(e)+"%"}},total:{show:!0,offsetY:15,label:"App",formatter:function(e){return"53%"}}}}}},responsive:[{breakpoint:1325,options:{chart:{height:100}}},{breakpoint:1200,options:{chart:{height:120}}},{breakpoint:1065,options:{chart:{height:100}}},{breakpoint:992,options:{chart:{height:120}}}]},new ApexCharts(T,h).render()}));

data/app/assets/javascripts/vuexy/scripts/cards/card-statistics.js

@@ -0,0 +1,708 @@
+/*=========================================================================================
+    File Name: card-statistics.js
+    Description: Card-statistics page content with Apexchart Examples
+    ----------------------------------------------------------------------------------------
+    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
+    Author: PIXINVENT
+    Author URL: http://www.themeforest.net/user/pixinvent
+==========================================================================================*/
+
+$(window).on('load', function () {
+  'use strict';
+
+  var $barColor = '#f3f3f3';
+  var $trackBgColor = '#EBEBEB';
+  var $primary_light = '#A9A2F6';
+  var $success_light = '#55DD92';
+  var $warning_light = '#ffc085';
+
+  var statisticsBarChartOptions;
+  var statisticsLineChartOptions;
+  var gainedChartOptions;
+  var revenueChartOptions;
+  var salesChartOptions;
+  var orderChartOptions;
+  var trafficChartOptions;
+  var userChartOptions;
+  var newsletterChartOptions;
+
+  var statisticsBarChart = document.querySelector('#statistics-bar-chart');
+  var statisticsLineChart = document.querySelector('#statistics-line-chart');
+  var lineAreaChart1 = document.querySelector('#line-area-chart-1');
+  var lineAreaChart2 = document.querySelector('#line-area-chart-2');
+  var lineAreaChart3 = document.querySelector('#line-area-chart-3');
+  var lineAreaChart4 = document.querySelector('#line-area-chart-4');
+  var lineAreaChart5 = document.querySelector('#line-area-chart-5');
+  var lineAreaChart6 = document.querySelector('#line-area-chart-6');
+  var lineAreaChart7 = document.querySelector('#line-area-chart-7');
+
+  var statisticsBar;
+  var statisticsLine;
+  var gainedChart;
+  var revenueChart;
+  var salesChart;
+  var orderChart;
+  var trafficChart;
+  var userChart;
+  var newsletterChart;
+
+  //------------ Statistics Bar Chart ------------
+  //----------------------------------------------
+
+  statisticsBarChartOptions = {
+    chart: {
+      height: 70,
+      type: 'bar',
+      stacked: true,
+      toolbar: {
+        show: false
+      }
+    },
+    grid: {
+      show: false,
+      padding: {
+        left: 0,
+        right: 0,
+        top: -15,
+        bottom: -15
+      }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '20%',
+        startingShape: 'rounded',
+        colors: {
+          backgroundBarColors: [$barColor, $barColor, $barColor, $barColor, $barColor],
+          backgroundBarRadius: 5
+        }
+      }
+    },
+    legend: {
+      show: false
+    },
+    dataLabels: {
+      enabled: false
+    },
+    colors: [window.colors.solid.warning],
+    series: [
+      {
+        name: '2020',
+        data: [45, 85, 65, 45, 65]
+      }
+    ],
+    xaxis: {
+      labels: {
+        show: false
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      show: false
+    },
+    tooltip: {
+      x: {
+        show: false
+      }
+    }
+  };
+
+  statisticsBar = new ApexCharts(statisticsBarChart, statisticsBarChartOptions);
+  statisticsBar.render();
+
+  //------------ Statistics Line Chart ------------
+  //-----------------------------------------------
+
+  statisticsLineChartOptions = {
+    chart: {
+      height: 70,
+      type: 'line',
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      }
+    },
+    grid: {
+      borderColor: $trackBgColor,
+      strokeDashArray: 5,
+      xaxis: {
+        lines: {
+          show: true
+        }
+      },
+      yaxis: {
+        lines: {
+          show: false
+        }
+      },
+      padding: {
+        top: -30,
+        bottom: -10
+      }
+    },
+    stroke: {
+      width: 3
+    },
+    colors: [window.colors.solid.info],
+    series: [
+      {
+        data: [0, 20, 5, 30, 15, 45]
+      }
+    ],
+    markers: {
+      size: 2,
+      colors: window.colors.solid.info,
+      strokeColors: window.colors.solid.info,
+      strokeWidth: 2,
+      strokeOpacity: 1,
+      strokeDashArray: 0,
+      fillOpacity: 1,
+      discrete: [
+        {
+          seriesIndex: 0,
+          dataPointIndex: 5,
+          fillColor: '#ffffff',
+          strokeColor: window.colors.solid.info,
+          size: 5
+        }
+      ],
+      shape: 'circle',
+      radius: 2,
+      hover: {
+        size: 3
+      }
+    },
+    xaxis: {
+      labels: {
+        show: true,
+        style: {
+          fontSize: '0px'
+        }
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      }
+    },
+    yaxis: {
+      show: false
+    },
+    tooltip: {
+      x: {
+        show: false
+      }
+    }
+  };
+
+  statisticsLine = new ApexCharts(statisticsLineChart, statisticsLineChartOptions);
+  statisticsLine.render();
+
+  // Subscribed Gained Chart
+  // ----------------------------------
+
+  gainedChartOptions = {
+    chart: {
+      height: 100,
+      type: 'area',
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: true
+      },
+      grid: {
+        show: false,
+        padding: {
+          left: 0,
+          right: 0
+        }
+      }
+    },
+    colors: [window.colors.solid.primary],
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 2.5
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 0.9,
+        opacityFrom: 0.7,
+        opacityTo: 0.5,
+        stops: [0, 80, 100]
+      }
+    },
+    series: [
+      {
+        name: 'Subscribers',
+        data: [28, 40, 36, 52, 38, 60, 55]
+      }
+    ],
+    xaxis: {
+      labels: {
+        show: false
+      },
+      axisBorder: {
+        show: false
+      }
+    },
+    yaxis: [
+      {
+        y: 0,
+        offsetX: 0,
+        offsetY: 0,
+        padding: { left: 0, right: 0 }
+      }
+    ],
+    tooltip: {
+      x: { show: false }
+    }
+  };
+
+  gainedChart = new ApexCharts(lineAreaChart1, gainedChartOptions);
+  gainedChart.render();
+
+  // Revenue Generated Chart
+  // ----------------------------------
+
+  revenueChartOptions = {
+    chart: {
+      height: 100,
+      type: 'area',
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: true
+      },
+      grid: {
+        show: false,
+        padding: {
+          left: 0,
+          right: 0
+        }
+      }
+    },
+    colors: [window.colors.solid.success],
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 2.5
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 0.9,
+        opacityFrom: 0.7,
+        opacityTo: 0.5,
+        stops: [0, 80, 100]
+      }
+    },
+    series: [
+      {
+        name: 'Revenue',
+        data: [350, 275, 400, 300, 350, 300, 450]
+      }
+    ],
+    xaxis: {
+      labels: {
+        show: false
+      },
+      axisBorder: {
+        show: false
+      }
+    },
+    yaxis: [
+      {
+        y: 0,
+        offsetX: 0,
+        offsetY: 0,
+        padding: { left: 0, right: 0 }
+      }
+    ],
+    tooltip: {
+      x: { show: false }
+    }
+  };
+
+  revenueChart = new ApexCharts(lineAreaChart2, revenueChartOptions);
+  revenueChart.render();
+
+  // Quaterly Sales Chart
+  // ----------------------------------
+
+  salesChartOptions = {
+    chart: {
+      height: 100,
+      type: 'area',
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: true
+      },
+      grid: {
+        show: false,
+        padding: {
+          left: 0,
+          right: 0
+        }
+      }
+    },
+    colors: [window.colors.solid.danger],
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 2.5
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 0.9,
+        opacityFrom: 0.7,
+        opacityTo: 0.5,
+        stops: [0, 80, 100]
+      }
+    },
+    series: [
+      {
+        name: 'Sales',
+        data: [10, 15, 7, 12, 3, 16]
+      }
+    ],
+    xaxis: {
+      labels: {
+        show: false
+      },
+      axisBorder: {
+        show: false
+      }
+    },
+    yaxis: [
+      {
+        y: 0,
+        offsetX: 0,
+        offsetY: 0,
+        padding: { left: 0, right: 0 }
+      }
+    ],
+    tooltip: {
+      x: { show: false }
+    }
+  };
+
+  salesChart = new ApexCharts(lineAreaChart3, salesChartOptions);
+  salesChart.render();
+
+  // Order Received Chart
+  // ----------------------------------
+
+  orderChartOptions = {
+    chart: {
+      height: 100,
+      type: 'area',
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: true
+      },
+      grid: {
+        show: false,
+        padding: {
+          left: 0,
+          right: 0
+        }
+      }
+    },
+    colors: [window.colors.solid.warning],
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 2.5
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 0.9,
+        opacityFrom: 0.7,
+        opacityTo: 0.5,
+        stops: [0, 80, 100]
+      }
+    },
+    series: [
+      {
+        name: 'Orders',
+        data: [10, 15, 8, 15, 7, 12, 8]
+      }
+    ],
+    xaxis: {
+      labels: {
+        show: false
+      },
+      axisBorder: {
+        show: false
+      }
+    },
+    yaxis: [
+      {
+        y: 0,
+        offsetX: 0,
+        offsetY: 0,
+        padding: { left: 0, right: 0 }
+      }
+    ],
+    tooltip: {
+      x: { show: false }
+    }
+  };
+
+  orderChart = new ApexCharts(lineAreaChart4, orderChartOptions);
+  orderChart.render();
+
+  // Site Traffic Chart
+  // ----------------------------------
+
+  trafficChartOptions = {
+    chart: {
+      height: 100,
+      type: 'line',
+      dropShadow: {
+        enabled: true,
+        top: 5,
+        left: 0,
+        blur: 4,
+        opacity: 0.1
+      },
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: true
+      },
+      grid: {
+        show: false,
+        padding: {
+          left: 0,
+          right: 0
+        }
+      }
+    },
+    colors: [window.colors.solid.primary],
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 5
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        gradientToColors: [$primary_light],
+        opacityFrom: 1,
+        opacityTo: 1,
+        stops: [0, 100, 100, 100]
+      }
+    },
+    series: [
+      {
+        name: 'Traffic Rate',
+        data: [150, 200, 125, 225, 200, 250]
+      }
+    ],
+    xaxis: {
+      labels: {
+        show: false
+      },
+      axisBorder: {
+        show: false
+      }
+    },
+    yaxis: [
+      {
+        y: 0,
+        offsetX: 0,
+        offsetY: 0,
+        padding: { left: 0, right: 0 }
+      }
+    ],
+    tooltip: {
+      x: { show: false }
+    }
+  };
+
+  trafficChart = new ApexCharts(lineAreaChart5, trafficChartOptions);
+  trafficChart.render();
+
+  // Active Users Chart
+  // ----------------------------------
+
+  userChartOptions = {
+    chart: {
+      height: 100,
+      type: 'line',
+      dropShadow: {
+        enabled: true,
+        top: 5,
+        left: 0,
+        blur: 4,
+        opacity: 0.1
+      },
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: true
+      },
+      grid: {
+        show: false,
+        padding: {
+          left: 0,
+          right: 0
+        }
+      }
+    },
+    colors: [window.colors.solid.success],
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 5
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        gradientToColors: [$success_light],
+        opacityFrom: 1,
+        opacityTo: 1,
+        stops: [0, 100, 100, 100]
+      }
+    },
+    series: [
+      {
+        name: 'Active Users',
+        data: [750, 1000, 900, 1250, 1000, 1200, 1100]
+      }
+    ],
+    xaxis: {
+      labels: {
+        show: false
+      },
+      axisBorder: {
+        show: false
+      }
+    },
+    yaxis: [
+      {
+        y: 0,
+        offsetX: 0,
+        offsetY: 0,
+        padding: { left: 0, right: 0 }
+      }
+    ],
+    tooltip: {
+      x: { show: false }
+    }
+  };
+
+  userChart = new ApexCharts(lineAreaChart6, userChartOptions);
+  userChart.render();
+
+  // News Letter Chart
+  // ----------------------------------
+
+  newsletterChartOptions = {
+    chart: {
+      height: 100,
+      type: 'line',
+      dropShadow: {
+        enabled: true,
+        top: 5,
+        left: 0,
+        blur: 4,
+        opacity: 0.1
+      },
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: true
+      },
+      grid: {
+        show: false,
+        padding: {
+          left: 0,
+          right: 0
+        }
+      }
+    },
+    colors: [window.colors.solid.warning],
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 5
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        gradientToColors: [$warning_light],
+        opacityFrom: 1,
+        opacityTo: 1,
+        stops: [0, 100, 100, 100]
+      }
+    },
+    series: [
+      {
+        name: 'Newsletter',
+        data: [365, 390, 365, 400, 375, 400]
+      }
+    ],
+    xaxis: {
+      labels: {
+        show: false
+      },
+      axisBorder: {
+        show: false
+      }
+    },
+    yaxis: [
+      {
+        y: 0,
+        offsetX: 0,
+        offsetY: 0,
+        padding: { left: 0, right: 0 }
+      }
+    ],
+    tooltip: {
+      x: { show: false }
+    }
+  };
+
+  newsletterChart = new ApexCharts(lineAreaChart7, newsletterChartOptions);
+  newsletterChart.render();
+});