back-testing-react 1.0.5 → 1.0.7

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

@@ -0,0 +1,173 @@
+"use client"
+
+import { MediaType, Payout, PayoutOption, PayoutWizardStepType, RadioChoice, WizardStep } from "../step.types";
+import { LngLatLike } from "@mapbox/search-js-core";
+import React, { forwardRef, useImperativeHandle } from "react";
+import { FormControl, FormControlLabel, Radio, RadioGroup } from "@mui/material";
+import InputFile from "../../inputs/file-input/file-input";
+import Papa from 'papaparse';
+import SelectInput from "../../inputs/select-input/select-input";
+import { generateProxyRequest, PayoutRequest, ProxyRequest } from "../../../back-testing-map/back-testing-map.types";
+import { InputProxyStepProps } from "./input-proxy.types";
+  
+const InputProxyStep = forwardRef<WizardStep, InputProxyStepProps>((props,ref) => {
+
+    const [payoutRequest] = React.useState<PayoutRequest>(props.request);
+    const [proxy] = React.useState<ProxyRequest>(payoutRequest.proxy);
+
+    const [latLng] = React.useState<LngLatLike | undefined>(payoutRequest.longitude != undefined && payoutRequest.latitude != undefined ? [payoutRequest.longitude,payoutRequest.latitude] : undefined); 
+    const [proxyChoice, setProxyChoice] = React.useState<RadioChoice>(props.proxyChoice);
+
+    const [file, setFile] = React.useState<File | undefined>(undefined)
+    const [customPayouts, setCustomPayouts] = React.useState<Payout[] | undefined>(proxy.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"; 
+
+    function handleChoiceSelection(e: RadioChoice){
+        setFileError(false);
+        setFileErrorMsg("");
+        setCustomPayouts(undefined);
+        setFile(undefined);
+        setProxyChoice(e);
+    }
+
+    function saveState(){
+        if(latLng != undefined){
+            let newProxy = undefined
+            if(proxyChoice == RadioChoice.DEFAULT){
+                newProxy = generateProxyRequest(latLng as [number,number], 1000, props.payoutOptions[props.selectedPayoutOptionIndex].value, payoutRequest.proxy.enabled);
+            } else {
+                newProxy = generateProxyRequest(latLng as [number,number], 1000, customPayouts, payoutRequest.proxy.enabled);
+            }
+            props.onProxyRequestChange(newProxy);
+            props.onProxyChoiceChange(proxyChoice);
+            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 isProxyChoiceError = (proxyChoice == RadioChoice.CUSTOM && customPayouts == undefined)
+        if(isProxyChoiceError){
+            setFileError(true);
+            setFileErrorMsg(FILE_ERROR);            
+        } else {
+            setFileError(false);
+            setFileErrorMsg("");
+        }
+        return !isProxyChoiceError;
+    }
+
+    useImperativeHandle(ref, () => ({
+        handleNext(){
+            const isValid = validateStep();
+            if(isValid){
+                if(latLng != undefined){
+                    saveState();
+                    props.onStepChange(PayoutWizardStepType.INPUT_ANEMOMETER_DETAILS);
+                    props.onActiveStepChange(props.activeStep + 1)
+                }
+            }
+        },
+
+        handleBack(){
+            if(latLng != undefined){
+                saveState();
+                props.onStepChange(PayoutWizardStepType.INPUT_LOCATION);
+                props.onActiveStepChange(props.activeStep - 1)
+            }
+        }
+    }));
+
+    function updatePayoutOption(index: number){
+        setPayoutOption(index);
+    }
+
+    return (
+        <div>
+            <FormControl sx={{width:'100%'}}>
+                <RadioGroup
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    sx={{width:'100%'}}
+                    value={proxyChoice}
+                    onChange={(e) => handleChoiceSelection((e.target as HTMLInputElement).value as RadioChoice)}
+                    name="radio-buttons-group">
+                    <FormControlLabel 
+                        value={RadioChoice.DEFAULT} 
+                        sx={{pt:2}}
+                        control={<Radio />} 
+                        label="Preconfigured Table" />
+                    <div className="">
+                        <SelectInput 
+                            disabled={proxyChoice != RadioChoice.DEFAULT} 
+                            onLoad={(e:PayoutOption) => updatePayoutOption(e)} 
+                            onChange={(e:PayoutOption) => 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={proxyChoice != RadioChoice.CUSTOM} 
+                    value={file} 
+                    error={fileError} 
+                    errorMessage={fileErrorMsg} 
+                    onChange={handleFileSelection} 
+                    isFileSelected={proxyChoice == RadioChoice.CUSTOM && customPayouts != undefined}
+                    accept=".csv,.json"/>
+            </div>
+        </div>
+    );
+})
+
+export default InputProxyStep

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

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

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

@@ -0,0 +1,58 @@
+import { AnemometerRequest, CIACRequest, ProxyRequest } from "../../back-testing-map/back-testing-map.types";
+
+export interface WizardStep {
+    handleBack: () => void,
+    handleNext: () => void
+}
+
+export enum PayoutWizardStepType {
+    INPUT_LOCATION = '__input_location',
+    INPUT_PROXY_DETAILS = '__input_proxy_details',
+    INPUT_ANEMOMETER_DETAILS = '__input_anemometer_details',
+    INPUT_CIAC_DETAILS = '__input_ciac_details',
+    CALCULATE_PAYOUTS = '__calc_payouts',
+    DISPLAY_PAYOUTS = '__display_payouts',
+
+    // Simplified Steps
+    SIMPLIFIED_INPUT_LOCATION = '__simplified_input_location',
+}
+
+export interface PayoutWizardStep {
+    step: PayoutWizardStepType
+    label: string
+    description: string
+    componentRef: React.RefObject<WizardStep>
+    istoggable:boolean,
+    enabled: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+}
+
+export enum RadioChoice {
+    DEFAULT = '__default',
+    CUSTOM = '__custom'
+}
+
+export enum PayoutOption {
+  STANDARD_74_119 = 234875,
+  RESIDENTIAL_65_110 = 481734,
+  RESIDENTIAL_65_130 = 598652,
+  CIAC_10_25_50_75_100 = 861543,
+  CIAC_30_60_100_100_100 = 329134,
+}
+
+export enum MediaType {
+    JSON = 'application/json',
+    CSV = 'text/csv'
+}
+  
+export interface Payout {
+    category: number,
+    payout: number
+}
+
+export function getConfiguredPayoutTable(index:number, options: Payout[][]) : Payout[] {
+    return options[index];
+}
+
+export function getPayouts(){
+    
+}

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

@@ -0,0 +1,36 @@
+body{
+  padding: 0;
+  margin: 0;
+}
+
+.wizard-container{
+
+  --side-panel-width: 400px;
+  --side-panel-bg-color: rgb(244,246,248);
+
+  --primary-color-blue: rgb(30,39,88);
+  --primary-color-red: rgb(153,27,30);
+  --accent-color-blue: rgb(68,114,196);
+  --accent-color-red: rgb(231,29,44);
+  --accent-color-gray: rgb(190,192,194); 
+
+  font-family: system-ui, sans-serif;
+  width: var(--page-width);
+  height: inherit;
+  padding: 0;
+  margin: 0;
+  display:grid;
+  grid-template-columns: var(--side-panel-width) auto;
+}
+
+.wizard-container > .side-panel{
+  height: inherit;
+  width: var(--side-panel-width);
+  background-color: var(--side-panel-bg-color);
+  border-right: 1px solid lightgray;
+}
+
+.wizard-container > .main-panel{
+  height: inherit;
+  width: 100%;
+}