diff --git a/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx b/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx index 6a27cbdf00..54caf3acaf 100644 --- a/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx +++ b/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx @@ -1,9 +1,6 @@ -import React from 'react'; - -import Image from 'next/image'; import { useRouter } from 'next/router'; -import { useScenario, useScenarioCalibrationResults } from 'hooks/scenarios'; +import { useScenario } from 'hooks/scenarios'; import { SCENARIO_PARAMETERS, @@ -14,8 +11,6 @@ export const AdvancedSettingsPage = (): JSX.Element => { const { query } = useRouter(); const { sid } = query as { sid: string }; - const calibrationResultsQuery = useScenarioCalibrationResults(sid); - const { data: scenarioData } = useScenario(sid); const { metadata } = scenarioData || {}; @@ -76,26 +71,6 @@ export const AdvancedSettingsPage = (): JSX.Element => { ); })} - -
- {calibrationResultsQuery.data?.map((cr) => { - return ( -
- {cr.pngData && Blm Image} -
-
-

BLM:

-

{cr.blmValue}

-
-
-

COST:

-

{cr.cost}

-
-
-
- ); - })} -
); }; diff --git a/app/layout/scenarios/reports/solutions/calibration-results/index.tsx b/app/layout/scenarios/reports/solutions/calibration-results/index.tsx new file mode 100644 index 0000000000..cf16dbc7e4 --- /dev/null +++ b/app/layout/scenarios/reports/solutions/calibration-results/index.tsx @@ -0,0 +1,47 @@ +import Image from 'next/image'; +import { useRouter } from 'next/router'; + +import { useScenarioCalibrationResults } from 'hooks/scenarios'; + +import BlmChart from 'layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart'; + +const CalibrationResultsReport = (): JSX.Element => { + const { query } = useRouter(); + const { sid } = query as { sid: string }; + + const calibrationResultsQuery = useScenarioCalibrationResults(sid); + + const chartData = [...calibrationResultsQuery.data].sort((a, b) => a.cost - b.cost); + + return ( +
+
+ {calibrationResultsQuery.data?.map((cr) => { + return ( +
+ {cr.pngData && Blm Image} +
+
+

BLM:

+

{cr.blmValue}

+
+
+

COST:

+

{cr.cost}

+
+
+
+ ); + })} +
+ {chartData?.length > 0 && ( +
+

Calibration results

+ {}} /> +
+ )} +
+ ); +}; + +export default CalibrationResultsReport; diff --git a/app/pages/reports/[pid]/[sid]/solutions.tsx b/app/pages/reports/[pid]/[sid]/solutions.tsx index 3860e87b2c..4119b73c90 100644 --- a/app/pages/reports/[pid]/[sid]/solutions.tsx +++ b/app/pages/reports/[pid]/[sid]/solutions.tsx @@ -6,6 +6,7 @@ import Head from 'layout/head'; import MetaIcons from 'layout/meta-icons'; import AdvancedSettingsPage from 'layout/scenarios/reports/solutions/advanced-settings'; import BestSolutionPage from 'layout/scenarios/reports/solutions/best-solution'; +import CalibrationResultsReport from 'layout/scenarios/reports/solutions/calibration-results'; import CostSurfaceReport from 'layout/scenarios/reports/solutions/cost-surface'; import DifferentSolutionsFirstPage from 'layout/scenarios/reports/solutions/different-solutions/first'; // import DifferentSolutionsSecondPage from 'layout/scenarios/reports/solutions/different-solutions/second'; @@ -66,29 +67,34 @@ const MainReport: React.FC = () => { {/* PAGE 7 */}
- +
{/* PAGE 8 */}
- +
{/* PAGE 9 */}
- +
{/* PAGE 10 */} +
+ + +
+ {/* PAGE 11 */} {/*
*/} - {/* PAGE 11 */} + {/* PAGE 12 */}
- {/* PAGE 12 */} + {/* PAGE 13 */}