Skip to content

Commit

Permalink
fix: responsive container etc
Browse files Browse the repository at this point in the history
  • Loading branch information
pbullhove committed Apr 3, 2024
1 parent 7f1d2fd commit 5ed5354
Show file tree
Hide file tree
Showing 13 changed files with 162 additions and 144 deletions.
19 changes: 14 additions & 5 deletions web/src/Components/Bridging/BridgeContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,20 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
}

return (
<div style={{ display: 'flex', overflow: 'auto' }}>
<div style={{ overflow: 'auto' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
backgroundColor: 'white',
overflow: 'auto',
padding: '0.5rem',
borderRadius: '0.5rem',
}}
>
<CumulativeGraph bridges={bridges} sizeFractions={sizeFractions} />
<DistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
</div>
<InputContainer
mode={mode}
onBridgeOptionChange={onBridgeOptionChange}
Expand All @@ -87,10 +100,6 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
bridgeValueVariant={bridgeValueVariant}
bridgeValueHelperText={bridgeValueHelperText}
/>
<div style={{ display: 'flex', alignItems: 'center', backgroundColor: 'white' }}>
<CumulativeGraph bridges={bridges} sizeFractions={sizeFractions} />
<DistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
</div>
</div>
)
}
72 changes: 37 additions & 35 deletions web/src/Components/Bridging/Graphs/BridgeGraph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,42 +34,44 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: Bridge
}

return (
<div style={{ backgroundColor: 'white', borderRadius: '0.5rem' }}>
<AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={980} height={500}>
{/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
<defs>
<linearGradient id='particleArea'>
<stop offset={particleFromPercentage} stopColor='transparent' />
<stop offset={particleFromPercentage} stopColor='#E2DCDC' />
<stop offset={particleToPercentage} stopColor='#E2DCDC' />
<stop offset={particleToPercentage} stopColor='transparent' />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray='3 3' />
<XAxis
dataKey='size'
scale='log'
domain={[0.1, 10000]}
type='number'
ticks={[0.1, 1, 10, 100, 1000, 10000]}
label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
height={70}
/>
<YAxis type='number' allowDataOverflow width={75} label={{ value: yAxis, angle: '270' }} />
<Tooltip />
<Legend verticalAlign='bottom' align='center' />
{Object.entries(bridges).map(([name, cumulative], index) => (
<Area
type='monotone'
dataKey={name}
stroke={graphColors[index % graphColors.length]}
key={name}
fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
name={name}
strokeWidth={1.5}
<div style={{ backgroundColor: 'white', borderRadius: '0.5rem', width: '100%', height: '100%' }}>
<ResponsiveContainer width={'99%'} height={500}>
<AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
{/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
<defs>
<linearGradient id='particleArea'>
<stop offset={particleFromPercentage} stopColor='transparent' />
<stop offset={particleFromPercentage} stopColor='#E2DCDC' />
<stop offset={particleToPercentage} stopColor='#E2DCDC' />
<stop offset={particleToPercentage} stopColor='transparent' />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray='3 3' />
<XAxis
dataKey='size'
scale='log'
domain={[0.1, 10000]}
type='number'
ticks={[0.1, 1, 10, 100, 1000, 10000]}
label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
height={70}
/>
))}
</AreaChart>
<YAxis type='number' allowDataOverflow width={75} label={{ value: yAxis, angle: '270' }} />
<Tooltip />
<Legend verticalAlign='bottom' align='center' />
{Object.entries(bridges).map(([name, cumulative], index) => (
<Area
type='monotone'
dataKey={name}
stroke={graphColors[index % graphColors.length]}
key={name}
fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
name={name}
strokeWidth={1.5}
/>
))}
</AreaChart>
</ResponsiveContainer>
</div>
)
}
Expand Down
24 changes: 18 additions & 6 deletions web/src/Components/Bridging/InputContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Radio, TextField, Tooltip, Typography } from '@equinor/eds-core-react'
import { NativeSelect, Radio, TextField, Tooltip, Typography } from '@equinor/eds-core-react'
import { InputWrapper, RadioWrapper, StyledSelect } from './styles'
import { BridgingOption, CeramicDiscsValues } from '../../Enums'
import { findDValue } from '../../Utils'
Expand Down Expand Up @@ -27,7 +27,15 @@ const InputContainer = ({
bridgeValueHelperText,
}: InputContainerProps) => {
return (
<div style={{ backgroundColor: 'white', borderRadius: '4px', padding: '0.5rem' }}>
<div
style={{
backgroundColor: 'white',
borderRadius: '0.5rem',
padding: '0.5rem',
marginBlockStart: '1rem',
display: 'flex',
}}
>
<InputWrapper>
<Typography variant='h3'>Bridging options</Typography>
<span>Bridging based on:</span>
Expand Down Expand Up @@ -70,16 +78,20 @@ const InputContainer = ({
<div style={{ width: '150px' }}>
{mode === BridgingOption.CERAMIC_DISCS ? (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label>Ceramic Discs Size</label>
<StyledSelect onChange={event => onBridgeValueChange(event.target.value)}>
<label htmlFor='ceramic-disk-selector'>Ceramic Discs Size</label>
<NativeSelect
onChange={event => onBridgeValueChange(event.target.value)}
id={'ceramic-disk-selector'}
label={''}
>
{CeramicDiscsValues.map((value, index) => {
return (
<option value={value} key={index + value}>
{value}
</option>
)
})}
</StyledSelect>
</NativeSelect>
<small style={{ alignSelf: 'flex-end' }}>microns</small>
</div>
) : (
Expand All @@ -97,7 +109,7 @@ const InputContainer = ({
</div>
</InputWrapper>
{optimalBridgeGraphData.length > 0 && (
<div style={{ marginBlockStart: '3rem', alignItems: 'center' }}>
<div style={{ marginInlineStart: '1rem' }}>
<Typography variant='h3'>Optimal Bridge:</Typography>
<p>
D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}
Expand Down
8 changes: 4 additions & 4 deletions web/src/Components/Combinations/CardContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import React, { useContext, useEffect, useState } from 'react'
import styled from 'styled-components'
import CombinationCard from './CombinationCard'
// @ts-ignore
import { Button } from '@equinor/eds-core-react'
import { Button, Icon } from '@equinor/eds-core-react'
import { Bridge, Combinations } from '../../Types'
import Icon from '../../Icons'
import { FractionsAPI } from '../../Api'
import { ErrorToast } from '../Common/Toast'
import { IAuthContext, AuthContext } from 'react-oauth2-code-pkce'
import { add } from '@equinor/eds-icons'
export const Card = styled.div`
margin: 10px;
padding: 10px;
Expand Down Expand Up @@ -123,8 +123,8 @@ export const CardContainer = ({
})
}}
>
<Icon name='add_box' title='add_box' />
Add combination
<Icon data={add} title='add_box' />
New combination
</Button>
</div>
</>
Expand Down
20 changes: 13 additions & 7 deletions web/src/Components/Combinations/CombinationCard.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useContext, useEffect, useState } from 'react'
// @ts-ignore
import { Button, Icon, Switch, Input } from '@equinor/eds-core-react'
import { Button, Icon, Switch, Input, Tooltip, Divider } from '@equinor/eds-core-react'
import CombinationTable from './CombinationTable'
import styled from 'styled-components'
import { Card } from './CardContainer'
Expand All @@ -10,11 +10,13 @@ import { CombinationAPI } from '../../Api'
import { ErrorToast } from '../Common/Toast'
import { findDValue, findGraphData } from '../../Utils'
import { IAuthContext, AuthContext } from 'react-oauth2-code-pkce'
import { edit, close, delete_to_trash } from '@equinor/eds-icons'

const CardHeader = styled.div`
display: flex;
justify-content: space-between;
align-items: self-end;
margin-bottom: 0.5rem;
`

const CardSummation = styled.div`
Expand Down Expand Up @@ -131,9 +133,11 @@ export const CombinationCard = ({
<Card>
<div>
<CardHeader>
<Button variant='ghost_icon' onClick={() => setIsHeaderEditable(!isHeaderEditable)}>
<Icon name='edit' size={16} />
</Button>
<Tooltip title={isHeaderEditable ? 'Toggle edit off' : 'Edit combination title'}>
<Button variant='ghost_icon' onClick={() => setIsHeaderEditable(!isHeaderEditable)}>
<Icon data={edit} size={16} style={{ width: '40px' }} />
</Button>
</Tooltip>
<Input
id={`${combination.name}`}
value={combinationName}
Expand All @@ -151,9 +155,11 @@ export const CombinationCard = ({
}
}}
/>
<Button variant='ghost_icon' color='danger' onClick={() => removeCombination(combination.name)}>
<Icon name='close' title='close' />
</Button>
<Tooltip title={'Delete combination'}>
<Button variant='ghost_icon' color='danger' onClick={() => removeCombination(combination.name)}>
<Icon data={delete_to_trash} title='close' style={{ width: '40px' }} />
</Button>
</Tooltip>
</CardHeader>
{Object.keys(enabledProducts).length ? (
<div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import BridgeContainer from './Bridging/BridgeContainer'
import CardContainer from './Combinations/CardContainer'
import OptimizationContainer from './Optimization/OptimizationContainer'
import BridgeContainer from '../Bridging/BridgeContainer'
import CardContainer from './CardContainer'
import OptimizationContainer from '../Optimization/OptimizationContainer'
import React, { ReactElement, useContext, useEffect, useState } from 'react'
// @ts-ignore
import { Accordion, Button } from '@equinor/eds-core-react'
import { BridgeAPI, CombinationAPI } from '../Api'
import { BridgeAPI, CombinationAPI } from '../../Api'
// @ts-ignore
import styled from 'styled-components'
import { BridgingOption } from '../Enums'
import { ErrorToast } from './Common/Toast'
import { BridgingOption } from '../../Enums'
import { ErrorToast } from '../Common/Toast'
import { AuthContext, IAuthContext } from 'react-oauth2-code-pkce'
import { Bridge, Combination, Combinations, Products } from '../Types'
import useLocalStorage from '../Hooks'
import { Bridge, Combination, Combinations, Products } from '../../Types'
import useLocalStorage from '../../Hooks'

const MainComponentsWrapper = styled.div`
padding: 16px 0 16px 0;
Expand Down
3 changes: 2 additions & 1 deletion web/src/Components/ContactButton.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import React, { useState } from 'react'
// @ts-ignore
import { Button, Dialog, Icon } from '@equinor/eds-core-react'
import { comment_important } from '@equinor/eds-icons'

export const ContactButton = () => {
const [dialogOpen, setDialogOpen] = useState<boolean>(false)

return (
<>
<Button variant='outlined' onClick={() => setDialogOpen(true)}>
<Icon name='comment_important' title='filter products' />
<Icon data={comment_important} title='filter products' />
Contact
</Button>
<Dialog style={{ width: 'min-content' }} open={dialogOpen}>
Expand Down
Loading

0 comments on commit 5ed5354

Please sign in to comment.