@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.81.1 → 0.6.0-beta.83.1

package/dist/components/charts/PieChart/PieChart.js

@@ -1,35 +1,28 @@
-import { jsx as l, jsxs as y } from "react/jsx-runtime";
-import N from "plotly.js-dist";
-import L, { useRef as P, useMemo as R, useEffect as C } from "react";
-import { usePlotlyTheme as x } from "../../../hooks/use-plotly-theme.js";
-import { COLORS as t } from "../../../utils/colors.js";
-const E = [
-  t.BLUE,
-  t.GREEN,
-  t.ORANGE,
-  t.RED,
-  t.YELLOW,
-  t.PURPLE
-], j = ({
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import y from "plotly.js-dist";
+import N, { useRef as x, useMemo as P, useEffect as R } from "react";
+import { usePlotlyTheme as _ } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as L } from "../../../utils/colors.js";
+const C = L, k = ({
   dataSeries: e,
-  width: m = 400,
-  height: p = 400,
-  title: u = "Pie Chart",
-  textInfo: g = "percent",
-  hole: h = 0,
-  rotation: d = 0
+  width: a = 400,
+  height: f = 400,
+  title: p = "Pie Chart",
+  textInfo: u = "percent",
+  hole: g = 0,
+  rotation: h = 0
 }) => {
-  const i = P(null), a = x(), f = R(() => {
+  const c = x(null), i = _(), m = P(() => {
     if (e.colors && e.colors.length >= e.labels.length)
       return e.colors;
     const o = [...e.colors || []], s = e.labels.length - o.length;
     if (s <= 0) return o;
     for (let n = 0; n < s; n++)
-      o.push(E[n % E.length]);
+      o.push(C[n % C.length]);
     return o;
   }, [e.colors, e.labels.length]);
-  return C(() => {
-    if (!i.current) return;
+  return R(() => {
+    if (!c.current) return;
     const o = [
       {
         type: "pie",
@@ -37,45 +30,45 @@ const E = [
         values: e.values,
         name: e.name,
         marker: {
-          colors: f
+          colors: m
         },
-        textinfo: g,
+        textinfo: u,
         hoverinfo: "label+text+value",
         insidetextfont: {
           size: 0,
           family: "Inter, sans-serif",
           color: "transparent"
         },
-        hole: h,
-        rotation: d
+        hole: g,
+        rotation: h
       }
     ], s = {
-      width: m,
-      height: p,
+      width: a,
+      height: f,
       font: {
         family: "Inter, sans-serif",
-        color: a.textColor
+        color: i.textColor
       },
       showlegend: !1,
       margin: { l: 40, r: 40, b: 40, t: 40 },
-      paper_bgcolor: a.paperBg,
-      plot_bgcolor: a.plotBg
+      paper_bgcolor: i.paperBg,
+      plot_bgcolor: i.plotBg
     }, n = {
       responsive: !0,
       displayModeBar: !1,
       displaylogo: !1
     };
-    N.newPlot(i.current, o, s, n);
-    const c = i.current;
+    y.newPlot(c.current, o, s, n);
+    const t = c.current;
     return () => {
-      c && N.purge(c);
+      t && y.purge(t);
     };
-  }, [f, e.labels, e.name, e.values, m, p, g, h, d, a]), /* @__PURE__ */ l("div", { className: "card-container", style: { width: m }, children: /* @__PURE__ */ y("div", { className: "chart-container", children: [
-    u && /* @__PURE__ */ l("div", { className: "title-container", children: /* @__PURE__ */ l("h2", { className: "title", children: u }) }),
+  }, [m, e.labels, e.name, e.values, a, f, u, g, h, i]), /* @__PURE__ */ l("div", { className: "card-container", style: { width: a }, children: /* @__PURE__ */ b("div", { className: "chart-container", children: [
+    p && /* @__PURE__ */ l("div", { className: "title-container", children: /* @__PURE__ */ l("h2", { className: "title", children: p }) }),
     /* @__PURE__ */ l(
       "div",
       {
-        ref: i,
+        ref: c,
         style: {
           width: "100%",
           height: "100%",
@@ -87,20 +80,20 @@ const E = [
       labels: o,
       colors: s
     }) => {
-      const n = o.map((r, b) => /* @__PURE__ */ l(L.Fragment, { children: /* @__PURE__ */ y("div", { className: "legend-item", children: [
-        /* @__PURE__ */ l("span", { className: "color-box", style: { background: s[b] } }),
+      const n = o.map((r, v) => /* @__PURE__ */ l(N.Fragment, { children: /* @__PURE__ */ b("div", { className: "legend-item", children: [
+        /* @__PURE__ */ l("span", { className: "color-box", style: { background: s[v] } }),
         r,
-        b < o.length - 1 && /* @__PURE__ */ l("span", { className: "divider" })
-      ] }) }, r)), c = 6, v = [];
-      for (let r = 0; r < n.length; r += c)
-        v.push(
-          /* @__PURE__ */ l("div", { className: "legend-row", children: n.slice(r, r + c) }, r)
+        v < o.length - 1 && /* @__PURE__ */ l("span", { className: "divider" })
+      ] }) }, r)), t = 6, d = [];
+      for (let r = 0; r < n.length; r += t)
+        d.push(
+          /* @__PURE__ */ l("div", { className: "legend-row", children: n.slice(r, r + t) }, r)
         );
-      return /* @__PURE__ */ l("div", { className: "legend-container", children: v });
-    }, { labels: e.labels, colors: f })
+      return /* @__PURE__ */ l("div", { className: "legend-container", children: d });
+    }, { labels: e.labels, colors: m })
   ] }) });
 };
 export {
-  j as PieChart
+  k as PieChart
 };
 //# sourceMappingURL=PieChart.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.js","sources":["../../../../src/components/charts/PieChart/PieChart.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\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = [\n  COLORS.BLUE,\n  COLORS.GREEN,\n  COLORS.ORANGE,\n  COLORS.RED,\n  COLORS.YELLOW,\n  COLORS.PURPLE,\n];\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title = \"Pie Chart\",\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"label+text+value\" as const,\n        insidetextfont: {\n          size: 0,\n          family: \"Inter, sans-serif\",\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\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  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={label}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: colors[i] }} />\n          {label}\n          {i < labels.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\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    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div className=\"card-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        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","jsx","jsxs","labels","items","label","React","rowSize","rows"],"mappings":"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"}
+{"version":3,"file":"PieChart.js","sources":["../../../../src/components/charts/PieChart/PieChart.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\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title = \"Pie Chart\",\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"label+text+value\" as const,\n        insidetextfont: {\n          size: 0,\n          family: \"Inter, sans-serif\",\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\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  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={label}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: colors[i] }} />\n          {label}\n          {i < labels.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\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    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div className=\"card-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        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","jsx","jsxs","labels","items","label","React","rowSize","rows"],"mappings":"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"}

package/dist/components/charts/PlateMap/constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./types.cjs"),O={sample:"#4575b4",control:"#d73027",empty:"#f0f0f0"},A={[f.PLATE_FORMAT_96]:{rows:8,columns:12},[f.PLATE_FORMAT_384]:{rows:16,columns:24},[f.PLATE_FORMAT_1536]:{rows:32,columns:48}},_=[[0,"#313695"],[.1,"#4575b4"],[.2,"#74add1"],[.3,"#abd9e9"],[.4,"#e0f3f8"],[.5,"#ffffbf"],[.6,"#fee090"],[.7,"#fdae61"],[.8,"#f46d43"],[.9,"#d73027"],[1,"#a50026"]],L={textDark:"#333",regionBorder:"#000",emptyWell:"#f0f0f0"},e={Viridis:[[0,"#440154"],[.25,"#414487"],[.5,"#2a788e"],[.75,"#22a884"],[1,"#7ad151"]],Blues:[[0,"#f7fbff"],[.25,"#c6dbef"],[.5,"#6baed6"],[.75,"#2171b5"],[1,"#08306b"]],RdBu:[[0,"#67001f"],[.25,"#d6604d"],[.5,"#f7f7f7"],[.75,"#4393c3"],[1,"#053061"]],Greens:[[0,"#f7fcf5"],[.25,"#c7e9c0"],[.5,"#74c476"],[.75,"#238b45"],[1,"#00441b"]],Reds:[[0,"#fff5f0"],[.25,"#fcbba1"],[.5,"#fb6a4a"],[.75,"#cb181d"],[1,"#67000d"]],Greys:[[0,"#ffffff"],[.25,"#d9d9d9"],[.5,"#969696"],[.75,"#525252"],[1,"#000000"]],Hot:[[0,"#000000"],[.33,"#e60000"],[.66,"#ffff00"],[1,"#ffffff"]],YlGnBu:[[0,"#ffffd9"],[.25,"#c7e9b4"],[.5,"#41b6c4"],[.75,"#225ea8"],[1,"#081d58"]],YlOrRd:[[0,"#ffffcc"],[.25,"#fed976"],[.5,"#fd8d3c"],[.75,"#e31a1c"],[1,"#800026"]],Plasma:[[0,"#0d0887"],[.25,"#7e03a8"],[.5,"#cc4778"],[.75,"#f89540"],[1,"#f0f921"]]},E={MAX_RANDOM_VALUE:5e4,SENTINEL_RATIO:.01,COLOR_SCALE_THRESHOLD:.99,COLOR_SCALE_EPSILON:.001,MULTI_VALUE_PRIMARY_RATIO:.575,MULTI_VALUE_SECONDARY_RATIO:.425,FONT_SIZE_LARGE:11,LABEL_CENTER_OFFSET:-.5,MARGIN_TOP:70,MARGIN_RIGHT:50,MARGIN_BOTTOM:40,MARGIN_LEFT:80,COLORBAR_LENGTH:130,DOMAIN_COLORBAR_OFFSET:.15,DOMAIN_COLORBAR_END:.85};exports.COLORS=L;exports.DEFAULT_CATEGORY_COLORS=O;exports.DEFAULT_COLOR_SCALE=_;exports.NAMED_COLORSCALES=e;exports.PLATEMAP_CONSTANTS=E;exports.PLATE_CONFIGS=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./types.cjs"),O=require("../../../utils/colors.cjs"),A={sample:O.CHART_COLORS[0],control:O.CHART_COLORS[3],empty:"#f0f0f0"},_={[f.PLATE_FORMAT_96]:{rows:8,columns:12},[f.PLATE_FORMAT_384]:{rows:16,columns:24},[f.PLATE_FORMAT_1536]:{rows:32,columns:48}},R=O.toPlotlyColorscale(O.CHART_DIVERGING.blueOrange),L={primary:O.CHART_COLORS[0],textDark:"#333",regionBorder:"#000",emptyWell:"#f0f0f0"},T={Viridis:[[0,"#440154"],[.25,"#414487"],[.5,"#2a788e"],[.75,"#22a884"],[1,"#7ad151"]],Blues:[[0,"#f7fbff"],[.25,"#c6dbef"],[.5,"#6baed6"],[.75,"#2171b5"],[1,"#08306b"]],RdBu:[[0,"#67001f"],[.25,"#d6604d"],[.5,"#f7f7f7"],[.75,"#4393c3"],[1,"#053061"]],Greens:[[0,"#f7fcf5"],[.25,"#c7e9c0"],[.5,"#74c476"],[.75,"#238b45"],[1,"#00441b"]],Reds:[[0,"#fff5f0"],[.25,"#fcbba1"],[.5,"#fb6a4a"],[.75,"#cb181d"],[1,"#67000d"]],Greys:[[0,"#ffffff"],[.25,"#d9d9d9"],[.5,"#969696"],[.75,"#525252"],[1,"#000000"]],Hot:[[0,"#000000"],[.33,"#e60000"],[.66,"#ffff00"],[1,"#ffffff"]],YlGnBu:[[0,"#ffffd9"],[.25,"#c7e9b4"],[.5,"#41b6c4"],[.75,"#225ea8"],[1,"#081d58"]],YlOrRd:[[0,"#ffffcc"],[.25,"#fed976"],[.5,"#fd8d3c"],[.75,"#e31a1c"],[1,"#800026"]],Plasma:[[0,"#0d0887"],[.25,"#7e03a8"],[.5,"#cc4778"],[.75,"#f89540"],[1,"#f0f921"]]},E={MAX_RANDOM_VALUE:5e4,SENTINEL_RATIO:.01,COLOR_SCALE_THRESHOLD:.99,COLOR_SCALE_EPSILON:.001,MULTI_VALUE_PRIMARY_RATIO:.575,MULTI_VALUE_SECONDARY_RATIO:.425,FONT_SIZE_LARGE:11,LABEL_CENTER_OFFSET:-.5,MARGIN_TOP:70,MARGIN_RIGHT:50,MARGIN_BOTTOM:40,MARGIN_LEFT:80,COLORBAR_LENGTH:130,DOMAIN_COLORBAR_OFFSET:.15,DOMAIN_COLORBAR_END:.85};exports.COLORS=L;exports.DEFAULT_CATEGORY_COLORS=A;exports.DEFAULT_COLOR_SCALE=R;exports.NAMED_COLORSCALES=T;exports.PLATEMAP_CONSTANTS=E;exports.PLATE_CONFIGS=_;
 //# sourceMappingURL=constants.cjs.map

package/dist/components/charts/PlateMap/constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../../src/components/charts/PlateMap/constants.ts"],"sourcesContent":["import {\n  PLATE_FORMAT_96,\n  PLATE_FORMAT_384,\n  PLATE_FORMAT_1536,\n} from \"./types\";\n\n/**\n * Default category colors for well types in categorical visualization mode.\n * Override these by passing custom colors via the `categoryColors` prop.\n */\nexport const DEFAULT_CATEGORY_COLORS: Record<string, string> = {\n  sample: \"#4575b4\", // Blue\n  control: \"#d73027\", // Red\n  empty: \"#f0f0f0\", // Light gray\n};\n\n/**\n * Plate dimension configurations\n */\nexport const PLATE_CONFIGS: Record<\n  typeof PLATE_FORMAT_96 | typeof PLATE_FORMAT_384 | typeof PLATE_FORMAT_1536,\n  { rows: number; columns: number }\n> = {\n  [PLATE_FORMAT_96]: { rows: 8, columns: 12 },\n  [PLATE_FORMAT_384]: { rows: 16, columns: 24 },\n  [PLATE_FORMAT_1536]: { rows: 32, columns: 48 },\n};\n\n/**\n * Default color scale (blue to red gradient suitable for plate data)\n */\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> = [\n  [0, \"#313695\"],\n  [0.1, \"#4575b4\"],\n  [0.2, \"#74add1\"],\n  [0.3, \"#abd9e9\"],\n  [0.4, \"#e0f3f8\"],\n  [0.5, \"#ffffbf\"],\n  [0.6, \"#fee090\"],\n  [0.7, \"#fdae61\"],\n  [0.8, \"#f46d43\"],\n  [0.9, \"#d73027\"],\n  [1, \"#a50026\"],\n];\n\n/**\n * UI color constants for PlateMap component styling\n */\nexport const COLORS = {\n  /** Primary blue color for active states */\n  primary: \"#4575b4\",\n  /** White background */\n  white: \"#fff\",\n  /** Light gray for borders */\n  borderLight: \"#ccc\",\n  /** Dark gray for text */\n  textDark: \"#333\",\n  /** Default region border color */\n  regionBorder: \"#000\",\n  /** Default empty well color (light gray) */\n  emptyWell: \"#f0f0f0\",\n} as const;\n\n/**\n * Named Plotly colorscales converted to array format.\n * Used to extend colorscales with emptyWellColor when there are null values.\n * Reference: https://plotly.com/javascript/colorscales/\n */\nexport const NAMED_COLORSCALES: Record<string, Array<[number, string]>> = {\n  Viridis: [\n    [0, \"#440154\"],\n    [0.25, \"#414487\"],\n    [0.5, \"#2a788e\"],\n    [0.75, \"#22a884\"],\n    [1, \"#7ad151\"],\n  ],\n  Blues: [\n    [0, \"#f7fbff\"],\n    [0.25, \"#c6dbef\"],\n    [0.5, \"#6baed6\"],\n    [0.75, \"#2171b5\"],\n    [1, \"#08306b\"],\n  ],\n  RdBu: [\n    [0, \"#67001f\"],\n    [0.25, \"#d6604d\"],\n    [0.5, \"#f7f7f7\"],\n    [0.75, \"#4393c3\"],\n    [1, \"#053061\"],\n  ],\n  Greens: [\n    [0, \"#f7fcf5\"],\n    [0.25, \"#c7e9c0\"],\n    [0.5, \"#74c476\"],\n    [0.75, \"#238b45\"],\n    [1, \"#00441b\"],\n  ],\n  Reds: [\n    [0, \"#fff5f0\"],\n    [0.25, \"#fcbba1\"],\n    [0.5, \"#fb6a4a\"],\n    [0.75, \"#cb181d\"],\n    [1, \"#67000d\"],\n  ],\n  Greys: [\n    [0, \"#ffffff\"],\n    [0.25, \"#d9d9d9\"],\n    [0.5, \"#969696\"],\n    [0.75, \"#525252\"],\n    [1, \"#000000\"],\n  ],\n  Hot: [\n    [0, \"#000000\"],\n    [0.33, \"#e60000\"],\n    [0.66, \"#ffff00\"],\n    [1, \"#ffffff\"],\n  ],\n  YlGnBu: [\n    [0, \"#ffffd9\"],\n    [0.25, \"#c7e9b4\"],\n    [0.5, \"#41b6c4\"],\n    [0.75, \"#225ea8\"],\n    [1, \"#081d58\"],\n  ],\n  YlOrRd: [\n    [0, \"#ffffcc\"],\n    [0.25, \"#fed976\"],\n    [0.5, \"#fd8d3c\"],\n    [0.75, \"#e31a1c\"],\n    [1, \"#800026\"],\n  ],\n  Plasma: [\n    [0, \"#0d0887\"],\n    [0.25, \"#7e03a8\"],\n    [0.5, \"#cc4778\"],\n    [0.75, \"#f89540\"],\n    [1, \"#f0f921\"],\n  ],\n};\n\n/**\n * Numeric constants for PlateMap calculations and layout\n */\nexport const PLATEMAP_CONSTANTS = {\n  /** Maximum random data value for demonstration */\n  MAX_RANDOM_VALUE: 50000,\n  /** Sentinel value ratio for empty wells below data range */\n  SENTINEL_RATIO: 0.01,\n  /** Color scale data start ratio for extended scales */\n  COLOR_SCALE_THRESHOLD: 0.99,\n  /** Small epsilon for color scale band calculations */\n  COLOR_SCALE_EPSILON: 0.001,\n  /** Proportions for multi-value well display */\n  MULTI_VALUE_PRIMARY_RATIO: 0.575,\n  MULTI_VALUE_SECONDARY_RATIO: 0.425,\n  /** Font sizes */\n  FONT_SIZE_LARGE: 11,\n  /** Offset for centering labels */\n  LABEL_CENTER_OFFSET: -0.5,\n  /** Opacity values */\n  HOVER_OPACITY_FAINT: 0.15,\n  HOVER_OPACITY_VISIBLE: 0.85,\n  /** Layout margins */\n  MARGIN_TOP: 70,\n  MARGIN_RIGHT: 50,\n  MARGIN_BOTTOM: 40,\n  MARGIN_LEFT: 80,\n  /** Colorbar dimensions */\n  COLORBAR_LENGTH: 130,\n  COLORBAR_X_OFFSET: 70,\n  /** Domain position constants for legend placement */\n  DOMAIN_COLORBAR_OFFSET: 0.15,\n  DOMAIN_COLORBAR_END: 0.85,\n} as const;\n"],"names":["DEFAULT_CATEGORY_COLORS","PLATE_CONFIGS","PLATE_FORMAT_96","PLATE_FORMAT_384","PLATE_FORMAT_1536","DEFAULT_COLOR_SCALE","COLORS","NAMED_COLORSCALES","PLATEMAP_CONSTANTS"],"mappings":"+GAUaA,EAAkD,CAC7D,OAAQ,UACR,QAAS,UACT,MAAO,SACT,EAKaC,EAGT,CACF,CAACC,EAAAA,eAAe,EAAG,CAAE,KAAM,EAAG,QAAS,EAAA,EACvC,CAACC,EAAAA,gBAAgB,EAAG,CAAE,KAAM,GAAI,QAAS,EAAA,EACzC,CAACC,EAAAA,iBAAiB,EAAG,CAAE,KAAM,GAAI,QAAS,EAAA,CAC5C,EAKaC,EAA+C,CAC1D,CAAC,EAAG,SAAS,EACb,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,GAAK,SAAS,EACf,CAAC,EAAG,SAAS,CACf,EAKaC,EAAS,CAQpB,SAAU,OAEV,aAAc,OAEd,UAAW,SACb,EAOaC,EAA6D,CACxE,QAAS,CACP,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,MAAO,CACL,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,KAAM,CACJ,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,KAAM,CACJ,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,MAAO,CACL,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,IAAK,CACH,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,CAEjB,EAKaC,EAAqB,CAEhC,iBAAkB,IAElB,eAAgB,IAEhB,sBAAuB,IAEvB,oBAAqB,KAErB,0BAA2B,KAC3B,4BAA6B,KAE7B,gBAAiB,GAEjB,oBAAqB,IAKrB,WAAY,GACZ,aAAc,GACd,cAAe,GACf,YAAa,GAEb,gBAAiB,IAGjB,uBAAwB,IACxB,oBAAqB,GACvB"}
+{"version":3,"file":"constants.cjs","sources":["../../../../src/components/charts/PlateMap/constants.ts"],"sourcesContent":["import {\n  PLATE_FORMAT_96,\n  PLATE_FORMAT_384,\n  PLATE_FORMAT_1536,\n} from \"./types\";\n\nimport {\n  CHART_COLORS,\n  CHART_DIVERGING,\n  toPlotlyColorscale,\n} from \"@/utils/colors\";\n\n/**\n * Default category colors for well types in categorical visualization mode.\n * Override these by passing custom colors via the `categoryColors` prop.\n */\nexport const DEFAULT_CATEGORY_COLORS: Record<string, string> = {\n  sample: CHART_COLORS[0], // Blue\n  control: CHART_COLORS[3], // Red\n  empty: \"#f0f0f0\", // Light gray\n};\n\n/**\n * Plate dimension configurations\n */\nexport const PLATE_CONFIGS: Record<\n  typeof PLATE_FORMAT_96 | typeof PLATE_FORMAT_384 | typeof PLATE_FORMAT_1536,\n  { rows: number; columns: number }\n> = {\n  [PLATE_FORMAT_96]: { rows: 8, columns: 12 },\n  [PLATE_FORMAT_384]: { rows: 16, columns: 24 },\n  [PLATE_FORMAT_1536]: { rows: 32, columns: 48 },\n};\n\n/**\n * Default color scale (CVD-friendly blue → orange diverging ramp\n * suitable for plate data)\n */\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> =\n  toPlotlyColorscale(CHART_DIVERGING.blueOrange);\n\n/**\n * UI color constants for PlateMap component styling\n */\nexport const COLORS = {\n  /** Primary blue color for active states */\n  primary: CHART_COLORS[0],\n  /** White background */\n  white: \"#fff\",\n  /** Light gray for borders */\n  borderLight: \"#ccc\",\n  /** Dark gray for text */\n  textDark: \"#333\",\n  /** Default region border color */\n  regionBorder: \"#000\",\n  /** Default empty well color (light gray) */\n  emptyWell: \"#f0f0f0\",\n} as const;\n\n/**\n * Named Plotly colorscales converted to array format.\n * Used to extend colorscales with emptyWellColor when there are null values.\n * Reference: https://plotly.com/javascript/colorscales/\n */\nexport const NAMED_COLORSCALES: Record<string, Array<[number, string]>> = {\n  Viridis: [\n    [0, \"#440154\"],\n    [0.25, \"#414487\"],\n    [0.5, \"#2a788e\"],\n    [0.75, \"#22a884\"],\n    [1, \"#7ad151\"],\n  ],\n  Blues: [\n    [0, \"#f7fbff\"],\n    [0.25, \"#c6dbef\"],\n    [0.5, \"#6baed6\"],\n    [0.75, \"#2171b5\"],\n    [1, \"#08306b\"],\n  ],\n  RdBu: [\n    [0, \"#67001f\"],\n    [0.25, \"#d6604d\"],\n    [0.5, \"#f7f7f7\"],\n    [0.75, \"#4393c3\"],\n    [1, \"#053061\"],\n  ],\n  Greens: [\n    [0, \"#f7fcf5\"],\n    [0.25, \"#c7e9c0\"],\n    [0.5, \"#74c476\"],\n    [0.75, \"#238b45\"],\n    [1, \"#00441b\"],\n  ],\n  Reds: [\n    [0, \"#fff5f0\"],\n    [0.25, \"#fcbba1\"],\n    [0.5, \"#fb6a4a\"],\n    [0.75, \"#cb181d\"],\n    [1, \"#67000d\"],\n  ],\n  Greys: [\n    [0, \"#ffffff\"],\n    [0.25, \"#d9d9d9\"],\n    [0.5, \"#969696\"],\n    [0.75, \"#525252\"],\n    [1, \"#000000\"],\n  ],\n  Hot: [\n    [0, \"#000000\"],\n    [0.33, \"#e60000\"],\n    [0.66, \"#ffff00\"],\n    [1, \"#ffffff\"],\n  ],\n  YlGnBu: [\n    [0, \"#ffffd9\"],\n    [0.25, \"#c7e9b4\"],\n    [0.5, \"#41b6c4\"],\n    [0.75, \"#225ea8\"],\n    [1, \"#081d58\"],\n  ],\n  YlOrRd: [\n    [0, \"#ffffcc\"],\n    [0.25, \"#fed976\"],\n    [0.5, \"#fd8d3c\"],\n    [0.75, \"#e31a1c\"],\n    [1, \"#800026\"],\n  ],\n  Plasma: [\n    [0, \"#0d0887\"],\n    [0.25, \"#7e03a8\"],\n    [0.5, \"#cc4778\"],\n    [0.75, \"#f89540\"],\n    [1, \"#f0f921\"],\n  ],\n};\n\n/**\n * Numeric constants for PlateMap calculations and layout\n */\nexport const PLATEMAP_CONSTANTS = {\n  /** Maximum random data value for demonstration */\n  MAX_RANDOM_VALUE: 50000,\n  /** Sentinel value ratio for empty wells below data range */\n  SENTINEL_RATIO: 0.01,\n  /** Color scale data start ratio for extended scales */\n  COLOR_SCALE_THRESHOLD: 0.99,\n  /** Small epsilon for color scale band calculations */\n  COLOR_SCALE_EPSILON: 0.001,\n  /** Proportions for multi-value well display */\n  MULTI_VALUE_PRIMARY_RATIO: 0.575,\n  MULTI_VALUE_SECONDARY_RATIO: 0.425,\n  /** Font sizes */\n  FONT_SIZE_LARGE: 11,\n  /** Offset for centering labels */\n  LABEL_CENTER_OFFSET: -0.5,\n  /** Opacity values */\n  HOVER_OPACITY_FAINT: 0.15,\n  HOVER_OPACITY_VISIBLE: 0.85,\n  /** Layout margins */\n  MARGIN_TOP: 70,\n  MARGIN_RIGHT: 50,\n  MARGIN_BOTTOM: 40,\n  MARGIN_LEFT: 80,\n  /** Colorbar dimensions */\n  COLORBAR_LENGTH: 130,\n  COLORBAR_X_OFFSET: 70,\n  /** Domain position constants for legend placement */\n  DOMAIN_COLORBAR_OFFSET: 0.15,\n  DOMAIN_COLORBAR_END: 0.85,\n} as const;\n"],"names":["DEFAULT_CATEGORY_COLORS","CHART_COLORS","PLATE_CONFIGS","PLATE_FORMAT_96","PLATE_FORMAT_384","PLATE_FORMAT_1536","DEFAULT_COLOR_SCALE","toPlotlyColorscale","CHART_DIVERGING","COLORS","NAMED_COLORSCALES","PLATEMAP_CONSTANTS"],"mappings":"sJAgBaA,EAAkD,CAC7D,OAAQC,EAAAA,aAAa,CAAC,EACtB,QAASA,EAAAA,aAAa,CAAC,EACvB,MAAO,SACT,EAKaC,EAGT,CACF,CAACC,EAAAA,eAAe,EAAG,CAAE,KAAM,EAAG,QAAS,EAAA,EACvC,CAACC,EAAAA,gBAAgB,EAAG,CAAE,KAAM,GAAI,QAAS,EAAA,EACzC,CAACC,EAAAA,iBAAiB,EAAG,CAAE,KAAM,GAAI,QAAS,EAAA,CAC5C,EAMaC,EACXC,EAAAA,mBAAmBC,EAAAA,gBAAgB,UAAU,EAKlCC,EAAS,CAEpB,QAASR,EAAAA,aAAa,CAAC,EAMvB,SAAU,OAEV,aAAc,OAEd,UAAW,SACb,EAOaS,EAA6D,CACxE,QAAS,CACP,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,MAAO,CACL,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,KAAM,CACJ,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,KAAM,CACJ,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,MAAO,CACL,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,IAAK,CACH,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,EAEf,OAAQ,CACN,CAAC,EAAG,SAAS,EACb,CAAC,IAAM,SAAS,EAChB,CAAC,GAAK,SAAS,EACf,CAAC,IAAM,SAAS,EAChB,CAAC,EAAG,SAAS,CAAA,CAEjB,EAKaC,EAAqB,CAEhC,iBAAkB,IAElB,eAAgB,IAEhB,sBAAuB,IAEvB,oBAAqB,KAErB,0BAA2B,KAC3B,4BAA6B,KAE7B,gBAAiB,GAEjB,oBAAqB,IAKrB,WAAY,GACZ,aAAc,GACd,cAAe,GACf,YAAa,GAEb,gBAAiB,IAGjB,uBAAwB,IACxB,oBAAqB,GACvB"}

package/dist/components/charts/PlateMap/constants.js

@@ -1,35 +1,26 @@
-import { PLATE_FORMAT_1536 as f, PLATE_FORMAT_384 as O, PLATE_FORMAT_96 as A } from "./types.js";
-const R = {
-  sample: "#4575b4",
+import { PLATE_FORMAT_1536 as O, PLATE_FORMAT_384 as A, PLATE_FORMAT_96 as _ } from "./types.js";
+import { CHART_COLORS as f, toPlotlyColorscale as R, CHART_DIVERGING as L } from "../../../utils/colors.js";
+const e = {
+  sample: f[0],
   // Blue
-  control: "#d73027",
+  control: f[3],
   // Red
   empty: "#f0f0f0"
   // Light gray
-}, L = {
-  [A]: { rows: 8, columns: 12 },
-  [O]: { rows: 16, columns: 24 },
-  [f]: { rows: 32, columns: 48 }
-}, E = [
-  [0, "#313695"],
-  [0.1, "#4575b4"],
-  [0.2, "#74add1"],
-  [0.3, "#abd9e9"],
-  [0.4, "#e0f3f8"],
-  [0.5, "#ffffbf"],
-  [0.6, "#fee090"],
-  [0.7, "#fdae61"],
-  [0.8, "#f46d43"],
-  [0.9, "#d73027"],
-  [1, "#a50026"]
-], e = {
+}, c = {
+  [_]: { rows: 8, columns: 12 },
+  [A]: { rows: 16, columns: 24 },
+  [O]: { rows: 32, columns: 48 }
+}, o = R(L.blueOrange), C = {
+  /** Primary blue color for active states */
+  primary: f[0],
   /** Dark gray for text */
   textDark: "#333",
   /** Default region border color */
   regionBorder: "#000",
   /** Default empty well color (light gray) */
   emptyWell: "#f0f0f0"
-}, T = {
+}, d = {
   Viridis: [
     [0, "#440154"],
     [0.25, "#414487"],
@@ -99,7 +90,7 @@ const R = {
     [0.75, "#f89540"],
     [1, "#f0f921"]
   ]
-}, d = {
+}, r = {
   /** Maximum random data value for demonstration */
   MAX_RANDOM_VALUE: 5e4,
   /** Sentinel value ratio for empty wells below data range */
@@ -127,11 +118,11 @@ const R = {
   DOMAIN_COLORBAR_END: 0.85
 };
 export {
-  e as COLORS,
-  R as DEFAULT_CATEGORY_COLORS,
-  E as DEFAULT_COLOR_SCALE,
-  T as NAMED_COLORSCALES,
-  d as PLATEMAP_CONSTANTS,
-  L as PLATE_CONFIGS
+  C as COLORS,
+  e as DEFAULT_CATEGORY_COLORS,
+  o as DEFAULT_COLOR_SCALE,
+  d as NAMED_COLORSCALES,
+  r as PLATEMAP_CONSTANTS,
+  c as PLATE_CONFIGS
 };
 //# sourceMappingURL=constants.js.map

package/dist/components/charts/PlateMap/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/charts/PlateMap/constants.ts"],"sourcesContent":["import {\n  PLATE_FORMAT_96,\n  PLATE_FORMAT_384,\n  PLATE_FORMAT_1536,\n} from \"./types\";\n\n/**\n * Default category colors for well types in categorical visualization mode.\n * Override these by passing custom colors via the `categoryColors` prop.\n */\nexport const DEFAULT_CATEGORY_COLORS: Record<string, string> = {\n  sample: \"#4575b4\", // Blue\n  control: \"#d73027\", // Red\n  empty: \"#f0f0f0\", // Light gray\n};\n\n/**\n * Plate dimension configurations\n */\nexport const PLATE_CONFIGS: Record<\n  typeof PLATE_FORMAT_96 | typeof PLATE_FORMAT_384 | typeof PLATE_FORMAT_1536,\n  { rows: number; columns: number }\n> = {\n  [PLATE_FORMAT_96]: { rows: 8, columns: 12 },\n  [PLATE_FORMAT_384]: { rows: 16, columns: 24 },\n  [PLATE_FORMAT_1536]: { rows: 32, columns: 48 },\n};\n\n/**\n * Default color scale (blue to red gradient suitable for plate data)\n */\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> = [\n  [0, \"#313695\"],\n  [0.1, \"#4575b4\"],\n  [0.2, \"#74add1\"],\n  [0.3, \"#abd9e9\"],\n  [0.4, \"#e0f3f8\"],\n  [0.5, \"#ffffbf\"],\n  [0.6, \"#fee090\"],\n  [0.7, \"#fdae61\"],\n  [0.8, \"#f46d43\"],\n  [0.9, \"#d73027\"],\n  [1, \"#a50026\"],\n];\n\n/**\n * UI color constants for PlateMap component styling\n */\nexport const COLORS = {\n  /** Primary blue color for active states */\n  primary: \"#4575b4\",\n  /** White background */\n  white: \"#fff\",\n  /** Light gray for borders */\n  borderLight: \"#ccc\",\n  /** Dark gray for text */\n  textDark: \"#333\",\n  /** Default region border color */\n  regionBorder: \"#000\",\n  /** Default empty well color (light gray) */\n  emptyWell: \"#f0f0f0\",\n} as const;\n\n/**\n * Named Plotly colorscales converted to array format.\n * Used to extend colorscales with emptyWellColor when there are null values.\n * Reference: https://plotly.com/javascript/colorscales/\n */\nexport const NAMED_COLORSCALES: Record<string, Array<[number, string]>> = {\n  Viridis: [\n    [0, \"#440154\"],\n    [0.25, \"#414487\"],\n    [0.5, \"#2a788e\"],\n    [0.75, \"#22a884\"],\n    [1, \"#7ad151\"],\n  ],\n  Blues: [\n    [0, \"#f7fbff\"],\n    [0.25, \"#c6dbef\"],\n    [0.5, \"#6baed6\"],\n    [0.75, \"#2171b5\"],\n    [1, \"#08306b\"],\n  ],\n  RdBu: [\n    [0, \"#67001f\"],\n    [0.25, \"#d6604d\"],\n    [0.5, \"#f7f7f7\"],\n    [0.75, \"#4393c3\"],\n    [1, \"#053061\"],\n  ],\n  Greens: [\n    [0, \"#f7fcf5\"],\n    [0.25, \"#c7e9c0\"],\n    [0.5, \"#74c476\"],\n    [0.75, \"#238b45\"],\n    [1, \"#00441b\"],\n  ],\n  Reds: [\n    [0, \"#fff5f0\"],\n    [0.25, \"#fcbba1\"],\n    [0.5, \"#fb6a4a\"],\n    [0.75, \"#cb181d\"],\n    [1, \"#67000d\"],\n  ],\n  Greys: [\n    [0, \"#ffffff\"],\n    [0.25, \"#d9d9d9\"],\n    [0.5, \"#969696\"],\n    [0.75, \"#525252\"],\n    [1, \"#000000\"],\n  ],\n  Hot: [\n    [0, \"#000000\"],\n    [0.33, \"#e60000\"],\n    [0.66, \"#ffff00\"],\n    [1, \"#ffffff\"],\n  ],\n  YlGnBu: [\n    [0, \"#ffffd9\"],\n    [0.25, \"#c7e9b4\"],\n    [0.5, \"#41b6c4\"],\n    [0.75, \"#225ea8\"],\n    [1, \"#081d58\"],\n  ],\n  YlOrRd: [\n    [0, \"#ffffcc\"],\n    [0.25, \"#fed976\"],\n    [0.5, \"#fd8d3c\"],\n    [0.75, \"#e31a1c\"],\n    [1, \"#800026\"],\n  ],\n  Plasma: [\n    [0, \"#0d0887\"],\n    [0.25, \"#7e03a8\"],\n    [0.5, \"#cc4778\"],\n    [0.75, \"#f89540\"],\n    [1, \"#f0f921\"],\n  ],\n};\n\n/**\n * Numeric constants for PlateMap calculations and layout\n */\nexport const PLATEMAP_CONSTANTS = {\n  /** Maximum random data value for demonstration */\n  MAX_RANDOM_VALUE: 50000,\n  /** Sentinel value ratio for empty wells below data range */\n  SENTINEL_RATIO: 0.01,\n  /** Color scale data start ratio for extended scales */\n  COLOR_SCALE_THRESHOLD: 0.99,\n  /** Small epsilon for color scale band calculations */\n  COLOR_SCALE_EPSILON: 0.001,\n  /** Proportions for multi-value well display */\n  MULTI_VALUE_PRIMARY_RATIO: 0.575,\n  MULTI_VALUE_SECONDARY_RATIO: 0.425,\n  /** Font sizes */\n  FONT_SIZE_LARGE: 11,\n  /** Offset for centering labels */\n  LABEL_CENTER_OFFSET: -0.5,\n  /** Opacity values */\n  HOVER_OPACITY_FAINT: 0.15,\n  HOVER_OPACITY_VISIBLE: 0.85,\n  /** Layout margins */\n  MARGIN_TOP: 70,\n  MARGIN_RIGHT: 50,\n  MARGIN_BOTTOM: 40,\n  MARGIN_LEFT: 80,\n  /** Colorbar dimensions */\n  COLORBAR_LENGTH: 130,\n  COLORBAR_X_OFFSET: 70,\n  /** Domain position constants for legend placement */\n  DOMAIN_COLORBAR_OFFSET: 0.15,\n  DOMAIN_COLORBAR_END: 0.85,\n} as const;\n"],"names":["DEFAULT_CATEGORY_COLORS","PLATE_CONFIGS","PLATE_FORMAT_96","PLATE_FORMAT_384","PLATE_FORMAT_1536","DEFAULT_COLOR_SCALE","COLORS","NAMED_COLORSCALES","PLATEMAP_CONSTANTS"],"mappings":"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"}
+{"version":3,"file":"constants.js","sources":["../../../../src/components/charts/PlateMap/constants.ts"],"sourcesContent":["import {\n  PLATE_FORMAT_96,\n  PLATE_FORMAT_384,\n  PLATE_FORMAT_1536,\n} from \"./types\";\n\nimport {\n  CHART_COLORS,\n  CHART_DIVERGING,\n  toPlotlyColorscale,\n} from \"@/utils/colors\";\n\n/**\n * Default category colors for well types in categorical visualization mode.\n * Override these by passing custom colors via the `categoryColors` prop.\n */\nexport const DEFAULT_CATEGORY_COLORS: Record<string, string> = {\n  sample: CHART_COLORS[0], // Blue\n  control: CHART_COLORS[3], // Red\n  empty: \"#f0f0f0\", // Light gray\n};\n\n/**\n * Plate dimension configurations\n */\nexport const PLATE_CONFIGS: Record<\n  typeof PLATE_FORMAT_96 | typeof PLATE_FORMAT_384 | typeof PLATE_FORMAT_1536,\n  { rows: number; columns: number }\n> = {\n  [PLATE_FORMAT_96]: { rows: 8, columns: 12 },\n  [PLATE_FORMAT_384]: { rows: 16, columns: 24 },\n  [PLATE_FORMAT_1536]: { rows: 32, columns: 48 },\n};\n\n/**\n * Default color scale (CVD-friendly blue → orange diverging ramp\n * suitable for plate data)\n */\nexport const DEFAULT_COLOR_SCALE: Array<[number, string]> =\n  toPlotlyColorscale(CHART_DIVERGING.blueOrange);\n\n/**\n * UI color constants for PlateMap component styling\n */\nexport const COLORS = {\n  /** Primary blue color for active states */\n  primary: CHART_COLORS[0],\n  /** White background */\n  white: \"#fff\",\n  /** Light gray for borders */\n  borderLight: \"#ccc\",\n  /** Dark gray for text */\n  textDark: \"#333\",\n  /** Default region border color */\n  regionBorder: \"#000\",\n  /** Default empty well color (light gray) */\n  emptyWell: \"#f0f0f0\",\n} as const;\n\n/**\n * Named Plotly colorscales converted to array format.\n * Used to extend colorscales with emptyWellColor when there are null values.\n * Reference: https://plotly.com/javascript/colorscales/\n */\nexport const NAMED_COLORSCALES: Record<string, Array<[number, string]>> = {\n  Viridis: [\n    [0, \"#440154\"],\n    [0.25, \"#414487\"],\n    [0.5, \"#2a788e\"],\n    [0.75, \"#22a884\"],\n    [1, \"#7ad151\"],\n  ],\n  Blues: [\n    [0, \"#f7fbff\"],\n    [0.25, \"#c6dbef\"],\n    [0.5, \"#6baed6\"],\n    [0.75, \"#2171b5\"],\n    [1, \"#08306b\"],\n  ],\n  RdBu: [\n    [0, \"#67001f\"],\n    [0.25, \"#d6604d\"],\n    [0.5, \"#f7f7f7\"],\n    [0.75, \"#4393c3\"],\n    [1, \"#053061\"],\n  ],\n  Greens: [\n    [0, \"#f7fcf5\"],\n    [0.25, \"#c7e9c0\"],\n    [0.5, \"#74c476\"],\n    [0.75, \"#238b45\"],\n    [1, \"#00441b\"],\n  ],\n  Reds: [\n    [0, \"#fff5f0\"],\n    [0.25, \"#fcbba1\"],\n    [0.5, \"#fb6a4a\"],\n    [0.75, \"#cb181d\"],\n    [1, \"#67000d\"],\n  ],\n  Greys: [\n    [0, \"#ffffff\"],\n    [0.25, \"#d9d9d9\"],\n    [0.5, \"#969696\"],\n    [0.75, \"#525252\"],\n    [1, \"#000000\"],\n  ],\n  Hot: [\n    [0, \"#000000\"],\n    [0.33, \"#e60000\"],\n    [0.66, \"#ffff00\"],\n    [1, \"#ffffff\"],\n  ],\n  YlGnBu: [\n    [0, \"#ffffd9\"],\n    [0.25, \"#c7e9b4\"],\n    [0.5, \"#41b6c4\"],\n    [0.75, \"#225ea8\"],\n    [1, \"#081d58\"],\n  ],\n  YlOrRd: [\n    [0, \"#ffffcc\"],\n    [0.25, \"#fed976\"],\n    [0.5, \"#fd8d3c\"],\n    [0.75, \"#e31a1c\"],\n    [1, \"#800026\"],\n  ],\n  Plasma: [\n    [0, \"#0d0887\"],\n    [0.25, \"#7e03a8\"],\n    [0.5, \"#cc4778\"],\n    [0.75, \"#f89540\"],\n    [1, \"#f0f921\"],\n  ],\n};\n\n/**\n * Numeric constants for PlateMap calculations and layout\n */\nexport const PLATEMAP_CONSTANTS = {\n  /** Maximum random data value for demonstration */\n  MAX_RANDOM_VALUE: 50000,\n  /** Sentinel value ratio for empty wells below data range */\n  SENTINEL_RATIO: 0.01,\n  /** Color scale data start ratio for extended scales */\n  COLOR_SCALE_THRESHOLD: 0.99,\n  /** Small epsilon for color scale band calculations */\n  COLOR_SCALE_EPSILON: 0.001,\n  /** Proportions for multi-value well display */\n  MULTI_VALUE_PRIMARY_RATIO: 0.575,\n  MULTI_VALUE_SECONDARY_RATIO: 0.425,\n  /** Font sizes */\n  FONT_SIZE_LARGE: 11,\n  /** Offset for centering labels */\n  LABEL_CENTER_OFFSET: -0.5,\n  /** Opacity values */\n  HOVER_OPACITY_FAINT: 0.15,\n  HOVER_OPACITY_VISIBLE: 0.85,\n  /** Layout margins */\n  MARGIN_TOP: 70,\n  MARGIN_RIGHT: 50,\n  MARGIN_BOTTOM: 40,\n  MARGIN_LEFT: 80,\n  /** Colorbar dimensions */\n  COLORBAR_LENGTH: 130,\n  COLORBAR_X_OFFSET: 70,\n  /** Domain position constants for legend placement */\n  DOMAIN_COLORBAR_OFFSET: 0.15,\n  DOMAIN_COLORBAR_END: 0.85,\n} as const;\n"],"names":["DEFAULT_CATEGORY_COLORS","CHART_COLORS","PLATE_CONFIGS","PLATE_FORMAT_96","PLATE_FORMAT_384","PLATE_FORMAT_1536","DEFAULT_COLOR_SCALE","toPlotlyColorscale","CHART_DIVERGING","COLORS","NAMED_COLORSCALES","PLATEMAP_CONSTANTS"],"mappings":"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"}

package/dist/components/charts/ScatterGraph/ScatterGraph.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react/jsx-runtime"),A=require("plotly.js-dist"),n=require("react"),_=require("../../../hooks/use-plotly-theme.cjs"),S=({dataSeries:u,width:y=1e3,height:k=600,xRange:a,yRange:m,xTitle:p="Columns",yTitle:d="Rows",title:w="Scatter Plot"})=>{const h=n.useRef(null),t=_.usePlotlyTheme(),{xMin:b,xMax:v,yMin:C,yMax:E}=n.useMemo(()=>{let r=Number.MAX_VALUE,e=Number.MIN_VALUE,s=Number.MAX_VALUE,o=Number.MIN_VALUE;u.forEach(z=>{z.x.forEach(f=>{r=Math.min(r,f),e=Math.max(e,f)}),z.y.forEach(f=>{s=Math.min(s,f),o=Math.max(o,f)})});const i=(e-r)*.1,P=(o-s)*.1;return{xMin:r-i,xMax:e+i,yMin:s-P,yMax:o+P}},[u]),c=n.useMemo(()=>a||[b,v],[a,b,v]),l=n.useMemo(()=>m||[C,E],[m,C,E]),M=n.useMemo(()=>{const r=c[1]-c[0];let e=Math.pow(10,Math.floor(Math.log10(r)));r/e>10&&(e=e*2),r/e<4&&(e=e/2);const s=[];let o=Math.ceil(c[0]/e)*e;for(;o<=c[1];)s.push(o),o+=e;return s},[c]),I=n.useMemo(()=>{const r=l[1]-l[0];let e=Math.pow(10,Math.floor(Math.log10(r)));r/e>10&&(e=e*2),r/e<4&&(e=e/2);const s=[];let o=Math.ceil(l[0]/e)*e;for(;o<=l[1];)s.push(o),o+=e;return s},[l]),g=n.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]),x=n.useMemo(()=>({showspikes:!0,spikemode:"across",spikedash:"solid",spikecolor:t.spikeColor,spikethickness:2}),[t]);return n.useEffect(()=>{if(!h.current)return;const r=u.map(i=>({x:i.x,y:i.y,type:"scatter",mode:"markers",name:i.name,marker:{color:i.color,size:10,symbol:"circle"},hovertemplate:`${p}: %{x}<br>${d}: %{y}<extra>${i.name}</extra>`})),e={title:{text:w,font:{size:32,family:"Inter, sans-serif",color:t.textColor}},width:y,height:k,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:p,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:32},gridcolor:t.gridColor,range:a,autorange:!a,tickmode:"array",tickvals:M,ticktext:M.map(String),showgrid:!0,...x,...g},yaxis:{title:{text:d,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:30},gridcolor:t.gridColor,range:m,autorange:!m,tickmode:"array",tickvals:I,showgrid:!0,...x,...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,hovermode:"closest"},s={responsive:!0,displayModeBar:!1,displaylogo:!1};A.newPlot(h.current,r,e,s);const o=h.current;return()=>{o&&A.purge(o)}},[u,y,k,a,m,p,d,w,c,l,M,I,g,x,t]),N.jsx("div",{className:"chart-container",children:N.jsx("div",{ref:h,style:{width:"100%",height:"100%"}})})};exports.ScatterGraph=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react/jsx-runtime"),A=require("plotly.js-dist"),n=require("react"),_=require("../../../hooks/use-plotly-theme.cjs"),q=require("../../../utils/colors.cjs"),S=({dataSeries:f,width:k=1e3,height:w=600,xRange:a,yRange:m,xTitle:d="Columns",yTitle:M="Rows",title:b="Scatter Plot"})=>{const h=n.useRef(null),t=_.usePlotlyTheme(),{xMin:v,xMax:C,yMin:E,yMax:I}=n.useMemo(()=>{let r=Number.MAX_VALUE,e=Number.MIN_VALUE,s=Number.MAX_VALUE,o=Number.MIN_VALUE;f.forEach(z=>{z.x.forEach(u=>{r=Math.min(r,u),e=Math.max(e,u)}),z.y.forEach(u=>{s=Math.min(s,u),o=Math.max(o,u)})});const i=(e-r)*.1,p=(o-s)*.1;return{xMin:r-i,xMax:e+i,yMin:s-p,yMax:o+p}},[f]),c=n.useMemo(()=>a||[v,C],[a,v,C]),l=n.useMemo(()=>m||[E,I],[m,E,I]),g=n.useMemo(()=>{const r=c[1]-c[0];let e=Math.pow(10,Math.floor(Math.log10(r)));r/e>10&&(e=e*2),r/e<4&&(e=e/2);const s=[];let o=Math.ceil(c[0]/e)*e;for(;o<=c[1];)s.push(o),o+=e;return s},[c]),P=n.useMemo(()=>{const r=l[1]-l[0];let e=Math.pow(10,Math.floor(Math.log10(r)));r/e>10&&(e=e*2),r/e<4&&(e=e/2);const s=[];let o=Math.ceil(l[0]/e)*e;for(;o<=l[1];)s.push(o),o+=e;return s},[l]),x=n.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]),y=n.useMemo(()=>({showspikes:!0,spikemode:"across",spikedash:"solid",spikecolor:t.spikeColor,spikethickness:2}),[t]);return n.useEffect(()=>{if(!h.current)return;const r=f.map((i,p)=>({x:i.x,y:i.y,type:"scatter",mode:"markers",name:i.name,marker:{color:q.seriesColor(p,i.color),size:10,symbol:"circle"},hovertemplate:`${d}: %{x}<br>${M}: %{y}<extra>${i.name}</extra>`})),e={title:{text:b,font:{size:32,family:"Inter, sans-serif",color:t.textColor}},width:k,height:w,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:d,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:32},gridcolor:t.gridColor,range:a,autorange:!a,tickmode:"array",tickvals:g,ticktext:g.map(String),showgrid:!0,...y,...x},yaxis:{title:{text:M,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:30},gridcolor:t.gridColor,range:m,autorange:!m,tickmode:"array",tickvals:P,showgrid:!0,...y,...x},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,hovermode:"closest"},s={responsive:!0,displayModeBar:!1,displaylogo:!1};A.newPlot(h.current,r,e,s);const o=h.current;return()=>{o&&A.purge(o)}},[f,k,w,a,m,d,M,b,c,l,g,P,x,y,t]),N.jsx("div",{className:"chart-container",children:N.jsx("div",{ref:h,style:{width:"100%",height:"100%"}})})};exports.ScatterGraph=S;
 //# sourceMappingURL=ScatterGraph.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScatterGraph.cjs","sources":["../../../../src/components/charts/ScatterGraph/ScatterGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\ninterface ScatterDataPoint {\n  x: number;\n  y: number;\n  additionalInfo?: Record<string, string | number>;\n}\n\ninterface ScatterDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  color: string;\n}\n\ninterface ScatterGraphProps {\n  dataSeries: ScatterDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst ScatterGraph: React.FC<ScatterGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Scatter Plot\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const { xMin, xMax, 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 effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\n  );\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(() => {\n    const range = effectiveXRange[1] - effectiveXRange[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(effectiveXRange[0] / step) * step;\n    while (current <= effectiveXRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveXRange]);\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 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 spikeOptions = useMemo(\n    () => ({\n      showspikes: true,\n      spikemode: \"across\" as const,\n      spikedash: \"solid\" as const,\n      spikecolor: theme.spikeColor,\n      spikethickness: 2,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = dataSeries.map((series) => ({\n      x: series.x,\n      y: series.y,\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      name: series.name,\n      marker: {\n        color: series.color,\n        size: 10,\n        symbol: \"circle\" as const,\n      },\n      hovertemplate: `${xTitle}: %{x}<br>${yTitle}: %{y}<extra>${series.name}</extra>`,\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        ...spikeOptions,\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        ...spikeOptions,\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      hovermode: \"closest\" as const,\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, effectiveXRange, effectiveYRange, xTicks, yTicks, tickOptions, spikeOptions, theme]);\n\n  return (\n    <div className=\"chart-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { ScatterGraph };\nexport type { ScatterDataPoint, ScatterDataSeries, ScatterGraphProps };\n"],"names":["ScatterGraph","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","spikeOptions","useEffect","plotData","layout","config","Plotly","plotElement","jsx"],"mappings":"qNA6BMA,EAA4C,CAAC,CACjD,WAAAC,EACA,MAAAC,EAAQ,IACR,OAAAC,EAAS,IACT,OAAAC,EACA,OAAAC,EACA,OAAAC,EAAS,UACT,OAAAC,EAAS,OACT,MAAAC,EAAQ,cACV,IAAM,CACJ,MAAMC,EAAUC,EAAAA,OAAuB,IAAI,EACrCC,EAAQC,EAAAA,eAAA,EAER,CAAE,KAAAC,EAAM,KAAAC,EAAM,KAAAC,EAAM,KAAAC,CAAA,EAASC,EAAAA,QAAQ,IAAM,CAC/C,IAAIC,EAAO,OAAO,UACdC,EAAO,OAAO,UACdC,EAAO,OAAO,UACdC,EAAO,OAAO,UAElBpB,EAAW,QAASqB,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,CAACzB,CAAU,CAAC,EAET0B,EAAkBV,EAAAA,QACtB,IAAMb,GAAU,CAACS,EAAMC,CAAI,EAC3B,CAACV,EAAQS,EAAMC,CAAI,CAAA,EAGfc,EAAkBX,EAAAA,QACtB,IAAMZ,GAAU,CAACU,EAAMC,CAAI,EAC3B,CAACX,EAAQU,EAAMC,CAAI,CAAA,EAGfa,EAASZ,EAAAA,QAAQ,IAAM,CAC3B,MAAMa,EAAQH,EAAgB,CAAC,EAAIA,EAAgB,CAAC,EACpD,IAAII,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,KAAKN,EAAgB,CAAC,EAAII,CAAI,EAAIA,EACrD,KAAOE,GAAWN,EAAgB,CAAC,GACjCK,EAAM,KAAKC,CAAO,EAClBA,GAAWF,EAEb,OAAOC,CACT,EAAG,CAACL,CAAe,CAAC,EAEdO,EAASjB,EAAAA,QAAQ,IAAM,CAC3B,MAAMa,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,EAEdO,EAAclB,EAAAA,QAClB,KAAO,CACL,UAAWN,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,EAGFyB,EAAenB,EAAAA,QACnB,KAAO,CACL,WAAY,GACZ,UAAW,SACX,UAAW,QACX,WAAYN,EAAM,WAClB,eAAgB,CAAA,GAElB,CAACA,CAAK,CAAA,EAGR0B,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAAC5B,EAAQ,QAAS,OAEtB,MAAM6B,EAAWrC,EAAW,IAAKqB,IAAY,CAC3C,EAAGA,EAAO,EACV,EAAGA,EAAO,EACV,KAAM,UACN,KAAM,UACN,KAAMA,EAAO,KACb,OAAQ,CACN,MAAOA,EAAO,MACd,KAAM,GACN,OAAQ,QAAA,EAEV,cAAe,GAAGhB,CAAM,aAAaC,CAAM,gBAAgBe,EAAO,IAAI,UAAA,EACtE,EAEIiB,EAAS,CACb,MAAO,CACL,KAAM/B,EACN,KAAM,CACJ,KAAM,GACN,OAAQ,oBACR,MAAOG,EAAM,SAAA,CACf,EAEF,MAAAT,EACA,OAAAC,EACA,OAAQ,CAAE,EAAG,GAAI,EAAG,GAAI,EAAG,GAAI,EAAG,GAAI,IAAK,EAAA,EAC3C,cAAeQ,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,MAAOP,EACP,UAAW,CAACA,EACZ,SAAU,QACV,SAAUyB,EACV,SAAUA,EAAO,IAAI,MAAM,EAC3B,SAAU,GACV,GAAGO,EACH,GAAGD,CAAA,EAEL,MAAO,CACL,MAAO,CACL,KAAM5B,EACN,KAAM,CACJ,KAAM,GACN,MAAOI,EAAM,cACb,OAAQ,oBACR,OAAQ,GAAA,EAEV,SAAU,EAAA,EAEZ,UAAWA,EAAM,UACjB,MAAON,EACP,UAAW,CAACA,EACZ,SAAU,QACV,SAAU6B,EACV,SAAU,GACV,GAAGE,EACH,GAAGD,CAAA,EAEL,OAAQ,CACN,EAAG,GACH,EAAG,IACH,QAAS,SACT,QAAS,MACT,YAAa,IACb,KAAM,CACJ,KAAM,GACN,MAAOxB,EAAM,YACb,OAAQ,oBACR,OAAQ,GAAA,CACV,EAEF,WAAY,GACZ,UAAW,SAAA,EAGP6B,EAAS,CACb,WAAY,GACZ,eAAgB,GAChB,YAAa,EAAA,EAGfC,EAAO,QAAQhC,EAAQ,QAAS6B,EAAUC,EAAQC,CAAM,EAGxD,MAAME,EAAcjC,EAAQ,QAE5B,MAAO,IAAM,CACPiC,GACFD,EAAO,MAAMC,CAAW,CAE5B,CACF,EAAG,CAACzC,EAAYC,EAAOC,EAAQC,EAAQC,EAAQC,EAAQC,EAAQC,EAAOmB,EAAiBC,EAAiBC,EAAQK,EAAQC,EAAaC,EAAczB,CAAK,CAAC,EAGvJgC,EAAAA,IAAC,MAAA,CAAI,UAAU,kBACb,eAAC,MAAA,CAAI,IAAKlC,EAAS,MAAO,CAAE,MAAO,OAAQ,OAAQ,MAAA,EAAU,EAC/D,CAEJ"}
+{"version":3,"file":"ScatterGraph.cjs","sources":["../../../../src/components/charts/ScatterGraph/ScatterGraph.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\ninterface ScatterDataPoint {\n  x: number;\n  y: number;\n  additionalInfo?: Record<string, string | number>;\n}\n\ninterface ScatterDataSeries {\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}\n\ninterface ScatterGraphProps {\n  dataSeries: ScatterDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst ScatterGraph: React.FC<ScatterGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Scatter Plot\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const { xMin, xMax, 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 effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\n  );\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(() => {\n    const range = effectiveXRange[1] - effectiveXRange[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(effectiveXRange[0] / step) * step;\n    while (current <= effectiveXRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveXRange]);\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 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 spikeOptions = useMemo(\n    () => ({\n      showspikes: true,\n      spikemode: \"across\" as const,\n      spikedash: \"solid\" as const,\n      spikecolor: theme.spikeColor,\n      spikethickness: 2,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = dataSeries.map((series, index) => ({\n      x: series.x,\n      y: series.y,\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      name: series.name,\n      marker: {\n        color: seriesColor(index, series.color),\n        size: 10,\n        symbol: \"circle\" as const,\n      },\n      hovertemplate: `${xTitle}: %{x}<br>${yTitle}: %{y}<extra>${series.name}</extra>`,\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        ...spikeOptions,\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        ...spikeOptions,\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      hovermode: \"closest\" as const,\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, effectiveXRange, effectiveYRange, xTicks, yTicks, tickOptions, spikeOptions, theme]);\n\n  return (\n    <div className=\"chart-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { ScatterGraph };\nexport type { ScatterDataPoint, ScatterDataSeries, ScatterGraphProps };\n"],"names":["ScatterGraph","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","spikeOptions","useEffect","plotData","index","seriesColor","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}

package/dist/components/charts/ScatterGraph/ScatterGraph.js

@@ -2,39 +2,40 @@ import { jsx as A } from "react/jsx-runtime";
 import P from "plotly.js-dist";
 import { useRef as _, useMemo as s, useEffect as X } from "react";
 import { usePlotlyTheme as L } from "../../../hooks/use-plotly-theme.js";
-const $ = ({
-  dataSeries: h,
-  width: M = 1e3,
-  height: y = 600,
+import { seriesColor as U } from "../../../utils/colors.js";
+const S = ({
+  dataSeries: p,
+  width: y = 1e3,
+  height: w = 600,
   xRange: c,
   yRange: f,
-  xTitle: d = "Columns",
-  yTitle: u = "Rows",
-  title: w = "Scatter Plot"
+  xTitle: u = "Columns",
+  yTitle: x = "Rows",
+  title: C = "Scatter Plot"
 }) => {
-  const p = _(null), o = L(), { xMin: b, xMax: v, yMin: C, yMax: E } = s(() => {
+  const h = _(null), o = L(), { xMin: b, xMax: v, yMin: E, yMax: I } = s(() => {
     let r = Number.MAX_VALUE, t = Number.MIN_VALUE, i = Number.MAX_VALUE, e = Number.MIN_VALUE;
-    h.forEach((N) => {
+    p.forEach((N) => {
       N.x.forEach((m) => {
         r = Math.min(r, m), t = Math.max(t, m);
       }), N.y.forEach((m) => {
         i = Math.min(i, m), e = Math.max(e, m);
       });
     });
-    const n = (t - r) * 0.1, z = (e - i) * 0.1;
+    const n = (t - r) * 0.1, d = (e - i) * 0.1;
     return {
       xMin: r - n,
       xMax: t + n,
-      yMin: i - z,
-      yMax: e + z
+      yMin: i - d,
+      yMax: e + d
     };
-  }, [h]), l = s(
+  }, [p]), l = s(
     () => c || [b, v],
     [c, b, v]
   ), a = s(
-    () => f || [C, E],
-    [f, C, E]
-  ), x = s(() => {
+    () => f || [E, I],
+    [f, E, I]
+  ), g = s(() => {
     const r = l[1] - l[0];
     let t = Math.pow(10, Math.floor(Math.log10(r)));
     r / t > 10 && (t = t * 2), r / t < 4 && (t = t / 2);
@@ -43,7 +44,7 @@ const $ = ({
     for (; e <= l[1]; )
       i.push(e), e += t;
     return i;
-  }, [l]), I = s(() => {
+  }, [l]), z = s(() => {
     const r = a[1] - a[0];
     let t = Math.pow(10, Math.floor(Math.log10(r)));
     r / t > 10 && (t = t * 2), r / t < 4 && (t = t / 2);
@@ -52,7 +53,7 @@ const $ = ({
     for (; e <= a[1]; )
       i.push(e), e += t;
     return i;
-  }, [a]), g = s(
+  }, [a]), k = s(
     () => ({
       tickcolor: o.tickColor,
       ticklen: 12,
@@ -70,7 +71,7 @@ const $ = ({
       zeroline: !1
     }),
     [o]
-  ), k = s(
+  ), M = s(
     () => ({
       showspikes: !0,
       spikemode: "across",
@@ -81,30 +82,30 @@ const $ = ({
     [o]
   );
   return X(() => {
-    if (!p.current) return;
-    const r = h.map((n) => ({
+    if (!h.current) return;
+    const r = p.map((n, d) => ({
       x: n.x,
       y: n.y,
       type: "scatter",
       mode: "markers",
       name: n.name,
       marker: {
-        color: n.color,
+        color: U(d, n.color),
         size: 10,
         symbol: "circle"
       },
-      hovertemplate: `${d}: %{x}<br>${u}: %{y}<extra>${n.name}</extra>`
+      hovertemplate: `${u}: %{x}<br>${x}: %{y}<extra>${n.name}</extra>`
     })), t = {
       title: {
-        text: w,
+        text: C,
         font: {
           size: 32,
           family: "Inter, sans-serif",
           color: o.textColor
         }
       },
-      width: M,
-      height: y,
+      width: y,
+      height: w,
       margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },
       paper_bgcolor: o.paperBg,
       plot_bgcolor: o.plotBg,
@@ -114,7 +115,7 @@ const $ = ({
       dragmode: !1,
       xaxis: {
         title: {
-          text: d,
+          text: u,
           font: {
             size: 16,
             color: o.textSecondary,
@@ -127,15 +128,15 @@ const $ = ({
         range: c,
         autorange: !c,
         tickmode: "array",
-        tickvals: x,
-        ticktext: x.map(String),
+        tickvals: g,
+        ticktext: g.map(String),
         showgrid: !0,
-        ...k,
-        ...g
+        ...M,
+        ...k
       },
       yaxis: {
         title: {
-          text: u,
+          text: x,
           font: {
             size: 16,
             color: o.textSecondary,
@@ -148,10 +149,10 @@ const $ = ({
         range: f,
         autorange: !f,
         tickmode: "array",
-        tickvals: I,
+        tickvals: z,
         showgrid: !0,
-        ...k,
-        ...g
+        ...M,
+        ...k
       },
       legend: {
         x: 0.5,
@@ -173,14 +174,14 @@ const $ = ({
       displayModeBar: !1,
       displaylogo: !1
     };
-    P.newPlot(p.current, r, t, i);
-    const e = p.current;
+    P.newPlot(h.current, r, t, i);
+    const e = h.current;
     return () => {
       e && P.purge(e);
     };
-  }, [h, M, y, c, f, d, u, w, l, a, x, I, g, k, o]), /* @__PURE__ */ A("div", { className: "chart-container", children: /* @__PURE__ */ A("div", { ref: p, style: { width: "100%", height: "100%" } }) });
+  }, [p, y, w, c, f, u, x, C, l, a, g, z, k, M, o]), /* @__PURE__ */ A("div", { className: "chart-container", children: /* @__PURE__ */ A("div", { ref: h, style: { width: "100%", height: "100%" } }) });
 };
 export {
-  $ as ScatterGraph
+  S as ScatterGraph
 };
 //# sourceMappingURL=ScatterGraph.js.map