Skip to content

Commit

Permalink
recent fatal crashes on homepage, region page backlinks to /, njsp/nj…
Browse files Browse the repository at this point in the history 
…dot attribution cleanup
  • Loading branch information
@ryan-williams
ryan-williams committed Mar 17, 2024
1 parent fe7ee1b commit 9b11d74
Show file tree
Hide file tree
Showing 11 changed files with 216 additions and 89 deletions.
66 changes: 38 additions & 28 deletions www/pages/c/[[...region]].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import { ResultTable } from "@/src/result-table";
import A from "@rdub/next-base/a";
import { map } from "fp-ts/Either";
import Footer from "@/src/footer";
import { Info, NjdotSource, NjspSource } from "@/src/icons";
import { Home } from "@mui/icons-material";

export const DOTStart = "2001-01-01"
export const DOTEnd = "2021-12-31"
Expand Down Expand Up @@ -90,7 +92,7 @@ export const getStaticProps: GetStaticProps<Props, Params> = async ({ params })
return { props: { urls, cp, cn, cc, mc, mn, cc2mc2mn, Counties, barProps, } }
}

export default function CityPage({ urls, barProps, cp, Counties, ...regionProps }: Props) {
export default function RegionPage({ urls, barProps, cp, Counties, ...regionProps }: Props) {
const [ requestChunkSize, setRequestChunkSize ] = useState<number>(64 * 1024)
const { cc, mc, cn, mn, mc2mn, cc2mc2mn, setCounty, setCity, } = useRegion({ ...regionProps, urlPrefix: "/c", })
const njdotPaginationControls = useDatePaginationControls({ id: "njdot-crashes" }, { start: DOTStart, end: DOTEnd, })
Expand Down Expand Up @@ -127,32 +129,41 @@ export default function CityPage({ urls, barProps, cp, Counties, ...regionProps
return (
<div className={css.body}>
<div className={css.container}>
<h1 className={css.title}>{
(setCity && mc && mc2mn)
? <CitySelect
city={mc2mn[mc]}
setCity={setCity}
cities={values(mc2mn)}
/>
: setCounty
? <CountySelect
county={cn ?? null}
setCounty={setCounty}
Counties={Counties}
<h1 className={css.title}>
<span className={css.home}>
<A href={"/"}>
<Home fontSize={"medium"} />
</A>
</span>
{
(setCity && mc && mc2mn)
? <CitySelect
city={mc2mn[mc]}
setCity={setCity}
cities={values(mc2mn)}
/>
: title
}</h1>
: setCounty
? <CountySelect
county={cn ?? null}
setCounty={setCounty}
Counties={Counties}
/>
: title
}
</h1>
{subtitle && <div className={css.subtitle}>{subtitle}</div>}
{
barProps
? <div className={css.njspPlot}>
<NjspPlot
{...barProps}
county={cn ?? null}
Heading={"h1"}
heading={<H2 id={"by-type"}>{plotTitle}</H2>}
spec={njspPlotSpec}
/>
? <div className={css.section}>
<div className={css.njspPlot}>
<NjspPlot
{...barProps}
county={cn ?? null}
Heading={"h1"}
heading={<H2 id={"by-type"}>{plotTitle}</H2>}
spec={njspPlotSpec}
/>
</div>
</div>
: null
}
Expand All @@ -161,34 +172,33 @@ export default function CityPage({ urls, barProps, cp, Counties, ...regionProps
<H2 id={"recent"}>Recent fatal crashes</H2>
<div className={css.sectionSubtitle}>2008 – present</div>
<ResultTable
className={css.crashesTable}
result={njspCrashes}
pagination={njspPagination}
/>
<div className={css.footer}>Source: <A href={NjspFatalAcc}>NJ State Police</A> (fatal crashes only; typically published between a day and a few months after the fact)</div>
<NjspSource />
</div>
}
{
njdotCrashes && <div className={css.section}>
<H2 id={"dot"}>Fatal / Injury crash details</H2>
<div className={css.sectionSubtitle}>2001-2021</div>
<ResultTable
className={css.crashesTable}
result={njdotCrashes}
pagination={njdotPagination}
/>
<div className={css.footer}>Source: <A href={NjdotRawData}>NJ DOT</A> (includes non-fatal crashes; most recent data: 2021)</div>
<NjdotSource />
</div>
}
{
yearStatsResult && <div className={css.section}>
<H2 id={"stats"}>Annual stats</H2>
<div className={css.sectionSubtitle}>2001-2021</div>
<ResultTable
className={`${css.crashesTable} ${css.withTotals}`}
className={css.withTotals}
result={map((ysds: YearStatsDicts) => yearStatsRows({ ysds }))(yearStatsResult)}
colTitles={ColTitles}
/>
<NjdotSource />
</div>
}
<Footer />
Expand Down
8 changes: 8 additions & 0 deletions www/pages/index.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,11 @@
.bold {
font-weight: bold;
}

.ytdFooter {
margin: 0.4em 0;
p {
//margin: 0;
margin-top: 0.2em;
}
}
58 changes: 51 additions & 7 deletions www/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,55 @@ import css from './index.module.scss'
import A from "@rdub/next-base/a";
import { Nav } from "@rdub/next-base/nav";
import { getBasePath } from "@rdub/next-base/basePath"
import { Socials } from "@rdub/next-base/socials"
import { url } from "@/src/site";
import { GitHub, crashDataEmail } from "@/src/socials"
import { GitHub } from "@/src/socials"
import { plotSpecs } from "@/src/plotSpecs";
import { buildPlot, buildPlots, Plot, PlotsDict } from "@rdub/next-plotly/plot";
import { loadPlots } from "@rdub/next-plotly/plot-load";
import * as Njsp from "@/src/njsp/plot";
import { NjspPlot } from "@/src/njsp/plot";
import { loadProps } from "@/server/njsp/plot";
import { NjdotRawData, NjspFatalAcc } from "@/src/urls";
import { getUrls, NjdotRawData, NjspFatalAcc, Urls } from "@/src/urls";
import Footer from '@/src/footer';
import { ResultTable } from "@/src/result-table";
import { H2 } from "@/pages/c/[[...region]]";
import { usePaginationControls, useResultPagination } from "@/src/pagination";
import { Total, useNjspCrashesTotal, useNjspCrashRows } from "@/src/use-njsp-crashes";
import singleton from "@rdub/base/singleton";
import { cc2mc2mn } from "@/server/county";
import { CC2MC2MN } from "@/src/county";
import { NjspSource } from "@/src/icons";

type Props = {
plotsDict: PlotsDict
njspProps: Njsp.Props
urls: Urls
cc2mc2mn: CC2MC2MN
}

export const getStaticProps: GetStaticProps = async () => {
const plotsDict: PlotsDict = loadPlots(plotSpecs)
const njspProps = await loadProps()
return { props: { plotsDict, njspProps, }, }
const urls = getUrls()
return { props: { plotsDict, njspProps, urls, cc2mc2mn, }, }
}

const Home = ({ plotsDict, njspProps }: Props) => {
const Home = ({ plotsDict, njspProps, urls, cc2mc2mn, }: Props) => {
const basePath = getBasePath()
const [ requestChunkSize, setRequestChunkSize ] = useState<number>(64 * 1024)

const [ njspPlotSpec, ...plotSpecs2 ] = plotSpecs
const njspPlot = buildPlot(njspPlotSpec, plotsDict[njspPlotSpec.id])
const plots: Plot[] = buildPlots(plotSpecs2, plotsDict)
const sections = [ njspPlot, ...plots ].map(({id, title, menuName, dropdownSection,}) => ({id, name: menuName || title, dropdownSection}))
const sections = [
njspPlot,
{
id: "recent-fatal-crashes",
title: "Recent Fatal Crashes",
dropdownSection: "NJSP",
},
...plots
].map(({id, title, menuName, dropdownSection,}) => ({id, name: menuName || title, dropdownSection}))
const menus = [
{ id: "NJSP", name: "NJSP", },
{ id: "state-years", name: "State x Years", },
Expand All @@ -50,6 +69,16 @@ const Home = ({ plotsDict, njspProps }: Props) => {

const [ county, setCounty ] = useState<string | null>(null)

const cc = null, mc = null
const njspPaginationControls = usePaginationControls({ id: "njsp-crashes" })
const njspCrashes = useNjspCrashRows({ urls, cc, mc, cc2mc2mn, ...njspPaginationControls, })
const njspCrashesTotal = useNjspCrashesTotal({ urls, cc, mc, requestChunkSize, })
const njspPagination = useResultPagination(
njspCrashesTotal,
(totals: Total[]) => singleton(totals).total,
njspPaginationControls,
)

return (
<div className={css.container}>
<Head
Expand Down Expand Up @@ -85,7 +114,7 @@ const Home = ({ plotsDict, njspProps }: Props) => {
<li><A href={"/map/hudson"}>Full screen map here</A></li>
<li>Code and cleaned data are <A href={GitHub.href}>here on GitHub</A>.</li>
</ul>
<div key={njspPlotSpec.id} className={css["plot-container"]}>
<div className={css["plot-container"]}>
<NjspPlot
{...njspProps}
county={county}
Expand All @@ -94,6 +123,21 @@ const Home = ({ plotsDict, njspProps }: Props) => {
/>
<hr/>
</div>
{
<div className={css["plot-container"]}>
<div id={"recent-fatal-crashes"} className={css.section}>
<H2>Recent fatal crashes</H2>
{
njspCrashes && <ResultTable
result={njspCrashes}
pagination={njspPagination}
/>
}
<NjspSource />
</div>
<hr/>
</div>
}
{
plots.map(
({id, ...rest}, idx) =>
Expand Down
6 changes: 6 additions & 0 deletions www/src/icons.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,9 @@
overflow: visible;
margin-right: 0.3em;
}

.info {
//margin-left: 0.2em;
vertical-align: middle;
top: -0.08em;
}
Loading

0 comments on commit 9b11d74

Please sign in to comment.