chore: chore: Plot channel height data.

src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/Echarts/ReactECharts.tsx

@@ -26,13 +26,7 @@ export interface ReactEChartsProps {
   loading?: boolean;
   theme?: 'light' | 'dark';
 }
-export interface ReactEChartsProps {
-  option: EChartsOption;
-  style?: CSSProperties;
-  settings?: SetOptionOpts;
-  loading?: boolean;
-  theme?: 'light' | 'dark';
-}
+
 export function ReactECharts({
   option,
   style,
@@ -82,6 +76,6 @@ export function ReactECharts({
   }, [loading, theme]);
 
   return (
-    <div ref={chartRef} style={{ width: '100%', height: '100%', ...style }} />
+    <div ref={chartRef} style={{ width: '100%', height: '350px', ...style }} />
   );
 }

src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/GraphPlot/GraphPlot.tsx

@@ -1,50 +1,46 @@
 /* eslint-disable max-lines-per-function */
+import { GetObjectResultsDto } from '../../../../../../api/generated';
 import { ReactECharts, ReactEChartsProps } from '../Echarts/ReactECharts';
 
-export const GraphPlot = () => {
+export const GraphPlot = ({ data }: { data: GetObjectResultsDto }) => {
   const option: ReactEChartsProps['option'] = {
-    dataset: {
-      source: [
-        ['Commodity', 'Owned', 'Financed'],
-        ['Commodity 1', 4, 1],
-        ['Commodity 2', 2, 4],
-        ['Commodity 3', 3, 6],
-        ['Commodity 4', 5, 3],
-      ],
-    },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
       },
     },
     legend: {
-      data: ['Owned', 'Financed'],
+      data: ['Percentile', 'Value'],
     },
     grid: {
       left: '10%',
-      right: '0%',
+      right: '10%',
       top: '20%',
       bottom: '20%',
     },
     xAxis: {
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      type: 'value',
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: Object.keys(data.height.percentiles),
     },
     series: [
       {
-        data: [150, 230, 224, 218, 135, 147, 260],
+        name: 'Channel width (m)',
         type: 'line',
+        data: Object.values(data.height.percentiles),
       },
     ],
   };
 
   return (
-    <>
-      <ReactECharts option={option} />
-    </>
+    <div>
+      <ReactECharts
+        option={option}
+        style={{ width: '100%', height: '350px' }}
+      />
+    </div>
   );
 };

src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultPlotDialog/ResultPlotDialog.styled.ts

@@ -2,6 +2,6 @@ import { Dialog } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 
 export const GraphDialog = styled(Dialog)`
-  min-width: 400px;
-  min-height: 400px;
+  min-width: 600px;
+  min-height: 300px;
 `;

src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultPlotDialog/ResultPlotDialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Dialog } from '@equinor/eds-core-react';
+import { Button, Dialog, Typography } from '@equinor/eds-core-react';
 import { GetObjectResultsDto } from '../../../../../../api/generated';
 import { GraphPlot } from '../GraphPlot/GraphPlot';
 import { ResultCaseMetadata } from '../ResultArea/ResultCaseMetadata/ResultCaseMetadata';
@@ -29,7 +29,8 @@ export const ResultPlotDialog = ({
             modelArea={modelArea}
           />
           <>
-            <GraphPlot />
+            <Typography>Plotted: Channel Height</Typography>
+            <GraphPlot data={data} />
           </>
         </Dialog.Content>
         <Dialog.Actions>