diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/GraphPlot/GraphPlot.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/GraphPlot/GraphPlot.tsx index 7a856b9..5a2bb06 100644 --- a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/GraphPlot/GraphPlot.tsx +++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/GraphPlot/GraphPlot.tsx @@ -1,8 +1,29 @@ /* eslint-disable max-lines-per-function */ -import { GetObjectResultsDto } from '../../../../../../api/generated'; +import { + GetObjectResultsDto, + PercentilesDto, +} from '../../../../../../api/generated'; import { ReactECharts, ReactEChartsProps } from '../Echarts/ReactECharts'; +interface ExtendedPrecetile extends PercentilesDto { + min: number; + max: number; +} export const GraphPlot = ({ data }: { data: GetObjectResultsDto }) => { + const PrecentilesMinMax: ExtendedPrecetile = { + min: data.height.min, + p10: data.height.percentiles.p10, + p20: data.height.percentiles.p20, + p30: data.height.percentiles.p30, + p40: data.height.percentiles.p40, + p50: data.height.percentiles.p50, + p60: data.height.percentiles.p60, + p70: data.height.percentiles.p70, + p80: data.height.percentiles.p80, + p90: data.height.percentiles.p90, + max: data.height.max, + }; + const option: ReactEChartsProps['option'] = { tooltip: { trigger: 'axis', @@ -24,13 +45,13 @@ export const GraphPlot = ({ data }: { data: GetObjectResultsDto }) => { }, yAxis: { type: 'category', - data: Object.keys(data.height.percentiles), + data: Object.keys(PrecentilesMinMax), }, series: [ { name: 'Channel width (m)', type: 'line', - data: Object.values(data.height.percentiles), + data: Object.values(PrecentilesMinMax), }, ], };