Skip to content

Commit

Permalink
Fix the filename of the second chart for downloading (#1434)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Max-Z80
Max-Z80 authored Feb 19, 2025
1 parent 5be35bd commit fb5b5b3
Showing 1 changed file with 109 additions and 100 deletions.
209 changes: 109 additions & 100 deletions frontend/src/components/MapView/LeftPanel/ChartsPanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,100 +81,6 @@ function getProperties(
return item?.properties ?? {};
}

const useStyles = makeStyles(() =>
createStyles({
root: {
display: 'flex',
flexDirection: 'row',
width: '100%',
height: '100%',
},
formGroup: {
marginBottom: 20,
marginLeft: 20,
width: '100%',
},
chartsPanelParams: {
marginTop: 30,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: PanelSize.medium,
flexShrink: 0,
},
layerFormControl: {
marginTop: 30,
marginBottom: '2em',
minWidth: '300px',
maxWidth: '350px',
'& .MuiFormLabel-root': {
color: 'black',
},
'& .MuiSelect-root': {
color: 'black',
},
},
textLabel: {
color: 'black',
},
chartsContainer: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
width: '100%',
},
chartsPanelCharts: {
alignContent: 'start',
overflowY: 'auto',
overflowX: 'hidden',
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
flexGrow: 4,
gap: '16px',
padding: '16px',
marginTop: 0,
paddingBottom: '1em',
},
clearAllSelectionsButton: {
backgroundColor: '#788489',
'&:hover': {
backgroundColor: '#788489',
},
marginTop: 10,
marginBottom: 10,
marginLeft: '25%',
marginRight: '25%',
width: '50%',
'&.Mui-disabled': { opacity: 0.5 },
},
switch: {
marginRight: 2,
},
switchTrack: {
backgroundColor: '#E0E0E0',
},
switchBase: {
color: '#E0E0E0',
'&.Mui-checked': {
color: '#53888F',
},
'&.Mui-checked + .MuiSwitch-track': {
backgroundColor: '#B1D6DB',
},
},
switchTitle: {
lineHeight: 1.8,
color: 'black',
fontWeight: 400,
},
switchTitleUnchecked: {
lineHeight: 1.8,
fontWeight: 400,
},
}),
);

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const menuProps: Partial<MenuProps> = {
Expand Down Expand Up @@ -359,7 +265,7 @@ const ChartsPanel = memo(() => {
}
}, [secondAdminProperties, countryAdmin0Id, data]);

const singleDownloadChartPrefix = React.useMemo(
const singleChartFilenamePrefix = React.useMemo(
() =>
adminProperties
? [
Expand All @@ -379,7 +285,7 @@ const ChartsPanel = memo(() => {

const firstCSVFilename = adminProperties
? buildCsvFileName([
...singleDownloadChartPrefix,
...singleChartFilenamePrefix,
...(selectedLayerTitles as string[]),
comparePeriods ? 'first_period' : '',
])
Expand Down Expand Up @@ -433,7 +339,7 @@ const ChartsPanel = memo(() => {
dataForCsv={dataForCsv}
chartProps={{
showDownloadIcons: true,
downloadFilenamePrefix: singleDownloadChartPrefix,
downloadFilenamePrefix: singleChartFilenamePrefix,
}}
/>
</Box>
Expand Down Expand Up @@ -480,12 +386,13 @@ const ChartsPanel = memo(() => {
}
chartProps={{
showDownloadIcons: true,
downloadFilenamePrefix: singleDownloadChartPrefix,
downloadFilenamePrefix: singleChartFilenamePrefix,
}}
/>
</Box>
))
: [];

// now add comparison charts
const comparedAdminProperties = compareLocations
? secondAdminProperties
Expand All @@ -500,6 +407,14 @@ const ChartsPanel = memo(() => {
const comparedStartDate = comparePeriods ? startDate2 : startDate1;
const comparedEndDate = comparePeriods ? endDate2 : endDate1;

const secondChartFilenamePrefix = secondAdminProperties
? [
getCountryName(secondAdminProperties),
secondSelectedAdmin1Area,
secondSelectedAdmin2Area,
].map(x => t(x))
: [];

const comparisonChartList = comparing
? chartLayers
.filter(layer => selectedLayerTitles.includes(layer.title))
Expand Down Expand Up @@ -537,7 +452,7 @@ const ChartsPanel = memo(() => {
minChartValue={Math.min(...minChartValues)}
chartProps={{
showDownloadIcons: true,
downloadFilenamePrefix: singleDownloadChartPrefix,
downloadFilenamePrefix: secondChartFilenamePrefix,
}}
/>
</Box>
Expand Down Expand Up @@ -657,7 +572,7 @@ const ChartsPanel = memo(() => {
selectedAdmin1Area,
selectedAdmin2Area,
selectedLayerTitles,
singleDownloadChartPrefix,
singleChartFilenamePrefix,
startDate1,
startDate2,
t,
Expand Down Expand Up @@ -964,4 +879,98 @@ const ChartsPanel = memo(() => {
);
});

const useStyles = makeStyles(() =>
createStyles({
root: {
display: 'flex',
flexDirection: 'row',
width: '100%',
height: '100%',
},
formGroup: {
marginBottom: 20,
marginLeft: 20,
width: '100%',
},
chartsPanelParams: {
marginTop: 30,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: PanelSize.medium,
flexShrink: 0,
},
layerFormControl: {
marginTop: 30,
marginBottom: '2em',
minWidth: '300px',
maxWidth: '350px',
'& .MuiFormLabel-root': {
color: 'black',
},
'& .MuiSelect-root': {
color: 'black',
},
},
textLabel: {
color: 'black',
},
chartsContainer: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
width: '100%',
},
chartsPanelCharts: {
alignContent: 'start',
overflowY: 'auto',
overflowX: 'hidden',
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
flexGrow: 4,
gap: '16px',
padding: '16px',
marginTop: 0,
paddingBottom: '1em',
},
clearAllSelectionsButton: {
backgroundColor: '#788489',
'&:hover': {
backgroundColor: '#788489',
},
marginTop: 10,
marginBottom: 10,
marginLeft: '25%',
marginRight: '25%',
width: '50%',
'&.Mui-disabled': { opacity: 0.5 },
},
switch: {
marginRight: 2,
},
switchTrack: {
backgroundColor: '#E0E0E0',
},
switchBase: {
color: '#E0E0E0',
'&.Mui-checked': {
color: '#53888F',
},
'&.Mui-checked + .MuiSwitch-track': {
backgroundColor: '#B1D6DB',
},
},
switchTitle: {
lineHeight: 1.8,
color: 'black',
fontWeight: 400,
},
switchTitleUnchecked: {
lineHeight: 1.8,
fontWeight: 400,
},
}),
);

export default ChartsPanel;

0 comments on commit fb5b5b3

Please sign in to comment.