Add department name for pie chart downloads (#220)

caktus · Aug 8, 2023 · 9e3705d · 9e3705d
1 parent f9af6fb
commit 9e3705d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
@@ -522,6 +522,20 @@ function TrafficStops(props) {
  );
  };
 
+ const pieChartTitle = (download = false) => {
+ let subject = stopsChartState.data[AGENCY_DETAILS].name;
+ if (subjectObserving() === 'officer') {
+ subject = `Officer ${officerId}`;
+ }
+ let title = `Traffic Stops By Percentage for ${subject} ${
+ year === YEARS_DEFAULT ? `since ${stopsChartState.yearRange[0]}` : `during ${year}`
+ }`;
+ if (download) {
+ title = `${title.split(' ').join('_').toLowerCase()}.png`;
+ }
+ return title;
+ };
+
  return (
  <TrafficStopsStyled>
  {/* Traffic Stops by Percentage */}
@@ -567,11 +581,13 @@ function TrafficStops(props) {
  isOpen={showZoomedPieChart}
  closeModal={() => setShowZoomedPieChart(false)}
  chartToPrintRef={zoomedPieCharRef}
+ fileName={pieChartTitle(true)}
  >
  <S.PieSection zoomed>
  <S.PieWrapper zoomed>
  <PieChart
  data={byPercentagePieData}
+ title={pieChartTitle()}
  displayTitle
  displayLegend
  displayOutlabels

diff --git a/frontend/src/Components/NewCharts/ChartModal.js b/frontend/src/Components/NewCharts/ChartModal.js
@@ -15,6 +15,7 @@ export default function ChartModal({
  isOpen,
  closeModal,
  chartToPrintRef,
+ fileName = 'chart.png',
  children,
 }) {
  const theme = useTheme();
@@ -41,7 +42,7 @@ export default function ChartModal({
 
  const downloadChart = useCallback(() => {
  const link = document.createElement('a');
- link.download = 'chart.png';
+ link.download = fileName;
  link.href = chartToPrintRef.current.toBase64Image();
  link.click();
  });