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

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

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

@@ -1,55 +1,56 @@
-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";
+import { jsxs as N, jsx as h } from "react/jsx-runtime";
+import A from "plotly.js-dist";
+import F, { useRef as P, useMemo as p, useEffect as R } from "react";
+import { useChartTooltip as O } from "../ChartTooltip/ChartTooltip.js";
+import { usePlotlyTheme as W } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as H } from "../../../utils/colors.js";
 /* empty css               */
-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);
-}, 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 * f;
-    s.push(o);
-    const p = O * Math.pow((o - e) / i, 2), w = 1 / (i * Math.sqrt(2 * Math.PI)) * Math.exp(p);
+const S = -0.5, T = (e) => e.reduce((n, s) => n + s, 0) / e.length, V = (e, a) => {
+  const s = e.map((i) => Math.pow(i - a, 2)).reduce((i, l) => i + l, 0) / e.length;
+  return Math.sqrt(s);
+}, j = (e, a, n, s, i = 100) => {
+  const l = [], u = [], f = (s - n) / (i - 1);
+  for (let r = 0; r < i; r++) {
+    const o = n + r * f;
+    l.push(o);
+    const b = S * Math.pow((o - e) / a, 2), w = 1 / (a * Math.sqrt(2 * Math.PI)) * Math.exp(b);
     u.push(w);
   }
-  return { x: s, y: u };
-}, 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) {
-      const o = Math.floor((c - n.start) / n.size);
-      r[o]++;
+  return { x: l, y: u };
+}, X = (e, a, n) => {
+  const s = Math.ceil((n.end - n.start) / n.size), i = Array(s).fill(0);
+  a.forEach((r) => {
+    if (r >= n.start && r <= n.end) {
+      const o = Math.floor((r - n.start) / n.size);
+      i[o]++;
     }
   });
-  const s = Math.max(...r), u = Math.max(...e), f = s / u;
-  return e.map((c) => c * f);
-}, K = ({
+  const l = Math.max(...i), u = Math.max(...e), f = l / u;
+  return e.map((r) => r * f);
+}, tt = ({
   dataSeries: e,
-  width: i = 480,
+  width: a = 480,
   height: n = 480,
-  title: l = "Histogram",
-  xTitle: r = "X Axis",
-  yTitle: s = "Frequency",
+  title: s = "Histogram",
+  xTitle: i = "X Axis",
+  yTitle: l = "Frequency",
   bargap: u = 0.2,
   showDistributionLine: f = !1
 }) => {
-  const c = F(null), o = R(), p = g(
+  const r = P(null), o = W(), { bindTooltip: b, tooltipElement: w } = O({ xLabel: i, yLabel: l }), v = p(
     () => Array.isArray(e) ? e : [e],
     [e]
-  ), w = g(() => p.length > 1 ? "stack" : void 0, [p.length]), M = E, x = g(() => p.map((t, h) => {
+  ), k = p(() => v.length > 1 ? "stack" : void 0, [v.length]), C = H, g = p(() => v.map((t, d) => {
     const m = typeof t.showDistributionLine > "u" ? f : t.showDistributionLine;
     return {
       ...t,
-      color: t.color || M[h % M.length],
+      color: t.color || C[d % C.length],
       opacity: m ? 0.5 : t.opacity || 1,
       showDistributionLine: m,
       lineWidth: t.lineWidth || 3
     };
-  }), [p, f, M]), v = o.gridColor, C = g(
-    () => x.map((t) => ({
+  }), [v, f, C]), M = o.gridColor, D = p(
+    () => g.map((t) => ({
       type: "histogram",
       x: t.x,
       name: t.name,
@@ -63,30 +64,30 @@ const O = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
       },
       autobinx: t.autobinx,
       xbins: t.xbins,
-      hovertemplate: `${r}: %{x}<br>${s}: %{y}<extra>${t.name}</extra>`
+      hoverinfo: "none"
     })),
-    [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,
+    [g, o]
+  ), L = p(
+    () => g.filter((t) => t.showDistributionLine).map((t) => {
+      const d = T(t.x), m = V(t.x, d), x = Math.min(...t.x), c = Math.max(...t.x), y = c - x, I = x - y * 0.1, _ = c + y * 0.1, B = t.xbins || {
+        start: I,
+        end: _,
+        size: y / 10
+      }, q = j(
+        d,
         m,
-        D,
-        z,
+        I,
+        _,
         100
-      ), A = S(
-        L.y,
+      ), E = X(
+        q.y,
         t.x,
-        q
+        B
       );
       return {
         type: "scatter",
-        x: L.x,
-        y: A,
+        x: q.x,
+        y: E,
         mode: "lines",
         name: `${t.name} Distribution`,
         line: {
@@ -96,15 +97,15 @@ const O = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
         hoverinfo: "none"
       };
     }),
-    [x]
-  ), k = g(
-    () => [...C, ...N],
-    [C, N]
+    [g]
+  ), z = p(
+    () => [...D, ...L],
+    [D, L]
   );
-  return P(() => {
-    if (!c.current) return;
+  return R(() => {
+    if (!r.current) return;
     const t = {
-      width: i,
+      width: a,
       height: n,
       font: {
         family: "Inter, sans-serif"
@@ -113,7 +114,7 @@ const O = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
       margin: { l: 90, r: 40, b: 80, t: 40 },
       xaxis: {
         title: {
-          text: r,
+          text: i,
           font: {
             size: 16,
             color: o.textSecondary,
@@ -122,7 +123,7 @@ const O = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
           },
           standoff: 20
         },
-        gridcolor: v,
+        gridcolor: M,
         tickcolor: o.tickColor,
         ticklen: 8,
         tickwidth: 1,
@@ -133,7 +134,7 @@ const O = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
       },
       yaxis: {
         title: {
-          text: s,
+          text: l,
           font: {
             size: 16,
             color: o.textSecondary,
@@ -142,7 +143,7 @@ const O = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
           },
           standoff: 20
         },
-        gridcolor: v,
+        gridcolor: M,
         tickcolor: o.tickColor,
         ticklen: 8,
         tickwidth: 1,
@@ -152,48 +153,51 @@ const O = -0.5, W = (e) => e.reduce((n, l) => n + l, 0) / e.length, $ = (e, i) =
         zeroline: !1,
         rangemode: "tozero"
       },
-      barmode: w,
+      barmode: k,
       bargap: u,
       paper_bgcolor: o.paperBg,
       plot_bgcolor: o.plotBg
-    }, h = {
+    }, d = {
       responsive: !0,
       displayModeBar: !1,
       displaylogo: !1
     };
-    _.newPlot(c.current, k, t, h);
-    const m = c.current;
+    A.newPlot(r.current, z, t, d), b(r.current);
+    const m = r.current;
     return () => {
-      m && _.purge(m);
+      m && A.purge(m);
     };
-  }, [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",
-      {
-        ref: c,
-        style: {
-          width: "100%",
-          height: "100%",
-          margin: "0"
+  }, [a, n, i, l, u, z, k, M, o, b]), /* @__PURE__ */ N("div", { className: "histogram-container relative", style: { width: a }, children: [
+    /* @__PURE__ */ N("div", { className: "chart-container", children: [
+      s && /* @__PURE__ */ h("div", { className: "title-container", children: /* @__PURE__ */ h("h2", { className: "title", children: s }) }),
+      /* @__PURE__ */ h(
+        "div",
+        {
+          ref: r,
+          style: {
+            width: "100%",
+            height: "100%",
+            margin: "0"
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ d(({ series: t }) => {
-      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,
-        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 + y) }, a)
-        );
-      return /* @__PURE__ */ d("div", { className: "legend-container", children: m });
-    }, { series: x })
-  ] }) });
+      ),
+      /* @__PURE__ */ h(({ series: t }) => {
+        const d = t.map((c, y) => /* @__PURE__ */ h(F.Fragment, { children: /* @__PURE__ */ N("div", { className: "legend-item", children: [
+          /* @__PURE__ */ h("span", { className: "color-box", style: { background: c.color } }),
+          c.name,
+          y < t.length - 1 && /* @__PURE__ */ h("span", { className: "divider" })
+        ] }) }, c.name)), m = [], x = 6;
+        for (let c = 0; c < d.length; c += x)
+          m.push(
+            /* @__PURE__ */ h("div", { className: "legend-row", children: d.slice(c, c + x) }, c)
+          );
+        return /* @__PURE__ */ h("div", { className: "legend-container", children: m });
+      }, { series: g })
+    ] }),
+    w
+  ] });
 };
 export {
-  K as Histogram
+  tt as Histogram
 };
 //# sourceMappingURL=Histogram.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Histogram.js","sources":["../../../../src/components/charts/Histogram/Histogram.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { 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","jsx","jsxs","items","item","React","rows","rowSize"],"mappings":"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"}
1	+ {"version":3,"file":"Histogram.js","sources":["../../../../src/components/charts/Histogram/Histogram.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { 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","jsxs","jsx","items","item","React","rows","rowSize"],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LineGraph.cjs","sources":["../../../../src/components/charts/LineGraph/LineGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { seriesColor } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n \| \"circle\"\n \| \"circle-open\"\n \| \"circle-dot\"\n \| \"circle-open-dot\"\n \| \"square\"\n \| \"square-open\"\n \| \"square-dot\"\n \| \"square-open-dot\"\n \| \"diamond\"\n \| \"diamond-open\"\n \| \"diamond-dot\"\n \| \"diamond-open-dot\"\n \| \"cross\"\n \| \"cross-open\"\n \| \"cross-dot\"\n \| \"cross-open-dot\"\n \| \"x\"\n \| \"x-open\"\n \| \"x-dot\"\n \| \"x-open-dot\"\n \| \"triangle-up\"\n \| \"triangle-up-open\"\n \| \"triangle-up-dot\"\n \| \"triangle-up-open-dot\"\n \| \"triangle-down\"\n \| \"triangle-down-open\"\n \| \"triangle-down-dot\"\n \| \"triangle-down-open-dot\"\n \| \"triangle-left\"\n \| \"triangle-left-open\"\n \| \"triangle-left-dot\"\n \| \"triangle-left-open-dot\"\n \| \"triangle-right\"\n \| \"triangle-right-open\"\n \| \"triangle-right-dot\"\n \| \"triangle-right-open-dot\"\n \| \"triangle-ne\"\n \| \"triangle-ne-open\"\n \| \"triangle-ne-dot\"\n \| \"triangle-ne-open-dot\"\n \| \"triangle-se\"\n \| \"triangle-se-open\"\n \| \"triangle-se-dot\"\n \| \"triangle-se-open-dot\"\n \| \"triangle-sw\"\n \| \"triangle-sw-open\"\n \| \"triangle-sw-dot\"\n \| \"triangle-sw-open-dot\"\n \| \"triangle-nw\"\n \| \"triangle-nw-open\"\n \| \"triangle-nw-dot\"\n \| \"triangle-nw-open-dot\"\n \| \"pentagon\"\n \| \"pentagon-open\"\n \| \"pentagon-dot\"\n \| \"pentagon-open-dot\"\n \| \"hexagon\"\n \| \"hexagon-open\"\n \| \"hexagon-dot\"\n \| \"hexagon-open-dot\"\n \| \"hexagon2\"\n \| \"hexagon2-open\"\n \| \"hexagon2-dot\"\n \| \"hexagon2-open-dot\"\n \| \"octagon\"\n \| \"octagon-open\"\n \| \"octagon-dot\"\n \| \"octagon-open-dot\"\n \| \"star\"\n \| \"star-open\"\n \| \"star-dot\"\n \| \"star-open-dot\"\n \| \"hexagram\"\n \| \"hexagram-open\"\n \| \"hexagram-dot\"\n \| \"hexagram-open-dot\"\n \| \"star-triangle-up\"\n \| \"star-triangle-up-open\"\n \| \"star-triangle-up-dot\"\n \| \"star-triangle-up-open-dot\"\n \| \"star-triangle-down\"\n \| \"star-triangle-down-open\"\n \| \"star-triangle-down-dot\"\n \| \"star-triangle-down-open-dot\"\n \| \"star-square\"\n \| \"star-square-open\"\n \| \"star-square-dot\"\n \| \"star-square-open-dot\"\n \| \"star-diamond\"\n \| \"star-diamond-open\"\n \| \"star-diamond-dot\"\n \| \"star-diamond-open-dot\"\n \| \"diamond-tall\"\n \| \"diamond-tall-open\"\n \| \"diamond-tall-dot\"\n \| \"diamond-tall-open-dot\"\n \| \"diamond-wide\"\n \| \"diamond-wide-open\"\n \| \"diamond-wide-dot\"\n \| \"diamond-wide-open-dot\"\n \| \"hourglass\"\n \| \"hourglass-open\"\n \| \"bowtie\"\n \| \"bowtie-open\"\n \| \"circle-cross\"\n \| \"circle-cross-open\"\n \| \"circle-x\"\n \| \"circle-x-open\"\n \| \"square-cross\"\n \| \"square-cross-open\"\n \| \"square-x\"\n \| \"square-x-open\"\n \| \"diamond-cross\"\n \| \"diamond-cross-open\"\n \| \"diamond-x\"\n \| \"diamond-x-open\"\n \| \"cross-thin\"\n \| \"cross-thin-open\"\n \| \"x-thin\"\n \| \"x-thin-open\"\n \| \"asterisk\"\n \| \"asterisk-open\"\n \| \"hash\"\n \| \"hash-open\"\n \| \"hash-dot\"\n \| \"hash-open-dot\"\n \| \"y-up\"\n \| \"y-up-open\"\n \| \"y-down\"\n \| \"y-down-open\"\n \| \"y-left\"\n \| \"y-left-open\"\n \| \"y-right\"\n \| \"y-right-open\"\n \| \"line-ew\"\n \| \"line-ew-open\"\n \| \"line-ns\"\n \| \"line-ns-open\"\n \| \"line-ne\"\n \| \"line-ne-open\"\n \| \"line-nw\"\n \| \"line-nw-open\"\n \| \"arrow\"\n \| \"arrow-open\"\n \| \"arrow-wide\"\n \| \"arrow-wide-open\";\n\ninterface LineDataSeries {\n x: number[];\n y: number[];\n name: string;\n /** Optional color override (auto-assigned from CHART_COLORS if not provided) /\n color?: string;\n symbol?: MarkerSymbol;\n error_y?: {\n type: \"data\";\n array: number[];\n visible: boolean;\n };\n}\n\ntype LineGraphVariant = \"lines\" \| \"lines+markers\" \| \"lines+markers+error_bars\";\n\ntype LineGraphProps = {\n dataSeries: LineDataSeries[];\n width?: number;\n height?: number;\n xRange?: [number, number];\n yRange?: [number, number];\n variant?: LineGraphVariant;\n xTitle?: string;\n yTitle?: string;\n title?: string;\n};\n\nconst LineGraph: React.FC<LineGraphProps> = ({\n dataSeries,\n width = 1000,\n height = 600,\n xRange,\n yRange,\n variant = \"lines\",\n xTitle = \"Columns\",\n yTitle = \"Rows\",\n title = \"Line Graph\",\n}) => {\n const plotRef = useRef<HTMLDivElement>(null);\n const theme = usePlotlyTheme();\n\n const { yMin, yMax } = useMemo(() => {\n let minX = Number.MAX_VALUE;\n let maxX = Number.MIN_VALUE;\n let minY = Number.MAX_VALUE;\n let maxY = Number.MIN_VALUE;\n\n dataSeries.forEach((series) => {\n series.x.forEach((x) => {\n minX = Math.min(minX, x);\n maxX = Math.max(maxX, x);\n });\n series.y.forEach((y) => {\n minY = Math.min(minY, y);\n maxY = Math.max(maxY, y);\n });\n });\n\n const xPadding = (maxX - minX) 0.1;\n const yPadding = (maxY - minY) * 0.1;\n\n return {\n xMin: minX - xPadding,\n xMax: maxX + xPadding,\n yMin: minY - yPadding,\n yMax: maxY + yPadding,\n };\n }, [dataSeries]);\n\n const effectiveYRange = useMemo(\n () => yRange \|\| [yMin, yMax],\n [yRange, yMin, yMax],\n );\n\n const yTicks = useMemo(() => {\n const range = effectiveYRange[1] - effectiveYRange[0];\n let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n if (range / step > 10) step = step * 2;\n if (range / step < 4) step = step / 2;\n\n const ticks = [];\n let current = Math.ceil(effectiveYRange[0] / step) * step;\n while (current <= effectiveYRange[1]) {\n ticks.push(current);\n current += step;\n }\n return ticks;\n }, [effectiveYRange]);\n\n const xTicks = useMemo(\n () => [...new Set(dataSeries.flatMap((s) => s.x))],\n [dataSeries],\n );\n\n const mode = useMemo((): \"lines\" \| \"lines+markers\" => {\n switch (variant) {\n case \"lines+markers\":\n case \"lines+markers+error_bars\":\n return \"lines+markers\";\n default:\n return \"lines\";\n }\n }, [variant]);\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 useEffect(() => {\n if (!plotRef.current) return;\n\n const plotData = dataSeries.map((series, index) => {\n const color = seriesColor(index, series.color);\n return {\n x: series.x,\n y: series.y,\n type: \"scatter\" as const,\n mode: mode,\n name: series.name,\n line: {\n color,\n width: 1.5,\n },\n marker:\n variant === \"lines\"\n ? { opacity: 0 }\n : {\n color,\n size: 8,\n symbol: series.symbol \|\| \"triangle-up\",\n },\n error_y:\n variant === \"lines+markers+error_bars\"\n ? series.error_y \|\| {\n type: \"data\" as const,\n array: series.y.map(() => 10),\n visible: true,\n color,\n thickness: 1,\n width: 5,\n }\n : undefined,\n };\n });\n\n const layout = {\n title: {\n text: title,\n font: {\n size: 32,\n family: \"Inter, sans-serif\",\n color: theme.textColor,\n },\n },\n width,\n height,\n margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },\n paper_bgcolor: theme.paperBg,\n plot_bgcolor: theme.plotBg,\n font: {\n family: \"Inter, sans-serif\",\n },\n dragmode: false as const,\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: 32,\n },\n gridcolor: theme.gridColor,\n range: xRange,\n autorange: !xRange,\n tickmode: \"array\" as const,\n tickvals: xTicks,\n ticktext: xTicks.map(String),\n showgrid: true,\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: 30,\n },\n gridcolor: theme.gridColor,\n range: yRange,\n autorange: !yRange,\n tickmode: \"array\" as const,\n tickvals: yTicks,\n showgrid: true,\n ...tickOptions,\n },\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: 16,\n color: theme.legendColor,\n family: \"Inter, sans-serif\",\n weight: 500,\n },\n },\n showlegend: true,\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 }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, effectiveYRange, variant, theme]);\n\n return (\n <div className=\"chart-container\">\n <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n </div>\n );\n};\n\nexport { LineGraph };\nexport type { LineDataSeries, LineGraphVariant, LineGraphProps, MarkerSymbol };\n"],"names":["LineGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveYRange","yTicks","range","step","ticks","current","xTicks","s","mode","tickOptions","useEffect","plotData","index","color","seriesColor","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"LineGraph.cjs","sources":["../../../../src/components/charts/LineGraph/LineGraph.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 { seriesColor } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n \| \"circle\"\n \| \"circle-open\"\n \| \"circle-dot\"\n \| \"circle-open-dot\"\n \| \"square\"\n \| \"square-open\"\n \| \"square-dot\"\n \| \"square-open-dot\"\n \| \"diamond\"\n \| \"diamond-open\"\n \| \"diamond-dot\"\n \| \"diamond-open-dot\"\n \| \"cross\"\n \| \"cross-open\"\n \| \"cross-dot\"\n \| \"cross-open-dot\"\n \| \"x\"\n \| \"x-open\"\n \| \"x-dot\"\n \| \"x-open-dot\"\n \| \"triangle-up\"\n \| \"triangle-up-open\"\n \| \"triangle-up-dot\"\n \| \"triangle-up-open-dot\"\n \| \"triangle-down\"\n \| \"triangle-down-open\"\n \| \"triangle-down-dot\"\n \| \"triangle-down-open-dot\"\n \| \"triangle-left\"\n \| \"triangle-left-open\"\n \| \"triangle-left-dot\"\n \| \"triangle-left-open-dot\"\n \| \"triangle-right\"\n \| \"triangle-right-open\"\n \| \"triangle-right-dot\"\n \| \"triangle-right-open-dot\"\n \| \"triangle-ne\"\n \| \"triangle-ne-open\"\n \| \"triangle-ne-dot\"\n \| \"triangle-ne-open-dot\"\n \| \"triangle-se\"\n \| \"triangle-se-open\"\n \| \"triangle-se-dot\"\n \| \"triangle-se-open-dot\"\n \| \"triangle-sw\"\n \| \"triangle-sw-open\"\n \| \"triangle-sw-dot\"\n \| \"triangle-sw-open-dot\"\n \| \"triangle-nw\"\n \| \"triangle-nw-open\"\n \| \"triangle-nw-dot\"\n \| \"triangle-nw-open-dot\"\n \| \"pentagon\"\n \| \"pentagon-open\"\n \| \"pentagon-dot\"\n \| \"pentagon-open-dot\"\n \| \"hexagon\"\n \| \"hexagon-open\"\n \| \"hexagon-dot\"\n \| \"hexagon-open-dot\"\n \| \"hexagon2\"\n \| \"hexagon2-open\"\n \| \"hexagon2-dot\"\n \| \"hexagon2-open-dot\"\n \| \"octagon\"\n \| \"octagon-open\"\n \| \"octagon-dot\"\n \| \"octagon-open-dot\"\n \| \"star\"\n \| \"star-open\"\n \| \"star-dot\"\n \| \"star-open-dot\"\n \| \"hexagram\"\n \| \"hexagram-open\"\n \| \"hexagram-dot\"\n \| \"hexagram-open-dot\"\n \| \"star-triangle-up\"\n \| \"star-triangle-up-open\"\n \| \"star-triangle-up-dot\"\n \| \"star-triangle-up-open-dot\"\n \| \"star-triangle-down\"\n \| \"star-triangle-down-open\"\n \| \"star-triangle-down-dot\"\n \| \"star-triangle-down-open-dot\"\n \| \"star-square\"\n \| \"star-square-open\"\n \| \"star-square-dot\"\n \| \"star-square-open-dot\"\n \| \"star-diamond\"\n \| \"star-diamond-open\"\n \| \"star-diamond-dot\"\n \| \"star-diamond-open-dot\"\n \| \"diamond-tall\"\n \| \"diamond-tall-open\"\n \| \"diamond-tall-dot\"\n \| \"diamond-tall-open-dot\"\n \| \"diamond-wide\"\n \| \"diamond-wide-open\"\n \| \"diamond-wide-dot\"\n \| \"diamond-wide-open-dot\"\n \| \"hourglass\"\n \| \"hourglass-open\"\n \| \"bowtie\"\n \| \"bowtie-open\"\n \| \"circle-cross\"\n \| \"circle-cross-open\"\n \| \"circle-x\"\n \| \"circle-x-open\"\n \| \"square-cross\"\n \| \"square-cross-open\"\n \| \"square-x\"\n \| \"square-x-open\"\n \| \"diamond-cross\"\n \| \"diamond-cross-open\"\n \| \"diamond-x\"\n \| \"diamond-x-open\"\n \| \"cross-thin\"\n \| \"cross-thin-open\"\n \| \"x-thin\"\n \| \"x-thin-open\"\n \| \"asterisk\"\n \| \"asterisk-open\"\n \| \"hash\"\n \| \"hash-open\"\n \| \"hash-dot\"\n \| \"hash-open-dot\"\n \| \"y-up\"\n \| \"y-up-open\"\n \| \"y-down\"\n \| \"y-down-open\"\n \| \"y-left\"\n \| \"y-left-open\"\n \| \"y-right\"\n \| \"y-right-open\"\n \| \"line-ew\"\n \| \"line-ew-open\"\n \| \"line-ns\"\n \| \"line-ns-open\"\n \| \"line-ne\"\n \| \"line-ne-open\"\n \| \"line-nw\"\n \| \"line-nw-open\"\n \| \"arrow\"\n \| \"arrow-open\"\n \| \"arrow-wide\"\n \| \"arrow-wide-open\";\n\ninterface LineDataSeries {\n x: number[];\n y: number[];\n name: string;\n /** Optional color override (auto-assigned from CHART_COLORS if not provided) /\n color?: string;\n symbol?: MarkerSymbol;\n error_y?: {\n type: \"data\";\n array: number[];\n visible: boolean;\n };\n}\n\ntype LineGraphVariant = \"lines\" \| \"lines+markers\" \| \"lines+markers+error_bars\";\n\ntype LineGraphProps = {\n dataSeries: LineDataSeries[];\n width?: number;\n height?: number;\n xRange?: [number, number];\n yRange?: [number, number];\n variant?: LineGraphVariant;\n xTitle?: string;\n yTitle?: string;\n title?: string;\n};\n\nconst LineGraph: React.FC<LineGraphProps> = ({\n dataSeries,\n width = 1000,\n height = 600,\n xRange,\n yRange,\n variant = \"lines\",\n xTitle = \"Columns\",\n yTitle = \"Rows\",\n title = \"Line Graph\",\n}) => {\n const plotRef = useRef<HTMLDivElement>(null);\n const theme = usePlotlyTheme();\n const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n const { yMin, yMax } = useMemo(() => {\n let minX = Number.MAX_VALUE;\n let maxX = Number.MIN_VALUE;\n let minY = Number.MAX_VALUE;\n let maxY = Number.MIN_VALUE;\n\n dataSeries.forEach((series) => {\n series.x.forEach((x) => {\n minX = Math.min(minX, x);\n maxX = Math.max(maxX, x);\n });\n series.y.forEach((y) => {\n minY = Math.min(minY, y);\n maxY = Math.max(maxY, y);\n });\n });\n\n const xPadding = (maxX - minX) 0.1;\n const yPadding = (maxY - minY) * 0.1;\n\n return {\n xMin: minX - xPadding,\n xMax: maxX + xPadding,\n yMin: minY - yPadding,\n yMax: maxY + yPadding,\n };\n }, [dataSeries]);\n\n const effectiveYRange = useMemo(\n () => yRange \|\| [yMin, yMax],\n [yRange, yMin, yMax],\n );\n\n const yTicks = useMemo(() => {\n const range = effectiveYRange[1] - effectiveYRange[0];\n let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n if (range / step > 10) step = step * 2;\n if (range / step < 4) step = step / 2;\n\n const ticks = [];\n let current = Math.ceil(effectiveYRange[0] / step) * step;\n while (current <= effectiveYRange[1]) {\n ticks.push(current);\n current += step;\n }\n return ticks;\n }, [effectiveYRange]);\n\n const xTicks = useMemo(\n () => [...new Set(dataSeries.flatMap((s) => s.x))],\n [dataSeries],\n );\n\n const mode = useMemo((): \"lines\" \| \"lines+markers\" => {\n switch (variant) {\n case \"lines+markers\":\n case \"lines+markers+error_bars\":\n return \"lines+markers\";\n default:\n return \"lines\";\n }\n }, [variant]);\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 useEffect(() => {\n if (!plotRef.current) return;\n\n const plotData = dataSeries.map((series, index) => {\n const color = seriesColor(index, series.color);\n return {\n x: series.x,\n y: series.y,\n type: \"scatter\" as const,\n mode: mode,\n name: series.name,\n hoverinfo: \"none\" as const,\n line: {\n color,\n width: 1.5,\n },\n marker:\n variant === \"lines\"\n ? { opacity: 0 }\n : {\n color,\n size: 8,\n symbol: series.symbol \|\| \"triangle-up\",\n },\n error_y:\n variant === \"lines+markers+error_bars\"\n ? series.error_y \|\| {\n type: \"data\" as const,\n array: series.y.map(() => 10),\n visible: true,\n color,\n thickness: 1,\n width: 5,\n }\n : undefined,\n };\n });\n\n const layout = {\n title: {\n text: title,\n font: {\n size: 32,\n family: \"Inter, sans-serif\",\n color: theme.textColor,\n },\n },\n width,\n height,\n margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },\n paper_bgcolor: theme.paperBg,\n plot_bgcolor: theme.plotBg,\n font: {\n family: \"Inter, sans-serif\",\n },\n dragmode: false as const,\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: 32,\n },\n gridcolor: theme.gridColor,\n range: xRange,\n autorange: !xRange,\n tickmode: \"array\" as const,\n tickvals: xTicks,\n ticktext: xTicks.map(String),\n showgrid: true,\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: 30,\n },\n gridcolor: theme.gridColor,\n range: yRange,\n autorange: !yRange,\n tickmode: \"array\" as const,\n tickvals: yTicks,\n showgrid: true,\n ...tickOptions,\n },\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: 16,\n color: theme.legendColor,\n family: \"Inter, sans-serif\",\n weight: 500,\n },\n },\n showlegend: true,\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 }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, effectiveYRange, variant, theme, bindTooltip]);\n\n return (\n <div className=\"chart-container relative\">\n <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n {tooltipElement}\n </div>\n );\n};\n\nexport { LineGraph };\nexport type { LineDataSeries, LineGraphVariant, LineGraphProps, MarkerSymbol };\n"],"names":["LineGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveYRange","yTicks","range","step","ticks","current","xTicks","s","mode","tickOptions","useEffect","plotData","index","color","seriesColor","layout","config","Plotly","plotElement","jsxs","jsx"],"mappings":"0SAwLMA,EAAsC,CAAC,CAC3C,WAAAC,EACA,MAAAC,EAAQ,IACR,OAAAC,EAAS,IACT,OAAAC,EACA,OAAAC,EACA,QAAAC,EAAU,QACV,OAAAC,EAAS,UACT,OAAAC,EAAS,OACT,MAAAC,EAAQ,YACV,IAAM,CACJ,MAAMC,EAAUC,EAAAA,OAAuB,IAAI,EACrCC,EAAQC,EAAAA,eAAA,EACR,CAAE,YAAAC,EAAa,eAAAC,CAAA,EAAmBC,EAAAA,gBAAgB,CAAE,OAAQT,EAAQ,OAAQC,EAAQ,EAEpF,CAAE,KAAAS,EAAM,KAAAC,CAAA,EAASC,EAAAA,QAAQ,IAAM,CACnC,IAAIC,EAAO,OAAO,UACdC,EAAO,OAAO,UACdC,EAAO,OAAO,UACdC,EAAO,OAAO,UAElBtB,EAAW,QAASuB,GAAW,CAC7BA,EAAO,EAAE,QAASC,GAAM,CACtBL,EAAO,KAAK,IAAIA,EAAMK,CAAC,EACvBJ,EAAO,KAAK,IAAIA,EAAMI,CAAC,CACzB,CAAC,EACDD,EAAO,EAAE,QAASE,GAAM,CACtBJ,EAAO,KAAK,IAAIA,EAAMI,CAAC,EACvBH,EAAO,KAAK,IAAIA,EAAMG,CAAC,CACzB,CAAC,CACH,CAAC,EAED,MAAMC,GAAYN,EAAOD,GAAQ,GAC3BQ,GAAYL,EAAOD,GAAQ,GAEjC,MAAO,CACL,KAAMF,EAAOO,EACb,KAAMN,EAAOM,EACb,KAAML,EAAOM,EACb,KAAML,EAAOK,CAAA,CAEjB,EAAG,CAAC3B,CAAU,CAAC,EAET4B,EAAkBV,EAAAA,QACtB,IAAMd,GAAU,CAACY,EAAMC,CAAI,EAC3B,CAACb,EAAQY,EAAMC,CAAI,CAAA,EAGfY,EAASX,EAAAA,QAAQ,IAAM,CAC3B,MAAMY,EAAQF,EAAgB,CAAC,EAAIA,EAAgB,CAAC,EACpD,IAAIG,EAAO,KAAK,IAAI,GAAI,KAAK,MAAM,KAAK,MAAMD,CAAK,CAAC,CAAC,EAEjDA,EAAQC,EAAO,KAAIA,EAAOA,EAAO,GACjCD,EAAQC,EAAO,IAAGA,EAAOA,EAAO,GAEpC,MAAMC,EAAQ,CAAA,EACd,IAAIC,EAAU,KAAK,KAAKL,EAAgB,CAAC,EAAIG,CAAI,EAAIA,EACrD,KAAOE,GAAWL,EAAgB,CAAC,GACjCI,EAAM,KAAKC,CAAO,EAClBA,GAAWF,EAEb,OAAOC,CACT,EAAG,CAACJ,CAAe,CAAC,EAEdM,EAAShB,EAAAA,QACb,IAAM,CAAC,GAAG,IAAI,IAAIlB,EAAW,QAASmC,GAAMA,EAAE,CAAC,CAAC,CAAC,EACjD,CAACnC,CAAU,CAAA,EAGPoC,EAAOlB,EAAAA,QAAQ,IAAiC,CACpD,OAAQb,EAAA,CACN,IAAK,gBACL,IAAK,2BACH,MAAO,gBACT,QACE,MAAO,OAAA,CAEb,EAAG,CAACA,CAAO,CAAC,EAENgC,EAAcnB,EAAAA,QAClB,KAAO,CACL,UAAWP,EAAM,UACjB,QAAS,GACT,UAAW,EACX,MAAO,UACP,SAAU,CACR,KAAM,GACN,MAAOA,EAAM,UACb,OAAQ,oBACR,OAAQ,GAAA,EAEV,UAAWA,EAAM,UACjB,UAAW,EACX,SAAU,EACV,SAAU,EAAA,GAEZ,CAACA,CAAK,CAAA,EAGR2B,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAAC7B,EAAQ,QAAS,OAEtB,MAAM8B,EAAWvC,EAAW,IAAI,CAACuB,EAAQiB,IAAU,CACjD,MAAMC,EAAQC,EAAAA,YAAYF,EAAOjB,EAAO,KAAK,EAC7C,MAAO,CACL,EAAGA,EAAO,EACV,EAAGA,EAAO,EACV,KAAM,UACN,KAAAa,EACA,KAAMb,EAAO,KACb,UAAW,OACX,KAAM,CACJ,MAAAkB,EACA,MAAO,GAAA,EAET,OACEpC,IAAY,QACR,CAAE,QAAS,GACX,CACE,MAAAoC,EACA,KAAM,EACN,OAAQlB,EAAO,QAAU,aAAA,EAEjC,QACElB,IAAY,2BACRkB,EAAO,SAAW,CAChB,KAAM,OACN,MAAOA,EAAO,EAAE,IAAI,IAAM,EAAE,EAC5B,QAAS,GACT,MAAAkB,EACA,UAAW,EACX,MAAO,CAAA,EAET,MAAA,CAEV,CAAC,EAEKE,EAAS,CACb,MAAO,CACL,KAAMnC,EACN,KAAM,CACJ,KAAM,GACN,OAAQ,oBACR,MAAOG,EAAM,SAAA,CACf,EAEF,MAAAV,EACA,OAAAC,EACA,OAAQ,CAAE,EAAG,GAAI,EAAG,GAAI,EAAG,GAAI,EAAG,GAAI,IAAK,EAAA,EAC3C,cAAeS,EAAM,QACrB,aAAcA,EAAM,OACpB,KAAM,CACJ,OAAQ,mBAAA,EAEV,SAAU,GACV,MAAO,CACL,MAAO,CACL,KAAML,EACN,KAAM,CACJ,KAAM,GACN,MAAOK,EAAM,cACb,OAAQ,oBACR,OAAQ,GAAA,EAEV,SAAU,EAAA,EAEZ,UAAWA,EAAM,UACjB,MAAOR,EACP,UAAW,CAACA,EACZ,SAAU,QACV,SAAU+B,EACV,SAAUA,EAAO,IAAI,MAAM,EAC3B,SAAU,GACV,GAAGG,CAAA,EAEL,MAAO,CACL,MAAO,CACL,KAAM9B,EACN,KAAM,CACJ,KAAM,GACN,MAAOI,EAAM,cACb,OAAQ,oBACR,OAAQ,GAAA,EAEV,SAAU,EAAA,EAEZ,UAAWA,EAAM,UACjB,MAAOP,EACP,UAAW,CAACA,EACZ,SAAU,QACV,SAAUyB,EACV,SAAU,GACV,GAAGQ,CAAA,EAEL,OAAQ,CACN,EAAG,GACH,EAAG,IACH,QAAS,SACT,QAAS,MACT,YAAa,IACb,KAAM,CACJ,KAAM,GACN,MAAO1B,EAAM,YACb,OAAQ,oBACR,OAAQ,GAAA,CACV,EAEF,WAAY,EAAA,EAGRiC,EAAS,CACb,WAAY,GACZ,eAAgB,GAChB,YAAa,EAAA,EAGfC,EAAO,QAAQpC,EAAQ,QAAS8B,EAAUI,EAAQC,CAAM,EACxD/B,EAAYJ,EAAQ,OAAO,EAG3B,MAAMqC,EAAcrC,EAAQ,QAE5B,MAAO,IAAM,CACPqC,GACFD,EAAO,MAAMC,CAAW,CAE5B,CACF,EAAG,CAAC9C,EAAYC,EAAOC,EAAQC,EAAQC,EAAQE,EAAQC,EAAQC,EAAO4B,EAAMC,EAAaH,EAAQL,EAAQD,EAAiBvB,EAASM,EAAOE,CAAW,CAAC,EAGpJkC,EAAAA,KAAC,MAAA,CAAI,UAAU,2BACb,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,IAAKvC,EAAS,MAAO,CAAE,MAAO,OAAQ,OAAQ,MAAA,CAAO,CAAG,EAC5DK,CAAA,EACH,CAEJ"}

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

@@ -1,26 +1,27 @@
-import { jsx as z } from "react/jsx-runtime";
-import N from "plotly.js-dist";
-import { useRef as A, useMemo as c, useEffect as L } from "react";
-import { usePlotlyTheme as P } from "../../../hooks/use-plotly-theme.js";
-import { seriesColor as v } from "../../../utils/colors.js";
-const G = ({
+import { jsxs as v, jsx as A } from "react/jsx-runtime";
+import z from "plotly.js-dist";
+import { useRef as P, useMemo as c, useEffect as U } from "react";
+import { useChartTooltip as V } from "../ChartTooltip/ChartTooltip.js";
+import { usePlotlyTheme as X } from "../../../hooks/use-plotly-theme.js";
+import { seriesColor as B } from "../../../utils/colors.js";
+const q = ({
   dataSeries: l,
-  width: x = 1e3,
-  height: k = 600,
+  width: M = 1e3,
+  height: w = 600,
   xRange: d,
   yRange: m,
   variant: f = "lines",
-  xTitle: M = "Columns",
-  yTitle: w = "Rows",
+  xTitle: y = "Columns",
+  yTitle: g = "Rows",
   title: b = "Line Graph"
 }) => {
-  const h = A(null), o = P(), { yMin: _, yMax: C } = c(() => {
+  const p = P(null), o = X(), { bindTooltip: C, tooltipElement: N } = V({ xLabel: y, yLabel: g }), { yMin: E, yMax: _ } = c(() => {
     let r = Number.MAX_VALUE, t = Number.MIN_VALUE, i = Number.MAX_VALUE, e = Number.MIN_VALUE;
     l.forEach((a) => {
-      a.x.forEach((p) => {
-        r = Math.min(r, p), t = Math.max(t, p);
-      }), a.y.forEach((p) => {
-        i = Math.min(i, p), e = Math.max(e, p);
+      a.x.forEach((h) => {
+        r = Math.min(r, h), t = Math.max(t, h);
+      }), a.y.forEach((h) => {
+        i = Math.min(i, h), e = Math.max(e, h);
       });
     });
     const n = (t - r) * 0.1, u = (e - i) * 0.1;
@@ -31,9 +32,9 @@ const G = ({
       yMax: e + u
     };
   }, [l]), s = c(
-    () => m || [_, C],
-    [m, _, C]
-  ), E = c(() => {
+    () => m || [E, _],
+    [m, E, _]
+  ), I = c(() => {
     const r = s[1] - s[0];
     let t = Math.pow(10, Math.floor(Math.log10(r)));
     r / t > 10 && (t = t * 2), r / t < 4 && (t = t / 2);
@@ -42,10 +43,10 @@ const G = ({
     for (; e <= s[1]; )
       i.push(e), e += t;
     return i;
-  }, [s]), y = c(
+  }, [s]), x = c(
     () => [...new Set(l.flatMap((r) => r.x))],
     [l]
-  ), I = c(() => {
+  ), L = c(() => {
     switch (f) {
       case "lines+markers":
       case "lines+markers+error_bars":
@@ -53,7 +54,7 @@ const G = ({
       default:
         return "lines";
     }
-  }, [f]), g = c(
+  }, [f]), k = c(
     () => ({
       tickcolor: o.tickColor,
       ticklen: 12,
@@ -72,16 +73,17 @@ const G = ({
     }),
     [o]
   );
-  return L(() => {
-    if (!h.current) return;
+  return U(() => {
+    if (!p.current) return;
     const r = l.map((n, u) => {
-      const a = v(u, n.color);
+      const a = B(u, n.color);
       return {
         x: n.x,
         y: n.y,
         type: "scatter",
-        mode: I,
+        mode: L,
         name: n.name,
+        hoverinfo: "none",
         line: {
           color: a,
           width: 1.5
@@ -109,8 +111,8 @@ const G = ({
           color: o.textColor
         }
       },
-      width: x,
-      height: k,
+      width: M,
+      height: w,
       margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },
       paper_bgcolor: o.paperBg,
       plot_bgcolor: o.plotBg,
@@ -120,7 +122,7 @@ const G = ({
       dragmode: !1,
       xaxis: {
         title: {
-          text: M,
+          text: y,
           font: {
             size: 16,
             color: o.textSecondary,
@@ -133,14 +135,14 @@ const G = ({
         range: d,
         autorange: !d,
         tickmode: "array",
-        tickvals: y,
-        ticktext: y.map(String),
+        tickvals: x,
+        ticktext: x.map(String),
         showgrid: !0,
-        ...g
+        ...k
       },
       yaxis: {
         title: {
-          text: w,
+          text: g,
           font: {
             size: 16,
             color: o.textSecondary,
@@ -153,9 +155,9 @@ const G = ({
         range: m,
         autorange: !m,
         tickmode: "array",
-        tickvals: E,
+        tickvals: I,
         showgrid: !0,
-        ...g
+        ...k
       },
       legend: {
         x: 0.5,
@@ -176,14 +178,17 @@ const G = ({
       displayModeBar: !1,
       displaylogo: !1
     };
-    N.newPlot(h.current, r, t, i);
-    const e = h.current;
+    z.newPlot(p.current, r, t, i), C(p.current);
+    const e = p.current;
     return () => {
-      e && N.purge(e);
+      e && z.purge(e);
     };
-  }, [l, x, k, d, m, M, w, b, I, g, y, E, s, f, o]), /* @__PURE__ */ z("div", { className: "chart-container", children: /* @__PURE__ */ z("div", { ref: h, style: { width: "100%", height: "100%" } }) });
+  }, [l, M, w, d, m, y, g, b, L, k, x, I, s, f, o, C]), /* @__PURE__ */ v("div", { className: "chart-container relative", children: [
+    /* @__PURE__ */ A("div", { ref: p, style: { width: "100%", height: "100%" } }),
+    N
+  ] });
 };
 export {
-  G as LineGraph
+  q as LineGraph
 };
 //# sourceMappingURL=LineGraph.js.map