From fc1dbb5722ea18875f1c036fa3a63384a4b4afd8 Mon Sep 17 00:00:00 2001
From: Aristotel Fani <afani1997@gmail.com>
Date: Fri, 8 Sep 2023 00:40:45 -0400
Subject: [PATCH 1/3] make downloadable pie chart have white labels

---
 frontend/src/Components/NewCharts/PieChart.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/NewCharts/PieChart.js b/frontend/src/Components/NewCharts/PieChart.js
index 57c43775..6ea72f1e 100644
--- a/frontend/src/Components/NewCharts/PieChart.js
+++ b/frontend/src/Components/NewCharts/PieChart.js
@@ -57,11 +57,11 @@ export default function PieChart({
             }
             const text = `${chart.data.labels[index]}: ${chart.data.datasets[0].data[index]}%`;
             const textWidth = ctx.measureText(text).width;
-            ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
+            ctx.fillStyle = 'rgba(255, 255, 255, 1)';
             const height = y - 15 - offsetHeight;
             ctx.fillRect(x - (textWidth + 10) / 2, height, textWidth + 10, 20);
 
-            ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
+            ctx.fillStyle = 'rgba(255, 255, 255, 1)';
             ctx.beginPath();
             ctx.moveTo(x, y + 15 - offsetHeight);
             ctx.lineTo(x - 10, y - 5 - offsetHeight);
@@ -69,8 +69,8 @@ export default function PieChart({
             ctx.fill();
             ctx.restore();
 
-            ctx.font = '12px Arial';
-            ctx.fillStyle = 'white';
+            ctx.font = '14px Arial';
+            ctx.fillStyle = 'black';
             ctx.fillText(text, x - textWidth / 2, y - offsetHeight);
             ctx.restore();
           }

From 92589ab4e90cc999166fa24a05b512ba5cc341e4 Mon Sep 17 00:00:00 2001
From: Aristotel Fani <afani1997@gmail.com>
Date: Fri, 8 Sep 2023 00:51:54 -0400
Subject: [PATCH 2/3] change tooltip background to white

---
 frontend/src/Components/NewCharts/PieChart.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/Components/NewCharts/PieChart.js b/frontend/src/Components/NewCharts/PieChart.js
index 6ea72f1e..1d35dc35 100644
--- a/frontend/src/Components/NewCharts/PieChart.js
+++ b/frontend/src/Components/NewCharts/PieChart.js
@@ -31,6 +31,9 @@ export default function PieChart({
             return `${context.parsed}%`;
           },
         },
+        titleColor: '#000',
+        bodyColor: '#000',
+        backgroundColor: 'rgba(255, 255, 255, 1.0)',
       },
       title: {
         display: displayTitle,

From d14f5e1f50804f8f086ebc8c42785c81e0b5d84a Mon Sep 17 00:00:00 2001
From: Aristotel Fani <afani1997@gmail.com>
Date: Fri, 8 Sep 2023 01:07:29 -0400
Subject: [PATCH 3/3] add loading states

---
 frontend/src/Components/NewCharts/LineChart.js | 5 +++++
 frontend/src/Components/NewCharts/PieChart.js  | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/frontend/src/Components/NewCharts/LineChart.js b/frontend/src/Components/NewCharts/LineChart.js
index f75a1f92..87295ae4 100644
--- a/frontend/src/Components/NewCharts/LineChart.js
+++ b/frontend/src/Components/NewCharts/LineChart.js
@@ -3,6 +3,7 @@ import { Line } from 'react-chartjs-2';
 import { tooltipLanguage } from '../../util/tooltipLanguage';
 import { usePopper } from 'react-popper';
 import styled from 'styled-components';
+import DataLoading from '../Charts/ChartPrimitives/DataLoading';
 
 export const Tooltip = styled.div`
   background: #333;
@@ -94,6 +95,10 @@ export default function LineChart({
     popperElement.removeAttribute('data-show');
   };
 
+  if (!data.datasets.length) {
+    return <DataLoading />;
+  }
+
   return (
     <>
       <div ref={setReferenceElement} />
diff --git a/frontend/src/Components/NewCharts/PieChart.js b/frontend/src/Components/NewCharts/PieChart.js
index 1d35dc35..5b4fd601 100644
--- a/frontend/src/Components/NewCharts/PieChart.js
+++ b/frontend/src/Components/NewCharts/PieChart.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Pie } from 'react-chartjs-2';
+import DataLoading from '../Charts/ChartPrimitives/DataLoading';
 
 export default function PieChart({
   data,
@@ -101,6 +102,10 @@ export default function PieChart({
 
   const noData = data.datasets[0].data.every((v) => parseInt(v, 10) === 0);
 
+  if (!data.datasets.length) {
+    return <DataLoading />;
+  }
+
   return (
     <>
       {noData && <div style={{ textAlign: 'center' }}>No Data Found</div>}