@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0

package/dist/components/charts/Histogram/Histogram.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Histogram.cjs","sources":["../../../../src/components/charts/Histogram/Histogram.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Histogram.scss\";\n\n/** Exponent coefficient for normal distribution calculation */\nconst NORMAL_DISTRIBUTION_EXPONENT_COEFF = -0.5;\n\ninterface HistogramDataSeries {\n  x: number[];\n  name: string;\n  color?: string;\n  autobinx?: boolean;\n  xbins?: {\n    start: number;\n    end: number;\n    size: number;\n  };\n  opacity?: number;\n  showDistributionLine?: boolean;\n  lineWidth?: number;\n}\n\ntype HistogramProps = {\n  dataSeries: HistogramDataSeries | HistogramDataSeries[];\n  /**\n   * Fixed width in pixels. When omitted, the chart fills its container and\n   * tracks the container's width via a `ResizeObserver`.\n   */\n  width?: number;\n  /**\n   * Fixed height in pixels. When omitted, the chart fills its container and\n   * tracks the container's height via a `ResizeObserver`.\n   */\n  height?: number;\n  title?: string;\n  xTitle?: string;\n  yTitle?: string;\n  bargap?: number;\n  showDistributionLine?: boolean;\n};\n\nconst calculateMean = (data: number[]): number => {\n  const sum = data.reduce((acc, val) => acc + val, 0);\n  return sum / data.length;\n};\n\nconst calculateStdDev = (data: number[], mean: number): number => {\n  const squaredDiffs = data.map((value) => Math.pow(value - mean, 2));\n  const variance =\n    squaredDiffs.reduce((acc, val) => acc + val, 0) / data.length;\n  return Math.sqrt(variance);\n};\n\nconst generateNormalDistributionPoints = (\n  mean: number,\n  stdDev: number,\n  start: number,\n  end: number,\n  points = 100\n): { x: number[]; y: number[] } => {\n  const xValues: number[] = [];\n  const yValues: number[] = [];\n\n  const step = (end - start) / (points - 1);\n\n  for (let i = 0; i < points; i++) {\n    const x = start + i * step;\n    xValues.push(x);\n\n    const exponent = NORMAL_DISTRIBUTION_EXPONENT_COEFF * Math.pow((x - mean) / stdDev, 2);\n    const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(exponent);\n    yValues.push(y);\n  }\n\n  return { x: xValues, y: yValues };\n};\n\nconst scaleDistributionCurve = (\n  yValues: number[],\n  histogramData: number[],\n  bins: { start: number; end: number; size: number }\n): number[] => {\n  const binCount = Math.ceil((bins.end - bins.start) / bins.size);\n  const binFrequencies = Array(binCount).fill(0);\n\n  histogramData.forEach((value) => {\n    if (value >= bins.start && value <= bins.end) {\n      const binIndex = Math.floor((value - bins.start) / bins.size);\n      binFrequencies[binIndex]++;\n    }\n  });\n\n  const maxBinFrequency = Math.max(...binFrequencies);\n  const maxCurveValue = Math.max(...yValues);\n\n  const scaleFactor = maxBinFrequency / maxCurveValue;\n\n  return yValues.map((y) => y * scaleFactor);\n};\n\nconst Histogram: React.FC<HistogramProps> = ({\n  dataSeries,\n  width,\n  height,\n  title = \"Histogram\",\n  xTitle = \"X Axis\",\n  yTitle = \"Frequency\",\n  bargap = 0.2,\n  showDistributionLine = false,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  // Omitted width/height → fill the container and track its measured size;\n  // explicit pixel values override. Histogram has its own HTML title + legend,\n  // so we measure a wrapper around just the Plotly canvas. See AreaGraph for\n  // the reference pattern.\n  const [plotAreaRef, measured] = useElementSize<HTMLDivElement>();\n  const resolvedWidth = width ?? measured.width;\n  const resolvedHeight = height ?? measured.height;\n  const hasSize = resolvedWidth > 0 && resolvedHeight > 0;\n  // Fill is per-dimension: omit width to fill the container width, omit height\n  // to fill its height (so e.g. a fixed width with a container-driven height works).\n  const fillWidth = width === undefined;\n  const fillHeight = height === undefined;\n  const sizeRef = useRef({ width: resolvedWidth, height: resolvedHeight });\n  sizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n  const plotInitedRef = useRef(false);\n  // Size last applied to the plot, so the resize effect can skip a redundant\n  // relayout right after newPlot already drew at that size.\n  const appliedSizeRef = useRef({ width: 0, height: 0 });\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n  const effectiveBarMode = useMemo<\n    \"stack\" | \"group\" | \"overlay\" | \"relative\" | undefined\n  >(() => (seriesArray.length > 1 ? \"stack\" : undefined), [seriesArray.length]);\n\n  const defaultColors = CHART_COLORS;\n\n  const seriesWithColors = useMemo(() => {\n    return seriesArray.map((series, index) => {\n      const hasDistributionLine =\n        typeof series.showDistributionLine === \"undefined\"\n          ? showDistributionLine\n          : series.showDistributionLine;\n\n      return {\n        ...series,\n        color: series.color || defaultColors[index % defaultColors.length],\n        opacity: hasDistributionLine ? 0.5 : series.opacity || 1,\n        showDistributionLine: hasDistributionLine,\n        lineWidth: series.lineWidth || 3,\n      };\n    });\n  }, [seriesArray, showDistributionLine, defaultColors]);\n\n  const gridColor = theme.gridColor;\n\n  const histogramData = useMemo(\n    () =>\n      seriesWithColors.map((series) => ({\n        type: \"histogram\" as const,\n        x: series.x,\n        name: series.name,\n        marker: {\n          color: series.color,\n          line: {\n            color: theme.paperBg,\n            width: 1,\n          },\n          opacity: series.opacity,\n        },\n        autobinx: series.autobinx,\n        xbins: series.xbins,\n        hoverinfo: \"none\" as const,\n      })),\n    [seriesWithColors, theme],\n  );\n\n  const distributionLines = useMemo(\n    () =>\n      seriesWithColors\n        .filter((series) => series.showDistributionLine)\n        .map((series) => {\n          const mean = calculateMean(series.x);\n          const stdDev = calculateStdDev(series.x, mean);\n\n          const min = Math.min(...series.x);\n          const max = Math.max(...series.x);\n          const range = max - min;\n          const start = min - range * 0.1;\n          const end = max + range * 0.1;\n\n          const bins = series.xbins || {\n            start: start,\n            end: end,\n            size: range / 10,\n          };\n\n          const curvePoints = generateNormalDistributionPoints(\n            mean,\n            stdDev,\n            start,\n            end,\n            100,\n          );\n\n          const scaledYValues = scaleDistributionCurve(\n            curvePoints.y,\n            series.x,\n            bins,\n          );\n\n          return {\n            type: \"scatter\" as const,\n            x: curvePoints.x,\n            y: scaledYValues,\n            mode: \"lines\" as const,\n            name: `${series.name} Distribution`,\n            line: {\n              color: series.color,\n              width: series.lineWidth,\n            },\n            hoverinfo: \"none\" as const,\n          };\n        }),\n    [seriesWithColors],\n  );\n\n  const plotData = useMemo(\n    () => [...histogramData, ...distributionLines],\n    [histogramData, distributionLines],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || !hasSize) return;\n\n    const layout = {\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      showlegend: false,\n      margin: { l: 90, r: 40, b: 80, t: 40 },\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        automargin: true,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        rangemode: \"tozero\" as const,\n        automargin: true,\n      },\n      barmode: effectiveBarMode,\n      bargap: bargap,\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      // Sizing is driven from the measured container; disable Plotly's own\n      // window-resize responsiveness (it can't see container resizes).\n      responsive: false,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n    plotInitedRef.current = true;\n    appliedSizeRef.current = { ...sizeRef.current };\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [hasSize, xTitle, yTitle, bargap, plotData, effectiveBarMode, gridColor, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves tooltip/event bindings.\n  useEffect(() => {\n    const plotElement = plotRef.current;\n    if (!plotElement || !plotInitedRef.current || resolvedWidth <= 0 || resolvedHeight <= 0) {\n      return;\n    }\n    // newPlot already drew at the current size; skip the redundant relayout\n    // (it would queue an automargin redraw that can reject if we unmount first).\n    if (\n      appliedSizeRef.current.width === resolvedWidth &&\n      appliedSizeRef.current.height === resolvedHeight\n    ) {\n      return;\n    }\n    appliedSizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n    // Swallow rejections from a relayout that races an unmount/purge.\n    void Plotly.relayout(plotElement, { width: resolvedWidth, height: resolvedHeight }).catch(\n      () => {},\n    );\n  }, [resolvedWidth, resolvedHeight]);\n\n  const ChartLegend: React.FC<{\n    series: Array<{ name: string; color: string }>;\n  }> = ({ series }) => {\n    const items = series.map((item, i) => (\n      <React.Fragment key={item.name}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: item.color }} />\n          {item.name}\n          {i < series.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rows = [];\n    const rowSize = 6;\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n\n    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div\n      className={cn(\"histogram-container relative\", fillWidth && \"w-full\", fillHeight && \"h-full\")}\n      style={width === undefined ? undefined : { width }}\n    >\n      <div className={cn(\"chart-container\", fillHeight && \"flex h-full flex-col\")}>\n        {title && (\n          <div className=\"title-container\">\n            <h2 className=\"title\">{title}</h2>\n          </div>\n        )}\n        {/* Measured plot area — flexes to fill the space left by the title and\n            legend in fill mode, so the Plotly canvas tracks it. */}\n        <div ref={plotAreaRef} className={cn(fillHeight && \"min-h-0 flex-1\")}>\n          <div\n            ref={plotRef}\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              margin: \"0\",\n            }}\n          />\n        </div>\n        <ChartLegend series={seriesWithColors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Histogram };\nexport type { HistogramDataSeries, HistogramProps };\n"],"names":["NORMAL_DISTRIBUTION_EXPONENT_COEFF","calculateMean","data","acc","val","calculateStdDev","mean","variance","value","generateNormalDistributionPoints","stdDev","start","end","points","xValues","yValues","step","i","x","exponent","y","scaleDistributionCurve","histogramData","bins","binCount","binFrequencies","binIndex","maxBinFrequency","maxCurveValue","scaleFactor","Histogram","dataSeries","width","height","title","xTitle","yTitle","bargap","showDistributionLine","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","plotAreaRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","seriesArray","useMemo","effectiveBarMode","defaultColors","CHART_COLORS","seriesWithColors","series","index","hasDistributionLine","gridColor","distributionLines","min","max","range","curvePoints","scaledYValues","plotData","useEffect","layout","config","Plotly","plotElement","ChartLegend","items","item","jsx","React","jsxs","rows","rowSize","cn"],"mappings":"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"}
+{"version":3,"file":"Histogram.cjs","sources":["../../../../src/components/charts/Histogram/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Histogram.scss\";\n\n/** Exponent coefficient for normal distribution calculation */\nconst NORMAL_DISTRIBUTION_EXPONENT_COEFF = -0.5;\n\ninterface HistogramDataSeries {\n  x: number[];\n  name: string;\n  color?: string;\n  autobinx?: boolean;\n  xbins?: {\n    start: number;\n    end: number;\n    size: number;\n  };\n  opacity?: number;\n  showDistributionLine?: boolean;\n  lineWidth?: number;\n}\n\ntype HistogramProps = {\n  dataSeries: HistogramDataSeries | HistogramDataSeries[];\n  /**\n   * Fixed width in pixels. When omitted, the chart fills its container and\n   * tracks the container's width via a `ResizeObserver`.\n   */\n  width?: number;\n  /**\n   * Fixed height in pixels. When omitted, the chart fills its container and\n   * tracks the container's height via a `ResizeObserver`.\n   */\n  height?: number;\n  title?: string;\n  xTitle?: string;\n  yTitle?: string;\n  bargap?: number;\n  showDistributionLine?: boolean;\n};\n\nconst calculateMean = (data: number[]): number => {\n  const sum = data.reduce((acc, val) => acc + val, 0);\n  return sum / data.length;\n};\n\nconst calculateStdDev = (data: number[], mean: number): number => {\n  const squaredDiffs = data.map((value) => Math.pow(value - mean, 2));\n  const variance =\n    squaredDiffs.reduce((acc, val) => acc + val, 0) / data.length;\n  return Math.sqrt(variance);\n};\n\nconst generateNormalDistributionPoints = (\n  mean: number,\n  stdDev: number,\n  start: number,\n  end: number,\n  points = 100\n): { x: number[]; y: number[] } => {\n  const xValues: number[] = [];\n  const yValues: number[] = [];\n\n  const step = (end - start) / (points - 1);\n\n  for (let i = 0; i < points; i++) {\n    const x = start + i * step;\n    xValues.push(x);\n\n    const exponent = NORMAL_DISTRIBUTION_EXPONENT_COEFF * Math.pow((x - mean) / stdDev, 2);\n    const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(exponent);\n    yValues.push(y);\n  }\n\n  return { x: xValues, y: yValues };\n};\n\nconst scaleDistributionCurve = (\n  yValues: number[],\n  histogramData: number[],\n  bins: { start: number; end: number; size: number }\n): number[] => {\n  const binCount = Math.ceil((bins.end - bins.start) / bins.size);\n  const binFrequencies = Array(binCount).fill(0);\n\n  histogramData.forEach((value) => {\n    if (value >= bins.start && value <= bins.end) {\n      const binIndex = Math.floor((value - bins.start) / bins.size);\n      binFrequencies[binIndex]++;\n    }\n  });\n\n  const maxBinFrequency = Math.max(...binFrequencies);\n  const maxCurveValue = Math.max(...yValues);\n\n  const scaleFactor = maxBinFrequency / maxCurveValue;\n\n  return yValues.map((y) => y * scaleFactor);\n};\n\nconst Histogram: React.FC<HistogramProps> = ({\n  dataSeries,\n  width,\n  height,\n  title = \"Histogram\",\n  xTitle = \"X Axis\",\n  yTitle = \"Frequency\",\n  bargap = 0.2,\n  showDistributionLine = false,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  // Omitted width/height → fill the container and track its measured size;\n  // explicit pixel values override. Histogram has its own HTML title + legend,\n  // so we measure a wrapper around just the Plotly canvas. See AreaPlot for\n  // the reference pattern.\n  const [plotAreaRef, measured] = useElementSize<HTMLDivElement>();\n  const resolvedWidth = width ?? measured.width;\n  const resolvedHeight = height ?? measured.height;\n  const hasSize = resolvedWidth > 0 && resolvedHeight > 0;\n  // Fill is per-dimension: omit width to fill the container width, omit height\n  // to fill its height (so e.g. a fixed width with a container-driven height works).\n  const fillWidth = width === undefined;\n  const fillHeight = height === undefined;\n  const sizeRef = useRef({ width: resolvedWidth, height: resolvedHeight });\n  sizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n  const plotInitedRef = useRef(false);\n  // Size last applied to the plot, so the resize effect can skip a redundant\n  // relayout right after newPlot already drew at that size.\n  const appliedSizeRef = useRef({ width: 0, height: 0 });\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n  const effectiveBarMode = useMemo<\n    \"stack\" | \"group\" | \"overlay\" | \"relative\" | undefined\n  >(() => (seriesArray.length > 1 ? \"stack\" : undefined), [seriesArray.length]);\n\n  const defaultColors = CHART_COLORS;\n\n  const seriesWithColors = useMemo(() => {\n    return seriesArray.map((series, index) => {\n      const hasDistributionLine =\n        typeof series.showDistributionLine === \"undefined\"\n          ? showDistributionLine\n          : series.showDistributionLine;\n\n      return {\n        ...series,\n        color: series.color || defaultColors[index % defaultColors.length],\n        opacity: hasDistributionLine ? 0.5 : series.opacity || 1,\n        showDistributionLine: hasDistributionLine,\n        lineWidth: series.lineWidth || 3,\n      };\n    });\n  }, [seriesArray, showDistributionLine, defaultColors]);\n\n  const gridColor = theme.gridColor;\n\n  const histogramData = useMemo(\n    () =>\n      seriesWithColors.map((series) => ({\n        type: \"histogram\" as const,\n        x: series.x,\n        name: series.name,\n        marker: {\n          color: series.color,\n          line: {\n            color: theme.paperBg,\n            width: 1,\n          },\n          opacity: series.opacity,\n        },\n        autobinx: series.autobinx,\n        xbins: series.xbins,\n        hoverinfo: \"none\" as const,\n      })),\n    [seriesWithColors, theme],\n  );\n\n  const distributionLines = useMemo(\n    () =>\n      seriesWithColors\n        .filter((series) => series.showDistributionLine)\n        .map((series) => {\n          const mean = calculateMean(series.x);\n          const stdDev = calculateStdDev(series.x, mean);\n\n          const min = Math.min(...series.x);\n          const max = Math.max(...series.x);\n          const range = max - min;\n          const start = min - range * 0.1;\n          const end = max + range * 0.1;\n\n          const bins = series.xbins || {\n            start: start,\n            end: end,\n            size: range / 10,\n          };\n\n          const curvePoints = generateNormalDistributionPoints(\n            mean,\n            stdDev,\n            start,\n            end,\n            100,\n          );\n\n          const scaledYValues = scaleDistributionCurve(\n            curvePoints.y,\n            series.x,\n            bins,\n          );\n\n          return {\n            type: \"scatter\" as const,\n            x: curvePoints.x,\n            y: scaledYValues,\n            mode: \"lines\" as const,\n            name: `${series.name} Distribution`,\n            line: {\n              color: series.color,\n              width: series.lineWidth,\n            },\n            hoverinfo: \"none\" as const,\n          };\n        }),\n    [seriesWithColors],\n  );\n\n  const plotData = useMemo(\n    () => [...histogramData, ...distributionLines],\n    [histogramData, distributionLines],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || !hasSize) return;\n\n    const layout = {\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      font: {\n        family: CHART_FONT_FAMILY,\n      },\n      showlegend: false,\n      margin: { l: 90, r: 40, b: 80, t: 40 },\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        automargin: true,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        rangemode: \"tozero\" as const,\n        automargin: true,\n      },\n      barmode: effectiveBarMode,\n      bargap: bargap,\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      // Sizing is driven from the measured container; disable Plotly's own\n      // window-resize responsiveness (it can't see container resizes).\n      responsive: false,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n      plotInitedRef.current = true;\n      appliedSizeRef.current = { ...sizeRef.current };\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [hasSize, xTitle, yTitle, bargap, plotData, effectiveBarMode, gridColor, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves tooltip/event bindings.\n  useEffect(() => {\n    const plotElement = plotRef.current;\n    if (!plotElement || !plotInitedRef.current || resolvedWidth <= 0 || resolvedHeight <= 0) {\n      return;\n    }\n    // newPlot already drew at the current size; skip the redundant relayout\n    // (it would queue an automargin redraw that can reject if we unmount first).\n    if (\n      appliedSizeRef.current.width === resolvedWidth &&\n      appliedSizeRef.current.height === resolvedHeight\n    ) {\n      return;\n    }\n    appliedSizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n    // Swallow rejections from a relayout that races an unmount/purge.\n    // plotInitedRef guarantees Plotly finished loading, so sync access is safe.\n    void getLoadedPlotly()\n      .relayout(plotElement, { width: resolvedWidth, height: resolvedHeight })\n      .catch(() => {});\n  }, [resolvedWidth, resolvedHeight]);\n\n  const ChartLegend: React.FC<{\n    series: Array<{ name: string; color: string }>;\n  }> = ({ series }) => {\n    const items = series.map((item, i) => (\n      <React.Fragment key={item.name}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: item.color }} />\n          {item.name}\n          {i < series.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rows = [];\n    const rowSize = 6;\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n\n    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div\n      className={cn(\"histogram-container relative\", fillWidth && \"w-full\", fillHeight && \"h-full\")}\n      style={width === undefined ? undefined : { width }}\n    >\n      <div className={cn(\"chart-container\", fillHeight && \"flex h-full flex-col\")}>\n        {title && (\n          <div className=\"title-container\">\n            <h2 className=\"title\">{title}</h2>\n          </div>\n        )}\n        {/* Measured plot area — flexes to fill the space left by the title and\n            legend in fill mode, so the Plotly canvas tracks it. */}\n        <div ref={plotAreaRef} className={cn(fillHeight && \"min-h-0 flex-1\")}>\n          <div\n            ref={plotRef}\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              margin: \"0\",\n            }}\n          />\n        </div>\n        <ChartLegend series={seriesWithColors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Histogram };\nexport type { HistogramDataSeries, HistogramProps };\n"],"names":["NORMAL_DISTRIBUTION_EXPONENT_COEFF","calculateMean","data","acc","val","calculateStdDev","mean","variance","value","generateNormalDistributionPoints","stdDev","start","end","points","xValues","yValues","step","i","x","exponent","y","scaleDistributionCurve","histogramData","bins","binCount","binFrequencies","binIndex","maxBinFrequency","maxCurveValue","scaleFactor","Histogram","dataSeries","width","height","title","xTitle","yTitle","bargap","showDistributionLine","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","plotAreaRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","seriesArray","useMemo","effectiveBarMode","defaultColors","CHART_COLORS","seriesWithColors","series","index","hasDistributionLine","gridColor","distributionLines","min","max","range","curvePoints","scaledYValues","plotData","useEffect","layout","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","ChartLegend","items","item","jsx","React","jsxs","rows","rowSize","cn"],"mappings":"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"}

package/dist/components/charts/Histogram/Histogram.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+interface HistogramDataSeries {
+    x: number[];
+    name: string;
+    color?: string;
+    autobinx?: boolean;
+    xbins?: {
+        start: number;
+        end: number;
+        size: number;
+    };
+    opacity?: number;
+    showDistributionLine?: boolean;
+    lineWidth?: number;
+}
+type HistogramProps = {
+    dataSeries: HistogramDataSeries | HistogramDataSeries[];
+    /**
+     * Fixed width in pixels. When omitted, the chart fills its container and
+     * tracks the container's width via a `ResizeObserver`.
+     */
+    width?: number;
+    /**
+     * Fixed height in pixels. When omitted, the chart fills its container and
+     * tracks the container's height via a `ResizeObserver`.
+     */
+    height?: number;
+    title?: string;
+    xTitle?: string;
+    yTitle?: string;
+    bargap?: number;
+    showDistributionLine?: boolean;
+};
+declare const Histogram: React.FC<HistogramProps>;
+export { Histogram };
+export type { HistogramDataSeries, HistogramProps };

package/dist/components/charts/Histogram/Histogram.js

@@ -1,67 +1,67 @@
-import { jsxs as I, jsx as u } from "react/jsx-runtime";
-import A from "plotly.js-dist";
-import G, { useRef as k, useMemo as x, useEffect as V } from "react";
-import { useChartTooltip as J } from "../ChartTooltip/ChartTooltip.js";
-import { useElementSize as K } from "../../../hooks/use-element-size.js";
-import { usePlotlyTheme as Q } from "../../../hooks/use-plotly-theme.js";
-import { cn as _ } from "../../../lib/utils.js";
-import { CHART_COLORS as Z } from "../../../utils/colors.js";
+import { jsxs as _, jsx as d } from "react/jsx-runtime";
+import J, { useRef as k, useMemo as y, useEffect as V } from "react";
+import { useChartTooltip as K } from "../ChartTooltip/ChartTooltip.js";
+import { loadPlotly as Q, getLoadedPlotly as j } from "../plotly-loader.js";
+import { useElementSize as Z } from "../../../hooks/use-element-size.js";
+import { usePlotlyTheme as tt, CHART_FONT_FAMILY as E } from "../../../hooks/use-plotly-theme.js";
+import { cn as F } from "../../../lib/utils.js";
+import { CHART_COLORS as ot } from "../../../utils/colors.js";
 /* empty css               */
-const tt = -0.5, ot = (r) => r.reduce((e, s) => e + s, 0) / r.length, et = (r, c) => {
-  const s = r.map((i) => Math.pow(i - c, 2)).reduce((i, a) => i + a, 0) / r.length;
-  return Math.sqrt(s);
-}, nt = (r, c, e, s, i = 100) => {
-  const a = [], p = [], g = (s - e) / (i - 1);
-  for (let n = 0; n < i; n++) {
-    const o = e + n * g;
-    a.push(o);
-    const b = tt * Math.pow((o - r) / c, 2), z = 1 / (c * Math.sqrt(2 * Math.PI)) * Math.exp(b);
-    p.push(z);
+const et = -0.5, nt = (r) => r.reduce((n, a) => n + a, 0) / r.length, rt = (r, l) => {
+  const a = r.map((c) => Math.pow(c - l, 2)).reduce((c, s) => c + s, 0) / r.length;
+  return Math.sqrt(a);
+}, it = (r, l, n, a, c = 100) => {
+  const s = [], g = [], x = (a - n) / (c - 1);
+  for (let o = 0; o < c; o++) {
+    const e = n + o * x;
+    s.push(e);
+    const b = et * Math.pow((e - r) / l, 2), z = 1 / (l * Math.sqrt(2 * Math.PI)) * Math.exp(b);
+    g.push(z);
   }
-  return { x: a, y: p };
-}, rt = (r, c, e) => {
-  const s = Math.ceil((e.end - e.start) / e.size), i = Array(s).fill(0);
-  c.forEach((n) => {
-    if (n >= e.start && n <= e.end) {
-      const o = Math.floor((n - e.start) / e.size);
-      i[o]++;
+  return { x: s, y: g };
+}, ct = (r, l, n) => {
+  const a = Math.ceil((n.end - n.start) / n.size), c = Array(a).fill(0);
+  l.forEach((o) => {
+    if (o >= n.start && o <= n.end) {
+      const e = Math.floor((o - n.start) / n.size);
+      c[e]++;
     }
   });
-  const a = Math.max(...i), p = Math.max(...r), g = a / p;
-  return r.map((n) => n * g);
-}, ft = ({
+  const s = Math.max(...c), g = Math.max(...r), x = s / g;
+  return r.map((o) => o * x);
+}, gt = ({
   dataSeries: r,
-  width: c,
-  height: e,
-  title: s = "Histogram",
-  xTitle: i = "X Axis",
-  yTitle: a = "Frequency",
-  bargap: p = 0.2,
-  showDistributionLine: g = !1
+  width: l,
+  height: n,
+  title: a = "Histogram",
+  xTitle: c = "X Axis",
+  yTitle: s = "Frequency",
+  bargap: g = 0.2,
+  showDistributionLine: x = !1
 }) => {
-  const n = k(null), o = Q(), { bindTooltip: b, tooltipElement: z } = J({ xLabel: i, yLabel: a }), [j, q] = K(), m = c ?? q.width, f = e ?? q.height, B = m > 0 && f > 0, X = c === void 0, D = e === void 0, M = k({ width: m, height: f });
-  M.current = { width: m, height: f };
-  const R = k(!1), C = k({ width: 0, height: 0 }), N = x(
+  const o = k(null), e = tt(), { bindTooltip: b, tooltipElement: z } = K({ xLabel: c, yLabel: s }), [X, P] = Z(), f = l ?? P.width, p = n ?? P.height, q = f > 0 && p > 0, Y = l === void 0, D = n === void 0, M = k({ width: f, height: p });
+  M.current = { width: f, height: p };
+  const L = k(!1), C = k({ width: 0, height: 0 }), N = y(
     () => Array.isArray(r) ? r : [r],
     [r]
-  ), F = x(() => N.length > 1 ? "stack" : void 0, [N.length]), L = Z, y = x(() => N.map((t, d) => {
-    const h = typeof t.showDistributionLine > "u" ? g : t.showDistributionLine;
+  ), B = y(() => N.length > 1 ? "stack" : void 0, [N.length]), R = ot, v = y(() => N.map((t, u) => {
+    const h = typeof t.showDistributionLine > "u" ? x : t.showDistributionLine;
     return {
       ...t,
-      color: t.color || L[d % L.length],
+      color: t.color || R[u % R.length],
       opacity: h ? 0.5 : t.opacity || 1,
       showDistributionLine: h,
       lineWidth: t.lineWidth || 3
     };
-  }), [N, g, L]), E = o.gridColor, P = x(
-    () => y.map((t) => ({
+  }), [N, x, R]), A = e.gridColor, I = y(
+    () => v.map((t) => ({
       type: "histogram",
       x: t.x,
       name: t.name,
       marker: {
         color: t.color,
         line: {
-          color: o.paperBg,
+          color: e.paperBg,
           width: 1
         },
         opacity: t.opacity
@@ -70,28 +70,28 @@ const tt = -0.5, ot = (r) => r.reduce((e, s) => e + s, 0) / r.length, et = (r, c
       xbins: t.xbins,
       hoverinfo: "none"
     })),
-    [y, o]
-  ), O = x(
-    () => y.filter((t) => t.showDistributionLine).map((t) => {
-      const d = ot(t.x), h = et(t.x, d), w = Math.min(...t.x), l = Math.max(...t.x), v = l - w, W = w - v * 0.1, H = l + v * 0.1, Y = t.xbins || {
-        start: W,
-        end: H,
-        size: v / 10
-      }, T = nt(
-        d,
+    [v, e]
+  ), O = y(
+    () => v.filter((t) => t.showDistributionLine).map((t) => {
+      const u = nt(t.x), h = rt(t.x, u), m = Math.min(...t.x), i = Math.max(...t.x), w = i - m, S = m - w * 0.1, W = i + w * 0.1, $ = t.xbins || {
+        start: S,
+        end: W,
+        size: w / 10
+      }, T = it(
+        u,
         h,
+        S,
         W,
-        H,
         100
-      ), $ = rt(
+      ), G = ct(
         T.y,
         t.x,
-        Y
+        $
       );
       return {
         type: "scatter",
         x: T.x,
-        y: $,
+        y: G,
         mode: "lines",
         name: `${t.name} Distribution`,
         line: {
@@ -101,111 +101,110 @@ const tt = -0.5, ot = (r) => r.reduce((e, s) => e + s, 0) / r.length, et = (r, c
         hoverinfo: "none"
       };
     }),
-    [y]
-  ), S = x(
-    () => [...P, ...O],
-    [P, O]
+    [v]
+  ), H = y(
+    () => [...I, ...O],
+    [I, O]
   );
   V(() => {
-    if (!n.current || !B) return;
+    if (!o.current || !q) return;
     const t = {
       width: M.current.width,
       height: M.current.height,
       font: {
-        family: "Inter, sans-serif"
+        family: E
       },
       showlegend: !1,
       margin: { l: 90, r: 40, b: 80, t: 40 },
       xaxis: {
         title: {
-          text: i,
+          text: c,
           font: {
             size: 16,
-            color: o.textSecondary,
-            family: "Inter, sans-serif",
+            color: e.textSecondary,
+            family: E,
             weight: 400
           },
           standoff: 20
         },
-        gridcolor: E,
-        tickcolor: o.tickColor,
+        gridcolor: A,
+        tickcolor: e.tickColor,
         ticklen: 8,
         tickwidth: 1,
         ticks: "outside",
-        linecolor: o.lineColor,
+        linecolor: e.lineColor,
         linewidth: 1,
         zeroline: !1,
         automargin: !0
       },
       yaxis: {
         title: {
-          text: a,
+          text: s,
           font: {
             size: 16,
-            color: o.textSecondary,
-            family: "Inter, sans-serif",
+            color: e.textSecondary,
+            family: E,
             weight: 400
           },
           standoff: 20
         },
-        gridcolor: E,
-        tickcolor: o.tickColor,
+        gridcolor: A,
+        tickcolor: e.tickColor,
         ticklen: 8,
         tickwidth: 1,
         ticks: "outside",
-        linecolor: o.lineColor,
+        linecolor: e.lineColor,
         linewidth: 1,
         zeroline: !1,
         rangemode: "tozero",
         automargin: !0
       },
-      barmode: F,
-      bargap: p,
-      paper_bgcolor: o.paperBg,
-      plot_bgcolor: o.plotBg
-    }, d = {
+      barmode: B,
+      bargap: g,
+      paper_bgcolor: e.paperBg,
+      plot_bgcolor: e.plotBg
+    }, u = {
       // Sizing is driven from the measured container; disable Plotly's own
       // window-resize responsiveness (it can't see container resizes).
       responsive: !1,
       displayModeBar: !1,
       displaylogo: !1
     };
-    A.newPlot(n.current, S, t, d), b(n.current);
-    const h = n.current;
-    return R.current = !0, C.current = { ...M.current }, () => {
-      h && (A.purge(h), R.current = !1);
+    let h = !1, m = null;
+    return Q().then((i) => {
+      h || !o.current || (i.newPlot(o.current, H, t, u), b(o.current), m = o.current, L.current = !0, C.current = { ...M.current });
+    }), () => {
+      h = !0, m && (j().purge(m), L.current = !1);
     };
-  }, [B, i, a, p, S, F, E, o, b]), V(() => {
-    const t = n.current;
-    !t || !R.current || m <= 0 || f <= 0 || C.current.width === m && C.current.height === f || (C.current = { width: m, height: f }, A.relayout(t, { width: m, height: f }).catch(
-      () => {
-      }
-    ));
-  }, [m, f]);
+  }, [q, c, s, g, H, B, A, e, b]), V(() => {
+    const t = o.current;
+    !t || !L.current || f <= 0 || p <= 0 || C.current.width === f && C.current.height === p || (C.current = { width: f, height: p }, j().relayout(t, { width: f, height: p }).catch(() => {
+    }));
+  }, [f, p]);
   const U = ({ series: t }) => {
-    const d = t.map((l, v) => /* @__PURE__ */ u(G.Fragment, { children: /* @__PURE__ */ I("div", { className: "legend-item", children: [
-      /* @__PURE__ */ u("span", { className: "color-box", style: { background: l.color } }),
-      l.name,
-      v < t.length - 1 && /* @__PURE__ */ u("span", { className: "divider" })
-    ] }) }, l.name)), h = [], w = 6;
-    for (let l = 0; l < d.length; l += w)
+    const u = t.map((i, w) => /* @__PURE__ */ d(J.Fragment, { children: /* @__PURE__ */ _("div", { className: "legend-item", children: [
+      /* @__PURE__ */ d("span", { className: "color-box", style: { background: i.color } }),
+      i.name,
+      w < t.length - 1 && /* @__PURE__ */ d("span", { className: "divider" })
+    ] }) }, i.name)), h = [], m = 6;
+    for (let i = 0; i < u.length; i += m)
       h.push(
-        /* @__PURE__ */ u("div", { className: "legend-row", children: d.slice(l, l + w) }, l)
+        /* @__PURE__ */ d("div", { className: "legend-row", children: u.slice(i, i + m) }, i)
       );
-    return /* @__PURE__ */ u("div", { className: "legend-container", children: h });
+    return /* @__PURE__ */ d("div", { className: "legend-container", children: h });
   };
-  return /* @__PURE__ */ I(
+  return /* @__PURE__ */ _(
     "div",
     {
-      className: _("histogram-container relative", X && "w-full", D && "h-full"),
-      style: c === void 0 ? void 0 : { width: c },
+      className: F("histogram-container relative", Y && "w-full", D && "h-full"),
+      style: l === void 0 ? void 0 : { width: l },
       children: [
-        /* @__PURE__ */ I("div", { className: _("chart-container", D && "flex h-full flex-col"), children: [
-          s && /* @__PURE__ */ u("div", { className: "title-container", children: /* @__PURE__ */ u("h2", { className: "title", children: s }) }),
-          /* @__PURE__ */ u("div", { ref: j, className: _(D && "min-h-0 flex-1"), children: /* @__PURE__ */ u(
+        /* @__PURE__ */ _("div", { className: F("chart-container", D && "flex h-full flex-col"), children: [
+          a && /* @__PURE__ */ d("div", { className: "title-container", children: /* @__PURE__ */ d("h2", { className: "title", children: a }) }),
+          /* @__PURE__ */ d("div", { ref: X, className: F(D && "min-h-0 flex-1"), children: /* @__PURE__ */ d(
             "div",
             {
-              ref: n,
+              ref: o,
               style: {
                 width: "100%",
                 height: "100%",
@@ -213,7 +212,7 @@ const tt = -0.5, ot = (r) => r.reduce((e, s) => e + s, 0) / r.length, et = (r, c
               }
             }
           ) }),
-          /* @__PURE__ */ u(U, { series: y })
+          /* @__PURE__ */ d(U, { series: v })
         ] }),
         z
       ]
@@ -221,6 +220,6 @@ const tt = -0.5, ot = (r) => r.reduce((e, s) => e + s, 0) / r.length, et = (r, c
   );
 };
 export {
-  ft as Histogram
+  gt as Histogram
 };
 //# sourceMappingURL=Histogram.js.map

package/dist/components/charts/Histogram/Histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"Histogram.js","sources":["../../../../src/components/charts/Histogram/Histogram.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Histogram.scss\";\n\n/** Exponent coefficient for normal distribution calculation */\nconst NORMAL_DISTRIBUTION_EXPONENT_COEFF = -0.5;\n\ninterface HistogramDataSeries {\n  x: number[];\n  name: string;\n  color?: string;\n  autobinx?: boolean;\n  xbins?: {\n    start: number;\n    end: number;\n    size: number;\n  };\n  opacity?: number;\n  showDistributionLine?: boolean;\n  lineWidth?: number;\n}\n\ntype HistogramProps = {\n  dataSeries: HistogramDataSeries | HistogramDataSeries[];\n  /**\n   * Fixed width in pixels. When omitted, the chart fills its container and\n   * tracks the container's width via a `ResizeObserver`.\n   */\n  width?: number;\n  /**\n   * Fixed height in pixels. When omitted, the chart fills its container and\n   * tracks the container's height via a `ResizeObserver`.\n   */\n  height?: number;\n  title?: string;\n  xTitle?: string;\n  yTitle?: string;\n  bargap?: number;\n  showDistributionLine?: boolean;\n};\n\nconst calculateMean = (data: number[]): number => {\n  const sum = data.reduce((acc, val) => acc + val, 0);\n  return sum / data.length;\n};\n\nconst calculateStdDev = (data: number[], mean: number): number => {\n  const squaredDiffs = data.map((value) => Math.pow(value - mean, 2));\n  const variance =\n    squaredDiffs.reduce((acc, val) => acc + val, 0) / data.length;\n  return Math.sqrt(variance);\n};\n\nconst generateNormalDistributionPoints = (\n  mean: number,\n  stdDev: number,\n  start: number,\n  end: number,\n  points = 100\n): { x: number[]; y: number[] } => {\n  const xValues: number[] = [];\n  const yValues: number[] = [];\n\n  const step = (end - start) / (points - 1);\n\n  for (let i = 0; i < points; i++) {\n    const x = start + i * step;\n    xValues.push(x);\n\n    const exponent = NORMAL_DISTRIBUTION_EXPONENT_COEFF * Math.pow((x - mean) / stdDev, 2);\n    const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(exponent);\n    yValues.push(y);\n  }\n\n  return { x: xValues, y: yValues };\n};\n\nconst scaleDistributionCurve = (\n  yValues: number[],\n  histogramData: number[],\n  bins: { start: number; end: number; size: number }\n): number[] => {\n  const binCount = Math.ceil((bins.end - bins.start) / bins.size);\n  const binFrequencies = Array(binCount).fill(0);\n\n  histogramData.forEach((value) => {\n    if (value >= bins.start && value <= bins.end) {\n      const binIndex = Math.floor((value - bins.start) / bins.size);\n      binFrequencies[binIndex]++;\n    }\n  });\n\n  const maxBinFrequency = Math.max(...binFrequencies);\n  const maxCurveValue = Math.max(...yValues);\n\n  const scaleFactor = maxBinFrequency / maxCurveValue;\n\n  return yValues.map((y) => y * scaleFactor);\n};\n\nconst Histogram: React.FC<HistogramProps> = ({\n  dataSeries,\n  width,\n  height,\n  title = \"Histogram\",\n  xTitle = \"X Axis\",\n  yTitle = \"Frequency\",\n  bargap = 0.2,\n  showDistributionLine = false,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  // Omitted width/height → fill the container and track its measured size;\n  // explicit pixel values override. Histogram has its own HTML title + legend,\n  // so we measure a wrapper around just the Plotly canvas. See AreaGraph for\n  // the reference pattern.\n  const [plotAreaRef, measured] = useElementSize<HTMLDivElement>();\n  const resolvedWidth = width ?? measured.width;\n  const resolvedHeight = height ?? measured.height;\n  const hasSize = resolvedWidth > 0 && resolvedHeight > 0;\n  // Fill is per-dimension: omit width to fill the container width, omit height\n  // to fill its height (so e.g. a fixed width with a container-driven height works).\n  const fillWidth = width === undefined;\n  const fillHeight = height === undefined;\n  const sizeRef = useRef({ width: resolvedWidth, height: resolvedHeight });\n  sizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n  const plotInitedRef = useRef(false);\n  // Size last applied to the plot, so the resize effect can skip a redundant\n  // relayout right after newPlot already drew at that size.\n  const appliedSizeRef = useRef({ width: 0, height: 0 });\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n  const effectiveBarMode = useMemo<\n    \"stack\" | \"group\" | \"overlay\" | \"relative\" | undefined\n  >(() => (seriesArray.length > 1 ? \"stack\" : undefined), [seriesArray.length]);\n\n  const defaultColors = CHART_COLORS;\n\n  const seriesWithColors = useMemo(() => {\n    return seriesArray.map((series, index) => {\n      const hasDistributionLine =\n        typeof series.showDistributionLine === \"undefined\"\n          ? showDistributionLine\n          : series.showDistributionLine;\n\n      return {\n        ...series,\n        color: series.color || defaultColors[index % defaultColors.length],\n        opacity: hasDistributionLine ? 0.5 : series.opacity || 1,\n        showDistributionLine: hasDistributionLine,\n        lineWidth: series.lineWidth || 3,\n      };\n    });\n  }, [seriesArray, showDistributionLine, defaultColors]);\n\n  const gridColor = theme.gridColor;\n\n  const histogramData = useMemo(\n    () =>\n      seriesWithColors.map((series) => ({\n        type: \"histogram\" as const,\n        x: series.x,\n        name: series.name,\n        marker: {\n          color: series.color,\n          line: {\n            color: theme.paperBg,\n            width: 1,\n          },\n          opacity: series.opacity,\n        },\n        autobinx: series.autobinx,\n        xbins: series.xbins,\n        hoverinfo: \"none\" as const,\n      })),\n    [seriesWithColors, theme],\n  );\n\n  const distributionLines = useMemo(\n    () =>\n      seriesWithColors\n        .filter((series) => series.showDistributionLine)\n        .map((series) => {\n          const mean = calculateMean(series.x);\n          const stdDev = calculateStdDev(series.x, mean);\n\n          const min = Math.min(...series.x);\n          const max = Math.max(...series.x);\n          const range = max - min;\n          const start = min - range * 0.1;\n          const end = max + range * 0.1;\n\n          const bins = series.xbins || {\n            start: start,\n            end: end,\n            size: range / 10,\n          };\n\n          const curvePoints = generateNormalDistributionPoints(\n            mean,\n            stdDev,\n            start,\n            end,\n            100,\n          );\n\n          const scaledYValues = scaleDistributionCurve(\n            curvePoints.y,\n            series.x,\n            bins,\n          );\n\n          return {\n            type: \"scatter\" as const,\n            x: curvePoints.x,\n            y: scaledYValues,\n            mode: \"lines\" as const,\n            name: `${series.name} Distribution`,\n            line: {\n              color: series.color,\n              width: series.lineWidth,\n            },\n            hoverinfo: \"none\" as const,\n          };\n        }),\n    [seriesWithColors],\n  );\n\n  const plotData = useMemo(\n    () => [...histogramData, ...distributionLines],\n    [histogramData, distributionLines],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || !hasSize) return;\n\n    const layout = {\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      showlegend: false,\n      margin: { l: 90, r: 40, b: 80, t: 40 },\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        automargin: true,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        rangemode: \"tozero\" as const,\n        automargin: true,\n      },\n      barmode: effectiveBarMode,\n      bargap: bargap,\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      // Sizing is driven from the measured container; disable Plotly's own\n      // window-resize responsiveness (it can't see container resizes).\n      responsive: false,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n    plotInitedRef.current = true;\n    appliedSizeRef.current = { ...sizeRef.current };\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [hasSize, xTitle, yTitle, bargap, plotData, effectiveBarMode, gridColor, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves tooltip/event bindings.\n  useEffect(() => {\n    const plotElement = plotRef.current;\n    if (!plotElement || !plotInitedRef.current || resolvedWidth <= 0 || resolvedHeight <= 0) {\n      return;\n    }\n    // newPlot already drew at the current size; skip the redundant relayout\n    // (it would queue an automargin redraw that can reject if we unmount first).\n    if (\n      appliedSizeRef.current.width === resolvedWidth &&\n      appliedSizeRef.current.height === resolvedHeight\n    ) {\n      return;\n    }\n    appliedSizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n    // Swallow rejections from a relayout that races an unmount/purge.\n    void Plotly.relayout(plotElement, { width: resolvedWidth, height: resolvedHeight }).catch(\n      () => {},\n    );\n  }, [resolvedWidth, resolvedHeight]);\n\n  const ChartLegend: React.FC<{\n    series: Array<{ name: string; color: string }>;\n  }> = ({ series }) => {\n    const items = series.map((item, i) => (\n      <React.Fragment key={item.name}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: item.color }} />\n          {item.name}\n          {i < series.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rows = [];\n    const rowSize = 6;\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n\n    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div\n      className={cn(\"histogram-container relative\", fillWidth && \"w-full\", fillHeight && \"h-full\")}\n      style={width === undefined ? undefined : { width }}\n    >\n      <div className={cn(\"chart-container\", fillHeight && \"flex h-full flex-col\")}>\n        {title && (\n          <div className=\"title-container\">\n            <h2 className=\"title\">{title}</h2>\n          </div>\n        )}\n        {/* Measured plot area — flexes to fill the space left by the title and\n            legend in fill mode, so the Plotly canvas tracks it. */}\n        <div ref={plotAreaRef} className={cn(fillHeight && \"min-h-0 flex-1\")}>\n          <div\n            ref={plotRef}\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              margin: \"0\",\n            }}\n          />\n        </div>\n        <ChartLegend series={seriesWithColors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Histogram };\nexport type { HistogramDataSeries, HistogramProps };\n"],"names":["NORMAL_DISTRIBUTION_EXPONENT_COEFF","calculateMean","data","acc","val","calculateStdDev","mean","variance","value","generateNormalDistributionPoints","stdDev","start","end","points","xValues","yValues","step","i","x","exponent","y","scaleDistributionCurve","histogramData","bins","binCount","binFrequencies","binIndex","maxBinFrequency","maxCurveValue","scaleFactor","Histogram","dataSeries","width","height","title","xTitle","yTitle","bargap","showDistributionLine","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","plotAreaRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","seriesArray","useMemo","effectiveBarMode","defaultColors","CHART_COLORS","seriesWithColors","series","index","hasDistributionLine","gridColor","distributionLines","min","max","range","curvePoints","scaledYValues","plotData","useEffect","layout","config","Plotly","plotElement","ChartLegend","items","item","jsx","React","jsxs","rows","rowSize","cn"],"mappings":"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"}
+{"version":3,"file":"Histogram.js","sources":["../../../../src/components/charts/Histogram/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Histogram.scss\";\n\n/** Exponent coefficient for normal distribution calculation */\nconst NORMAL_DISTRIBUTION_EXPONENT_COEFF = -0.5;\n\ninterface HistogramDataSeries {\n  x: number[];\n  name: string;\n  color?: string;\n  autobinx?: boolean;\n  xbins?: {\n    start: number;\n    end: number;\n    size: number;\n  };\n  opacity?: number;\n  showDistributionLine?: boolean;\n  lineWidth?: number;\n}\n\ntype HistogramProps = {\n  dataSeries: HistogramDataSeries | HistogramDataSeries[];\n  /**\n   * Fixed width in pixels. When omitted, the chart fills its container and\n   * tracks the container's width via a `ResizeObserver`.\n   */\n  width?: number;\n  /**\n   * Fixed height in pixels. When omitted, the chart fills its container and\n   * tracks the container's height via a `ResizeObserver`.\n   */\n  height?: number;\n  title?: string;\n  xTitle?: string;\n  yTitle?: string;\n  bargap?: number;\n  showDistributionLine?: boolean;\n};\n\nconst calculateMean = (data: number[]): number => {\n  const sum = data.reduce((acc, val) => acc + val, 0);\n  return sum / data.length;\n};\n\nconst calculateStdDev = (data: number[], mean: number): number => {\n  const squaredDiffs = data.map((value) => Math.pow(value - mean, 2));\n  const variance =\n    squaredDiffs.reduce((acc, val) => acc + val, 0) / data.length;\n  return Math.sqrt(variance);\n};\n\nconst generateNormalDistributionPoints = (\n  mean: number,\n  stdDev: number,\n  start: number,\n  end: number,\n  points = 100\n): { x: number[]; y: number[] } => {\n  const xValues: number[] = [];\n  const yValues: number[] = [];\n\n  const step = (end - start) / (points - 1);\n\n  for (let i = 0; i < points; i++) {\n    const x = start + i * step;\n    xValues.push(x);\n\n    const exponent = NORMAL_DISTRIBUTION_EXPONENT_COEFF * Math.pow((x - mean) / stdDev, 2);\n    const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(exponent);\n    yValues.push(y);\n  }\n\n  return { x: xValues, y: yValues };\n};\n\nconst scaleDistributionCurve = (\n  yValues: number[],\n  histogramData: number[],\n  bins: { start: number; end: number; size: number }\n): number[] => {\n  const binCount = Math.ceil((bins.end - bins.start) / bins.size);\n  const binFrequencies = Array(binCount).fill(0);\n\n  histogramData.forEach((value) => {\n    if (value >= bins.start && value <= bins.end) {\n      const binIndex = Math.floor((value - bins.start) / bins.size);\n      binFrequencies[binIndex]++;\n    }\n  });\n\n  const maxBinFrequency = Math.max(...binFrequencies);\n  const maxCurveValue = Math.max(...yValues);\n\n  const scaleFactor = maxBinFrequency / maxCurveValue;\n\n  return yValues.map((y) => y * scaleFactor);\n};\n\nconst Histogram: React.FC<HistogramProps> = ({\n  dataSeries,\n  width,\n  height,\n  title = \"Histogram\",\n  xTitle = \"X Axis\",\n  yTitle = \"Frequency\",\n  bargap = 0.2,\n  showDistributionLine = false,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  // Omitted width/height → fill the container and track its measured size;\n  // explicit pixel values override. Histogram has its own HTML title + legend,\n  // so we measure a wrapper around just the Plotly canvas. See AreaPlot for\n  // the reference pattern.\n  const [plotAreaRef, measured] = useElementSize<HTMLDivElement>();\n  const resolvedWidth = width ?? measured.width;\n  const resolvedHeight = height ?? measured.height;\n  const hasSize = resolvedWidth > 0 && resolvedHeight > 0;\n  // Fill is per-dimension: omit width to fill the container width, omit height\n  // to fill its height (so e.g. a fixed width with a container-driven height works).\n  const fillWidth = width === undefined;\n  const fillHeight = height === undefined;\n  const sizeRef = useRef({ width: resolvedWidth, height: resolvedHeight });\n  sizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n  const plotInitedRef = useRef(false);\n  // Size last applied to the plot, so the resize effect can skip a redundant\n  // relayout right after newPlot already drew at that size.\n  const appliedSizeRef = useRef({ width: 0, height: 0 });\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n  const effectiveBarMode = useMemo<\n    \"stack\" | \"group\" | \"overlay\" | \"relative\" | undefined\n  >(() => (seriesArray.length > 1 ? \"stack\" : undefined), [seriesArray.length]);\n\n  const defaultColors = CHART_COLORS;\n\n  const seriesWithColors = useMemo(() => {\n    return seriesArray.map((series, index) => {\n      const hasDistributionLine =\n        typeof series.showDistributionLine === \"undefined\"\n          ? showDistributionLine\n          : series.showDistributionLine;\n\n      return {\n        ...series,\n        color: series.color || defaultColors[index % defaultColors.length],\n        opacity: hasDistributionLine ? 0.5 : series.opacity || 1,\n        showDistributionLine: hasDistributionLine,\n        lineWidth: series.lineWidth || 3,\n      };\n    });\n  }, [seriesArray, showDistributionLine, defaultColors]);\n\n  const gridColor = theme.gridColor;\n\n  const histogramData = useMemo(\n    () =>\n      seriesWithColors.map((series) => ({\n        type: \"histogram\" as const,\n        x: series.x,\n        name: series.name,\n        marker: {\n          color: series.color,\n          line: {\n            color: theme.paperBg,\n            width: 1,\n          },\n          opacity: series.opacity,\n        },\n        autobinx: series.autobinx,\n        xbins: series.xbins,\n        hoverinfo: \"none\" as const,\n      })),\n    [seriesWithColors, theme],\n  );\n\n  const distributionLines = useMemo(\n    () =>\n      seriesWithColors\n        .filter((series) => series.showDistributionLine)\n        .map((series) => {\n          const mean = calculateMean(series.x);\n          const stdDev = calculateStdDev(series.x, mean);\n\n          const min = Math.min(...series.x);\n          const max = Math.max(...series.x);\n          const range = max - min;\n          const start = min - range * 0.1;\n          const end = max + range * 0.1;\n\n          const bins = series.xbins || {\n            start: start,\n            end: end,\n            size: range / 10,\n          };\n\n          const curvePoints = generateNormalDistributionPoints(\n            mean,\n            stdDev,\n            start,\n            end,\n            100,\n          );\n\n          const scaledYValues = scaleDistributionCurve(\n            curvePoints.y,\n            series.x,\n            bins,\n          );\n\n          return {\n            type: \"scatter\" as const,\n            x: curvePoints.x,\n            y: scaledYValues,\n            mode: \"lines\" as const,\n            name: `${series.name} Distribution`,\n            line: {\n              color: series.color,\n              width: series.lineWidth,\n            },\n            hoverinfo: \"none\" as const,\n          };\n        }),\n    [seriesWithColors],\n  );\n\n  const plotData = useMemo(\n    () => [...histogramData, ...distributionLines],\n    [histogramData, distributionLines],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || !hasSize) return;\n\n    const layout = {\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      font: {\n        family: CHART_FONT_FAMILY,\n      },\n      showlegend: false,\n      margin: { l: 90, r: 40, b: 80, t: 40 },\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        automargin: true,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        rangemode: \"tozero\" as const,\n        automargin: true,\n      },\n      barmode: effectiveBarMode,\n      bargap: bargap,\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      // Sizing is driven from the measured container; disable Plotly's own\n      // window-resize responsiveness (it can't see container resizes).\n      responsive: false,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n      plotInitedRef.current = true;\n      appliedSizeRef.current = { ...sizeRef.current };\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [hasSize, xTitle, yTitle, bargap, plotData, effectiveBarMode, gridColor, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves tooltip/event bindings.\n  useEffect(() => {\n    const plotElement = plotRef.current;\n    if (!plotElement || !plotInitedRef.current || resolvedWidth <= 0 || resolvedHeight <= 0) {\n      return;\n    }\n    // newPlot already drew at the current size; skip the redundant relayout\n    // (it would queue an automargin redraw that can reject if we unmount first).\n    if (\n      appliedSizeRef.current.width === resolvedWidth &&\n      appliedSizeRef.current.height === resolvedHeight\n    ) {\n      return;\n    }\n    appliedSizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n    // Swallow rejections from a relayout that races an unmount/purge.\n    // plotInitedRef guarantees Plotly finished loading, so sync access is safe.\n    void getLoadedPlotly()\n      .relayout(plotElement, { width: resolvedWidth, height: resolvedHeight })\n      .catch(() => {});\n  }, [resolvedWidth, resolvedHeight]);\n\n  const ChartLegend: React.FC<{\n    series: Array<{ name: string; color: string }>;\n  }> = ({ series }) => {\n    const items = series.map((item, i) => (\n      <React.Fragment key={item.name}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: item.color }} />\n          {item.name}\n          {i < series.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rows = [];\n    const rowSize = 6;\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n\n    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div\n      className={cn(\"histogram-container relative\", fillWidth && \"w-full\", fillHeight && \"h-full\")}\n      style={width === undefined ? undefined : { width }}\n    >\n      <div className={cn(\"chart-container\", fillHeight && \"flex h-full flex-col\")}>\n        {title && (\n          <div className=\"title-container\">\n            <h2 className=\"title\">{title}</h2>\n          </div>\n        )}\n        {/* Measured plot area — flexes to fill the space left by the title and\n            legend in fill mode, so the Plotly canvas tracks it. */}\n        <div ref={plotAreaRef} className={cn(fillHeight && \"min-h-0 flex-1\")}>\n          <div\n            ref={plotRef}\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              margin: \"0\",\n            }}\n          />\n        </div>\n        <ChartLegend series={seriesWithColors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Histogram };\nexport type { HistogramDataSeries, HistogramProps };\n"],"names":["NORMAL_DISTRIBUTION_EXPONENT_COEFF","calculateMean","data","acc","val","calculateStdDev","mean","variance","value","generateNormalDistributionPoints","stdDev","start","end","points","xValues","yValues","step","i","x","exponent","y","scaleDistributionCurve","histogramData","bins","binCount","binFrequencies","binIndex","maxBinFrequency","maxCurveValue","scaleFactor","Histogram","dataSeries","width","height","title","xTitle","yTitle","bargap","showDistributionLine","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","plotAreaRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","seriesArray","useMemo","effectiveBarMode","defaultColors","CHART_COLORS","seriesWithColors","series","index","hasDistributionLine","gridColor","distributionLines","min","max","range","curvePoints","scaledYValues","plotData","useEffect","layout","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","ChartLegend","items","item","jsx","React","jsxs","rows","rowSize","cn"],"mappings":";;;;;;;;;AAYA,MAAMA,KAAqC,MAoCrCC,KAAgB,CAACC,MACTA,EAAK,OAAO,CAACC,GAAKC,MAAQD,IAAMC,GAAK,CAAC,IACrCF,EAAK,QAGdG,KAAkB,CAACH,GAAgBI,MAAyB;AAEhE,QAAMC,IADeL,EAAK,IAAI,CAACM,MAAU,KAAK,IAAIA,IAAQF,GAAM,CAAC,CAAC,EAEnD,OAAO,CAACH,GAAKC,MAAQD,IAAMC,GAAK,CAAC,IAAIF,EAAK;AACzD,SAAO,KAAK,KAAKK,CAAQ;AAC3B,GAEME,KAAmC,CACvCH,GACAI,GACAC,GACAC,GACAC,IAAS,QACwB;AACjC,QAAMC,IAAoB,CAAA,GACpBC,IAAoB,CAAA,GAEpBC,KAAQJ,IAAMD,MAAUE,IAAS;AAEvC,WAASI,IAAI,GAAGA,IAAIJ,GAAQI,KAAK;AAC/B,UAAMC,IAAIP,IAAQM,IAAID;AACtB,IAAAF,EAAQ,KAAKI,CAAC;AAEd,UAAMC,IAAWnB,KAAqC,KAAK,KAAKkB,IAAIZ,KAAQI,GAAQ,CAAC,GAC/EU,IAAK,KAAKV,IAAS,KAAK,KAAK,IAAI,KAAK,EAAE,KAAM,KAAK,IAAIS,CAAQ;AACrE,IAAAJ,EAAQ,KAAKK,CAAC;AAAA,EAChB;AAEA,SAAO,EAAE,GAAGN,GAAS,GAAGC,EAAA;AAC1B,GAEMM,KAAyB,CAC7BN,GACAO,GACAC,MACa;AACb,QAAMC,IAAW,KAAK,MAAMD,EAAK,MAAMA,EAAK,SAASA,EAAK,IAAI,GACxDE,IAAiB,MAAMD,CAAQ,EAAE,KAAK,CAAC;AAE7C,EAAAF,EAAc,QAAQ,CAACd,MAAU;AAC/B,QAAIA,KAASe,EAAK,SAASf,KAASe,EAAK,KAAK;AAC5C,YAAMG,IAAW,KAAK,OAAOlB,IAAQe,EAAK,SAASA,EAAK,IAAI;AAC5D,MAAAE,EAAeC,CAAQ;AAAA,IACzB;AAAA,EACF,CAAC;AAED,QAAMC,IAAkB,KAAK,IAAI,GAAGF,CAAc,GAC5CG,IAAgB,KAAK,IAAI,GAAGb,CAAO,GAEnCc,IAAcF,IAAkBC;AAEtC,SAAOb,EAAQ,IAAI,CAACK,MAAMA,IAAIS,CAAW;AAC3C,GAEMC,KAAsC,CAAC;AAAA,EAC3C,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,sBAAAC,IAAuB;AACzB,MAAM;AACJ,QAAMC,IAAUC,EAAuB,IAAI,GACrCC,IAAQC,GAAA,GACR,EAAE,aAAAC,GAAa,gBAAAC,EAAA,IAAmBC,EAAgB,EAAE,QAAQV,GAAQ,QAAQC,GAAQ,GAMpF,CAACU,GAAaC,CAAQ,IAAIC,EAAA,GAC1BC,IAAgBjB,KAASe,EAAS,OAClCG,IAAiBjB,KAAUc,EAAS,QACpCI,IAAUF,IAAgB,KAAKC,IAAiB,GAGhDE,IAAYpB,MAAU,QACtBqB,IAAapB,MAAW,QACxBqB,IAAUd,EAAO,EAAE,OAAOS,GAAe,QAAQC,GAAgB;AACvE,EAAAI,EAAQ,UAAU,EAAE,OAAOL,GAAe,QAAQC,EAAA;AAClD,QAAMK,IAAgBf,EAAO,EAAK,GAG5BgB,IAAiBhB,EAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,GAC/CiB,IAAcC;AAAA,IAClB,MAAO,MAAM,QAAQ3B,CAAU,IAAIA,IAAa,CAACA,CAAU;AAAA,IAC3D,CAACA,CAAU;AAAA,EAAA,GAEP4B,IAAmBD,EAEvB,MAAOD,EAAY,SAAS,IAAI,UAAU,QAAY,CAACA,EAAY,MAAM,CAAC,GAEtEG,IAAgBC,IAEhBC,IAAmBJ,EAAQ,MACxBD,EAAY,IAAI,CAACM,GAAQC,MAAU;AACxC,UAAMC,IACJ,OAAOF,EAAO,uBAAyB,MACnCzB,IACAyB,EAAO;AAEb,WAAO;AAAA,MACL,GAAGA;AAAA,MACH,OAAOA,EAAO,SAASH,EAAcI,IAAQJ,EAAc,MAAM;AAAA,MACjE,SAASK,IAAsB,MAAMF,EAAO,WAAW;AAAA,MACvD,sBAAsBE;AAAA,MACtB,WAAWF,EAAO,aAAa;AAAA,IAAA;AAAA,EAEnC,CAAC,GACA,CAACN,GAAanB,GAAsBsB,CAAa,CAAC,GAE/CM,IAAYzB,EAAM,WAElBnB,IAAgBoC;AAAA,IACpB,MACEI,EAAiB,IAAI,CAACC,OAAY;AAAA,MAChC,MAAM;AAAA,MACN,GAAGA,EAAO;AAAA,MACV,MAAMA,EAAO;AAAA,MACb,QAAQ;AAAA,QACN,OAAOA,EAAO;AAAA,QACd,MAAM;AAAA,UACJ,OAAOtB,EAAM;AAAA,UACb,OAAO;AAAA,QAAA;AAAA,QAET,SAASsB,EAAO;AAAA,MAAA;AAAA,MAElB,UAAUA,EAAO;AAAA,MACjB,OAAOA,EAAO;AAAA,MACd,WAAW;AAAA,IAAA,EACX;AAAA,IACJ,CAACD,GAAkBrB,CAAK;AAAA,EAAA,GAGpB0B,IAAoBT;AAAA,IACxB,MACEI,EACG,OAAO,CAACC,MAAWA,EAAO,oBAAoB,EAC9C,IAAI,CAACA,MAAW;AACf,YAAMzD,IAAOL,GAAc8D,EAAO,CAAC,GAC7BrD,IAASL,GAAgB0D,EAAO,GAAGzD,CAAI,GAEvC8D,IAAM,KAAK,IAAI,GAAGL,EAAO,CAAC,GAC1BM,IAAM,KAAK,IAAI,GAAGN,EAAO,CAAC,GAC1BO,IAAQD,IAAMD,GACdzD,IAAQyD,IAAME,IAAQ,KACtB1D,IAAMyD,IAAMC,IAAQ,KAEpB/C,IAAOwC,EAAO,SAAS;AAAA,QAC3B,OAAApD;AAAA,QACA,KAAAC;AAAA,QACA,MAAM0D,IAAQ;AAAA,MAAA,GAGVC,IAAc9D;AAAA,QAClBH;AAAA,QACAI;AAAA,QACAC;AAAA,QACAC;AAAA,QACA;AAAA,MAAA,GAGI4D,IAAgBnD;AAAA,QACpBkD,EAAY;AAAA,QACZR,EAAO;AAAA,QACPxC;AAAA,MAAA;AAGF,aAAO;AAAA,QACL,MAAM;AAAA,QACN,GAAGgD,EAAY;AAAA,QACf,GAAGC;AAAA,QACH,MAAM;AAAA,QACN,MAAM,GAAGT,EAAO,IAAI;AAAA,QACpB,MAAM;AAAA,UACJ,OAAOA,EAAO;AAAA,UACd,OAAOA,EAAO;AAAA,QAAA;AAAA,QAEhB,WAAW;AAAA,MAAA;AAAA,IAEf,CAAC;AAAA,IACL,CAACD,CAAgB;AAAA,EAAA,GAGbW,IAAWf;AAAA,IACf,MAAM,CAAC,GAAGpC,GAAe,GAAG6C,CAAiB;AAAA,IAC7C,CAAC7C,GAAe6C,CAAiB;AAAA,EAAA;AAGnC,EAAAO,EAAU,MAAM;AACd,QAAI,CAACnC,EAAQ,WAAW,CAACY,EAAS;AAElC,UAAMwB,IAAS;AAAA,MACb,OAAOrB,EAAQ,QAAQ;AAAA,MACvB,QAAQA,EAAQ,QAAQ;AAAA,MACxB,MAAM;AAAA,QACJ,QAAQsB;AAAA,MAAA;AAAA,MAEV,YAAY;AAAA,MACZ,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAA;AAAA,MAClC,OAAO;AAAA,QACL,OAAO;AAAA,UACL,MAAMzC;AAAA,UACN,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAOM,EAAM;AAAA,YACb,QAAQmC;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,UAEV,UAAU;AAAA,QAAA;AAAA,QAEZ,WAAWV;AAAA,QACX,WAAWzB,EAAM;AAAA,QACjB,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,WAAWA,EAAM;AAAA,QACjB,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,OAAO;AAAA,UACL,MAAML;AAAA,UACN,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAOK,EAAM;AAAA,YACb,QAAQmC;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,UAEV,UAAU;AAAA,QAAA;AAAA,QAEZ,WAAWV;AAAA,QACX,WAAWzB,EAAM;AAAA,QACjB,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,WAAWA,EAAM;AAAA,QACjB,WAAW;AAAA,QACX,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,MAEd,SAASkB;AAAA,MACT,QAAAtB;AAAA,MACA,eAAeI,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,IAAA,GAGhBoC,IAAS;AAAA;AAAA;AAAA,MAGb,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,IAAA;AAKf,QAAIC,IAAY,IACZC,IAAqC;AACzC,WAAKC,EAAA,EAAa,KAAK,CAACC,MAAW;AACjC,MAAIH,KAAa,CAACvC,EAAQ,YAC1B0C,EAAO,QAAQ1C,EAAQ,SAASkC,GAAUE,GAAQE,CAAM,GACxDlC,EAAYJ,EAAQ,OAAO,GAG3BwC,IAAcxC,EAAQ,SACtBgB,EAAc,UAAU,IACxBC,EAAe,UAAU,EAAE,GAAGF,EAAQ,QAAA;AAAA,IACxC,CAAC,GAEM,MAAM;AACX,MAAAwB,IAAY,IACRC,MACFG,EAAA,EAAkB,MAAMH,CAAW,GACnCxB,EAAc,UAAU;AAAA,IAE5B;AAAA,EACF,GAAG,CAACJ,GAAShB,GAAQC,GAAQC,GAAQoC,GAAUd,GAAkBO,GAAWzB,GAAOE,CAAW,CAAC,GAI/F+B,EAAU,MAAM;AACd,UAAMK,IAAcxC,EAAQ;AAC5B,IAAI,CAACwC,KAAe,CAACxB,EAAc,WAAWN,KAAiB,KAAKC,KAAkB,KAMpFM,EAAe,QAAQ,UAAUP,KACjCO,EAAe,QAAQ,WAAWN,MAIpCM,EAAe,UAAU,EAAE,OAAOP,GAAe,QAAQC,EAAA,GAGpDgC,EAAA,EACF,SAASH,GAAa,EAAE,OAAO9B,GAAe,QAAQC,GAAgB,EACtE,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EACnB,GAAG,CAACD,GAAeC,CAAc,CAAC;AAElC,QAAMiC,IAED,CAAC,EAAE,QAAApB,QAAa;AACnB,UAAMqB,IAAQrB,EAAO,IAAI,CAACsB,GAAMpE,MAC9B,gBAAAqE,EAACC,EAAM,UAAN,EACC,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,MAAA,gBAAAF,EAAC,QAAA,EAAK,WAAU,aAAY,OAAO,EAAE,YAAYD,EAAK,SAAS;AAAA,MAC9DA,EAAK;AAAA,MACLpE,IAAI8C,EAAO,SAAS,KAAK,gBAAAuB,EAAC,QAAA,EAAK,WAAU,UAAA,CAAU;AAAA,IAAA,EAAA,CACtD,EAAA,GALmBD,EAAK,IAM1B,CACD,GAEKI,IAAO,CAAA,GACPC,IAAU;AAChB,aAAS,IAAI,GAAG,IAAIN,EAAM,QAAQ,KAAKM;AACrC,MAAAD,EAAK;AAAA,QACH,gBAAAH,EAAC,OAAA,EAAI,WAAU,cACZ,UAAAF,EAAM,MAAM,GAAG,IAAIM,CAAO,EAAA,GADI,CAEjC;AAAA,MAAA;AAIJ,WAAO,gBAAAJ,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAG,GAAK;AAAA,EACjD;AAEA,SACE,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWG,EAAG,gCAAgCvC,KAAa,UAAUC,KAAc,QAAQ;AAAA,MAC3F,OAAOrB,MAAU,SAAY,SAAY,EAAE,OAAAA,EAAA;AAAA,MAE3C,UAAA;AAAA,QAAA,gBAAAwD,EAAC,SAAI,WAAWG,EAAG,mBAAmBtC,KAAc,sBAAsB,GACvE,UAAA;AAAA,UAAAnB,KACC,gBAAAoD,EAAC,SAAI,WAAU,mBACb,4BAAC,MAAA,EAAG,WAAU,SAAS,UAAApD,EAAA,CAAM,EAAA,CAC/B;AAAA,UAIF,gBAAAoD,EAAC,SAAI,KAAKxC,GAAa,WAAW6C,EAAGtC,KAAc,gBAAgB,GACjE,UAAA,gBAAAiC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK/C;AAAA,cACL,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UAAA,GAEJ;AAAA,UACA,gBAAA+C,EAACH,GAAA,EAAY,QAAQrB,EAAA,CAAkB;AAAA,QAAA,GACzC;AAAA,QACClB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/charts/Histogram/index.d.ts

@@ -0,0 +1,2 @@
+export { Histogram } from './Histogram';
+export type { HistogramDataSeries, HistogramProps } from './Histogram';

package/dist/components/charts/LinePlot/LinePlot.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react/jsx-runtime"),n=require("react"),V=require("../ChartTooltip/ChartTooltip.cjs"),N=require("../plotly-loader.cjs"),B=require("../../../hooks/use-element-size.cjs"),h=require("../../../hooks/use-plotly-theme.cjs"),G=require("../../../lib/utils.cjs"),W=require("../../../utils/colors.cjs"),D=60,J=30,K=({dataSeries:d,width:T,height:R,xRange:L,yRange:g,variant:y="lines",xTitle:b,yTitle:k,title:p,xTickText:M})=>{const u=n.useRef(null),o=h.usePlotlyTheme(),{bindTooltip:v,tooltipElement:S}=V.useChartTooltip({xLabel:b,yLabel:k}),[X,I]=B.useElementSize(),c=T??I.width,a=R??I.height,P=c>0&&a>0,j=T===void 0,U=R===void 0,_=n.useRef({width:c,height:a});_.current={width:c,height:a};const C=n.useRef(!1),w=n.useRef({width:0,height:0}),{yMin:z,yMax:F}=n.useMemo(()=>{let t=Number.MAX_VALUE,e=Number.MIN_VALUE,l=Number.MAX_VALUE,i=Number.MIN_VALUE;d.forEach(A=>{A.x.forEach(s=>{t=Math.min(t,s),e=Math.max(e,s)}),A.y.forEach(s=>{l=Math.min(l,s),i=Math.max(i,s)})});const m=(e-t)*.1,r=(i-l)*.1;return{xMin:t-m,xMax:e+m,yMin:l-r,yMax:i+r}},[d]),f=n.useMemo(()=>g||[z,F],[g,z,F]),O=n.useMemo(()=>{const t=f[1]-f[0];let e=Math.pow(10,Math.floor(Math.log10(t)));t/e>10&&(e=e*2),t/e<4&&(e=e/2);const l=[];let i=Math.ceil(f[0]/e)*e;for(;i<=f[1];)l.push(i),i+=e;return l},[f]),x=n.useMemo(()=>[...new Set(d.flatMap(t=>t.x))].sort((t,e)=>t-e),[d]),Y=!!M&&M.length===x.length,q=n.useMemo(()=>{switch(y){case"lines+markers":case"lines+markers+error_bars":return"lines+markers";default:return"lines"}},[y]),E=n.useMemo(()=>({tickcolor:o.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:o.textColor,family:h.CHART_FONT_FAMILY,weight:400},linecolor:o.lineColor,linewidth:1,position:0,zeroline:!1}),[o]);return n.useEffect(()=>{if(!u.current||!P)return;const t=d.map((r,A)=>{const s=W.seriesColor(A,r.color);return{x:r.x,y:r.y,type:"scatter",mode:q,name:r.name,hoverinfo:"none",line:{color:s,width:1.5},marker:y==="lines"?{opacity:0}:{color:s,size:8,symbol:r.symbol||"triangle-up"},error_y:y==="lines+markers+error_bars"?r.error_y||{type:"data",array:r.y.map(()=>10),visible:!0,color:s,thickness:1,width:5}:void 0}}),e={...p?{title:{text:p,font:{size:32,family:h.CHART_FONT_FAMILY,color:o.textColor}}}:{},width:_.current.width,height:_.current.height,margin:{l:80,r:30,b:96,t:p?D:J,pad:10},paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg,font:{family:h.CHART_FONT_FAMILY},dragmode:!1,xaxis:{title:{text:b,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:32},gridcolor:o.gridColor,range:L,autorange:!L,tickmode:"array",tickvals:x,ticktext:Y?M:x.map(String),showgrid:!0,automargin:!0,...E},yaxis:{title:{text:k,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:30},gridcolor:o.gridColor,range:g,autorange:!g,tickmode:"array",tickvals:O,showgrid:!0,automargin:!0,...E},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:16,color:o.legendColor,family:h.CHART_FONT_FAMILY,weight:500}},showlegend:!0},l={responsive:!1,displayModeBar:!1,displaylogo:!1};let i=!1,m=null;return N.loadPlotly().then(r=>{i||!u.current||(r.newPlot(u.current,t,e,l),v(u.current),m=u.current,C.current=!0,w.current={..._.current})}),()=>{i=!0,m&&(N.getLoadedPlotly().purge(m),C.current=!1)}},[d,P,L,g,b,k,p,q,E,x,O,Y,M,f,y,o,v]),n.useEffect(()=>{const t=u.current;!t||!C.current||c<=0||a<=0||w.current.width===c&&w.current.height===a||(w.current={width:c,height:a},N.getLoadedPlotly().relayout(t,{width:c,height:a}).catch(()=>{}))},[c,a]),H.jsxs("div",{ref:X,className:G.cn("relative",j&&"w-full",U&&"h-full"),children:[H.jsx("div",{ref:u,style:{width:"100%",height:"100%"}}),S]})};exports.LinePlot=K;
+//# sourceMappingURL=LinePlot.cjs.map