back-testing-react 1.0.4 → 1.0.6

package/src/components/back-testing-stepper/steps/input-anemometer/input-anemometer.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import { MediaType, Payout, PayoutOption, PayoutWizardStepType, RadioChoice, WizardStep } from "../step.types";
+import { LngLatLike } from "@mapbox/search-js-core";
+import React, { forwardRef, useEffect, useImperativeHandle } from "react";
+import { FormControl, FormControlLabel, Radio, RadioGroup } from "@mui/material";
+import InputFile from "../../inputs/file-input/file-input";
+import Papa from 'papaparse';
+import TextInput from "../../inputs/text-input/text-input";
+import SelectInput from "../../inputs/select-input/select-input";
+import { AnemometerRequest, generateAnemometerRequest, PayoutRequest } from "../../../back-testing-map/back-testing-map.types";
+import { InputAnemometerStepProps } from "./input-anemometer.types";
+import "./input-anemometer.css"
+  
+const InputAnemometerStep = forwardRef<WizardStep, InputAnemometerStepProps>((props,ref) => {
+
+    const [payoutRequest,setPayoutRequest] = React.useState<PayoutRequest>(props.request);
+
+
+    const [latLng] = React.useState<LngLatLike | undefined>(payoutRequest.longitude != undefined && payoutRequest.latitude != undefined ? [payoutRequest.longitude,payoutRequest.latitude] : undefined);
+    const [anemometerChoice, setAnemometerChoice] = React.useState<RadioChoice>(props.anemometerChoice);
+
+    const [payoutOption, setPayoutOption] = React.useState<number>(props.selectedPayoutOptionIndex);
+
+    const [file, setFile] = React.useState<File | undefined>(undefined)
+    const [customPayouts, setCustomPayouts] = React.useState<Payout[] | undefined>(props.request.anemometer.payouts)
+
+    const [fileError, setFileError] = React.useState<boolean>(false); 
+    const [fileErrorMsg, setFileErrorMsg] = React.useState<string>(""); 
+    const FILE_ERROR = "Must upload a valid payout CSV or JSON"; 
+
+    const [anemometerCode, setAnemometerCode] = React.useState<string>(props.request.anemometer.code)
+
+    useEffect(() => {
+        setPayoutRequest(props.request)
+    },[props.request])
+
+    function handleChoiceSelection(e: RadioChoice){
+        setFileError(false);
+        setFileErrorMsg("");
+        setCustomPayouts(undefined);
+        setFile(undefined);
+        setAnemometerChoice(e);
+    }
+
+    function saveReduxState(){
+        if(latLng != undefined){
+            let newAnemometer = undefined
+            if(anemometerChoice == RadioChoice.DEFAULT){
+                newAnemometer = generateAnemometerRequest(latLng as [number,number], anemometerCode, props.payoutOptions[props.selectedPayoutOptionIndex].value, payoutRequest.anemometer.enabled);
+            } else {
+                newAnemometer = generateAnemometerRequest(latLng as [number,number], anemometerCode, customPayouts,payoutRequest.anemometer.enabled);
+            }
+            props.onAnemometerRequestChange(newAnemometer);
+            props.onAnemometerChoiceChange(anemometerChoice);
+            props.onPayoutOptionChange(payoutOption);
+        }
+    }
+
+    async function handleFileSelection(e:File){
+        setFileError(false);
+        setFileErrorMsg("");
+        if(e){
+            let data : Payout[] = [];
+            if(e.type == MediaType.JSON){
+                readJSONFile(e).then((json) => {return json});
+            } else if (e.type == MediaType.CSV){
+                readCSVFile(e);
+            } else {
+                console.log("UNSUPPORTED file");
+            }
+        }
+    }
+
+    const parseJSONFile = (file: Blob) =>
+        new Promise<Payout[]>((resolve, reject) => {
+            const fileReader = new FileReader()
+            fileReader.onload = event => {
+                if (event.target) {
+                    resolve(JSON.parse(event.target.result as string) as Payout[])
+                }
+            }
+        fileReader.onerror = error => reject(error)
+        fileReader.readAsText(file)
+    })
+
+    async function readJSONFile(file: Blob) {
+        const data = await parseJSONFile(file);
+        setCustomPayouts(data);
+    };
+
+    function readCSVFile(file: any) {
+        Papa.parse<Payout>(file, {
+            complete: (result) => {
+                setCustomPayouts(result.data);
+            },
+            header: true,
+            dynamicTyping: true
+        });
+    };
+
+    function validateStep() : boolean {
+        let isAnemometerChoiceError = (anemometerChoice == RadioChoice.CUSTOM && customPayouts == undefined)
+        if(isAnemometerChoiceError){
+            setFileError(true);
+            setFileErrorMsg(FILE_ERROR);            
+        } else {
+            setFileError(false);
+            setFileErrorMsg("");
+        }
+        return !isAnemometerChoiceError;
+    }
+
+    useImperativeHandle(ref, () => ({
+        handleNext(){
+            const isValid = validateStep();
+            if(isValid){
+                if(latLng != undefined){
+                    saveReduxState();
+                    props.onStepChange(PayoutWizardStepType.INPUT_CIAC_DETAILS);
+                    props.onActiveStepChange(props.activeStep + 1)
+                }
+            }
+        },
+
+        handleBack(){
+            if(latLng != undefined){
+                saveReduxState();
+                props.onStepChange(PayoutWizardStepType.INPUT_PROXY_DETAILS);
+                props.onActiveStepChange(props.activeStep - 1)
+            }
+        }
+    }));
+
+    function updatePayoutOption(e:PayoutOption){
+        setPayoutOption(e);
+    }
+
+    return (
+        <div>
+            <div className="ptop-10 pbot-10">
+                <TextInput 
+                label="Anemometer Code:" 
+                value={anemometerCode} 
+                onChange={(e) => setAnemometerCode(e)} />
+            </div>
+            <FormControl sx={{width:'100%'}}>
+                <label className="ptop-20 bold">Select a payout table:</label>
+                <RadioGroup
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    sx={{width:'100%'}}
+                    value={anemometerChoice}
+                    onChange={(e) => handleChoiceSelection((e.target as HTMLInputElement).value as RadioChoice)}
+                    name="radio-buttons-group">
+                    <FormControlLabel 
+                        value={RadioChoice.DEFAULT} 
+                        control={<Radio />} 
+                        label="Preconfigured Table" />
+                    <div className="">
+                    <SelectInput 
+                            disabled={anemometerChoice != RadioChoice.DEFAULT} 
+                            onLoad={(e:number) => updatePayoutOption(e)} 
+                            onChange={(e:number) => updatePayoutOption(e)} 
+                            defaultValue={payoutOption} 
+                            items={props.payoutOptions.map((option, index) => {return {key:option.key, value:index}})}>
+                        </SelectInput>
+                    </div>
+                    <FormControlLabel 
+                        value={RadioChoice.CUSTOM} 
+                        control={<Radio />} 
+                        label="Upload table" />
+                </RadioGroup>
+            </FormControl>
+            <div className="ptop-10 pbot-10">
+                <InputFile 
+                    disabled={anemometerChoice != RadioChoice.CUSTOM} 
+                    error={fileError} 
+                    errorMessage={fileErrorMsg} 
+                    value={file} 
+                    onChange={handleFileSelection} 
+                    isFileSelected={anemometerChoice == RadioChoice.CUSTOM && customPayouts != undefined}
+                    accept=".csv,.json"/>
+            </div>
+        </div>
+    );
+})
+
+export default InputAnemometerStep

package/src/components/back-testing-stepper/steps/input-anemometer/input-anemometer.types.ts

@@ -0,0 +1,16 @@
+import { AnemometerRequest, PayoutRequest } from "../../../back-testing-map/back-testing-map.types";
+import { Payout, PayoutWizardStepType, RadioChoice } from "../step.types";
+
+export interface InputAnemometerStepProps {
+    mapInstanceRef: React.MutableRefObject<any>,
+    activeStep: number,
+    request: PayoutRequest,
+    selectedPayoutOptionIndex: number,
+    payoutOptions: {key:string,value: Payout[]}[],
+    anemometerChoice: RadioChoice,
+    onActiveStepChange: (e: number) => void,
+    onStepChange: (e: PayoutWizardStepType) => void,
+    onAnemometerChoiceChange: (e:RadioChoice) => void,
+    onPayoutOptionChange: (e:number) => void,
+    onAnemometerRequestChange: (e:AnemometerRequest) => void
+}

package/src/components/back-testing-stepper/steps/input-ciac/input-ciac.tsx

@@ -0,0 +1,225 @@
+"use client"
+
+import { MediaType, Payout, PayoutOption, PayoutWizardStepType, RadioChoice, WizardStep } from "../step.types";
+import { LngLatLike } from "@mapbox/search-js-core";
+import React, { forwardRef, useEffect, useImperativeHandle } from "react";
+import { FormControl, FormControlLabel, Radio, RadioGroup } from "@mui/material";
+import InputFile from "../../inputs/file-input/file-input";
+import { AnemometerRequest, CIAC_LAYER, CIACRequest, generateCIACRequest, PayoutRequest, ProxyRequest } from "../../../back-testing-map/back-testing-map.types";
+import * as turf from "@turf/turf";
+import { GeoJSONSource } from "mapbox-gl";
+import Papa from 'papaparse';
+import DistanceInput from "../../inputs/distance-input/distance-input";
+import SelectInput from "../../inputs/select-input/select-input";
+import { InputCIACStepProps } from "./input-ciac.types";
+  
+const InputCIACStep = forwardRef<WizardStep, InputCIACStepProps>((props,ref) => {
+
+    const [payoutRequest, setPayoutRequest] = React.useState<PayoutRequest>(props.request);
+
+    const [latLng] = React.useState<LngLatLike | undefined>(payoutRequest.longitude != undefined && payoutRequest.latitude != undefined ? [payoutRequest.longitude,payoutRequest.latitude] : undefined);
+    const [ciacRadius, setCIACRadius] = React.useState<number | undefined>(props.request.ciac.shapes[0].radius); 
+    const [ciacChoice, setCIACChoice] = React.useState(props.ciacChoice);
+
+    const [file, setFile] = React.useState<File | undefined>(undefined)
+    const [customPayouts, setCustomPayouts] = React.useState<Payout[] | undefined>(props.request.ciac.payouts);
+
+    const [payoutOption, setPayoutOption] = React.useState<number>(props.selectedPayoutOptionIndex);
+
+    const [fileError, setFileError] = React.useState<boolean>(false); 
+    const [fileErrorMsg, setFileErrorMsg] = React.useState<string>(""); 
+    const FILE_ERROR = "Must upload a valid payout CSV or JSON"; 
+
+    const [ciacError, setCIACError] = React.useState<boolean>(false); 
+    const [ciacErrorMsg, setCIACErrorMsg] = React.useState<string>(""); 
+    const CIAC_RADIUS_ERROR = "CAT circle radius must be >= 0"; 
+
+    function handleCIACRadiusChange(e:number){
+        setCIACError(false);
+        setCIACErrorMsg("");
+        if(e != undefined && !Number.isNaN(e)){
+            setCIACRadius(e)
+        }
+    }
+
+    useEffect(() => {
+        setPayoutRequest(props.request)
+    },[props.request])
+
+    useEffect(() => {
+        if(ciacRadius != undefined){            
+            props.onCIACRequestChange(updateCIAC());
+        }
+    },[ciacRadius])
+
+    function handleChoiceSelection(e: RadioChoice){
+        setFileError(false);
+        setFileErrorMsg("");
+        setCustomPayouts(undefined);
+        setFile(undefined);
+        setCIACChoice(e);
+    }
+
+    function saveState(){
+        if(latLng != undefined){
+            let newCIAC = updateCIAC();
+            props.onCIACRequestChange(newCIAC);
+            props.onCIACChoiceChange(ciacChoice);
+            props.onPayoutOptionChange(payoutOption);
+        }
+    }
+
+    function updateCIAC(){
+        let newCIAC = undefined
+        if(ciacChoice == RadioChoice.DEFAULT){
+            newCIAC = generateCIACRequest(latLng as [number,number], ciacRadius, false, props.payoutOptions[props.selectedPayoutOptionIndex].value,payoutRequest.ciac.enabled);
+        } else {
+            newCIAC = generateCIACRequest(latLng as [number,number], ciacRadius, false, customPayouts,payoutRequest.ciac.enabled);
+        }
+        return newCIAC;
+    }
+
+    async function handleFileSelection(e:File){
+        setFileError(false);
+        setFileErrorMsg("");
+        if(e){
+            if(e.type == MediaType.JSON){
+                readJSONFile(e).then((json) => {return json});
+            } else if (e.type == MediaType.CSV){
+                readCSVFile(e);
+            } else {
+                console.log("UNSUPPORTED file");
+            }
+        }
+    }
+
+    const parseJSONFile = (file: Blob) =>
+        new Promise<Payout[]>((resolve, reject) => {
+            const fileReader = new FileReader()
+            fileReader.onload = event => {
+                if (event.target) {
+                    resolve(JSON.parse(event.target.result as string) as Payout[])
+                }
+            }
+        fileReader.onerror = error => reject(error)
+        fileReader.readAsText(file)
+    })
+
+    async function readJSONFile(file: Blob) {
+        const data = await parseJSONFile(file);
+        setCustomPayouts(data);
+    };
+
+    function readCSVFile(file: any) {
+        Papa.parse<Payout>(file, {
+            complete: (result) => {
+                setCustomPayouts(result.data);
+            },
+            header: true,
+            dynamicTyping: true
+        });
+    };
+
+    function validateStep() : boolean {
+        let isCIACChoiceError = (ciacChoice == RadioChoice.CUSTOM && customPayouts == undefined)
+        if(isCIACChoiceError){
+            setFileError(true);
+            setFileErrorMsg(FILE_ERROR);
+        }else {
+            setFileError(false);
+            setFileErrorMsg("");
+        }
+
+        let isCIACError = !Number.isSafeInteger(ciacRadius) || ciacRadius == undefined || ciacRadius < 0;
+        if(isCIACError){
+            setCIACError(true)
+            setCIACErrorMsg(CIAC_RADIUS_ERROR);
+        } else {
+            setCIACError(false)
+            setCIACErrorMsg("");
+        }
+        return !isCIACError && !isCIACChoiceError;
+    }
+
+    useImperativeHandle(ref, () => ({
+        handleNext(){
+            const isValid = validateStep();
+            if(isValid){
+                if(latLng != undefined){
+                    saveState();
+                    props.onStepChange(PayoutWizardStepType.DISPLAY_PAYOUTS);
+                    props.onCalculatePayoutEnabledChanged(true);
+                }
+            }
+        },
+
+        handleBack(){
+            if(latLng != undefined){
+                saveState();
+                props.onStepChange(PayoutWizardStepType.INPUT_ANEMOMETER_DETAILS);
+                props.onActiveStepChange(props.activeStep - 1)
+            }
+        }
+    }));
+
+    function updatePayoutOption(e:PayoutOption){
+        setPayoutOption(e);
+    }
+
+    return (
+        <div>
+            <div className="ptop-10 pbot-10">
+                <DistanceInput 
+                    label="Circle radius:" 
+                    value={ciacRadius} 
+                    distanceOptions={[{name:'mi',symbol:'mi'},{name:'km',symbol:'km'}]}
+                    error={ciacError}
+                    errorMessage={ciacErrorMsg}
+                    onChange={(e) => handleCIACRadiusChange(e)} 
+                    step={0.1} 
+                    min={0} />
+            </div>
+            <FormControl sx={{width:'100%'}}>
+                <label className="ptop-20 bold">Select a payout table:</label>
+                <RadioGroup
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    sx={{width:'100%'}}
+                    value={ciacChoice}
+                    onChange={(e) => handleChoiceSelection((e.target as HTMLInputElement).value as RadioChoice)}
+                    name="radio-buttons-group">
+                    <FormControlLabel 
+                        value={RadioChoice.DEFAULT} 
+                        sx={{pt:0}}
+                        control={<Radio />} 
+                        label="Preconfigured Table" />
+                    <div className="">
+                        <SelectInput 
+                            disabled={ciacChoice != RadioChoice.DEFAULT} 
+                            onLoad={(e:number) => updatePayoutOption(e)} 
+                            onChange={(e:number) => updatePayoutOption(e)} 
+                            defaultValue={payoutOption} 
+                            items={props.payoutOptions.map((option, index) => {return {key:option.key, value:index}})}>
+                        </SelectInput>
+                    </div>
+                    <FormControlLabel 
+                        value={RadioChoice.CUSTOM} 
+                        control={<Radio />} 
+                        label="Upload table" />
+                </RadioGroup>
+            </FormControl>
+            <div className="ptop-10 pbot-10">
+                <InputFile 
+                    disabled={ciacChoice != RadioChoice.CUSTOM} 
+                    value={file} 
+                    error={fileError}
+                    errorMessage={fileErrorMsg}
+                    onChange={handleFileSelection} 
+                    isFileSelected={ciacChoice == RadioChoice.CUSTOM && customPayouts != undefined}
+                    accept=".csv,.json"/>
+            </div>
+            <div className="ptop-10 pbot-10"/>
+        </div>
+    );
+})
+
+export default InputCIACStep

package/src/components/back-testing-stepper/steps/input-ciac/input-ciac.types.ts

@@ -0,0 +1,17 @@
+import { AnemometerRequest, CIACRequest, PayoutRequest, ProxyRequest } from "../../../back-testing-map/back-testing-map.types";
+import { Payout, PayoutWizardStepType, RadioChoice } from "../step.types";
+
+export interface InputCIACStepProps {
+    mapInstanceRef: React.MutableRefObject<any>,
+    activeStep: number,
+    request: PayoutRequest,
+    selectedPayoutOptionIndex: number,
+    payoutOptions: {key:string,value: Payout[]}[],
+    ciacChoice: RadioChoice,
+    onActiveStepChange: (e: number) => void,
+    onStepChange: (e: PayoutWizardStepType) => void,
+    onCIACChoiceChange: (e:RadioChoice) => void,
+    onPayoutOptionChange: (e:number) => void,
+    onCIACRequestChange: (e:CIACRequest) => void,
+    onCalculatePayoutEnabledChanged: (e:boolean) => void,
+}

package/src/components/back-testing-stepper/steps/input-location/input-location.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import NumberInput from "../../inputs/number-input/number-input";
+import WorldMapSearch from '../../inputs/worldmap-search/worldmap-search'
+import { PayoutWizardStepType, WizardStep } from "../step.types";
+import { LngLatLike, SearchBoxRetrieveResponse } from "@mapbox/search-js-core";
+import React, { forwardRef, useImperativeHandle } from "react";
+import { InputLocationStepProps } from "./input-location.types";
+import { generateProxyRequest, PayoutRequest } from "../../../back-testing-map/back-testing-map.types";
+  
+const InputLocationStep = forwardRef<WizardStep, InputLocationStepProps>((props,ref) => {
+
+    const [request] = React.useState<PayoutRequest>(props.payoutRequest); 
+
+    const [locationMarker, setLocationMarker] = React.useState<mapboxgl.Marker>(props.marker);
+    const [latLng, setLatLng] = React.useState<LngLatLike | undefined>(request.longitude != undefined && request.latitude != undefined ? [request.longitude,request.latitude] : undefined); 
+    const [locationString, setLocationString] = React.useState<string>(props.address);
+    const [insuranceLimit, setInsuranceLimit] = React.useState<number>(request.limit); 
+
+    const [addressError, setAddressError] = React.useState<boolean>(false); 
+    const [addressErrorMsg, setAddressErrorMsg] =  React.useState<string>(""); 
+    const ADDRESS_ERROR = "Must input address and select option from dropdown"; 
+
+    const [limitError, setLimitError] = React.useState<boolean>(false); 
+    const [limitErrorMsg, setLimitErrorMsg] = React.useState<string>(""); 
+    const LIMIT_ERROR = "Insurance limit must be a positive integer"; 
+
+    function changeLocationString(value:string){
+        setAddressError(false);
+        setAddressErrorMsg("");
+        setLocationString(value);
+    }
+
+    function changeInsuranceLimit(value:number){
+        setLimitError(false);
+        setLimitErrorMsg("");
+        setInsuranceLimit(value);
+    }
+
+    function setLocationLatLng(resp: SearchBoxRetrieveResponse){
+        let latLng : LngLatLike = [resp.features[0].geometry.coordinates.at(0) as number,resp.features[0].geometry.coordinates.at(1) as number];
+        if(props.mapInstanceRef != undefined && latLng != undefined){
+            setLocationMarker(locationMarker.remove().setLngLat(latLng).addTo(props.mapInstanceRef.current));
+            props.mapInstanceRef.current.flyTo({center:
+                latLng,
+                essential: true});
+            setAddressError(false);
+            setAddressErrorMsg("");
+        }
+        setLatLng(latLng);
+    }
+
+    function saveState(){
+        if(latLng != undefined){
+            let coord = (latLng as [number,number]);
+            let newProxy = generateProxyRequest(latLng as [number,number], 1000, request.proxy.payouts,request.proxy.enabled);
+            let newRequest : PayoutRequest = {
+                includeZeroPayouts: request.includeZeroPayouts,
+                limit: insuranceLimit,
+                latitude: coord[1],
+                longitude: coord[0],
+                proxy: newProxy,
+                anemometer: request.anemometer,
+                ciac: request.ciac
+            }
+            props.onLocationAddressChange(locationString);
+            props.onPayoutRequestChange(newRequest);
+        }
+    }
+
+    function validateStep() : boolean {
+        // validate address input
+        let addressError = locationString.trim().length == 0 || latLng == undefined || locationMarker._map == undefined;
+        if(addressError){
+            setAddressError(true)
+            setAddressErrorMsg(ADDRESS_ERROR);
+        } else{
+            setAddressError(false);
+            setAddressErrorMsg("");
+        }
+
+        let limitError = !Number.isSafeInteger(insuranceLimit) || insuranceLimit <= 0;
+        if(limitError){
+            setLimitError(true)
+            setLimitErrorMsg(LIMIT_ERROR);
+        } else{
+            setLimitError(false);
+            setLimitErrorMsg("");
+        }
+        return addressError || limitError;
+    }
+
+    useImperativeHandle(ref, () => ({
+        handleNext(){
+            let valid = !validateStep()
+            if(valid){
+                if(latLng != undefined){
+                    saveState();
+                    props.onStepChange(PayoutWizardStepType.INPUT_PROXY_DETAILS);
+                    props.onActiveStepChange(props.activeStep + 1)
+                }
+            }
+        },
+
+        handleBack(){}
+    }));
+
+    return (
+        <div>
+            <div className="ptop-10 pbot-20">
+                <WorldMapSearch 
+                    value={locationString}
+                    error={addressError}
+                    errorMessage={addressErrorMsg}
+                    label="Risk Location Address:" 
+                    accessToken={props.accessToken} 
+                    onChange={(e) => changeLocationString(e)}
+                    onLocationRetrieved={(e) => setLocationLatLng(e)}/>
+            </div>
+            <div className="pbot-10">
+                <NumberInput 
+                    label="Limit of Insurance:" 
+                    value={insuranceLimit} 
+                    error={limitError}
+                    errorMessage={limitErrorMsg}
+                    onChange={(e) => changeInsuranceLimit(e as number)} 
+                    prefix="$" 
+                    step={1} 
+                    min={0}/>
+            </div>
+        </div>
+    );
+})
+
+export default InputLocationStep

package/src/components/back-testing-stepper/steps/input-location/input-location.types.ts

@@ -0,0 +1,16 @@
+import { LngLatLike } from "@mapbox/search-js-core";
+import { PayoutWizardStepType } from "../step.types";
+import { PayoutRequest, ProxyRequest } from "../../../back-testing-map/back-testing-map.types";
+
+export interface InputLocationStepProps {
+    accessToken: string,
+    mapInstanceRef: React.MutableRefObject<any>,
+    marker: mapboxgl.Marker,
+    activeStep: number,
+    payoutRequest: PayoutRequest,
+    address: string,
+    onActiveStepChange: (e: number) => void,
+    onStepChange: (e: PayoutWizardStepType) => void,
+    onPayoutRequestChange: (e: PayoutRequest) => void,
+    onLocationAddressChange: (e: string) => void
+}