@datarecce/ui 0.1.41 → 0.2.0

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

@@ -1,291 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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",
-      }}
-    />
-  );
-}