#792: adding in percentage to 'Value Counts' describe chart

man-group · Sep 1, 2023 · 98f38ec · 98f38ec
1 parent d8f1754
commit 98f38ec
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 8 deletions.
diff --git a/dtale/column_analysis.py b/dtale/column_analysis.py
@@ -399,7 +399,10 @@ def __init__(self, req):
 
     def build_hist(self, s, code):
         code.append("chart = pd.value_counts(s).to_frame(name='data')")
-        return pd.value_counts(s).to_frame(name="data")
+        code.append("chart['percent'] = (chart['data'] / chart['data'].sum()) * 100")
+        df = pd.value_counts(s).to_frame(name="data")
+        df["percent"] = (df["data"] / df["data"].sum()) * 100
+        return df
 
     def setup_ordinal_data(self, parent):
         if self.ordinal_agg == "pctsum":
@@ -493,11 +496,14 @@ class WordValueCountAnalysis(ValueCountAnalysis):
     def build_hist(self, s, code):
         code.append("chart = pd.value_counts(s.str.split(expand=True).stack())")
         code.append("chart = chart.to_frame(name='data').sort_index()")
-        return (
+        code.append("chart['percent'] = (chart['data'] / chart['data'].sum()) * 100")
+        df = (
             pd.value_counts(s.str.split(expand=True).stack())
             .to_frame(name="data")
             .sort_index()
         )
+        df["percent"] = (df["data"] / df["data"].sum()) * 100
+        return df
 
     def setup_ordinal_data(self, parent):
         expanded_words = parent.data[parent.selected_col].str.split(expand=True).stack()

diff --git a/dtale/views.py b/dtale/views.py
@@ -2187,12 +2187,15 @@ def describe(data_id):
 
         # build top
         top_freq = uniq_vals["count"].values[0]
+        top_freq_pct = (top_freq / uniq_vals["count"].sum()) * 100
         top_vals = (
             uniq_vals[uniq_vals["count"] == top_freq].sort_values("value").head(5)
         )
         top_vals_f = grid_formatter(grid_columns(top_vals), as_string=True)
         top_vals = top_vals_f.format_lists(top_vals)
-        return_data["describe"]["top"] = ", ".join(top_vals["value"])
+        return_data["describe"]["top"] = "{} ({}%)".format(
+            ", ".join(top_vals["value"]), json_float(top_freq_pct, as_string=True)
+        )
         return_data["describe"]["freq"] = int(top_freq)
 
         code.append(

diff --git a/frontend/static/popups/analysis/ColumnAnalysisState.ts b/frontend/static/popups/analysis/ColumnAnalysisState.ts
@@ -45,11 +45,13 @@ export interface CategoryChartData extends FetchedChartData<AnalysisType.CATEGOR
 /** Properties for fetched Value Count data */
 export interface ValueCountChartData extends FetchedChartData<AnalysisType.VALUE_COUNTS>, BaseChartData {
   ordinal?: number[];
+  percent?: number[];
 }
 
 /** Properties for fetched Word Value Count data */
 export interface WordValueCountChartData extends FetchedChartData<AnalysisType.WORD_VALUE_COUNTS>, BaseChartData {
   ordinal?: number[];
+  percent?: number[];
 }
 
 /** Properties for fetched Geolocation data */

diff --git a/frontend/static/popups/analysis/columnAnalysisUtils.tsx b/frontend/static/popups/analysis/columnAnalysisUtils.tsx
@@ -33,7 +33,7 @@ const buildValueCountsAxes = (
   fetchedData: ValueCountChartData | WordValueCountChartData,
   chartOpts: AnalysisParams,
 ): void => {
-  const { data, ordinal } = fetchedData;
+  const { data, ordinal, percent } = fetchedData;
   baseCfg.data.datasets = [
     { label: 'Frequency', type: 'bar', data, backgroundColor: 'rgb(42, 145, 209)', yAxisID: 'y' },
   ];
@@ -61,11 +61,25 @@ const buildValueCountsAxes = (
       tension: 0.4,
       pointRadius: 0,
     });
-    baseCfg.options = {
-      ...baseCfg.options,
-      plugins: { ...baseCfg?.options?.plugins, tooltip: { mode: 'index', intersect: true } },
-    };
   }
+  baseCfg.options = {
+    ...baseCfg.options,
+    plugins: {
+      ...baseCfg?.options?.plugins,
+      tooltip: {
+        mode: 'index',
+        intersect: true,
+        callbacks: {
+          footer: (tooltipItems: Array<TooltipItem<'bar' | 'line'>>): string | void => {
+            const percentage = (percent ?? [])[tooltipItems[0].dataIndex];
+            if (percentage !== undefined) {
+              return `${percentage}%`;
+            }
+          },
+        },
+      },
+    },
+  };
 };
 
 const buildCategoryAxes = (