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

package/README.md

@@ -392,6 +392,61 @@ Visit <http://localhost:6006>.
 - [Theming Guide](./THEMING.md) - Customise the design system
 - [Contributing](./CONTRIBUTING.md#development-setup) - Clone the repo and run `yarn storybook`
 
+## MCP server (for AI coding agents)
+
+This library exposes an [MCP](https://modelcontextprotocol.io/) server so AI
+coding agents (Claude Code, Cursor, Claude Desktop) can query authoritative
+component lists, prop/variant options, and usage examples instead of guessing —
+reducing hallucinated component APIs when scaffolding a data app.
+
+There are two endpoints. Pick whichever fits; you can add both.
+
+| Endpoint | URL | Tools |
+| --- | --- | --- |
+| **Deployed** (no local checkout needed) | `https://ts-lib-ui-kit-storybook.vercel.app/api/mcp` | docs: `list_components`, `get_component`, `search_components` |
+| **Local** (needs `yarn storybook` running) | `http://localhost:6006/mcp` | full set: docs **+** write/preview/test stories |
+
+### Add the connection
+
+**Claude Code** — register the deployed server (HTTP transport):
+
+```bash
+claude mcp add --transport http ts-ui-kit https://ts-lib-ui-kit-storybook.vercel.app/api/mcp
+```
+
+Use `--scope project` to share it with your team via a checked-in `.mcp.json`, or
+`--scope user` to make it available across all your projects. For the local
+server, run `yarn storybook` first, then:
+
+```bash
+claude mcp add --transport http ts-ui-kit-local http://localhost:6006/mcp
+```
+
+**Cursor / Claude Desktop / other clients** — add an HTTP MCP server to the
+client's MCP config (e.g. Cursor's `.cursor/mcp.json`, or Claude Desktop's
+`claude_desktop_config.json`):
+
+```json
+{
+  "mcpServers": {
+    "ts-ui-kit": {
+      "type": "http",
+      "url": "https://ts-lib-ui-kit-storybook.vercel.app/api/mcp"
+    }
+  }
+}
+```
+
+**Any client (generic helper):**
+
+```bash
+npx mcp-add --type http --url "https://ts-lib-ui-kit-storybook.vercel.app/api/mcp"
+```
+
+Then ask your agent something like *"using the ts-ui-kit MCP, list the available
+components"* or *"build a form using ts-ui-kit primitives"* to confirm it's wired
+up.
+
 ## Tech Stack
 
 - React 19

package/dist/components/charts/AreaGraph/AreaGraph.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react/jsx-runtime"),Y=require("plotly.js-dist"),s=require("react"),U=require("../../../hooks/use-plotly-theme.cjs"),j=require("../../../utils/colors.cjs"),V=({dataSeries:f,width:M=1e3,height:x=600,xRange:m,yRange:d,variant:y="normal",xTitle:w="Columns",yTitle:k="Rows",title:A="Area Graph"})=>{const p=s.useRef(null),r=U.usePlotlyTheme(),{xMin:C,xMax:b,yMin:E,yMax:z}=s.useMemo(()=>{let e=Number.MAX_VALUE,t=Number.MIN_VALUE,n=Number.MAX_VALUE,o=Number.MIN_VALUE;f.forEach(c=>{c.x.forEach(a=>{e=Math.min(e,a),t=Math.max(t,a)}),c.y.forEach(a=>{n=Math.min(n,a),o=Math.max(o,a)})});const l=(t-e)*.1,i=(o-n)*.1;return{xMin:e-l,xMax:t+l,yMin:y==="stacked"?0:n-i,yMax:o+i}},[f,y]),u=s.useMemo(()=>m||[C,b],[m,C,b]),h=s.useMemo(()=>d||[E,z],[d,E,z]),I=s.useMemo(()=>{const e=u[1]-u[0];let t=Math.pow(10,Math.floor(Math.log10(e)));e/t>10&&(t=t*2),e/t<4&&(t=t/2);const n=[];let o=Math.ceil(u[0]/t)*t;for(;o<=u[1];)n.push(o),o+=t;return n},[u]),N=s.useMemo(()=>{const e=h[1]-h[0];let t=Math.pow(10,Math.floor(Math.log10(e)));e/t>10&&(t=t*2),e/t<4&&(t=t/2);const n=[];let o=Math.ceil(h[0]/t)*t;for(;o<=h[1];)n.push(o),o+=t;return n},[h]),g=s.useMemo(()=>({tickcolor:r.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:r.textColor,family:"Inter, sans-serif",weight:400},linecolor:r.lineColor,linewidth:1,position:0,zeroline:!1}),[r]),P=s.useMemo(()=>({text:A,x:.5,y:.95,xanchor:"center",yanchor:"top",font:{size:32,weight:600,family:"Inter, sans-serif",color:r.textColor,lineheight:1.2,standoff:30}}),[A,r]);return s.useEffect(()=>{if(!p.current)return;let e;if(y==="stacked"){const l=new Array(f[0]?.x.length||0).fill(0);e=f.map((i,c)=>{const a=i.y.map((L,_)=>{const q=l[_]+L;return l[_]=q,q}),v=j.seriesColor(c,i.color);return{x:i.x,y:a,type:"scatter",mode:"lines",name:i.name,fill:c===0?"tozeroy":"tonexty",fillcolor:v,line:{color:v,width:2}}})}else e=f.map((l,i)=>{const c=j.seriesColor(i,l.color);return{x:l.x,y:l.y,type:"scatter",mode:"lines",name:l.name,fill:l.fill||"tozeroy",fillcolor:c,line:{color:c,width:2}}});const t={width:M,height:x,title:P,margin:{l:80,r:40,b:80,t:80,pad:0},paper_bgcolor:r.paperBg,plot_bgcolor:r.plotBg,font:{family:"Inter, sans-serif"},dragmode:!1,xaxis:{title:{text:w,font:{size:16,color:r.textSecondary,family:"Inter, sans-serif",weight:400},standoff:15},gridcolor:r.gridColor,range:m,autorange:!m,tickmode:"array",tickvals:I,showgrid:!0,...g},yaxis:{title:{text:k,font:{size:16,color:r.textSecondary,family:"Inter, sans-serif",weight:400},standoff:15},gridcolor:r.gridColor,range:d,autorange:!d,tickmode:"array",tickvals:N,showgrid:!0,...g},legend:{x:.5,y:-.2,xanchor:"center",yanchor:"top",orientation:"h",font:{size:13,color:r.legendColor,family:"Inter, sans-serif",weight:500,lineheight:18}},showlegend:!0},n={responsive:!0,displayModeBar:!1,displaylogo:!1};Y.newPlot(p.current,e,t,n);const o=p.current;return()=>{o&&Y.purge(o)}},[f,M,x,m,d,u,h,y,w,k,P,g,I,N,r]),X.jsx("div",{className:"area-graph-container",children:X.jsx("div",{ref:p,style:{width:"100%",height:"100%"}})})};exports.AreaGraph=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),T=require("plotly.js-dist"),c=require("react"),U=require("../ChartTooltip/ChartTooltip.cjs"),V=require("../../../hooks/use-plotly-theme.cjs"),X=require("../../../utils/colors.cjs"),B=require("../ChartTooltip/lines.cjs"),G=({dataSeries:u,width:w=1e3,height:b=600,xRange:h,yRange:d,variant:y="normal",xTitle:g="Columns",yTitle:M="Rows",title:C="Area Graph"})=>{const p=c.useRef(null),o=V.usePlotlyTheme(),{bindTooltip:z,tooltipElement:Y}=U.useChartTooltip({getLines:t=>B.chartTooltipLines(t.map(e=>typeof e.customdata=="number"?{...e,y:e.customdata}:e),{xLabel:g,yLabel:M})}),{xMin:A,xMax:E,yMin:v,yMax:I}=c.useMemo(()=>{let t=Number.MAX_VALUE,e=Number.MIN_VALUE,n=Number.MAX_VALUE,r=Number.MIN_VALUE;u.forEach(s=>{s.x.forEach(a=>{t=Math.min(t,a),e=Math.max(e,a)}),s.y.forEach(a=>{n=Math.min(n,a),r=Math.max(r,a)})});const l=(e-t)*.1,i=(r-n)*.1;return{xMin:t-l,xMax:e+l,yMin:y==="stacked"?0:n-i,yMax:r+i}},[u,y]),f=c.useMemo(()=>h||[A,E],[h,A,E]),m=c.useMemo(()=>d||[v,I],[d,v,I]),L=c.useMemo(()=>{const t=f[1]-f[0];let e=Math.pow(10,Math.floor(Math.log10(t)));t/e>10&&(e=e*2),t/e<4&&(e=e/2);const n=[];let r=Math.ceil(f[0]/e)*e;for(;r<=f[1];)n.push(r),r+=e;return n},[f]),q=c.useMemo(()=>{const t=m[1]-m[0];let e=Math.pow(10,Math.floor(Math.log10(t)));t/e>10&&(e=e*2),t/e<4&&(e=e/2);const n=[];let r=Math.ceil(m[0]/e)*e;for(;r<=m[1];)n.push(r),r+=e;return n},[m]),x=c.useMemo(()=>({tickcolor:o.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:o.textColor,family:"Inter, sans-serif",weight:400},linecolor:o.lineColor,linewidth:1,position:0,zeroline:!1}),[o]),N=c.useMemo(()=>({text:C,x:.5,y:.95,xanchor:"center",yanchor:"top",font:{size:32,weight:600,family:"Inter, sans-serif",color:o.textColor,lineheight:1.2,standoff:30}}),[C,o]);return c.useEffect(()=>{if(!p.current)return;let t;if(y==="stacked"){const l=new Array(u[0]?.x.length||0).fill(0);t=u.map((i,s)=>{const a=i.y.map((j,P)=>{const _=l[P]+j;return l[P]=_,_}),k=X.seriesColor(s,i.color);return{x:i.x,y:a,customdata:i.y,type:"scatter",mode:"lines+markers",name:i.name,hoverinfo:"none",fill:s===0?"tozeroy":"tonexty",fillcolor:k,line:{color:k,width:2},marker:{size:6,color:k,line:{color:o.markerOutline,width:1.5}}}})}else t=u.map((l,i)=>{const s=X.seriesColor(i,l.color);return{x:l.x,y:l.y,type:"scatter",mode:"lines+markers",name:l.name,hoverinfo:"none",fill:l.fill||"tozeroy",fillcolor:s,line:{color:s,width:2},marker:{size:6,color:s,line:{color:o.markerOutline,width:1.5}}}});const e={width:w,height:b,title:N,margin:{l:80,r:40,b:80,t:80,pad:0},paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg,font:{family:"Inter, sans-serif"},dragmode:!1,xaxis:{title:{text:g,font:{size:16,color:o.textSecondary,family:"Inter, sans-serif",weight:400},standoff:15},gridcolor:o.gridColor,range:h,autorange:!h,tickmode:"array",tickvals:L,showgrid:!0,...x},yaxis:{title:{text:M,font:{size:16,color:o.textSecondary,family:"Inter, sans-serif",weight:400},standoff:15},gridcolor:o.gridColor,range:d,autorange:!d,tickmode:"array",tickvals:q,showgrid:!0,...x},legend:{x:.5,y:-.2,xanchor:"center",yanchor:"top",orientation:"h",font:{size:13,color:o.legendColor,family:"Inter, sans-serif",weight:500,lineheight:18}},showlegend:!0},n={responsive:!0,displayModeBar:!1,displaylogo:!1};T.newPlot(p.current,t,e,n),z(p.current);const r=p.current;return()=>{r&&T.purge(r)}},[u,w,b,h,d,f,m,y,g,M,N,x,L,q,o,z]),O.jsxs("div",{className:"area-graph-container relative",children:[O.jsx("div",{ref:p,style:{width:"100%",height:"100%"}}),Y]})};exports.AreaGraph=G;
 //# sourceMappingURL=AreaGraph.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AreaGraph.cjs","sources":["../../../../src/components/charts/AreaGraph/AreaGraph.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 AreaDataSeries {\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  fill?: \"tozeroy\" | \"tonexty\" | \"toself\";\n}\n\ntype AreaGraphVariant = \"normal\" | \"stacked\";\n\ninterface AreaGraphProps {\n  dataSeries: AreaDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  variant?: AreaGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst AreaGraph: React.FC<AreaGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  variant = \"normal\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Area Graph\",\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: variant === \"stacked\" ? 0 : minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries, variant]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\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 titleOptions = useMemo(\n    () => ({\n      text: title,\n      x: 0.5,\n      y: 0.95,\n      xanchor: \"center\" as const,\n      yanchor: \"top\" as const,\n      font: {\n        size: 32,\n        weight: 600,\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n        lineheight: 1.2,\n        standoff: 30,\n      },\n    }),\n    [title, theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    let data;\n\n    if (variant === \"stacked\") {\n      // For stacked mode, we need to calculate cumulative values\n      const cumulativeY = new Array(dataSeries[0]?.x.length || 0).fill(0);\n\n      data = dataSeries.map((series, index) => {\n        // Calculate cumulative values for this series\n        const stackedY = series.y.map((value, i) => {\n          const result = cumulativeY[i] + value;\n          cumulativeY[i] = result;\n          return result;\n        });\n\n        const color = seriesColor(index, series.color);\n        return {\n          x: series.x,\n          y: stackedY,\n          type: \"scatter\" as const,\n          mode: \"lines\" as const,\n          name: series.name,\n          fill: index === 0 ? (\"tozeroy\" as const) : (\"tonexty\" as const),\n          fillcolor: color,\n          line: {\n            color,\n            width: 2,\n          },\n        };\n      });\n    } else {\n      // Normal mode - each area fills independently from zero\n      data = 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: \"lines\" as const,\n          name: series.name,\n          fill: series.fill || (\"tozeroy\" as const),\n          fillcolor: color,\n          line: {\n            color,\n            width: 2,\n          },\n        };\n      });\n    }\n\n    const layout = {\n      width,\n      height: height,\n      title: titleOptions,\n      margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },\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: 15,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\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: 15,\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: 13,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n          lineheight: 18,\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, data, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    // Cleanup function\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, effectiveXRange, effectiveYRange, variant, xTitle, yTitle, titleOptions, tickOptions, xTicks, yTicks, theme]);\n\n  return (\n    <div className=\"area-graph-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { AreaGraph };\nexport type { AreaDataSeries, AreaGraphVariant, AreaGraphProps };\n"],"names":["AreaGraph","dataSeries","width","height","xRange","yRange","variant","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","titleOptions","useEffect","data","cumulativeY","index","stackedY","value","i","result","color","seriesColor","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}
+{"version":3,"file":"AreaGraph.cjs","sources":["../../../../src/components/charts/AreaGraph/AreaGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { chartTooltipLines, useChartTooltip } from \"../ChartTooltip\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { seriesColor } from \"@/utils/colors\";\n\ninterface AreaDataSeries {\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  fill?: \"tozeroy\" | \"tonexty\" | \"toself\";\n}\n\ntype AreaGraphVariant = \"normal\" | \"stacked\";\n\ninterface AreaGraphProps {\n  dataSeries: AreaDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  variant?: AreaGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst AreaGraph: React.FC<AreaGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  variant = \"normal\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Area Graph\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    // Stacked traces carry the original series values as customdata;\n    // display those instead of the cumulative stack heights\n    getLines: (points) =>\n      chartTooltipLines(\n        points.map((point) =>\n          typeof point.customdata === \"number\"\n            ? { ...point, y: point.customdata }\n            : point,\n        ),\n        { xLabel: xTitle, yLabel: yTitle },\n      ),\n  });\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: variant === \"stacked\" ? 0 : minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries, variant]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\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 titleOptions = useMemo(\n    () => ({\n      text: title,\n      x: 0.5,\n      y: 0.95,\n      xanchor: \"center\" as const,\n      yanchor: \"top\" as const,\n      font: {\n        size: 32,\n        weight: 600,\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n        lineheight: 1.2,\n        standoff: 30,\n      },\n    }),\n    [title, theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    let data;\n\n    if (variant === \"stacked\") {\n      // For stacked mode, we need to calculate cumulative values\n      const cumulativeY = new Array(dataSeries[0]?.x.length || 0).fill(0);\n\n      data = dataSeries.map((series, index) => {\n        // Calculate cumulative values for this series\n        const stackedY = series.y.map((value, i) => {\n          const result = cumulativeY[i] + value;\n          cumulativeY[i] = result;\n          return result;\n        });\n\n        const color = seriesColor(index, series.color);\n        return {\n          x: series.x,\n          y: stackedY,\n          // Tooltips report the series' own values, not the stacked sums\n          customdata: series.y,\n          type: \"scatter\" as const,\n          // Dots mark each data point — the spots the tooltip anchors to\n          mode: \"lines+markers\" as const,\n          name: series.name,\n          hoverinfo: \"none\" as const,\n          fill: index === 0 ? (\"tozeroy\" as const) : (\"tonexty\" as const),\n          fillcolor: color,\n          line: {\n            color,\n            width: 2,\n          },\n          marker: {\n            size: 6,\n            color,\n            line: { color: theme.markerOutline, width: 1.5 },\n          },\n        };\n      });\n    } else {\n      // Normal mode - each area fills independently from zero\n      data = 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          // Dots mark each data point — the spots the tooltip anchors to\n          mode: \"lines+markers\" as const,\n          name: series.name,\n          hoverinfo: \"none\" as const,\n          fill: series.fill || (\"tozeroy\" as const),\n          fillcolor: color,\n          line: {\n            color,\n            width: 2,\n          },\n          marker: {\n            size: 6,\n            color,\n            line: { color: theme.markerOutline, width: 1.5 },\n          },\n        };\n      });\n    }\n\n    const layout = {\n      width,\n      height: height,\n      title: titleOptions,\n      margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },\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: 15,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\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: 15,\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: 13,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n          lineheight: 18,\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, data, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    // Cleanup function\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, effectiveXRange, effectiveYRange, variant, xTitle, yTitle, titleOptions, tickOptions, xTicks, yTicks, theme, bindTooltip]);\n\n  return (\n    <div className=\"area-graph-container relative\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { AreaGraph };\nexport type { AreaDataSeries, AreaGraphVariant, AreaGraphProps };\n"],"names":["AreaGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","points","chartTooltipLines","point","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","titleOptions","useEffect","data","cumulativeY","index","stackedY","value","i","result","color","seriesColor","layout","config","Plotly","plotElement","jsxs","jsx"],"mappings":"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"}

package/dist/components/charts/AreaGraph/AreaGraph.js

@@ -1,80 +1,91 @@
-import { jsx as Y } from "react/jsx-runtime";
-import L from "plotly.js-dist";
-import { useRef as B, useMemo as s, useEffect as G } from "react";
-import { usePlotlyTheme as O } from "../../../hooks/use-plotly-theme.js";
-import { seriesColor as U } from "../../../utils/colors.js";
-const H = ({
+import { jsxs as B, jsx as j } from "react/jsx-runtime";
+import Y from "plotly.js-dist";
+import { useRef as G, useMemo as s, useEffect as T } from "react";
+import { useChartTooltip as q } from "../ChartTooltip/ChartTooltip.js";
+import { usePlotlyTheme as D } from "../../../hooks/use-plotly-theme.js";
+import { seriesColor as O } from "../../../utils/colors.js";
+import { chartTooltipLines as F } from "../ChartTooltip/lines.js";
+const R = ({
   dataSeries: f,
-  width: x = 1e3,
-  height: M = 600,
-  xRange: p,
-  yRange: u,
-  variant: d = "normal",
-  xTitle: w = "Columns",
-  yTitle: k = "Rows",
-  title: A = "Area Graph"
+  width: w = 1e3,
+  height: b = 600,
+  xRange: u,
+  yRange: p,
+  variant: y = "normal",
+  xTitle: g = "Columns",
+  yTitle: x = "Rows",
+  title: z = "Area Graph"
 }) => {
-  const y = B(null), r = O(), { xMin: C, xMax: E, yMin: z, yMax: I } = s(() => {
-    let o = Number.MAX_VALUE, t = Number.MIN_VALUE, n = Number.MAX_VALUE, e = Number.MIN_VALUE;
-    f.forEach((c) => {
-      c.x.forEach((a) => {
-        o = Math.min(o, a), t = Math.max(t, a);
-      }), c.y.forEach((a) => {
-        n = Math.min(n, a), e = Math.max(e, a);
+  const d = G(null), e = D(), { bindTooltip: C, tooltipElement: U } = q({
+    // Stacked traces carry the original series values as customdata;
+    // display those instead of the cumulative stack heights
+    getLines: (o) => F(
+      o.map(
+        (t) => typeof t.customdata == "number" ? { ...t, y: t.customdata } : t
+      ),
+      { xLabel: g, yLabel: x }
+    )
+  }), { xMin: E, xMax: A, yMin: v, yMax: I } = s(() => {
+    let o = Number.MAX_VALUE, t = Number.MIN_VALUE, n = Number.MAX_VALUE, r = Number.MIN_VALUE;
+    f.forEach((a) => {
+      a.x.forEach((c) => {
+        o = Math.min(o, c), t = Math.max(t, c);
+      }), a.y.forEach((c) => {
+        n = Math.min(n, c), r = Math.max(r, c);
       });
     });
-    const l = (t - o) * 0.1, i = (e - n) * 0.1;
+    const l = (t - o) * 0.1, i = (r - n) * 0.1;
     return {
       xMin: o - l,
       xMax: t + l,
-      yMin: d === "stacked" ? 0 : n - i,
-      yMax: e + i
+      yMin: y === "stacked" ? 0 : n - i,
+      yMax: r + i
     };
-  }, [f, d]), m = s(
-    () => p || [C, E],
-    [p, C, E]
+  }, [f, y]), m = s(
+    () => u || [E, A],
+    [u, E, A]
   ), h = s(
-    () => u || [z, I],
-    [u, z, I]
-  ), b = s(() => {
+    () => p || [v, I],
+    [p, v, I]
+  ), L = s(() => {
     const o = m[1] - m[0];
     let t = Math.pow(10, Math.floor(Math.log10(o)));
     o / t > 10 && (t = t * 2), o / t < 4 && (t = t / 2);
     const n = [];
-    let e = Math.ceil(m[0] / t) * t;
-    for (; e <= m[1]; )
-      n.push(e), e += t;
+    let r = Math.ceil(m[0] / t) * t;
+    for (; r <= m[1]; )
+      n.push(r), r += t;
     return n;
   }, [m]), N = s(() => {
     const o = h[1] - h[0];
     let t = Math.pow(10, Math.floor(Math.log10(o)));
     o / t > 10 && (t = t * 2), o / t < 4 && (t = t / 2);
     const n = [];
-    let e = Math.ceil(h[0] / t) * t;
-    for (; e <= h[1]; )
-      n.push(e), e += t;
+    let r = Math.ceil(h[0] / t) * t;
+    for (; r <= h[1]; )
+      n.push(r), r += t;
     return n;
-  }, [h]), g = s(
+  }, [h]), M = s(
     () => ({
-      tickcolor: r.tickColor,
+      tickcolor: e.tickColor,
       ticklen: 12,
       tickwidth: 1,
       ticks: "outside",
       tickfont: {
         size: 16,
-        color: r.textColor,
+        color: e.textColor,
         family: "Inter, sans-serif",
         weight: 400
       },
-      linecolor: r.lineColor,
+      linecolor: e.lineColor,
       linewidth: 1,
       position: 0,
       zeroline: !1
     }),
-    [r]
+    [e]
   ), _ = s(
     () => ({
-      text: A,
+      text: z,
       x: 0.5,
       y: 0.95,
       xanchor: "center",
@@ -83,102 +94,118 @@ const H = ({
         size: 32,
         weight: 600,
         family: "Inter, sans-serif",
-        color: r.textColor,
+        color: e.textColor,
         lineheight: 1.2,
         standoff: 30
       }
     }),
-    [A, r]
+    [z, e]
   );
-  return G(() => {
-    if (!y.current) return;
+  return T(() => {
+    if (!d.current) return;
     let o;
-    if (d === "stacked") {
+    if (y === "stacked") {
       const l = new Array(f[0]?.x.length || 0).fill(0);
-      o = f.map((i, c) => {
-        const a = i.y.map((V, P) => {
+      o = f.map((i, a) => {
+        const c = i.y.map((V, P) => {
           const X = l[P] + V;
           return l[P] = X, X;
-        }), v = U(c, i.color);
+        }), k = O(a, i.color);
         return {
           x: i.x,
-          y: a,
+          y: c,
+          // Tooltips report the series' own values, not the stacked sums
+          customdata: i.y,
           type: "scatter",
-          mode: "lines",
+          // Dots mark each data point — the spots the tooltip anchors to
+          mode: "lines+markers",
           name: i.name,
-          fill: c === 0 ? "tozeroy" : "tonexty",
-          fillcolor: v,
+          hoverinfo: "none",
+          fill: a === 0 ? "tozeroy" : "tonexty",
+          fillcolor: k,
           line: {
-            color: v,
+            color: k,
             width: 2
+          },
+          marker: {
+            size: 6,
+            color: k,
+            line: { color: e.markerOutline, width: 1.5 }
           }
         };
       });
     } else
       o = f.map((l, i) => {
-        const c = U(i, l.color);
+        const a = O(i, l.color);
         return {
           x: l.x,
           y: l.y,
           type: "scatter",
-          mode: "lines",
+          // Dots mark each data point — the spots the tooltip anchors to
+          mode: "lines+markers",
           name: l.name,
+          hoverinfo: "none",
           fill: l.fill || "tozeroy",
-          fillcolor: c,
+          fillcolor: a,
           line: {
-            color: c,
+            color: a,
             width: 2
+          },
+          marker: {
+            size: 6,
+            color: a,
+            line: { color: e.markerOutline, width: 1.5 }
           }
         };
       });
     const t = {
-      width: x,
-      height: M,
+      width: w,
+      height: b,
       title: _,
       margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },
-      paper_bgcolor: r.paperBg,
-      plot_bgcolor: r.plotBg,
+      paper_bgcolor: e.paperBg,
+      plot_bgcolor: e.plotBg,
       font: {
         family: "Inter, sans-serif"
       },
       dragmode: !1,
       xaxis: {
         title: {
-          text: w,
+          text: g,
           font: {
             size: 16,
-            color: r.textSecondary,
+            color: e.textSecondary,
             family: "Inter, sans-serif",
             weight: 400
           },
           standoff: 15
         },
-        gridcolor: r.gridColor,
-        range: p,
-        autorange: !p,
+        gridcolor: e.gridColor,
+        range: u,
+        autorange: !u,
         tickmode: "array",
-        tickvals: b,
+        tickvals: L,
         showgrid: !0,
-        ...g
+        ...M
       },
       yaxis: {
         title: {
-          text: k,
+          text: x,
           font: {
             size: 16,
-            color: r.textSecondary,
+            color: e.textSecondary,
             family: "Inter, sans-serif",
             weight: 400
           },
           standoff: 15
         },
-        gridcolor: r.gridColor,
-        range: u,
-        autorange: !u,
+        gridcolor: e.gridColor,
+        range: p,
+        autorange: !p,
         tickmode: "array",
         tickvals: N,
         showgrid: !0,
-        ...g
+        ...M
       },
       legend: {
         x: 0.5,
@@ -188,7 +215,7 @@ const H = ({
         orientation: "h",
         font: {
           size: 13,
-          color: r.legendColor,
+          color: e.legendColor,
           family: "Inter, sans-serif",
           weight: 500,
           lineheight: 18
@@ -200,14 +227,17 @@ const H = ({
       displayModeBar: !1,
       displaylogo: !1
     };
-    L.newPlot(y.current, o, t, n);
-    const e = y.current;
+    Y.newPlot(d.current, o, t, n), C(d.current);
+    const r = d.current;
     return () => {
-      e && L.purge(e);
+      r && Y.purge(r);
     };
-  }, [f, x, M, p, u, m, h, d, w, k, _, g, b, N, r]), /* @__PURE__ */ Y("div", { className: "area-graph-container", children: /* @__PURE__ */ Y("div", { ref: y, style: { width: "100%", height: "100%" } }) });
+  }, [f, w, b, u, p, m, h, y, g, x, _, M, L, N, e, C]), /* @__PURE__ */ B("div", { className: "area-graph-container relative", children: [
+    /* @__PURE__ */ j("div", { ref: d, style: { width: "100%", height: "100%" } }),
+    U
+  ] });
 };
 export {
-  H as AreaGraph
+  R as AreaGraph
 };
 //# sourceMappingURL=AreaGraph.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AreaGraph.js","sources":["../../../../src/components/charts/AreaGraph/AreaGraph.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 AreaDataSeries {\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  fill?: \"tozeroy\" | \"tonexty\" | \"toself\";\n}\n\ntype AreaGraphVariant = \"normal\" | \"stacked\";\n\ninterface AreaGraphProps {\n  dataSeries: AreaDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  variant?: AreaGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst AreaGraph: React.FC<AreaGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  variant = \"normal\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Area Graph\",\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: variant === \"stacked\" ? 0 : minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries, variant]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\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 titleOptions = useMemo(\n    () => ({\n      text: title,\n      x: 0.5,\n      y: 0.95,\n      xanchor: \"center\" as const,\n      yanchor: \"top\" as const,\n      font: {\n        size: 32,\n        weight: 600,\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n        lineheight: 1.2,\n        standoff: 30,\n      },\n    }),\n    [title, theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    let data;\n\n    if (variant === \"stacked\") {\n      // For stacked mode, we need to calculate cumulative values\n      const cumulativeY = new Array(dataSeries[0]?.x.length || 0).fill(0);\n\n      data = dataSeries.map((series, index) => {\n        // Calculate cumulative values for this series\n        const stackedY = series.y.map((value, i) => {\n          const result = cumulativeY[i] + value;\n          cumulativeY[i] = result;\n          return result;\n        });\n\n        const color = seriesColor(index, series.color);\n        return {\n          x: series.x,\n          y: stackedY,\n          type: \"scatter\" as const,\n          mode: \"lines\" as const,\n          name: series.name,\n          fill: index === 0 ? (\"tozeroy\" as const) : (\"tonexty\" as const),\n          fillcolor: color,\n          line: {\n            color,\n            width: 2,\n          },\n        };\n      });\n    } else {\n      // Normal mode - each area fills independently from zero\n      data = 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: \"lines\" as const,\n          name: series.name,\n          fill: series.fill || (\"tozeroy\" as const),\n          fillcolor: color,\n          line: {\n            color,\n            width: 2,\n          },\n        };\n      });\n    }\n\n    const layout = {\n      width,\n      height: height,\n      title: titleOptions,\n      margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },\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: 15,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\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: 15,\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: 13,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n          lineheight: 18,\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, data, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    // Cleanup function\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, effectiveXRange, effectiveYRange, variant, xTitle, yTitle, titleOptions, tickOptions, xTicks, yTicks, theme]);\n\n  return (\n    <div className=\"area-graph-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { AreaGraph };\nexport type { AreaDataSeries, AreaGraphVariant, AreaGraphProps };\n"],"names":["AreaGraph","dataSeries","width","height","xRange","yRange","variant","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","titleOptions","useEffect","data","cumulativeY","index","stackedY","value","i","result","color","seriesColor","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}
+{"version":3,"file":"AreaGraph.js","sources":["../../../../src/components/charts/AreaGraph/AreaGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { chartTooltipLines, useChartTooltip } from \"../ChartTooltip\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { seriesColor } from \"@/utils/colors\";\n\ninterface AreaDataSeries {\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  fill?: \"tozeroy\" | \"tonexty\" | \"toself\";\n}\n\ntype AreaGraphVariant = \"normal\" | \"stacked\";\n\ninterface AreaGraphProps {\n  dataSeries: AreaDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  variant?: AreaGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst AreaGraph: React.FC<AreaGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  variant = \"normal\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Area Graph\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    // Stacked traces carry the original series values as customdata;\n    // display those instead of the cumulative stack heights\n    getLines: (points) =>\n      chartTooltipLines(\n        points.map((point) =>\n          typeof point.customdata === \"number\"\n            ? { ...point, y: point.customdata }\n            : point,\n        ),\n        { xLabel: xTitle, yLabel: yTitle },\n      ),\n  });\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: variant === \"stacked\" ? 0 : minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries, variant]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\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 titleOptions = useMemo(\n    () => ({\n      text: title,\n      x: 0.5,\n      y: 0.95,\n      xanchor: \"center\" as const,\n      yanchor: \"top\" as const,\n      font: {\n        size: 32,\n        weight: 600,\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n        lineheight: 1.2,\n        standoff: 30,\n      },\n    }),\n    [title, theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    let data;\n\n    if (variant === \"stacked\") {\n      // For stacked mode, we need to calculate cumulative values\n      const cumulativeY = new Array(dataSeries[0]?.x.length || 0).fill(0);\n\n      data = dataSeries.map((series, index) => {\n        // Calculate cumulative values for this series\n        const stackedY = series.y.map((value, i) => {\n          const result = cumulativeY[i] + value;\n          cumulativeY[i] = result;\n          return result;\n        });\n\n        const color = seriesColor(index, series.color);\n        return {\n          x: series.x,\n          y: stackedY,\n          // Tooltips report the series' own values, not the stacked sums\n          customdata: series.y,\n          type: \"scatter\" as const,\n          // Dots mark each data point — the spots the tooltip anchors to\n          mode: \"lines+markers\" as const,\n          name: series.name,\n          hoverinfo: \"none\" as const,\n          fill: index === 0 ? (\"tozeroy\" as const) : (\"tonexty\" as const),\n          fillcolor: color,\n          line: {\n            color,\n            width: 2,\n          },\n          marker: {\n            size: 6,\n            color,\n            line: { color: theme.markerOutline, width: 1.5 },\n          },\n        };\n      });\n    } else {\n      // Normal mode - each area fills independently from zero\n      data = 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          // Dots mark each data point — the spots the tooltip anchors to\n          mode: \"lines+markers\" as const,\n          name: series.name,\n          hoverinfo: \"none\" as const,\n          fill: series.fill || (\"tozeroy\" as const),\n          fillcolor: color,\n          line: {\n            color,\n            width: 2,\n          },\n          marker: {\n            size: 6,\n            color,\n            line: { color: theme.markerOutline, width: 1.5 },\n          },\n        };\n      });\n    }\n\n    const layout = {\n      width,\n      height: height,\n      title: titleOptions,\n      margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },\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: 15,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\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: 15,\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: 13,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n          lineheight: 18,\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, data, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    // Cleanup function\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, effectiveXRange, effectiveYRange, variant, xTitle, yTitle, titleOptions, tickOptions, xTicks, yTicks, theme, bindTooltip]);\n\n  return (\n    <div className=\"area-graph-container relative\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { AreaGraph };\nexport type { AreaDataSeries, AreaGraphVariant, AreaGraphProps };\n"],"names":["AreaGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","points","chartTooltipLines","point","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","titleOptions","useEffect","data","cumulativeY","index","stackedY","value","i","result","color","seriesColor","layout","config","Plotly","plotElement","jsxs","jsx"],"mappings":"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"}

package/dist/components/charts/BarGraph/BarGraph.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"BarGraph.cjs","sources":["../../../../src/components/charts/BarGraph/BarGraph.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 BarDataSeries {\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  error_y?: {\n    type: \"data\";\n    array: number[];\n    visible: boolean;\n  };\n}\n\ntype BarGraphVariant = \"group\" | \"stack\" | \"overlay\";\n\ninterface BarGraphProps {\n  dataSeries: BarDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  variant?: BarGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n  barWidth?: number;\n}\n\nconst BarGraph: React.FC<BarGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  variant = \"group\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Bar Graph\",\n  barWidth = 24,\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: variant === \"stack\" ? 0 : minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries, variant]);\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(\n    () => [...new Set(dataSeries.flatMap((s) => s.x))],\n    [dataSeries],\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 barMode = useMemo((): \"group\" | \"stack\" | \"overlay\" => {\n    switch (variant) {\n      case \"stack\":\n        return \"stack\";\n      case \"overlay\":\n        return \"overlay\";\n      case \"group\":\n      default:\n        return \"group\";\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 data = dataSeries.map((series, index) => ({\n      x: series.x,\n      y: series.y,\n      type: \"bar\" as const,\n      name: series.name,\n      marker: {\n        color: seriesColor(index, series.color),\n      },\n      width: barWidth,\n      error_y: series.error_y,\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: 0 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      barmode: barMode,\n      bargap: 0.15,\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        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: dataSeries.length > 1,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, data, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    // Cleanup function\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, barWidth, barMode, tickOptions, xTicks, yTicks, theme]);\n\n  return (\n    <div className=\"bar-graph-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { BarGraph };\nexport type { BarDataSeries, BarGraphVariant, BarGraphProps };\n"],"names":["BarGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","barWidth","plotRef","useRef","theme","usePlotlyTheme","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveYRange","xTicks","s","yTicks","range","step","ticks","current","barMode","tickOptions","useEffect","data","index","seriesColor","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}
+{"version":3,"file":"BarGraph.cjs","sources":["../../../../src/components/charts/BarGraph/BarGraph.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\ninterface BarDataSeries {\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  error_y?: {\n    type: \"data\";\n    array: number[];\n    visible: boolean;\n  };\n}\n\ntype BarGraphVariant = \"group\" | \"stack\" | \"overlay\";\n\ninterface BarGraphProps {\n  dataSeries: BarDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  variant?: BarGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n  barWidth?: number;\n}\n\nconst BarGraph: React.FC<BarGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  variant = \"group\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Bar Graph\",\n  barWidth = 24,\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: variant === \"stack\" ? 0 : minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries, variant]);\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(\n    () => [...new Set(dataSeries.flatMap((s) => s.x))],\n    [dataSeries],\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 barMode = useMemo((): \"group\" | \"stack\" | \"overlay\" => {\n    switch (variant) {\n      case \"stack\":\n        return \"stack\";\n      case \"overlay\":\n        return \"overlay\";\n      case \"group\":\n      default:\n        return \"group\";\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 data = dataSeries.map((series, index) => ({\n      x: series.x,\n      y: series.y,\n      type: \"bar\" as const,\n      name: series.name,\n      hoverinfo: \"none\" as const,\n      marker: {\n        color: seriesColor(index, series.color),\n      },\n      width: barWidth,\n      error_y: series.error_y,\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: 0 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      barmode: barMode,\n      bargap: 0.15,\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        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: dataSeries.length > 1,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, data, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    // Cleanup function\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, barWidth, barMode, tickOptions, xTicks, yTicks, theme, bindTooltip]);\n\n  return (\n    <div className=\"bar-graph-container relative\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { BarGraph };\nexport type { BarDataSeries, BarGraphVariant, BarGraphProps };\n"],"names":["BarGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","barWidth","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveYRange","xTicks","s","yTicks","range","step","ticks","current","barMode","tickOptions","useEffect","data","index","seriesColor","layout","config","Plotly","plotElement","jsxs","jsx"],"mappings":"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"}