Initial commit - CMS Gov Bapenda Garut dengan EditorJS

assets/js/components/charts/chart-01.js

@@ -0,0 +1,106 @@
+import ApexCharts from "apexcharts";
+
+// ===== chartOne
+const chart01 = () => {
+  const chartOneOptions = {
+    series: [
+      {
+        name: "Sales",
+        data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],
+      },
+    ],
+    colors: ["#465fff"],
+    chart: {
+      fontFamily: "Outfit, sans-serif",
+      type: "bar",
+      height: 180,
+      toolbar: {
+        show: false,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: "39%",
+        borderRadius: 5,
+        borderRadiusApplication: "end",
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 4,
+      colors: ["transparent"],
+    },
+    xaxis: {
+      categories: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
+    legend: {
+      show: true,
+      position: "top",
+      horizontalAlign: "left",
+      fontFamily: "Outfit",
+
+      markers: {
+        radius: 99,
+      },
+    },
+    yaxis: {
+      title: false,
+    },
+    grid: {
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+    fill: {
+      opacity: 1,
+    },
+
+    tooltip: {
+      x: {
+        show: false,
+      },
+      y: {
+        formatter: function (val) {
+          return val;
+        },
+      },
+    },
+  };
+
+  const chartSelector = document.querySelectorAll("#chartOne");
+
+  if (chartSelector.length) {
+    const chartFour = new ApexCharts(
+      document.querySelector("#chartOne"),
+      chartOneOptions,
+    );
+    chartFour.render();
+  }
+};
+
+export default chart01;

assets/js/components/charts/chart-02.js

@@ -0,0 +1,65 @@
+import ApexCharts from "apexcharts";
+
+// ===== chartTwo
+const chart02 = () => {
+  const chartTwoOptions = {
+    series: [75.55],
+    colors: ["#465FFF"],
+    chart: {
+      fontFamily: "Outfit, sans-serif",
+      type: "radialBar",
+      height: 330,
+      sparkline: {
+        enabled: true,
+      },
+    },
+    plotOptions: {
+      radialBar: {
+        startAngle: -90,
+        endAngle: 90,
+        hollow: {
+          size: "80%",
+        },
+        track: {
+          background: "#E4E7EC",
+          strokeWidth: "100%",
+          margin: 5, // margin is in pixels
+        },
+        dataLabels: {
+          name: {
+            show: false,
+          },
+          value: {
+            fontSize: "36px",
+            fontWeight: "600",
+            offsetY: 60,
+            color: "#1D2939",
+            formatter: function (val) {
+              return val + "%";
+            },
+          },
+        },
+      },
+    },
+    fill: {
+      type: "solid",
+      colors: ["#465FFF"],
+    },
+    stroke: {
+      lineCap: "round",
+    },
+    labels: ["Progress"],
+  };
+
+  const chartSelector = document.querySelectorAll("#chartTwo");
+
+  if (chartSelector.length) {
+    const chartFour = new ApexCharts(
+      document.querySelector("#chartTwo"),
+      chartTwoOptions,
+    );
+    chartFour.render();
+  }
+};
+
+export default chart02;

assets/js/components/charts/chart-03.js

@@ -0,0 +1,113 @@
+import ApexCharts from "apexcharts";
+
+// ===== chartThree
+const chart03 = () => {
+  const chartThreeOptions = {
+    series: [
+      {
+        name: "Sales",
+        data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],
+      },
+      {
+        name: "Revenue",
+        data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],
+      },
+    ],
+    legend: {
+      show: false,
+      position: "top",
+      horizontalAlign: "left",
+    },
+    colors: ["#465FFF", "#9CB9FF"],
+    chart: {
+      fontFamily: "Outfit, sans-serif",
+      height: 310,
+      type: "area",
+      toolbar: {
+        show: false,
+      },
+    },
+    fill: {
+      gradient: {
+        enabled: true,
+        opacityFrom: 0.55,
+        opacityTo: 0,
+      },
+    },
+    stroke: {
+      curve: "straight",
+      width: ["2", "2"],
+    },
+
+    markers: {
+      size: 0,
+    },
+    labels: {
+      show: false,
+      position: "top",
+    },
+    grid: {
+      xaxis: {
+        lines: {
+          show: false,
+        },
+      },
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    tooltip: {
+      x: {
+        format: "dd MMM yyyy",
+      },
+    },
+    xaxis: {
+      type: "category",
+      categories: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      tooltip: false,
+    },
+    yaxis: {
+      title: {
+        style: {
+          fontSize: "0px",
+        },
+      },
+    },
+  };
+
+  const chartSelector = document.querySelectorAll("#chartThree");
+
+  if (chartSelector.length) {
+    const chartThree = new ApexCharts(
+      document.querySelector("#chartThree"),
+      chartThreeOptions,
+    );
+    chartThree.render();
+  }
+};
+
+export default chart03;