npm - @tetrascience-npm/tetrascience-react-ui - Versions diffs - 0.6.0-beta.82.1 → 0.6.0-beta.84.1 - Mend

@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.82.1 → 0.6.0-beta.84.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

package/dist/components/charts/DotPlot/DotPlot.js CHANGED Viewed

@@ -1,32 +1,23 @@
-import { jsx as E } from "react/jsx-runtime";
-import R from "plotly.js-dist";
-import { useRef as k, useMemo as r, useEffect as P } from "react";
-import { usePlotlyTheme as I } from "../../../hooks/use-plotly-theme.js";
-import { COLORS as e } from "../../../utils/colors.js";
-const v = ({
+import { jsxs as P, jsx as R } from "react/jsx-runtime";
+import k from "plotly.js-dist";
+import { useRef as v, useMemo as e, useEffect as A } from "react";
+import { useChartTooltip as B } from "../ChartTooltip/ChartTooltip.js";
+import { usePlotlyTheme as O } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as D } from "../../../utils/colors.js";
+const H = ({
   dataSeries: l,
-  width: f = 1e3,
+  width: s = 1e3,
   height: d = 600,
-  title: u = "Dot Plot",
-  xTitle: n = "Columns",
-  yTitle: i = "Rows",
-  variant: h = "default",
-  markerSize: m = 8
+  title: g = "Dot Plot",
+  xTitle: c = "Columns",
+  yTitle: a = "Rows",
+  variant: u = "default",
+  markerSize: f = 8
 }) => {
-  const s = k(null), t = I(), x = r(
+  const r = v(null), t = O(), { bindTooltip: h, tooltipElement: I } = B({ xLabel: c, yLabel: a }), x = e(
     () => Array.isArray(l) ? l : [l],
     [l]
-  ), c = r(
-    () => [
-      e.ORANGE,
-      e.RED,
-      e.GREEN,
-      e.BLUE,
-      e.YELLOW,
-      e.PURPLE
-    ],
-    []
-  ), p = r(
+  ), n = D, m = e(
     () => [
       "circle",
       "square",
@@ -36,18 +27,18 @@ const v = ({
       "star"
     ],
     []
-  ), w = r(() => x.map((o, a) => h === "default" ? {
+  ), C = e(() => x.map((o, i) => u === "default" ? {
     ...o,
-    color: o.color || c[0],
+    color: o.color || n[0],
     symbol: "circle",
-    size: o.size || m
+    size: o.size || f
   } : {
     ...o,
-    color: o.color || c[a % c.length],
-    symbol: o.symbol || p[a % p.length],
-    size: o.size || m
-  }), [x, h, m, c, p]), y = t.gridColor, C = r(
-    () => w.map((o) => ({
+    color: o.color || n[i % n.length],
+    symbol: o.symbol || m[i % m.length],
+    size: o.size || f
+  }), [x, u, f, n, m]), p = t.gridColor, b = e(
+    () => C.map((o) => ({
       type: "scatter",
       x: o.x,
       y: o.y,
@@ -62,10 +53,10 @@ const v = ({
           width: 1
         }
       },
-      hovertemplate: `${n}: %{x}<br>${i}: %{y}<extra>${o.name}</extra>`
+      hoverinfo: "none"
     })),
-    [w, n, i, t]
-  ), g = r(
+    [C, t]
+  ), y = e(
     () => ({
       tickcolor: t.tickColor,
       ticklen: 12,
@@ -83,9 +74,9 @@ const v = ({
       zeroline: !1
     }),
     [t]
-  ), b = r(
+  ), w = e(
     () => ({
-      text: u,
+      text: g,
       x: 0.5,
       y: 0.95,
       xanchor: "center",
@@ -99,17 +90,17 @@ const v = ({
         standoff: 30
       }
     }),
-    [u, t]
+    [g, t]
   );
-  return P(() => {
-    if (!s.current) return;
+  return A(() => {
+    if (!r.current) return;
     const o = {
-      width: f,
+      width: s,
       height: d,
       font: {
         family: "Inter, sans-serif"
       },
-      title: b,
+      title: w,
       margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },
       showlegend: !0,
       legend: {
@@ -128,7 +119,7 @@ const v = ({
       },
       xaxis: {
         title: {
-          text: n,
+          text: c,
           font: {
             size: 16,
             color: t.textSecondary,
@@ -137,12 +128,12 @@ const v = ({
           },
           standoff: 15
         },
-        gridcolor: y,
-        ...g
+        gridcolor: p,
+        ...y
       },
       yaxis: {
         title: {
-          text: i,
+          text: a,
           font: {
             size: 16,
             color: t.textSecondary,
@@ -151,34 +142,37 @@ const v = ({
           },
           standoff: 15
         },
-        gridcolor: y,
-        ...g
+        gridcolor: p,
+        ...y
       },
       paper_bgcolor: t.paperBg,
       plot_bgcolor: t.plotBg
-    }, a = {
+    }, i = {
       responsive: !0,
       displayModeBar: !1,
       displaylogo: !1
     };
-    R.newPlot(s.current, C, o, a);
-    const z = s.current;
+    k.newPlot(r.current, b, o, i), h(r.current);
+    const z = r.current;
     return () => {
-      z && R.purge(z);
+      z && k.purge(z);
     };
-  }, [f, d, n, i, C, b, g, y, t]), /* @__PURE__ */ E("div", { className: "dotplot-container", style: { width: f }, children: /* @__PURE__ */ E(
-    "div",
-    {
-      ref: s,
-      style: {
-        width: "100%",
-        height: "100%",
-        margin: "0"
+  }, [s, d, c, a, b, w, y, p, t, h]), /* @__PURE__ */ P("div", { className: "dotplot-container relative", style: { width: s }, children: [
+    /* @__PURE__ */ R(
+      "div",
+      {
+        ref: r,
+        style: {
+          width: "100%",
+          height: "100%",
+          margin: "0"
+        }
       }
-    }
-  ) });
+    ),
+    I
+  ] });
 };
 export {
-  v as DotPlot
+  H as DotPlot
 };
 //# sourceMappingURL=DotPlot.js.map

package/dist/components/charts/DotPlot/DotPlot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DotPlot.js","sources":["../../../../src/components/charts/DotPlot/DotPlot.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { COLORS } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n \| \"circle\"\n \| \"square\"\n \| \"diamond\"\n \| \"triangle-up\"\n \| \"triangle-down\"\n \| \"star\";\n\ninterface DotPlotDataSeries {\n x: number[];\n y: number[];\n name: string;\n color?: string;\n symbol?: MarkerSymbol;\n size?: number;\n}\n\ntype DotPlotVariant = \"default\" \| \"stacked\";\n\ntype DotPlotProps = {\n dataSeries: DotPlotDataSeries \| DotPlotDataSeries[];\n width?: number;\n height?: number;\n title?: string;\n xTitle?: string;\n yTitle?: string;\n variant?: DotPlotVariant;\n markerSize?: number;\n};\n\nconst DotPlot: React.FC<DotPlotProps> = ({\n dataSeries,\n width = 1000,\n height = 600,\n title = \"Dot Plot\",\n xTitle = \"Columns\",\n yTitle = \"Rows\",\n variant = \"default\",\n markerSize = 8,\n}) => {\n const plotRef = useRef<HTMLDivElement>(null);\n const theme = usePlotlyTheme();\n const seriesArray = useMemo(\n () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n [dataSeries],\n );\n\n const defaultColors = useMemo(\n () => [\n COLORS.ORANGE,\n COLORS.RED,\n COLORS.GREEN,\n COLORS.BLUE,\n COLORS.YELLOW,\n COLORS.PURPLE,\n ],\n [],\n );\n\n const defaultSymbols: MarkerSymbol[] = useMemo(\n () => [\n \"circle\",\n \"square\",\n \"diamond\",\n \"triangle-up\",\n \"triangle-down\",\n \"star\",\n ],\n [],\n );\n\n const seriesWithColors = useMemo(() => {\n return seriesArray.map((series, index) => {\n if (variant === \"default\") {\n // Default variant: all circles, use first color or series color\n return {\n ...series,\n color: series.color \|\| defaultColors[0],\n symbol: \"circle\" as MarkerSymbol,\n size: series.size \|\| markerSize,\n };\n } else {\n // Stacked variant: different symbols and colors for each series\n return {\n ...series,\n color: series.color \|\| defaultColors[index % defaultColors.length],\n symbol:\n series.symbol \|\| defaultSymbols[index % defaultSymbols.length],\n size: series.size \|\| markerSize,\n };\n }\n });\n }, [seriesArray, variant, markerSize, defaultColors, defaultSymbols]);\n\n const gridColor = theme.gridColor;\n\n const plotData = useMemo(\n () =>\n seriesWithColors.map((series) => ({\n type: \"scatter\" as const,\n x: series.x,\n y: series.y,\n mode: \"markers\" as const,\n name: series.name,\n marker: {\n color: series.color,\n size: series.size,\n symbol: series.symbol,\n line: {\n color: theme.paperBg,\n width: 1,\n },\n },\n hovertemplate: `${xTitle}: %{x}<br>${yTitle}: %{y}<extra>${series.name}</extra>`,\n })),\n [seriesWithColors, xTitle, yTitle, theme],\n );\n\n const tickOptions = useMemo(\n () => ({\n tickcolor: theme.tickColor,\n ticklen: 12,\n tickwidth: 1,\n ticks: \"outside\" as const,\n tickfont: {\n size: 16,\n color: theme.textColor,\n family: \"Inter, sans-serif\",\n weight: 400,\n },\n linecolor: theme.lineColor,\n linewidth: 1,\n position: 0,\n zeroline: false,\n }),\n [theme],\n );\n\n const titleOptions = useMemo(\n () => ({\n text: title,\n x: 0.5,\n y: 0.95,\n xanchor: \"center\" as const,\n yanchor: \"top\" as const,\n font: {\n size: 32,\n weight: 600,\n family: \"Inter, sans-serif\",\n color: theme.textColor,\n lineheight: 1.2,\n standoff: 30,\n },\n }),\n [title, theme],\n );\n\n useEffect(() => {\n if (!plotRef.current) return;\n\n const layout = {\n width,\n height,\n font: {\n family: \"Inter, sans-serif\",\n },\n title: titleOptions,\n margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },\n showlegend: true,\n legend: {\n x: 0.5,\n y: -0.2,\n xanchor: \"center\" as const,\n yanchor: \"top\" as const,\n orientation: \"h\" as const,\n font: {\n size: 13,\n color: theme.legendColor,\n family: \"Inter, sans-serif\",\n weight: 500,\n lineheight: 18,\n },\n },\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: 15,\n },\n gridcolor: gridColor,\n ...tickOptions,\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: 15,\n },\n gridcolor: gridColor,\n ...tickOptions,\n },\n paper_bgcolor: theme.paperBg,\n plot_bgcolor: theme.plotBg,\n };\n\n const config = {\n responsive: true,\n displayModeBar: false,\n displaylogo: false,\n };\n\n Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n // Capture ref value for cleanup\n const plotElement = plotRef.current;\n\n return () => {\n if (plotElement) {\n Plotly.purge(plotElement);\n }\n };\n }, [width, height, xTitle, yTitle, plotData, titleOptions, tickOptions, gridColor, theme]);\n\n return (\n <div className=\"dotplot-container\" style={{ width: width }}>\n <div\n ref={plotRef}\n style={{\n width: \"100%\",\n height: \"100%\",\n margin: \"0\",\n }}\n />\n </div>\n );\n};\n\nexport { DotPlot };\nexport type { DotPlotDataSeries, DotPlotProps, DotPlotVariant, MarkerSymbol };\n"],"names":["DotPlot","dataSeries","width","height","title","xTitle","yTitle","variant","markerSize","plotRef","useRef","theme","usePlotlyTheme","seriesArray","useMemo","defaultColors","COLORS","defaultSymbols","seriesWithColors","series","index","gridColor","plotData","tickOptions","titleOptions","useEffect","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"DotPlot.js","sources":["../../../../src/components/charts/DotPlot/DotPlot.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n \| \"circle\"\n \| \"square\"\n \| \"diamond\"\n \| \"triangle-up\"\n \| \"triangle-down\"\n \| \"star\";\n\ninterface DotPlotDataSeries {\n x: number[];\n y: number[];\n name: string;\n color?: string;\n symbol?: MarkerSymbol;\n size?: number;\n}\n\ntype DotPlotVariant = \"default\" \| \"stacked\";\n\ntype DotPlotProps = {\n dataSeries: DotPlotDataSeries \| DotPlotDataSeries[];\n width?: number;\n height?: number;\n title?: string;\n xTitle?: string;\n yTitle?: string;\n variant?: DotPlotVariant;\n markerSize?: number;\n};\n\nconst DotPlot: React.FC<DotPlotProps> = ({\n dataSeries,\n width = 1000,\n height = 600,\n title = \"Dot Plot\",\n xTitle = \"Columns\",\n yTitle = \"Rows\",\n variant = \"default\",\n markerSize = 8,\n}) => {\n const plotRef = useRef<HTMLDivElement>(null);\n const theme = usePlotlyTheme();\n const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n const seriesArray = useMemo(\n () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n [dataSeries],\n );\n\n const defaultColors = CHART_COLORS;\n\n const defaultSymbols: MarkerSymbol[] = useMemo(\n () => [\n \"circle\",\n \"square\",\n \"diamond\",\n \"triangle-up\",\n \"triangle-down\",\n \"star\",\n ],\n [],\n );\n\n const seriesWithColors = useMemo(() => {\n return seriesArray.map((series, index) => {\n if (variant === \"default\") {\n // Default variant: all circles, use first color or series color\n return {\n ...series,\n color: series.color \|\| defaultColors[0],\n symbol: \"circle\" as MarkerSymbol,\n size: series.size \|\| markerSize,\n };\n } else {\n // Stacked variant: different symbols and colors for each series\n return {\n ...series,\n color: series.color \|\| defaultColors[index % defaultColors.length],\n symbol:\n series.symbol \|\| defaultSymbols[index % defaultSymbols.length],\n size: series.size \|\| markerSize,\n };\n }\n });\n }, [seriesArray, variant, markerSize, defaultColors, defaultSymbols]);\n\n const gridColor = theme.gridColor;\n\n const plotData = useMemo(\n () =>\n seriesWithColors.map((series) => ({\n type: \"scatter\" as const,\n x: series.x,\n y: series.y,\n mode: \"markers\" as const,\n name: series.name,\n marker: {\n color: series.color,\n size: series.size,\n symbol: series.symbol,\n line: {\n color: theme.paperBg,\n width: 1,\n },\n },\n hoverinfo: \"none\" as const,\n })),\n [seriesWithColors, theme],\n );\n\n const tickOptions = useMemo(\n () => ({\n tickcolor: theme.tickColor,\n ticklen: 12,\n tickwidth: 1,\n ticks: \"outside\" as const,\n tickfont: {\n size: 16,\n color: theme.textColor,\n family: \"Inter, sans-serif\",\n weight: 400,\n },\n linecolor: theme.lineColor,\n linewidth: 1,\n position: 0,\n zeroline: false,\n }),\n [theme],\n );\n\n const titleOptions = useMemo(\n () => ({\n text: title,\n x: 0.5,\n y: 0.95,\n xanchor: \"center\" as const,\n yanchor: \"top\" as const,\n font: {\n size: 32,\n weight: 600,\n family: \"Inter, sans-serif\",\n color: theme.textColor,\n lineheight: 1.2,\n standoff: 30,\n },\n }),\n [title, theme],\n );\n\n useEffect(() => {\n if (!plotRef.current) return;\n\n const layout = {\n width,\n height,\n font: {\n family: \"Inter, sans-serif\",\n },\n title: titleOptions,\n margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },\n showlegend: true,\n legend: {\n x: 0.5,\n y: -0.2,\n xanchor: \"center\" as const,\n yanchor: \"top\" as const,\n orientation: \"h\" as const,\n font: {\n size: 13,\n color: theme.legendColor,\n family: \"Inter, sans-serif\",\n weight: 500,\n lineheight: 18,\n },\n },\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: 15,\n },\n gridcolor: gridColor,\n ...tickOptions,\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: 15,\n },\n gridcolor: gridColor,\n ...tickOptions,\n },\n paper_bgcolor: theme.paperBg,\n plot_bgcolor: theme.plotBg,\n };\n\n const config = {\n responsive: true,\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\n return () => {\n if (plotElement) {\n Plotly.purge(plotElement);\n }\n };\n }, [width, height, xTitle, yTitle, plotData, titleOptions, tickOptions, gridColor, theme, bindTooltip]);\n\n return (\n <div className=\"dotplot-container relative\" style={{ width: width }}>\n <div\n ref={plotRef}\n style={{\n width: \"100%\",\n height: \"100%\",\n margin: \"0\",\n }}\n />\n {tooltipElement}\n </div>\n );\n};\n\nexport { DotPlot };\nexport type { DotPlotDataSeries, DotPlotProps, DotPlotVariant, MarkerSymbol };\n"],"names":["DotPlot","dataSeries","width","height","title","xTitle","yTitle","variant","markerSize","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","seriesArray","useMemo","defaultColors","CHART_COLORS","defaultSymbols","seriesWithColors","series","index","gridColor","plotData","tickOptions","titleOptions","useEffect","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}

package/dist/components/charts/Histogram/Histogram.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),k=require("plotly.js-dist"),d=require("react"),S=require("../../../hooks/use-plotly-theme.cjs"),p=require("../../../utils/colors.cjs");;/* empty css                 */const z=-.5,B=n=>n.reduce((e,u)=>e+u,0)/n.length,I=(n,a)=>{const u=n.map(r=>Math.pow(r-a,2)).reduce((r,l)=>r+l,0)/n.length;return Math.sqrt(u)},A=(n,a,e,u,r=100)=>{const l=[],x=[],f=(u-e)/(r-1);for(let s=0;s<r;s++){const o=e+s*f;l.push(o);const g=z*Math.pow((o-n)/a,2),C=1/(a*Math.sqrt(2*Math.PI))*Math.exp(g);x.push(C)}return{x:l,y:x}},F=(n,a,e)=>{const u=Math.ceil((e.end-e.start)/e.size),r=Array(u).fill(0);a.forEach(s=>{if(s>=e.start&&s<=e.end){const o=Math.floor((s-e.start)/e.size);r[o]++}});const l=Math.max(...r),x=Math.max(...n),f=l/x;return n.map(s=>s*f)},W=({dataSeries:n,width:a=480,height:e=480,title:u="Histogram",xTitle:r="X Axis",yTitle:l="Frequency",bargap:x=.2,showDistributionLine:f=!1})=>{const s=d.useRef(null),o=S.usePlotlyTheme(),g=d.useMemo(()=>Array.isArray(n)?n:[n],[n]),C=d.useMemo(()=>g.length>1?"stack":void 0,[g.length]),O=d.useMemo(()=>[p.COLORS.ORANGE,p.COLORS.RED,p.COLORS.BLUE,p.COLORS.GREEN,p.COLORS.PURPLE,p.COLORS.YELLOW],[]),y=d.useMemo(()=>g.map((t,h)=>{const m=typeof t.showDistributionLine>"u"?f:t.showDistributionLine;return{...t,color:t.color||O[h%O.length],opacity:m?.5:t.opacity||1,showDistributionLine:m,lineWidth:t.lineWidth||3}}),[g,f,O]),v=o.gridColor,w=d.useMemo(()=>y.map(t=>({type:"histogram",x:t.x,name:t.name,marker:{color:t.color,line:{color:o.paperBg,width:1},opacity:t.opacity},autobinx:t.autobinx,xbins:t.xbins,hovertemplate:`${r}: %{x}<br>${l}: %{y}<extra>${t.name}</extra>`})),[y,r,l,o]),L=d.useMemo(()=>y.filter(t=>t.showDistributionLine).map(t=>{const h=B(t.x),m=I(t.x,h),M=Math.min(...t.x),c=Math.max(...t.x),b=c-M,R=M-b*.1,j=c+b*.1,E=t.xbins||{start:R,end:j,size:b/10},D=A(h,m,R,j,100),P=F(D.y,t.x,E);return{type:"scatter",x:D.x,y:P,mode:"lines",name:`${t.name} Distribution`,line:{color:t.color,width:t.lineWidth},hoverinfo:"none"}}),[y]),N=d.useMemo(()=>[...w,...L],[w,L]);d.useEffect(()=>{if(!s.current)return;const t={width:a,height:e,font:{family:"Inter, sans-serif"},showlegend:!1,margin:{l:90,r:40,b:80,t:40},xaxis:{title:{text:r,font:{size:16,color:o.textSecondary,family:"Inter, sans-serif",weight:400},standoff:20},gridcolor:v,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1},yaxis:{title:{text:l,font:{size:16,color:o.textSecondary,family:"Inter, sans-serif",weight:400},standoff:20},gridcolor:v,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,rangemode:"tozero"},barmode:C,bargap:x,paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg},h={responsive:!0,displayModeBar:!1,displaylogo:!1};k.newPlot(s.current,N,t,h);const m=s.current;return()=>{m&&k.purge(m)}},[a,e,r,l,x,N,C,v,o]);const q=({series:t})=>{const h=t.map((c,b)=>i.jsx(d.Fragment,{children:i.jsxs("div",{className:"legend-item",children:[i.jsx("span",{className:"color-box",style:{background:c.color}}),c.name,b<t.length-1&&i.jsx("span",{className:"divider"})]})},c.name)),m=[],M=6;for(let c=0;c<h.length;c+=M)m.push(i.jsx("div",{className:"legend-row",children:h.slice(c,c+M)},c));return i.jsx("div",{className:"legend-container",children:m})};return i.jsx("div",{className:"histogram-container",style:{width:a},children:i.jsxs("div",{className:"chart-container",children:[u&&i.jsx("div",{className:"title-container",children:i.jsx("h2",{className:"title",children:u})}),i.jsx("div",{ref:s,style:{width:"100%",height:"100%",margin:"0"}}),i.jsx(q,{series:y})]})})};exports.Histogram=W;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),P=require("plotly.js-dist"),h=require("react"),B=require("../ChartTooltip/ChartTooltip.cjs"),E=require("../../../hooks/use-plotly-theme.cjs"),F=require("../../../utils/colors.cjs");;/* empty css                 */const O=-.5,T=n=>n.reduce((e,a)=>e+a,0)/n.length,_=(n,l)=>{const a=n.map(s=>Math.pow(s-l,2)).reduce((s,u)=>s+u,0)/n.length;return Math.sqrt(a)},S=(n,l,e,a,s=100)=>{const u=[],x=[],f=(a-e)/(s-1);for(let r=0;r<s;r++){const o=e+r*f;u.push(o);const M=O*Math.pow((o-n)/l,2),v=1/(l*Math.sqrt(2*Math.PI))*Math.exp(M);x.push(v)}return{x:u,y:x}},H=(n,l,e)=>{const a=Math.ceil((e.end-e.start)/e.size),s=Array(a).fill(0);l.forEach(r=>{if(r>=e.start&&r<=e.end){const o=Math.floor((r-e.start)/e.size);s[o]++}});const u=Math.max(...s),x=Math.max(...n),f=u/x;return n.map(r=>r*f)},W=({dataSeries:n,width:l=480,height:e=480,title:a="Histogram",xTitle:s="X Axis",yTitle:u="Frequency",bargap:x=.2,showDistributionLine:f=!1})=>{const r=h.useRef(null),o=E.usePlotlyTheme(),{bindTooltip:M,tooltipElement:v}=B.useChartTooltip({xLabel:s,yLabel:u}),b=h.useMemo(()=>Array.isArray(n)?n:[n],[n]),j=h.useMemo(()=>b.length>1?"stack":void 0,[b.length]),w=F.CHART_COLORS,p=h.useMemo(()=>b.map((t,d)=>{const m=typeof t.showDistributionLine>"u"?f:t.showDistributionLine;return{...t,color:t.color||w[d%w.length],opacity:m?.5:t.opacity||1,showDistributionLine:m,lineWidth:t.lineWidth||3}}),[b,f,w]),C=o.gridColor,q=h.useMemo(()=>p.map(t=>({type:"histogram",x:t.x,name:t.name,marker:{color:t.color,line:{color:o.paperBg,width:1},opacity:t.opacity},autobinx:t.autobinx,xbins:t.xbins,hoverinfo:"none"})),[p,o]),N=h.useMemo(()=>p.filter(t=>t.showDistributionLine).map(t=>{const d=T(t.x),m=_(t.x,d),g=Math.min(...t.x),c=Math.max(...t.x),y=c-g,D=g-y*.1,L=c+y*.1,R=t.xbins||{start:D,end:L,size:y/10},z=S(d,m,D,L,100),A=H(z.y,t.x,R);return{type:"scatter",x:z.x,y:A,mode:"lines",name:`${t.name} Distribution`,line:{color:t.color,width:t.lineWidth},hoverinfo:"none"}}),[p]),k=h.useMemo(()=>[...q,...N],[q,N]);h.useEffect(()=>{if(!r.current)return;const t={width:l,height:e,font:{family:"Inter, sans-serif"},showlegend:!1,margin:{l:90,r:40,b:80,t:40},xaxis:{title:{text:s,font:{size:16,color:o.textSecondary,family:"Inter, sans-serif",weight:400},standoff:20},gridcolor:C,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1},yaxis:{title:{text:u,font:{size:16,color:o.textSecondary,family:"Inter, sans-serif",weight:400},standoff:20},gridcolor:C,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,rangemode:"tozero"},barmode:j,bargap:x,paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg},d={responsive:!0,displayModeBar:!1,displaylogo:!1};P.newPlot(r.current,k,t,d),M(r.current);const m=r.current;return()=>{m&&P.purge(m)}},[l,e,s,u,x,k,j,C,o,M]);const I=({series:t})=>{const d=t.map((c,y)=>i.jsx(h.Fragment,{children:i.jsxs("div",{className:"legend-item",children:[i.jsx("span",{className:"color-box",style:{background:c.color}}),c.name,y<t.length-1&&i.jsx("span",{className:"divider"})]})},c.name)),m=[],g=6;for(let c=0;c<d.length;c+=g)m.push(i.jsx("div",{className:"legend-row",children:d.slice(c,c+g)},c));return i.jsx("div",{className:"legend-container",children:m})};return i.jsxs("div",{className:"histogram-container relative",style:{width:l},children:[i.jsxs("div",{className:"chart-container",children:[a&&i.jsx("div",{className:"title-container",children:i.jsx("h2",{className:"title",children:a})}),i.jsx("div",{ref:r,style:{width:"100%",height:"100%",margin:"0"}}),i.jsx(I,{series:p})]}),v]})};exports.Histogram=W;
 //# sourceMappingURL=Histogram.cjs.map

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

	@@ -1 +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 { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { 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 width?: number;\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 = 480,\n height = 480,\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 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 = useMemo(\n () => [\n COLORS.ORANGE,\n COLORS.RED,\n COLORS.BLUE,\n COLORS.GREEN,\n COLORS.PURPLE,\n COLORS.YELLOW,\n ],\n [],\n );\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 hovertemplate: `${xTitle}: %{x}<br>${yTitle}: %{y}<extra>${series.name}</extra>`,\n })),\n [seriesWithColors, xTitle, yTitle, 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) return;\n\n const layout = {\n width,\n 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 },\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 },\n barmode: effectiveBarMode,\n bargap: bargap,\n paper_bgcolor: theme.paperBg,\n plot_bgcolor: theme.plotBg,\n };\n\n const config = {\n responsive: true,\n displayModeBar: false,\n displaylogo: false,\n };\n\n Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n // Capture ref value for cleanup\n const plotElement = plotRef.current;\n\n return () => {\n if (plotElement) {\n Plotly.purge(plotElement);\n }\n };\n }, [width, height, xTitle, yTitle, bargap, plotData, effectiveBarMode, gridColor, theme]);\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 className=\"histogram-container\" style={{ width: width }}>\n <div className=\"chart-container\">\n {title && (\n <div className=\"title-container\">\n <h2 className=\"title\">{title}</h2>\n </div>\n )}\n <div\n ref={plotRef}\n style={{\n width: \"100%\",\n height: \"100%\",\n margin: \"0\",\n }}\n />\n <ChartLegend series={seriesWithColors} />\n </div>\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","seriesArray","useMemo","effectiveBarMode","defaultColors","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"],"mappings":"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"}
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 { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\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 width?: number;\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 = 480,\n height = 480,\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 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) return;\n\n const layout = {\n width,\n 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 },\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 },\n barmode: effectiveBarMode,\n bargap: bargap,\n paper_bgcolor: theme.paperBg,\n plot_bgcolor: theme.plotBg,\n };\n\n const config = {\n responsive: true,\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\n return () => {\n if (plotElement) {\n Plotly.purge(plotElement);\n }\n };\n }, [width, height, xTitle, yTitle, bargap, plotData, effectiveBarMode, gridColor, theme, bindTooltip]);\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 className=\"histogram-container relative\" style={{ width: width }}>\n <div className=\"chart-container\">\n {title && (\n <div className=\"title-container\">\n <h2 className=\"title\">{title}</h2>\n </div>\n )}\n <div\n ref={plotRef}\n style={{\n width: \"100%\",\n height: \"100%\",\n margin: \"0\",\n }}\n />\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","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"],"mappings":"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"}