@datarecce/ui 0.1.29 → 0.1.31

package/recce-source/js/src/components/charts/HistogramChart.tsx

@@ -0,0 +1,291 @@
+import { useTheme } from "@mui/material/styles";
+import {
+  AnimationOptions,
+  BarElement,
+  CategoryScale,
+  ChartData,
+  Chart as ChartJS,
+  ChartOptions,
+  Legend,
+  LinearScale,
+  ScaleOptions,
+  TimeSeriesScale,
+  Title,
+  Tooltip,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { HistogramResult } from "@/lib/api/profile";
+import {
+  formatAsAbbreviatedNumber,
+  formatIntervalMinMax,
+} from "@/utils/formatters";
+import { getChartThemeColors, getThemedPluginOptions } from "./chartTheme";
+import { getBarColors } from "./SquareIcon";
+
+export const INFO_VAL_COLOR = "#63B3ED";
+export const DATE_RANGE = "Date Range";
+export const TEXTLENGTH = "Text Length";
+export const VALUE_RANGE = "Value Range";
+
+/**
+ * Histogram Chart that can display generic data types such as Numeric, Datetime, Integer
+ * X: The Min/Max of the labels range is the scaled width of charting area
+ * Y: The Min/Max of the counts range is the scaled height of charting area
+ * Counts: Abbreviated based on K, Mn, Bn, Tr (see formatters)
+ */
+
+interface HistogramChartProps {
+  data: {
+    title: string;
+    type: string;
+    samples?: number;
+    min?: string | number;
+    max?: string | number;
+    binEdges: number[];
+    datasets: HistogramResult[];
+  };
+  animation?: AnimationOptions<"bar">["animation"];
+  hideAxis?: boolean;
+}
+
+export function HistogramChart({
+  data,
+  hideAxis = false,
+  animation = false,
+}: HistogramChartProps) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  ChartJS.register(
+    BarElement,
+    TimeSeriesScale,
+    LinearScale,
+    CategoryScale,
+    Title,
+    Legend,
+    Tooltip,
+  );
+
+  const chartOptions = getHistogramChartOptions(data, hideAxis, isDark, {
+    animation,
+  });
+
+  // Histograms are a mix between bar and scatter options (union)
+  // uses cartesian x,y coordinates to plot and infer labels
+  const chartData = getHistogramChartData(data, isDark);
+
+  //infer `any` to allow for union data configurations & options
+  return (
+    <Chart type="bar" options={chartOptions} data={chartData} plugins={[]} />
+  );
+}
+
+function getHistogramChartDataset(
+  type: string,
+  binEdges: number[],
+  label: string,
+  color: string,
+  data: HistogramResult,
+) {
+  const isDatetime = type === "datetime";
+  const { counts = [] } = data;
+  const newData: (number | [number, number])[] = isDatetime
+    ? counts.map((v, i) => [binEdges[i], v] as [number, number])
+    : counts;
+  return {
+    label,
+    data: newData,
+    backgroundColor: color,
+    borderColor: color,
+    hoverBackgroundColor: color,
+    borderWidth: 0,
+    categoryPercentage: 1, // tells bar to fill "bin area"
+    barPercentage: 1, //tells bar to fill "bar area"
+    xAxisID: "x",
+  };
+}
+
+export function getHistogramChartData(
+  data: HistogramChartProps["data"],
+  isDark = false,
+): ChartData<"bar"> {
+  const { datasets, type, binEdges } = data;
+  const [base, current] = datasets;
+  const barColors = getBarColors(isDark);
+  const currentDataset = getHistogramChartDataset(
+    type,
+    binEdges,
+    "Current",
+    barColors.currentWithAlpha,
+    current,
+  );
+  const baseDataset = getHistogramChartDataset(
+    type,
+    binEdges,
+    "Base",
+    barColors.baseWithAlpha,
+    base,
+  );
+
+  const newLabels = binEdges
+    .map((_v, i) => formatDisplayedBinItem(binEdges, i))
+    .slice(0, -1); // exclude last
+
+  return {
+    labels: newLabels,
+    datasets: [currentDataset, baseDataset],
+  };
+}
+
+export function getHistogramChartOptions(
+  data: HistogramChartProps["data"],
+  hideAxis = false,
+  isDark = false,
+  { ...configOverrides }: ChartOptions<"bar"> = {},
+): ChartOptions<"bar"> {
+  const { title, datasets, type, samples = 0, binEdges } = data;
+  const [base, current] = datasets;
+  const isDatetime = type === "datetime";
+  const themeColors = getChartThemeColors(isDark);
+  const themedPlugins = getThemedPluginOptions(isDark);
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        reverse: true,
+        labels: {
+          color: themeColors.textColor,
+        },
+      },
+      title: {
+        display: true,
+        text: title,
+        font: {
+          size: 20,
+        },
+        color: themeColors.textColor,
+      },
+      tooltip: {
+        mode: "index",
+        // position: 'nearest',
+        intersect: false,
+        backgroundColor: themedPlugins.tooltip.backgroundColor,
+        titleColor: themedPlugins.tooltip.titleColor,
+        bodyColor: themedPlugins.tooltip.bodyColor,
+        borderColor: themedPlugins.tooltip.borderColor,
+        borderWidth: themedPlugins.tooltip.borderWidth,
+        callbacks: {
+          title([{ dataIndex }]) {
+            const result = formatDisplayedBinItem(binEdges, dataIndex);
+
+            const prefix = isDatetime
+              ? DATE_RANGE
+              : type === "string"
+                ? TEXTLENGTH
+                : VALUE_RANGE;
+
+            return `${prefix}\n${result}`;
+          },
+          label({ datasetIndex, dataIndex, dataset: { label } }) {
+            const counts = datasetIndex === 0 ? current.counts : base.counts;
+            const percentOfTotal = formatIntervalMinMax(
+              counts[dataIndex] / samples,
+            );
+            const count = counts[dataIndex];
+            return `${label}: ${count} (${percentOfTotal})`;
+          },
+        },
+      },
+    },
+    scales: getScales(data, hideAxis, isDark),
+    ...configOverrides,
+  };
+}
+/**
+ * get x, y scales for histogram (dynamic based on datetime or not)
+ */
+function getScales(
+  { datasets, min = 0, max = 0, type, binEdges }: HistogramChartProps["data"],
+  hideAxis = false,
+  isDark = false,
+) {
+  const isDatetime = type === "datetime";
+  const [base, current] = datasets;
+  const maxCount = Math.max(...current.counts, ...base.counts);
+  const themeColors = getChartThemeColors(isDark);
+
+  const newLabels = binEdges
+    .map((_v, i) => formatDisplayedBinItem(binEdges, i))
+    .slice(0, -1); // exclude last
+
+  //swap x-scale when histogram is datetime
+  const xScaleDate: ScaleOptions = {
+    display: !hideAxis,
+    type: "timeseries", // each datum is spread w/ equal distance
+    min,
+    max,
+    adapters: {
+      date: {},
+    },
+    time: {
+      minUnit: "day",
+    },
+    grid: { display: false },
+    ticks: {
+      minRotation: 30,
+      maxRotation: 30,
+      maxTicksLimit: 8,
+      color: themeColors.textColor,
+    },
+  };
+  /**
+   * NOTE: Category doesn't accept (min/max) -- will distort scales!
+   */
+  const xScaleCategory: ScaleOptions = {
+    display: !hideAxis,
+    type: "category", //Linear doesn't understand bins!
+    grid: { display: false },
+    ticks: {
+      callback(_val, index) {
+        return newLabels[index];
+      },
+      color: themeColors.textColor,
+    },
+    stacked: true,
+  };
+  const xScaleBase = isDatetime ? xScaleDate : xScaleCategory;
+
+  const yScaleBase: ScaleOptions = {
+    display: !hideAxis,
+    type: "linear",
+    max: maxCount, //NOTE: do not add `min` since if they are equal nothing gets displayed sometimes
+    border: { dash: [2, 2], color: themeColors.borderColor },
+    grid: {
+      color: themeColors.gridColor,
+    },
+    ticks: {
+      maxTicksLimit: 8,
+      color: themeColors.textColor,
+      callback: function (val) {
+        //slow, but necessary since chart-data is a number and can be hard to display
+        return formatAsAbbreviatedNumber(val);
+      },
+    },
+    beginAtZero: true,
+  };
+  return { x: xScaleBase, y: yScaleBase };
+}
+/**
+ * @returns a formatted, abbreviated, histogram bin display text
+ */
+function formatDisplayedBinItem(binEdges: number[], currentIndex: number) {
+  const startEdge = binEdges[currentIndex];
+  const endEdge = binEdges[currentIndex + 1];
+
+  const formattedStart = formatAsAbbreviatedNumber(startEdge);
+  const formattedEnd = formatAsAbbreviatedNumber(endEdge);
+
+  return `${formattedStart} - ${formattedEnd}`;
+}

package/recce-source/js/src/components/charts/SquareIcon.tsx

@@ -0,0 +1,51 @@
+import Box from "@mui/material/Box";
+
+// Light mode colors
+export const CURRENT_BAR_COLOR = "#63B3ED";
+export const BASE_BAR_COLOR = "#F6AD55";
+export const CURRENT_BAR_COLOR_WITH_ALPHA = `${CURRENT_BAR_COLOR}A5`;
+export const BASE_BAR_COLOR_WITH_ALPHA = `${BASE_BAR_COLOR}A5`;
+
+// Dark mode colors - slightly brighter for better visibility
+export const CURRENT_BAR_COLOR_DARK = "#90CDF4";
+export const BASE_BAR_COLOR_DARK = "#FBD38D";
+export const CURRENT_BAR_COLOR_DARK_WITH_ALPHA = `${CURRENT_BAR_COLOR_DARK}A5`;
+export const BASE_BAR_COLOR_DARK_WITH_ALPHA = `${BASE_BAR_COLOR_DARK}A5`;
+
+// Info color
+export const INFO_VAL_COLOR = "#63B3ED";
+export const INFO_VAL_COLOR_DARK = "#90CDF4";
+
+/**
+ * Get theme-aware bar colors for charts
+ * @param isDark - Whether dark mode is active
+ * @returns Object with current and base bar colors
+ */
+export function getBarColors(isDark: boolean) {
+  return {
+    current: isDark ? CURRENT_BAR_COLOR_DARK : CURRENT_BAR_COLOR,
+    base: isDark ? BASE_BAR_COLOR_DARK : BASE_BAR_COLOR,
+    currentWithAlpha: isDark
+      ? CURRENT_BAR_COLOR_DARK_WITH_ALPHA
+      : CURRENT_BAR_COLOR_WITH_ALPHA,
+    baseWithAlpha: isDark
+      ? BASE_BAR_COLOR_DARK_WITH_ALPHA
+      : BASE_BAR_COLOR_WITH_ALPHA,
+    info: isDark ? INFO_VAL_COLOR_DARK : INFO_VAL_COLOR,
+  };
+}
+
+export function SquareIcon({ color }: { color: string }) {
+  return (
+    <Box
+      sx={{
+        display: "inline-block",
+        width: "10px",
+        height: "10px",
+        bgcolor: color,
+        mr: 1,
+        borderRadius: "4px",
+      }}
+    />
+  );
+}