Initial commit: igny8 project

frontend/src/components/charts/bar/BarChartOne.tsx

@@ -0,0 +1,97 @@
+import Chart from "react-apexcharts";
+import { ApexOptions } from "apexcharts";
+
+export default function BarChartOne() {
+  const options: ApexOptions = {
+    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",
+    },
+    yaxis: {
+      title: {
+        text: undefined,
+      },
+    },
+    grid: {
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+    fill: {
+      opacity: 1,
+    },
+
+    tooltip: {
+      x: {
+        show: false,
+      },
+      y: {
+        formatter: (val: number) => `${val}`,
+      },
+    },
+  };
+  const series = [
+    {
+      name: "Sales",
+      data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],
+    },
+  ];
+  return (
+    <div className="max-w-full overflow-x-auto custom-scrollbar">
+      <div id="chartOne" className="min-w-[1000px]">
+        <Chart options={options} series={series} type="bar" height={180} />
+      </div>
+    </div>
+  );
+}

frontend/src/components/charts/line/LineChartOne.tsx

@@ -0,0 +1,120 @@
+import Chart from "react-apexcharts";
+import { ApexOptions } from "apexcharts";
+
+export default function LineChartOne() {
+  const options: ApexOptions = {
+    legend: {
+      show: false, // Hide legend
+      position: "top",
+      horizontalAlign: "left",
+    },
+    colors: ["#465FFF", "#9CB9FF"], // Define line colors
+    chart: {
+      fontFamily: "Outfit, sans-serif",
+      height: 310,
+      type: "line", // Set the chart type to 'line'
+      toolbar: {
+        show: false, // Hide chart toolbar
+      },
+    },
+    stroke: {
+      curve: "straight", // Define the line style (straight, smooth, or step)
+      width: [2, 2], // Line width for each dataset
+    },
+
+    fill: {
+      type: "gradient",
+      gradient: {
+        opacityFrom: 0.55,
+        opacityTo: 0,
+      },
+    },
+    markers: {
+      size: 0, // Size of the marker points
+      strokeColors: "#fff", // Marker border color
+      strokeWidth: 2,
+      hover: {
+        size: 6, // Marker size on hover
+      },
+    },
+    grid: {
+      xaxis: {
+        lines: {
+          show: false, // Hide grid lines on x-axis
+        },
+      },
+      yaxis: {
+        lines: {
+          show: true, // Show grid lines on y-axis
+        },
+      },
+    },
+    dataLabels: {
+      enabled: false, // Disable data labels
+    },
+    tooltip: {
+      enabled: true, // Enable tooltip
+      x: {
+        format: "dd MMM yyyy", // Format for x-axis tooltip
+      },
+    },
+    xaxis: {
+      type: "category", // Category-based x-axis
+      categories: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      axisBorder: {
+        show: false, // Hide x-axis border
+      },
+      axisTicks: {
+        show: false, // Hide x-axis ticks
+      },
+      tooltip: {
+        enabled: false, // Disable tooltip for x-axis points
+      },
+    },
+    yaxis: {
+      labels: {
+        style: {
+          fontSize: "12px", // Adjust font size for y-axis labels
+          colors: ["#6B7280"], // Color of the labels
+        },
+      },
+      title: {
+        text: "", // Remove y-axis title
+        style: {
+          fontSize: "0px",
+        },
+      },
+    },
+  };
+
+  const 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],
+    },
+  ];
+  return (
+    <div className="max-w-full overflow-x-auto custom-scrollbar">
+      <div id="chartEight" className="min-w-[1000px]">
+        <Chart options={options} series={series} type="area" height={310} />
+      </div>
+    </div>
+  );
+}