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

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"),i=require("react"),q=require("../../../hooks/use-plotly-theme.cjs"),L=({dataSeries:s,width:M=1e3,height:x=600,xRange:h,yRange:m,variant:d="normal",xTitle:w="Columns",yTitle:k="Rows",title:A="Area Graph"})=>{const y=i.useRef(null),r=q.usePlotlyTheme(),{xMin:b,xMax:E,yMin:z,yMax:C}=i.useMemo(()=>{let e=Number.MAX_VALUE,t=Number.MIN_VALUE,n=Number.MAX_VALUE,o=Number.MIN_VALUE;s.forEach(p=>{p.x.forEach(a=>{e=Math.min(e,a),t=Math.max(t,a)}),p.y.forEach(a=>{n=Math.min(n,a),o=Math.max(o,a)})});const l=(t-e)*.1,c=(o-n)*.1;return{xMin:e-l,xMax:t+l,yMin:d==="stacked"?0:n-c,yMax:o+c}},[s,d]),f=i.useMemo(()=>h||[b,E],[h,b,E]),u=i.useMemo(()=>m||[z,C],[m,z,C]),I=i.useMemo(()=>{const e=f[1]-f[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(f[0]/t)*t;for(;o<=f[1];)n.push(o),o+=t;return n},[f]),N=i.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]),g=i.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=i.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 i.useEffect(()=>{if(!y.current)return;let e;if(d==="stacked"){const l=new Array(s[0]?.x.length||0).fill(0);e=s.map((c,p)=>{const a=c.y.map((j,v)=>{const _=l[v]+j;return l[v]=_,_});return{x:c.x,y:a,type:"scatter",mode:"lines",name:c.name,fill:p===0?"tozeroy":"tonexty",fillcolor:c.color,line:{color:c.color,width:2}}})}else e=s.map(l=>({x:l.x,y:l.y,type:"scatter",mode:"lines",name:l.name,fill:l.fill||"tozeroy",fillcolor:l.color,line:{color:l.color,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:h,autorange:!h,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:m,autorange:!m,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(y.current,e,t,n);const o=y.current;return()=>{o&&Y.purge(o)}},[s,M,x,h,m,f,u,d,w,k,P,g,I,N,r]),X.jsx("div",{className:"area-graph-container",children:X.jsx("div",{ref:y,style:{width:"100%",height:"100%"}})})};exports.AreaGraph=L;
+"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;
 //# 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\";\n\ninterface AreaDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\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        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: series.color,\n          line: {\n            color: series.color,\n            width: 2,\n          },\n        };\n      });\n    } else {\n      // Normal mode - each area fills independently from zero\n      data = dataSeries.map((series) => ({\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: series.color,\n        line: {\n          color: series.color,\n          width: 2,\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","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 { 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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"}

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

@@ -1,59 +1,60 @@
-import { jsx as X } from "react/jsx-runtime";
-import Y from "plotly.js-dist";
-import { useRef as U, useMemo as a, useEffect as V } from "react";
-import { usePlotlyTheme as B } from "../../../hooks/use-plotly-theme.js";
-const q = ({
-  dataSeries: s,
+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 = ({
+  dataSeries: f,
   width: x = 1e3,
   height: M = 600,
-  xRange: m,
-  yRange: p,
-  variant: u = "normal",
+  xRange: p,
+  yRange: u,
+  variant: d = "normal",
   xTitle: w = "Columns",
   yTitle: k = "Rows",
   title: A = "Area Graph"
 }) => {
-  const d = U(null), r = B(), { xMin: E, xMax: z, yMin: C, yMax: I } = a(() => {
-    let o = Number.MAX_VALUE, t = Number.MIN_VALUE, l = Number.MAX_VALUE, e = Number.MIN_VALUE;
-    s.forEach((y) => {
-      y.x.forEach((c) => {
-        o = Math.min(o, c), t = Math.max(t, c);
-      }), y.y.forEach((c) => {
-        l = Math.min(l, c), e = Math.max(e, c);
+  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 n = (t - o) * 0.1, i = (e - l) * 0.1;
+    const l = (t - o) * 0.1, i = (e - n) * 0.1;
     return {
-      xMin: o - n,
-      xMax: t + n,
-      yMin: u === "stacked" ? 0 : l - i,
+      xMin: o - l,
+      xMax: t + l,
+      yMin: d === "stacked" ? 0 : n - i,
       yMax: e + i
     };
-  }, [s, u]), f = a(
-    () => m || [E, z],
-    [m, E, z]
-  ), h = a(
-    () => p || [C, I],
-    [p, C, I]
-  ), b = a(() => {
-    const o = f[1] - f[0];
+  }, [f, d]), m = s(
+    () => p || [C, E],
+    [p, C, E]
+  ), h = s(
+    () => u || [z, I],
+    [u, z, I]
+  ), b = 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 l = [];
-    let e = Math.ceil(f[0] / t) * t;
-    for (; e <= f[1]; )
-      l.push(e), e += t;
-    return l;
-  }, [f]), N = a(() => {
+    const n = [];
+    let e = Math.ceil(m[0] / t) * t;
+    for (; e <= m[1]; )
+      n.push(e), e += 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 l = [];
+    const n = [];
     let e = Math.ceil(h[0] / t) * t;
     for (; e <= h[1]; )
-      l.push(e), e += t;
-    return l;
-  }, [h]), g = a(
+      n.push(e), e += t;
+    return n;
+  }, [h]), g = s(
     () => ({
       tickcolor: r.tickColor,
       ticklen: 12,
@@ -71,7 +72,7 @@ const q = ({
       zeroline: !1
     }),
     [r]
-  ), _ = a(
+  ), _ = s(
     () => ({
       text: A,
       x: 0.5,
@@ -89,44 +90,47 @@ const q = ({
     }),
     [A, r]
   );
-  return V(() => {
-    if (!d.current) return;
+  return G(() => {
+    if (!y.current) return;
     let o;
-    if (u === "stacked") {
-      const n = new Array(s[0]?.x.length || 0).fill(0);
-      o = s.map((i, y) => {
-        const c = i.y.map((L, v) => {
-          const P = n[v] + L;
-          return n[v] = P, P;
-        });
+    if (d === "stacked") {
+      const l = new Array(f[0]?.x.length || 0).fill(0);
+      o = f.map((i, c) => {
+        const a = i.y.map((V, P) => {
+          const X = l[P] + V;
+          return l[P] = X, X;
+        }), v = U(c, i.color);
         return {
           x: i.x,
-          y: c,
+          y: a,
           type: "scatter",
           mode: "lines",
           name: i.name,
-          fill: y === 0 ? "tozeroy" : "tonexty",
-          fillcolor: i.color,
+          fill: c === 0 ? "tozeroy" : "tonexty",
+          fillcolor: v,
           line: {
-            color: i.color,
+            color: v,
             width: 2
           }
         };
       });
     } else
-      o = s.map((n) => ({
-        x: n.x,
-        y: n.y,
-        type: "scatter",
-        mode: "lines",
-        name: n.name,
-        fill: n.fill || "tozeroy",
-        fillcolor: n.color,
-        line: {
-          color: n.color,
-          width: 2
-        }
-      }));
+      o = f.map((l, i) => {
+        const c = U(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: x,
       height: M,
@@ -150,8 +154,8 @@ const q = ({
           standoff: 15
         },
         gridcolor: r.gridColor,
-        range: m,
-        autorange: !m,
+        range: p,
+        autorange: !p,
         tickmode: "array",
         tickvals: b,
         showgrid: !0,
@@ -169,8 +173,8 @@ const q = ({
           standoff: 15
         },
         gridcolor: r.gridColor,
-        range: p,
-        autorange: !p,
+        range: u,
+        autorange: !u,
         tickmode: "array",
         tickvals: N,
         showgrid: !0,
@@ -191,19 +195,19 @@ const q = ({
         }
       },
       showlegend: !0
-    }, l = {
+    }, n = {
       responsive: !0,
       displayModeBar: !1,
       displaylogo: !1
     };
-    Y.newPlot(d.current, o, t, l);
-    const e = d.current;
+    L.newPlot(y.current, o, t, n);
+    const e = y.current;
     return () => {
-      e && Y.purge(e);
+      e && L.purge(e);
     };
-  }, [s, x, M, m, p, f, h, u, w, k, _, g, b, N, r]), /* @__PURE__ */ X("div", { className: "area-graph-container", children: /* @__PURE__ */ X("div", { ref: d, style: { width: "100%", height: "100%" } }) });
+  }, [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%" } }) });
 };
 export {
-  q as AreaGraph
+  H 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\";\n\ninterface AreaDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\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        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: series.color,\n          line: {\n            color: series.color,\n            width: 2,\n          },\n        };\n      });\n    } else {\n      // Normal mode - each area fills independently from zero\n      data = dataSeries.map((series) => ({\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: series.color,\n        line: {\n          color: series.color,\n          width: 2,\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","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 { 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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"}

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

package/dist/components/charts/BarGraph/BarGraph.js

@@ -2,19 +2,20 @@ import { jsx as z } from "react/jsx-runtime";
 import A from "plotly.js-dist";
 import { useRef as v, useMemo as i, useEffect as B } from "react";
 import { usePlotlyTheme as P } from "../../../hooks/use-plotly-theme.js";
-const Y = ({
+import { seriesColor as L } from "../../../utils/colors.js";
+const j = ({
   dataSeries: a,
-  width: g = 1e3,
-  height: d = 600,
-  xRange: p,
+  width: d = 1e3,
+  height: y = 600,
+  xRange: h,
   yRange: c,
   variant: m = "group",
-  xTitle: y = "Columns",
-  yTitle: x = "Rows",
-  title: M = "Bar Graph",
-  barWidth: k = 24
+  xTitle: x = "Columns",
+  yTitle: M = "Rows",
+  title: k = "Bar Graph",
+  barWidth: w = 24
 }) => {
-  const u = v(null), t = P(), { yMin: w, yMax: b } = i(() => {
+  const p = v(null), t = P(), { yMin: b, yMax: C } = i(() => {
     let r = Number.MAX_VALUE, o = Number.MIN_VALUE, n = Number.MAX_VALUE, e = Number.MIN_VALUE;
     a.forEach((N) => {
       N.x.forEach((f) => {
@@ -23,20 +24,20 @@ const Y = ({
         n = Math.min(n, f), e = Math.max(e, f);
       });
     });
-    const l = (o - r) * 0.1, _ = (e - n) * 0.1;
+    const l = (o - r) * 0.1, u = (e - n) * 0.1;
     return {
       xMin: r - l,
       xMax: o + l,
-      yMin: m === "stack" ? 0 : n - _,
-      yMax: e + _
+      yMin: m === "stack" ? 0 : n - u,
+      yMax: e + u
     };
   }, [a, m]), s = i(
-    () => c || [w, b],
-    [c, w, b]
+    () => c || [b, C],
+    [c, b, C]
   ), E = i(
     () => [...new Set(a.flatMap((r) => r.x))],
     [a]
-  ), C = i(() => {
+  ), I = i(() => {
     const r = s[1] - s[0];
     let o = Math.pow(10, Math.floor(Math.log10(r)));
     r / o > 10 && (o = o * 2), r / o < 4 && (o = o / 2);
@@ -45,7 +46,7 @@ const Y = ({
     for (; e <= s[1]; )
       n.push(e), e += o;
     return n;
-  }, [s]), I = i(() => {
+  }, [s]), _ = i(() => {
     switch (m) {
       case "stack":
         return "stack";
@@ -54,7 +55,7 @@ const Y = ({
       default:
         return "group";
     }
-  }, [m]), h = i(
+  }, [m]), g = i(
     () => ({
       tickcolor: t.tickColor,
       ticklen: 12,
@@ -74,40 +75,40 @@ const Y = ({
     [t]
   );
   return B(() => {
-    if (!u.current) return;
-    const r = a.map((l) => ({
+    if (!p.current) return;
+    const r = a.map((l, u) => ({
       x: l.x,
       y: l.y,
       type: "bar",
       name: l.name,
       marker: {
-        color: l.color
+        color: L(u, l.color)
       },
-      width: k,
+      width: w,
       error_y: l.error_y
     })), o = {
       title: {
-        text: M,
+        text: k,
         font: {
           size: 32,
           family: "Inter, sans-serif",
           color: t.textColor
         }
       },
-      width: g,
-      height: d,
+      width: d,
+      height: y,
       margin: { l: 80, r: 30, b: 80, t: 60, pad: 0 },
       paper_bgcolor: t.paperBg,
       plot_bgcolor: t.plotBg,
       font: {
         family: "Inter, sans-serif"
       },
-      barmode: I,
+      barmode: _,
       bargap: 0.15,
       dragmode: !1,
       xaxis: {
         title: {
-          text: y,
+          text: x,
           font: {
             size: 16,
             color: t.textSecondary,
@@ -117,16 +118,16 @@ const Y = ({
           standoff: 32
         },
         gridcolor: t.gridColor,
-        range: p,
-        autorange: !p,
+        range: h,
+        autorange: !h,
         tickmode: "array",
         tickvals: E,
         showgrid: !0,
-        ...h
+        ...g
       },
       yaxis: {
         title: {
-          text: x,
+          text: M,
           font: {
             size: 16,
             color: t.textSecondary,
@@ -139,9 +140,9 @@ const Y = ({
         range: c,
         autorange: !c,
         tickmode: "array",
-        tickvals: C,
+        tickvals: I,
         showgrid: !0,
-        ...h
+        ...g
       },
       legend: {
         x: 0.5,
@@ -162,14 +163,14 @@ const Y = ({
       displayModeBar: !1,
       displaylogo: !1
     };
-    A.newPlot(u.current, r, o, n);
-    const e = u.current;
+    A.newPlot(p.current, r, o, n);
+    const e = p.current;
     return () => {
       e && A.purge(e);
     };
-  }, [a, g, d, p, c, y, x, M, k, I, h, E, C, t]), /* @__PURE__ */ z("div", { className: "bar-graph-container", children: /* @__PURE__ */ z("div", { ref: u, style: { width: "100%", height: "100%" } }) });
+  }, [a, d, y, h, c, x, M, k, w, _, g, E, I, t]), /* @__PURE__ */ z("div", { className: "bar-graph-container", children: /* @__PURE__ */ z("div", { ref: p, style: { width: "100%", height: "100%" } }) });
 };
 export {
-  Y as BarGraph
+  j as BarGraph
 };
 //# sourceMappingURL=BarGraph.js.map