feat(comparison): add comparison box plot

src/app/model/compare/page.tsx

@@ -1,18 +1,21 @@
 'use client';
 
+import { Tabs } from 'antd';
 import { useSearchParams } from 'next/navigation';
+import { useMemo, useState } from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 
 import AppLayout from '@/components/custom/AppLayout/AppLayout';
 import { InfoContainer } from '@/components/custom/InfoContainer/InfoContainer';
 import { StandardText } from '@/components/custom/StandardText/StandardText';
 import { VBox } from '@/components/custom/VBox/VBox';
+import ComparisonBoxPlot from '@/components/model/ComparisonBoxPlot';
 import { useModelDetails } from '@/hooks/useModelDetails';
 import type { PercentileResultMap } from '@/hooks/useModelResults';
 import { useAllModelResults } from '@/hooks/useModelResults';
+import type { ComparisonChartModel } from '@/types/charts/ComparisonChart';
 
 import CompareModelsTable from '../../../components/model/CompareModelsTable';
-import type { ComparisonChartModel } from '../../../components/model/ComparisonChart';
 import ComparisonChart from '../../../components/model/ComparisonChart';
 import { CropLoadingDetailsTable } from '../../../components/model/CropLoadingDetailsTable';
 
@@ -25,6 +28,9 @@ const CompareModelPage = () => {
     allModelDetailResults,
   );
 
+  const [selectedComparisonTab, setSelectedComparisonTab] =
+    useState<string>('1');
+
   const getComparisonChartModels = (
     plotData: PercentileResultMap[],
     plotLabels: string[],
@@ -39,6 +45,31 @@ const CompareModelPage = () => {
     return chartInfo;
   };
 
+  const comparisonChart = useMemo(
+    () => (
+      <ComparisonChart
+        comparisonChartModels={getComparisonChartModels(
+          allModelResults,
+          allModelNames,
+        )}
+        percentiles={customPercentilesData}
+      />
+    ),
+    [allModelResults, allModelNames, customPercentilesData],
+  );
+
+  const comparisonBoxPlot = useMemo(
+    () => (
+      <ComparisonBoxPlot
+        comparisonChartModels={getComparisonChartModels(
+          allModelResults,
+          allModelNames,
+        )}
+      />
+    ),
+    [allModelResults, allModelNames, customPercentilesData],
+  );
+
   return (
     <AppLayout>
       <HelmetProvider>
@@ -55,12 +86,23 @@ const CompareModelPage = () => {
             <CropLoadingDetailsTable modelDetails={allModelDetails} />
           </InfoContainer>
           <InfoContainer title="Comparison Line Chart">
-            <ComparisonChart
-              comparisonChartModels={getComparisonChartModels(
-                allModelResults,
-                allModelNames,
-              )}
-              percentiles={customPercentilesData}
+            <Tabs
+              tabPosition="top"
+              centered
+              activeKey={selectedComparisonTab}
+              onChange={setSelectedComparisonTab}
+              items={[
+                {
+                  label: 'Line Chart',
+                  key: '1',
+                  children: comparisonChart,
+                },
+                {
+                  label: 'Box Plot',
+                  key: '2',
+                  children: comparisonBoxPlot,
+                },
+              ]}
             />
           </InfoContainer>
         </VBox>

src/app/model/page.tsx

@@ -20,10 +20,10 @@ import {
   useGetModelandBaseModelDetailQuery,
 } from '@/store';
 import { createNewModel } from '@/store/slices/modelSlice';
+import type { ComparisonChartModel } from '@/types/charts/ComparisonChart';
 import type { ModelRun } from '@/types/model/ModelRun';
 import type { Region } from '@/types/region/Region';
 
-import type { ComparisonChartModel } from '../../components/model/ComparisonChart';
 import ComparisonChart from '../../components/model/ComparisonChart';
 import { CropLoadingDetailsBaseComparisonTable } from '../../components/model/CropLoadingDetailsTable';
 import ModelChart from '../../components/model/ModelChart';

src/components/charts/BoxPlot/BoxPlot.tsx

@@ -74,6 +74,25 @@ const BoxPlot = ({
         },
       },
     },
+    colors: [
+      '#54478C',
+      '#2C699A',
+      '#048BA8',
+      '#0DB39E',
+      '#16DB93',
+      '#83E377',
+      '#B9E769',
+      '#EFEA5A',
+      '#F1C453',
+      '#F29E4C',
+      '#FF4D6D',
+      '#E63946',
+    ],
+    plotOptions: {
+      boxPlot: {
+        colors: undefined,
+      },
+    },
   };
 
   return (

src/components/model/ComparisonBoxPlot.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+
+import type { ModelDisplay } from '@/hooks/useModelResults';
+import type { ComparisonChartModel } from '@/types/charts/ComparisonChart';
+
+import BoxPlot from '../charts/BoxPlot/BoxPlot';
+
+interface ComparisonBoxPlotProps {
+  comparisonChartModels: ComparisonChartModel[];
+  reductionStartYear?: number;
+  reductionCompleteYear?: number;
+}
+
+const ComparisonBoxPlot = ({
+  comparisonChartModels,
+  reductionStartYear,
+  reductionCompleteYear,
+}: ComparisonBoxPlotProps) => {
+  function configureDisplayData(
+    data: ComparisonChartModel[],
+  ): ApexAxisChartSeries {
+    const res: ApexAxisChartSeries = [];
+
+    data.forEach((model) => {
+      const boxPlotData: {
+        type: 'boxPlot';
+        name: string;
+        data: any[];
+      } = {
+        type: 'boxPlot',
+        name: model.name,
+        data: [],
+      };
+      if ((model.plotData as any)[5] as ModelDisplay[]) {
+        const dataLen = ((model.plotData as any)[5] as ModelDisplay[])!.length;
+
+        const fifthPercentile = ((model.plotData as any)[5] as ModelDisplay[])!;
+        const lowerQuartile = ((model.plotData as any)[25] as ModelDisplay[])!;
+        const median = ((model.plotData as any)[50] as ModelDisplay[])!;
+        const upperQuartile = ((model.plotData as any)[75] as ModelDisplay[])!;
+        const ninetyFifthPercentile = ((
+          model.plotData as any
+        )[95] as ModelDisplay[])!;
+
+        for (let i = 0; i < dataLen; i += 10) {
+          const dataPoint: any = {
+            x: fifthPercentile[i]!.year,
+            y: [
+              fifthPercentile[i]!.value,
+              lowerQuartile[i]!.value,
+              median[i]!.value,
+              upperQuartile[i]!.value,
+              ninetyFifthPercentile[i]!.value,
+            ],
+          };
+          boxPlotData.data.push(dataPoint);
+        }
+      }
+      res.push(boxPlotData);
+    });
+    return res;
+  }
+
+  const [displayData, setDisplayData] = useState<ApexAxisChartSeries>(
+    configureDisplayData(comparisonChartModels),
+  );
+
+  useEffect(() => {
+    setDisplayData(configureDisplayData(comparisonChartModels));
+  }, [comparisonChartModels]);
+
+  return (
+    <BoxPlot
+      data={displayData}
+      reductionEndYear={reductionCompleteYear}
+      reductionStartYear={reductionStartYear}
+    />
+  );
+};
+
+export default ComparisonBoxPlot;

src/components/model/ComparisonChart.tsx

@@ -2,15 +2,8 @@ import { Select } from 'antd';
 import React, { useEffect, useState } from 'react';
 
 import LineChart from '@/components/charts/LineChart/LineChart';
-import type {
-  ModelDisplay,
-  PercentileResultMap,
-} from '@/hooks/useModelResults';
-
-export interface ComparisonChartModel {
-  plotData: PercentileResultMap;
-  name: string;
-}
+import type { ModelDisplay } from '@/hooks/useModelResults';
+import type { ComparisonChartModel } from '@/types/charts/ComparisonChart';
 
 interface ComparisonChartProps {
   comparisonChartModels: ComparisonChartModel[];

src/components/model/ModelBoxPlot.tsx

@@ -25,7 +25,6 @@ const ModelBoxPlot = ({
   function configureDisplayData(
     data: PercentileResultMap,
   ): ApexAxisChartSeries {
-    console.log('plotData', data);
     const res: ApexAxisChartSeries = [
       {
         type: 'boxPlot',
@@ -42,7 +41,6 @@ const ModelBoxPlot = ({
       const upperQuartile = ((data as any)[75] as ModelDisplay[])!;
       const ninetyFifthPercentile = ((data as any)[95] as ModelDisplay[])!;
 
-      console.log('5th', fifthPercentile);
       for (let i = 0; i < dataLen; i += 10) {
         const dataPoint: any = {
           x: fifthPercentile[i]!.year,
@@ -57,7 +55,6 @@ const ModelBoxPlot = ({
         res[0]?.data.push(dataPoint);
       }
     }
-    console.log(res);
     return res;
   }
 

src/types/charts/ComparisonChart.ts

@@ -0,0 +1,6 @@
+import type { PercentileResultMap } from '@/hooks/useModelResults';
+
+export interface ComparisonChartModel {
+  plotData: PercentileResultMap;
+  name: string;
+}