Community Profiles
Search any community in Massachusetts to view their profile:
+
+
+
+
+
+
+
+
+
{
- toProfile(muni.toLowerCase().replace(/\s+/g, '-'));
- }}
+ onSelect={handleMuniSelect}
placeholder={'Search for a community ...'}
className={"small"}
/>
@@ -24,7 +145,11 @@ const CommunitySelectorView = ({ muniLines, muniFill, municipalityPoly, toProfil
);
diff --git a/src/components/RPAregionProfilesView.jsx b/src/components/RPAregionProfilesView.jsx
new file mode 100644
index 0000000..d8a52de
--- /dev/null
+++ b/src/components/RPAregionProfilesView.jsx
@@ -0,0 +1,506 @@
+import React, { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import styled from 'styled-components';
+import Tab from "./Tab";
+import Dropdown from "./field/Dropdown";
+import tabs from "../constants/tabs";
+import charts from "../constants/charts";
+import { selectRPAregionData,fetchRPAregionChartData } from "../reducers/rparegionSlice";
+import StackedBarChart from "../containers/visualizations/StackedBarChart";
+import StackedAreaChart from "../containers/visualizations/StackedAreaChart";
+import ChartDetails from "./visualizations/ChartDetails";
+import PieChart from "../containers/visualizations/PieChart";
+import LineChart from "../containers/visualizations/LineChart";
+import DownloadAllChartsButton from './field/DownloadAllChartsButton';
+import DataTableModal from './field/DataTableModal';
+
+// Styled Components
+const MunicipalitiesList = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ height: 100px;
+ overflow-y: auto;
+ padding: 10px;
+ background-color: #ffffff;
+ border: 1px solid #e0e0e0;
+ border-radius: 6px;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ border-radius: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: #888;
+ border-radius: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb:hover {
+ background: #555;
+ }
+`;
+
+const MunicipalitiesRow = styled.div`
+ display: flex;
+ gap: 8px;
+ flex: 0 0 auto;
+ width: 100%;
+ min-height: 35px;
+`;
+
+const MunicipalityLinkWrapper = styled.div`
+ flex: 0 0 calc((100% - 72px) / 10); /* (100% - (9 * 8px gaps)) / 10 items */
+ min-width: 90px;
+`;
+
+const StyledLink = styled(Link)`
+ color: #0066cc;
+ text-decoration: none;
+ padding: 6px 24px 6px 8px;
+ border-radius: 4px;
+ background-color: #f5f5f5;
+ font-size: 13px;
+ white-space: nowrap;
+ border: 1px solid #e0e0e0;
+ transition: all 0.2s ease;
+ text-align: center;
+ width: 100%;
+ height: 35px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ position: relative;
+
+ &::after {
+ content: "↗";
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 12px;
+ opacity: 0.7;
+ }
+
+ &:hover {
+ background-color: #e5e5e5;
+ text-decoration: underline;
+ border-color: #ccc;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+ &::after {
+ opacity: 1;
+ }
+ }
+`;
+
+const chunkArray = (array, size) => {
+ const chunked = [];
+ for (let i = 0; i < array.length; i += size) {
+ chunked.push(array.slice(i, i + size));
+ }
+ return chunked;
+};
+
+const RPAregionProfilesView = () => {
+ const dispatch = useDispatch();
+ const { rpaId, tab } = useParams();
+ const [activeTab, setActiveTab] = useState(tab || 'demographics');
+ const [modalConfig, setModalConfig] = useState({
+ show: false,
+ data: null,
+ title: ''
+ });
+
+ const rparegionData = useSelector(selectRPAregionData);
+ const municipalities = rparegionData[rpaId]?.municipalities || [];
+ const rpa_name = rparegionData[rpaId]?.rpa_name || '';
+
+
+
+ // Effect for fetching chart data
+ useEffect(() => {
+ if (charts[activeTab]) {
+ Object.values(charts[activeTab]).forEach((chart) =>
+ dispatch(fetchRPAregionChartData({ rpa_id: rpaId, chartInfo: chart }))
+ );
+ }
+ }, [activeTab, rpaId, dispatch]);
+
+ const handleShowModal = (data, title) => {
+ setModalConfig({
+ show: true,
+ data: data,
+ title: `${title} (Aggregated)`
+ });
+ }
+
+ const handleCloseModal = () => {
+ setModalConfig({
+ show: false,
+ data: null,
+ title: ''
+ });
+ };
+
+ return (
+
+
+
+ {"< Back"}
+
+
+
+
+
+
+ This RPA region contains {municipalities.length} municipalities. The charts below show aggregated data for all municipalities in this region.
+
+
+ {chunkArray(municipalities, 10).map((row, rowIndex) => (
+
+ {row.map(muni => (
+
+
+ {muni.muni_name}
+
+
+ ))}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {tabs.map((tabItem) => (
+ -
+ setActiveTab(tabItem.value)}
+ >
+ {tabItem.label}
+
+
+ ))}
+
+
+ setActiveTab(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {"< Back"}
+
+
+
+ {SUBREGIONS[subregionId]}
+
+
+
+
+ This subregion contains {municipalities.length} municipalities. The charts below show aggregated data for all municipalities in this subregion.
+
+
+ {chunkArray(municipalities, 10).map((row, rowIndex) => (
+
+ {row.map(muni => (
+
+
+ {muni.muni_name}
+
+
+ ))}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {tabs.map((tabItem) => (
+ -
+ setActiveTab(tabItem.value)}
+ >
+ {tabItem.label}
+
+
+ ))}
+
+
+ setActiveTab(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Subregion not found
;
+ }
+
+ return ;
+};
+
+const RPAProfileRoute = ({ tabOptions }) => {
+ const { rpaId, tab } = useParams();
+
+ if (!tab || !tabOptions.includes(tab)) {
+ return ;
+ }
+
+ if(!rpaId) {
+ return RPA not found
;
+ }
+
+ return ;
+};
+
+
const router = createBrowserRouter([
{
path: "/",
@@ -73,7 +110,16 @@ const router = createBrowserRouter([
{
path: "/profile/:muni/:tab?",
element:
- },{
+ },
+ {
+ path: "/profile/subregion/:subregionId/:tab?",
+ element:
+ },
+ {
+ path: "/profile/rpa/:rpaId/:tab?",
+ element:
+ },
+ {
path:"gallery",
children:[
{
diff --git a/src/pages/CommunitySelectorPage.jsx b/src/pages/CommunitySelectorPage.jsx
index 927b68c..0a2f6a0 100644
--- a/src/pages/CommunitySelectorPage.jsx
+++ b/src/pages/CommunitySelectorPage.jsx
@@ -1,77 +1,91 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
+import { createSelector } from '@reduxjs/toolkit';
import CommunitySelectorView from '../components/CommunitySelectorView';
import { fillPoly, emptyPoly } from '../reducers/municipalitySlice';
-// Container component that handles data and logic
-const CommunitySelectorPage = () => {
- const dispatch = useDispatch();
- const navigate = useNavigate();
-
- const { municipality, search } = useSelector(state => ({
- municipality: state.municipality,
- search: state.search.municipality
- }));
+// Memoized selectors
+const selectMunicipalityState = state => state.municipality;
+const selectSearchState = state => state.search.municipality;
- // Process map data
- const munisPoly = { ...municipality.geojson };
- const { results, hovering } = search;
+const selectProcessedMapData = createSelector(
+ [selectMunicipalityState, selectSearchState],
+ (municipality, search) => {
+ const munisPoly = { ...municipality.geojson };
+ const { results, hovering } = search;
- const lineFeatures = results.length
- ? {
- ...munisPoly,
- features: munisPoly.features.filter((feature) =>
- !results.length ||
- results.indexOf(feature.properties.town.toLowerCase()) > -1
- ),
- }
- : munisPoly;
+ const lineFeatures = results.length
+ ? {
+ ...munisPoly,
+ features: munisPoly.features.filter((feature) =>
+ !results.length ||
+ results.indexOf(feature.properties.town.toLowerCase()) > -1
+ ),
+ }
+ : munisPoly;
- const muniLines = {
- type: 'line',
- geojson: lineFeatures,
- };
+ const muniLines = {
+ type: 'line',
+ geojson: lineFeatures,
+ };
- let muniFill = {
- type: 'fill',
- geojson: { ...munisPoly, features: [] },
- };
+ let muniFill = {
+ type: 'fill',
+ geojson: { ...munisPoly, features: [] },
+ };
- if (hovering) {
- const upperHovering = hovering.toUpperCase();
- let filledMuniIndex = null;
+ if (hovering) {
+ const upperHovering = hovering.toUpperCase();
+ let filledMuniIndex = null;
- munisPoly.features.some((feature, i) => {
- if (feature.properties.town === upperHovering) {
- filledMuniIndex = i;
- return true;
- }
- return false;
- });
+ munisPoly.features.some((feature, i) => {
+ if (feature.properties.town === upperHovering) {
+ filledMuniIndex = i;
+ return true;
+ }
+ return false;
+ });
- if (filledMuniIndex !== null) {
- muniFill.geojson = {
- ...munisPoly,
- features: [munisPoly.features[filledMuniIndex]],
- };
+ if (filledMuniIndex !== null) {
+ muniFill.geojson = {
+ ...munisPoly,
+ features: [munisPoly.features[filledMuniIndex]],
+ };
+ }
}
+
+ return {
+ muniLines,
+ muniFill,
+ municipalityPoly: munisPoly
+ };
}
+);
+
+// Container component that handles data and logic
+const CommunitySelectorPage = () => {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ // Use memoized selector
+ const { muniLines, muniFill, municipalityPoly } = useSelector(selectProcessedMapData);
- const handleMunicipalitySelect = (municipality) => {
+ // Memoize handler
+ const handleMunicipalitySelect = useMemo(() => (municipality) => {
const formattedMuni = municipality.toLowerCase().replace(/\s+/g, '-');
dispatch(fillPoly(formattedMuni));
navigate(`/profile/${formattedMuni}`);
- };
+ }, [dispatch, navigate]);
return (
);
};
-export default CommunitySelectorPage;
\ No newline at end of file
+export default React.memo(CommunitySelectorPage);
\ No newline at end of file
diff --git a/src/pages/RPAregionProfilesPage.jsx b/src/pages/RPAregionProfilesPage.jsx
new file mode 100644
index 0000000..779e1ad
--- /dev/null
+++ b/src/pages/RPAregionProfilesPage.jsx
@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import RPAregionProfilesView from '../components/RPAregionProfilesView';
+import { fetchRPAregionData, selectRPAregionData, selectRPAregionLoading, selectRPAregionError } from '../reducers/rparegionSlice';
+
+const RPAregionProfilesPage = () => {
+ const dispatch = useDispatch();
+
+ // Get all RPA region data from Redux store
+ const rparegionData = useSelector(selectRPAregionData);
+ const loading = useSelector(selectRPAregionLoading);
+ const error = useSelector(selectRPAregionError);
+
+ // Effect for fetching RPA region data
+ useEffect(() => {
+ if (!Object.keys(rparegionData).length) {
+ dispatch(fetchRPAregionData());
+ }
+ }, [dispatch, rparegionData]);
+
+ if (loading) {
+ return Loading RPA region data...
;
+ }
+
+ if (error) {
+ return Error loading RPA region data: {error}
;
+ }
+
+ return ;
+};
+
+export default RPAregionProfilesPage;
\ No newline at end of file
diff --git a/src/pages/SubregionProfilesPage.jsx b/src/pages/SubregionProfilesPage.jsx
new file mode 100644
index 0000000..632dd23
--- /dev/null
+++ b/src/pages/SubregionProfilesPage.jsx
@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import SubregionProfilesView from '../components/SubregionProfilesView';
+import { fetchSubregionData } from '../reducers/subregionSlice';
+
+const SubregionProfilesPage = () => {
+ const dispatch = useDispatch();
+ const { subregionId } = useParams();
+
+ // Get all subregion data from Redux store
+ const subregionData = useSelector(state => state.subregion.data);
+ const loading = useSelector(state => state.subregion.loading);
+ const error = useSelector(state => state.subregion.error);
+
+ // Effect for fetching subregion data
+ useEffect(() => {
+ if (!Object.keys(subregionData).length) {
+ dispatch(fetchSubregionData());
+ }
+ }, [dispatch, subregionData]);
+
+ if (loading) {
+ return Loading subregion data...
;
+ }
+
+ if (error) {
+ return Error loading subregion data: {error}
;
+ }
+
+ return ;
+};
+
+export default SubregionProfilesPage;
\ No newline at end of file
diff --git a/src/reducers/chartSlice.js b/src/reducers/chartSlice.js
index ee8ed1f..0c2e730 100644
--- a/src/reducers/chartSlice.js
+++ b/src/reducers/chartSlice.js
@@ -94,6 +94,7 @@ const chartSlice = createSlice({
state.cache[table] = {};
}
state.cache[table][muni] = data;
+ console.log("updateChart= ", table, muni, data);
},
},
extraReducers: (builder) => {
diff --git a/src/reducers/rparegionSlice.js b/src/reducers/rparegionSlice.js
new file mode 100644
index 0000000..e1c5dfc
--- /dev/null
+++ b/src/reducers/rparegionSlice.js
@@ -0,0 +1,187 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import locations from '../constants/locations';
+
+export const fetchRPAregionChartData = createAsyncThunk(
+ "rparegion/fetchChartData",
+ async ({ rpa_id , chartInfo }, { dispatch, getState }) => {
+ console.log('fetching rpa region chart data', rpa_id, chartInfo);
+ const { rparegion } = getState();
+ const tableNames = Object.keys(chartInfo.tables);
+
+ const dispatchUpdate = (data, tableName) => {
+ dispatch(
+ updateRPAregionChart({
+ table: tableName,
+ muni: rpa_id,
+ data,
+ })
+ );
+ };
+
+ // Get all queries first
+ const queries = chartInfo.rparegionDataQuery(rpa_id);
+
+ // Handle multiple tables - match each table with its corresponding query
+ if (tableNames.length > 1) {
+ // Make sure we have the same number of queries as tables
+ if (queries.length !== tableNames.length) {
+ console.error("Mismatch between number of tables and queries");
+ return;
+ }
+
+ // Process each table with its corresponding query
+ for (let i = 0; i < tableNames.length; i++) {
+ const tableName = tableNames[i];
+ const query = queries[i];
+ let { years } = chartInfo.tables[tableName];
+
+ if (rparegion.cache[tableName]?.[rpa_id]) {
+ continue;
+ }
+
+ if (typeof years === "function") {
+ try {
+ const yearsResult = await years();
+ years = yearsResult;
+ } catch (error) {
+ console.error("Error executing years function:", error);
+ continue;
+ }
+ }
+
+ try {
+ const api = `${locations.BROWSER_API}?token=${locations.DS_TOKEN}&query=${query}`;
+ const response = await fetch(api);
+ const payload = (await response.json()) || {};
+ dispatchUpdate(payload.rows, tableName);
+ } catch (error) {
+ console.error(`Error fetching data for table ${tableName}:`, error);
+ }
+ }
+ return;
+ }
+
+ // Handle single table
+ const tableName = tableNames[0];
+ let { years } = chartInfo.tables[tableName];
+
+ if (typeof years === "function") {
+ try {
+ const yearsResult = await years();
+ years = yearsResult;
+ } catch (error) {
+ console.error("Error executing years function:", error);
+ return;
+ }
+ }
+
+ try {
+ // For single table, use the first (and should be only) query
+ const query = Array.isArray(queries) ? queries[0] : queries;
+ const api = `${locations.BROWSER_API}?token=${locations.DS_TOKEN}&query=${query}`;
+ const response = await fetch(api);
+ const payload = (await response.json()) || {};
+ dispatchUpdate(payload.rows, tableName);
+ return { table: tableName, muni: rpa_id, data: payload.rows };
+ } catch (error) {
+ console.error(`Error fetching data for table ${tableName}:`, error);
+ throw error;
+ }
+ }
+);
+
+export const fetchRPAregionData = createAsyncThunk(
+ "rparegion/fetchData",
+ async () => {
+ const api = `${locations.BROWSER_API}?token=${locations.DS_TOKEN}&query=`;
+ const query = `
+ SELECT
+ muni_id,
+ muni_name,
+ region as rpa_name,
+ region_id as rpa_id
+ FROM tabular._datakeys_muni_all
+ WHERE rpa_name IS NOT NULL
+ ORDER BY region, muni_name
+ `;
+
+ const response = await fetch(`${api}${encodeURIComponent(query)}`);
+ const payload = await response.json();
+
+ // Transform the data into the desired structure
+ const rparegionMap = {};
+
+ payload.rows?.forEach((row) => {
+ const { muni_id, muni_name, rpa_name, rpa_id} = row;
+
+ if (!rparegionMap[rpa_id]) {
+ rparegionMap[rpa_id] = {
+ rpa_name,
+ municipalities: [],
+ totalMunis: 0,
+ };
+ }
+
+ // Add municipality data
+ rparegionMap[rpa_id].municipalities.push({
+ muni_name,
+ muni_id,
+ });
+
+ rparegionMap[rpa_id].totalMunis =
+ rparegionMap[rpa_id].municipalities.length;
+ });
+
+ return rparegionMap;
+ }
+);
+
+const rparegionSlice = createSlice({
+ name: "rparegion",
+ initialState: {
+ data: {},
+ loading: false,
+ error: null,
+ cache: {}
+ },
+ reducers: {
+ updateRPAregionChart: (state, action) => {
+ const { table: tableName, muni: rparegionId, data } = action.payload;
+
+ if (!tableName || !rparegionId || !data) {
+ return;
+ }
+
+ if (!state.cache[tableName]) {
+ state.cache[tableName] = {};
+ }
+
+ state.cache[tableName][rparegionId] = data;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchRPAregionData.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchRPAregionData.fulfilled, (state, action) => {
+ state.loading = false;
+ state.data = action.payload;
+ })
+ .addCase(fetchRPAregionData.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.error.message;
+ })
+ .addCase(fetchRPAregionChartData.fulfilled, (state, action) => {
+ // No need to handle this case since we're using updateRPAregionChart reducer
+ });
+ },
+});
+
+export const { updateRPAregionChart } = rparegionSlice.actions;
+export const selectRPAregionData = (state) => state.rparegion.data;
+export const selectRPAregionLoading = (state) => state.rparegion.loading;
+export const selectRPAregionError = (state) => state.rparegion.error;
+
+export default rparegionSlice.reducer;
\ No newline at end of file
diff --git a/src/reducers/subregionSlice.js b/src/reducers/subregionSlice.js
new file mode 100644
index 0000000..58ac77b
--- /dev/null
+++ b/src/reducers/subregionSlice.js
@@ -0,0 +1,179 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import locations from "../constants/locations";
+
+//fetch subregion chart data
+export const fetchSubregionChartData = createAsyncThunk(
+ "subregion/fetchChartData",
+ async ({ subregionId, chartInfo }, { dispatch, getState }) => {
+ const { subregion } = getState();
+ const tableNames = Object.keys(chartInfo.tables);
+
+ const dispatchUpdate = (data, tableName) => {
+ dispatch(
+ updateSubregionChart({
+ table: tableName,
+ muni: subregionId,
+ data,
+ })
+ );
+ };
+
+ // Get all queries first
+ const queries = chartInfo.subregionDataQuery(subregionId);
+
+ // Handle multiple tables - match each table with its corresponding query
+ if (tableNames.length > 1) {
+ // Make sure we have the same number of queries as tables
+ if (queries.length !== tableNames.length) {
+ console.error("Mismatch between number of tables and queries");
+ return;
+ }
+
+ // Process each table with its corresponding query
+ for (let i = 0; i < tableNames.length; i++) {
+ const tableName = tableNames[i];
+ const query = queries[i];
+ let { years } = chartInfo.tables[tableName];
+
+ if (subregion.cache[tableName]?.[subregionId]) {
+ continue;
+ }
+
+ if (typeof years === "function") {
+ try {
+ const yearsResult = await years();
+ years = yearsResult;
+ } catch (error) {
+ console.error("Error executing years function:", error);
+ continue;
+ }
+ }
+
+ try {
+ const api = `${locations.BROWSER_API}?token=${locations.DS_TOKEN}&query=${query}`;
+ const response = await fetch(api);
+ const payload = (await response.json()) || {};
+ dispatchUpdate(payload.rows, tableName);
+ } catch (error) {
+ console.error(`Error fetching data for table ${tableName}:`, error);
+ }
+ }
+ return;
+ }
+
+ // Handle single table
+ const tableName = tableNames[0];
+ let { years } = chartInfo.tables[tableName];
+
+ if (typeof years === "function") {
+ try {
+ const yearsResult = await years();
+ years = yearsResult;
+ } catch (error) {
+ console.error("Error executing years function:", error);
+ return;
+ }
+ }
+
+ try {
+ // For single table, use the first (and should be only) query
+ const query = Array.isArray(queries) ? queries[0] : queries;
+ const api = `${locations.BROWSER_API}?token=${locations.DS_TOKEN}&query=${query}`;
+ const response = await fetch(api);
+ const payload = (await response.json()) || {};
+ dispatchUpdate(payload.rows, tableName);
+ } catch (error) {
+ console.error(`Error fetching data for table ${tableName}:`, error);
+ }
+ }
+);
+
+export const fetchSubregionData = createAsyncThunk(
+ "subregion/fetchData",
+ async () => {
+ const api = `${locations.BROWSER_API}?token=${locations.DS_TOKEN}&query=`;
+ const query = `
+ SELECT
+ muni_id,
+ muni_name,
+ subrg_id,
+ subrg_acr
+ FROM tabular._datakeys_muni_all
+ WHERE subrg_id IS NOT NULL
+ ORDER BY subrg_id, muni_name
+ `;
+
+ const response = await fetch(`${api}${encodeURIComponent(query)}`);
+ const payload = await response.json();
+
+ // Transform the data into the desired structure
+ const subregionMap = {};
+
+ payload.rows?.forEach((row) => {
+ const { muni_id, muni_name, subrg_id } = row;
+
+ if (!subregionMap[subrg_id]) {
+ subregionMap[subrg_id] = {
+ municipalities: [],
+ totalMunis: 0,
+ };
+ }
+
+ // Add municipality data
+ subregionMap[subrg_id].municipalities.push({
+ muni_name,
+ muni_id,
+ });
+
+ subregionMap[subrg_id].totalMunis =
+ subregionMap[subrg_id].municipalities.length;
+ });
+
+ return subregionMap;
+ }
+);
+
+const subregionSlice = createSlice({
+ name: "subregion",
+ initialState: {
+ data: {},
+ loading: false,
+ error: null,
+ cache: {}
+ },
+ reducers: {
+ updateSubregionChart: (state, action) => {
+ const { table: tableName, muni: subregionId, data } = action.payload; // Fix destructuring
+
+ if (!tableName || !subregionId || !data) {
+ return;
+ }
+
+ if (!state.cache[tableName]) {
+ state.cache[tableName] = {};
+ }
+
+ state.cache[tableName][subregionId] = data;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchSubregionData.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchSubregionData.fulfilled, (state, action) => {
+ state.loading = false;
+ state.data = action.payload;
+ })
+ .addCase(fetchSubregionData.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.error.message;
+ });
+ },
+});
+
+export const selectSubregionData = (state) => state.subregion.data;
+export const selectSubregionLoading = (state) => state.subregion.loading;
+export const { updateSubregionChart } = subregionSlice.actions;
+export default subregionSlice.reducer;
diff --git a/src/store.js b/src/store.js
index f567f52..7743460 100644
--- a/src/store.js
+++ b/src/store.js
@@ -3,6 +3,8 @@ import datasetReducer from './reducers/datasetSlice';
import searchReducer from './reducers/searchSlice';
import municipalityReducer from './reducers/municipalitySlice';
import chartReducer from './reducers/chartSlice';
+import subregionReducer from './reducers/subregionSlice';
+import rparegionReducer from './reducers/rparegionSlice';
export const store = configureStore({
reducer: {
@@ -10,6 +12,8 @@ export const store = configureStore({
search: searchReducer,
municipality: municipalityReducer,
chart: chartReducer,
+ subregion: subregionReducer,
+ rparegion: rparegionReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({