Statistics Component - Copy this React, Tailwind Component to your project

The data returned from my api is as follows: data: [{ "id": 2000017, "ip": "10.244.234.117", "country": "Viet Nam", "province": "Ho Chi Minh", "district": "Thu Duc", "ward": null, "source": null, "referer": null, "referer_host": null, "user_agent": "facebookexternalhit/1.1;line poker/1.0", "link_id": 589178, "created_at": "2024 09 29T14:59:52.000000Z", "updated_at": "2024 09 29T14:59:52.000000Z" }, { "id": 2000016, "ip": "10.244.211.156", "country": "Vietnam", "province": "Ho Chi Minh", "district": "Thu Duc", "ward": null, "source": null, "referer": null, "referer_host": null, "user_agent": "facebookexternalhit/1.1;line poker/1.0", "link_ id": 589178, "created_at": "2024 09 29T14:59:50.000000Z", "updated_at": "2024 09 29T14:59:50.000000Z" }] "summary": { "country": { "AE": 1, "AR": 7, "AU": 22, "BE": 40, "CA": 122, "CN": 7, "CZ": 1, "DE": 23, "DK": 1, "FR": 372, "GB": 17, "HK": 3, "IE": 739, "IN": 1, "IT": 1, "JP": 297 6, "KH": 266, "KR": 8, "MN": 2, "NL": 4, "NZ": 2, "PE": 2, "PH": 1, "RO": 2, "RU": 1, "SE": 5, "SG": 7, "TH": 6, "TR": 1, "TW": 10, "UA": 3, "US": 10859, "Vietnam": 317, "VN": 57152, "": 142 }, "referer_host": { "avaw.vn": 289, "chat.zalo.me": 5, "com.google.android.googlequicksearchbox": 1, "id.zalo.me": 694, "instagram.com": 9, "l.facebook.com": 337, "lm.facebook.com": 1304, "m.facebook.com": 35792, "newinsite.thegioididong.com": 2, "t.co": 201, "www.facebook.com": 1, "www.google.com": 6, "Unknown": 34482 } } with the data I want to display statistics in chart form by country and by referer_host and also display statistics in table form with data from data