/*
 *   Static data for chart A
 */
var optionsChartA = {
  series: [
    {
      name: "Visits",
      data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5],
    },
  ],
  chart: {
    height: 350,
    type: "line",
    zoom: {
      enabled: false,
    },
  },
  stroke: {
    width: 2,
    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",
    ],
    tickAmount: 10,
    labels: {
      formatter: function (value, timestamp, opts) {
        return opts.dateFormatter(new Date(timestamp), "dd MMM");
      },
    },
  },
  title: {
    text: "",
    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: 5,
    colors: ["#FFA41B"],
    strokeColors: "#fff",
    strokeWidth: 2,
    hover: {
      size: 7,
    },
  },
  xaxis: {
    title: {
      text: "TITLE NAME PLACE HOLDER",
      style: {
        fontSize: "20px",
        fontWeight: 600,
      },
    },
  },
  yaxis: {
    min: -10,
    max: 40,
    title: {
      text: "",
    },
  },
};

var chart = new ApexCharts(document.querySelector("#chartA"), optionsChartA);
chart.render();

/*
 *   Static data for chart B
 */
var optionsChartB = {
  chart: {
    height: 320,
    color: "#fff",
    type: "radialBar",
  },

  series: [67],
  colors: ["#73A9C8"],
  plotOptions: {
    radialBar: {
      hollow: {
        margin: 15,
        size: "55%",
      },

      track: {
        background: "#CDD5E1",
      },

      dataLabels: {
        showOn: "always",
        name: {
          offsetY: -0,
          show: false,
          color: "#88",
          fontSize: "20px",
        },
        value: {
          color: "#111",
          fontSize: "30px",
          fontWeight: "700",
          show: true,
        },
      },
    },
  },
  stroke: {
    lineCap: "round",
  },
};

var chart = new ApexCharts(document.querySelector("#chartB"), optionsChartB);
chart.render();

/*
 *   Static data for chart C
 */
var optionsChartC = {
  chart: {
    height: 180,
    color: "#fff",
    type: "radialBar",
  },

  series: [67],
  colors: ["#E59E42"],
  plotOptions: {
    radialBar: {
      hollow: {
        margin: 15,
        size: "55%",
      },

      track: {
        background: "#CDD5E1",
      },

      dataLabels: {
        showOn: "always",
        name: {
          show: false,
          color: "#88",
          fontSize: "20px",
        },
        value: {
          color: "#111",
          fontSize: "18px",
          fontWeight: "700",
          show: true,
        },
      },
    },
  },
  stroke: {
    lineCap: "round",
  },
};

var chart = new ApexCharts(document.querySelector("#chartC"), optionsChartC);
chart.render();

/*
 *   Static data for chart D
 */
var optionsChartD = {
  chart: {
    height: 180,
    color: "#fff",
    type: "radialBar",
  },

  series: [67],
  colors: ["#D24332"],
  plotOptions: {
    radialBar: {
      hollow: {
        margin: 15,
        size: "55%",
      },

      track: {
        background: "#CDD5E1",
      },

      dataLabels: {
        showOn: "always",
        name: {
          show: false,
          color: "#88",
          fontSize: "20px",
        },
        value: {
          color: "#111",
          fontSize: "18px",
          fontWeight: "700",
          show: true,
        },
      },
    },
  },
  stroke: {
    lineCap: "round",
  },
};

var chart = new ApexCharts(document.querySelector("#chartD"), optionsChartD);
chart.render();