feat: display percentages in distribution sparklines

src/evidently/legacy/metrics/data_drift/column_drift_metric.py

@@ -109,22 +109,20 @@ def get_one_column_drift(
     scatter: Optional[Union[ScatterField, ScatterAggField]] = None
     if column_type == ColumnType.Numerical:
         current_nbinsx = options.get_nbinsx(column.name)
-        current_small_distribution = [
-            t.tolist()
-            for t in np.histogram(
-                current_column[np.isfinite(current_column)],
-                bins=current_nbinsx,
-                density=True,
-            )
-        ]
-        reference_small_distribution = [
-            t.tolist()
-            for t in np.histogram(
-                reference_column[np.isfinite(reference_column)],
-                bins=current_nbinsx,
-                density=True,
-            )
-        ]
+        # Calculate histogram counts and convert to percentages for better interpretability
+        current_hist_counts, current_hist_bins = np.histogram(
+            current_column[np.isfinite(current_column)],
+            bins=current_nbinsx,
+        )
+        current_hist_pct = (current_hist_counts / current_hist_counts.sum() * 100) if current_hist_counts.sum() > 0 else current_hist_counts
+        current_small_distribution = [current_hist_pct.tolist(), current_hist_bins.tolist()]
+
+        reference_hist_counts, reference_hist_bins = np.histogram(
+            reference_column[np.isfinite(reference_column)],
+            bins=current_nbinsx,
+        )
+        reference_hist_pct = (reference_hist_counts / reference_hist_counts.sum() * 100) if reference_hist_counts.sum() > 0 else reference_hist_counts
+        reference_small_distribution = [reference_hist_pct.tolist(), reference_hist_bins.tolist()]
         if not agg_data:
             current_scatter = {column.display_name: current_column}
             if datetime_data is not None:

ui/packages/evidently-ui-lib/src/widgets/BigTableWidget/HistogramGraphColumn.tsx

@@ -1,8 +1,6 @@
 import { Box } from '@mui/material'
 import type React from 'react'
 
-// import {WithStyles, WithTheme} from "@material-ui/core/styles";
-
 import { ResponsiveBarCanvas } from '@nivo/bar'
 
 import type { BigTableDataRow, LineGraphOptions } from '~/api'
@@ -36,9 +34,28 @@ const _HistogramGraphColumn: React.FunctionComponent<HistogramGraphColumnProps>
         axisRight={null}
         enableGridX={false}
         enableGridY={false}
+        tooltip={({ id, value }) => (
+          <div
+            style={{
+              background: 'rgba(30, 30, 30, 0.95)',
+              color: '#fff',
+              padding: '6px 10px',
+              borderRadius: '4px',
+              fontSize: '12px',
+              boxShadow: '0 2px 8px rgba(0,0,0,0.3)'
+            }}
+          >
+            <div>
+              <strong>Value:</strong> {typeof id === 'number' ? id.toFixed(4) : id}
+            </div>
+            <div>
+              <strong>Percent:</strong> {typeof value === 'number' ? value.toFixed(2) : value}%
+            </div>
+          </div>
+        )}
       />
     </Box>
   )
 }
 
-export const HistogramGraphColumn = _HistogramGraphColumn
+export const HistogramGraphColumn = _HistogramGraphColumn