Final tweaks to data table, legend

CT-Data-Haven · Apr 23, 2024 · 2bba6fb · 2bba6fb
1 parent d76247a
commit 2bba6fb
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 34 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -48,7 +48,7 @@ import Header from './components/Layout/Header/Header';
 
 import shapes from './data/shapes';
 
-function App({ palette }) {
+function App({ scheme }) {
     const theme = useTheme();
 
     const cities = Object.keys(fullData);
@@ -134,7 +134,7 @@ function App({ palette }) {
         <div className='App'>
             <Container fixed>
 
-                <Header heading={`${cityLookup[city]} Neighborhood Profiles`} />
+                <Header heading={`Connecticut City Neighborhood Profiles`} />
 
                 <ControlPanel controlGrps={controlProps} />
 
@@ -154,7 +154,7 @@ function App({ palette }) {
                         formatter={getFormatter(meta[topic].indicators, indicator)}
                         abbreviate={abbreviate}
                         barColors={barColors}
-                        colorscale={makeChoroScale(mapData, palette, 5)}
+                        colorscale={makeChoroScale(mapData, scheme)}
                         nhoodIdx={nhoodIdx}
                         makeTooltip={makeTooltip}
                     />

diff --git a/src/components/DataTable/DataTable.jsx b/src/components/DataTable/DataTable.jsx
@@ -31,9 +31,24 @@ const DataTable = ({
                     fontSize: '0.8rem',
                     '& .MuiDataGrid-columnHeaderTitle': {
                         whiteSpace: 'normal',
-                    }
+                        lineHeight: '1.1em',
+                        py: '0.3rem',
+                        // overflow: 'visible',
+                    },
+                    '& .MuiDataGrid-columnHeader': {
+                        height: 'unset !important',
+                        alignSelf: 'end',
+                    },
+                    '& .MuiDataGrid-columnHeaders': {
+                        maxHeight: '8rem !important',
+                    },
+                    '& .MuiDataGrid-columnHeaderRow': {
+                        // alignItems: 'flex-end',
+                    },
                 }}
                 autoHeight
+                autosizeOnMount
+                autosizeOptions={{ expand: true, includeHeaders: true}}
                 disableColumnSelector
                 hideFooterSelectedRowCount
                 keepNonExistentRowsSelected

diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx
@@ -13,8 +13,12 @@ const Profile = ({ topic, nhood, data }) => (
                 <TableBody>
                     {data.map((row) => (
                         <TableRow key={row.id}>
-                            <TableCell sx={{ fontWeight: 'medium' }}>{row.indicator}</TableCell>
-                            <TableCell align='right'>{row.value}</TableCell>
+                            <TableCell sx={{ 
+                                fontWeight: 'medium' 
+                            }}>{row.indicator}</TableCell>
+                            <TableCell 
+                                align='right'
+                            >{row.value}</TableCell>
                         </TableRow>
                     ))}
                 </TableBody>

diff --git a/src/components/VizPanel/Legend/Legend.jsx b/src/components/VizPanel/Legend/Legend.jsx
@@ -2,22 +2,26 @@ import React from 'react';
 import Paper from '@mui/material/Paper';
 import { LegendThreshold } from '@visx/legend';
 
-const Legend = ({ colorscale, formatter }) => (
-    <Paper
-        variant='outlined'
-        sx={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            zIndex: 1000,
-            m: 1,
-            p: 1/2,
-        }}>
-        <LegendThreshold
-            scale={colorscale}
-            labelFormat={formatter}
-        />
-    </Paper>
-);
+const Legend = ({ colorscale, formatter }) => {
+    return (
+        <Paper
+            variant='outlined'
+            sx={{
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                zIndex: 1000,
+                m: 1,
+                p: 1 / 2,
+                fontFamily: 'Barlow, sans-serif',
+            }}>
+            <LegendThreshold
+                scale={colorscale}
+                labelFormat={formatter}
+                labelAlign='right'
+            />
+        </Paper>
+    )
+};
 
 export default Legend;
diff --git a/src/main.jsx b/src/main.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { schemeBuPu, schemeGreys } from 'd3-scale-chromatic';
+import { schemeBuPu, interpolateBuPu } from 'd3-scale-chromatic';
 
 import App from './App.jsx';
 
@@ -19,7 +19,8 @@ import 'leaflet/dist/leaflet.css';
 
 const rootElement = document.getElementById('root');
 
-const palette = schemeBuPu[5];
+const scheme = schemeBuPu;
+const palette = scheme[5];
 const hilite = palette[3];
 
 const theme = createTheme({
@@ -45,17 +46,17 @@ const theme = createTheme({
         fontWeightBold: 600,
         h1: {
             fontWeight: 700,
-            fontSize: '2rem',
+            fontSize: '1.6rem',
             marginTop: '1rem',
             marginBottom: '1rem',
         },
         h2: {
             fontWeight: 600,
-            fontSize: '1.35rem',
+            fontSize: '1.2rem',
         },
         h3: {
             fontWeight: 600,
-            fontSize: '1.1rem',
+            fontSize: '1.05rem',
         },
         body1: {
             marginBottom: '0.5rem',
@@ -78,7 +79,7 @@ ReactDOM.createRoot(rootElement).render(
     <React.StrictMode>
         <ThemeProvider theme={theme}>
             <CssBaseline />
-            <App palette={palette} />
+            <App scheme={scheme} />
         </ThemeProvider>
     </React.StrictMode>
 );
diff --git a/src/utils/data.js b/src/utils/data.js
@@ -16,10 +16,12 @@ export const prepProfile = (data, nhood, meta) => {
     return meta.map((indicator, i) => {
         const value = nhoodData[indicator.indicator];
         const fmt = makeFormatter(indicator.format);
+        const valType = indicator.format === ',' ? 'count' : 'percent';
         return {
             id: i,
             indicator: indicator.display,
-            value: fmt(value)
+            value: fmt(value),
+            type: valType,
         };
     });
 };
@@ -41,9 +43,9 @@ export const prepTable = (data, meta) => {
                 flex: 1,
                 renderHeader: (params) => {
                     return (params.headerName)
-                }
+                },
             };
-            col.minWidth = m.indicator === 'location' ? 180 : 80;
+            col.minWidth = m.indicator === 'location' ? 180 : 100;
 
             return col;
         })

diff --git a/src/utils/geos.js b/src/utils/geos.js
@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { bbox, feature, mesh, merge } from 'topojson-client';
-import { scaleQuantile } from 'd3-scale';
+import { scaleQuantile, scaleSequentialQuantile } from 'd3-scale';
+import { interpolateBuPu } from 'd3-scale-chromatic';
 
 export const getBounds = (geo) => {
     const b = bbox(geo);
@@ -15,8 +16,17 @@ export const makeGeoLayers = (shp) => {
     return { nhoods, meshed, merged };
 };
 
-export const makeChoroScale = (data, palette, nBrks) => {
+const quantBreaks = (data) => {
+    // decide how many breaks to use depending on number of unique values
+    const unique = _.uniq(data);
+    const n = unique.length || 5;
+    return n < 5 ? 3 : 5;
+};
+
+export const makeChoroScale = (data, scheme) => {
     const vals = _.values(data);
+    const nBrks = quantBreaks(vals);
+    const palette = scheme[nBrks];
     return scaleQuantile()
         .domain([_.min(vals), _.max(vals)])
         .range(palette)