Skip to content

Commit

Permalink
Merge pull request #51 from devinit/feature/ple_performance
Browse files Browse the repository at this point in the history 
Feature | PLE Performance Chart
  • Loading branch information
@edwinmp
edwinmp authored Feb 20, 2023
2 parents 594e7c8 + 86a3491 commit a846477
Show file tree
Hide file tree
Showing 7 changed files with 1,115 additions and 421 deletions.
2 changes: 1 addition & 1 deletion assets/core.js
View file

Large diffs are not rendered by default.

466 changes: 466 additions & 0 deletions public/assets/data/kayunga/ple_analysis_2018_to_2020.csv
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/core/SelectorDropdowns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { createRoot } from 'react-dom/client';
import { addFilterWrapper } from '../widgets/filters';
import Selectors from './components/Selectors';

const renderSelectors = (className) => {
const renderSelectors = (className, id) => {
window.DICharts.handler.addChart({
className,
d3: {
Expand Down Expand Up @@ -34,7 +34,7 @@ const renderSelectors = (className) => {
'Invalid value for selectors - an Array is expected. Please review the documentation!'
);
}
rootElement.render(<Selectors configs={selectors} />);
rootElement.render(<Selectors configs={selectors} renderIds={id} />);
});
} else {
window.console.log('State is not defined');
Expand Down
60 changes: 48 additions & 12 deletions src/core/charts/EducationCharts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import fetchData, { formatNumber, getYearsFromRange } from '../../utils/data';

const defaultSubCounty = 'all';
const defaultLevel = 'all';
const defaultOwnership = 'all';
const getYears = (data, yearRange) => {
if (yearRange) return getYearsFromRange(yearRange).map((year) => `${year}`);

Expand All @@ -21,25 +22,32 @@ const getChartType = (type) => {

return type;
};
const getSeries = (config, dataArray, subCounty, years, level) => {
const getSeries = (config, dataArray, subCounty, years, level, ownership) => {
const { series: seriesNames, mapping } = config;
const series = seriesNames.map((seriesName, index) => ({
name: seriesName,
type: getChartType(config.type),
stack: !config.type || ['area', 'bar', 'column'].includes(config.type) ? 'School Type' : undefined,
...(config.className !== 'dicharts--ple-performance-analysis' && {
stack: !config.type || ['area', 'bar', 'column'].includes(config.type) ? 'School Type' : undefined,
}),
areaStyle: config.type === 'area' ? {} : undefined,
smooth: true,
emphasis: {
focus: 'series',
},
label: {
show: index === seriesNames.length - 1,
show: config.className !== 'dicharts--ple-performance-analysis' ? index === seriesNames.length - 1 : true,
position: 'top',
formatter: (params) => {
let total = 0;
series.forEach((serie) => {
total += serie.data[params.dataIndex];
});
for (let i = 0; i < series.length; i += 1) {
if (series[i].name === seriesName && config.className === 'dicharts--ple-performance-analysis') {
total = parseInt(series[i].data[params.dataIndex], 10);
break;
} else {
total += parseInt(series[i].data[params.dataIndex], 10);
}
}

return formatNumber(total);
},
Expand All @@ -48,14 +56,35 @@ const getSeries = (config, dataArray, subCounty, years, level) => {
const yearValues = [];
dataArray
.filter((item) => {
if ((!subCounty && !level) || (subCounty === defaultSubCounty && level === defaultLevel)) {
if (
(!subCounty && !level && !ownership) ||
(subCounty === defaultSubCounty &&
level === defaultLevel &&
(ownership === undefined || ownership === defaultOwnership))
) {
return true;
}
if (subCounty && (!level || level === defaultLevel)) {
if (subCounty && (!level || level === defaultLevel) && (!ownership || ownership === defaultOwnership)) {
return item[mapping.subCounty].toLowerCase() === subCounty.toLowerCase();
}
if (level && (!subCounty || subCounty === defaultSubCounty)) {
return item[mapping.level].toLowerCase() === level.toLowerCase();
if (
level &&
(!subCounty || subCounty === defaultSubCounty) &&
(!ownership || ownership === defaultOwnership)
) {
return item[mapping.level]
? item[mapping.level].toLowerCase() === level.toLowerCase()
: !item[mapping.level];
}
if (ownership && (!subCounty || subCounty === defaultSubCounty)) {
return item[mapping.ownership]
? item[mapping.ownership].toLowerCase() === ownership.toLowerCase()
: !item[mapping.ownership];
}
if (ownership && subCounty) {
return item[mapping.ownership]
? item[mapping.ownership].toLowerCase() === ownership.toLowerCase()
: !item[mapping.ownership] && item[mapping.subCounty].toLowerCase() === subCounty.toLowerCase();
}

return (
Expand All @@ -66,6 +95,8 @@ const getSeries = (config, dataArray, subCounty, years, level) => {
.forEach((item) => {
if (item[mapping.year] === year && item[mapping.series].toLowerCase() === seriesName.toLowerCase()) {
yearValues.push(Number(item[mapping.value]));
} else if (item[mapping.year] === year && config.className === 'dicharts--ple-performance-analysis') {
yearValues.push(Number(item[mapping[seriesName.toLowerCase().split(' ').join('_')]]));
}
});

Expand Down Expand Up @@ -161,9 +192,10 @@ const renderChart = (config) => {
config.filters && config.filters.subCounties
? data.filter((item) => config.filters.subCounties.includes(item[config.mapping.subCounty]))
: data;

window.DIState.addListener(() => {
dichart.showLoading();
const { subCounty: selectedSubCounty, level: selectedLevel } = window.DIState.getState;
const { subCounty: selectedSubCounty, level: selectedLevel, ownership } = window.DIState.getState;

// only update if subcounty or level have changed
if (subCounty === selectedSubCounty && level === selectedLevel) return;
Expand All @@ -183,6 +215,10 @@ const renderChart = (config) => {
},
xAxis: {
data: years,
nameTextStyle: {
verticalAlign: 'top',
},
name: 'Years',
},
yAxis: {
type: 'value',
Expand All @@ -198,7 +234,7 @@ const renderChart = (config) => {
},
},
},
series: getSeries(config, filteredData, subCounty, years, level),
series: getSeries(config, filteredData, subCounty, years, level, ownership),
});
options.color = ['#a21e25', '#fbd7cb'].concat(colorways.default);
chart.setOption(deepMerge(options, config.options || {}, { arrayMerge: combineMerge }));
Expand Down
51 changes: 27 additions & 24 deletions src/core/components/Selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,34 @@ const Selectors = (props) => {
useEffect(() => {
if (props.configs) {
Promise.all(
props.configs.map(async (selector) => {
const item = {
label: selector.label,
defaultValue: selector.defaultValue,
stateProperty: selector.stateProperty,
};
item.options = selector.defaultValue ? [selector.defaultValue] : [];
let data = selector.data || [];
if (selector.url) {
data = await fetchData(selector.url);
}
item.options = item.options.concat(
data.reduce((options, curr) => {
if (!options.find((i) => i[selector.valueProperty] === curr[selector.valueProperty])) {
options.push({
value: curr[selector.valueProperty],
label: curr[selector.labelProperty],
});
}
props.configs
.filter((item) => props.renderIds.includes(item.id))
.map(async (selector) => {
const item = {
label: selector.label,
defaultValue: selector.defaultValue,
stateProperty: selector.stateProperty,
};
item.options = selector.defaultValue ? [selector.defaultValue] : [];
let data = selector.data || [];
if (selector.url) {
data = await fetchData(selector.url);
}
item.options = item.options.concat(
data.reduce((options, curr) => {
if (!options.find((i) => i[selector.valueProperty] === curr[selector.valueProperty])) {
options.push({
value: curr[selector.valueProperty],
label: curr[selector.labelProperty],
});
}

return options;
}, [])
);
return options;
}, [])
);

return item;
})
return item;
})
)
.then(setSelectors)
.catch((error) => window.console.log(error));
Expand Down Expand Up @@ -76,6 +78,7 @@ Selectors.propTypes = {
valueProperty: PropTypes.string.isRequired,
})
),
renderIds: PropTypes.string,
};

export default Selectors;
Loading

0 comments on commit a846477

Please sign in to comment.