Merge pull request #1 from andrewstech/main

Add graphs to data
is-a-dev · Jan 25, 2024 · 9bf384c · 9bf384c
2 parents 4626eb1 + f40537a
commit 9bf384c
Show file tree

Hide file tree

Showing 2 changed files with 170 additions and 84 deletions.
diff --git a/index.html b/index.html
@@ -6,16 +6,34 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
         <!-- HTML Meta Tags -->
-        <title>Domains | is-a.dev</title>
+        <title>Domain Data | is-a.dev</title>
 
         <!-- Stylesheets -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
 
         <!-- Scripts -->
         <script src="https://cdn.tailwindcss.com"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     </head>
 
+    <style>
+        .chart-container {
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+        }
+    </style>
+
     <body class="bg-gray-800 text-white">
+        <div class="grid grid-cols-2 gap-4 p-8">
+            <div class="border p-4 chart-container">
+                <canvas id="pieChart" width="200" height="200"></canvas>
+            </div>
+            <div class="border p-4 chart-container">
+                <canvas id="barChart" width="200" height="200"></canvas>
+            </div>
+        </div>
+
         <div class="relative overflow-x-auto">
             <table id="data" class="w-full text-sm text-left text-gray-400">
                 <thead class="text-xs uppercase bg-gray-900 text-gray-400">
@@ -27,8 +45,29 @@
                 <tbody id="data-body"></tbody>
             </table>
         </div>
-    </body>
 
-    <script src="/script.js"></script>
-    <script>loadData();</script>
+        <script src="script.js"></script>
+
+        <script>
+            loadData();
+
+            // Fetch data and create the charts
+            fetch("https://raw-api.is-a.dev", {
+                method: "GET"
+            }).then(res => res.json()).then(data => {
+                // Sort data based on subdomain
+                data.sort((a, b) => a.subdomain.localeCompare(b.subdomain));
+
+                // Call the function to create the pie chart
+                const chartData = extractChartData(data);
+                createPieChart(chartData.labels, chartData.dataValues, "Record Types");
+
+                // Call the function to create the bar chart
+                const serviceTypes = ["Cloudflare", "DBH", "Email", "GitHub"]; // Add more service types as needed
+                const barChartData = extractBarChartData(data, serviceTypes);
+
+                createBarChart(barChartData.labels, barChartData.dataValues, "Most Used Services");
+            });
+        </script>
+    </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,114 +1,161 @@
 const tableBody = document.getElementById("data-body");
 
+const types = {
+    Cloudflare: ".pages.dev",
+    DBH: "69.30.249.53",
+    GitHub: ".github.io"
+}
+
 const hiddenDomains = [
     "_psl",
     "@",
     "www"
 ]
 
-function loadData() {
-    fetch("https://raw-api.is-a.dev", {
-        method: "GET"
-    }).then(res => res.json()).then(data => {
-        data.sort((a, b) => a.subdomain.localeCompare(b.subdomain));
-
-        data.forEach(i => {
-            if(hiddenDomains.includes(i.subdomain)) return;
-
-            let row = tableBody.insertRow(-1);
-
-            let c1 = row.insertCell(0);
-            let c2 = row.insertCell(1);
-            let c3 = row.insertCell(2);
+// Function to create a pie chart
+function createPieChart(labels, data, chartTitle) {
+    const ctx = document.getElementById("pieChart").getContext("2d");
+
+    new Chart(ctx, {
+        type: "pie",
+        data: {
+            labels: labels,
+            datasets: [{
+                data: data,
+                backgroundColor: generateRandomColors(labels.length),
+                borderWidth: 0
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                title: {
+                    display: true,
+                    text: chartTitle,
+                    font: {
+                        size: 16,
+                        weight: "bold"
+                    },
+                    color: "rgb(66, 133, 244)" // Use a different color for the title
+                },
+                tooltip: {
+                    enabled: true,
+                    backgroundColor: "rgba(0, 0, 0, 0.7)",
+                    borderColor: "rgba(0, 0, 0, 0.9)",
+                    borderWidth: 1
+                }
+            }
+        }
+    });
+}
 
-            c1.classList = "px-4 py-2 outline outline-1 outline-gray-700";
-            c2.classList = "px-4 py-2 outline outline-1 outline-gray-700";
-            c3.classList = "px-4 py-2 outline outline-1 outline-gray-700";
+// Function to generate random colors for the pie chart
+function generateRandomColors(numColors) {
+    const colors = [];
+    for (let i = 0; i < numColors; i++) {
+        const randomColor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`;
+        colors.push(randomColor);
+    }
+    return colors;
+}
 
-            const records = [];
+// Function to extract data for the pie chart
+function extractChartData(data) {
+    const recordCounts = {};
 
+    data.forEach(i => {
+        if (!hiddenDomains.includes(i.subdomain)) {
             Object.keys(i.record).forEach(record => {
-                if(record === "A" || record === "AAAA" || record === "MX" || record === "TXT") {
-                    if(Array.isArray(i.record[record])) {
-                        i.record[record].forEach(r => {
-                            records.push(`<span class="text-blue-600 font-semibold">${record}</span> ${r}`);
-                        });
-                    } else {
-                        records.push(`<span class="text-blue-600 font-semibold">${record}</span> ${i.record[record]}`);
-                    }
-                } else if(record === "URL") {
-                    records.push(`<span class="text-green-600 font-semibold">${record}</span> <a href="${i.record[record]}" class="underline underline-2 hover:no-underline">${i.record[record]}</a>`);
+                if (recordCounts[record]) {
+                    recordCounts[record]++;
                 } else {
-                    records.push(`<span class="text-blue-600 font-semibold">${record}</span> ${i.record[record]}`);
+                    recordCounts[record] = 1;
                 }
-            })
+            });
+        }
+    });
 
-            c1.innerHTML = `<a href="https://${i.subdomain}.is-a.dev" class="text-blue-600 hover:text-blue-700">${i.subdomain}</a>`;
-            c2.innerHTML = `<span class="font-semibold">Username:</span> ${i.owner.username ? `<a href="https://github.com/${i.owner.username}" class="underline underline-2 hover:no-underline">${i.owner.username}</a>` : `<span class="italic">None</span>`}<br><span class="font-semibold">Email:</span> ${i.owner.email ? `<a href="mailto:${i.owner.email.replace(" (at) ", "@")}" class="underline underline-2 hover:no-underline">${i.owner.email.replace(" (at) ", "@")}</a>` : `<span class="italic">None</span>`}`;
-            c3.innerHTML = records.join("<br>");
-        })
-    })
-}
+    const labels = Object.keys(recordCounts);
+    const dataValues = Object.values(recordCounts);
 
-const types = {
-    discord: "_discord",
-    ghPages: "_github-pages-challenge"
+    return { labels, dataValues };
 }
 
-function loadDiscordData() {
-    fetch("https://raw-api.is-a.dev", {
-        method: "GET"
-    }).then(res => res.json()).then(data => {
-        data.sort((a, b) => a.subdomain.localeCompare(b.subdomain));
-
-        data.forEach(i => {
-            if(hiddenDomains.includes(i.subdomain)) return;
-            if(!i.subdomain.startsWith(types.discord)) return;
-
-            let row = tableBody.insertRow(-1);
-
-            let c1 = row.insertCell(0);
-            let c2 = row.insertCell(1);
-            let c3 = row.insertCell(2);
-
-            c1.classList = "px-4 py-2 outline outline-1 outline-gray-700";
-            c2.classList = "px-4 py-2 outline outline-1 outline-gray-700";
-            c3.classList = "px-4 py-2 outline outline-1 outline-gray-700";
-
-            const records = [];
+// Function to create a bar chart
+function createBarChart(labels, data, chartTitle) {
+    const ctx = document.getElementById("barChart").getContext("2d");
+
+    new Chart(ctx, {
+        type: "bar",
+        data: {
+            labels: labels,
+            datasets: [{
+                label: chartTitle,
+                data: data,
+                backgroundColor: generateRandomColors(labels.length),
+                borderWidth: 0
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: "bottom" // Change legend position to bottom
+                },
+                tooltip: {
+                    enabled: true,
+                    backgroundColor: "rgba(0, 0, 0, 0.7)",
+                    borderColor: "rgba(0, 0, 0, 0.9)",
+                    borderWidth: 0
+                }
+            }
+        }
+    });
+}
 
-            Object.keys(i.record).forEach(record => {
-                if(record === "A" || record === "AAAA" || record === "MX" || record === "TXT") {
-                    if(Array.isArray(i.record[record])) {
-                        i.record[record].forEach(r => {
-                            records.push(`<span class="text-blue-600 font-semibold">${record}</span> ${r}`);
-                        });
-                    } else {
-                        records.push(`<span class="text-blue-600 font-semibold">${record}</span> ${i.record[record]}`);
-                    }
-                } else if(record === "URL") {
-                    records.push(`<span class="text-green-600 font-semibold">${record}</span> <a href="${i.record[record]}" class="underline underline-2 hover:no-underline">${i.record[record]}</a>`);
+// Function to extract data for the bar chart
+function extractBarChartData(data, serviceTypes) {
+    const serviceCounts = {};
+
+    data.forEach(i => {
+        if (!hiddenDomains.includes(i.subdomain)) {
+            // Check if the subdomain type matches any of the specified service types
+            const matchedServiceType = serviceTypes.find(type => {
+                if (type === "Cloudflare" && i.record.CNAME?.endsWith(types[type])) return true;
+                if (type === "DBH" && i.record.A?.includes(types[type])) return true;
+                if (type === "Email" && i.record.MX?.length) return true;
+                if (type === "GitHub" && i.record.CNAME?.endsWith(types[type])) return true;
+
+                return false;
+            });
+
+            if (matchedServiceType) {
+                if (serviceCounts[matchedServiceType]) {
+                    serviceCounts[matchedServiceType]++;
                 } else {
-                    records.push(`<span class="text-blue-600 font-semibold">${record}</span> ${i.record[record]}`);
+                    serviceCounts[matchedServiceType] = 1;
                 }
-            })
+            }
+        }
+    });
 
-            c1.innerHTML = `<a href="https://${i.subdomain}.is-a.dev" class="text-blue-600 hover:text-blue-700">${i.subdomain}</a>`;
-            c2.innerHTML = `<span class="font-semibold">Username:</span> ${i.owner.username ? `<a href="https://github.com/${i.owner.username}" class="underline underline-2 hover:no-underline">${i.owner.username}</a>` : `<span class="italic">None</span>`}<br><span class="font-semibold">Email:</span> ${i.owner.email ? `<a href="mailto:${i.owner.email.replace(" (at) ", "@")}" class="underline underline-2 hover:no-underline">${i.owner.email.replace(" (at) ", "@")}</a>` : `<span class="italic">None</span>`}`;
-            c3.innerHTML = records.join("<br>");
-        })
-    })
+    const labels = Object.keys(serviceCounts);
+    const dataValues = Object.values(serviceCounts);
+
+    return { labels, dataValues };
 }
 
-function loadGHPagesData() {
+function loadData() {
     fetch("https://raw-api.is-a.dev", {
         method: "GET"
     }).then(res => res.json()).then(data => {
         data.sort((a, b) => a.subdomain.localeCompare(b.subdomain));
 
         data.forEach(i => {
             if(hiddenDomains.includes(i.subdomain)) return;
-            if(!i.subdomain.startsWith(types.ghPages)) return;
 
             let row = tableBody.insertRow(-1);