Skip to content

Commit

Permalink
Merge pull request #159 from RENCI/#156-obs-dialog-resizing
Browse files Browse the repository at this point in the history 
#156 Button wrap in the obs dialog when resizing
  • Loading branch information
@lstillwe
lstillwe authored Aug 9, 2024
2 parents 4030237 + ffc5831 commit c368abb
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 73 deletions.
98 changes: 52 additions & 46 deletions src/components/dialog/base-floating-dialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import React, { Fragment } from 'react';
import { ToggleButtonGroup, Button, Box, Stack } from '@mui/joy'; //, Checkbox
import { ToggleButtonGroup, ToggleButton, Box, Stack } from '@mui/material';
import Draggable from "react-draggable";
import PropTypes from 'prop-types';

import { Resizable } from "react-resizable";
import "react-resizable/css/styles.css";

import { markUnclicked } from '@utils/map-utils';

import CssBaseline from '@mui/material/CssBaseline';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogActions';
Expand All @@ -18,6 +15,8 @@ import Slide from '@mui/material/Slide';
import IconButton from '@mui/material/IconButton';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';

import { markUnclicked } from '@utils/map-utils';

// define the properties of this component's input
BaseFloatingDialog.propTypes = {
title: PropTypes.string,
Expand Down Expand Up @@ -45,9 +44,14 @@ BaseFloatingDialog.propTypes = {
* @param toggleLineView - toggles the visibility of a chart line
*/
export default function BaseFloatingDialog({ title, index, dialogObject, dataKey, dataList, setDataList, map, showLineButtonView, toggleLineView } ) {
const [newWidth, setNewWidth] = React.useState(600);
// declare state to capture the dialog size
const [newWidth, setNewWidth] = React.useState(460);
const [newHeight, setNewHeight] = React.useState(300);

// declare the minimums for the dialog content area
const minWidth = 200;
const minHeight = 150;

/**
* the close dialog handler
*/
Expand Down Expand Up @@ -77,9 +81,9 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
setNewHeight(newHeight + event.movementY);
}}
axis="x"
draggableOpts={{ handleSize: [20, 20] }}
>
draggableOpts={{ handleSize: [20, 20] }}>
<Dialog
width="100%"
aria-labelledby="draggable-dialog"
open={ true }
onClose={ handleClose }
Expand All @@ -100,46 +104,48 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
</Stack>
</DialogTitle>

<DialogContent sx={{ fontSize: 11, m: 0 }}>
<Stack direction="column" gap={ 1 } alignItems="center">
<ToggleButtonGroup size="sm" onChange={(event, newValue) => { toggleLineView(newValue); }} sx={{ backgroundColor: 'White'}}>
{(showLineButtonView("Observations")) ?
<Button
value="Observations"
sx={{ '&:hover': { color: 'White', backgroundColor: 'Black' }, color: 'Black' , fontSize: 12 }}>
Observations</Button> : ''
}

{(showLineButtonView("NOAA Tidal Predictions")) ?
<Button
value="NOAA Tidal Predictions"
sx={{ '&:hover': { color: 'White', backgroundColor: 'Teal' }, color: 'Teal', fontSize: 12 }}>
NOAA Tidal Predictions</Button> : ''
}

{(showLineButtonView("APS Nowcast")) ?
<Button
value="APS Nowcast"
sx={{ '&:hover': { color: 'White', backgroundColor: 'CornflowerBlue' }, color: 'CornflowerBlue', fontSize: 12 }}>
APS Nowcast</Button> : ''
}

{(showLineButtonView("APS Forecast")) ?
<Button
value="APS Forecast"
sx={{ '&:hover': { color: 'White', backgroundColor: 'LimeGreen' }, color: 'LimeGreen', fontSize: 12 }}>
APS Forecast</Button> : ''
}

{(showLineButtonView("Difference (APS-OBS)")) ?
<Button
value="Difference (APS-OBS)"
sx={{ '&:hover': { color: 'White', backgroundColor: 'Red' }, color: 'Red', backgroundColor: 'White', fontSize: 12 }}>
Difference (APS-OBS)</Button> : ''
}
<DialogContent sx={{fontSize: 10, p: "5px"}}>
<Stack direction="column" spacing={ '5px' } alignItems="center" >
<ToggleButtonGroup variant="text" onChange={(event, newValue) => { toggleLineView(newValue); }}>
<Stack display="wrap" sx={{ width: newWidth, minWidth: minWidth, flexWrap: "wrap"}} direction="row" spacing={'px'} alignItems="center">
{showLineButtonView("Observations") ?
<Box><ToggleButton
value="Observations"
sx={{ '&:hover': { color: 'White', backgroundColor: 'Black' }, m: 0, p: "3px", color: 'Black' , fontSize: 9 }}>
Observations</ToggleButton></Box> : ''
}

{(showLineButtonView("APS Nowcast")) ?
<Box><ToggleButton
value="APS Nowcast"
sx={{ '&:hover': { color: 'White', backgroundColor: 'CornflowerBlue' }, m: 0, p: "3px", color: 'CornflowerBlue', fontSize: 9 }}>
APS Nowcast</ToggleButton></Box> : ''
}

{(showLineButtonView("APS Forecast")) ?
<Box><ToggleButton
value="APS Forecast"
sx={{ '&:hover': { color: 'White', backgroundColor: 'LimeGreen' }, m: 0, p: "3px", color: 'LimeGreen', fontSize: 9 }}>
APS Forecast</ToggleButton></Box> : ''
}

{(showLineButtonView("NOAA Tidal Predictions")) ?
<Box><ToggleButton
value="NOAA Tidal Predictions"
sx={{ '&:hover': { color: 'White', backgroundColor: 'Teal' }, m: 0, p: "3px", color: 'Teal', fontSize: 9 }}>
NOAA Tidal Predictions</ToggleButton></Box> : ''
}

{(showLineButtonView("Difference (APS-OBS)")) ?
<Box><ToggleButton
value="Difference (APS-OBS)"
sx={{ '&:hover': { color: 'White', backgroundColor: 'Red' }, m: 0, p: "3px", color: 'Red', fontSize: 9 }}>
Difference (APS-OBS)</ToggleButton></Box> : ''
}
</Stack>
</ToggleButtonGroup>

<Box sx={{ height: newHeight, width: newWidth }}> { dialogObject } </Box>
<Box sx={{ width: newWidth, minWidth: minWidth, height: newHeight, minHeight: minHeight }}> { dialogObject } </Box>
</Stack>
</DialogContent>
</Dialog>
Expand All @@ -149,7 +155,7 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
}

/**
* This creates a 3D dialog.
* This creates a draggable area for the dialog content
*
* @param props
* @returns {JSX.Element}
Expand Down
54 changes: 27 additions & 27 deletions src/components/dialog/observation-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ function csvToJSON(csvData, setLineButtonView) {

// data that is missing a value will not result in plotting
if (e["Observations"]) {
e["Observations"] = +parseFloat(e["Observations"]).toFixed(4);
e["Observations"] = +parseFloat(e["Observations"]).toFixed(3);

// set the line button to be in view
setLineButtonView("Observations");
Expand All @@ -125,7 +125,7 @@ function csvToJSON(csvData, setLineButtonView) {
e["Observations"] = null;

if (e["NOAA Tidal Predictions"]) {
e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(4);
e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(3);

// set the line button to be in view
setLineButtonView("NOAA Tidal Predictions");
Expand All @@ -134,7 +134,7 @@ function csvToJSON(csvData, setLineButtonView) {
e["NOAA Tidal Predictions"] = null;

if (e["APS Nowcast"]) {
e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(6);
e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(3);

// set the line button to be in view
setLineButtonView("APS Nowcast");
Expand All @@ -143,7 +143,7 @@ function csvToJSON(csvData, setLineButtonView) {
e["APS Nowcast"] = null;

if (e["APS Forecast"]) {
e["APS Forecast"] = +parseFloat(e["APS Forecast"]).toFixed(6);
e["APS Forecast"] = +parseFloat(e["APS Forecast"]).toFixed(3);

// set the line button to be in view
setLineButtonView("APS Forecast");
Expand All @@ -152,7 +152,7 @@ function csvToJSON(csvData, setLineButtonView) {
e["APS Forecast"] = null;

if (e["Difference (APS-OBS)"]) {
e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(6);
e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(3);

// set the line button to be in view
setLineButtonView("Difference (APS-OBS)");
Expand Down Expand Up @@ -266,28 +266,28 @@ function CreateObsChart(c) {
// render the chart
return (
<Fragment>
{
status === 'pending' ? ( <div>Gathering chart data...</div> ) :
status === 'error' ? ( <div>There was a problem with observation data for this location.</div> ) :
<ResponsiveContainer>
<LineChart data={ data } margin={{ left: -25 }} isHide={ c.chartProps.isHideLine }>
<CartesianGrid strokeDasharray="1 1" />

<XAxis tick={{ stroke: 'tan', strokeWidth: .5 }} tickSize="10" dataKey="time" tickFormatter={ (value) => formatX_axis(value) }/>

<ReferenceLine y={0} stroke="#000000" />
<YAxis ticks={ maxValue } tick={{ stroke: 'tan', strokeWidth: .5 }} tickFormatter={ (value) => formatY_axis(value) } />

<Tooltip />

<Line type="monotone" dataKey="Observations" stroke="black" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine['Observations'] }/>
<Line type="monotone" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["NOAA Tidal Predictions"] }/>
<Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["APS Nowcast"] }/>
<Line type="monotone" dataKey="APS Forecast" stroke="LimeGreen" strokeWidth={2} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["APS Forecast"] }/>
<Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["Difference (APS-OBS)"] } />
</LineChart>
</ResponsiveContainer>
}
{
status === 'pending' ? ( <div>Gathering chart data...</div> ) :
status === 'error' ? ( <div>There was a problem with observation data for this location.</div> ) :
<ResponsiveContainer>
<LineChart data={ data } margin={{ left: -25 }} isHide={ c.chartProps.isHideLine }>
<CartesianGrid strokeDasharray="1 1" />

<XAxis tick={{ stroke: 'tan', strokeWidth: .5 }} tickSize="10" dataKey="time" tickFormatter={ (value) => formatX_axis(value) }/>

<ReferenceLine y={0} stroke="Black" strokeDasharray="3 3" />
<YAxis ticks={ maxValue } tick={{ stroke: 'tan', strokeWidth: .5 }} tickFormatter={ (value) => formatY_axis(value) } />

<Tooltip />

<Line type="monotone" dataKey="Observations" stroke="black" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine['Observations'] }/>
<Line type="monotone" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["NOAA Tidal Predictions"] }/>
<Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["APS Nowcast"] }/>
<Line type="monotone" dataKey="APS Forecast" stroke="LimeGreen" strokeWidth={2} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["APS Forecast"] }/>
<Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["Difference (APS-OBS)"] } />
</LineChart>
</ResponsiveContainer>
}
</Fragment>
);
}

0 comments on commit c368abb

Please sign in to comment.