Merge pull request #230 from caktus/update-pie-chart-styling

Update pie chart styling
caktus · Sep 8, 2023 · d7f3fbc · d7f3fbc
2 parents 5d903a4 + c690ead
commit d7f3fbc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git 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;
@@ -97,6 +98,10 @@ export default function LineChart({
  popperElement.removeAttribute('data-show');
  };
 
+ if (!data.datasets.length) {
+ return <DataLoading />;
+ }
+
  return (
  <>
  {displayStopPurposeTooltips && (

diff --git 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,
@@ -31,6 +32,9 @@ export default function PieChart({
  return `${context.parsed}%`;
  },
  },
+ titleColor: '#000',
+ bodyColor: '#000',
+ backgroundColor: 'rgba(255, 255, 255, 1.0)',
  },
  title: {
  display: displayTitle,
@@ -57,20 +61,20 @@ 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);
  ctx.lineTo(x + 10, y - 5 - offsetHeight);
  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();
  }
@@ -98,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>}