feat: add prefecture select highlight

src/components/model/PopulationChart/hooks/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useSearchParams } from 'next/navigation';
 import { array, number, object, string } from 'zod';
@@ -20,11 +20,25 @@ export type VisibleData = z.infer<typeof VisibleDataSchema>;
 
 type IUsePopulationChart = {
   visibleData: VisibleData | null;
+  activePrefectures: string[];
+  handleActivePrefectures: (prefecture: string) => void;
 };
 
 export const usePopulationChart = (): IUsePopulationChart => {
   const searchParams = useSearchParams();
   const isSearchParamNull = searchParams == null;
+  const [activePrefectures, setActivePrefectures] = useState<string[]>([]);
+
+  const handleActivePrefectures = (prefecture: string): void => {
+    setActivePrefectures((prevActivePrefectures) => {
+      if (prevActivePrefectures.includes(prefecture)) {
+        return prevActivePrefectures.filter(
+          (prevPrefecture) => prevPrefecture !== prefecture
+        );
+      }
+      return [...prevActivePrefectures, prefecture];
+    });
+  };
 
   const params = useMemo(
     () =>
@@ -73,5 +87,7 @@ export const usePopulationChart = (): IUsePopulationChart => {
 
   return {
     visibleData,
+    activePrefectures,
+    handleActivePrefectures,
   };
 };

src/components/model/PopulationChart/index.test.tsx

@@ -94,6 +94,8 @@ describe('Population Chart model Component', () => {
             ],
           },
         ]}
+        activePrefectures={[]}
+        handleActivePrefectures={jest.fn()}
       />
     );
 

src/components/model/PopulationChart/presentations/index.tsx

@@ -16,11 +16,19 @@ import { PopulationChartEmptyPresentation } from './empty';
 
 import type { VisibleData } from '../hooks';
 
+import { PRIMARY } from '@/constants/colors';
+
 type Props = {
   data: VisibleData;
+  activePrefectures: string[];
+  handleActivePrefectures: (prefecture: string) => void;
 };
 
-export const PopulationChartPresentation: React.FC<Props> = ({ data }) => (
+export const PopulationChartPresentation: React.FC<Props> = ({
+  data,
+  activePrefectures,
+  handleActivePrefectures,
+}) => (
   <div className={container}>
     <ResponsiveContainer width="99%" height="80%">
       <LineChart
@@ -42,14 +50,32 @@ export const PopulationChartPresentation: React.FC<Props> = ({ data }) => (
         />
         <XAxis dataKey="year" type="category" allowDuplicatedCategory={false} />
 
-        <Legend />
+        <Legend
+          onClick={(data: { value: string }): void => {
+            handleActivePrefectures(data.value);
+          }}
+        />
         <Tooltip />
         {data.map(({ prefecture, data }) => (
           <Line
             key={prefecture}
             dataKey="value"
             data={data}
             name={prefecture}
+            stroke={
+              activePrefectures.length > 0 &&
+              !activePrefectures.includes(prefecture)
+                ? '#ccc'
+                : PRIMARY.light
+            }
+            strokeWidth={
+              activePrefectures.length == 0
+                ? 1
+                : !activePrefectures.includes(prefecture)
+                ? 1
+                : 4
+            }
+            onClick={(): void => handleActivePrefectures(prefecture)}
           />
         ))}
       </LineChart>
@@ -58,10 +84,17 @@ export const PopulationChartPresentation: React.FC<Props> = ({ data }) => (
 );
 
 export const PopulationChartContainer: React.FC = () => {
-  const { visibleData } = usePopulationChart();
+  const { visibleData, handleActivePrefectures, activePrefectures } =
+    usePopulationChart();
 
   if (visibleData == null || visibleData.length === 0) {
     return <PopulationChartEmptyPresentation />;
   }
-  return <PopulationChartPresentation data={visibleData} />;
+  return (
+    <PopulationChartPresentation
+      data={visibleData}
+      activePrefectures={activePrefectures}
+      handleActivePrefectures={handleActivePrefectures}
+    />
+  );
 };