back-testing-react 1.0.0

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "back-testing-react",
+  "version": "1.0.0",
+  "description": "Parametric back testing application developed by NormanMax Insurance Solutions",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "author": "Alex Dubuisson",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.26.0",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
+    "rollup": "^4.25.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^8.4.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mapbox/search-js-core": "^1.0.0-beta.22",
+    "@mui/material": "^6.1.6",
+    "@turf/turf": "^7.1.0",
+    "@types/react-dom": "^18.3.1",
+    "mapbox-gl": "^3.8.0",
+    "react-dom": "^18.3.1"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,42 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import terser from "@rollup/plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+
+const packageJson = require("./package.json");
+import postcss from 'rollup-plugin-postcss'
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      postcss(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: "dist/types.d.ts", format: "es" }],
+    plugins: [dts.default()],
+    external: [/\.css$/],
+  },
+];

package/src/components/back-testing-cat-legend/back-testing-cat-legend.css

@@ -0,0 +1,36 @@
+.legend{
+    --legend-font-size: 10px;
+    --legend-padding: 5px;
+    width: 250px;
+    height: 20px;
+    position:absolute;
+    z-index:10;
+    background-color: white;
+    padding: 0;
+    display:inline-flex;
+    border-radius:3px;
+    box-shadow: 2px 2px 6px gray;
+}
+
+.legend > .item-container {
+    display:inline-flex;
+    padding:0;
+    position:absolute;
+    top: 5px;
+    left: 5px;
+}
+
+.legend > .item-container:hover > item {
+    opacity: 0.2;
+}
+
+.legend > .item-container > .item {
+    height: var(--legend-font-size);
+    width:30px;
+    display:inline-flex;
+    padding:0;
+}
+
+.legend > .item-container > .item:hover {
+    opacity: 1 !important;
+}

package/src/components/back-testing-cat-legend/back-testing-cat-legend.stories.tsx

@@ -0,0 +1,12 @@
+import { StoryFn, Meta } from "@storybook/react";
+import BackTestingCatLegend from "./back-testing-cat-legend";
+
+export default {
+  title: "ReactComponentLibrary/BackTestingCATLegend",
+  component: BackTestingCatLegend,
+} as Meta<typeof BackTestingCatLegend>;
+
+const Template: StoryFn<typeof BackTestingCatLegend> = (args) => <BackTestingCatLegend {...args} />;
+
+export const CatLegendTest = Template.bind({});
+CatLegendTest.args = {};

package/src/components/back-testing-cat-legend/back-testing-cat-legend.tsx

@@ -0,0 +1,23 @@
+import { Tooltip } from '@mui/material';
+import { generateCATColor } from '../back-testing-map/back-testing-map.types';
+import './back-testing-cat-legend.css'
+import { BackTestingCatLegendProps } from './back-testing-cat-legend.types';
+
+const BackTestingCatLegend = (props: BackTestingCatLegendProps) => {
+    return(
+        <div className={props.className + " legend"}>
+            <div className="item-container">
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 5</span>}><span className="item" style={{backgroundColor:generateCATColor(5)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 4</span>}><span className="item" style={{backgroundColor:generateCATColor(4)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 3</span>}><span className="item" style={{backgroundColor:generateCATColor(3)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 2</span>}><span className="item" style={{backgroundColor:generateCATColor(2)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 1</span>}><span className="item" style={{backgroundColor:generateCATColor(1)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Tropical Storm</span>}><span className="item" style={{backgroundColor:generateCATColor(0)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Tropical Depression</span>}><span className="item" style={{backgroundColor:generateCATColor(-1)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Tropical Expression</span>}><span className="item" style={{backgroundColor:generateCATColor(-2)}}/></Tooltip>
+            </div>
+        </div>
+    );
+}
+
+export default BackTestingCatLegend

package/src/components/back-testing-cat-legend/back-testing-cat-legend.types.ts

@@ -0,0 +1,3 @@
+export interface BackTestingCatLegendProps {
+    className?: string
+}

package/src/components/back-testing-cat-legend/index.ts

@@ -0,0 +1 @@
+export {default} from './back-testing-cat-legend';

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

@@ -0,0 +1,39 @@
+body{
+    padding: 0;
+    margin: 0;
+}
+
+.map__wrapper{
+    width: 100%;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.map__wrapper > div {
+    position: relative;
+    grid-row-start: 1;
+    grid-column-start: 1;
+}
+
+.map__wrapper > div.map__views {
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+    margin-left: auto;
+    right: 20px;
+    top: 15px;
+}
+
+.map__wrapper .cat__legend{
+    top: 15px;
+    margin-left: calc( calc( 100% - 250px)/2);
+}
+
+.map__wrapper div.mapboxgl-ctrl-attrib-inner{
+    display:none;
+}
+
+.map__wrapper div.mapboxgl-ctrl-bottom-left{
+    display:none;
+}

package/src/components/back-testing-map/back-testing-map.service.ts

@@ -0,0 +1,63 @@
+import { Point } from "geojson";
+import { PayoutRequest } from "./back-testing-map.types";
+
+const API_ROOT_URI='https://api-uat.nms3939.com'
+
+export class AppConfig {
+    public static readonly endpoints = {
+        auth: {
+            generateAuthToken : '/auth/generateAuthToken'
+        },
+        rating: {
+            rate: '/rating/rate',
+            hazardTool: '/rating/hazardTool'
+        },
+        backTesting: {
+            payouts: '/backTesting/payouts',
+            getMapAccessToken: '/backTesting/getMapToken'
+        }
+    }
+}
+
+export interface StormPayout {
+    name: string;
+    year: number;
+    windspeedMPH: number;
+    proxyPayout: number;
+    anemometerPayout: number;
+    category: number;
+    ciacPayout: number;
+    maxRecovery: number;
+    maxRecoveryAmount: number;
+    color?: string;
+    stormTrack:{
+      NAME: string;
+      SEASON: number;
+      ISO_TIME: string,
+      USA_WIND: number;
+      USA_SSHS: number;
+      LOCATION: Point
+    }[]
+}
+
+export interface PayoutResponse {
+    status: number;
+    payouts: StormPayout[];
+}
+
+export const fetchPayouts = async (request: PayoutRequest, apiKey: string) => {
+    const url = API_ROOT_URI + AppConfig.endpoints.backTesting.payouts;
+    
+    const response = await fetch(url, {
+        method: "POST",
+        headers: { 
+            "Content-Type": "application/json", 
+            "x-api-key": apiKey
+        },
+        body: JSON.stringify(request),
+    });
+
+    const result: PayoutResponse = await response.json();
+    return result;
+    
+};

package/src/components/back-testing-map/back-testing-map.stories.tsx

@@ -0,0 +1,427 @@
+import { StoryFn, Meta } from "@storybook/react";
+import BackTestingMap from "./back-testing-map";
+import { Payout } from "./back-testing-map.types";
+
+export default {
+  title: "ReactComponentLibrary/BackTestingMap",
+  component: BackTestingMap,
+} as Meta<typeof BackTestingMap>;
+
+const Template: StoryFn<typeof BackTestingMap> = (args) => <BackTestingMap {...args} />;
+
+export const MapTest = Template.bind({});
+MapTest.args = {
+  location: {longitude:-80.188332,latitude:25.781441},
+  ciacRadius: 15,
+  limit: 1250000,
+  anemometerCode: 'BBH',
+  ciacPayouts: defaultCiacPayoutTable(),
+  proxyPayouts: defaultProxyPayoutTable(),
+  anemometerPayouts: defaultAnemometerPayoutTable()
+};
+
+function defaultProxyPayoutTable() {
+  const retVal : Payout[] = [
+      {
+          "category": 74,
+          "payout": 0.05
+      },
+      {
+          "category": 75,
+          "payout": 0.055
+      },
+      {
+          "category": 76,
+          "payout": 0.06
+      },
+      {
+          "category": 77,
+          "payout": 0.065
+      },
+      {
+          "category": 78,
+          "payout": 0.07
+      },
+      {
+          "category": 79,
+          "payout": 0.075
+      },
+      {
+          "category": 80,
+          "payout": 0.08
+      },
+      {
+          "category": 81,
+          "payout": 0.085
+      },
+      {
+          "category": 82,
+          "payout": 0.09
+      },
+      {
+          "category": 83,
+          "payout": 0.095
+      },
+      {
+          "category": 84,
+          "payout": 0.1
+      },
+      {
+          "category": 85,
+          "payout": 0.11
+      },
+      {
+          "category": 86,
+          "payout": 0.12
+      },
+      {
+          "category": 87,
+          "payout": 0.13
+      },
+      {
+          "category": 88,
+          "payout": 0.14
+      },
+      {
+          "category": 89,
+          "payout": 0.15
+      },
+      {
+          "category": 90,
+          "payout": 0.16
+      },
+      {
+          "category": 91,
+          "payout": 0.17
+      },
+      {
+          "category": 92,
+          "payout": 0.18
+      },
+      {
+          "category": 93,
+          "payout": 0.19
+      },
+      {
+          "category": 94,
+          "payout": 0.2
+      },
+      {
+          "category": 95,
+          "payout": 0.22
+      },
+      {
+          "category": 96,
+          "payout": 0.24
+      },
+      {
+          "category": 97,
+          "payout": 0.26
+      },
+      {
+          "category": 98,
+          "payout": 0.28
+      },
+      {
+          "category": 99,
+          "payout": 0.3
+      },
+      {
+          "category": 100,
+          "payout": 0.32
+      },
+      {
+          "category": 101,
+          "payout": 0.34
+      },
+      {
+          "category": 102,
+          "payout": 0.36
+      },
+      {
+          "category": 103,
+          "payout": 0.38
+      },
+      {
+          "category": 104,
+          "payout": 0.4
+      },
+      {
+          "category": 105,
+          "payout": 0.42
+      },
+      {
+          "category": 106,
+          "payout": 0.44
+      },
+      {
+          "category": 107,
+          "payout": 0.46
+      },
+      {
+          "category": 108,
+          "payout": 0.48
+      },
+      {
+          "category": 109,
+          "payout": 0.5
+      },
+      {
+          "category": 110,
+          "payout": 0.55
+      },
+      {
+          "category": 111,
+          "payout": 0.6
+      },
+      {
+          "category": 112,
+          "payout": 0.65
+      },
+      {
+          "category": 113,
+          "payout": 0.7
+      },
+      {
+          "category": 114,
+          "payout": 0.75
+      },
+      {
+          "category": 115,
+          "payout": 0.8
+      },
+      {
+          "category": 116,
+          "payout": 0.85
+      },
+      {
+          "category": 117,
+          "payout": 0.9
+      },
+      {
+          "category": 118,
+          "payout": 0.95
+      },
+      {
+          "category": 119,
+          "payout": 1
+      }
+  ]
+  return retVal
+}
+
+function defaultAnemometerPayoutTable() {
+  const retVal : Payout[] = [
+          {
+              "category": 74,
+              "payout": 0.05
+          },
+          {
+              "category": 75,
+              "payout": 0.055
+          },
+          {
+              "category": 76,
+              "payout": 0.06
+          },
+          {
+              "category": 77,
+              "payout": 0.065
+          },
+          {
+              "category": 78,
+              "payout": 0.07
+          },
+          {
+              "category": 79,
+              "payout": 0.075
+          },
+          {
+              "category": 80,
+              "payout": 0.08
+          },
+          {
+              "category": 81,
+              "payout": 0.085
+          },
+          {
+              "category": 82,
+              "payout": 0.09
+          },
+          {
+              "category": 83,
+              "payout": 0.095
+          },
+          {
+              "category": 84,
+              "payout": 0.1
+          },
+          {
+              "category": 85,
+              "payout": 0.11
+          },
+          {
+              "category": 86,
+              "payout": 0.12
+          },
+          {
+              "category": 87,
+              "payout": 0.13
+          },
+          {
+              "category": 88,
+              "payout": 0.14
+          },
+          {
+              "category": 89,
+              "payout": 0.15
+          },
+          {
+              "category": 90,
+              "payout": 0.16
+          },
+          {
+              "category": 91,
+              "payout": 0.17
+          },
+          {
+              "category": 92,
+              "payout": 0.18
+          },
+          {
+              "category": 93,
+              "payout": 0.19
+          },
+          {
+              "category": 94,
+              "payout": 0.2
+          },
+          {
+              "category": 95,
+              "payout": 0.22
+          },
+          {
+              "category": 96,
+              "payout": 0.24
+          },
+          {
+              "category": 97,
+              "payout": 0.26
+          },
+          {
+              "category": 98,
+              "payout": 0.28
+          },
+          {
+              "category": 99,
+              "payout": 0.3
+          },
+          {
+              "category": 100,
+              "payout": 0.32
+          },
+          {
+              "category": 101,
+              "payout": 0.34
+          },
+          {
+              "category": 102,
+              "payout": 0.36
+          },
+          {
+              "category": 103,
+              "payout": 0.38
+          },
+          {
+              "category": 104,
+              "payout": 0.4
+          },
+          {
+              "category": 105,
+              "payout": 0.42
+          },
+          {
+              "category": 106,
+              "payout": 0.44
+          },
+          {
+              "category": 107,
+              "payout": 0.46
+          },
+          {
+              "category": 108,
+              "payout": 0.48
+          },
+          {
+              "category": 109,
+              "payout": 0.5
+          },
+          {
+              "category": 110,
+              "payout": 0.55
+          },
+          {
+              "category": 111,
+              "payout": 0.6
+          },
+          {
+              "category": 112,
+              "payout": 0.65
+          },
+          {
+              "category": 113,
+              "payout": 0.7
+          },
+          {
+              "category": 114,
+              "payout": 0.75
+          },
+          {
+              "category": 115,
+              "payout": 0.8
+          },
+          {
+              "category": 116,
+              "payout": 0.85
+          },
+          {
+              "category": 117,
+              "payout": 0.9
+          },
+          {
+              "category": 118,
+              "payout": 0.95
+          },
+          {
+              "category": 119,
+              "payout": 1
+          }
+      ]
+  return retVal
+}
+
+function defaultCiacPayoutTable() {
+  const retVal : Payout[] = [
+      {
+          "category": 1,
+          "payout": 0.1
+      },
+      {
+          "category": 2,
+          "payout": 0.25
+      },
+      {
+          "category": 3,
+          "payout": 0.5
+      },
+      {
+          "category": 4,
+          "payout": 0.75
+      },
+      {
+          "category": 5,
+          "payout": 1
+      }
+  ]
+  return retVal;
+}