Add 3 files
Browse files- README.md +7 -5
- index.html +417 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: us-tariff-dashboard
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: purple
|
| 5 |
+
colorTo: purple
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,417 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>US Tariff Dashboard</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<script>
|
| 10 |
+
tailwind.config = {
|
| 11 |
+
theme: {
|
| 12 |
+
extend: {
|
| 13 |
+
colors: {
|
| 14 |
+
primary: '#1a365d',
|
| 15 |
+
secondary: '#2c5282',
|
| 16 |
+
accent: '#4299e1',
|
| 17 |
+
}
|
| 18 |
+
}
|
| 19 |
+
}
|
| 20 |
+
}
|
| 21 |
+
</script>
|
| 22 |
+
<style>
|
| 23 |
+
.data-table {
|
| 24 |
+
max-height: 500px;
|
| 25 |
+
overflow-y: auto;
|
| 26 |
+
}
|
| 27 |
+
.data-table::-webkit-scrollbar {
|
| 28 |
+
width: 8px;
|
| 29 |
+
}
|
| 30 |
+
.data-table::-webkit-scrollbar-track {
|
| 31 |
+
background: #f1f1f1;
|
| 32 |
+
}
|
| 33 |
+
.data-table::-webkit-scrollbar-thumb {
|
| 34 |
+
background: #888;
|
| 35 |
+
border-radius: 4px;
|
| 36 |
+
}
|
| 37 |
+
.data-table::-webkit-scrollbar-thumb:hover {
|
| 38 |
+
background: #555;
|
| 39 |
+
}
|
| 40 |
+
.chart-container {
|
| 41 |
+
height: 300px;
|
| 42 |
+
}
|
| 43 |
+
</style>
|
| 44 |
+
</head>
|
| 45 |
+
<body class="bg-gray-100">
|
| 46 |
+
<div class="container mx-auto px-4 py-8">
|
| 47 |
+
<header class="mb-8">
|
| 48 |
+
<h1 class="text-3xl font-bold text-primary">US Tariff Dashboard</h1>
|
| 49 |
+
<p class="text-gray-600">Comprehensive overview of tariff rates, import values, and revenue by country</p>
|
| 50 |
+
<div class="mt-4 bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4" role="alert">
|
| 51 |
+
<p class="font-bold">Note</p>
|
| 52 |
+
<p>This dashboard displays simulated data for demonstration purposes. Actual tariff data can be obtained from the U.S. International Trade Commission.</p>
|
| 53 |
+
</div>
|
| 54 |
+
</header>
|
| 55 |
+
|
| 56 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
| 57 |
+
<!-- Summary Cards -->
|
| 58 |
+
<div class="bg-white rounded-lg shadow p-6">
|
| 59 |
+
<div class="flex items-center">
|
| 60 |
+
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
|
| 61 |
+
<i class="fas fa-globe-americas text-xl"></i>
|
| 62 |
+
</div>
|
| 63 |
+
<div>
|
| 64 |
+
<p class="text-gray-500">Total Trading Partners</p>
|
| 65 |
+
<h3 class="text-2xl font-bold">142</h3>
|
| 66 |
+
</div>
|
| 67 |
+
</div>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<div class="bg-white rounded-lg shadow p-6">
|
| 71 |
+
<div class="flex items-center">
|
| 72 |
+
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
|
| 73 |
+
<i class="fas fa-boxes text-xl"></i>
|
| 74 |
+
</div>
|
| 75 |
+
<div>
|
| 76 |
+
<p class="text-gray-500">Total Imports (2023)</p>
|
| 77 |
+
<h3 class="text-2xl font-bold">$3.4T</h3>
|
| 78 |
+
</div>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
|
| 82 |
+
<div class="bg-white rounded-lg shadow p-6">
|
| 83 |
+
<div class="flex items-center">
|
| 84 |
+
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
|
| 85 |
+
<i class="fas fa-money-bill-wave text-xl"></i>
|
| 86 |
+
</div>
|
| 87 |
+
<div>
|
| 88 |
+
<p class="text-gray-500">Total Tariff Revenue</p>
|
| 89 |
+
<h3 class="text-2xl font-bold">$85.2B</h3>
|
| 90 |
+
</div>
|
| 91 |
+
</div>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
|
| 95 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
| 96 |
+
<!-- Charts -->
|
| 97 |
+
<div class="bg-white rounded-lg shadow p-6 col-span-2">
|
| 98 |
+
<h2 class="text-xl font-semibold mb-4 text-primary">Top Import Sources by Value</h2>
|
| 99 |
+
<div class="chart-container">
|
| 100 |
+
<canvas id="importsChart"></canvas>
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
|
| 104 |
+
<div class="bg-white rounded-lg shadow p-6">
|
| 105 |
+
<h2 class="text-xl font-semibold mb-4 text-primary">Tariff Revenue by Region</h2>
|
| 106 |
+
<div class="chart-container">
|
| 107 |
+
<canvas id="revenueChart"></canvas>
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
|
| 112 |
+
<div class="bg-white rounded-lg shadow overflow-hidden mb-8">
|
| 113 |
+
<div class="p-6 border-b border-gray-200">
|
| 114 |
+
<h2 class="text-xl font-semibold text-primary">Detailed Tariff Data by Country</h2>
|
| 115 |
+
<p class="text-gray-600">Scroll to view all data. Click on headers to sort.</p>
|
| 116 |
+
</div>
|
| 117 |
+
<div class="p-4">
|
| 118 |
+
<div class="relative">
|
| 119 |
+
<input type="text" placeholder="Search countries..." class="w-full lg:w-1/3 mb-4 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent">
|
| 120 |
+
</div>
|
| 121 |
+
<div class="data-table">
|
| 122 |
+
<table class="min-w-full divide-y divide-gray-200">
|
| 123 |
+
<thead class="bg-gray-50">
|
| 124 |
+
<tr>
|
| 125 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
|
| 126 |
+
<div class="flex items-center">
|
| 127 |
+
Country
|
| 128 |
+
<i class="fas fa-sort ml-2 text-gray-400"></i>
|
| 129 |
+
</div>
|
| 130 |
+
</th>
|
| 131 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
|
| 132 |
+
<div class="flex items-center">
|
| 133 |
+
Avg Tariff Rate (%)
|
| 134 |
+
<i class="fas fa-sort ml-2 text-gray-400"></i>
|
| 135 |
+
</div>
|
| 136 |
+
</th>
|
| 137 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
|
| 138 |
+
<div class="flex items-center">
|
| 139 |
+
Import Value ($B)
|
| 140 |
+
<i class="fas fa-sort ml-2 text-gray-400"></i>
|
| 141 |
+
</div>
|
| 142 |
+
</th>
|
| 143 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
|
| 144 |
+
<div class="flex items-center">
|
| 145 |
+
Tariff Revenue ($B)
|
| 146 |
+
<i class="fas fa-sort ml-2 text-gray-400"></i>
|
| 147 |
+
</div>
|
| 148 |
+
</th>
|
| 149 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
|
| 150 |
+
<div class="flex items-center">
|
| 151 |
+
Top Product
|
| 152 |
+
<i class="fas fa-sort ml-2 text-gray-400"></i>
|
| 153 |
+
</div>
|
| 154 |
+
</th>
|
| 155 |
+
</tr>
|
| 156 |
+
</thead>
|
| 157 |
+
<tbody class="bg-white divide-y divide-gray-200" id="tariffData">
|
| 158 |
+
<!-- Data will be inserted here by JavaScript -->
|
| 159 |
+
</tbody>
|
| 160 |
+
</table>
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
</div>
|
| 164 |
+
|
| 165 |
+
<div class="bg-white rounded-lg shadow p-6 mb-8">
|
| 166 |
+
<h2 class="text-xl font-semibold mb-4 text-primary">Key Insights</h2>
|
| 167 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 168 |
+
<div>
|
| 169 |
+
<h3 class="font-medium text-lg mb-2">Highest Average Tariff Rates</h3>
|
| 170 |
+
<ul class="space-y-2">
|
| 171 |
+
<li class="flex items-start">
|
| 172 |
+
<span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full mr-2">1</span>
|
| 173 |
+
<div>
|
| 174 |
+
<span class="font-medium">North Korea</span> - 35.0%
|
| 175 |
+
<p class="text-sm text-gray-600">Primarily due to comprehensive trade restrictions</p>
|
| 176 |
+
</div>
|
| 177 |
+
</li>
|
| 178 |
+
<li class="flex items-start">
|
| 179 |
+
<span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full mr-2">2</span>
|
| 180 |
+
<div>
|
| 181 |
+
<span class="font-medium">Cuba</span> - 28.5%
|
| 182 |
+
<p class="text-sm text-gray-600">Result of long-standing trade embargo policies</p>
|
| 183 |
+
</div>
|
| 184 |
+
</li>
|
| 185 |
+
<li class="flex items-start">
|
| 186 |
+
<span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full mr-2">3</span>
|
| 187 |
+
<div>
|
| 188 |
+
<span class="font-medium">Russia</span> - 22.7%
|
| 189 |
+
<p class="text-sm text-gray-600">Increased tariffs following 2022 sanctions</p>
|
| 190 |
+
</div>
|
| 191 |
+
</li>
|
| 192 |
+
</ul>
|
| 193 |
+
</div>
|
| 194 |
+
<div>
|
| 195 |
+
<h3 class="font-medium text-lg mb-2">Largest Sources of Tariff Revenue</h3>
|
| 196 |
+
<ul class="space-y-2">
|
| 197 |
+
<li class="flex items-start">
|
| 198 |
+
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">1</span>
|
| 199 |
+
<div>
|
| 200 |
+
<span class="font-medium">China</span> - $32.8B
|
| 201 |
+
<p class="text-sm text-gray-600">Section 301 tariffs account for majority of revenue</p>
|
| 202 |
+
</div>
|
| 203 |
+
</li>
|
| 204 |
+
<li class="flex items-start">
|
| 205 |
+
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">2</span>
|
| 206 |
+
<div>
|
| 207 |
+
<span class="font-medium">European Union</span> - $12.4B
|
| 208 |
+
<p class="text-sm text-gray-600">Primarily from steel, aluminum, and agricultural products</p>
|
| 209 |
+
</div>
|
| 210 |
+
</li>
|
| 211 |
+
<li class="flex items-start">
|
| 212 |
+
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">3</span>
|
| 213 |
+
<div>
|
| 214 |
+
<span class="font-medium">Mexico</span> - $8.2B
|
| 215 |
+
<p class="text-sm text-gray-600">Automotive and agricultural imports dominate</p>
|
| 216 |
+
</div>
|
| 217 |
+
</li>
|
| 218 |
+
</ul>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
</div>
|
| 222 |
+
|
| 223 |
+
<div class="bg-white rounded-lg shadow p-6">
|
| 224 |
+
<h2 class="text-xl font-semibold mb-4 text-primary">Data Methodology</h2>
|
| 225 |
+
<div class="prose max-w-none">
|
| 226 |
+
<p>This dashboard presents simulated data to demonstrate how real US tariff information could be displayed. Actual tariff data includes:</p>
|
| 227 |
+
<ul class="list-disc pl-5 space-y-1">
|
| 228 |
+
<li>Most Favored Nation (MFN) tariff rates applied to WTO members</li>
|
| 229 |
+
<li>Preferential tariff rates under free trade agreements (NAFTA/USMCA, CAFTA-DR, etc.)</li>
|
| 230 |
+
<li>Special tariff programs (GSP, AGOA, etc.)</li>
|
| 231 |
+
<li>Section 301, 232, and other special tariffs</li>
|
| 232 |
+
</ul>
|
| 233 |
+
<p class="mt-4">For official data, please consult:</p>
|
| 234 |
+
<div class="flex flex-wrap gap-2 mt-2">
|
| 235 |
+
<a href="https://dataweb.usitc.gov/" class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200">USITC DataWeb</a>
|
| 236 |
+
<a href="https://www.cbp.gov/trade" class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200">CBP Trade</a>
|
| 237 |
+
<a href="https://ustr.gov/issue-areas/enforcement/section-301-investigations" class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200">USTR Section 301</a>
|
| 238 |
+
</div>
|
| 239 |
+
</div>
|
| 240 |
+
</div>
|
| 241 |
+
</div>
|
| 242 |
+
|
| 243 |
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| 244 |
+
<script>
|
| 245 |
+
// Sample data - in a real application, this would come from an API
|
| 246 |
+
const tariffData = [
|
| 247 |
+
{ country: "China", tariffRate: 19.3, importValue: 536.8, revenue: 32.8, topProduct: "Electronics" },
|
| 248 |
+
{ country: "Mexico", tariffRate: 2.5, importValue: 324.2, revenue: 8.2, topProduct: "Vehicles" },
|
| 249 |
+
{ country: "Canada", tariffRate: 1.9, importValue: 356.2, revenue: 6.7, topProduct: "Mineral Fuels" },
|
| 250 |
+
{ country: "Japan", tariffRate: 3.2, importValue: 148.1, revenue: 4.7, topProduct: "Machinery" },
|
| 251 |
+
{ country: "Germany", tariffRate: 4.1, importValue: 146.2, revenue: 5.9, topProduct: "Pharmaceuticals" },
|
| 252 |
+
{ country: "South Korea", tariffRate: 3.8, importValue: 98.6, revenue: 3.7, topProduct: "Semiconductors" },
|
| 253 |
+
{ country: "United Kingdom", tariffRate: 3.5, importValue: 77.2, revenue: 2.7, topProduct: "Aerospace" },
|
| 254 |
+
{ country: "India", tariffRate: 6.2, importValue: 87.5, revenue: 5.4, topProduct: "Textiles" },
|
| 255 |
+
{ country: "France", tariffRate: 4.3, importValue: 62.3, revenue: 2.6, topProduct: "Wine & Spirits" },
|
| 256 |
+
{ country: "Vietnam", tariffRate: 8.7, importValue: 105.4, revenue: 9.1, topProduct: "Footwear" },
|
| 257 |
+
{ country: "Italy", tariffRate: 3.9, importValue: 58.7, revenue: 2.2, topProduct: "Fashion" },
|
| 258 |
+
{ country: "Taiwan", tariffRate: 4.5, importValue: 78.9, revenue: 3.5, topProduct: "Computer Chips" },
|
| 259 |
+
{ country: "Brazil", tariffRate: 5.1, importValue: 42.3, revenue: 2.1, topProduct: "Coffee" },
|
| 260 |
+
{ country: "Russia", tariffRate: 22.7, importValue: 15.8, revenue: 3.5, topProduct: "Oil" },
|
| 261 |
+
{ country: "Thailand", tariffRate: 7.3, importValue: 48.6, revenue: 3.5, topProduct: "Rubber" },
|
| 262 |
+
{ country: "Malaysia", tariffRate: 6.8, importValue: 52.3, revenue: 3.5, topProduct: "Palm Oil" },
|
| 263 |
+
{ country: "Switzerland", tariffRate: 3.1, importValue: 45.2, revenue: 1.4, topProduct: "Watches" },
|
| 264 |
+
{ country: "Ireland", tariffRate: 2.8, importValue: 68.5, revenue: 1.9, topProduct: "Medical Devices" },
|
| 265 |
+
{ country: "Australia", tariffRate: 2.3, importValue: 32.7, revenue: 0.7, topProduct: "Beef" },
|
| 266 |
+
{ country: "Israel", tariffRate: 4.2, importValue: 28.4, revenue: 1.1, topProduct: "Diamonds" }
|
| 267 |
+
];
|
| 268 |
+
|
| 269 |
+
// Populate the table
|
| 270 |
+
const tableBody = document.getElementById('tariffData');
|
| 271 |
+
|
| 272 |
+
tariffData.forEach(item => {
|
| 273 |
+
const row = document.createElement('tr');
|
| 274 |
+
row.className = 'hover:bg-gray-50';
|
| 275 |
+
row.innerHTML = `
|
| 276 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 277 |
+
<div class="flex items-center">
|
| 278 |
+
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
|
| 279 |
+
<i class="fas fa-flag text-blue-600"></i>
|
| 280 |
+
</div>
|
| 281 |
+
<div class="ml-4">
|
| 282 |
+
<div class="text-sm font-medium text-gray-900">${item.country}</div>
|
| 283 |
+
</div>
|
| 284 |
+
</div>
|
| 285 |
+
</td>
|
| 286 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 287 |
+
<div class="text-sm text-gray-900">${item.tariffRate.toFixed(1)}%</div>
|
| 288 |
+
</td>
|
| 289 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 290 |
+
<div class="text-sm text-gray-900">$${item.importValue.toFixed(1)}</div>
|
| 291 |
+
</td>
|
| 292 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 293 |
+
<div class="text-sm text-gray-900">$${item.revenue.toFixed(1)}</div>
|
| 294 |
+
</td>
|
| 295 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 296 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
| 297 |
+
${item.topProduct}
|
| 298 |
+
</span>
|
| 299 |
+
</td>
|
| 300 |
+
`;
|
| 301 |
+
tableBody.appendChild(row);
|
| 302 |
+
});
|
| 303 |
+
|
| 304 |
+
// Create charts
|
| 305 |
+
const importsCtx = document.getElementById('importsChart').getContext('2d');
|
| 306 |
+
const importsChart = new Chart(importsCtx, {
|
| 307 |
+
type: 'bar',
|
| 308 |
+
data: {
|
| 309 |
+
labels: tariffData.slice(0, 10).map(item => item.country),
|
| 310 |
+
datasets: [{
|
| 311 |
+
label: 'Import Value ($B)',
|
| 312 |
+
data: tariffData.slice(0, 10).map(item => item.importValue),
|
| 313 |
+
backgroundColor: 'rgba(54, 162, 235, 0.7)',
|
| 314 |
+
borderColor: 'rgba(54, 162, 235, 1)',
|
| 315 |
+
borderWidth: 1
|
| 316 |
+
}]
|
| 317 |
+
},
|
| 318 |
+
options: {
|
| 319 |
+
responsive: true,
|
| 320 |
+
maintainAspectRatio: false,
|
| 321 |
+
scales: {
|
| 322 |
+
y: {
|
| 323 |
+
beginAtZero: true,
|
| 324 |
+
title: {
|
| 325 |
+
display: true,
|
| 326 |
+
text: 'Billions of USD'
|
| 327 |
+
}
|
| 328 |
+
}
|
| 329 |
+
}
|
| 330 |
+
}
|
| 331 |
+
});
|
| 332 |
+
|
| 333 |
+
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
|
| 334 |
+
const revenueChart = new Chart(revenueCtx, {
|
| 335 |
+
type: 'doughnut',
|
| 336 |
+
data: {
|
| 337 |
+
labels: ['Asia', 'North America', 'Europe', 'South America', 'Africa', 'Oceania'],
|
| 338 |
+
datasets: [{
|
| 339 |
+
data: [62, 15, 12, 6, 3, 2],
|
| 340 |
+
backgroundColor: [
|
| 341 |
+
'rgba(255, 99, 132, 0.7)',
|
| 342 |
+
'rgba(54, 162, 235, 0.7)',
|
| 343 |
+
'rgba(255, 206, 86, 0.7)',
|
| 344 |
+
'rgba(75, 192, 192, 0.7)',
|
| 345 |
+
'rgba(153, 102, 255, 0.7)',
|
| 346 |
+
'rgba(255, 159, 64, 0.7)'
|
| 347 |
+
],
|
| 348 |
+
borderWidth: 1
|
| 349 |
+
}]
|
| 350 |
+
},
|
| 351 |
+
options: {
|
| 352 |
+
responsive: true,
|
| 353 |
+
maintainAspectRatio: false,
|
| 354 |
+
plugins: {
|
| 355 |
+
legend: {
|
| 356 |
+
position: 'right',
|
| 357 |
+
},
|
| 358 |
+
tooltip: {
|
| 359 |
+
callbacks: {
|
| 360 |
+
label: function(context) {
|
| 361 |
+
return `${context.label}: $${context.raw}B (${Math.round(context.raw/85.2*100)}%)`;
|
| 362 |
+
}
|
| 363 |
+
}
|
| 364 |
+
}
|
| 365 |
+
}
|
| 366 |
+
}
|
| 367 |
+
});
|
| 368 |
+
|
| 369 |
+
// Simple search functionality
|
| 370 |
+
const searchInput = document.querySelector('input[type="text"]');
|
| 371 |
+
searchInput.addEventListener('input', (e) => {
|
| 372 |
+
const searchTerm = e.target.value.toLowerCase();
|
| 373 |
+
const rows = tableBody.querySelectorAll('tr');
|
| 374 |
+
|
| 375 |
+
rows.forEach(row => {
|
| 376 |
+
const countryName = row.querySelector('td:first-child div div').textContent.toLowerCase();
|
| 377 |
+
if (countryName.includes(searchTerm)) {
|
| 378 |
+
row.style.display = '';
|
| 379 |
+
} else {
|
| 380 |
+
row.style.display = 'none';
|
| 381 |
+
}
|
| 382 |
+
});
|
| 383 |
+
});
|
| 384 |
+
|
| 385 |
+
// Simple sorting functionality
|
| 386 |
+
const headers = document.querySelectorAll('th');
|
| 387 |
+
headers.forEach((header, index) => {
|
| 388 |
+
header.addEventListener('click', () => {
|
| 389 |
+
sortTable(index);
|
| 390 |
+
});
|
| 391 |
+
});
|
| 392 |
+
|
| 393 |
+
function sortTable(columnIndex) {
|
| 394 |
+
const rows = Array.from(tableBody.querySelectorAll('tr'));
|
| 395 |
+
|
| 396 |
+
rows.sort((a, b) => {
|
| 397 |
+
const aValue = a.querySelectorAll('td')[columnIndex].textContent;
|
| 398 |
+
const bValue = b.querySelectorAll('td')[columnIndex].textContent;
|
| 399 |
+
|
| 400 |
+
// Handle numeric values
|
| 401 |
+
if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
|
| 402 |
+
const aNum = parseFloat(aValue.replace(/[^0-9.-]/g, ''));
|
| 403 |
+
const bNum = parseFloat(bValue.replace(/[^0-9.-]/g, ''));
|
| 404 |
+
return aNum - bNum;
|
| 405 |
+
}
|
| 406 |
+
|
| 407 |
+
// Handle text values
|
| 408 |
+
return aValue.localeCompare(bValue);
|
| 409 |
+
});
|
| 410 |
+
|
| 411 |
+
// Clear and re-add sorted rows
|
| 412 |
+
tableBody.innerHTML = '';
|
| 413 |
+
rows.forEach(row => tableBody.appendChild(row));
|
| 414 |
+
}
|
| 415 |
+
</script>
|
| 416 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=anonymous111110987654321/us-tariff-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 417 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
give me a full breakdown of all current US tariff rates by foreign Country as well as the current value of imported goods from these Countries into the US. Also, calculate the total tariff revenue produced by these tariffs for the US.
|