Add Columns Selection | Fix bugs

files/css/main.css

@@ -737,6 +737,10 @@ select {
     height: 8rem
 }
 
+.h-48 {
+    height: 12rem
+}
+
 .h-8 {
     height: 2rem
 }
@@ -1423,6 +1427,10 @@ select {
     padding-left: .75rem
 }
 
+.pl-5 {
+    padding-left: 1.25rem
+}
+
 .pl-10 {
     padding-left: 2.5rem
 }
@@ -2424,6 +2432,16 @@ select {
     box-shadow: 0 0 5px 2px rgb(255, 188, 87);
 }
 
+#apply {
+    background-color: #ffa116;
+}
+#apply:hover {
+    background-color: #fcb140;
+}
+#apply:focus {
+    box-shadow: 0 0 5px 2px rgb(255, 188, 87);
+}
+
 .dark {
     filter: invert(92%);
 }

files/js/analytics.js

@@ -208,6 +208,7 @@ const charts = document.getElementById('my-charts');
 const color = d3.scaleOrdinal().range(d3.schemeSet3);
 
 const MAX_CATS = 10;
+const MAX_CHARTS = 5; // temporary
 
 const cache_df = {is_empty: true, dataset: []};
 
@@ -248,7 +249,7 @@ function _handle_column(data, col) {
     }
 
     type = maybe_cats ? 'cat' : type == 'num' ? type : 'object';
-    console.log(col, type);
+    // console.log(col, type);
 
     let nan_count = data.length - cols.length;
     if (type == 'cat') {
@@ -277,6 +278,80 @@ function _update_cache(data) {
             cache_df.dataset.push(col_data);
         }
     }
+    _update_options();
+}
+
+function _update_options() {
+    for (let i = 0; i < cache_df.dataset.length; i++) {
+        const name = cache_df.dataset[i].col;
+        const newColumnOption = document.createElement('li');
+        newColumnOption.innerHTML = `
+            <div class="pl-5 flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
+                <input id="checkbox-item-${i}" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                <label for="checkbox-item-${i}" class="w-full pl-3 text-sm font-medium text-gray-900 rounded dark:text-gray-300 capitalized">${name}</label>
+                <a href="#col-${i}">jump</a>
+            </div>`;
+        ulColumns.appendChild(newColumnOption);
+    }
+
+    const inputs = ulColumns.querySelectorAll('input');
+    const total = inputs.length - 1;
+
+    inputs[0].addEventListener('click', function(_) {
+        const count = inputs[0].checked * total;
+        _update_dropdown_text(count, total);
+        for (let i = 1; i < inputs.length; i++) {
+            inputs[i].checked = inputs[0].checked;
+        }
+    })
+
+    let count = 0;
+    for (let i = 1; i < inputs.length; i++) {
+        inputs[i].addEventListener('click', function(_) {
+            inputs[0].checked = false;
+
+            let count = 0;
+            let total = inputs.length - 1;
+            for (let input of inputs) {
+                count += input.checked;
+            }
+            _update_dropdown_text(count, total);
+        })
+        if (i <= MAX_CHARTS) {
+            inputs[i].checked = true;
+            count += 1;
+        }
+    }
+
+    document.getElementById('dropdown').classList.remove('hidden');
+    _update_dropdown_text(count, total);
+}
+
+function _update_dropdown_text(count, total) {
+    showDropdownButton.innerHTML = `Select Columns (${count} of ${total})<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 15.41l-4.29-4.29a1.01 1.01 0 0 0-1.42 0 1.01 1.01 0 0 0 0 1.42l5 5a1.01 1.01 0 0 0 1.42 0l5-5a1.01 1.01 0 0 0 0-1.42 1.01 1.01 0 0 0-1.42 0L12 15.41z"/></svg>`
+}
+
+function _plot(col_id) {
+    values = cache_df.dataset[col_id];
+    if (values.type == 'cat') {
+        plot_pie(values.col, col_id);
+    } else if (values.type == 'num') {
+        plot_hist(values.col, col_id);
+    }
+}
+
+function _toggle_column(col_id, is_open=true) {
+    let chart_div = document.getElementById(`col-${col_id}`);
+    if (!chart_div) {
+        _plot(col_id);
+        chart_div = document.getElementById(`col-${col_id}`);
+    }
+
+    if (is_open) {
+        chart_div.classList.remove('hidden');
+    } else {
+        chart_div.classList.add('hidden');
+    }
 }
 
 function addChart(chartID, name, info) {
@@ -287,7 +362,8 @@ function addChart(chartID, name, info) {
     }
 
     const newChartDiv = document.createElement('div');
-    newChartDiv.className = 'p-4 mt-4 w-full overflow-hidden bg-white rounded-lg';
+    newChartDiv.id = `col-${chartID}`;
+    newChartDiv.className = 'cols p-4 mt-4 w-full overflow-hidden bg-white rounded-lg';
     newChartDiv.innerHTML = `
         <div class="w-full p-4 bg-white rounded-lg xl:p-6">
             <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">${name}</h1>
@@ -336,8 +412,12 @@ fileInput.addEventListener('change', function() {
 
 function render() {
     if (fileInput.files.length > 0) {
-        charts.innerHTML = '';
+        if (!fileInput.files[0].name.endsWith('.csv')) {
+            console.warn('Invalid Format!');
+            return;
+        }
 
+        charts.innerHTML = '';
         var selectedFile = fileInput.files[0];
         var reader = new FileReader();
 
@@ -346,49 +426,59 @@ function render() {
             var data = d3.csvParse(fileContent);
 
             if (cache_df.is_empty) {
+                ulColumns.innerHTML = '<li><div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600"><input id="checkbox-item-main" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"><label for="checkbox-item-main" class="w-full pl-3 text-sm font-medium text-gray-900 rounded dark:text-gray-300">All Columns</label></div></li>';
                 _update_cache(data);
             } else {
                 console.log('We already have cache!');
             }
 
-            for (let i = 0; i < cache_df.dataset.length; i++) {
-                values = cache_df.dataset[i];
-                if (values.type == 'cat') {
-                    plot_pie(values.col, i);
-                } else if (values.type == 'num') {
-                    plot_hist(values.col, i);
-                }
+            inputs = ulColumns.querySelectorAll('input');
+            for (let i = 1; i < inputs.length; i++) {
+                if (!inputs[i].checked) continue;
+                _plot(i-1);
             }
-
-            // let cols = [];
-            // for (let col of data.columns) {
-            //     if (!isNaN(parseFloat(data[0][col]))) {
-            //         cols.push(['num', col]);
-            //     } else {
-            //         const cats = new Set();
-            //         for (let value of data) {
-            //             cats.add(value[col]);
-            //             if (cats.size > 100) {
-            //                 break;
-            //             }
-            //         }
-            //         if (cats.size <= 100) {
-            //             cols.push(['cat', col]);
-            //         }
-            //     }
-            // }
-
-            // for (let i = 0; i < cols.length; i++) {
-            //     if (cols[i][0] == 'num') {
-            //         plot_hist(data, cols[i][1], i);
-            //     } else if (cols[i][0] == 'cat') {
-            //         plot_pie(data, cols[i][1], i);
-            //     }
-            // }
         };
-
         reader.readAsText(selectedFile);
     } else {
         console.warn('There is no file!');
     }
 }
+
+function _comeback_options() {
+    dropdownSearch.style.display = 'none';
+    let ids = new Set();
+    for (let chart of charts.getElementsByClassName('cols')) {
+        ids.add(+chart.id.split('-')[1]);
+    }
+    
+    const inputs = ulColumns.querySelectorAll('input');
+    inputs[0].checked = false;
+    for (let i = 1; i < inputs.length; i++) {
+        inputs[i].checked = ids.has(i-1);
+    }
+
+    _update_dropdown_text(ids.size, inputs.length-1);
+}
+
+function _apply_options() {
+    dropdownSearch.style.display = 'none';
+    const inputs = ulColumns.querySelectorAll('input');
+    for (let i = 1; i < inputs.length; i++) {
+        _toggle_column(i-1, inputs[i].checked);
+    }
+}
+
+const showDropdownButton = document.getElementById('showDropdown');
+const dropdownSearch = document.getElementById('dropdownSearch');
+const ulColumns = document.getElementById('ul-columns');
+
+showDropdownButton.addEventListener('click', function() {
+    if (dropdownSearch.style.display === 'none' || dropdownSearch.style.display === '') {
+        dropdownSearch.style.display = 'block';
+    } else {
+        dropdownSearch.style.display = 'none';
+    }
+});
+
+document.getElementById('cancel').addEventListener('click', _comeback_options);
+document.getElementById('apply').addEventListener('click', _apply_options);

static/analytics.html

@@ -76,7 +76,7 @@
                     </a>
 
                     <a class="flex items-center px-4 py-2 text-gray-600 transition-colors duration-300 transform bg-gray-200 rounded-lg bg-opacity-40"
-                        href="analytics">
+                        href="javascript:void 0">
                         <svg fill="currentColor" width="24px" height="24px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
                             <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                             <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
@@ -174,7 +174,7 @@
                                         </a>
 
                                         <a class="block px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform sm:px-12 hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
-                                            href="analytics">
+                                            href="javascript:void 0">
                                             Analytics
                                         </a>
 
@@ -225,7 +225,7 @@
                         <div class="hidden mt-3 overflow-y-auto text-sm lg:items-center lg:flex whitespace-nowrap">
                             <a class="text-gray-600">Pages</a>
                             <span class="mx-1 text-gray-500">/</span>
-                            <a href="" class="text-indigo-600 hover:underline no-invert">Analytics</a>
+                            <a href="javascript:void 0" class="text-indigo-600 hover:underline no-invert">Analytics</a>
                         </div>
                     </div>
 
@@ -239,7 +239,7 @@
                                         </svg>
                         
                                         <span class="mt-4">Import Data</span>
-                                        <input id="data" type="file" class="hidden" accept=".csv, .tsv, .json">
+                                        <input id="data" type="file" class="hidden" accept=".csv">
                                     </label>
                                 </div>
                                 <div class="mt-4 flex justify-between no-invert">
@@ -249,82 +249,45 @@
                                 </div>
                             </div>
 
-
-                            <div id="my-charts">
-                                <!-- <div class="w-full p-4 bg-white rounded-lg xl:p-6">
-                                    <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
-                                        example hist column</h1>
-
-                                    <div class="grid gap-12 mt-8 sm:grid-cols-2">
-                                        <div class="flex items-center capitalize">
-                                            <svg width="284" height="300"><g class="x-axis" transform="translate(0,280)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" style="font: 12px arial;"><path class="domain" stroke="currentColor" d="M20,6V0H264V6"></path><g class="tick" opacity="1" transform="translate(20,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">8</text></g><g class="tick" opacity="1" transform="translate(264,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">96</text></g></g><rect x="20" y="271.6860465116279" width="4.545454545454547" height="8.313953488372078" fill="#ffa116" class="no-invert"></rect><rect x="25.545454545454547" y="37.383720930232556" width="26.727272727272727" height="242.61627906976744" fill="#ffa116" class="no-invert"></rect><rect x="53.27272727272727" y="20" width="26.727272727272727" height="260" fill="#ffa116" class="no-invert"></rect><rect x="81" y="77.44186046511626" width="26.72727272727272" height="202.55813953488374" fill="#ffa116" class="no-invert"></rect><rect x="108.72727272727272" y="146.97674418604652" width="26.72727272727272" height="133.02325581395348" fill="#ffa116" class="no-invert"></rect><rect x="136.45454545454544" y="242.20930232558138" width="26.727272727272748" height="37.790697674418624" fill="#ffa116" class="no-invert"></rect><rect x="164.1818181818182" y="265.6395348837209" width="26.72727272727272" height="14.360465116279101" fill="#ffa116" class="no-invert"></rect><rect x="191.9090909090909" y="278.4883720930232" width="26.72727272727272" height="1.5116279069767984" fill="#ffa116" class="no-invert"></rect><rect x="219.63636363636363" y="258.0813953488372" width="26.727272727272748" height="21.91860465116281" fill="#ffa116" class="no-invert"></rect><rect x="247.36363636363637" y="268.6627906976744" width="15.636363636363626" height="11.337209302325618" fill="#ffa116" class="no-invert"></rect></svg>
-                                        </div>
-                                        <div class="flow-root mt-6">
-                                            <ul>
-                                                <li>
-                                                    <span class="absolute top-4 left-4 rtl:right-4 rtl:left-auto -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
-                                                    <div class="relative flex">
-                                                        <span class="flex items-center justify-center w-8 h-8 bg-white rounded-full ring-8 ring-white">
-                                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 no-invert text-indigo-600" viewBox="0 0 20 20" fill="currentColor">
-                                                                <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
-                                                            </svg>
-                                                        </span>
-
-                                                        <div class="min-w-0 flex-1 pt-1.5 mx-3">
-                                                            <p class="text-sm font-medium text-gray-700">General Info:</p>
-                                                            <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>DataType:</b> Quantitative</p>
-                                                            <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Mean:</b> 15.3k</p>
-                                                            <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Median:</b> 1.32k</p>
-                                                            <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Std. Deviation:</b> 10.4</p>
-                                                            <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Missing Values:</b> 100 (4.5%)</p>
-                                                            <p class="mt-1 text-sm text-gray-500 truncate sm:w-auto"><b>Total Values:</b> 12.5k (95.5%)</p>
-                                                        </div>
-                                                    </div>
-                                                </li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div> -->
-                            </div>
-
-                            <!-- <div class="2xl:-mx-3 2xl:flex">
-                                <div class="w-full p-4 bg-white rounded-lg 2xl:mx-3 2xl:w-1/2 xl:p-6">
-                                    <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
-                                        Projects Activity</h1>
-
-                                    <p class="mt-2 text-gray-500">
-                                        <span class="text-green-500 no-invert">(+29)</span>&nbsp;than last month
-                                    </p>
-
-                                    <canvas id="line2Chart" height="150" class="no-invert"></canvas>
+                            <div id="dropdown" class="hidden p-4 z-10 bg-white rounded-lg shadow w-full">
+                                <div class="p-3">
+                                    <button id="showDropdown" class="font-medium text-gray-700 text-lg inline-flex items-center">
+                                        Select Columns (0 of 0)
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 15.41l-4.29-4.29a1.01 1.01 0 0 0-1.42 0 1.01 1.01 0 0 0 0 1.42l5 5a1.01 1.01 0 0 0 1.42 0l5-5a1.01 1.01 0 0 0 0-1.42 1.01 1.01 0 0 0-1.42 0L12 15.41z"/></svg>
+                                    </button>
                                 </div>
-
-                                <div class="w-full p-4 mt-6 bg-white rounded-lg 2xl:mx-3 2xl:mt-0 2xl:w-1/2 xl:p-6">
-                                    <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
-                                        Profile Visits</h1>
-
-                                    <p class="mt-2 text-gray-500">
-                                        <span class="text-green-500 no-invert">(+120)</span>&nbsp;than last month
-                                    </p>
-
-                                    <div class="max-w-xs mx-auto mt-4">
-                                        <canvas id="doughnutChart" height="100"></canvas>
+                                <div id="dropdownSearch" style="display: none;">
+                                    <!-- <div class="p-3">
+                                        <label for="input-group-search text-lg"></label>
+                                        <div class="relative mt-3">
+                                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
+                                            </svg>
+                                            </div>
+                                            <input type="text" id="input-group-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search">
+                                        </div>
+                                    </div> -->
+                                    <ul id="ul-columns" class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
+                                        <li>
+                                            <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
+                                                <input id="checkbox-item-main" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                                                <label for="checkbox-item-main" class="w-full pl-3 text-sm font-medium text-gray-900 rounded dark:text-gray-300">All Columns</label>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                    <div class="mt-4 flex justify-between no-invert">
+                                        <button id="cancel" class="w-32 sm:w-80 flex items-center justify-center py-2 px-4 rounded font-medium text-white rounded-full border-gray-100" style="background-color: white; color: black; border: 1px solid gray; max-height: 2.5rem;">
+                                            Cancel
+                                        </button>
+                                        <button id="apply" class="w-32 sm:w-80 flex items-center justify-center py-2 px-4 rounded font-medium text-white rounded-full" style="max-height: 2.5rem;">
+                                            Apply
+                                        </button>
                                     </div>
                                 </div>
                             </div>
 
-                            <div class="w-full p-5 overflow-hidden bg-white rounded-lg">
-                                <div class="mb-2">
-                                    <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">
-                                        sales overview</h1>
-
-                                    <p class="mt-2 text-gray-500">
-                                        <span class="text-green-500 no-invert">(+5) more</span>&nbsp;in 2022
-                                    </p>
-                                </div>
-
-                                <canvas id="lineChart" height="80"></canvas>
-                            </div> -->
+                            <div id="my-charts"></div>
                         </section>
                     </div>
                 </div>