Feature | Revert Selector Config

src/core/SelectorDropdowns.js

@@ -4,7 +4,7 @@ import { createRoot } from 'react-dom/client';
 import { addFilterWrapper } from '../widgets/filters';
 import Selectors from './components/Selectors';
 
-const renderSelectors = (className, id) => {
+const renderSelectors = (className) => {
   window.DICharts.handler.addChart({
     className,
     d3: {
@@ -34,7 +34,7 @@ const renderSelectors = (className, id) => {
                   'Invalid value for selectors - an Array is expected. Please review the documentation!'
                 );
               }
-              rootElement.render(<Selectors configs={selectors} renderIds={id} />);
+              rootElement.render(<Selectors configs={selectors} />);
             });
           } else {
             window.console.log('State is not defined');

src/core/charts/EducationCharts.js

@@ -58,9 +58,7 @@ const getSeries = (config, dataArray, subCounty, years, level, ownership) => {
         .filter((item) => {
           if (
             (!subCounty && !level && !ownership) ||
-            (subCounty === defaultSubCounty &&
-              level === defaultLevel &&
-              (ownership === undefined || ownership === defaultOwnership))
+            (subCounty === defaultSubCounty && level === defaultLevel && ownership === defaultOwnership)
           ) {
             return true;
           }
@@ -72,24 +70,39 @@ const getSeries = (config, dataArray, subCounty, years, level, ownership) => {
             (!subCounty || subCounty === defaultSubCounty) &&
             (!ownership || ownership === defaultOwnership)
           ) {
-            return item[mapping.level]
-              ? item[mapping.level].toLowerCase() === level.toLowerCase()
-              : !item[mapping.level];
+            return item[mapping.level] ? item[mapping.level].toLowerCase() === level.toLowerCase() : true;
           }
-          if (ownership && (!subCounty || subCounty === defaultSubCounty)) {
-            return item[mapping.ownership]
-              ? item[mapping.ownership].toLowerCase() === ownership.toLowerCase()
-              : !item[mapping.ownership];
+          if (ownership && (!subCounty || subCounty === defaultSubCounty) && (!level || level === defaultLevel)) {
+            return item[mapping.ownership] ? item[mapping.ownership].toLowerCase() === ownership.toLowerCase() : true;
           }
-          if (ownership && subCounty) {
-            return item[mapping.ownership]
+
+          if (subCounty && ownership && (!level || level === defaultLevel)) {
+            return item[mapping.subCounty].toLowerCase() === subCounty.toLowerCase() && item[mapping.ownership]
               ? item[mapping.ownership].toLowerCase() === ownership.toLowerCase()
-              : !item[mapping.ownership] && item[mapping.subCounty].toLowerCase() === subCounty.toLowerCase();
+              : true;
+          }
+
+          if (subCounty && level && (!ownership || ownership === defaultOwnership)) {
+            return item[mapping.subCounty].toLowerCase() === subCounty.toLowerCase() && item[mapping.level]
+              ? item[mapping.level].toLowerCase() === level.toLowerCase()
+              : true;
+          }
+
+          if (ownership && level && (!subCounty || subCounty === defaultSubCounty)) {
+            if (item[mapping.ownership] && item[mapping.level]) {
+              return (
+                item[mapping.ownership].toLowerCase() === ownership.toLowerCase() &&
+                item[mapping.level].toLowerCase() === level.toLowerCase()
+              );
+            }
+
+            return true;
           }
 
           return (
             item[mapping.subCounty].toLowerCase() === subCounty.toLowerCase() &&
-            item[mapping.level].toLowerCase() === level.toLowerCase()
+            (item[mapping.level] ? item[mapping.level].toLowerCase() === level.toLowerCase() : true) &&
+            (item[mapping.ownership] ? item[mapping.ownership].toLowerCase() === ownership.toLowerCase() : true)
           );
         })
         .forEach((item) => {
@@ -188,20 +201,27 @@ const renderChart = (config) => {
             if (window.DIState) {
               let subCounty = defaultSubCounty;
               let level = defaultLevel;
+              let ownership = defaultOwnership;
               const filteredData =
                 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, ownership } = window.DIState.getState;
+                const {
+                  subCounty: selectedSubCounty,
+                  level: selectedLevel,
+                  ownership: selectedOwnership,
+                } = window.DIState.getState;
 
                 // only update if subcounty or level have changed
-                if (subCounty === selectedSubCounty && level === selectedLevel) return;
+                if (subCounty === selectedSubCounty && level === selectedLevel && ownership === selectedOwnership)
+                  return;
 
                 subCounty = selectedSubCounty || defaultSubCounty;
                 level = selectedLevel || defaultLevel;
+                ownership = selectedOwnership || defaultOwnership;
 
                 const years = getYears(filteredData, config.yearRange);
                 const options = deepMerge(defaultOptions, {

src/core/components/Selectors.js

@@ -12,34 +12,32 @@ const Selectors = (props) => {
   useEffect(() => {
     if (props.configs) {
       Promise.all(
-        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],
-                  });
-                }
+        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],
+                });
+              }
 
-                return options;
-              }, [])
-            );
+              return options;
+            }, [])
+          );
 
-            return item;
-          })
+          return item;
+        })
       )
         .then(setSelectors)
         .catch((error) => window.console.log(error));
@@ -78,7 +76,6 @@ Selectors.propTypes = {
       valueProperty: PropTypes.string.isRequired,
     })
   ),
-  renderIds: PropTypes.string,
 };
 
 export default Selectors;

src/index.html

@@ -198,7 +198,6 @@ <h3 class="type-l type-l--trailer">PLE Performance Analysis</h3>
           <div class="chart-container chart-container--full">
             <div class="charts__chart">
               <!-- CODE TO COPY STARTS HERE {% endcomment %} -->
-              <div class="ple-performance-selectors"></div>
               <div class="dicharts--ple-performance-analysis"></div>
               <!-- CODE TO COPY ENDS HERE {% endcomment %} -->
 
@@ -269,10 +268,10 @@ <h3 class="type-l type-l--trailer">PLE Performance Analysis</h3>
     const kayungaSubCounties = ['Galiraya', 'Bbaale', 'Kayonza', 'Kitimbwa', 'Busaana', 'Kayunga', 'Kayunga Town Council', 'Nazigo', 'Kangulumira'];
     const state = {
       location: {
-        name: 'Masindi',
-        fullName: 'Masindi District',
-        coordinates: [31.766240227362417, 1.8818134163990712],
-        // coordinates: [32.86415441783307, 0.9460935176075392], // Kayunga coordinates
+        name: 'Kayunga',
+        fullName: 'Kayunga District',
+        // coordinates: [31.766240227362417, 1.8818134163990712],
+        coordinates: [32.86415441783307, 0.9460935176075392], // Kayunga coordinates
       },
       selectors: [
         {
@@ -343,27 +342,6 @@ <h3 class="type-l type-l--trailer">PLE Performance Analysis</h3>
         ],
       },
       charts: [
-        {
-          target: 'education',
-          className: 'dicharts--number-of-schools',
-          url: 'https://raw.githubusercontent.com/devinit/ug-district-dashboard-viz/dev/public/assets/data/masindi/numberOfSchools.json',
-          type: 'bar',
-          yearRange: [2016, 2021],
-          series: ['Government', 'Private'],
-          mapping: {
-            series: 'Type',
-            year: 'year',
-            value: 'Value',
-            subCounty: 'SubCounty',
-            level: 'level',
-          },
-          filters: {
-            subCounties: masindiSubCounties,
-          },
-          options: {
-            legend: { show: true },
-          }
-        },
         {
           target: 'education',
           className: 'dicharts--number-of-schools',
@@ -433,7 +411,7 @@ <h3 class="type-l type-l--trailer">PLE Performance Analysis</h3>
         {
           target: 'education',
           className: 'dicharts--ple-performance-analysis',
-          url: 'https://raw.githubusercontent.com/devinit/ug-district-dashboard-viz/feature/ple_performance/public/assets/data/kayunga/ple_analysis_2018_to_2020.csv',
+          url: 'https://raw.githubusercontent.com/devinit/ug-district-dashboard-viz/dev/public/assets/data/kayunga/ple_analysis_2018_to_2020.csv',
           yearRange: [2018, 2020],
           series: ['Grade 1', 'Grade 2', 'Grade 3'],
           mapping: {
@@ -455,130 +433,8 @@ <h3 class="type-l type-l--trailer">PLE Performance Analysis</h3>
             yAxis: { name: 'PLE Performance' },
           },
         },
-        {
-          target: 'education',
-          className: 'dicharts--learners-enrolment',
-          url: 'https://raw.githubusercontent.com/devinit/ug-district-dashboard-viz/dev/public/assets/data/masindi/learner_enrollment.csv',
-          yearRange: [2018, 2021],
-          series: ['Government', 'Private'],
-          mapping: {
-            series: 'type',
-            year: 'year',
-            value: 'value',
-            subCounty: 'subcounty',
-            level: 'level',
-          },
-          filters: {
-            subCounties: masindiSubCounties,
-          },
-          options: {
-            yAxis: { name: 'Learners enrolled' },
-          },
-        },
-        {
-          target: 'education',
-          className: 'dicharts--classroom-learners-ratio',
-          url: 'https://raw.githubusercontent.com/devinit/ug-district-dashboard-viz/dev/public/assets/data/masindi/classroom_to_pupil_ratio.csv',
-          type: 'area',
-          yearRange: [2018, 2021],
-          series: ['Government', 'Private'],
-          mapping: {
-            series: 'type',
-            year: 'year',
-            value: 'classroom_capacity',
-            subCounty: 'subcounty',
-            level: 'level',
-          },
-          filters: {
-            subCounties: masindiSubCounties,
-          },
-          aggregator: 'avg',
-          options: {
-            xAxis: {
-              boundaryGap: false,
-            },
-            series: [{ label: { show: false } }, { label: { show: false } }],
-          },
-        },
-        {
-          target: 'education',
-          className: 'dicharts--ple-performance-analysis',
-          url: 'https://raw.githubusercontent.com/devinit/ug-district-dashboard-viz/feature/ple_performance/public/assets/data/kayunga/ple_analysis_2018_to_2020.csv',
-          yearRange: [2018, 2020],
-          series: ['Grade 1', 'Grade 2', 'Grade 3'],
-          mapping: {
-            series: 'ownership',
-            year: 'year',
-            value: 'total',
-            subCounty: 'subcounty',
-            level: 'level',
-            ownership: 'ownership',
-            grade_1: 'divi_total',
-            grade_2: 'divii_total',
-            grade_3: 'diviii_total',
-          },
-          filters: {
-            subCounties: kayungaSubCounties,
-          },
-          aggregator: 'avg',
-          options: {
-            yAxis: { name: 'PLE Performance' },
-          },
-        },
       ],
       tables: [
-        {
-          target: 'education',
-          className: 'dicharts--table--number-of-schools',
-          url: 'https://raw.githubusercontent.com/devinit/ug-district-dashboard-viz/dev/public/assets/data/masindi/numberOfSchools.json',
-          yearRange: [2016, 2021],
-          rows: ['Government', 'Private'],
-          mapping: {
-            rows: 'Type',
-            year: 'year',
-            value: 'Value',
-            subCounty: 'SubCounty',
-            level: 'level',
-          },
-          filters: {
-            subCounties: masindiSubCounties,
-          },
-        },
-        {
-          target: 'education',
-          className: 'dicharts--table--learners-enrolment',
-          url: 'https://raw.githubusercontent.com/devinit/ug-district-dashboard-viz/dev/public/assets/data/masindi/learner_enrollment.csv',
-          yearRange: [2018, 2021],
-          rows: ['Government', 'Private'],
-          mapping: {
-            rows: 'type',
-            year: 'year',
-            value: 'value',
-            subCounty: 'subcounty',
-            level: 'level',
-          },
-          filters: {
-            subCounties: masindiSubCounties,
-          },
-        },
-        {
-          target: 'education',
-          className: 'dicharts--table--classroom-learners-ratio',
-          url: 'https://raw.githubusercontent.com/devinit/ug-district-dashboard-viz/dev/public/assets/data/masindi/classroom_to_pupil_ratio.csv',
-          yearRange: [2018, 2021],
-          rows: ['Government', 'Private'],
-          mapping: {
-            rows: 'type',
-            year: 'year',
-            value: 'classroom_capacity',
-            subCounty: 'subcounty',
-            level: 'level',
-          },
-          filters: {
-            subCounties: masindiSubCounties,
-          },
-          aggregator: 'avg',
-        },
         {
           target: 'education',
           className: 'dicharts--table--number-of-schools',

src/index.js

@@ -12,8 +12,7 @@ import './styles/styles.css';
  * Run your code after the page has loaded
  */
 window.addEventListener('load', () => {
-  renderSelectors('district-selectors', 'subcounty, level');
-  renderSelectors('ple-performance-selectors', 'ownership');
+  renderSelectors('district-selectors');
   renderDistrictMap('dicharts--district-map');
   // renderEChart();
   renderEducationTables();