Hugging Face's logo

Spaces:
anonymous111110987654321
/
honda-customs-dashboard
Running

App Files Community
anonymous111110987654321 commited on
Commit
e70fb8d
·
verified ·
1 Parent(s): 1c7bfa8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +618 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Honda Customs Dashboard
3
- emoji: 💻
4
  colorFrom: purple
5
  colorTo: yellow
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: honda-customs-dashboard
3
+ emoji: 🐳
4
  colorFrom: purple
5
  colorTo: yellow
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,618 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Honda Customs Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .chart-container {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .chart-container:hover {
15
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .dropdown-container {
18
+ transition: all 0.2s ease;
19
+ }
20
+ .dropdown-container:hover {
21
+ transform: translateY(-2px);
22
+ }
23
+ .data-table {
24
+ max-height: 400px;
25
+ overflow-y: auto;
26
+ }
27
+ .toggle-btn {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .toggle-btn:hover {
31
+ background-color: #3b82f6;
32
+ color: white;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50">
37
+ <div class="container mx-auto px-4 py-8">
38
+ <!-- Header -->
39
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl p-6 mb-8 shadow-lg">
40
+ <div class="flex items-center justify-between">
41
+ <div>
42
+ <h1 class="text-3xl font-bold text-white flex items-center">
43
+ <i class="fas fa-chart-line mr-3"></i> Honda Customs Dashboard
44
+ </h1>
45
+ <p class="text-blue-100 mt-2">Analyze 301 tariff impacts on Honda imports</p>
46
+ </div>
47
+ <div class="bg-white/20 p-3 rounded-full">
48
+ <i class="fas fa-car text-white text-2xl"></i>
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- How to Use Section -->
54
+ <div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-4 mb-8 shadow-sm">
55
+ <div class="flex items-start">
56
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
57
+ <i class="fas fa-info-circle text-blue-600"></i>
58
+ </div>
59
+ <div>
60
+ <h3 class="font-semibold text-blue-800 mb-2">How to Use This Dashboard</h3>
61
+ <ol class="list-decimal list-inside text-gray-700 space-y-1">
62
+ <li>Use the filters below to analyze tariff impacts</li>
63
+ <li>Each chart updates interactively with your selections</li>
64
+ <li>Hover over chart elements for detailed information</li>
65
+ <li>Click legend items to isolate specific data</li>
66
+ </ol>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Filters Section -->
72
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
73
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
74
+ <i class="fas fa-sliders-h mr-2 text-blue-500"></i> Data Filters
75
+ </h2>
76
+
77
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
78
+ <!-- Country Filter -->
79
+ <div class="dropdown-container">
80
+ <label class="block text-sm font-medium text-gray-700 mb-1">Country of Origin</label>
81
+ <select id="country-filter" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
82
+ <option value="all" selected>All Countries</option>
83
+ <option value="Japan">Japan</option>
84
+ <option value="Mexico">Mexico</option>
85
+ <option value="US">US</option>
86
+ <option value="Canada">Canada</option>
87
+ </select>
88
+ </div>
89
+
90
+ <!-- Product Filter -->
91
+ <div class="dropdown-container">
92
+ <label class="block text-sm font-medium text-gray-700 mb-1">Product</label>
93
+ <select id="product-filter" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
94
+ <option value="all" selected>All Products</option>
95
+ <option value="Engine">Engine</option>
96
+ <option value="Transmission">Transmission</option>
97
+ <option value="Chassis">Chassis</option>
98
+ <option value="Brake Kit">Brake Kit</option>
99
+ <option value="Wheel">Wheel</option>
100
+ </select>
101
+ </div>
102
+
103
+ <!-- Importer Filter -->
104
+ <div class="dropdown-container">
105
+ <label class="block text-sm font-medium text-gray-700 mb-1">Importer</label>
106
+ <select id="importer-filter" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
107
+ <option value="all" selected>All Importers</option>
108
+ <option value="Honda US">Honda US</option>
109
+ <option value="Honda Mexico">Honda Mexico</option>
110
+ </select>
111
+ </div>
112
+
113
+ <!-- HS Code Filter -->
114
+ <div class="dropdown-container">
115
+ <label class="block text-sm font-medium text-gray-700 mb-1">HS Code</label>
116
+ <select id="hscode-filter" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
117
+ <option value="all" selected>All HS Codes</option>
118
+ <option value="870829">870829</option>
119
+ <option value="840734">840734</option>
120
+ <option value="870840">870840</option>
121
+ <option value="870850">870850</option>
122
+ <option value="870870">870870</option>
123
+ </select>
124
+ </div>
125
+
126
+ <!-- Tariff Rate Filter -->
127
+ <div class="dropdown-container">
128
+ <label class="block text-sm font-medium text-gray-700 mb-1">301 Tariff Rate (%)</label>
129
+ <select id="tariffrate-filter" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
130
+ <option value="all" selected>All Rates</option>
131
+ <option value="0">0%</option>
132
+ <option value="10">10%</option>
133
+ <option value="25">25%</option>
134
+ </select>
135
+ </div>
136
+
137
+ <!-- Date Range Filter -->
138
+ <div class="dropdown-container">
139
+ <label class="block text-sm font-medium text-gray-700 mb-1">Entry Date Range</label>
140
+ <div class="flex space-x-2">
141
+ <input type="date" id="start-date" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
142
+ <span class="flex items-center">to</span>
143
+ <input type="date" id="end-date" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="mt-4 flex justify-end">
149
+ <button id="reset-filters" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg mr-2 transition">
150
+ <i class="fas fa-undo mr-1"></i> Reset
151
+ </button>
152
+ <button id="apply-filters" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
153
+ <i class="fas fa-filter mr-1"></i> Apply Filters
154
+ </button>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Charts Section -->
159
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
160
+ <!-- Bar Chart -->
161
+ <div class="chart-container bg-white p-4 rounded-xl shadow-md">
162
+ <div class="flex justify-between items-center mb-3">
163
+ <h3 class="font-medium text-gray-800">
164
+ <i class="fas fa-chart-bar text-blue-500 mr-2"></i> Tariff by Country
165
+ </h3>
166
+ <div class="flex space-x-2">
167
+ <button class="text-gray-400 hover:text-gray-600">
168
+ <i class="fas fa-expand"></i>
169
+ </button>
170
+ </div>
171
+ </div>
172
+ <div id="bar-country-tariff" class="w-full h-64"></div>
173
+ </div>
174
+
175
+ <!-- Pie Chart -->
176
+ <div class="chart-container bg-white p-4 rounded-xl shadow-md">
177
+ <div class="flex justify-between items-center mb-3">
178
+ <h3 class="font-medium text-gray-800">
179
+ <i class="fas fa-chart-pie text-blue-500 mr-2"></i> Product Value Share
180
+ </h3>
181
+ <div class="flex space-x-2">
182
+ <button class="text-gray-400 hover:text-gray-600">
183
+ <i class="fas fa-expand"></i>
184
+ </button>
185
+ </div>
186
+ </div>
187
+ <div id="pie-product-share" class="w-full h-64"></div>
188
+ </div>
189
+
190
+ <!-- Line Chart -->
191
+ <div class="chart-container bg-white p-4 rounded-xl shadow-md">
192
+ <div class="flex justify-between items-center mb-3">
193
+ <h3 class="font-medium text-gray-800">
194
+ <i class="fas fa-chart-line text-blue-500 mr-2"></i> Tariff Over Time
195
+ </h3>
196
+ <div class="flex space-x-2">
197
+ <button class="text-gray-400 hover:text-gray-600">
198
+ <i class="fas fa-expand"></i>
199
+ </button>
200
+ </div>
201
+ </div>
202
+ <div id="line-date-tariff" class="w-full h-64"></div>
203
+ </div>
204
+
205
+ <!-- Scatter Plot -->
206
+ <div class="chart-container bg-white p-4 rounded-xl shadow-md">
207
+ <div class="flex justify-between items-center mb-3">
208
+ <h3 class="font-medium text-gray-800">
209
+ <i class="fas fa-braille text-blue-500 mr-2"></i> Value vs Quantity
210
+ </h3>
211
+ <div class="flex space-x-2">
212
+ <button class="text-gray-400 hover:text-gray-600">
213
+ <i class="fas fa-expand"></i>
214
+ </button>
215
+ </div>
216
+ </div>
217
+ <div id="scatter-value-quantity" class="w-full h-64"></div>
218
+ </div>
219
+
220
+ <!-- Histogram -->
221
+ <div class="chart-container bg-white p-4 rounded-xl shadow-md">
222
+ <div class="flex justify-between items-center mb-3">
223
+ <h3 class="font-medium text-gray-800">
224
+ <i class="fas fa-chart-area text-blue-500 mr-2"></i> Declared Value Distribution
225
+ </h3>
226
+ <div class="flex space-x-2">
227
+ <button class="text-gray-400 hover:text-gray-600">
228
+ <i class="fas fa-expand"></i>
229
+ </button>
230
+ </div>
231
+ </div>
232
+ <div id="hist-declared-value" class="w-full h-64"></div>
233
+ </div>
234
+
235
+ <!-- Box Plot -->
236
+ <div class="chart-container bg-white p-4 rounded-xl shadow-md">
237
+ <div class="flex justify-between items-center mb-3">
238
+ <h3 class="font-medium text-gray-800">
239
+ <i class="fas fa-boxes text-blue-500 mr-2"></i> Tariff by Product
240
+ </h3>
241
+ <div class="flex space-x-2">
242
+ <button class="text-gray-400 hover:text-gray-600">
243
+ <i class="fas fa-expand"></i>
244
+ </button>
245
+ </div>
246
+ </div>
247
+ <div id="box-tariff-rate-product" class="w-full h-64"></div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Data Table Section -->
252
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
253
+ <div class="flex justify-between items-center bg-gray-50 px-6 py-4 border-b">
254
+ <h3 class="font-medium text-gray-800">
255
+ <i class="fas fa-table text-blue-500 mr-2"></i> Detailed Import Data
256
+ </h3>
257
+ <button id="toggle-table" class="toggle-btn bg-gray-200 text-gray-700 px-3 py-1 rounded-lg text-sm">
258
+ <i class="fas fa-chevron-down mr-1"></i> Collapse
259
+ </button>
260
+ </div>
261
+ <div id="data-table-container" class="p-4">
262
+ <div class="overflow-x-auto data-table">
263
+ <table class="min-w-full divide-y divide-gray-200">
264
+ <thead class="bg-gray-50">
265
+ <tr>
266
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entry #</th>
267
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
268
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
269
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
270
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
271
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
272
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tariff Rate</th>
273
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tariff Amount</th>
274
+ </tr>
275
+ </thead>
276
+ <tbody id="table-body" class="bg-white divide-y divide-gray-200">
277
+ <!-- Table rows will be inserted here by JavaScript -->
278
+ </tbody>
279
+ </table>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Summary Cards -->
285
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
286
+ <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-blue-500">
287
+ <div class="flex items-center justify-between">
288
+ <div>
289
+ <p class="text-sm text-gray-500">Total Entries</p>
290
+ <h3 class="text-2xl font-bold text-gray-800" id="total-entries">100</h3>
291
+ </div>
292
+ <div class="bg-blue-100 p-3 rounded-full">
293
+ <i class="fas fa-list text-blue-600"></i>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-green-500">
298
+ <div class="flex items-center justify-between">
299
+ <div>
300
+ <p class="text-sm text-gray-500">Total Value</p>
301
+ <h3 class="text-2xl font-bold text-gray-800" id="total-value">$2,450,000</h3>
302
+ </div>
303
+ <div class="bg-green-100 p-3 rounded-full">
304
+ <i class="fas fa-dollar-sign text-green-600"></i>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-red-500">
309
+ <div class="flex items-center justify-between">
310
+ <div>
311
+ <p class="text-sm text-gray-500">Total Tariff</p>
312
+ <h3 class="text-2xl font-bold text-gray-800" id="total-tariff">$245,000</h3>
313
+ </div>
314
+ <div class="bg-red-100 p-3 rounded-full">
315
+ <i class="fas fa-file-invoice-dollar text-red-600"></i>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-purple-500">
320
+ <div class="flex items-center justify-between">
321
+ <div>
322
+ <p class="text-sm text-gray-500">Avg Tariff Rate</p>
323
+ <h3 class="text-2xl font-bold text-gray-800" id="avg-tariff-rate">10.5%</h3>
324
+ </div>
325
+ <div class="bg-purple-100 p-3 rounded-full">
326
+ <i class="fas fa-percent text-purple-600"></i>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Footer -->
333
+ <div class="text-center text-gray-500 text-sm py-4 border-t">
334
+ <p>Honda Customs Dashboard &copy; 2023 | Data updated: <span id="last-updated">Today</span></p>
335
+ </div>
336
+ </div>
337
+
338
+ <script>
339
+ // Sample data - in a real app, this would come from an API
340
+ const demoData = [
341
+ { entryNumber: 1001, entryDate: '2023-01-05', country: 'Japan', product: 'Engine', value: 25000, quantity: 10, tariffRate: 10, tariffAmount: 2500 },
342
+ { entryNumber: 1002, entryDate: '2023-01-10', country: 'Mexico', product: 'Transmission', value: 18000, quantity: 15, tariffRate: 0, tariffAmount: 0 },
343
+ { entryNumber: 1003, entryDate: '2023-01-15', country: 'US', product: 'Chassis', value: 32000, quantity: 5, tariffRate: 25, tariffAmount: 8000 },
344
+ { entryNumber: 1004, entryDate: '2023-01-20', country: 'Canada', product: 'Brake Kit', value: 12000, quantity: 20, tariffRate: 10, tariffAmount: 1200 },
345
+ { entryNumber: 1005, entryDate: '2023-01-25', country: 'Japan', product: 'Wheel', value: 8000, quantity: 50, tariffRate: 10, tariffAmount: 800 },
346
+ { entryNumber: 1006, entryDate: '2023-02-01', country: 'Mexico', product: 'Engine', value: 22000, quantity: 8, tariffRate: 0, tariffAmount: 0 },
347
+ { entryNumber: 1007, entryDate: '2023-02-05', country: 'Japan', product: 'Transmission', value: 19000, quantity: 12, tariffRate: 10, tariffAmount: 1900 },
348
+ { entryNumber: 1008, entryDate: '2023-02-10', country: 'US', product: 'Chassis', value: 35000, quantity: 4, tariffRate: 25, tariffAmount: 8750 },
349
+ { entryNumber: 1009, entryDate: '2023-02-15', country: 'Canada', product: 'Brake Kit', value: 11000, quantity: 18, tariffRate: 10, tariffAmount: 1100 },
350
+ { entryNumber: 1010, entryDate: '2023-02-20', country: 'Japan', product: 'Wheel', value: 8500, quantity: 45, tariffRate: 10, tariffAmount: 850 },
351
+ { entryNumber: 1011, entryDate: '2023-02-25', country: 'Mexico', product: 'Engine', value: 24000, quantity: 9, tariffRate: 0, tariffAmount: 0 },
352
+ { entryNumber: 1012, entryDate: '2023-03-01', country: 'Japan', product: 'Transmission', value: 20000, quantity: 10, tariffRate: 10, tariffAmount: 2000 },
353
+ { entryNumber: 1013, entryDate: '2023-03-05', country: 'US', product: 'Chassis', value: 30000, quantity: 6, tariffRate: 25, tariffAmount: 7500 },
354
+ { entryNumber: 1014, entryDate: '2023-03-10', country: 'Canada', product: 'Brake Kit', value: 13000, quantity: 15, tariffRate: 10, tariffAmount: 1300 },
355
+ { entryNumber: 1015, entryDate: '2023-03-15', country: 'Japan', product: 'Wheel', value: 9000, quantity: 40, tariffRate: 10, tariffAmount: 900 },
356
+ ];
357
+
358
+ // Initialize charts with all data
359
+ function initializeCharts(data) {
360
+ // Calculate summary metrics
361
+ const totalEntries = data.length;
362
+ const totalValue = data.reduce((sum, item) => sum + item.value, 0);
363
+ const totalTariff = data.reduce((sum, item) => sum + item.tariffAmount, 0);
364
+ const avgTariffRate = (totalTariff / totalValue * 100).toFixed(1);
365
+
366
+ // Update summary cards
367
+ document.getElementById('total-entries').textContent = totalEntries;
368
+ document.getElementById('total-value').textContent = `$${totalValue.toLocaleString()}`;
369
+ document.getElementById('total-tariff').textContent = `$${totalTariff.toLocaleString()}`;
370
+ document.getElementById('avg-tariff-rate').textContent = `${avgTariffRate}%`;
371
+
372
+ // 1. Bar Chart - Tariff by Country
373
+ const countryGroups = data.reduce((acc, item) => {
374
+ if (!acc[item.country]) acc[item.country] = 0;
375
+ acc[item.country] += item.tariffAmount;
376
+ return acc;
377
+ }, {});
378
+
379
+ const barData = {
380
+ x: Object.keys(countryGroups),
381
+ y: Object.values(countryGroups),
382
+ type: 'bar',
383
+ marker: {
384
+ color: ['#3b82f6', '#10b981', '#ef4444', '#8b5cf6']
385
+ }
386
+ };
387
+
388
+ Plotly.newPlot('bar-country-tariff', [barData], {
389
+ title: 'Total Tariff by Country',
390
+ margin: { t: 30, l: 40, r: 20, b: 60 },
391
+ xaxis: { title: 'Country of Origin' },
392
+ yaxis: { title: 'Tariff Amount ($)' }
393
+ });
394
+
395
+ // 2. Pie Chart - Product Share
396
+ const productGroups = data.reduce((acc, item) => {
397
+ if (!acc[item.product]) acc[item.product] = 0;
398
+ acc[item.product] += item.value;
399
+ return acc;
400
+ }, {});
401
+
402
+ const pieData = {
403
+ values: Object.values(productGroups),
404
+ labels: Object.keys(productGroups),
405
+ type: 'pie',
406
+ marker: {
407
+ colors: ['#3b82f6', '#10b981', '#ef4444', '#8b5cf6', '#f59e0b']
408
+ }
409
+ };
410
+
411
+ Plotly.newPlot('pie-product-share', [pieData], {
412
+ title: 'Product Value Share',
413
+ margin: { t: 30, l: 0, r: 0, b: 0 }
414
+ });
415
+
416
+ // 3. Line Chart - Tariff Over Time
417
+ const dateGroups = data.reduce((acc, item) => {
418
+ if (!acc[item.entryDate]) acc[item.entryDate] = 0;
419
+ acc[item.entryDate] += item.tariffAmount;
420
+ return acc;
421
+ }, {});
422
+
423
+ const sortedDates = Object.keys(dateGroups).sort();
424
+ const lineData = {
425
+ x: sortedDates,
426
+ y: sortedDates.map(date => dateGroups[date]),
427
+ type: 'line',
428
+ line: { color: '#3b82f6', width: 2 }
429
+ };
430
+
431
+ Plotly.newPlot('line-date-tariff', [lineData], {
432
+ title: 'Tariff Amount Over Time',
433
+ margin: { t: 30, l: 40, r: 20, b: 60 },
434
+ xaxis: { title: 'Entry Date' },
435
+ yaxis: { title: 'Tariff Amount ($)' }
436
+ });
437
+
438
+ // 4. Scatter Plot - Value vs Quantity
439
+ const scatterData = {
440
+ x: data.map(item => item.value),
441
+ y: data.map(item => item.quantity),
442
+ mode: 'markers',
443
+ type: 'scatter',
444
+ text: data.map(item => `${item.product} (${item.country})`),
445
+ marker: {
446
+ size: data.map(item => Math.sqrt(item.tariffAmount) * 2),
447
+ color: data.map(item => {
448
+ if (item.country === 'Japan') return '#3b82f6';
449
+ if (item.country === 'Mexico') return '#10b981';
450
+ if (item.country === 'US') return '#ef4444';
451
+ return '#8b5cf6';
452
+ }),
453
+ opacity: 0.7
454
+ }
455
+ };
456
+
457
+ Plotly.newPlot('scatter-value-quantity', [scatterData], {
458
+ title: 'Declared Value vs Quantity',
459
+ margin: { t: 30, l: 40, r: 20, b: 60 },
460
+ xaxis: { title: 'Declared Value ($)' },
461
+ yaxis: { title: 'Quantity' }
462
+ });
463
+
464
+ // 5. Histogram - Declared Value
465
+ const histData = {
466
+ x: data.map(item => item.value),
467
+ type: 'histogram',
468
+ marker: { color: '#3b82f6' }
469
+ };
470
+
471
+ Plotly.newPlot('hist-declared-value', [histData], {
472
+ title: 'Distribution of Declared Values',
473
+ margin: { t: 30, l: 40, r: 20, b: 60 },
474
+ xaxis: { title: 'Declared Value ($)' },
475
+ yaxis: { title: 'Count' }
476
+ });
477
+
478
+ // 6. Box Plot - Tariff by Product
479
+ const boxData = data.map(item => ({
480
+ y: item.tariffAmount,
481
+ x: item.product,
482
+ name: item.product,
483
+ boxpoints: 'all',
484
+ type: 'box',
485
+ marker: { color: '#3b82f6' },
486
+ line: { color: '#1d4ed8' }
487
+ }));
488
+
489
+ // Group by product for box plot
490
+ const productBoxData = Array.from(new Set(data.map(item => item.product))).map(product => {
491
+ const productData = data.filter(item => item.product === product);
492
+ return {
493
+ y: productData.map(item => item.tariffAmount),
494
+ name: product,
495
+ type: 'box',
496
+ boxpoints: 'all',
497
+ marker: { color: '#3b82f6' },
498
+ line: { color: '#1d4ed8' }
499
+ };
500
+ });
501
+
502
+ Plotly.newPlot('box-tariff-rate-product', productBoxData, {
503
+ title: 'Tariff Amount by Product',
504
+ margin: { t: 30, l: 40, r: 20, b: 60 },
505
+ yaxis: { title: 'Tariff Amount ($)' }
506
+ });
507
+
508
+ // Populate data table
509
+ const tableBody = document.getElementById('table-body');
510
+ tableBody.innerHTML = '';
511
+
512
+ data.forEach(item => {
513
+ const row = document.createElement('tr');
514
+ row.className = 'hover:bg-gray-50';
515
+
516
+ row.innerHTML = `
517
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.entryNumber}</td>
518
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.entryDate}</td>
519
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.country}</td>
520
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.product}</td>
521
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${item.value.toLocaleString()}</td>
522
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.quantity}</td>
523
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.tariffRate}%</td>
524
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${item.tariffAmount.toLocaleString()}</td>
525
+ `;
526
+
527
+ tableBody.appendChild(row);
528
+ });
529
+ }
530
+
531
+ // Filter data based on user selections
532
+ function filterData() {
533
+ const countryFilter = document.getElementById('country-filter').value;
534
+ const productFilter = document.getElementById('product-filter').value;
535
+ const importerFilter = document.getElementById('importer-filter').value;
536
+ const hscodeFilter = document.getElementById('hscode-filter').value;
537
+ const tariffrateFilter = document.getElementById('tariffrate-filter').value;
538
+ const startDate = document.getElementById('start-date').value;
539
+ const endDate = document.getElementById('end-date').value;
540
+
541
+ let filteredData = demoData;
542
+
543
+ if (countryFilter !== 'all') {
544
+ filteredData = filteredData.filter(item => item.country === countryFilter);
545
+ }
546
+
547
+ if (productFilter !== 'all') {
548
+ filteredData = filteredData.filter(item => item.product === productFilter);
549
+ }
550
+
551
+ // Note: In our demo data we don't have importer, hscode fields
552
+ // So these filters won't do anything in this demo
553
+
554
+ if (tariffrateFilter !== 'all') {
555
+ filteredData = filteredData.filter(item => item.tariffRate === parseInt(tariffrateFilter));
556
+ }
557
+
558
+ if (startDate) {
559
+ filteredData = filteredData.filter(item => item.entryDate >= startDate);
560
+ }
561
+
562
+ if (endDate) {
563
+ filteredData = filteredData.filter(item => item.entryDate <= endDate);
564
+ }
565
+
566
+ initializeCharts(filteredData);
567
+ }
568
+
569
+ // Reset all filters
570
+ function resetFilters() {
571
+ document.getElementById('country-filter').value = 'all';
572
+ document.getElementById('product-filter').value = 'all';
573
+ document.getElementById('importer-filter').value = 'all';
574
+ document.getElementById('hscode-filter').value = 'all';
575
+ document.getElementById('tariffrate-filter').value = 'all';
576
+ document.getElementById('start-date').value = '';
577
+ document.getElementById('end-date').value = '';
578
+
579
+ initializeCharts(demoData);
580
+ }
581
+
582
+ // Toggle data table visibility
583
+ function toggleTable() {
584
+ const tableContainer = document.getElementById('data-table-container');
585
+ const toggleBtn = document.getElementById('toggle-table');
586
+
587
+ if (tableContainer.style.display === 'none') {
588
+ tableContainer.style.display = 'block';
589
+ toggleBtn.innerHTML = '<i class="fas fa-chevron-down mr-1"></i> Collapse';
590
+ } else {
591
+ tableContainer.style.display = 'none';
592
+ toggleBtn.innerHTML = '<i class="fas fa-chevron-up mr-1"></i> Expand';
593
+ }
594
+ }
595
+
596
+ // Set default date range to cover all data
597
+ function setDefaultDateRange() {
598
+ const dates = demoData.map(item => item.entryDate).sort();
599
+ document.getElementById('start-date').value = dates[0];
600
+ document.getElementById('end-date').value = dates[dates.length - 1];
601
+ }
602
+
603
+ // Initialize the dashboard
604
+ document.addEventListener('DOMContentLoaded', () => {
605
+ // Set default date range
606
+ setDefaultDateRange();
607
+
608
+ // Initialize with all data
609
+ initializeCharts(demoData);
610
+
611
+ // Set up event listeners
612
+ document.getElementById('apply-filters').addEventListener('click', filterData);
613
+ document.getElementById('reset-filters').addEventListener('click', resetFilters);
614
+ document.getElementById('toggle-table').addEventListener('click', toggleTable);
615
+ });
616
+ </script>
617
+ <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/honda-customs-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
618
+ </html>