Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Disaster Risk and Impact Analysis</title> | |
| <script src="static/js/deckgl@9.0.33.min.js"></script> | |
| <script src="static/js/maplibre-gl@3.0.0.js"></script> | |
| <link href="static/css/maplibre-gl@3.0.0.css" rel="stylesheet" /> | |
| <script src="static/js/tailwind@3.4.5.js"></script> | |
| <script src="static/js/chart.js"></script> | |
| <script src="static/js/popper.min.js"></script> | |
| <script src="static/js/tippy-bundle.umd.min.js"></script> | |
| <style> | |
| html, | |
| body { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Floating Box for Charts --> | |
| <div | |
| class="absolute left-4 top-4 h-9/10 bottom-4 w-2/5 p-6 bg-white backdrop-blur-sm bg-opacity-60 shadow-lg overflow-y-auto z-10 rounded-2xl" | |
| > | |
| <h1 class="text-2xl font-bold mb-4 text-center">FIRM Overview</h1> | |
| <!-- OVER METRICS --> | |
| <h1 class="text-l font-bold mb-4">Disaster Affection Index</h1> | |
| <div class="flex justify-between space-x-4 p-4"> | |
| <div class="flex items-center p-4 bg-white shadow rounded-lg flex-1"> | |
| <div class="flex-1"> | |
| <h3 class="text-gray-700 text-sm font-semibold">Wind</h3> | |
| <div class="flex items-center"> | |
| <p class="text-xl font-bold text-gray-800">252</p> | |
| <span class="ml-2 text-green-500">↑ +61%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Metric Widget 2 --> | |
| <div class="flex items-center p-4 bg-white shadow rounded-lg flex-1"> | |
| <div class="flex-1"> | |
| <h3 class="text-gray-700 text-sm font-semibold">Flood</h3> | |
| <div class="flex items-center"> | |
| <p class="text-xl font-bold text-gray-800">90</p> | |
| <span class="ml-2 text-red-500">↓ -5%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Metric Widget 3 --> | |
| <div class="flex items-center p-4 bg-white shadow rounded-lg flex-1"> | |
| <div class="flex-1"> | |
| <h3 class="text-gray-700 text-sm font-semibold">PM.</h3> | |
| <div class="flex items-center"> | |
| <p class="text-xl font-bold text-gray-800">36</p> | |
| <span class="ml-2 text-green-500">↑ +71%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <br /> | |
| <h1 class="text-l font-bold mb-4">Disaster Affection History</h1> | |
| <canvas id="dLinearChart" class="bg-transparent rounded-xl"></canvas> | |
| <!-- DAP --> | |
| <h2 class="text-l font-bold mt-8 mb-4"> | |
| Top-5 Rank Disaster Impact Factors | |
| </h2> | |
| <canvas id="DAPRadarChart" class="bg-transparent rounded-xl"></canvas> | |
| <h2 class="text-md mt-8 mb-4">All Disaster Imapacts to Finances</h2> | |
| <div class="relative overflow-x-auto rounded-xl"> | |
| <table | |
| class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400" | |
| > | |
| <thead | |
| class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400" | |
| > | |
| <tr> | |
| <th scope="col" class="px-6 py-3">Order</th> | |
| <th scope="col" class="px-6 py-3">Finance</th> | |
| <th scope="col" class="px-6 py-3">Score</th> | |
| <th scope="col" class="px-6 py-3">Wind</th> | |
| <th scope="col" class="px-6 py-3">Flood</th> | |
| <th scope="col" class="px-6 py-3">Air Pollution</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr | |
| class="bg-amber-300 border-b dark:bg-gray-800 dark:border-gray-700" | |
| > | |
| <td class="px-6 py-4">1</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Inventories | |
| </th> | |
| <td class="px-6 py-4">0.896</td> | |
| <td class="px-6 py-4">0.140</td> | |
| <td class="px-6 py-4">0.372</td> | |
| <td class="px-6 py-4">0.486</td> | |
| </tr> | |
| <tr | |
| class="bg-amber-200 border-b dark:bg-gray-800 dark:border-gray-700" | |
| > | |
| <td class="px-6 py-4">2</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Total assets | |
| </th> | |
| <td class="px-6 py-4">0.865</td> | |
| <td class="px-6 py-4">0.420</td> | |
| <td class="px-6 py-4">0.360</td> | |
| <td class="px-6 py-4">0.218</td> | |
| </tr> | |
| <tr | |
| class="bg-amber-100 border-b dark:bg-gray-800 dark:border-gray-700" | |
| > | |
| <td class="px-6 py-4">3</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Cost of Revenue | |
| </th> | |
| <td class="px-6 py-4">0.859</td> | |
| <td class="px-6 py-4">0.200</td> | |
| <td class="px-6 py-4">0.158</td> | |
| <td class="px-6 py-4">0.640</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">4</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Revenue | |
| </th> | |
| <td class="px-6 py-4">0.851</td> | |
| <td class="px-6 py-4">0.281</td> | |
| <td class="px-6 py-4">0.155</td> | |
| <td class="px-6 py-4">0.562</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">5</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Total debts | |
| </th> | |
| <td class="px-6 py-4">0.844</td> | |
| <td class="px-6 py-4">0.431</td> | |
| <td class="px-6 py-4">0.358</td> | |
| <td class="px-6 py-4">0.210</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">6</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Cash and cash equivalents | |
| </th> | |
| <td class="px-6 py-4">0.807</td> | |
| <td class="px-6 py-4">0.322</td> | |
| <td class="px-6 py-4">0.313</td> | |
| <td class="px-6 py-4">0.363</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">7</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Cash Flow from Financing Activities | |
| </th> | |
| <td class="px-6 py-4">0.792</td> | |
| <td class="px-6 py-4">0.307</td> | |
| <td class="px-6 py-4">0.318</td> | |
| <td class="px-6 py-4">0.373</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">8</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Total current liabilities | |
| </th> | |
| <td class="px-6 py-4">0.765</td> | |
| <td class="px-6 py-4">0.200</td> | |
| <td class="px-6 py-4">0.412</td> | |
| <td class="px-6 py-4">0.387</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">9</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Total cost | |
| </th> | |
| <td class="px-6 py-4">0.734</td> | |
| <td class="px-6 py-4">0.326</td> | |
| <td class="px-6 py-4">0.148</td> | |
| <td class="px-6 py-4">0.525</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">10</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Profit | |
| </th> | |
| <td class="px-6 py-4">0.733</td> | |
| <td class="px-6 py-4">0.274</td> | |
| <td class="px-6 py-4">0.187</td> | |
| <td class="px-6 py-4">0.537</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">11</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Cash flow from operating activities | |
| </th> | |
| <td class="px-6 py-4">0.675</td> | |
| <td class="px-6 py-4">0.274</td> | |
| <td class="px-6 py-4">0.423</td> | |
| <td class="px-6 py-4">0.301</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">12</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Trade and other receivables | |
| </th> | |
| <td class="px-6 py-4">0.675</td> | |
| <td class="px-6 py-4">0.385</td> | |
| <td class="px-6 py-4">0.272</td> | |
| <td class="px-6 py-4">0.342</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <td class="px-6 py-4">13</td> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Cash Flow from investing activities | |
| </th> | |
| <td class="px-6 py-4">0.650</td> | |
| <td class="px-6 py-4">0.169</td> | |
| <td class="px-6 py-4">0.375</td> | |
| <td class="px-6 py-4">0.454</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- DQC --> | |
| <h2 class="text-l font-bold mt-8 mb-4"> | |
| Potential Quantity of Financial Changes | |
| </h2> | |
| <canvas | |
| height="300px" | |
| id="DQCBarChart" | |
| class="bg-transparent rounded-xl" | |
| ></canvas> | |
| <!--h2 class="text-md mt-8 mb-4">Disaster Quantity Coefficients (DQC)</h2> | |
| <div class="relative overflow-x-auto rounded-xl"> | |
| <table | |
| class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400" | |
| > | |
| <thead | |
| class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400" | |
| > | |
| <tr> | |
| <th scope="col" class="px-6 py-3">Product name</th> | |
| <th scope="col" class="px-6 py-3">Color</th> | |
| <th scope="col" class="px-6 py-3">Category</th> | |
| <th scope="col" class="px-6 py-3">Price</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Apple MacBook Pro 17" | |
| </th> | |
| <td class="px-6 py-4">Silver</td> | |
| <td class="px-6 py-4">Laptop</td> | |
| <td class="px-6 py-4">$2999</td> | |
| </tr> | |
| <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Microsoft Surface Pro | |
| </th> | |
| <td class="px-6 py-4">White</td> | |
| <td class="px-6 py-4">Laptop PC</td> | |
| <td class="px-6 py-4">$1999</td> | |
| </tr> | |
| <tr class="bg-white dark:bg-gray-800"> | |
| <th | |
| scope="row" | |
| class="px-6 py-4 font-medium text-black whitespace-nowrap dark:text-white" | |
| > | |
| Magic Mouse 2 | |
| </th> | |
| <td class="px-6 py-4">Black</td> | |
| <td class="px-6 py-4">Accessories</td> | |
| <td class="px-6 py-4">$99</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div--> | |
| </div> | |
| <!-- Fullscreen Map --> | |
| <div id="map"></div> | |
| <!--img | |
| src="static/icon/logo.png" | |
| alt="Top-right image" | |
| class="absolute top-0 right-0 w-48 p-4" | |
| /--> | |
| <a href="index.html"> | |
| <img | |
| src="static/icon/home.png" | |
| id="goHome" | |
| class="absolute bg-white backdrop-blur-sm bg-opacity-60 rounded-xl shadow-lg top-4 right-4 w-12 p-4 hover:bg-opacity-100 hover:cursor-pointer" | |
| /> | |
| </a> | |
| <a href="analytics.html"> | |
| <img | |
| src="static/icon/radar.png" | |
| id="goOverView" | |
| class="absolute bg-white backdrop-blur-sm bg-opacity-60 rounded-xl shadow-lg top-20 right-4 w-12 p-4 hover:bg-opacity-100 hover:cursor-pointer" | |
| /> | |
| </a> | |
| <a href="locations.html"> | |
| <img | |
| src="static/icon/location.png" | |
| id="goLocation" | |
| class="absolute bg-white backdrop-blur-sm bg-opacity-60 rounded-xl shadow-lg top-36 right-4 w-12 p-4 hover:bg-opacity-100 hover:cursor-pointer" | |
| /> | |
| </a> | |
| <a href="forecast.html"> | |
| <img | |
| src="static/icon/forecast.png" | |
| id="goForecast" | |
| class="absolute bg-white backdrop-blur-sm bg-opacity-60 rounded-xl shadow-lg top-52 right-4 w-12 p-4 hover:bg-opacity-100 hover:cursor-pointer" | |
| /> | |
| </a> | |
| <img | |
| src="static/icon/extent.png" | |
| id="resetViewButton" | |
| class="absolute bg-white backdrop-blur-sm bg-opacity-60 rounded-xl shadow-lg bottom-12 right-4 w-12 p-4 hover:bg-opacity-100 hover:cursor-pointer" | |
| /> | |
| <img | |
| src="static/icon/play.png" | |
| id="animateButton" | |
| class="absolute bg-white backdrop-blur-sm bg-opacity-60 rounded-xl shadow-lg bottom-28 right-4 w-12 p-4 hover:bg-opacity-100 hover:cursor-pointer" | |
| /> | |
| <script> | |
| let INIT_VIEW_STATE = { | |
| longitude: 98.1339, | |
| latitude: 10.863, | |
| zoom: 5.594, | |
| pitch: 48.3549, | |
| bearing: -17.579, | |
| }; | |
| var viewState = INIT_VIEW_STATE; | |
| // LAYER | |
| const layer = new deck.IconLayer({ | |
| id: "IconLayerFIRM", | |
| data: "data/firm/location_homepro_do_2018-2024.json", | |
| getColor: (d) => [Math.sqrt(d.exits), 140, 0], | |
| getIcon: (d) => "marker", | |
| getPosition: (d) => [d.lon, d.lat], | |
| getSize: 24, | |
| iconAtlas: | |
| "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png", | |
| iconMapping: | |
| "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.json", | |
| pickable: true, | |
| }); | |
| const province_layer_centroid = new deck.IconLayer({ | |
| id: "IconLayerCentriod", | |
| data: "data/disaster/province_disaster_centroid.json", | |
| getColor: (d) => [Math.sqrt(d.exits), 140, 0], | |
| getIcon: (d) => "marker-warning", | |
| getPosition: (d) => [d.lon, d.lat], | |
| getSize: 24, | |
| iconAtlas: | |
| "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png", | |
| iconMapping: | |
| "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.json", | |
| pickable: false, | |
| }); | |
| const firm_dis_arc = new deck.ArcLayer({ | |
| id: "ArcLayer", | |
| data: "data/firm/homepro_disaster_network_map.json", | |
| getSourcePosition: (d) => [d.feature_x, d.feature_y], | |
| getTargetPosition: (d) => [d.nearest_x, d.nearest_y], | |
| getSourceColor: (d) => [66, 135, 245], | |
| getTargetColor: (d) => [252, 58, 84], | |
| getWidth: 4, | |
| pickable: false, | |
| }); | |
| const province_boundary = new deck.GeoJsonLayer({ | |
| id: "GeoJsonLayer", | |
| data: "data/common/province_admin_diva_sim.geojson", | |
| pickable: false, | |
| getLineColor: [0, 0, 0], | |
| getLineWidth: 200, | |
| getFillColor: [255, 255, 255, 0], | |
| }); | |
| // Initialize Deck.GL | |
| const deckInstance = new deck.DeckGL({ | |
| initialViewState: INIT_VIEW_STATE, | |
| container: "map", | |
| mapStyle: | |
| "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", | |
| controller: { doubleClickZoom: true, inertia: true }, | |
| onViewStateChange: (e) => { | |
| viewState = e.viewState; | |
| }, | |
| //getTooltip: ({object}) => object && object.name, | |
| getTooltip, | |
| layers: [ | |
| province_boundary, | |
| firm_dis_arc, | |
| province_layer_centroid, | |
| layer, | |
| ], | |
| }); | |
| function getTooltip({ object }) { | |
| return ( | |
| object && { | |
| html: `<h2 class="text-black">Place: ${object.name}</h2>`, | |
| className: "rounded-lg shadow-lg", | |
| style: { | |
| backgroundColor: "#fff", | |
| fontSize: "0.8em", | |
| }, | |
| } | |
| ); | |
| } | |
| function rotateCameraRight() { | |
| initialViewState = { | |
| ...viewState, | |
| bearing: viewState.bearing - 20, | |
| transitionDuration: 10000, | |
| transitionInterpolator: new deck.LinearInterpolator(["bearing"]), | |
| onTransitionEnd: rotateCameraLeft, | |
| }; | |
| deckInstance.setProps({ initialViewState }); | |
| } | |
| function rotateCameraLeft() { | |
| initialViewState = { | |
| ...viewState, | |
| bearing: viewState.bearing + 20, | |
| transitionDuration: 10000, | |
| transitionInterpolator: new deck.LinearInterpolator(["bearing"]), | |
| onTransitionEnd: rotateCameraRight, | |
| }; | |
| deckInstance.setProps({ initialViewState }); | |
| } | |
| function resetCameraPosition() { | |
| deckInstance.setProps({ | |
| initialViewState: { | |
| ...INIT_VIEW_STATE, | |
| transitionInterpolator: new deck.FlyToInterpolator({ speed: 2 }), | |
| transitionDuration: "auto", | |
| }, | |
| }); | |
| } | |
| const resetButton = document.querySelector("#resetViewButton"); | |
| resetButton.addEventListener("click", () => { | |
| resetCameraPosition(); | |
| }); | |
| tippy("#resetViewButton", { | |
| content: "Reset View", | |
| placement: "left", | |
| }); | |
| const animateButton = document.querySelector("#animateButton"); | |
| animateButton.addEventListener("click", () => { | |
| rotateCameraLeft(); | |
| }); | |
| tippy("#animateButton", { | |
| content: "Animate View", | |
| placement: "left", | |
| }); | |
| tippy("#goOverView", { | |
| content: "FIRM Overview", | |
| placement: "left", | |
| }); | |
| tippy("#goLocation", { | |
| content: "Location-Based", | |
| placement: "left", | |
| }); | |
| tippy("#goForecast", { | |
| content: "Forecasting", | |
| placement: "left", | |
| }); | |
| </script> | |
| <script> | |
| // First Chart.js Configuration | |
| const ctx = document.getElementById("DQCBarChart").getContext("2d"); | |
| const myChart = new Chart(ctx, { | |
| type: "bar", | |
| data: { | |
| labels: [ | |
| "Cash Flow from investing activities", | |
| "Cash flow from operating activities", | |
| "Trade and other receivables", | |
| "Total current liabilities", | |
| "Total debts", | |
| "Total assets", | |
| "Cash Flow from Financing Activities", | |
| "Inventories", | |
| "Total cost", | |
| "Revenue", | |
| "Profit", | |
| "Cost of Revenue", | |
| "Cash and cash equivalents", | |
| ], | |
| datasets: [ | |
| { | |
| label: "Wind", | |
| data: [ | |
| -0.2422706118363361, 0.0944654213932851, 0.10946664573317823, | |
| -0.2635881587808216, 1.6468128742085861, 1.81343360114032, | |
| 0.6844300257725531, -0.7277852127157011, 2.2367857616664835, | |
| 2.488924354367551, 0.106834547304031, 1.1691284243686468, | |
| 0.885037040855672, | |
| ], | |
| }, | |
| { | |
| label: "Flood", | |
| data: [ | |
| 0.8600522301934065, -0.5588222574508711, -0.06795048991347222, | |
| 0.8115310593522213, 5.861538708787576, 5.460325579030252, | |
| 8.377749342537179, 1.3362524044153352, -2.7475583580473337, | |
| -3.9853109972001706, -0.9466984525926432, -3.385174369728646, | |
| 3.9789016460835334, | |
| ], | |
| }, | |
| { | |
| label: "Pollution", | |
| data: [ | |
| 2.1933516572229355, -2.4879927846021577, -0.6000178704859911, | |
| -6.396226349326616, 2.3073451589071494, 0.3808370479344142, | |
| 8.911713608602666, -2.6315086036282316, -15.640730983677106, | |
| -20.120868745704833, -3.2905810349601716, -11.649785403267158, | |
| -0.22138555929730494, | |
| ], | |
| }, | |
| ], | |
| }, | |
| options: { | |
| indexAxis: "y", | |
| scales: { | |
| x: { | |
| stacked: true, | |
| title: { | |
| display: true, | |
| text: "Potential Impact (M.THB)", | |
| }, | |
| }, | |
| y: { | |
| stacked: true, | |
| }, | |
| }, | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| labels: { | |
| // This more specific font property overrides the global property | |
| font: { | |
| size: 16, | |
| color: "rgb(0, 0, 0)", | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| }); | |
| // Second Chart.js Configuration | |
| const ctx2 = document.getElementById("dLinearChart").getContext("2d"); | |
| const myChart2 = new Chart(ctx2, { | |
| type: "line", | |
| data: { | |
| labels: ["2018", "2019", "2020", "2021", "2022", "2023"], | |
| datasets: [ | |
| { | |
| label: "Wind", | |
| data: [ | |
| 11.349588236860292, 101.0963775457162, 162.01327277250004, | |
| 132.45610317862463, 157.62608925639108, 251.60793283708682, | |
| ], | |
| backgroundColor: "rgba(255, 105, 105, 0.2)", | |
| borderColor: "rgba(255, 105, 105, 1)", | |
| borderWidth: 1, | |
| fill: true, | |
| }, | |
| { | |
| label: "Flood", | |
| data: [ | |
| 22.406498185854037, 13.110608395699153, 93.24722895737878, | |
| 125.18428792817156, 94.9681724109333, 90.2725237103977, | |
| ], | |
| backgroundColor: "rgba(118, 77, 255, 0.2)", | |
| borderColor: "rgba(118, 77, 255, 1)", | |
| borderWidth: 1, | |
| fill: true, | |
| }, | |
| { | |
| label: "Air Pollution", | |
| data: [ | |
| 0.0, 43.43953701671832, 72.33746458491377, 18.70575997192916, | |
| 21.063430673179404, 36.01993483269402, | |
| ], | |
| backgroundColor: "rgba(112, 112, 112, 0.2)", | |
| borderColor: "rgba(112, 112, 112, 1)", | |
| borderWidth: 1, | |
| fill: true, | |
| }, | |
| ], | |
| }, | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| title: { | |
| display: true, | |
| text: "Count (Times)", | |
| }, | |
| }, | |
| }, | |
| plugins: { | |
| legend: { | |
| labels: { | |
| // This more specific font property overrides the global property | |
| font: { | |
| size: 14, | |
| color: "rgb(0, 0, 0)", | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| }); | |
| const ctx3 = document.getElementById("DAPRadarChart").getContext("2d"); | |
| const myChart3 = new Chart(ctx3, { | |
| type: "radar", | |
| data: { | |
| labels: [ | |
| "Inventories", | |
| "Total debts", | |
| "Profit", | |
| "Revenue", | |
| "Total assets", | |
| ], | |
| datasets: [ | |
| { | |
| label: "Wind", | |
| data: [ | |
| 0.09228310871019875, 0.4131043958522932, 0.2905541600731763, | |
| 0.3482483885150638, 0.3605794167223425, | |
| ], | |
| fill: true, | |
| backgroundColor: "rgba(255, 105, 105, 0.2)", | |
| borderColor: "rgb(255, 105, 105)", | |
| pointBackgroundColor: "rgb(255, 105, 105)", | |
| pointBorderColor: "#fff", | |
| pointHoverBackgroundColor: "#fff", | |
| pointHoverBorderColor: "rgb(255, 105, 105)", | |
| }, | |
| { | |
| label: "Flood", | |
| data: [ | |
| 0.43508697798242224, 0.38063025794277516, 0.1759184017105713, | |
| 0.0994554869665615, 0.452150773661031, | |
| ], | |
| fill: true, | |
| backgroundColor: "rgba(118, 77, 255, 0.2)", | |
| borderColor: "rgb(118, 77, 255)", | |
| pointBackgroundColor: "rgb(118, 77, 255)", | |
| pointBorderColor: "#fff", | |
| pointHoverBackgroundColor: "#fff", | |
| pointHoverBorderColor: "rgb(118, 77, 255)", | |
| }, | |
| { | |
| label: "Air Pollution", | |
| data: [ | |
| 0.47262991330737897, 0.20626534620493175, 0.5335274382162524, | |
| 0.5522961245183747, 0.18726980961662648, | |
| ], | |
| fill: true, | |
| backgroundColor: "rgba(112, 112, 112, 0.2)", | |
| borderColor: "rgb(112, 112, 112)", | |
| pointBackgroundColor: "rgb(112, 112, 112)", | |
| pointBorderColor: "#fff", | |
| pointHoverBackgroundColor: "#fff", | |
| pointHoverBorderColor: "rgb(112, 112, 112)", | |
| }, | |
| ], | |
| }, | |
| options: { | |
| elements: { | |
| line: { | |
| borderWidth: 3, | |
| }, | |
| }, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true, | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 0.6 | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| labels: { | |
| // This more specific font property overrides the global property | |
| font: { | |
| size: 14, | |
| color: "rgb(0, 0, 0)", | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| }); | |
| </script> | |
| </body> | |
| </html> | |