Skip to content

Commit

Permalink
solutions report: moves blm calibrations to another page
Browse files Browse the repository at this point in the history
  • Loading branch information
andresgnlez committed Jan 30, 2024
1 parent 8a6cbb4 commit 3273f80
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 31 deletions.
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 || {};
Expand Down Expand Up @@ -76,26 +71,6 @@ export const AdvancedSettingsPage = (): JSX.Element => {
);
})}
</div>

<div className="flex w-5/12 flex-col space-y-2">
{calibrationResultsQuery.data?.map((cr) => {
return (
<div key={`${cr.scenarioId}-${cr.blmValue}`} className="flex space-x-3 bg-gray-600">
{cr.pngData && <Image src={cr.pngData} alt="Blm Image" width={115} height={115} />}
<div className="flex flex-col space-y-2 py-2 text-sm">
<div>
<p className="font-medium uppercase text-white">BLM:</p>
<p className="text-primary-500">{cr.blmValue}</p>
</div>
<div>
<p className="font-medium uppercase text-white">COST:</p>
<p className="text-primary-500">{cr.cost}</p>
</div>
</div>
</div>
);
})}
</div>
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -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 (
<div className="space-y-8">
<div className="grid grid-cols-2 flex-col gap-3">
{calibrationResultsQuery.data?.map((cr) => {
return (
<div key={`${cr.scenarioId}-${cr.blmValue}`} className="flex space-x-3 bg-gray-600">
{cr.pngData && <Image src={cr.pngData} alt="Blm Image" width={150} height={150} />}
<div className="flex flex-col space-y-2 py-2 text-sm">
<div>
<p className="font-medium uppercase text-white">BLM:</p>
<p className="text-primary-500">{cr.blmValue}</p>
</div>
<div>
<p className="font-medium uppercase text-white">COST:</p>
<p className="text-primary-500">{cr.cost}</p>
</div>
</div>
</div>
);
})}
</div>
{chartData?.length > 0 && (
<div className="h-72 w-full space-y-4 bg-gray-600 p-4">
<h3 className="text-sm font-bold text-white">Calibration results</h3>
<BlmChart data={chartData} selected={null} onChange={() => {}} />
</div>
)}
</div>
);
};

export default CalibrationResultsReport;
16 changes: 11 additions & 5 deletions app/pages/reports/[pid]/[sid]/solutions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -66,29 +67,34 @@ const MainReport: React.FC = () => {
{/* PAGE 7 */}
<div className={PAGE_CLASSES}>
<ReportHeader />
<FeaturesPage />
<CalibrationResultsReport />
</div>
{/* PAGE 8 */}
<div className={PAGE_CLASSES}>
<ReportHeader />
<SolutionsTablePage />
<FeaturesPage />
</div>
{/* PAGE 9 */}
<div className={PAGE_CLASSES}>
<ReportHeader />
<DifferentSolutionsFirstPage />
<SolutionsTablePage />
</div>
{/* PAGE 10 */}
<div className={PAGE_CLASSES}>
<ReportHeader />
<DifferentSolutionsFirstPage />
</div>
{/* PAGE 11 */}
{/* <div className={PAGE_CLASSES}>
<ReportHeader />
<DifferentSolutionsSecondPage />
</div> */}
{/* PAGE 11 */}
{/* PAGE 12 */}
<div className={PAGE_CLASSES}>
<ReportHeader />
<GapAnalysisPage />
</div>
{/* PAGE 12 */}
{/* PAGE 13 */}
<div className={PAGE_CLASSES}>
<ReportHeader />
<TargetAchievementPage />
Expand Down

0 comments on commit 3273f80

Please sign in to comment.