160 redo header of graph to include description (#168)

Components/ChartBox/ChartBox.tsx

@@ -3,18 +3,20 @@ import type { Dispatch, SetStateAction } from 'react'
 
 import * as d3 from 'd3'
 
+import Title from '../UI/Title/Title'
+
 import ColorKey, { ColorRow } from './ColorKey/ColorKey'
 import LineChart from './LineChart'
 import { ChartBoxData, ChartData } from './types'
-
 import styles from './ChartBox.module.sass'
 
 interface ChartBoxProps {
-	data: ChartBoxData[],
+	data: ChartBoxData[]
 	title: string
+	lang?: Record<string, string>
 }
 
-const ChartBox = ({ data, title }: ChartBoxProps) => {
+const ChartBox = ({ data, title, lang }: ChartBoxProps) => {
 	const svgRef = React.useRef(null)
 
 	const [ width, setWidth ]: [number, Dispatch<SetStateAction<number>>] = useState(1500)
@@ -62,7 +64,7 @@ const ChartBox = ({ data, title }: ChartBoxProps) => {
 
 	return (
 		<article>
-			<h1>{title}</h1>
+			<Title page={title} opts={lang} />
 			<div className={styles.ChartArea}>
 				<ColorKey>{linesColors}</ColorKey>
 				<svg className={styles.Chart} ref={svgRef} width={width + 120} height={height * 1.1} />

Components/UI/Title/Title.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from 'react'
+
+import { useTranslation } from 'next-i18next'
+
+interface TitleProps {
+	page: string
+	opts?:Record<string, string>
+}
+
+const Title = (props: TitleProps): ReactElement => {
+	const { page, opts } = props
+	const { t } = useTranslation(page)
+
+	return <>
+		<h1>{t('title', opts)}</h1>
+		<p>{t('headDescription', opts)}</p>
+	</>
+}
+
+export default Title
+

pages/budget.tsx

@@ -4,8 +4,11 @@ import { useState } from 'react'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import useVariableInterpolation from '../util/useVariableInterpolation'
+
 import ChartBox from '../Components/ChartBox/ChartBox'
+
 import Header from '../Components/UI/Header/Header'
+
 import ControlPanel from '../Components/UI/ControlPanel/ControlPanel'
 import SelectionList from '../Components/UI/ControlPanel/SelectionList/SelectionList'
 import Dropdown from '../Components/UI/ControlPanel/Dropdown/Dropdown'
@@ -88,7 +91,7 @@ const Budget = () => {
 						getTranslation={(c) => t(`${translatedSelection.toLowerCase()}.${c}`)}
 					/>
 				</ControlPanel>
-				<ChartBox data={chartData} title={t('title', { selection: translatedSelection })} />
+				<ChartBox data={chartData} title='budget' lang={{ selection: translatedSelection }} />
 			</main>
 		</>
 	)

pages/population.tsx

@@ -5,9 +5,10 @@ import { useTranslation } from 'next-i18next'
 
 import clientPromise from '../util/mongoClient'
 
+import ChartBox from '../Components/ChartBox/ChartBox'
+
 import Header from '../Components/UI/Header/Header'
 import ControlPanel from '../Components/UI/ControlPanel/ControlPanel'
-import ChartBox from '../Components/ChartBox/ChartBox'
 import SelectionList from '../Components/UI/ControlPanel/SelectionList/SelectionList'
 
 export const getServerSideProps = async ({ locale }: { locale: string }) => {
@@ -89,7 +90,7 @@ const Population = ({ countyJSON }: HomeProps) => {
 				<ControlPanel>
 					<SelectionList list={Object.keys(countyJSON)} selected={county} setSelected={setCounty} />
 				</ControlPanel>
-				<ChartBox data={dataSets} title={t('title')} />
+				<ChartBox data={dataSets} title='population' />
 			</main>
 		</>
 	)

public/locales/en/population.json

@@ -1,5 +1,5 @@
 {
 	"title": "Colorado Population & Projected Growth",
 	"headTitle": "Colorado Population & Projected Growth Chart",
-	"headDescription": "a population and projected growth chart for the state of population chart for Colorado"
+	"headDescription": "A population and projected growth chart for the state of population chart for Colorado"
 }