diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx index a168b607..ef1160a4 100644 --- a/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx +++ b/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx @@ -9,7 +9,7 @@ export const CaseResultView = styled.div` row-gap: ${spacings.XXX_LARGE}; padding: ${spacings.LARGE}; - @media (min-width: 1400px) { + @media (min-width: 1505px) { width: 80%; } `; diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.styled.ts b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.styled.ts index a1542254..b04a4688 100644 --- a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.styled.ts +++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.styled.ts @@ -9,13 +9,6 @@ export const Wrapper = styled.div` export const InnerWrapper = styled.div` display: flex; flex-direction: row; - column-gap: ${spacings.SMALL}; + column-gap: ${spacings.LARGE}; width: 100%; `; - -export const Info = styled.div` - display: flex; - flex-direction: column; - - width: 150px; -`; diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.tsx index 300bbb33..515bbd42 100644 --- a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.tsx +++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.tsx @@ -1,10 +1,10 @@ -import { Typography } from '@equinor/eds-core-react'; import { ComputeCaseDto, GetChannelResultsDto, } from '../../../../../api/generated'; import * as Styled from './ChannelResult.styled'; -import { ChannelResultTable } from './ChannelResultTable'; +import { ChannelResultTable } from './ChannelResultTable/ChannelResultTable'; +import { ResultArea } from './ResultArea/ResultArea'; export const ChannelResult = ({ data, @@ -29,10 +29,11 @@ export const ChannelResult = ({ return ( - - {computeMethod} - {modelArea} - + diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.styled.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx similarity index 68% rename from src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.styled.tsx rename to src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx index c9f38bb0..18252174 100644 --- a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.styled.tsx +++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx @@ -1,7 +1,7 @@ /* eslint-disable prettier/prettier */ import { Table } from '@equinor/eds-core-react'; import styled from 'styled-components'; -import { theme } from '../../../../../tokens/theme'; +import { theme } from '../../../../../../tokens/theme'; const StyledTable = styled(Table)` width: 100%; @@ -15,7 +15,17 @@ export const ColumnCell = styled(Table.Cell)` export const DataCell = styled(Table.Cell)` text-align: right; border: solid 0.5px ${theme.light.ui.background.medium}; + width: 25%; + > div { + display: flex; + justify-content: right; + } +`; +export const InfoCell = styled(Table.Cell)` + text-align: right; + border: solid 0.5px ${theme.light.ui.background.medium}; + width: 20%; > div { display: flex; justify-content: right; diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.tsx similarity index 93% rename from src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.tsx rename to src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.tsx index a232e887..fe276aa1 100644 --- a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.tsx +++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.tsx @@ -1,7 +1,7 @@ /* eslint-disable max-lines-per-function */ import { Table } from '@equinor/eds-core-react'; -import { GetChannelResultsDto } from '../../../../../api/generated'; +import { GetChannelResultsDto } from '../../../../../../api/generated'; import * as Styled from './ChannelResultTable.styled'; const NumberOfDecimals = 2; @@ -21,7 +21,7 @@ export const ChannelResultTable = ({ - + Mean Standard deviation (SD) Count diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.styled.ts b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.styled.ts new file mode 100644 index 00000000..8a253106 --- /dev/null +++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.styled.ts @@ -0,0 +1,34 @@ +import styled from 'styled-components'; +import { spacings } from '../../../../../../tokens/spacings'; + +export const Wrapper = styled.div` + display: flex; + flex-direction: row; + align-items: center; + + width: 500px; +`; + +export const Info = styled.div` + display: flex; + flex-direction: column; + row-gap: ${spacings.MEDIUM}; + + width: 150px; +`; + +export const Coordinates = styled.div` + display: flex; + flex-direction: column; + row-gap: ${spacings.MEDIUM}; +`; + +export const CoordinateRow = styled.div` + display: flex; + flex-direction: row; + column-gap: ${spacings.MEDIUM}; +`; + +export const RowElement = styled.div` + white-space: nowrap; +`; diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.tsx new file mode 100644 index 00000000..7c031224 --- /dev/null +++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.tsx @@ -0,0 +1,80 @@ +/* eslint-disable max-lines-per-function */ +import { Label, Typography } from '@equinor/eds-core-react'; +import { GetChannelResultsDto } from '../../../../../../api/generated'; +import * as Styled from './ResultArea.styled'; + +export const ResultArea = ({ + computeMethod, + modelArea, + data, +}: { + computeMethod?: string; + modelArea: string; + data: GetChannelResultsDto; +}) => { + const xCoordinate = data.box?.filter((b) => b.m === 0)[0]; + const yCoordinate = data.box?.filter((b) => b.m === 1)[0]; + + const xLength = () => { + if (xCoordinate && yCoordinate) return yCoordinate?.x - xCoordinate?.x; + }; + + const yLength = () => { + if (xCoordinate && yCoordinate) { + const value = yCoordinate?.y - xCoordinate?.y; + return value; + } + }; + + const area = () => { + const x = xLength(); + const y = yLength(); + + if (x && y) return x * y + ' m^2'; + }; + + return ( + + +
+ {computeMethod} + {modelArea} +
+
+ + {area() ? area() : '-'} +
+
+ + + + + + {modelArea === 'Whole model' ? '-' : xCoordinate?.x + ' m'} + + + + + + {modelArea === 'Whole model' ? '-' : xLength() + ' m'} + + + + + + + + {modelArea === 'Whole model' ? '-' : yCoordinate?.x + ' m'} + + + + + + {modelArea === 'Whole model' ? '-' : yLength() + ' m'} + + + + +
+ ); +};