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

@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.82.1 → 0.6.0-beta.83.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 (70) hide show

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

@@ -1,32 +1,22 @@
-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 = ({
-  dataSeries: l,
-  width: f = 1e3,
-  height: d = 600,
-  title: u = "Dot Plot",
-  xTitle: n = "Columns",
-  yTitle: i = "Rows",
-  variant: h = "default",
-  markerSize: m = 8
+import { jsx as z } from "react/jsx-runtime";
+import k from "plotly.js-dist";
+import { useRef as I, useMemo as r, useEffect as P } from "react";
+import { usePlotlyTheme as R } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as A } from "../../../utils/colors.js";
+const $ = ({
+  dataSeries: e,
+  width: a = 1e3,
+  height: g = 600,
+  title: d = "Dot Plot",
+  xTitle: l = "Columns",
+  yTitle: n = "Rows",
+  variant: u = "default",
+  markerSize: f = 8
 }) => {
-  const s = k(null), t = I(), x = r(
-    () => Array.isArray(l) ? l : [l],
-    [l]
-  ), c = r(
-    () => [
-      e.ORANGE,
-      e.RED,
-      e.GREEN,
-      e.BLUE,
-      e.YELLOW,
-      e.PURPLE
-    ],
-    []
-  ), p = r(
+  const i = I(null), t = R(), h = r(
+    () => Array.isArray(e) ? e : [e],
+    [e]
+  ), s = A, m = r(
     () => [
       "circle",
       "square",
@@ -36,18 +26,18 @@ const v = ({
       "star"
     ],
     []
-  ), w = r(() => x.map((o, a) => h === "default" ? {
+  ), x = r(() => h.map((o, c) => u === "default" ? {
     ...o,
-    color: o.color || c[0],
+    color: o.color || s[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 || s[c % s.length],
+    symbol: o.symbol || m[c % m.length],
+    size: o.size || f
+  }), [h, u, f, s, m]), p = t.gridColor, C = r(
+    () => x.map((o) => ({
       type: "scatter",
       x: o.x,
       y: o.y,
@@ -62,10 +52,10 @@ const v = ({
           width: 1
         }
       },
-      hovertemplate: `${n}: %{x}<br>${i}: %{y}<extra>${o.name}</extra>`
+      hovertemplate: `${l}: %{x}<br>${n}: %{y}<extra>${o.name}</extra>`
     })),
-    [w, n, i, t]
-  ), g = r(
+    [x, l, n, t]
+  ), y = r(
     () => ({
       tickcolor: t.tickColor,
       ticklen: 12,
@@ -83,9 +73,9 @@ const v = ({
       zeroline: !1
     }),
     [t]
-  ), b = r(
+  ), w = r(
     () => ({
-      text: u,
+      text: d,
       x: 0.5,
       y: 0.95,
       xanchor: "center",
@@ -99,17 +89,17 @@ const v = ({
         standoff: 30
       }
     }),
-    [u, t]
+    [d, t]
   );
   return P(() => {
-    if (!s.current) return;
+    if (!i.current) return;
     const o = {
-      width: f,
-      height: d,
+      width: a,
+      height: g,
       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 +118,7 @@ const v = ({
       },
       xaxis: {
         title: {
-          text: n,
+          text: l,
           font: {
             size: 16,
             color: t.textSecondary,
@@ -137,12 +127,12 @@ const v = ({
           },
           standoff: 15
         },
-        gridcolor: y,
-        ...g
+        gridcolor: p,
+        ...y
       },
       yaxis: {
         title: {
-          text: i,
+          text: n,
           font: {
             size: 16,
             color: t.textSecondary,
@@ -151,25 +141,25 @@ const v = ({
           },
           standoff: 15
         },
-        gridcolor: y,
-        ...g
+        gridcolor: p,
+        ...y
       },
       paper_bgcolor: t.paperBg,
       plot_bgcolor: t.plotBg
-    }, a = {
+    }, c = {
       responsive: !0,
       displayModeBar: !1,
       displaylogo: !1
     };
-    R.newPlot(s.current, C, o, a);
-    const z = s.current;
+    k.newPlot(i.current, C, o, c);
+    const b = i.current;
     return () => {
-      z && R.purge(z);
+      b && k.purge(b);
     };
-  }, [f, d, n, i, C, b, g, y, t]), /* @__PURE__ */ E("div", { className: "dotplot-container", style: { width: f }, children: /* @__PURE__ */ E(
+  }, [a, g, l, n, C, w, y, p, t]), /* @__PURE__ */ z("div", { className: "dotplot-container", style: { width: a }, children: /* @__PURE__ */ z(
     "div",
     {
-      ref: s,
+      ref: i,
       style: {
         width: "100%",
         height: "100%",
@@ -179,6 +169,6 @@ const v = ({
   ) });
 };
 export {
-  v as DotPlot
+  $ 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 { 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 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 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","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"),z=require("plotly.js-dist"),h=require("react"),R=require("../../../hooks/use-plotly-theme.cjs"),A=require("../../../utils/colors.cjs");;/* empty css                 */const B=-.5,F=n=>n.reduce((e,u)=>e+u,0)/n.length,O=(n,a)=>{const u=n.map(r=>Math.pow(r-a,2)).reduce((r,l)=>r+l,0)/n.length;return Math.sqrt(u)},E=(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=B*Math.pow((o-n)/a,2),b=1/(a*Math.sqrt(2*Math.PI))*Math.exp(g);x.push(b)}return{x:l,y:x}},_=(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)},S=({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=h.useRef(null),o=R.usePlotlyTheme(),g=h.useMemo(()=>Array.isArray(n)?n:[n],[n]),b=h.useMemo(()=>g.length>1?"stack":void 0,[g.length]),v=A.CHART_COLORS,p=h.useMemo(()=>g.map((t,d)=>{const m=typeof t.showDistributionLine>"u"?f:t.showDistributionLine;return{...t,color:t.color||v[d%v.length],opacity:m?.5:t.opacity||1,showDistributionLine:m,lineWidth:t.lineWidth||3}}),[g,f,v]),w=o.gridColor,C=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,hovertemplate:`${r}: %{x}<br>${l}: %{y}<extra>${t.name}</extra>`})),[p,r,l,o]),j=h.useMemo(()=>p.filter(t=>t.showDistributionLine).map(t=>{const d=F(t.x),m=O(t.x,d),y=Math.min(...t.x),c=Math.max(...t.x),M=c-y,k=y-M*.1,q=c+M*.1,I=t.xbins||{start:k,end:q,size:M/10},D=E(d,m,k,q,100),L=_(D.y,t.x,I);return{type:"scatter",x:D.x,y:L,mode:"lines",name:`${t.name} Distribution`,line:{color:t.color,width:t.lineWidth},hoverinfo:"none"}}),[p]),N=h.useMemo(()=>[...C,...j],[C,j]);h.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:w,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:w,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,rangemode:"tozero"},barmode:b,bargap:x,paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg},d={responsive:!0,displayModeBar:!1,displaylogo:!1};z.newPlot(s.current,N,t,d);const m=s.current;return()=>{m&&z.purge(m)}},[a,e,r,l,x,N,b,w,o]);const P=({series:t})=>{const d=t.map((c,M)=>i.jsx(h.Fragment,{children:i.jsxs("div",{className:"legend-item",children:[i.jsx("span",{className:"color-box",style:{background:c.color}}),c.name,M<t.length-1&&i.jsx("span",{className:"divider"})]})},c.name)),m=[],y=6;for(let c=0;c<d.length;c+=y)m.push(i.jsx("div",{className:"legend-row",children:d.slice(c,c+y)},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(P,{series:p})]})})};exports.Histogram=S;
 //# 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 { 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 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 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","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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"}

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

@@ -1,22 +1,22 @@
-import { jsx as d, jsxs as z } from "react/jsx-runtime";
-import P from "plotly.js-dist";
-import O, { useRef as q, useMemo as f, useEffect as A } from "react";
-import { usePlotlyTheme as F } from "../../../hooks/use-plotly-theme.js";
-import { COLORS as x } from "../../../utils/colors.js";
+import { jsx as d, jsxs as I } from "react/jsx-runtime";
+import _ from "plotly.js-dist";
+import B, { useRef as F, useMemo as g, useEffect as P } from "react";
+import { usePlotlyTheme as R } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as E } from "../../../utils/colors.js";
 /* empty css               */
-const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) => {
+const O = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) => {
   const l = e.map((r) => Math.pow(r - i, 2)).reduce((r, s) => r + s, 0) / e.length;
   return Math.sqrt(l);
-}, S = (e, i, n, l, r = 100) => {
-  const s = [], u = [], p = (l - n) / (r - 1);
+}, H = (e, i, n, l, r = 100) => {
+  const s = [], u = [], f = (l - n) / (r - 1);
   for (let c = 0; c < r; c++) {
-    const o = n + c * p;
+    const o = n + c * f;
     s.push(o);
-    const g = _ * Math.pow((o - e) / i, 2), M = 1 / (i * Math.sqrt(2 * Math.PI)) * Math.exp(g);
-    u.push(M);
+    const p = O * Math.pow((o - e) / i, 2), w = 1 / (i * Math.sqrt(2 * Math.PI)) * Math.exp(p);
+    u.push(w);
   }
   return { x: s, y: u };
-}, U = (e, i, n) => {
+}, S = (e, i, n) => {
   const l = Math.ceil((n.end - n.start) / n.size), r = Array(l).fill(0);
   i.forEach((c) => {
     if (c >= n.start && c <= n.end) {
@@ -24,8 +24,8 @@ const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
       r[o]++;
     }
   });
-  const s = Math.max(...r), u = Math.max(...e), p = s / u;
-  return e.map((c) => c * p);
+  const s = Math.max(...r), u = Math.max(...e), f = s / u;
+  return e.map((c) => c * f);
 }, K = ({
   dataSeries: e,
   width: i = 480,
@@ -34,32 +34,22 @@ const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
   xTitle: r = "X Axis",
   yTitle: s = "Frequency",
   bargap: u = 0.2,
-  showDistributionLine: p = !1
+  showDistributionLine: f = !1
 }) => {
-  const c = q(null), o = F(), g = f(
+  const c = F(null), o = R(), p = g(
     () => Array.isArray(e) ? e : [e],
     [e]
-  ), M = f(() => g.length > 1 ? "stack" : void 0, [g.length]), v = f(
-    () => [
-      x.ORANGE,
-      x.RED,
-      x.BLUE,
-      x.GREEN,
-      x.PURPLE,
-      x.YELLOW
-    ],
-    []
-  ), y = f(() => g.map((t, h) => {
-    const m = typeof t.showDistributionLine > "u" ? p : t.showDistributionLine;
+  ), w = g(() => p.length > 1 ? "stack" : void 0, [p.length]), M = E, x = g(() => p.map((t, h) => {
+    const m = typeof t.showDistributionLine > "u" ? f : t.showDistributionLine;
     return {
       ...t,
-      color: t.color || v[h % v.length],
+      color: t.color || M[h % M.length],
       opacity: m ? 0.5 : t.opacity || 1,
       showDistributionLine: m,
       lineWidth: t.lineWidth || 3
     };
-  }), [g, p, v]), N = o.gridColor, C = f(
-    () => y.map((t) => ({
+  }), [p, f, M]), v = o.gridColor, C = g(
+    () => x.map((t) => ({
       type: "histogram",
       x: t.x,
       name: t.name,
@@ -75,28 +65,28 @@ const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
       xbins: t.xbins,
       hovertemplate: `${r}: %{x}<br>${s}: %{y}<extra>${t.name}</extra>`
     })),
-    [y, r, s, o]
-  ), D = f(
-    () => y.filter((t) => t.showDistributionLine).map((t) => {
-      const h = W(t.x), m = $(t.x, h), b = Math.min(...t.x), a = Math.max(...t.x), w = a - b, E = b - w * 0.1, L = a + w * 0.1, B = t.xbins || {
-        start: E,
-        end: L,
-        size: w / 10
-      }, R = S(
+    [x, r, s, o]
+  ), N = g(
+    () => x.filter((t) => t.showDistributionLine).map((t) => {
+      const h = W(t.x), m = $(t.x, h), y = Math.min(...t.x), a = Math.max(...t.x), b = a - y, D = y - b * 0.1, z = a + b * 0.1, q = t.xbins || {
+        start: D,
+        end: z,
+        size: b / 10
+      }, L = H(
         h,
         m,
-        E,
-        L,
+        D,
+        z,
         100
-      ), I = U(
-        R.y,
+      ), A = S(
+        L.y,
         t.x,
-        B
+        q
       );
       return {
         type: "scatter",
-        x: R.x,
-        y: I,
+        x: L.x,
+        y: A,
         mode: "lines",
         name: `${t.name} Distribution`,
         line: {
@@ -106,12 +96,12 @@ const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
         hoverinfo: "none"
       };
     }),
-    [y]
-  ), k = f(
-    () => [...C, ...D],
-    [C, D]
+    [x]
+  ), k = g(
+    () => [...C, ...N],
+    [C, N]
   );
-  return A(() => {
+  return P(() => {
     if (!c.current) return;
     const t = {
       width: i,
@@ -132,7 +122,7 @@ const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
           },
           standoff: 20
         },
-        gridcolor: N,
+        gridcolor: v,
         tickcolor: o.tickColor,
         ticklen: 8,
         tickwidth: 1,
@@ -152,7 +142,7 @@ const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
           },
           standoff: 20
         },
-        gridcolor: N,
+        gridcolor: v,
         tickcolor: o.tickColor,
         ticklen: 8,
         tickwidth: 1,
@@ -162,7 +152,7 @@ const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
         zeroline: !1,
         rangemode: "tozero"
       },
-      barmode: M,
+      barmode: w,
       bargap: u,
       paper_bgcolor: o.paperBg,
       plot_bgcolor: o.plotBg
@@ -171,12 +161,12 @@ const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
       displayModeBar: !1,
       displaylogo: !1
     };
-    P.newPlot(c.current, k, t, h);
+    _.newPlot(c.current, k, t, h);
     const m = c.current;
     return () => {
-      m && P.purge(m);
+      m && _.purge(m);
     };
-  }, [i, n, r, s, u, k, M, N, o]), /* @__PURE__ */ d("div", { className: "histogram-container", style: { width: i }, children: /* @__PURE__ */ z("div", { className: "chart-container", children: [
+  }, [i, n, r, s, u, k, w, v, o]), /* @__PURE__ */ d("div", { className: "histogram-container", style: { width: i }, children: /* @__PURE__ */ I("div", { className: "chart-container", children: [
     l && /* @__PURE__ */ d("div", { className: "title-container", children: /* @__PURE__ */ d("h2", { className: "title", children: l }) }),
     /* @__PURE__ */ d(
       "div",
@@ -190,17 +180,17 @@ const _ = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
       }
     ),
     /* @__PURE__ */ d(({ series: t }) => {
-      const h = t.map((a, w) => /* @__PURE__ */ d(O.Fragment, { children: /* @__PURE__ */ z("div", { className: "legend-item", children: [
+      const h = t.map((a, b) => /* @__PURE__ */ d(B.Fragment, { children: /* @__PURE__ */ I("div", { className: "legend-item", children: [
         /* @__PURE__ */ d("span", { className: "color-box", style: { background: a.color } }),
         a.name,
-        w < t.length - 1 && /* @__PURE__ */ d("span", { className: "divider" })
-      ] }) }, a.name)), m = [], b = 6;
-      for (let a = 0; a < h.length; a += b)
+        b < t.length - 1 && /* @__PURE__ */ d("span", { className: "divider" })
+      ] }) }, a.name)), m = [], y = 6;
+      for (let a = 0; a < h.length; a += y)
         m.push(
-          /* @__PURE__ */ d("div", { className: "legend-row", children: h.slice(a, a + b) }, a)
+          /* @__PURE__ */ d("div", { className: "legend-row", children: h.slice(a, a + y) }, a)
         );
       return /* @__PURE__ */ d("div", { className: "legend-container", children: m });
-    }, { series: y })
+    }, { series: x })
   ] }) });
 };
 export {