From 48aa453e952428982b84b9bbef824afff5867271 Mon Sep 17 00:00:00 2001
From: Orne Brocaar <info@brocaar.com>
Date: Fri, 29 Sep 2023 12:36:42 +0100
Subject: [PATCH] ui: Fix Doughnut chart resizing.

Fixes #284.
---
 ui/src/index.css                         | 16 ++++++++++------
 ui/src/views/dashboard/Dashboard.tsx     | 24 ++++++++++++++++++------
 ui/src/views/tenants/TenantDashboard.tsx | 24 ++++++++++++++++++------
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index f6c07a9c..e6ee9178 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -22,7 +22,7 @@
   float: right;
 }
 
-.layout-header .actions > div {
+.layout-header .actions>div {
   display: inline;
   padding-left: 24px;
 }
@@ -46,7 +46,7 @@
   margin-top: 65px;
 }
 
-.layout-content .content-header > * {
+.layout-content .content-header>* {
   float: right;
 }
 
@@ -67,14 +67,18 @@ pre {
   margin: 0px;
 }
 
-.chart-doughtnut {
-  max-width: 350;
+.chart-doughnut {
+  max-width: 350px;
   padding: 0;
   margin: auto;
   display: block;
 }
 
-.dashboard-chart > .ant-card-body {
+.chart-doughnut>canvas {
+  width: 100vh;
+}
+
+.dashboard-chart>.ant-card-body {
   height: 300px;
 }
 
@@ -123,4 +127,4 @@ pre {
 
 .input-code input {
   font-family: monospace !important;
-}
+}
\ No newline at end of file
diff --git a/ui/src/views/dashboard/Dashboard.tsx b/ui/src/views/dashboard/Dashboard.tsx
index f891cd01..09049d66 100644
--- a/ui/src/views/dashboard/Dashboard.tsx
+++ b/ui/src/views/dashboard/Dashboard.tsx
@@ -110,12 +110,16 @@ function DevicesActiveInactive({ summary }: { summary?: GetDevicesSummaryRespons
   };
 
   const options: {
-    animation: false;
+    animation: boolean;
+    responsive: boolean;
+    maintainAspectRatio: boolean;
   } = {
     animation: false,
+    responsive: true,
+    maintainAspectRatio: false,
   };
 
-  return <Doughnut data={data} options={options} className="chart-doughtnut" />;
+  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
 }
 
 function GatewaysActiveInactive({ summary }: { summary?: GetGatewaysSummaryResponse }) {
@@ -137,12 +141,16 @@ function GatewaysActiveInactive({ summary }: { summary?: GetGatewaysSummaryRespo
   };
 
   const options: {
-    animation: false;
+    animation: boolean;
+    responsive: boolean;
+    maintainAspectRatio: boolean;
   } = {
     animation: false,
+    responsive: true,
+    maintainAspectRatio: false,
   };
 
-  return <Doughnut data={data} options={options} className="chart-doughtnut" />;
+  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
 }
 
 function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse }) {
@@ -193,12 +201,16 @@ function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse })
   }
 
   const options: {
-    animation: false;
+    animation: boolean;
+    responsive: boolean;
+    maintainAspectRatio: boolean;
   } = {
     animation: false,
+    responsive: true,
+    maintainAspectRatio: false,
   };
 
-  return <Doughnut data={data} options={options} className="chart-doughtnut" />;
+  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
 }
 
 function Dashboard() {
diff --git a/ui/src/views/tenants/TenantDashboard.tsx b/ui/src/views/tenants/TenantDashboard.tsx
index 9bc0625c..6c4aa31e 100644
--- a/ui/src/views/tenants/TenantDashboard.tsx
+++ b/ui/src/views/tenants/TenantDashboard.tsx
@@ -115,12 +115,16 @@ function GatewaysActiveInactive(props: GatewayProps) {
   };
 
   const options: {
-    animation: false;
+    animation: boolean;
+    responsive: boolean;
+    maintainAspectRatio: boolean;
   } = {
     animation: false,
+    responsive: true,
+    maintainAspectRatio: false,
   };
 
-  return <Doughnut data={data} options={options} className="chart-doughtnut" />;
+  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
 }
 
 interface DeviceProps {
@@ -148,12 +152,16 @@ function DevicesActiveInactive(props: DeviceProps) {
   };
 
   const options: {
-    animation: false;
+    animation: boolean;
+    responsive: boolean;
+    maintainAspectRatio: boolean;
   } = {
     animation: false,
+    responsive: true,
+    maintainAspectRatio: false,
   };
 
-  return <Doughnut data={data} options={options} className="chart-doughtnut" />;
+  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
 }
 
 function DevicesDataRates(props: DeviceProps) {
@@ -204,12 +212,16 @@ function DevicesDataRates(props: DeviceProps) {
   }
 
   const options: {
-    animation: false;
+    animation: boolean;
+    responsive: boolean;
+    maintainAspectRatio: boolean;
   } = {
     animation: false,
+    responsive: true,
+    maintainAspectRatio: false,
   };
 
-  return <Doughnut data={data} options={options} className="chart-doughtnut" />;
+  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
 }
 
 function TenantDashboard({ tenant }: { tenant: Tenant }) {