styles: Update pie chart component

SteveGT96 · Dec 13, 2024 · 219c014 · 219c014
1 parent 3ac6711
commit 219c014
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/components/accessories/charts/pie/Piechart.tsx b/src/components/accessories/charts/pie/Piechart.tsx
@@ -9,10 +9,12 @@ export const Piechart: FC<IOwnProps> = ({ data, title, height, width }) => {
 
   const options = {
     responsive: true,
-    maintainAspectRatio: false,
+    maintainAspectRatio: true,
     plugins: {
       legend: {
         position: "bottom" as const,
+        maxHeight: 100,
+        width: "100px",
       },
       title: {
         display: title !== undefined,

diff --git a/src/components/accessories/charts/pie/styles.scss b/src/components/accessories/charts/pie/styles.scss
@@ -1,7 +1,14 @@
-@import "../../../../styles/variables";
-@import "../../../../../node_modules/susy/sass/susy";
-
-// .pie {
-//   max-width: 300px;
-//   max-height: 300px;
-// }
+@import "../../../../styles/variables";
+@import "../../../../../node_modules/susy/sass/susy";
+
+// .pie {
+//   max-width: 300px;
+//   max-height: 300px;
+// }
+
+canvas {
+  height: 100% !important;
+  width: unset !important;
+  max-height: calc(100% - 100px) !important;
+  aspect-ratio: 1 !important;
+}
diff --git a/src/components/accessories/dashboard/card/styles.scss b/src/components/accessories/dashboard/card/styles.scss
@@ -13,10 +13,13 @@
   flex-direction: column;
   max-height: 100%;
 
-  canvas.pie {
-    height: unset !important;
-    width: calc(100% - 100px) !important;
-    aspect-ratio: 1 !important;
+  .MuiCardContent-root {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    canvas {
+      justify-self: center;
+    }
   }
 
   .DashboardCard-item-header {