ok

2025-01-06 02:06:30 +07:00
parent 59a9d299c5
commit 918c923143
8 changed files with 219 additions and 50 deletions
--- a/src/components/BarChart.module.css
+++ b/src/components/BarChart.module.css
@@ -27,10 +27,28 @@
    flex-grow: 1;
    text-align: center;
    padding: 10px;
-    border-radius: 10px 10px 0 0;
    transition: all 0.3s ease-in-out;
+    font-weight: 600;
+  }
+
+  .dateSelector:first-child {
+    flex-grow: 1;
+    text-align: center;
+    padding: 10px;
+    border-radius: 10px 0 0 0;
+    transition: all 0.3s ease-in-out;
+    font-weight: 600;
  }
  
+  .dateSelector:last-child {
+    flex-grow: 1;
+    text-align: center;
+    padding: 10px;
+    border-radius: 0 10px 0 0;
+    transition: all 0.3s ease-in-out;
+    font-weight: 600;
+  }
+
  .dateSelectorActive {
    color: black;
    z-index: 2;
@@ -43,5 +61,6 @@
  
  .chartWrapper {
    border: 1px solid rgb(179, 177, 177);
+    border-radius: 0 0 11px 11px;
  }
  
--- a/src/components/DailyCharts.js
+++ b/src/components/DailyCharts.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import Chart from "react-apexcharts";
 import styles from "./BarChart.module.css"; // Import the CSS module

-const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
+const DailyCharts = ({ transactionGraph, colors, type }) => {
  const [selectedIndex, setSelectedIndex] = useState(-1);

  useEffect(() => {
@@ -12,20 +12,6 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
  const processData = (graphData) => {
    if (!graphData) return null;
    return graphData.map((dayData) => {
-      const monthly = [
-        "minggu 1",
-        "minggu 2",
-        "minggu 3",
-        "minggu 4",
-      ];
-
-      const yearly = [
-        "Q1",
-        "Q2",
-        "Q3",
-        "Q4",
-      ];
-
      const categories = [
        "0-3",
        "3-6",
@@ -103,12 +89,15 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
                    key={indexx}
                    className={`${styles.dateSelector} ${index === indexx ? styles.dateSelectorActive : styles.dateSelectorInactive
                      }`}
+                      style={{border: (index==0||index==1) && selectedIndex != index && selectedIndex != indexx || selectedIndex ==-1 && index == 0 || selectedIndex == index && index == indexx ? 
+                        '1px solid rgb(179, 177, 177)' : 'none' }}
                    onClick={() =>
-                      selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1)
+                      type == 'yesterday' && selectedIndex == -1 || type != 'yesterday' && selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1)
                    }
-                    style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }}
+                    // style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }}
                  >
-                    <div>
+                    <div 
+                    style={{ color: index === indexx ? colors[index % colors.length] : 'transparent' }}>
                      {indexx !== chartData.length - 1 ? (
                        <>
                          {day}{" "}
@@ -126,6 +115,7 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
            <div className={styles.chartWrapper}>
              <Chart
                options={{
+                  tooltip: { enabled: false },
                  chart: {
                    id: `chart-${index}`,
                    type: "area",
@@ -173,4 +163,4 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
  );
 };

-export default BarChart;
+export default DailyCharts;
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -316,7 +316,7 @@ const Header = ({
      </Title>
      <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
        <ProfileImage
-          src={user.username == undefined? shopImage : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
+          src={user.username == undefined? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s': "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
          alt="Profile"
          onClick={user.username !== undefined?handleImageClick: null}
          animate={showRectangle && animate}
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -271,7 +271,7 @@
  height: 200px;
  overflow: hidden;
  border: 3px dashed #fbebcd;
-  border-radius: 11px;
+  border-radius: 11px 11px 0 0;

  /* Flexbox for centering */
  display: flex;
--- a/src/components/PeriodCharts.js
+++ b/src/components/PeriodCharts.js
@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from "react";
+import Chart from "react-apexcharts";
+import styles from "./BarChart.module.css"; // Import the CSS module
+
+const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReports, colors }) => {
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  useEffect(() => {
+    setSelectedIndex(-1);
+  }, [aggregatedCurrentReports, aggregatedPreviousReports]);
+
+  const monthly = ["1 - 7", "8 - 14", "15 - 21", "22 - 28", "29 - 31"];
+  const yearly = ["Kuartal 1", "Kuartal 2", "Kuartal 3", "Kuartal 4"];
+  const cat = type == 'monthly' ? monthly : yearly;
+
+  // Map the data for the current reports
+  let currentIncomeData, currentOutcomeData, currentTransactionData, previousIncomeData, previousOutcomeData, previousTransactionData = null;
+  if (aggregatedCurrentReports) {
+    currentIncomeData = aggregatedCurrentReports.map((report) => report.income);
+    currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome);
+    currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions);
+  }
+  if (aggregatedPreviousReports) {
+    // Map the data for the previous reports
+    previousIncomeData = aggregatedPreviousReports.map((report) => report.income);
+    previousOutcomeData = aggregatedPreviousReports.map((report) => report.outcome);
+    previousTransactionData = aggregatedPreviousReports.map((report) => report.transactions);
+  }
+  let globalMax = null;
+  if (aggregatedCurrentReports || aggregatedPreviousReports)
+    // Find the global maximum for the y-axis
+    globalMax = Math.max(
+      // ...currentIncomeData,
+      // ...currentOutcomeData,
+      ...currentTransactionData,
+      // ...previousIncomeData,
+      // ...previousOutcomeData,
+      ...previousTransactionData
+    );
+
+  return (
+    <div className={styles.chartItemContainer}>
+
+      {aggregatedPreviousReports && (
+        <div className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== 0
+          ? styles.chartItemWrapperActive
+          : styles.chartItemWrapperInactive
+          }`}>
+
+          <div className={styles.dateSelectorWrapper}>
+            <div className={styles.dateSelector}
+              onClick={() =>
+                selectedIndex === -1 ? setSelectedIndex(0) : setSelectedIndex(-1)
+              }
+              style={{border: '1px solid rgb(179, 177, 177)', color: colors[0]}}
+             >
+              <div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
+            </div>
+            <div
+              className={`${styles.dateSelector} ${styles.dateSelectorInactive
+                }`}
+                onClick={() =>
+                  selectedIndex === 0 ? setSelectedIndex(-1) : setSelectedIndex(1)
+                }>
+              <div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
+            </div>
+          </div>
+          <div className={styles.chartWrapper}>
+            <Chart
+              options={{
+                tooltip: { enabled: false },
+                chart: { type: "area", zoom: { enabled: false }, toolbar: { show: false } },
+                xaxis: { 
+                  categories: cat,
+                  axisBorder: {
+                    show: false, // Removes the x-axis line
+                  },
+                  axisTicks: {
+                    show: false, // Removes the ticks on the x-axis
+                  },
+                 },
+                yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
+                grid: { show: false },
+                fill: { opacity: 0.5 },
+                colors: [colors[0]],
+              }}
+              series={[
+                // { name: "Pemasukan", data: previousIncomeData },
+                // { name: "Pengaluaran", data: previousOutcomeData },
+                { name: "Total transaksi", data: previousTransactionData },
+              ]}
+              type="area"
+              height={200}
+              width="100%"
+            />
+          </div>
+        </div>
+      )}
+      {aggregatedCurrentReports && (
+        <div className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== 1
+          ? styles.chartItemWrapperActive
+          : styles.chartItemWrapperInactive
+          }`}>
+          <div className={styles.dateSelectorWrapper}>
+            <div
+              className={`${styles.dateSelector} ${styles.dateSelectorInactive
+                }`}
+                onClick={() =>
+                  selectedIndex === 1 ? setSelectedIndex(-1) : setSelectedIndex(0)
+                }>
+              <div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
+            </div>
+            <div className={styles.dateSelector}
+              onClick={() =>
+                selectedIndex === -1 ? setSelectedIndex(1) : setSelectedIndex(-1)
+              }
+              
+              style={{border: '1px solid rgb(179, 177, 177)', color: colors[1]}}>
+              <div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
+            </div>
+          </div>
+          <div className={styles.chartWrapper}>
+            <Chart
+              options={{
+                tooltip: { enabled: false },
+                chart: { type: "area", zoom: { enabled: false }, toolbar: { show: false } },
+                xaxis: {
+                  categories: cat, 
+                  axisBorder: {
+                    show: false, // Removes the x-axis line
+                  },
+                  axisTicks: {
+                    show: false, // Removes the ticks on the x-axis
+                  }, },
+                yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
+                grid: { show: false },
+                fill: { opacity: 0.5 },
+                colors: [colors[1]],
+              }}
+              series={[
+                // { name: "Pemasukan", data: currentIncomeData },
+                // { name: "Pengeluaran", data: currentOutcomeData },
+                { name: "Total transaksi", data: currentTransactionData },
+              ]}
+              type="area"
+              height={200}
+              width="100%"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PeriodCharts;