Added percentage of null values in columns

We can now filter null values Added support for null values
debiai · Aug 20, 2024 · f93651c · f93651c
1 parent 036d04b
commit f93651c
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 18 deletions.
diff --git a/frontend/src/components/debiai/dataAnalysis/common/Column.vue b/frontend/src/components/debiai/dataAnalysis/common/Column.vue
@@ -69,6 +69,19 @@ Click to set column as the main color"
       {{ column.typeText }}
     </div>
 
+    <!-- Nb null values pie chart -->
+    <div
+      class="nbNullValues"
+      v-if="column.nbNullValues > 0"
+      :title="column.nbNullValues + ' null values'"
+    >
+      <div
+        class="pie"
+        :style="{ '--p': (column.nbNullValues / column.originalValues.length) * 100 }"
+      />
+      {{ Math.ceil((column.nbNullValues / column.originalValues.length) * 100) }}%
+    </div>
+
     <!-- Menu -->
     <transition name="fade">
       <dropdown-menu
@@ -333,5 +346,32 @@ export default {
       color: var(--undefined);
     }
   }
+
+  /* Pie chart */
+  .nbNullValues {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    font-size: 0.8em;
+    color: var(--greyDarker);
+    font-weight: bold;
+
+    .pie {
+      position: relative;
+      width: 20px;
+      height: 20px;
+      display: inline-grid;
+      place-content: center;
+      border-radius: 50%;
+      background: var(--greyLight);
+    }
+    .pie:before {
+      content: "";
+      position: absolute;
+      border-radius: 50%;
+      inset: 0;
+      background: conic-gradient(var(--greyDarker) calc(var(--p) * 1%), #0000 0);
+    }
+  }
 }
 </style>
diff --git a/frontend/src/components/debiai/dataAnalysis/dataFilters/filterTypes/Values.vue b/frontend/src/components/debiai/dataAnalysis/dataFilters/filterTypes/Values.vue
@@ -41,7 +41,7 @@
 
         <select
           v-model="newValue"
-          v-if="filter.column.uniques"
+          v-if="filter.column.uniques && filter.column.uniques.length < 30"
         >
           <option
             v-for="unValues in filter.column.uniques"
@@ -54,18 +54,8 @@
 
       <!-- #controls -->
       <div class="aligned centered">
-        <button
-          @click="addValue(false)"
-          :disabled="newValue === null || newValue === ''"
-        >
-          Add
-        </button>
-        <button
-          @click="addValue(true)"
-          :disabled="newValue === null || newValue === ''"
-        >
-          Add and close
-        </button>
+        <button @click="addValue(false)">Add</button>
+        <button @click="addValue(true)">Add and close</button>
         <button
           class="red"
           @click="addValuePanel = false"
@@ -88,7 +78,15 @@
         @click="removeValue(value)"
         title="Remove the value form the filter"
       >
-        {{ value }}
+        <span v-if="value !== null">
+          {{ value }}
+        </span>
+        <span
+          v-else
+          style="opacity: 0.7"
+        >
+          Null
+        </span>
       </button>
       <button
         @click="addValuePanel = true"
@@ -128,9 +126,11 @@ export default {
   methods: {
     addValue(closeAfter) {
       // Convert the value to the right type
-      const valueToAdd =
+      let valueToAdd =
         this.filter.column.typeText === "Num" ? parseFloat(this.newValue) : this.newValue;
 
+      if (valueToAdd === "" || isNaN(valueToAdd)) valueToAdd = null;
+
       // Add the value to the filter in the store
       this.$store.commit("addValueToFilter", {
         filterId: this.filter.id,

diff --git a/frontend/src/components/debiai/dataAnalysis/widgets/Statistics/Statistics.vue b/frontend/src/components/debiai/dataAnalysis/widgets/Statistics/Statistics.vue
@@ -143,7 +143,7 @@
                 v-else
                 style="opacity: 0.7"
               >
-                Missing value
+                Null
               </div>
 
               <!-- Repartition -->
@@ -189,7 +189,7 @@
                 v-else
                 style="opacity: 0.7"
               >
-                Missing value
+                Null
               </div>
             </td>
             <!-- frequency-->
@@ -283,12 +283,19 @@ export default {
       let values;
       let valuesOriginal; // With null values
       let valuesText;
+      let textColumnNullValueUniqueIndex = null;
       this.nbNullValues = 0;
       if (this.selectedColumn.type === String) {
         values = this.data.selectedData.map((sId) => this.selectedColumn.valuesIndex[sId]);
         valuesOriginal = values;
         valuesText = this.data.selectedData.map((sId) => this.selectedColumn.values[sId]);
         this.nbNullValues = valuesText.filter((v) => v === null).length;
+        if (this.nbNullValues) {
+          // Get the index of the null value in the unique values
+          textColumnNullValueUniqueIndex = this.selectedColumn.valuesIndexUniques.find(
+            (v) => this.selectedColumn.uniques[v] === null
+          );
+        }
       } else {
         valuesOriginal = this.data.selectedData.map((sId) => this.selectedColumn.values[sId]);
         values = valuesOriginal.filter((v) => v !== null);
@@ -343,7 +350,11 @@ export default {
           );
 
           this.statByColor = groupedValues.map((sampleIds, i) => {
-            const gpValues = sampleIds.map((sId) => valuesOriginal[sId]);
+            let gpValues = sampleIds.map((sId) => valuesOriginal[sId]);
+
+            if (textColumnNullValueUniqueIndex !== null)
+              gpValues = gpValues.map((v) => (v === textColumnNullValueUniqueIndex ? null : v));
+
             const gpValuesNonNull = gpValues.filter((v) => v !== null);
 
             // Stats

diff --git a/frontend/src/services/statistics/data.js b/frontend/src/services/statistics/data.js
@@ -497,6 +497,7 @@ class Column {
     // Creating the column object
     this.uniques = [...new Set(this.originalValues)];
     this.nbOccurrence = this.uniques.length;
+    this.nbNullValues = this.originalValues.filter((v) => v === null).length;
 
     const isAllDictionaries = (arr) => {
       return arr.every((item) => item !== null && typeof item === "object" && !Array.isArray(item));