Hugging Face's logo

Spaces:
thanthamky
/
kepler-showcase
Running

App Files Community
kepler-showcase / forecast.html
thanthamky's picture
thanthamky
Upload 2 files
1405f6b verified
raw
history blame contribute delete
115 kB
 <!DOCTYPE html>
<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">
Forecast Disaster to FIRM
</h1>
<!-- Disaster Forecasting Chart-->
<h1 class="text-l font-bold mb-4">Disaster Occurrence Predictions</h1>
<canvas id="disasterLineChart"></canvas>
<!-- LAYER CONTROL -->
<h2 class="text-l font-bold mt-8 mb-4">
Show Forecasted 10 Years Disaster Intensity
</h2>
<div id="boxContainer" class="grid grid-cols-3 gap-4 mt-4 mb-8">
<div
class="box flex items-center p-4 border rounded-lg cursor-pointer transition-all duration-300 bg-white"
data-id="wind"
>
<div class="icon bg-gray-200 p-2 rounded-full mr-4">
<img
src="static/icon/wind.png"
alt="Icon 2"
class="h-6 w-6 rounded-full"
/>
</div>
<h1 class="text-lg font-semibold">Wind</h1>
</div>
<div
class="box flex items-center p-4 bg-white border rounded-lg cursor-pointer transition-all duration-300"
data-id="flood"
>
<div class="icon bg-gray-200 p-2 rounded-full mr-4">
<img
src="static/icon/flood.png"
alt="Icon 2"
class="h-6 w-6 rounded-full"
/>
</div>
<h1 class="text-lg font-semibold">Flood</h1>
</div>
<div
class="box flex items-center p-4 bg-white border rounded-lg cursor-pointer transition-all duration-300"
data-id="pm"
>
<div class="icon bg-gray-200 p-2 rounded-full mr-4">
<img
src="static/icon/pm.png"
alt="Icon 2"
class="h-6 w-6 rounded-full"
/>
</div>
<h1 class="text-lg font-semibold">Air Pollution</h1>
</div>
</div>
<!-- Forecasted Wind Years -->
<h1 class="text-l font-bold mb-4 mt-8">
Predicted Finance Changes (All Disaster)
</h1>
<canvas id="disasterForecastChart" height="300px"></canvas>
<!-- Top 5 Location Impact to Wind -->
<h2 class="text-l font-bold mt-8 mb-4">
Top 5 Locations Most Affected by Wind in 10 Years
</h2>
<div
class="w-full max-w-4xl backdrop-blur-sm shadow-lg rounded-xl p-4 overflow-x-auto"
>
<table class="min-w-full table-auto">
<thead>
<tr class="bg-gray-200 text-left">
<th class="p-4 font-bold text-gray-600">Top</th>
<th class="p-4 font-bold text-gray-600">Branch</th>
<th class="p-4 font-bold text-gray-600">Score</th>
</tr>
</thead>
<tbody>
<tr class="border-b cursor-pointer hover:bg-red-400 bg-red-300">
<td class="p-4">1</td>
<td class="p-4">HomePro Phetchabun Branch</td>
<td class="p-4">14.04</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-red-400 bg-red-200">
<td class="p-4">2</td>
<td class="p-4">Home Pro Chiang Rai</td>
<td class="p-4">13.52</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-red-400 bg-red-100">
<td class="p-4">3</td>
<td class="p-4">HomePro Nakhon Si Thammarat</td>
<td class="p-4">8.687</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-red-400">
<td class="p-4">4</td>
<td class="p-4">Home Pro (Chiang Mai)</td>
<td class="p-4">8.472</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-red-400">
<td class="p-4">5</td>
<td class="p-4">Home Pro Khon Kaen</td>
<td class="p-4">7.894</td>
</tr>
</tbody>
</table>
</div>
<!-- Top 5 Location Impact to Flood-->
<h2 class="text-l font-bold mt-8 mb-4">
Top 5 Locations Most Affected by Flood in 10 Years
</h2>
<div
class="w-full max-w-4xl backdrop-blur-sm shadow-lg rounded-xl p-4 overflow-x-auto"
>
<table class="min-w-full table-auto">
<thead>
<tr class="bg-gray-200 text-left">
<th class="p-4 font-bold text-gray-600">Top</th>
<th class="p-4 font-bold text-gray-600">Branch</th>
<th class="p-4 font-bold text-gray-600">Score</th>
</tr>
</thead>
<tbody>
<tr class="border-b cursor-pointer hover:bg-blue-200 bg-blue-300">
<td class="p-4">1</td>
<td class="p-4">HomePro (San Sai)</td>
<td class="p-4">6.311</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-blue-200 bg-blue-200">
<td class="p-4">2</td>
<td class="p-4">Home Pro (Chiang Mai Hangdong)</td>
<td class="p-4">7.006</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-blue-200 bg-blue-100">
<td class="p-4">3</td>
<td class="p-4">HomePro Nakhon Si Thammarat</td>
<td class="p-4">8.687</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-blue-200">
<td class="p-4">4</td>
<td class="p-4">HomePro</td>
<td class="p-4">4.392</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-blue-200">
<td class="p-4">5</td>
<td class="p-4">Home Pro (Samui)</td>
<td class="p-4">6.121</td>
</tr>
</tbody>
</table>
</div>
<!-- Top 5 Location Impact to PM-->
<h2 class="text-l font-bold mt-8 mb-4">
Top 5 Locations Most Affected by Air Pollution in 10 Years
</h2>
<div
class="w-full max-w-4xl backdrop-blur-sm shadow-lg rounded-xl p-4 overflow-x-auto"
>
<table class="min-w-full table-auto">
<thead>
<tr class="bg-gray-200 text-left">
<th class="p-4 font-bold text-gray-600">Top</th>
<th class="p-4 font-bold text-gray-600">Branch</th>
<th class="p-4 font-bold text-gray-600">Score</th>
</tr>
</thead>
<tbody>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">1</td>
<td class="p-4">HomePro</td>
<td class="p-4">4.392</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-200">
<td class="p-4">2</td>
<td class="p-4">Home Pro (Ayutthaya)</td>
<td class="p-4">1.467</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-100">
<td class="p-4">3</td>
<td class="p-4">HomePro Rangsit Klong Si</td>
<td class="p-4">1.277</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200">
<td class="p-4">4</td>
<td class="p-4">Home Pro the distribution center</td>
<td class="p-4">1.130</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200">
<td class="p-4">5</td>
<td class="p-4">Home Pro (Future Park Rangsit)</td>
<td class="p-4">1.379</td>
</tr>
</tbody>
</table>
</div>
<!-- ALL LOCATIONS -->
<h2 class="text-l font-bold mt-8 mb-4">
All Locations Finance in 10 Years
</h2>
<div
class="w-full max-w-4xl backdrop-blur-sm shadow-lg rounded-xl p-4 overflow-x-auto max-h-screen"
>
<table class="min-w-full table-auto">
<thead class="sticky top-0">
<tr class="bg-gray-200 text-left">
<th class="p-4 font-bold text-gray-600">Order</th>
<th class="p-4 font-bold text-gray-600">Branch</th>
<th class="p-4 font-bold text-gray-600">Cash Flow from investing activities</th>
<th class="p-4 font-bold text-gray-600">Cash flow from operating activities</th>
<th class="p-4 font-bold text-gray-600">Trade and other receivables</th>
<th class="p-4 font-bold text-gray-600">Total current liabilities</th>
<th class="p-4 font-bold text-gray-600">Total debts</th>
<th class="p-4 font-bold text-gray-600">Total assets</th>
<th class="p-4 font-bold text-gray-600">Cash Flow from Financing Activities</th>
<th class="p-4 font-bold text-gray-600">Inventories</th>
<th class="p-4 font-bold text-gray-600">Total cost</th>
<th class="p-4 font-bold text-gray-600">Revenue</th>
<th class="p-4 font-bold text-gray-600">Profit</th>
<th class="p-4 font-bold text-gray-600">Cost of Revenue</th>
<th class="p-4 font-bold text-gray-600">Cash and cash equivalents</th>
</tr>
</thead>
<tbody class="overflow-y-auto">
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">1</td>
<td class="p-4">HomePro Rama 2</td>
<td class="p-4">-456.090</td>
<td class="p-4">181.435</td>
<td class="p-4">13.435</td>
<td class="p-4">-468.180</td>
<td class="p-4">218.935</td>
<td class="p-4">-661.297</td>
<td class="p-4">647.677</td>
<td class="p-4">837.006</td>
<td class="p-4">579.944</td>
<td class="p-4">203.459</td>
<td class="p-4">147.558</td>
<td class="p-4">-163.608</td>
<td class="p-4">-1167.777</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">2</td>
<td class="p-4">HomePro Sukhapiban 3</td>
<td class="p-4">-460.082</td>
<td class="p-4">180.681</td>
<td class="p-4">13.314</td>
<td class="p-4">-474.106</td>
<td class="p-4">217.703</td>
<td class="p-4">-667.147</td>
<td class="p-4">647.840</td>
<td class="p-4">835.385</td>
<td class="p-4">578.135</td>
<td class="p-4">203.697</td>
<td class="p-4">147.600</td>
<td class="p-4">-163.797</td>
<td class="p-4">-1173.930</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">3</td>
<td class="p-4">Home Pro (Hua Hin)</td>
<td class="p-4">-459.232</td>
<td class="p-4">178.784</td>
<td class="p-4">13.314</td>
<td class="p-4">-471.885</td>
<td class="p-4">215.491</td>
<td class="p-4">-664.675</td>
<td class="p-4">646.643</td>
<td class="p-4">833.824</td>
<td class="p-4">577.326</td>
<td class="p-4">203.035</td>
<td class="p-4">147.105</td>
<td class="p-4">-163.624</td>
<td class="p-4">-1171.267</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">4</td>
<td class="p-4">Home Pro Lopburi</td>
<td class="p-4">-460.292</td>
<td class="p-4">177.762</td>
<td class="p-4">13.145</td>
<td class="p-4">-473.189</td>
<td class="p-4">213.451</td>
<td class="p-4">-665.495</td>
<td class="p-4">643.924</td>
<td class="p-4">828.657</td>
<td class="p-4">573.204</td>
<td class="p-4">202.283</td>
<td class="p-4">146.499</td>
<td class="p-4">-163.162</td>
<td class="p-4">-1170.659</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">5</td>
<td class="p-4">Home Pro</td>
<td class="p-4">-457.547</td>
<td class="p-4">181.016</td>
<td class="p-4">13.288</td>
<td class="p-4">-470.365</td>
<td class="p-4">217.736</td>
<td class="p-4">-663.152</td>
<td class="p-4">645.827</td>
<td class="p-4">833.120</td>
<td class="p-4">576.683</td>
<td class="p-4">203.049</td>
<td class="p-4">147.202</td>
<td class="p-4">-163.303</td>
<td class="p-4">-1168.575</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">6</td>
<td class="p-4">Home Pro</td>
<td class="p-4">-457.052</td>
<td class="p-4">181.089</td>
<td class="p-4">13.307</td>
<td class="p-4">-469.617</td>
<td class="p-4">217.887</td>
<td class="p-4">-662.421</td>
<td class="p-4">645.867</td>
<td class="p-4">833.427</td>
<td class="p-4">576.996</td>
<td class="p-4">203.031</td>
<td class="p-4">147.206</td>
<td class="p-4">-163.293</td>
<td class="p-4">-1167.851</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">7</td>
<td class="p-4">Home Pro (Lad Phrao)</td>
<td class="p-4">-459.085</td>
<td class="p-4">180.487</td>
<td class="p-4">13.238</td>
<td class="p-4">-472.538</td>
<td class="p-4">216.968</td>
<td class="p-4">-665.261</td>
<td class="p-4">645.736</td>
<td class="p-4">832.240</td>
<td class="p-4">575.821</td>
<td class="p-4">203.065</td>
<td class="p-4">147.159</td>
<td class="p-4">-163.356</td>
<td class="p-4">-1170.774</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">8</td>
<td class="p-4">Home Pro Changwattana Branch</td>
<td class="p-4">-459.143</td>
<td class="p-4">179.695</td>
<td class="p-4">13.155</td>
<td class="p-4">-472.322</td>
<td class="p-4">215.604</td>
<td class="p-4">-664.742</td>
<td class="p-4">644.003</td>
<td class="p-4">829.256</td>
<td class="p-4">573.560</td>
<td class="p-4">202.515</td>
<td class="p-4">146.737</td>
<td class="p-4">-163.050</td>
<td class="p-4">-1169.390</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">9</td>
<td class="p-4">HOMEPRO VILLAGE SUVARNABHUMI</td>
<td class="p-4">-454.112</td>
<td class="p-4">181.563</td>
<td class="p-4">13.361</td>
<td class="p-4">-465.245</td>
<td class="p-4">218.504</td>
<td class="p-4">-658.000</td>
<td class="p-4">645.091</td>
<td class="p-4">833.491</td>
<td class="p-4">577.441</td>
<td class="p-4">202.680</td>
<td class="p-4">147.043</td>
<td class="p-4">-163.026</td>
<td class="p-4">-1162.817</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">10</td>
<td class="p-4">Home Pro</td>
<td class="p-4">-457.816</td>
<td class="p-4">180.506</td>
<td class="p-4">13.394</td>
<td class="p-4">-470.444</td>
<td class="p-4">217.785</td>
<td class="p-4">-663.504</td>
<td class="p-4">647.748</td>
<td class="p-4">836.337</td>
<td class="p-4">579.282</td>
<td class="p-4">203.468</td>
<td class="p-4">147.497</td>
<td class="p-4">-163.719</td>
<td class="p-4">-1170.294</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">11</td>
<td class="p-4">Homepro Rachapreuk</td>
<td class="p-4">-458.376</td>
<td class="p-4">180.739</td>
<td class="p-4">13.262</td>
<td class="p-4">-471.540</td>
<td class="p-4">217.336</td>
<td class="p-4">-664.295</td>
<td class="p-4">645.795</td>
<td class="p-4">832.676</td>
<td class="p-4">576.241</td>
<td class="p-4">203.063</td>
<td class="p-4">147.183</td>
<td class="p-4">-163.335</td>
<td class="p-4">-1169.775</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">12</td>
<td class="p-4">HomePro</td>
<td class="p-4">-455.433</td>
<td class="p-4">181.522</td>
<td class="p-4">13.339</td>
<td class="p-4">-467.289</td>
<td class="p-4">218.435</td>
<td class="p-4">-660.089</td>
<td class="p-4">645.539</td>
<td class="p-4">833.625</td>
<td class="p-4">577.344</td>
<td class="p-4">202.889</td>
<td class="p-4">147.157</td>
<td class="p-4">-163.157</td>
<td class="p-4">-1165.193</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">13</td>
<td class="p-4">Home Pro Ratchadapisek</td>
<td class="p-4">-458.738</td>
<td class="p-4">180.909</td>
<td class="p-4">13.262</td>
<td class="p-4">-472.180</td>
<td class="p-4">217.559</td>
<td class="p-4">-664.983</td>
<td class="p-4">646.096</td>
<td class="p-4">833.012</td>
<td class="p-4">576.424</td>
<td class="p-4">203.193</td>
<td class="p-4">147.271</td>
<td class="p-4">-163.397</td>
<td class="p-4">-1170.601</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">14</td>
<td class="p-4">HomePro Pleonjit</td>
<td class="p-4">-459.058</td>
<td class="p-4">180.916</td>
<td class="p-4">13.273</td>
<td class="p-4">-472.669</td>
<td class="p-4">217.650</td>
<td class="p-4">-665.529</td>
<td class="p-4">646.490</td>
<td class="p-4">833.537</td>
<td class="p-4">576.790</td>
<td class="p-4">203.317</td>
<td class="p-4">147.354</td>
<td class="p-4">-163.485</td>
<td class="p-4">-1171.392</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">15</td>
<td class="p-4">HomePro Nakhon Si Thammarat</td>
<td class="p-4">-440.407</td>
<td class="p-4">179.264</td>
<td class="p-4">14.071</td>
<td class="p-4">-442.313</td>
<td class="p-4">218.912</td>
<td class="p-4">-635.705</td>
<td class="p-4">648.281</td>
<td class="p-4">845.791</td>
<td class="p-4">589.780</td>
<td class="p-4">202.031</td>
<td class="p-4">146.943</td>
<td class="p-4">-163.365</td>
<td class="p-4">-1143.312</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">16</td>
<td class="p-4">Homepro Pisanulok</td>
<td class="p-4">-456.044</td>
<td class="p-4">179.360</td>
<td class="p-4">13.688</td>
<td class="p-4">-466.896</td>
<td class="p-4">218.039</td>
<td class="p-4">-660.531</td>
<td class="p-4">651.559</td>
<td class="p-4">843.846</td>
<td class="p-4">585.722</td>
<td class="p-4">204.096</td>
<td class="p-4">147.998</td>
<td class="p-4">-164.483</td>
<td class="p-4">-1170.087</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">17</td>
<td class="p-4">HomePro </td>
<td class="p-4">-450.752</td>
<td class="p-4">179.168</td>
<td class="p-4">13.609</td>
<td class="p-4">-458.684</td>
<td class="p-4">216.957</td>
<td class="p-4">-651.631</td>
<td class="p-4">646.597</td>
<td class="p-4">837.850</td>
<td class="p-4">581.823</td>
<td class="p-4">202.414</td>
<td class="p-4">146.910</td>
<td class="p-4">-163.342</td>
<td class="p-4">-1158.133</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">18</td>
<td class="p-4">HomePro Paechgaseam</td>
<td class="p-4">-457.357</td>
<td class="p-4">181.661</td>
<td class="p-4">13.377</td>
<td class="p-4">-470.300</td>
<td class="p-4">218.959</td>
<td class="p-4">-663.382</td>
<td class="p-4">647.533</td>
<td class="p-4">836.129</td>
<td class="p-4">579.008</td>
<td class="p-4">203.559</td>
<td class="p-4">147.597</td>
<td class="p-4">-163.607</td>
<td class="p-4">-1169.696</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">19</td>
<td class="p-4">Homepro Nakornphatom</td>
<td class="p-4">-457.770</td>
<td class="p-4">181.233</td>
<td class="p-4">13.419</td>
<td class="p-4">-470.698</td>
<td class="p-4">218.750</td>
<td class="p-4">-663.894</td>
<td class="p-4">648.427</td>
<td class="p-4">837.497</td>
<td class="p-4">580.098</td>
<td class="p-4">203.747</td>
<td class="p-4">147.716</td>
<td class="p-4">-163.818</td>
<td class="p-4">-1170.899</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">20</td>
<td class="p-4">HomePro Nakhon Ratchasima (The Mall)</td>
<td class="p-4">-459.962</td>
<td class="p-4">179.943</td>
<td class="p-4">13.451</td>
<td class="p-4">-473.447</td>
<td class="p-4">217.644</td>
<td class="p-4">-666.795</td>
<td class="p-4">650.003</td>
<td class="p-4">839.220</td>
<td class="p-4">581.323</td>
<td class="p-4">204.110</td>
<td class="p-4">147.898</td>
<td class="p-4">-164.261</td>
<td class="p-4">-1175.168</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">21</td>
<td class="p-4">Home Pro Lam Luk Ka</td>
<td class="p-4">-459.053</td>
<td class="p-4">178.024</td>
<td class="p-4">12.831</td>
<td class="p-4">-471.673</td>
<td class="p-4">211.849</td>
<td class="p-4">-663.011</td>
<td class="p-4">637.487</td>
<td class="p-4">818.115</td>
<td class="p-4">564.968</td>
<td class="p-4">200.626</td>
<td class="p-4">145.313</td>
<td class="p-4">-161.827</td>
<td class="p-4">-1164.026</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">22</td>
<td class="p-4">Homepro Village</td>
<td class="p-4">-457.565</td>
<td class="p-4">180.005</td>
<td class="p-4">13.574</td>
<td class="p-4">-469.658</td>
<td class="p-4">218.229</td>
<td class="p-4">-663.158</td>
<td class="p-4">650.685</td>
<td class="p-4">841.563</td>
<td class="p-4">583.561</td>
<td class="p-4">204.100</td>
<td class="p-4">147.965</td>
<td class="p-4">-164.323</td>
<td class="p-4">-1171.959</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">23</td>
<td class="p-4">HomePro Buri Ram</td>
<td class="p-4">-459.843</td>
<td class="p-4">180.008</td>
<td class="p-4">13.426</td>
<td class="p-4">-473.316</td>
<td class="p-4">217.565</td>
<td class="p-4">-666.591</td>
<td class="p-4">649.493</td>
<td class="p-4">838.392</td>
<td class="p-4">580.673</td>
<td class="p-4">203.984</td>
<td class="p-4">147.809</td>
<td class="p-4">-164.153</td>
<td class="p-4">-1174.621</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">24</td>
<td class="p-4">Home Pro (Meka bangna)</td>
<td class="p-4">-454.749</td>
<td class="p-4">181.695</td>
<td class="p-4">13.289</td>
<td class="p-4">-466.357</td>
<td class="p-4">218.292</td>
<td class="p-4">-658.975</td>
<td class="p-4">644.245</td>
<td class="p-4">831.712</td>
<td class="p-4">575.903</td>
<td class="p-4">202.541</td>
<td class="p-4">146.922</td>
<td class="p-4">-162.870</td>
<td class="p-4">-1163.212</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">25</td>
<td class="p-4">Home Pro (Head office)</td>
<td class="p-4">-459.058</td>
<td class="p-4">180.325</td>
<td class="p-4">13.273</td>
<td class="p-4">-472.387</td>
<td class="p-4">216.985</td>
<td class="p-4">-665.192</td>
<td class="p-4">646.304</td>
<td class="p-4">833.244</td>
<td class="p-4">576.650</td>
<td class="p-4">203.178</td>
<td class="p-4">147.241</td>
<td class="p-4">-163.477</td>
<td class="p-4">-1171.113</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">26</td>
<td class="p-4">Home Pro (Sakon Nakon)</td>
<td class="p-4">-453.288</td>
<td class="p-4">178.973</td>
<td class="p-4">13.801</td>
<td class="p-4">-462.347</td>
<td class="p-4">218.032</td>
<td class="p-4">-656.032</td>
<td class="p-4">651.675</td>
<td class="p-4">845.408</td>
<td class="p-4">587.466</td>
<td class="p-4">203.847</td>
<td class="p-4">147.891</td>
<td class="p-4">-164.442</td>
<td class="p-4">-1165.794</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">27</td>
<td class="p-4">Home Pro (Krabi)</td>
<td class="p-4">-452.860</td>
<td class="p-4">180.374</td>
<td class="p-4">13.640</td>
<td class="p-4">-462.495</td>
<td class="p-4">218.664</td>
<td class="p-4">-655.822</td>
<td class="p-4">648.954</td>
<td class="p-4">840.839</td>
<td class="p-4">583.677</td>
<td class="p-4">203.355</td>
<td class="p-4">147.562</td>
<td class="p-4">-163.818</td>
<td class="p-4">-1163.447</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">28</td>
<td class="p-4">Home Pro (Chachoengsao)</td>
<td class="p-4">-458.652</td>
<td class="p-4">178.841</td>
<td class="p-4">13.056</td>
<td class="p-4">-471.244</td>
<td class="p-4">214.031</td>
<td class="p-4">-663.260</td>
<td class="p-4">641.587</td>
<td class="p-4">825.360</td>
<td class="p-4">570.671</td>
<td class="p-4">201.742</td>
<td class="p-4">146.165</td>
<td class="p-4">-162.594</td>
<td class="p-4">-1166.634</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">29</td>
<td class="p-4">Home Pro (Chonburi)</td>
<td class="p-4">-457.053</td>
<td class="p-4">179.579</td>
<td class="p-4">13.510</td>
<td class="p-4">-468.720</td>
<td class="p-4">217.341</td>
<td class="p-4">-661.955</td>
<td class="p-4">649.043</td>
<td class="p-4">838.994</td>
<td class="p-4">581.665</td>
<td class="p-4">203.584</td>
<td class="p-4">147.591</td>
<td class="p-4">-164.000</td>
<td class="p-4">-1169.845</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">30</td>
<td class="p-4">Home Pro (Prachachuen)</td>
<td class="p-4">-459.394</td>
<td class="p-4">180.318</td>
<td class="p-4">13.179</td>
<td class="p-4">-472.988</td>
<td class="p-4">216.464</td>
<td class="p-4">-665.555</td>
<td class="p-4">644.808</td>
<td class="p-4">830.495</td>
<td class="p-4">574.409</td>
<td class="p-4">202.832</td>
<td class="p-4">146.974</td>
<td class="p-4">-163.188</td>
<td class="p-4">-1170.527</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">31</td>
<td class="p-4">Home Pro (Pattaya)</td>
<td class="p-4">-456.358</td>
<td class="p-4">180.066</td>
<td class="p-4">13.454</td>
<td class="p-4">-467.925</td>
<td class="p-4">217.519</td>
<td class="p-4">-660.990</td>
<td class="p-4">647.740</td>
<td class="p-4">837.054</td>
<td class="p-4">580.155</td>
<td class="p-4">203.282</td>
<td class="p-4">147.396</td>
<td class="p-4">-163.695</td>
<td class="p-4">-1167.915</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">32</td>
<td class="p-4">Home Pro (Paradise Park)</td>
<td class="p-4">-458.561</td>
<td class="p-4">180.589</td>
<td class="p-4">13.316</td>
<td class="p-4">-471.707</td>
<td class="p-4">217.490</td>
<td class="p-4">-664.616</td>
<td class="p-4">646.844</td>
<td class="p-4">834.407</td>
<td class="p-4">577.613</td>
<td class="p-4">203.315</td>
<td class="p-4">147.362</td>
<td class="p-4">-163.557</td>
<td class="p-4">-1170.804</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">33</td>
<td class="p-4">Home Pro (Future Mart Rama3)</td>
<td class="p-4">-458.016</td>
<td class="p-4">180.564</td>
<td class="p-4">13.321</td>
<td class="p-4">-470.847</td>
<td class="p-4">217.446</td>
<td class="p-4">-663.721</td>
<td class="p-4">646.569</td>
<td class="p-4">834.197</td>
<td class="p-4">577.537</td>
<td class="p-4">203.199</td>
<td class="p-4">147.292</td>
<td class="p-4">-163.487</td>
<td class="p-4">-1169.745</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">34</td>
<td class="p-4">Home Pro (Phuket)</td>
<td class="p-4">-459.469</td>
<td class="p-4">180.321</td>
<td class="p-4">13.490</td>
<td class="p-4">-472.830</td>
<td class="p-4">218.255</td>
<td class="p-4">-666.282</td>
<td class="p-4">650.513</td>
<td class="p-4">840.323</td>
<td class="p-4">582.220</td>
<td class="p-4">204.257</td>
<td class="p-4">148.028</td>
<td class="p-4">-164.330</td>
<td class="p-4">-1174.869</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">35</td>
<td class="p-4">Home Pro (Phuket, Chalong)</td>
<td class="p-4">-458.734</td>
<td class="p-4">180.263</td>
<td class="p-4">13.514</td>
<td class="p-4">-471.642</td>
<td class="p-4">218.273</td>
<td class="p-4">-665.097</td>
<td class="p-4">650.459</td>
<td class="p-4">840.591</td>
<td class="p-4">582.560</td>
<td class="p-4">204.176</td>
<td class="p-4">147.990</td>
<td class="p-4">-164.300</td>
<td class="p-4">-1173.672</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">36</td>
<td class="p-4">Home Pro (Roi Et)</td>
<td class="p-4">-455.979</td>
<td class="p-4">178.363</td>
<td class="p-4">13.369</td>
<td class="p-4">-466.603</td>
<td class="p-4">215.080</td>
<td class="p-4">-659.236</td>
<td class="p-4">645.384</td>
<td class="p-4">833.250</td>
<td class="p-4">577.454</td>
<td class="p-4">202.400</td>
<td class="p-4">146.726</td>
<td class="p-4">-163.296</td>
<td class="p-4">-1165.175</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">37</td>
<td class="p-4">Home Pro (Future Park Rangsit)</td>
<td class="p-4">-459.030</td>
<td class="p-4">177.632</td>
<td class="p-4">12.801</td>
<td class="p-4">-471.478</td>
<td class="p-4">211.233</td>
<td class="p-4">-662.692</td>
<td class="p-4">636.796</td>
<td class="p-4">816.952</td>
<td class="p-4">564.107</td>
<td class="p-4">200.391</td>
<td class="p-4">145.133</td>
<td class="p-4">-161.707</td>
<td class="p-4">-1163.385</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">38</td>
<td class="p-4">Home Pro (Rattanathibet)</td>
<td class="p-4">-458.442</td>
<td class="p-4">181.314</td>
<td class="p-4">13.245</td>
<td class="p-4">-471.930</td>
<td class="p-4">217.896</td>
<td class="p-4">-664.698</td>
<td class="p-4">645.727</td>
<td class="p-4">832.497</td>
<td class="p-4">575.998</td>
<td class="p-4">203.141</td>
<td class="p-4">147.249</td>
<td class="p-4">-163.295</td>
<td class="p-4">-1169.964</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">39</td>
<td class="p-4">Home Pro (Lop Buri)</td>
<td class="p-4">-460.748</td>
<td class="p-4">177.797</td>
<td class="p-4">13.020</td>
<td class="p-4">-474.022</td>
<td class="p-4">212.807</td>
<td class="p-4">-666.015</td>
<td class="p-4">641.952</td>
<td class="p-4">825.024</td>
<td class="p-4">570.232</td>
<td class="p-4">201.835</td>
<td class="p-4">146.153</td>
<td class="p-4">-162.780</td>
<td class="p-4">-1169.917</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">40</td>
<td class="p-4">Home Pro (Samui)</td>
<td class="p-4">-445.926</td>
<td class="p-4">180.041</td>
<td class="p-4">13.845</td>
<td class="p-4">-451.422</td>
<td class="p-4">218.925</td>
<td class="p-4">-644.715</td>
<td class="p-4">648.045</td>
<td class="p-4">842.658</td>
<td class="p-4">586.284</td>
<td class="p-4">202.530</td>
<td class="p-4">147.156</td>
<td class="p-4">-163.445</td>
<td class="p-4">-1151.907</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">41</td>
<td class="p-4">Home Pro (Suphanburi)</td>
<td class="p-4">-460.456</td>
<td class="p-4">177.472</td>
<td class="p-4">12.825</td>
<td class="p-4">-473.587</td>
<td class="p-4">211.300</td>
<td class="p-4">-664.973</td>
<td class="p-4">638.109</td>
<td class="p-4">818.536</td>
<td class="p-4">565.165</td>
<td class="p-4">200.805</td>
<td class="p-4">145.394</td>
<td class="p-4">-162.019</td>
<td class="p-4">-1166.537</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">42</td>
<td class="p-4">Home Pro Suratthani</td>
<td class="p-4">-451.223</td>
<td class="p-4">178.983</td>
<td class="p-4">13.848</td>
<td class="p-4">-459.113</td>
<td class="p-4">218.157</td>
<td class="p-4">-652.759</td>
<td class="p-4">651.200</td>
<td class="p-4">845.590</td>
<td class="p-4">587.939</td>
<td class="p-4">203.567</td>
<td class="p-4">147.746</td>
<td class="p-4">-164.285</td>
<td class="p-4">-1162.231</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">43</td>
<td class="p-4">Home Pro (Suwannabhumi)</td>
<td class="p-4">-453.423</td>
<td class="p-4">181.485</td>
<td class="p-4">13.388</td>
<td class="p-4">-464.118</td>
<td class="p-4">218.518</td>
<td class="p-4">-656.884</td>
<td class="p-4">645.107</td>
<td class="p-4">833.858</td>
<td class="p-4">577.855</td>
<td class="p-4">202.618</td>
<td class="p-4">147.016</td>
<td class="p-4">-163.013</td>
<td class="p-4">-1161.739</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">44</td>
<td class="p-4">Home Pro (Hat Yai)</td>
<td class="p-4">-456.380</td>
<td class="p-4">179.807</td>
<td class="p-4">13.626</td>
<td class="p-4">-467.684</td>
<td class="p-4">218.213</td>
<td class="p-4">-661.212</td>
<td class="p-4">650.794</td>
<td class="p-4">842.337</td>
<td class="p-4">584.397</td>
<td class="p-4">204.002</td>
<td class="p-4">147.925</td>
<td class="p-4">-164.319</td>
<td class="p-4">-1170.149</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">45</td>
<td class="p-4">Home Pro (Ayutthaya)</td>
<td class="p-4">-460.848</td>
<td class="p-4">173.242</td>
<td class="p-4">11.972</td>
<td class="p-4">-472.932</td>
<td class="p-4">201.662</td>
<td class="p-4">-661.540</td>
<td class="p-4">621.437</td>
<td class="p-4">789.728</td>
<td class="p-4">542.832</td>
<td class="p-4">196.029</td>
<td class="p-4">141.774</td>
<td class="p-4">-158.905</td>
<td class="p-4">-1153.790</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">46</td>
<td class="p-4">Home Pro (khao Yai)</td>
<td class="p-4">-456.959</td>
<td class="p-4">179.157</td>
<td class="p-4">13.478</td>
<td class="p-4">-468.401</td>
<td class="p-4">216.675</td>
<td class="p-4">-661.498</td>
<td class="p-4">648.260</td>
<td class="p-4">837.708</td>
<td class="p-4">580.721</td>
<td class="p-4">203.316</td>
<td class="p-4">147.389</td>
<td class="p-4">-163.861</td>
<td class="p-4">-1169.018</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">47</td>
<td class="p-4">Home Pro (Chiang Mai)</td>
<td class="p-4">-446.304</td>
<td class="p-4">175.306</td>
<td class="p-4">13.626</td>
<td class="p-4">-449.945</td>
<td class="p-4">212.344</td>
<td class="p-4">-642.202</td>
<td class="p-4">642.707</td>
<td class="p-4">833.482</td>
<td class="p-4">579.661</td>
<td class="p-4">200.491</td>
<td class="p-4">145.558</td>
<td class="p-4">-162.619</td>
<td class="p-4">-1147.412</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">48</td>
<td class="p-4">Home Pro (Chiang Mai Hangdong)</td>
<td class="p-4">-441.641</td>
<td class="p-4">178.316</td>
<td class="p-4">13.350</td>
<td class="p-4">-444.409</td>
<td class="p-4">213.803</td>
<td class="p-4">-635.776</td>
<td class="p-4">635.656</td>
<td class="p-4">823.406</td>
<td class="p-4">571.911</td>
<td class="p-4">198.841</td>
<td class="p-4">144.526</td>
<td class="p-4">-160.925</td>
<td class="p-4">-1135.655</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">49</td>
<td class="p-4">Home Pro (The mall Bang Khae)</td>
<td class="p-4">-456.511</td>
<td class="p-4">181.299</td>
<td class="p-4">13.441</td>
<td class="p-4">-468.760</td>
<td class="p-4">218.852</td>
<td class="p-4">-661.919</td>
<td class="p-4">648.026</td>
<td class="p-4">837.412</td>
<td class="p-4">580.221</td>
<td class="p-4">203.558</td>
<td class="p-4">147.616</td>
<td class="p-4">-163.697</td>
<td class="p-4">-1168.658</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">50</td>
<td class="p-4">Home Pro (Ekamai-Ramintra)</td>
<td class="p-4">-460.485</td>
<td class="p-4">180.544</td>
<td class="p-4">13.270</td>
<td class="p-4">-474.702</td>
<td class="p-4">217.328</td>
<td class="p-4">-667.640</td>
<td class="p-4">647.260</td>
<td class="p-4">834.192</td>
<td class="p-4">577.143</td>
<td class="p-4">203.563</td>
<td class="p-4">147.487</td>
<td class="p-4">-163.700</td>
<td class="p-4">-1174.093</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">51</td>
<td class="p-4">Home Pro (Fashion Iceland)</td>
<td class="p-4">-459.403</td>
<td class="p-4">179.977</td>
<td class="p-4">13.159</td>
<td class="p-4">-472.855</td>
<td class="p-4">215.966</td>
<td class="p-4">-665.335</td>
<td class="p-4">644.339</td>
<td class="p-4">829.697</td>
<td class="p-4">573.826</td>
<td class="p-4">202.663</td>
<td class="p-4">146.843</td>
<td class="p-4">-163.111</td>
<td class="p-4">-1170.111</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">52</td>
<td class="p-4">HomePro Rama 3</td>
<td class="p-4">-458.332</td>
<td class="p-4">180.490</td>
<td class="p-4">13.289</td>
<td class="p-4">-471.328</td>
<td class="p-4">217.206</td>
<td class="p-4">-664.133</td>
<td class="p-4">646.174</td>
<td class="p-4">833.365</td>
<td class="p-4">576.836</td>
<td class="p-4">203.115</td>
<td class="p-4">147.219</td>
<td class="p-4">-163.421</td>
<td class="p-4">-1169.927</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">53</td>
<td class="p-4">HOMEPRO CHACHOENGSAO</td>
<td class="p-4">-457.361</td>
<td class="p-4">179.450</td>
<td class="p-4">13.104</td>
<td class="p-4">-469.493</td>
<td class="p-4">214.896</td>
<td class="p-4">-661.595</td>
<td class="p-4">641.830</td>
<td class="p-4">826.377</td>
<td class="p-4">571.591</td>
<td class="p-4">201.795</td>
<td class="p-4">146.254</td>
<td class="p-4">-162.574</td>
<td class="p-4">-1164.951</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">54</td>
<td class="p-4">Home Pro (Nakhon Ratchsima)</td>
<td class="p-4">-458.612</td>
<td class="p-4">179.296</td>
<td class="p-4">13.488</td>
<td class="p-4">-471.017</td>
<td class="p-4">217.017</td>
<td class="p-4">-664.295</td>
<td class="p-4">649.568</td>
<td class="p-4">839.157</td>
<td class="p-4">581.590</td>
<td class="p-4">203.794</td>
<td class="p-4">147.694</td>
<td class="p-4">-164.165</td>
<td class="p-4">-1172.592</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">55</td>
<td class="p-4">HomePro (สาขาพาราไดซ์ พาร์ค)</td>
<td class="p-4">-457.512</td>
<td class="p-4">181.110</td>
<td class="p-4">13.234</td>
<td class="p-4">-470.404</td>
<td class="p-4">217.529</td>
<td class="p-4">-663.043</td>
<td class="p-4">644.850</td>
<td class="p-4">831.443</td>
<td class="p-4">575.339</td>
<td class="p-4">202.818</td>
<td class="p-4">147.034</td>
<td class="p-4">-163.102</td>
<td class="p-4">-1167.819</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">56</td>
<td class="p-4">Home Pro the distribution center</td>
<td class="p-4">-460.416</td>
<td class="p-4">177.074</td>
<td class="p-4">12.712</td>
<td class="p-4">-473.436</td>
<td class="p-4">210.198</td>
<td class="p-4">-664.462</td>
<td class="p-4">635.889</td>
<td class="p-4">814.736</td>
<td class="p-4">562.209</td>
<td class="p-4">200.188</td>
<td class="p-4">144.931</td>
<td class="p-4">-161.594</td>
<td class="p-4">-1164.736</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">57</td>
<td class="p-4">Homepro Sukhapiban 3</td>
<td class="p-4">-457.753</td>
<td class="p-4">180.508</td>
<td class="p-4">13.248</td>
<td class="p-4">-470.477</td>
<td class="p-4">216.948</td>
<td class="p-4">-663.119</td>
<td class="p-4">645.061</td>
<td class="p-4">831.721</td>
<td class="p-4">575.617</td>
<td class="p-4">202.795</td>
<td class="p-4">147.000</td>
<td class="p-4">-163.181</td>
<td class="p-4">-1168.206</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">58</td>
<td class="p-4">Home Pro</td>
<td class="p-4">-455.684</td>
<td class="p-4">181.725</td>
<td class="p-4">13.409</td>
<td class="p-4">-467.712</td>
<td class="p-4">219.085</td>
<td class="p-4">-660.750</td>
<td class="p-4">647.044</td>
<td class="p-4">836.096</td>
<td class="p-4">579.239</td>
<td class="p-4">203.315</td>
<td class="p-4">147.468</td>
<td class="p-4">-163.456</td>
<td class="p-4">-1166.747</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">59</td>
<td class="p-4">HomePro Ubon Ratchathani</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
<td class="p-4">nan</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">60</td>
<td class="p-4">homepro</td>
<td class="p-4">-457.693</td>
<td class="p-4">181.688</td>
<td class="p-4">13.366</td>
<td class="p-4">-470.842</td>
<td class="p-4">218.951</td>
<td class="p-4">-663.923</td>
<td class="p-4">647.557</td>
<td class="p-4">836.006</td>
<td class="p-4">578.853</td>
<td class="p-4">203.595</td>
<td class="p-4">147.614</td>
<td class="p-4">-163.620</td>
<td class="p-4">-1170.242</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">61</td>
<td class="p-4">HomePro Rayong</td>
<td class="p-4">-453.517</td>
<td class="p-4">179.599</td>
<td class="p-4">13.505</td>
<td class="p-4">-463.261</td>
<td class="p-4">217.065</td>
<td class="p-4">-656.188</td>
<td class="p-4">646.663</td>
<td class="p-4">836.598</td>
<td class="p-4">580.318</td>
<td class="p-4">202.717</td>
<td class="p-4">147.056</td>
<td class="p-4">-163.418</td>
<td class="p-4">-1162.587</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">62</td>
<td class="p-4">Home Pro Ratchaburi </td>
<td class="p-4">-459.494</td>
<td class="p-4">178.474</td>
<td class="p-4">13.180</td>
<td class="p-4">-472.262</td>
<td class="p-4">214.393</td>
<td class="p-4">-664.666</td>
<td class="p-4">644.274</td>
<td class="p-4">829.616</td>
<td class="p-4">573.982</td>
<td class="p-4">202.419</td>
<td class="p-4">146.635</td>
<td class="p-4">-163.174</td>
<td class="p-4">-1169.846</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">63</td>
<td class="p-4">HomePro Phetchabun Branch</td>
<td class="p-4">-439.013</td>
<td class="p-4">173.899</td>
<td class="p-4">14.633</td>
<td class="p-4">-437.100</td>
<td class="p-4">215.963</td>
<td class="p-4">-631.460</td>
<td class="p-4">655.794</td>
<td class="p-4">859.730</td>
<td class="p-4">601.941</td>
<td class="p-4">202.949</td>
<td class="p-4">147.579</td>
<td class="p-4">-165.083</td>
<td class="p-4">-1145.428</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">64</td>
<td class="p-4">HomePro Pranchinburi </td>
<td class="p-4">-452.711</td>
<td class="p-4">177.292</td>
<td class="p-4">13.483</td>
<td class="p-4">-460.933</td>
<td class="p-4">214.269</td>
<td class="p-4">-653.513</td>
<td class="p-4">644.963</td>
<td class="p-4">834.165</td>
<td class="p-4">578.872</td>
<td class="p-4">201.869</td>
<td class="p-4">146.416</td>
<td class="p-4">-163.166</td>
<td class="p-4">-1159.523</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">65</td>
<td class="p-4">Homepro Chaiyaphum</td>
<td class="p-4">-449.898</td>
<td class="p-4">175.200</td>
<td class="p-4">13.717</td>
<td class="p-4">-455.376</td>
<td class="p-4">213.028</td>
<td class="p-4">-648.184</td>
<td class="p-4">646.681</td>
<td class="p-4">838.611</td>
<td class="p-4">583.188</td>
<td class="p-4">201.747</td>
<td class="p-4">146.377</td>
<td class="p-4">-163.526</td>
<td class="p-4">-1155.921</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">66</td>
<td class="p-4">Home Pro Chanthaburi Branch</td>
<td class="p-4">-454.455</td>
<td class="p-4">179.213</td>
<td class="p-4">12.894</td>
<td class="p-4">-465.070</td>
<td class="p-4">213.196</td>
<td class="p-4">-656.310</td>
<td class="p-4">636.027</td>
<td class="p-4">817.768</td>
<td class="p-4">565.238</td>
<td class="p-4">200.086</td>
<td class="p-4">145.072</td>
<td class="p-4">-161.340</td>
<td class="p-4">-1156.077</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">67</td>
<td class="p-4">HomePro</td>
<td class="p-4">-458.622</td>
<td class="p-4">178.834</td>
<td class="p-4">13.299</td>
<td class="p-4">-470.979</td>
<td class="p-4">215.412</td>
<td class="p-4">-663.679</td>
<td class="p-4">645.982</td>
<td class="p-4">832.974</td>
<td class="p-4">576.739</td>
<td class="p-4">202.831</td>
<td class="p-4">146.973</td>
<td class="p-4">-163.472</td>
<td class="p-4">-1169.841</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">68</td>
<td class="p-4">HomePro </td>
<td class="p-4">-445.922</td>
<td class="p-4">170.744</td>
<td class="p-4">11.016</td>
<td class="p-4">-449.489</td>
<td class="p-4">192.199</td>
<td class="p-4">-633.902</td>
<td class="p-4">593.470</td>
<td class="p-4">748.752</td>
<td class="p-4">512.985</td>
<td class="p-4">187.507</td>
<td class="p-4">135.872</td>
<td class="p-4">-152.992</td>
<td class="p-4">-1109.263</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">69</td>
<td class="p-4">Home Pro Saraburi</td>
<td class="p-4">-459.417</td>
<td class="p-4">176.289</td>
<td class="p-4">13.100</td>
<td class="p-4">-471.172</td>
<td class="p-4">211.462</td>
<td class="p-4">-663.138</td>
<td class="p-4">642.043</td>
<td class="p-4">825.904</td>
<td class="p-4">571.382</td>
<td class="p-4">201.516</td>
<td class="p-4">145.933</td>
<td class="p-4">-162.832</td>
<td class="p-4">-1167.553</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">70</td>
<td class="p-4">HomeporPhrae</td>
<td class="p-4">-454.421</td>
<td class="p-4">177.730</td>
<td class="p-4">13.925</td>
<td class="p-4">-463.397</td>
<td class="p-4">217.427</td>
<td class="p-4">-657.411</td>
<td class="p-4">654.257</td>
<td class="p-4">849.383</td>
<td class="p-4">590.645</td>
<td class="p-4">204.383</td>
<td class="p-4">148.234</td>
<td class="p-4">-165.052</td>
<td class="p-4">-1169.171</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">71</td>
<td class="p-4">kwan nanta Home</td>
<td class="p-4">-456.607</td>
<td class="p-4">178.005</td>
<td class="p-4">13.225</td>
<td class="p-4">-467.532</td>
<td class="p-4">213.897</td>
<td class="p-4">-659.776</td>
<td class="p-4">643.050</td>
<td class="p-4">828.926</td>
<td class="p-4">573.967</td>
<td class="p-4">201.813</td>
<td class="p-4">146.267</td>
<td class="p-4">-162.866</td>
<td class="p-4">-1164.338</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">72</td>
<td class="p-4">Home Pro Phutthamonthon Sai 5</td>
<td class="p-4">-457.391</td>
<td class="p-4">181.633</td>
<td class="p-4">13.380</td>
<td class="p-4">-470.336</td>
<td class="p-4">218.945</td>
<td class="p-4">-663.426</td>
<td class="p-4">647.594</td>
<td class="p-4">836.220</td>
<td class="p-4">579.080</td>
<td class="p-4">203.572</td>
<td class="p-4">147.605</td>
<td class="p-4">-163.621</td>
<td class="p-4">-1169.787</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">73</td>
<td class="p-4">Home Pro Chiang Rai</td>
<td class="p-4">-446.943</td>
<td class="p-4">170.079</td>
<td class="p-4">14.306</td>
<td class="p-4">-447.840</td>
<td class="p-4">210.388</td>
<td class="p-4">-641.583</td>
<td class="p-4">653.747</td>
<td class="p-4">852.526</td>
<td class="p-4">595.540</td>
<td class="p-4">202.468</td>
<td class="p-4">146.920</td>
<td class="p-4">-165.097</td>
<td class="p-4">-1155.336</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">74</td>
<td class="p-4">HomePro Loei</td>
<td class="p-4">-458.611</td>
<td class="p-4">178.363</td>
<td class="p-4">13.680</td>
<td class="p-4">-470.400</td>
<td class="p-4">217.066</td>
<td class="p-4">-664.134</td>
<td class="p-4">652.755</td>
<td class="p-4">844.716</td>
<td class="p-4">586.162</td>
<td class="p-4">204.440</td>
<td class="p-4">148.158</td>
<td class="p-4">-164.847</td>
<td class="p-4">-1174.727</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">75</td>
<td class="p-4">HomePro (Trang)</td>
<td class="p-4">-455.050</td>
<td class="p-4">179.299</td>
<td class="p-4">13.719</td>
<td class="p-4">-465.301</td>
<td class="p-4">218.071</td>
<td class="p-4">-658.934</td>
<td class="p-4">651.453</td>
<td class="p-4">844.150</td>
<td class="p-4">586.132</td>
<td class="p-4">203.981</td>
<td class="p-4">147.942</td>
<td class="p-4">-164.435</td>
<td class="p-4">-1168.447</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">76</td>
<td class="p-4">Homepro Mahachai</td>
<td class="p-4">-457.038</td>
<td class="p-4">181.144</td>
<td class="p-4">13.448</td>
<td class="p-4">-469.497</td>
<td class="p-4">218.754</td>
<td class="p-4">-662.703</td>
<td class="p-4">648.432</td>
<td class="p-4">837.866</td>
<td class="p-4">580.523</td>
<td class="p-4">203.676</td>
<td class="p-4">147.685</td>
<td class="p-4">-163.802</td>
<td class="p-4">-1169.742</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">77</td>
<td class="p-4">HOMEPRO AMATANAKORN</td>
<td class="p-4">-456.856</td>
<td class="p-4">180.136</td>
<td class="p-4">13.430</td>
<td class="p-4">-468.751</td>
<td class="p-4">217.499</td>
<td class="p-4">-661.797</td>
<td class="p-4">647.652</td>
<td class="p-4">836.657</td>
<td class="p-4">579.748</td>
<td class="p-4">203.310</td>
<td class="p-4">147.403</td>
<td class="p-4">-163.689</td>
<td class="p-4">-1168.642</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">78</td>
<td class="p-4">HomePro Siracha</td>
<td class="p-4">-457.189</td>
<td class="p-4">179.863</td>
<td class="p-4">13.503</td>
<td class="p-4">-469.071</td>
<td class="p-4">217.635</td>
<td class="p-4">-662.326</td>
<td class="p-4">649.109</td>
<td class="p-4">839.028</td>
<td class="p-4">581.625</td>
<td class="p-4">203.656</td>
<td class="p-4">147.645</td>
<td class="p-4">-164.004</td>
<td class="p-4">-1170.174</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">79</td>
<td class="p-4">HomePro Surat Thani</td>
<td class="p-4">-449.423</td>
<td class="p-4">179.239</td>
<td class="p-4">13.860</td>
<td class="p-4">-456.440</td>
<td class="p-4">218.374</td>
<td class="p-4">-649.992</td>
<td class="p-4">650.322</td>
<td class="p-4">844.934</td>
<td class="p-4">587.664</td>
<td class="p-4">203.246</td>
<td class="p-4">147.568</td>
<td class="p-4">-164.043</td>
<td class="p-4">-1158.842</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">80</td>
<td class="p-4">Homepro North Pattaya</td>
<td class="p-4">-456.920</td>
<td class="p-4">179.813</td>
<td class="p-4">13.488</td>
<td class="p-4">-468.644</td>
<td class="p-4">217.473</td>
<td class="p-4">-661.830</td>
<td class="p-4">648.648</td>
<td class="p-4">838.363</td>
<td class="p-4">581.146</td>
<td class="p-4">203.512</td>
<td class="p-4">147.546</td>
<td class="p-4">-163.906</td>
<td class="p-4">-1169.401</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">81</td>
<td class="p-4">Home Pro Nakhon Sawan</td>
<td class="p-4">-460.832</td>
<td class="p-4">179.906</td>
<td class="p-4">13.425</td>
<td class="p-4">-474.799</td>
<td class="p-4">217.518</td>
<td class="p-4">-668.143</td>
<td class="p-4">650.076</td>
<td class="p-4">838.926</td>
<td class="p-4">580.956</td>
<td class="p-4">204.191</td>
<td class="p-4">147.931</td>
<td class="p-4">-164.304</td>
<td class="p-4">-1176.567</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">82</td>
<td class="p-4">HomePro (San Sai)</td>
<td class="p-4">-439.775</td>
<td class="p-4">180.201</td>
<td class="p-4">13.360</td>
<td class="p-4">-442.411</td>
<td class="p-4">215.845</td>
<td class="p-4">-633.827</td>
<td class="p-4">635.253</td>
<td class="p-4">823.521</td>
<td class="p-4">572.005</td>
<td class="p-4">198.889</td>
<td class="p-4">144.648</td>
<td class="p-4">-160.698</td>
<td class="p-4">-1132.903</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">83</td>
<td class="p-4">Home Pro Hat Yai (Kanchanawanit)</td>
<td class="p-4">-456.499</td>
<td class="p-4">180.240</td>
<td class="p-4">13.570</td>
<td class="p-4">-468.123</td>
<td class="p-4">218.393</td>
<td class="p-4">-661.546</td>
<td class="p-4">650.009</td>
<td class="p-4">840.901</td>
<td class="p-4">583.167</td>
<td class="p-4">203.884</td>
<td class="p-4">147.841</td>
<td class="p-4">-164.144</td>
<td class="p-4">-1169.856</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">84</td>
<td class="p-4">HomePro Srinakarin</td>
<td class="p-4">-457.173</td>
<td class="p-4">181.093</td>
<td class="p-4">13.309</td>
<td class="p-4">-469.805</td>
<td class="p-4">217.910</td>
<td class="p-4">-662.625</td>
<td class="p-4">645.976</td>
<td class="p-4">833.555</td>
<td class="p-4">577.077</td>
<td class="p-4">203.068</td>
<td class="p-4">147.229</td>
<td class="p-4">-163.318</td>
<td class="p-4">-1168.121</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">85</td>
<td class="p-4">Home Pro Prachuap Khiri Khan</td>
<td class="p-4">-459.822</td>
<td class="p-4">179.226</td>
<td class="p-4">13.479</td>
<td class="p-4">-472.864</td>
<td class="p-4">216.980</td>
<td class="p-4">-666.211</td>
<td class="p-4">650.170</td>
<td class="p-4">839.613</td>
<td class="p-4">581.770</td>
<td class="p-4">204.028</td>
<td class="p-4">147.830</td>
<td class="p-4">-164.325</td>
<td class="p-4">-1174.902</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">86</td>
<td class="p-4">Home Pro Samut Songkhram</td>
<td class="p-4">-459.619</td>
<td class="p-4">179.785</td>
<td class="p-4">13.344</td>
<td class="p-4">-472.934</td>
<td class="p-4">216.827</td>
<td class="p-4">-665.938</td>
<td class="p-4">647.786</td>
<td class="p-4">835.561</td>
<td class="p-4">578.490</td>
<td class="p-4">203.507</td>
<td class="p-4">147.459</td>
<td class="p-4">-163.816</td>
<td class="p-4">-1172.954</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">87</td>
<td class="p-4">Home Pro Phetchaburi</td>
<td class="p-4">-459.113</td>
<td class="p-4">179.190</td>
<td class="p-4">13.300</td>
<td class="p-4">-471.908</td>
<td class="p-4">215.863</td>
<td class="p-4">-664.688</td>
<td class="p-4">646.452</td>
<td class="p-4">833.531</td>
<td class="p-4">577.047</td>
<td class="p-4">203.042</td>
<td class="p-4">147.120</td>
<td class="p-4">-163.563</td>
<td class="p-4">-1171.039</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">88</td>
<td class="p-4">HomePro Thalang</td>
<td class="p-4">-459.687</td>
<td class="p-4">180.248</td>
<td class="p-4">13.494</td>
<td class="p-4">-473.128</td>
<td class="p-4">218.211</td>
<td class="p-4">-666.603</td>
<td class="p-4">650.698</td>
<td class="p-4">840.541</td>
<td class="p-4">582.371</td>
<td class="p-4">204.309</td>
<td class="p-4">148.059</td>
<td class="p-4">-164.377</td>
<td class="p-4">-1175.327</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">89</td>
<td class="p-4">HomePro Gateway Ekamai</td>
<td class="p-4">-459.140</td>
<td class="p-4">180.879</td>
<td class="p-4">13.280</td>
<td class="p-4">-472.773</td>
<td class="p-4">217.658</td>
<td class="p-4">-665.657</td>
<td class="p-4">646.671</td>
<td class="p-4">833.810</td>
<td class="p-4">577.001</td>
<td class="p-4">203.363</td>
<td class="p-4">147.384</td>
<td class="p-4">-163.526</td>
<td class="p-4">-1171.645</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">90</td>
<td class="p-4">HomePro Paradise Park </td>
<td class="p-4">-457.626</td>
<td class="p-4">180.218</td>
<td class="p-4">13.357</td>
<td class="p-4">-470.045</td>
<td class="p-4">217.234</td>
<td class="p-4">-662.957</td>
<td class="p-4">646.858</td>
<td class="p-4">834.905</td>
<td class="p-4">578.218</td>
<td class="p-4">203.187</td>
<td class="p-4">147.289</td>
<td class="p-4">-163.550</td>
<td class="p-4">-1169.270</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">91</td>
<td class="p-4">Homepro Mega Bangna</td>
<td class="p-4">-454.643</td>
<td class="p-4">181.355</td>
<td class="p-4">13.360</td>
<td class="p-4">-465.969</td>
<td class="p-4">218.303</td>
<td class="p-4">-658.745</td>
<td class="p-4">645.343</td>
<td class="p-4">833.680</td>
<td class="p-4">577.539</td>
<td class="p-4">202.752</td>
<td class="p-4">147.077</td>
<td class="p-4">-163.103</td>
<td class="p-4">-1163.779</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">92</td>
<td class="p-4">Home pro Rama 9 </td>
<td class="p-4">-459.940</td>
<td class="p-4">180.819</td>
<td class="p-4">13.320</td>
<td class="p-4">-473.946</td>
<td class="p-4">217.882</td>
<td class="p-4">-667.005</td>
<td class="p-4">647.903</td>
<td class="p-4">835.556</td>
<td class="p-4">578.273</td>
<td class="p-4">203.723</td>
<td class="p-4">147.626</td>
<td class="p-4">-163.799</td>
<td class="p-4">-1173.787</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">93</td>
<td class="p-4">Home Pro Chaiyaphruek</td>
<td class="p-4">-458.674</td>
<td class="p-4">180.769</td>
<td class="p-4">13.194</td>
<td class="p-4">-472.076</td>
<td class="p-4">217.001</td>
<td class="p-4">-664.665</td>
<td class="p-4">644.755</td>
<td class="p-4">830.730</td>
<td class="p-4">574.640</td>
<td class="p-4">202.833</td>
<td class="p-4">147.004</td>
<td class="p-4">-163.134</td>
<td class="p-4">-1169.475</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">94</td>
<td class="p-4">Home Pro Khon Kaen</td>
<td class="p-4">-448.417</td>
<td class="p-4">177.201</td>
<td class="p-4">14.065</td>
<td class="p-4">-453.730</td>
<td class="p-4">217.169</td>
<td class="p-4">-647.586</td>
<td class="p-4">652.714</td>
<td class="p-4">849.662</td>
<td class="p-4">591.908</td>
<td class="p-4">203.443</td>
<td class="p-4">147.711</td>
<td class="p-4">-164.590</td>
<td class="p-4">-1158.563</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">95</td>
<td class="p-4">Home Pro</td>
<td class="p-4">-455.420</td>
<td class="p-4">179.945</td>
<td class="p-4">13.510</td>
<td class="p-4">-466.367</td>
<td class="p-4">217.632</td>
<td class="p-4">-659.500</td>
<td class="p-4">648.110</td>
<td class="p-4">838.157</td>
<td class="p-4">581.201</td>
<td class="p-4">203.281</td>
<td class="p-4">147.422</td>
<td class="p-4">-163.747</td>
<td class="p-4">-1166.702</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">96</td>
<td class="p-4">HomePro Bang Phli</td>
<td class="p-4">-454.566</td>
<td class="p-4">181.624</td>
<td class="p-4">13.333</td>
<td class="p-4">-466.002</td>
<td class="p-4">218.444</td>
<td class="p-4">-658.720</td>
<td class="p-4">644.886</td>
<td class="p-4">832.913</td>
<td class="p-4">576.899</td>
<td class="p-4">202.675</td>
<td class="p-4">147.026</td>
<td class="p-4">-162.996</td>
<td class="p-4">-1163.385</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">97</td>
<td class="p-4">HomePro Kallapraphruk</td>
<td class="p-4">-458.593</td>
<td class="p-4">181.346</td>
<td class="p-4">13.386</td>
<td class="p-4">-472.055</td>
<td class="p-4">218.750</td>
<td class="p-4">-665.237</td>
<td class="p-4">648.397</td>
<td class="p-4">837.039</td>
<td class="p-4">579.585</td>
<td class="p-4">203.822</td>
<td class="p-4">147.749</td>
<td class="p-4">-163.832</td>
<td class="p-4">-1172.185</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">98</td>
<td class="p-4">HomePro Charan Sanitwong</td>
<td class="p-4">-458.078</td>
<td class="p-4">180.768</td>
<td class="p-4">13.257</td>
<td class="p-4">-471.096</td>
<td class="p-4">217.318</td>
<td class="p-4">-663.816</td>
<td class="p-4">645.524</td>
<td class="p-4">832.350</td>
<td class="p-4">576.025</td>
<td class="p-4">202.977</td>
<td class="p-4">147.129</td>
<td class="p-4">-163.270</td>
<td class="p-4">-1169.117</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">99</td>
<td class="p-4">Homepro Bangyai Branch</td>
<td class="p-4">-459.015</td>
<td class="p-4">180.699</td>
<td class="p-4">13.308</td>
<td class="p-4">-472.469</td>
<td class="p-4">217.606</td>
<td class="p-4">-665.405</td>
<td class="p-4">647.039</td>
<td class="p-4">834.518</td>
<td class="p-4">577.612</td>
<td class="p-4">203.417</td>
<td class="p-4">147.425</td>
<td class="p-4">-163.604</td>
<td class="p-4">-1171.681</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">100</td>
<td class="p-4">Homepro Phatthalung</td>
<td class="p-4">-457.132</td>
<td class="p-4">180.364</td>
<td class="p-4">13.540</td>
<td class="p-4">-469.190</td>
<td class="p-4">218.410</td>
<td class="p-4">-662.592</td>
<td class="p-4">649.916</td>
<td class="p-4">840.426</td>
<td class="p-4">582.668</td>
<td class="p-4">203.931</td>
<td class="p-4">147.858</td>
<td class="p-4">-164.139</td>
<td class="p-4">-1170.803</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">101</td>
<td class="p-4">HomePro Rangsit Klong Si</td>
<td class="p-4">-460.044</td>
<td class="p-4">176.296</td>
<td class="p-4">12.546</td>
<td class="p-4">-472.637</td>
<td class="p-4">208.340</td>
<td class="p-4">-663.089</td>
<td class="p-4">632.372</td>
<td class="p-4">808.875</td>
<td class="p-4">557.724</td>
<td class="p-4">199.162</td>
<td class="p-4">144.170</td>
<td class="p-4">-160.918</td>
<td class="p-4">-1161.368</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">102</td>
<td class="p-4">Home Pro Surin Branch</td>
<td class="p-4">-460.895</td>
<td class="p-4">180.493</td>
<td class="p-4">13.372</td>
<td class="p-4">-475.223</td>
<td class="p-4">217.885</td>
<td class="p-4">-668.479</td>
<td class="p-4">649.360</td>
<td class="p-4">837.627</td>
<td class="p-4">579.819</td>
<td class="p-4">204.110</td>
<td class="p-4">147.878</td>
<td class="p-4">-164.134</td>
<td class="p-4">-1176.275</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">103</td>
<td class="p-4">Home Pro </td>
<td class="p-4">-460.657</td>
<td class="p-4">180.219</td>
<td class="p-4">13.423</td>
<td class="p-4">-474.679</td>
<td class="p-4">217.850</td>
<td class="p-4">-668.033</td>
<td class="p-4">650.042</td>
<td class="p-4">838.937</td>
<td class="p-4">580.943</td>
<td class="p-4">204.218</td>
<td class="p-4">147.961</td>
<td class="p-4">-164.277</td>
<td class="p-4">-1176.344</td>
</tr>
<tr class="border-b cursor-pointer hover:bg-gray-200 bg-gray-300">
<td class="p-4">104</td>
<td class="p-4">HomePro U Don Ta Ni</td>
<td class="p-4">-458.586</td>
<td class="p-4">177.290</td>
<td class="p-4">13.340</td>
<td class="p-4">-470.151</td>
<td class="p-4">213.900</td>
<td class="p-4">-662.819</td>
<td class="p-4">646.189</td>
<td class="p-4">833.429</td>
<td class="p-4">577.348</td>
<td class="p-4">202.638</td>
<td class="p-4">146.806</td>
<td class="p-4">-163.587</td>
<td class="p-4">-1169.570</td>
</tr>
</tbody>
</table>
</div>
<h2 class="mt-2 ml-2">Remark: unit M.THB summarized disaster occurences</h2>
<!-- Forecasted Wind Years -->
<!-- h1 class="text-l font-bold mb-4 mt-8">Predicted Finance Changes</h1>
<canvas id="disasterForecastChartFlood" height="300px"></canvas-->
<!-- Forecasted Wind Years -->
<!-- h1 class="text-l font-bold mb-4 mt-8">Predicted Finance Changes</h1>
<canvas id="disasterForecastChartPM" height="300px"></canvas>
<h1 class="text-l font-bold mb-4">Top Fiance 3 Positive Changes</h1>
<canvas id="financeHighChange"></canvas>
<h1 class="text-l font-bold mb-4">Finance Stable Changes</h1>
<canvas id="financeMidChange"></canvas>
<h1 class="text-l font-bold mb-4">Finance Negative Changes</h1>
<canvas id="financeLowChange"></canvas>
<h1 class="text-l font-bold mb-4">Anomaly Index</h1>
<canvas id="myMixedChart"></canva-->
</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,
maxPitch: 60,
};
var viewState = INIT_VIEW_STATE;
// LAYER
const firm_hex = new deck.HexagonLayer({
id: "HexagonLayer",
data: "data/firm/homeprto_disaster_firm_location_forecast.json",
extruded: true,
getPosition: (d) => [d.lon, d.lat],
getColorWeight: (d) => d.flood_2033,
getElevationWeight: (d) => d.wind_2033,
elevationScale: 200,
colorRange: [
[213, 62, 79, 200],
[252, 141, 89, 200],
[254, 224, 139, 200],
[230, 245, 152, 200],
[153, 213, 148, 200],
[50, 136, 189, 200],
],
colorScaleType: "quantile",
radius: 5000,
pickable: true,
elevationAggregation: "MEAN",
colorAggregation: "MEAN",
});
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],
});
const heatmap = new deck.HeatmapLayer({
id: "HeatmapLayer",
data: "data/firm/homeprto_disaster_firm_location_forecast.json",
aggregation: "SUM",
getPosition: (d) => [d.lon, d.lat],
radiusPixels: 60,
colorRange: [
[50, 136, 189],
[153, 213, 148],
[230, 245, 152],
[254, 224, 139],
[252, 141, 89],
[213, 62, 79],
],
});
// 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,
layers: [province_boundary, heatmap],
});
function getTooltip({ object }) {
return (
object && {
html: `<h2 class="text-black">Forecasted Index (2033): ${object.elevationValue.toFixed(
2
)}</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("#goHome", {
content: "Home Page",
placement: "left",
});
tippy("#goOverView", {
content: "FIRM Overview",
placement: "left",
});
tippy("#goLocation", {
content: "Location-Based",
placement: "left",
});
tippy("#goForecast", {
content: "Forecasting",
placement: "left",
});
async function updateMap() {
console.log("update Map");
const selectedBoxId = getSelectedBox();
//console.log('Currently Selected Box ID:', selectedBoxId);
if (selectedBoxId == "wind") {
console.log(" Do something to Wind");
deckInstance.setProps({
layers: [
province_boundary,
new deck.HexagonLayer({
id: "HexagonLayer",
data: "data/firm/homeprto_disaster_firm_location_forecast.json",
extruded: true,
getPosition: (d) => [d.lon, d.lat],
getColorWeight: (d) => d.wind_2033,
getElevationWeight: (d) => d.wind_2033,
elevationScale: 100,
transitions: {
elevationScale: 1000,
},
colorRange: [
[255, 255, 178, 200],
[254, 217, 118, 200],
[254, 178, 76, 200],
[253, 141, 60, 200],
[240, 59, 32, 200],
[189, 0, 38, 200],
],
colorScaleType: "quantile",
radius: 5000,
pickable: true,
elevationAggregation: "MIN",
colorAggregation: "MIN",
}),
],
getTooltip,
});
} else if (selectedBoxId == "flood") {
console.log(" Do something to Flood");
deckInstance.setProps({
layers: [
province_boundary,
new deck.HexagonLayer({
id: "HexagonLayer",
data: "data/firm/homeprto_disaster_firm_location_forecast.json",
extruded: true,
getPosition: (d) => [d.lon, d.lat],
getColorWeight: (d) => d.flood_2033,
getElevationWeight: (d) => d.flood_2033,
elevationScale: 100,
transitions: {
elevationScale: 1000,
duration: 2000,
},
colorRange: [
[242, 240, 247, 200],
[218, 218, 235, 200],
[188, 189, 220, 200],
[158, 154, 200, 200],
[117, 107, 177, 200],
[84, 39, 143, 200],
,
],
colorScaleType: "quantile",
radius: 5000,
pickable: true,
elevationAggregation: "MEAN",
colorAggregation: "MEAN",
}),
],
getTooltip,
});
} else if (selectedBoxId == "pm") {
console.log(" Do something to PM");
deckInstance.setProps({
layers: [
province_boundary,
new deck.HexagonLayer({
id: "HexagonLayer",
data: "data/firm/homeprto_disaster_firm_location_forecast.json",
extruded: true,
getPosition: (d) => [d.lon, d.lat],
getColorWeight: (d) => d.pm_2033,
getElevationWeight: (d) => d.pm_2033,
elevationScale: 100,
transitions: {
elevationScale: 1000,
},
colorRange: [
[247, 247, 247, 200],
[217, 217, 217, 200],
[189, 189, 189, 200],
[150, 150, 150, 200],
[99, 99, 99, 200],
[37, 37, 37, 200],
],
colorScaleType: "quantile",
radius: 5000,
pickable: true,
elevationAggregation: "MAX",
colorAggregation: "MAX",
}),
],
getTooltip,
});
}
// refresh again after 60 seconds
setTimeout(updateMap, 60000);
}
const boxes = document.querySelectorAll(".box");
boxes.forEach((box) => {
box.addEventListener("click", function () {
// Remove 'selected' class from all boxes
boxes.forEach((b) =>
b.classList.remove("selected", "bg-cyan-500", "text-white")
);
// Add 'selected' class to the clicked box
this.classList.add("selected", "bg-cyan-500", "text-white");
updateMap();
});
});
function getSelectedBox() {
const selectedBox = document.querySelector(".box.selected");
if (selectedBox) {
return selectedBox.getAttribute("data-id"); // Return the selected box's data-id
}
return null;
}
</script>
<script>
// Get the context of the canvas element
const ctx2 = document
.getElementById("disasterLineChart")
.getContext("2d");
const myLineChart2 = new Chart(ctx2, {
type: "line",
data: {
labels: [
"2023",
"2024",
"2025",
"2026",
"2027",
"2028",
"2029",
"2030",
"2031",
"2032",
"2033",
],
datasets: [
{
label: "Wind",
data: [
251.60793283708682, 258.9494574311963, 275.7163314632364,
272.9505698081064, 252.67203984024647, 244.55433056847482,
237.19113462684362, 251.99048387071943, 245.59006556916714,
244.15652608753243, 263.3640711360034,
],
borderColor: "rgba(255, 99, 132, 1)",
backgroundColor: "rgba(255, 99, 132, 0.2)",
fill: true,
},
{
label: "Flood",
data: [
90.2725237103977, 97.98191332728928, 100.31649584769123,
105.63453152696367, 96.58372235898372, 89.3943864299188,
94.081698892078, 87.01861689334801, 81.91590014730753,
79.0147463915676, 82.78755915944409,
],
borderColor: "rgba(54, 162, 235, 1)",
backgroundColor: "rgba(54, 162, 235, 0.2)",
fill: true,
},
{
label: "Air Pollution",
data: [
36.01993483269402, 34.97180485884851, 32.32156177929745,
34.94356111454648, 33.2711644360697, 33.00160027466582,
35.71720373512917, 32.40541263160735, 29.65267820060595,
28.973788179594084, 29.479574700489163,
],
borderColor: "rgba(112, 112, 112, 1)",
backgroundColor: "rgba(112, 192, 192, 0.2)",
fill: true,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: "Count (Times)",
},
},
},
},
});
// Get the context of the canvas element
const ctx = document
.getElementById("disasterForecastChart")
.getContext("2d");
const myBarChart = 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: "3 Year (2026)",
data: [
192.32211203316484, 31.527679984513156, 15.088625273386326,
608.1798917108054, 8.673990485461957, 479.07264201740963,
204.2409737359837, 393.1893520844654, 353.5789533932493,
18.540743947762593, 27.86393758897802, -62.860186266031164,
205.04142013990258,
],
borderWidth: 1,
},
{
label: "5 Years (2028)",
data: [
103.00237051249468, 35.60339672392928, 14.248921235709451,
467.26914701361676, 15.40074184170274, 332.63633659313587,
248.64127328510688, 426.30922868841577, 365.0570832518623,
37.2717443270586, 39.08841398528503, -74.2073880473869,
32.24411763166381,
],
borderWidth: 1,
},
{
label: "10 Years (2033)",
data: [
94.1414973433603, 22.35379745877924, 18.87017587736522,
463.9626168238788, 27.608744205148383, 316.75975707398106,
334.02838010281664, 570.3217257609219, 480.3701411444466,
57.1254581580325, 53.32010039990543, -92.17169256154112,
-41.619557207640355,
],
borderWidth: 1,
},
],
},
options: {
indexAxis: "y", // This makes the bar chart horizontal
scales: {
x: {
beginAtZero: true,
title: {
display: true,
text: "Potential Impact (M.THB)",
},
},
},
},
});
// Get the context of the canvas element
const ctxflood = document
.getElementById("disasterForecastChartFlood")
.getContext("2d");
const myBarChartflood = new Chart(ctxflood, {
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: "3 Year (2026)",
data: [
192.32211203316484, 31.527679984513156, 15.088625273386326,
608.1798917108054, 8.673990485461957, 479.07264201740963,
204.2409737359837, 393.1893520844654, 353.5789533932493,
18.540743947762593, 27.86393758897802, -62.860186266031164,
205.04142013990258,
],
borderWidth: 1,
},
{
label: "5 Years (2028)",
data: [
103.00237051249468, 35.60339672392928, 14.248921235709451,
467.26914701361676, 15.40074184170274, 332.63633659313587,
248.64127328510688, 426.30922868841577, 365.0570832518623,
37.2717443270586, 39.08841398528503, -74.2073880473869,
32.24411763166381,
],
borderWidth: 1,
},
{
label: "10 Years (2033)",
data: [
94.1414973433603, 22.35379745877924, 18.87017587736522,
463.9626168238788, 27.608744205148383, 316.75975707398106,
334.02838010281664, 570.3217257609219, 480.3701411444466,
57.1254581580325, 53.32010039990543, -92.17169256154112,
-41.619557207640355,
],
borderWidth: 1,
},
],
},
options: {
indexAxis: "y", // This makes the bar chart horizontal
scales: {
x: {
beginAtZero: true,
title: {
display: true,
text: "Potential Impact (M.THB)",
},
},
},
},
});
// Get the context of the canvas element
const ctxpm = document
.getElementById("disasterForecastChartPM")
.getContext("2d");
const myBarChartPM = new Chart(ctxpm, {
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: "3 Year (2026)",
data: [
192.32211203316484, 31.527679984513156, 15.088625273386326,
608.1798917108054, 8.673990485461957, 479.07264201740963,
204.2409737359837, 393.1893520844654, 353.5789533932493,
18.540743947762593, 27.86393758897802, -62.860186266031164,
205.04142013990258,
],
borderWidth: 1,
},
{
label: "5 Years (2028)",
data: [
103.00237051249468, 35.60339672392928, 14.248921235709451,
467.26914701361676, 15.40074184170274, 332.63633659313587,
248.64127328510688, 426.30922868841577, 365.0570832518623,
37.2717443270586, 39.08841398528503, -74.2073880473869,
32.24411763166381,
],
borderWidth: 1,
},
{
label: "10 Years (2033)",
data: [
94.1414973433603, 22.35379745877924, 18.87017587736522,
463.9626168238788, 27.608744205148383, 316.75975707398106,
334.02838010281664, 570.3217257609219, 480.3701411444466,
57.1254581580325, 53.32010039990543, -92.17169256154112,
-41.619557207640355,
],
borderWidth: 1,
},
],
},
options: {
indexAxis: "y", // This makes the bar chart horizontal
scales: {
x: {
beginAtZero: true,
title: {
display: true,
text: "Potential Impact (M.THB)",
},
},
},
},
});
// Get the context of the canvas element
const ctx3 = document
.getElementById("financeHighChange")
.getContext("2d");
// Create the chart
const myRadarChart = new Chart(ctx3, {
type: "radar",
data: {
labels: ["Speed", "Strength", "Agility", "Endurance", "Flexibility"],
datasets: [
{
label: "Person A",
data: [65, 75, 70, 80, 60],
borderColor: "rgba(255, 99, 132, 1)",
backgroundColor: "rgba(255, 99, 132, 0.2)",
fill: true,
},
{
label: "Person B",
data: [54, 65, 60, 70, 75],
borderColor: "rgba(54, 162, 235, 1)",
backgroundColor: "rgba(54, 162, 235, 0.2)",
fill: true,
},
],
},
options: {
scales: {
r: {
angleLines: {
display: true,
},
suggestedMin: 0,
suggestedMax: 100,
},
},
},
});
// Get the context of the canvas element
const ctx4 = document.getElementById("financeMidChange").getContext("2d");
const myBarChart4 = new Chart(ctx4, {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May"],
datasets: [
{
label: "Sales",
data: [300, 450, 100, 550, 700],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
},
options: {
indexAxis: "y", // This makes the bar chart horizontal
scales: {
x: {
beginAtZero: true,
},
},
},
});
// Get the context of the canvas element
const ctx5 = document.getElementById("financeLowChange").getContext("2d");
const myBarChart5 = new Chart(ctx5, {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May"],
datasets: [
{
label: "Sales",
data: [300, 450, 100, 550, 700],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
},
options: {
indexAxis: "y", // This makes the bar chart horizontal
scales: {
x: {
beginAtZero: true,
},
},
},
});
// Get the context of the canvas element
const ctx6 = document.getElementById("myMixedChart").getContext("2d");
const myMixedChart = new Chart(ctx6, {
type: "bar", // Default chart type is bar
data: {
labels: ["January", "February", "March", "April", "May"],
datasets: [
{
label: "Sales (Bar)",
data: [300, 450, 100, 550, 700],
backgroundColor: "rgba(54, 162, 235, 0.5)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 1,
type: "bar",
},
{
label: "Revenue (Line)",
data: [50, 80, 30, 100, 90],
borderColor: "rgba(255, 99, 132, 1)",
backgroundColor: "rgba(255, 99, 132, 0.2)",
fill: false,
type: "line",
tension: 0.4, // Smoother line
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
});
</script>
</body>
</html>