back-testing-react 1.0.4 → 1.0.6

package/src/components/back-testing-payout-info/back-testing-payout-info.tsx

@@ -0,0 +1,371 @@
+"use client"
+
+import "./back-testing-payout-info.css"
+
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Collapse from '@mui/material/Collapse';
+import Avatar from '@mui/material/Avatar';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+import { Box, Button, Checkbox, CircularProgress, List, ListItem, ListItemAvatar, ListItemText } from "@mui/material";
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import CycloneIcon from '@mui/icons-material/Cyclone';
+import WindPowerIcon from '@mui/icons-material/WindPower';
+import AirIcon from '@mui/icons-material/Air';
+import { GeoJSONSource } from "mapbox-gl";
+import { Geometry, GeoJsonProperties, Feature, FeatureCollection } from "geojson";
+import { RadioButtonChecked, RadioButtonUncheckedOutlined } from "@mui/icons-material";
+import { BackTestingPayoutInfoProps } from "./back-testing-payout-info.types";
+import { StormPayout } from "../back-testing-map/back-testing-map.service";
+import { TROPICAL_STORM_LAYER, TROPICAL_STORM_TRACK_LAYER } from "../back-testing-map/back-testing-map.types";
+
+  interface ExpandMoreProps extends IconButtonProps {
+    expand: boolean;
+  }
+  
+  const ExpandMore = styled((props: ExpandMoreProps) => {
+    const { expand, ...other } = props;
+    return <IconButton {...other} />;
+  })(({ theme }) => ({
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest,
+    }),
+    variants: [
+      {
+        props: ({ expand }) => !expand,
+        style: {
+          transform: 'rotate(0deg)',
+        },
+      },
+      {
+        props: ({ expand }) => !!expand,
+        style: {
+          transform: 'rotate(180deg)',
+        },
+      },
+    ],
+  }));
+
+function BackTestingPayoutInfo(props: BackTestingPayoutInfoProps){
+
+    const [expanded, setExpanded] = React.useState<boolean[]>(props.stormPayouts.map((storm) => { return false}));
+    
+    const handleExpandClick = (index:number) => {
+      let newVal = expanded.map((val) => {return false})
+      newVal[index] = !expanded[index]
+      setExpanded(newVal);
+    };
+
+    const handleCheckboxClick = (storm: string, year:number,e:React.ChangeEvent<HTMLInputElement>) => {
+      let checked = e.target.checked;
+      toggleStormTrack(storm,year,checked)
+    };
+
+    const handleBack = () => {
+      if(props.onBack != undefined){
+        props.onBack();
+      }
+    }
+
+    const handleRestart = () => {
+      if(props.onRestart != undefined){
+        props.onRestart();
+      }
+    }
+
+    function maskDateString(value:string){
+        let date = new Date(Date.parse(value));
+        return date.toLocaleDateString('en-us', { day:"numeric", year:"numeric", month:"short"})
+    }
+
+    function maskCurrency(value:number){
+        let USDollar = new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD',
+        });
+        return USDollar.format(value)
+    }
+
+    function maskStormCategory(cat:number): string {
+        switch(cat){
+            case 5:
+            case 4:
+            case 3:
+            case 2:
+            case 1:
+                return `Category ${cat}`
+            case 0:
+                return "Tropical Storm"
+            case -1:
+                return "Tropical Depression"
+            case -2:
+                return "Tropical Expression"
+            case -3:
+                return "Tropical Expression"
+            case -4:
+                return "Tropical Expression"
+            case -5:
+                return "Tropical Expression"
+            case -10:
+                return "N/A"
+            default:
+                return ""
+        }
+    }
+
+    const unfocusStormTracks = () => {
+      if(props.mapInstanceRef && props.mapInstanceRef.current){
+        const circleSource = (props.mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_LAYER)
+        if (circleSource){
+          let features = (((circleSource as GeoJSONSource)._data as unknown) as FeatureCollection).features;
+          let newData = features.map((feature) => {
+            return { 
+              type: feature.type, 
+              geometry: feature.geometry, 
+              properties:{ 
+                view: feature.properties?.view,
+                muted: feature.properties?.checked !== undefined ? !feature.properties.checked : true,
+                name : feature.properties?.name, 
+                year: feature.properties?.year, 
+                windspeed: feature.properties?.windspeed, 
+                category: feature.properties?.category,
+                time: feature.properties?.time,
+                latitude: feature.properties?.latitude,
+                longitude: feature.properties?.longitude,
+                location: feature.properties?.location,
+                checked: feature.properties?.checked,
+                color: feature.properties?.color }}
+          }) as Feature<Geometry, GeoJsonProperties>[]
+          (circleSource as GeoJSONSource).setData({type: 'FeatureCollection', features: newData})
+        }
+        const lineSource = (props.mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_TRACK_LAYER)
+        if (lineSource){
+          let features = (((lineSource as GeoJSONSource)._data as unknown) as FeatureCollection).features;
+          let newData = features.map((feature) => {
+            return { 
+              type: feature.type, 
+              geometry: feature.geometry, 
+              properties:{ 
+                view: feature.properties?.view,
+                muted: feature.properties?.checked !== undefined ? !feature.properties.checked : true,
+                name : feature.properties?.name, 
+                year: feature.properties?.year, 
+                category: feature.properties?.category,
+                checked: feature.properties?.checked,
+                color: feature.properties?.color }}
+          }) as Feature<Geometry, GeoJsonProperties>[]
+          (lineSource as GeoJSONSource).setData({type: 'FeatureCollection', features: newData})
+        }
+      }
+    }
+
+    const toggleStormTrack = (storm: string, year:number, checked: boolean) => {
+      if(props.mapInstanceRef && props.mapInstanceRef.current){
+        const circleSource = (props.mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_LAYER)
+        if (circleSource){
+          let features = (((circleSource as GeoJSONSource)._data as unknown) as FeatureCollection).features;
+          let newData = features.map((feature) => {
+            return { 
+              type: feature.type, 
+              geometry: feature.geometry, 
+              properties:{ 
+                view: feature.properties?.view,
+                muted: (feature.properties?.name == storm && feature.properties?.year == year) ? !checked : feature.properties?.muted,
+                name : feature.properties?.name, 
+                year: feature.properties?.year, 
+                windspeed: feature.properties?.windspeed, 
+                category: feature.properties?.category,
+                time: feature.properties?.time,
+                latitude: feature.properties?.latitude,
+                longitude: feature.properties?.longitude,
+                location: feature.properties?.location,
+                checked: (feature.properties?.name == storm && feature.properties?.year == year) ? checked : feature.properties?.checked,
+                color: feature.properties?.color }}
+          }) as Feature<Geometry, GeoJsonProperties>[]
+          (circleSource as GeoJSONSource).setData({type: 'FeatureCollection', features: newData})
+        }
+        const lineSource = (props.mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_TRACK_LAYER)
+        if (lineSource){
+          let features = (((lineSource as GeoJSONSource)._data as unknown) as FeatureCollection).features;
+          let newData = features.map((feature) => {
+            return { 
+              type: feature.type, 
+              geometry: feature.geometry, 
+              properties:{ 
+                view: feature.properties?.view,
+                muted: (feature.properties?.name == storm && feature.properties?.year == year) ? !checked : feature.properties?.muted,
+                name : feature.properties?.name, 
+                year: feature.properties?.year, 
+                category: feature.properties?.category,
+                checked: (feature.properties?.name == storm && feature.properties?.year == year) ? checked : feature.properties?.checked,
+                color: feature.properties?.color }}
+          }) as Feature<Geometry, GeoJsonProperties>[]
+          (lineSource as GeoJSONSource).setData({type: 'FeatureCollection', features: newData})
+        }
+      }
+    }
+
+    const focusOnStormTrack = (storm: string, year:number) => {
+      if(props.mapInstanceRef && props.mapInstanceRef.current){
+        const circleSource = (props.mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_LAYER)
+        if (circleSource){
+          let features = (((circleSource as GeoJSONSource)._data as unknown) as FeatureCollection).features;
+          let newData = features.map((feature) => {
+            return { 
+              type: feature.type, 
+              geometry: feature.geometry, 
+              properties:{ 
+                view: feature.properties?.view,
+                muted: feature.properties?.checked ? false : (feature.properties?.name != storm || feature.properties?.year != year),
+                name : feature.properties?.name, 
+                year: feature.properties?.year, 
+                windspeed: feature.properties?.windspeed, 
+                category: feature.properties?.category,
+                time: feature.properties?.time,
+                latitude: feature.properties?.latitude,
+                longitude: feature.properties?.longitude,
+                location: feature.properties?.location,
+                checked: feature.properties?.checked,
+                color: feature.properties?.color }}
+          }) as Feature<Geometry, GeoJsonProperties>[]
+          (circleSource as GeoJSONSource).setData({type: 'FeatureCollection', features: newData})
+        }
+        const lineSource = (props.mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_TRACK_LAYER)
+        if (lineSource){
+          let features = (((lineSource as GeoJSONSource)._data as unknown) as FeatureCollection).features;
+          let newData = features.map((feature) => {
+            return { 
+              type: feature.type, 
+              geometry: feature.geometry, 
+              properties:{ 
+                view: feature.properties?.view,
+                muted: feature.properties?.checked ? false : (feature.properties?.name != storm || feature.properties?.year != year),
+                name : feature.properties?.name, 
+                year: feature.properties?.year, 
+                category: feature.properties?.category,
+                checked: feature.properties?.checked,
+                color: feature.properties?.color }}
+          }) as Feature<Geometry, GeoJsonProperties>[]
+          (lineSource as GeoJSONSource).setData({type: 'FeatureCollection', features: newData})
+        }
+      }
+    }
+
+    return(
+        <div className="payout-info-container">
+            <h3 className="header">Storm Payouts
+              <Button onClick={handleBack} sx={{ fontSize:'0.7em', float:'right', ml:1}}>Back</Button>
+              <Button variant="contained" onClick={handleRestart} sx={{ fontSize:'0.7em', float:'right' }}>Restart</Button>
+            </h3>
+            {props.status == "loading" && <Box sx={{pl:3, pt:2}}><CircularProgress size={18}/><Typography sx={{ fontSize: '1.15em', display:'inline-block'}}>&nbsp;&nbsp;&nbsp;loading...</Typography></Box>}
+            {props.status == "idle" && <div className="scroll-container">
+              {props.stormPayouts.map((storm, index) => (
+                <div className={"card-container"} key={storm.name + storm.year} onMouseOver={() => {focusOnStormTrack(storm.name,storm.year)}} onMouseLeave={unfocusStormTracks}>
+                  <Card sx={{ maxWidth: 345, border: '1px solid lightgray', borderRadius: 0, mr: '10px',ml: '10px', mb: '10px'}}>
+                  <CardHeader
+                    title={`${storm.name} ${storm.year}`}
+                    titleTypographyProps={{sx:{fontSize:'1em', fontWeight:700}}}
+                    subheader={`${maskDateString(storm.stormTrack[0].ISO_TIME)} to ${maskDateString(storm.stormTrack[storm.stormTrack.length - 1].ISO_TIME)}`}
+                    subheaderTypographyProps={{sx:{fontSize:'0.9em',color:'black'}}}
+                  />
+                  <Checkbox onChange={(e) => {handleCheckboxClick(storm.name,storm.year,e)}} sx={{ float:'right', position:'relative', top:'-70px', left:'-5px'}} icon={<RadioButtonUncheckedOutlined />} checkedIcon={<RadioButtonChecked />} defaultChecked/>
+                  <CardContent sx={{paddingTop:0}}>
+                    <Typography variant="body2" sx={{ color: 'black', fontWeight: 700, marginBottom: '5px' }}>
+                      Proxy:&nbsp;&nbsp;&nbsp;
+                    {storm.proxy.windspeedMPH && <span style={{fontSize:'1em'}} className={`wind`}>{storm.proxy.windspeedMPH} MPH</span>}
+                    {!storm.proxy.windspeedMPH && <span style={{fontSize:'1em'}} className={`wind`}>N/A</span>}
+                    </Typography>
+
+                    <Typography variant="body2" sx={{ color: 'black', fontWeight: 700, marginBottom: '5px' }}>
+                      Anemometer:&nbsp;&nbsp;&nbsp;
+                    {storm.anemometer.windspeedMPH && <span style={{fontSize:'1em'}} className={`wind`}>{storm.anemometer.windspeedMPH} MPH</span>}
+                    {!storm.anemometer.windspeedMPH && <span style={{fontSize:'1em'}} className={`wind`}>N/A</span>}
+                    </Typography>
+
+                    <Typography variant="body2" sx={{ color: 'black', fontWeight: 700, marginBottom: '5px' }}>
+                      CIAC:&nbsp;&nbsp;&nbsp;
+                    {storm.ciac.category && <span style={{fontSize:'1em'}} className={`cat cat-${storm.ciac.category}`}>{maskStormCategory(storm.ciac.category as number)}</span>}
+                    {!storm.ciac.category && <span style={{fontSize:'1em'}} className={`cat cat--10`}>{maskStormCategory(-10)}</span>}
+                    </Typography>
+
+                    <Typography variant="body2" sx={{ color: 'black', fontWeight: 700, marginTop: '15px'}}>
+                      Policy Payout: 
+                    </Typography>
+                    <Typography variant="body2" sx={{ color: 'black' }}>
+                      {maskCurrency(storm.maxRecoveryAmount)}
+                    </Typography>
+                  </CardContent>
+                  <CardActions sx={{position:'relative', top:-40, height:0}} disableSpacing>
+                    <ExpandMore
+                      expand={expanded[index]}
+                      onClick={() => handleExpandClick(index)}
+                      aria-expanded={expanded[index]}
+                      aria-label="show more"
+                    >
+                      <ExpandMoreIcon />
+                    </ExpandMore>
+                  </CardActions>
+                  <Collapse in={expanded[index]} timeout="auto" unmountOnExit>
+                    <CardContent sx={{ borderTop:'1px solid lightgray' }}>
+                    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper', paddingTop:0 }}>
+                      <ListItem sx={{paddingLeft:0 }}>
+                        <ListItemAvatar>
+                          <Avatar sx={{backgroundColor: storm.maxRecovery == storm.proxy.proxyPayout ? '#0d47a1' : ''}}>
+                            <AirIcon />
+                          </Avatar>
+                        </ListItemAvatar>
+                        <ListItemText primary="Proxy Payout" primaryTypographyProps={{sx:{ fontSize:'0.85em', fontWeight: 700,color:'black'}}} secondaryTypographyProps={{color:'black'}} secondary={`${Math.round(storm.proxy.proxyPayout * 100)}%`} />
+                      </ListItem>
+                      <ListItem sx={{paddingLeft:0}}>
+                        <ListItemAvatar>
+                          <Avatar sx={{backgroundColor: storm.maxRecovery == storm.anemometer.anemometerPayout ? '#0d47a1' : ''}}>
+                            <WindPowerIcon />
+                          </Avatar>
+                        </ListItemAvatar>
+                        <ListItemText primary="Anemometer Payout" primaryTypographyProps={{sx:{ fontSize:'0.85em', fontWeight: 700,color:'black'}}} secondaryTypographyProps={{color:'black'}} secondary={`${Math.round(storm.anemometer.anemometerPayout * 100)}%`} />
+                      </ListItem>
+                      <ListItem sx={{paddingLeft:0}}>
+                        <ListItemAvatar>
+                          <Avatar sx={{backgroundColor: storm.maxRecovery == storm.ciac.ciacPayout ? '#0d47a1' : ''}}>
+                            <CycloneIcon />
+                          </Avatar>
+                        </ListItemAvatar>
+                        <ListItemText primary="CIAC Payout" primaryTypographyProps={{sx:{ fontSize:'0.85em', fontWeight: 700,color:'black'}}} secondaryTypographyProps={{color:'black'}} secondary={`${Math.round(storm.ciac.ciacPayout * 100)}%`}  />
+                      </ListItem>
+                      <ListItem sx={{paddingLeft:0}}>
+                        <ListItemAvatar>
+                          <Avatar sx={{backgroundColor: '#0d47a1'}}>
+                            <TrendingUpIcon />
+                          </Avatar>
+                        </ListItemAvatar>
+                        <ListItemText primary="Max Payout" primaryTypographyProps={{sx:{ fontSize:'0.85em', fontWeight: 700,color:'black'}}} secondaryTypographyProps={{color:'black'}} secondary={`${Math.round(storm.maxRecovery * 100)}%`}  />
+                      </ListItem>
+                      <ListItem sx={{paddingLeft:0}}>
+                        <ListItemAvatar>
+                          <Avatar sx={{backgroundColor:''}}>
+                            <AttachMoneyIcon />
+                          </Avatar>
+                        </ListItemAvatar>
+                        <ListItemText primary="Max Recovery Amount" primaryTypographyProps={{sx:{ fontSize:'0.85em', fontWeight: 700,color:'black'}}} secondaryTypographyProps={{color:'black'}} secondary={maskCurrency(storm.maxRecoveryAmount)}  />
+                      </ListItem>
+                    </List>
+                    </CardContent>
+                  </Collapse>
+                </Card>
+                </div>
+              ))}
+              {props.stormPayouts.length == 0 && <Typography sx={{ fontSize: '1.15em', display:'inline-block', p:5 }}>No recovery payouts available...</Typography>}
+            </div>}
+        </div>
+    );
+}
+
+export default BackTestingPayoutInfo

package/src/components/back-testing-payout-info/back-testing-payout-info.types.ts

@@ -0,0 +1,9 @@
+import { StormPayout } from "../back-testing-map/back-testing-map.service"
+
+export interface BackTestingPayoutInfoProps {
+    mapInstanceRef : React.MutableRefObject<any>
+    stormPayouts: StormPayout[],
+    status: 'loading'|'idle',
+    onBack?: () => void,
+    onRestart?: () => void
+}

package/src/components/back-testing-stepper/back-testing-stepper.css

@@ -0,0 +1,30 @@
+.stepper-container{
+    --icon-size: 2.5rem;
+    padding: 20px;
+    padding-right: 10px;
+    overflow-y:auto;
+    height: 100%;
+}
+
+.stepper-container .MuiStepConnector-line.MuiStepConnector-lineVertical {
+    margin-left:8px;
+}
+
+.stepper-container .MuiStepLabel-root .MuiStepLabel-iconContainer .MuiSvgIcon-root {
+    font-size: var(--icon-size);
+}
+
+.stepper-container .MuiStepLabel-root .MuiStepLabel-iconContainer circle {
+    font-size: var(--icon-size);
+}
+
+.stepper-container .MuiStepLabel-root.blue .MuiStepLabel-labelContainer .MuiStepLabel-label{
+    color:#448aff;
+}
+
+
+.stepper-container .MuiStepLabel-root .MuiStepLabel-labelContainer .MuiStepLabel-label{
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+