Charts are now responsive

HackerSchool · Feb 18, 2024 · fd876ec · fd876ec
1 parent e0f073d
commit fd876ec
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 24 deletions.
diff --git a/frontend/src/components/BalanceTimeSeries.jsx b/frontend/src/components/BalanceTimeSeries.jsx
@@ -74,7 +74,7 @@ function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard, o
 
   if (!loading && dates.length === 0) {
     return (
-      <div className="transaction-warn-container" style={inDashboard ? { width: 580 } : {}}>
+      <div className="transaction-warn-container" style={inDashboard ? {} : { height: 450 }}>
         <span>
           Not enough data to plot
           {inDashboard ? (
@@ -100,8 +100,8 @@ function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard, o
       fallback={
         <div
           style={{
-            width: 580,
-            height: inDashboard ? 283 : 383,
+            width: "100%",
+            height: inDashboard ? "100%" : 450,
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
@@ -129,6 +129,7 @@ function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard, o
         config={{
           modeBarButtonsToRemove: ["select2d", "lasso2d", "resetScale2d"],
           displaylogo: false,
+          responsive: true,
         }}
         layout={{
           yaxis: {
@@ -143,21 +144,21 @@ function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard, o
           },
           modebar: { orientation: "v", bgcolor: "rgba(0,0,0,0)" },
           xaxis: xaxisconfig,
-          width: 580,
-          height: inDashboard ? 283 : 383,
+          height: inDashboard ? undefined : 450,
           margin: {
             t: disableRange ? 10 : 50,
             b: disableRange ? 20 : 15,
             l: inDashboard ? 40 : 45,
             r: inDashboard ? 40 : 45,
           },
-          autosize: false,
+          autosize: true,
           plot_bgcolor: "rgba(0,0,0,0)",
           paper_bgcolor: inDashboard ? "#252525" : "#333333", // var(--cinza-2) : var(--cinza-4)
           font: {
             color: "#ffffff",
           },
         }}
+        style={{ width: "100%", height: "100%" }}
       />
     </Suspense>
   );

diff --git a/frontend/src/components/MonthHistogram.jsx b/frontend/src/components/MonthHistogram.jsx
@@ -160,8 +160,8 @@ function MonthHistogram({ title, typeOfYear, transactionsList, loading }) {
           fallback={
             <div
               style={{
-                width: 580,
-                height: 383,
+                width: "100%",
+                height: 400,
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "center",
@@ -179,6 +179,7 @@ function MonthHistogram({ title, typeOfYear, transactionsList, loading }) {
             config={{
               modeBarButtonsToRemove: ["select2d", "lasso2d"],
               displaylogo: false,
+              responsive: true,
             }}
             layout={{
               legend: {
@@ -240,10 +241,9 @@ function MonthHistogram({ title, typeOfYear, transactionsList, loading }) {
                 zerolinecolor: "#ffffff",
                 color: "#ffffff",
               },
-              width: 580,
-              height: 383,
+              height: 400,
               margin: { t: 60, b: 30, l: 45, r: 45 },
-              autosize: false,
+              autosize: true,
               plot_bgcolor: "rgba(0,0,0,0)", // transparent
               paper_bgcolor: "#333333", // var(--cinza-4)
               font: {
@@ -272,6 +272,7 @@ function MonthHistogram({ title, typeOfYear, transactionsList, loading }) {
                 },
               ],
             }}
+            style={{ width: "100%", height: "100%" }}
           />
         </Suspense>
       </div>

diff --git a/frontend/src/components/StackedBarChart.jsx b/frontend/src/components/StackedBarChart.jsx
@@ -173,8 +173,8 @@ function StackedBarChart({ title, typeOfYear, projectList, transactionsList, loa
           fallback={
             <div
               style={{
-                width: 580,
-                height: 383,
+                width: "100%",
+                height: 400,
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "center",
@@ -192,6 +192,7 @@ function StackedBarChart({ title, typeOfYear, projectList, transactionsList, loa
             config={{
               modeBarButtonsToRemove: ["select2d", "lasso2d"],
               displaylogo: false,
+              responsive: true,
             }}
             layout={{
               legend: {
@@ -253,10 +254,9 @@ function StackedBarChart({ title, typeOfYear, projectList, transactionsList, loa
                 zerolinecolor: "#ffffff",
                 color: "#ffffff",
               },
-              width: 580,
-              height: 383,
+              height: 400,
               margin: { t: 60, b: 30, l: 45, r: 45 },
-              autosize: false,
+              autosize: true,
               plot_bgcolor: "rgba(0,0,0,0)",
               paper_bgcolor: "#333333", // var(--cinza-4)
               font: {
@@ -288,6 +288,7 @@ function StackedBarChart({ title, typeOfYear, projectList, transactionsList, loa
                 },
               ],
             }}
+            style={{ width: "100%", height: "100%" }}
           />
         </Suspense>
       </div>

diff --git a/frontend/src/styles/Charts.css b/frontend/src/styles/Charts.css
@@ -1,14 +1,23 @@
+#ChartsPage {
+  container-type: inline-size;
+  container-name: charts;
+}
+
 .charts {
   max-height: 100%;
   padding: 3rem 3rem 0rem 3rem;
   margin-bottom: 50px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  column-gap: 0.5rem;
+  display: grid;
+  grid-template: auto / repeat(2, minmax(465px, 1fr));
+  column-gap: 2rem;
+}
+
+.chart-box {
+  max-width: 100%;
 }
 
 .chart {
+  max-width: 100%;
   background-color: var(--cinza-4);
   display: flex;
   height: fit-content;
@@ -132,8 +141,7 @@ rect.selector-rect:where([style*="fill: rgb(212, 212, 212)"]) {
 
 /* div displayed when there are not enough transactions to plot */
 #ChartsPage .transaction-warn-container {
-  width: 580px;
-  height: 383px;
+  width: 100%;
   background-color: var(--cinza-4);
   background-color: transparent;
   display: flex;
@@ -142,3 +150,9 @@ rect.selector-rect:where([style*="fill: rgb(212, 212, 212)"]) {
   text-align: center;
   border-radius: 30px;
 }
+
+@container charts (width < calc(465px * 2 + 2rem + 6rem)) {
+  .charts {
+    grid-template: auto / minmax(400px, 1fr);
+  }
+}
diff --git a/frontend/src/styles/Dashboard.css b/frontend/src/styles/Dashboard.css
@@ -287,6 +287,10 @@
 }
 
 /* balance chart */
+#dashboard-balance {
+  width: 45%;
+}
+
 #dashboard-balance .dashboard-item-content {
   display: flex;
   justify-content: center;
@@ -295,11 +299,14 @@
 #dashboard-balance .dashboard-item-content-container {
   padding: 0;
   overflow: hidden;
-  width: fit-content;
-  height: fit-content;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 #DashboardPage .transaction-warn-container {
+  width: 100%;
   height: 100%;
   background-color: transparent;
   display: flex;