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

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

@@ -1 +1 @@
-{"version":3,"file":"LineGraph.js","sources":["../../../../src/components/charts/LineGraph/LineGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { seriesColor } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n  | \"circle\"\n  | \"circle-open\"\n  | \"circle-dot\"\n  | \"circle-open-dot\"\n  | \"square\"\n  | \"square-open\"\n  | \"square-dot\"\n  | \"square-open-dot\"\n  | \"diamond\"\n  | \"diamond-open\"\n  | \"diamond-dot\"\n  | \"diamond-open-dot\"\n  | \"cross\"\n  | \"cross-open\"\n  | \"cross-dot\"\n  | \"cross-open-dot\"\n  | \"x\"\n  | \"x-open\"\n  | \"x-dot\"\n  | \"x-open-dot\"\n  | \"triangle-up\"\n  | \"triangle-up-open\"\n  | \"triangle-up-dot\"\n  | \"triangle-up-open-dot\"\n  | \"triangle-down\"\n  | \"triangle-down-open\"\n  | \"triangle-down-dot\"\n  | \"triangle-down-open-dot\"\n  | \"triangle-left\"\n  | \"triangle-left-open\"\n  | \"triangle-left-dot\"\n  | \"triangle-left-open-dot\"\n  | \"triangle-right\"\n  | \"triangle-right-open\"\n  | \"triangle-right-dot\"\n  | \"triangle-right-open-dot\"\n  | \"triangle-ne\"\n  | \"triangle-ne-open\"\n  | \"triangle-ne-dot\"\n  | \"triangle-ne-open-dot\"\n  | \"triangle-se\"\n  | \"triangle-se-open\"\n  | \"triangle-se-dot\"\n  | \"triangle-se-open-dot\"\n  | \"triangle-sw\"\n  | \"triangle-sw-open\"\n  | \"triangle-sw-dot\"\n  | \"triangle-sw-open-dot\"\n  | \"triangle-nw\"\n  | \"triangle-nw-open\"\n  | \"triangle-nw-dot\"\n  | \"triangle-nw-open-dot\"\n  | \"pentagon\"\n  | \"pentagon-open\"\n  | \"pentagon-dot\"\n  | \"pentagon-open-dot\"\n  | \"hexagon\"\n  | \"hexagon-open\"\n  | \"hexagon-dot\"\n  | \"hexagon-open-dot\"\n  | \"hexagon2\"\n  | \"hexagon2-open\"\n  | \"hexagon2-dot\"\n  | \"hexagon2-open-dot\"\n  | \"octagon\"\n  | \"octagon-open\"\n  | \"octagon-dot\"\n  | \"octagon-open-dot\"\n  | \"star\"\n  | \"star-open\"\n  | \"star-dot\"\n  | \"star-open-dot\"\n  | \"hexagram\"\n  | \"hexagram-open\"\n  | \"hexagram-dot\"\n  | \"hexagram-open-dot\"\n  | \"star-triangle-up\"\n  | \"star-triangle-up-open\"\n  | \"star-triangle-up-dot\"\n  | \"star-triangle-up-open-dot\"\n  | \"star-triangle-down\"\n  | \"star-triangle-down-open\"\n  | \"star-triangle-down-dot\"\n  | \"star-triangle-down-open-dot\"\n  | \"star-square\"\n  | \"star-square-open\"\n  | \"star-square-dot\"\n  | \"star-square-open-dot\"\n  | \"star-diamond\"\n  | \"star-diamond-open\"\n  | \"star-diamond-dot\"\n  | \"star-diamond-open-dot\"\n  | \"diamond-tall\"\n  | \"diamond-tall-open\"\n  | \"diamond-tall-dot\"\n  | \"diamond-tall-open-dot\"\n  | \"diamond-wide\"\n  | \"diamond-wide-open\"\n  | \"diamond-wide-dot\"\n  | \"diamond-wide-open-dot\"\n  | \"hourglass\"\n  | \"hourglass-open\"\n  | \"bowtie\"\n  | \"bowtie-open\"\n  | \"circle-cross\"\n  | \"circle-cross-open\"\n  | \"circle-x\"\n  | \"circle-x-open\"\n  | \"square-cross\"\n  | \"square-cross-open\"\n  | \"square-x\"\n  | \"square-x-open\"\n  | \"diamond-cross\"\n  | \"diamond-cross-open\"\n  | \"diamond-x\"\n  | \"diamond-x-open\"\n  | \"cross-thin\"\n  | \"cross-thin-open\"\n  | \"x-thin\"\n  | \"x-thin-open\"\n  | \"asterisk\"\n  | \"asterisk-open\"\n  | \"hash\"\n  | \"hash-open\"\n  | \"hash-dot\"\n  | \"hash-open-dot\"\n  | \"y-up\"\n  | \"y-up-open\"\n  | \"y-down\"\n  | \"y-down-open\"\n  | \"y-left\"\n  | \"y-left-open\"\n  | \"y-right\"\n  | \"y-right-open\"\n  | \"line-ew\"\n  | \"line-ew-open\"\n  | \"line-ns\"\n  | \"line-ns-open\"\n  | \"line-ne\"\n  | \"line-ne-open\"\n  | \"line-nw\"\n  | \"line-nw-open\"\n  | \"arrow\"\n  | \"arrow-open\"\n  | \"arrow-wide\"\n  | \"arrow-wide-open\";\n\ninterface LineDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  /** Optional color override (auto-assigned from CHART_COLORS if not provided) */\n  color?: string;\n  symbol?: MarkerSymbol;\n  error_y?: {\n    type: \"data\";\n    array: number[];\n    visible: boolean;\n  };\n}\n\ntype LineGraphVariant = \"lines\" | \"lines+markers\" | \"lines+markers+error_bars\";\n\ntype LineGraphProps = {\n  dataSeries: LineDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  variant?: LineGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n};\n\nconst LineGraph: React.FC<LineGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  variant = \"lines\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Line Graph\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const { yMin, yMax } = useMemo(() => {\n    let minX = Number.MAX_VALUE;\n    let maxX = Number.MIN_VALUE;\n    let minY = Number.MAX_VALUE;\n    let maxY = Number.MIN_VALUE;\n\n    dataSeries.forEach((series) => {\n      series.x.forEach((x) => {\n        minX = Math.min(minX, x);\n        maxX = Math.max(maxX, x);\n      });\n      series.y.forEach((y) => {\n        minY = Math.min(minY, y);\n        maxY = Math.max(maxY, y);\n      });\n    });\n\n    const xPadding = (maxX - minX) * 0.1;\n    const yPadding = (maxY - minY) * 0.1;\n\n    return {\n      xMin: minX - xPadding,\n      xMax: maxX + xPadding,\n      yMin: minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries]);\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const yTicks = useMemo(() => {\n    const range = effectiveYRange[1] - effectiveYRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveYRange[0] / step) * step;\n    while (current <= effectiveYRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveYRange]);\n\n  const xTicks = useMemo(\n    () => [...new Set(dataSeries.flatMap((s) => s.x))],\n    [dataSeries],\n  );\n\n  const mode = useMemo((): \"lines\" | \"lines+markers\" => {\n    switch (variant) {\n      case \"lines+markers\":\n      case \"lines+markers+error_bars\":\n        return \"lines+markers\";\n      default:\n        return \"lines\";\n    }\n  }, [variant]);\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: \"Inter, sans-serif\",\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = dataSeries.map((series, index) => {\n      const color = seriesColor(index, series.color);\n      return {\n        x: series.x,\n        y: series.y,\n        type: \"scatter\" as const,\n        mode: mode,\n        name: series.name,\n        line: {\n          color,\n          width: 1.5,\n        },\n        marker:\n          variant === \"lines\"\n            ? { opacity: 0 }\n            : {\n                color,\n                size: 8,\n                symbol: series.symbol || \"triangle-up\",\n              },\n        error_y:\n          variant === \"lines+markers+error_bars\"\n            ? series.error_y || {\n                type: \"data\" as const,\n                array: series.y.map(() => 10),\n                visible: true,\n                color,\n                thickness: 1,\n                width: 5,\n              }\n            : undefined,\n      };\n    });\n\n    const layout = {\n      title: {\n        text: title,\n        font: {\n          size: 32,\n          family: \"Inter, sans-serif\",\n          color: theme.textColor,\n        },\n      },\n      width,\n      height,\n      margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      dragmode: false as const,\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 32,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\n        ticktext: xTicks.map(String),\n        showgrid: true,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 30,\n        },\n        gridcolor: theme.gridColor,\n        range: yRange,\n        autorange: !yRange,\n        tickmode: \"array\" as const,\n        tickvals: yTicks,\n        showgrid: true,\n        ...tickOptions,\n      },\n      legend: {\n        x: 0.5,\n        y: -0.2,\n        xanchor: \"center\" as const,\n        yanchor: \"top\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 16,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n        },\n      },\n      showlegend: true,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, effectiveYRange, variant, theme]);\n\n  return (\n    <div className=\"chart-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { LineGraph };\nexport type { LineDataSeries, LineGraphVariant, LineGraphProps, MarkerSymbol };\n"],"names":["LineGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveYRange","yTicks","range","step","ticks","current","xTicks","s","mode","tickOptions","useEffect","plotData","index","color","seriesColor","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}
+{"version":3,"file":"LineGraph.js","sources":["../../../../src/components/charts/LineGraph/LineGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { seriesColor } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n  | \"circle\"\n  | \"circle-open\"\n  | \"circle-dot\"\n  | \"circle-open-dot\"\n  | \"square\"\n  | \"square-open\"\n  | \"square-dot\"\n  | \"square-open-dot\"\n  | \"diamond\"\n  | \"diamond-open\"\n  | \"diamond-dot\"\n  | \"diamond-open-dot\"\n  | \"cross\"\n  | \"cross-open\"\n  | \"cross-dot\"\n  | \"cross-open-dot\"\n  | \"x\"\n  | \"x-open\"\n  | \"x-dot\"\n  | \"x-open-dot\"\n  | \"triangle-up\"\n  | \"triangle-up-open\"\n  | \"triangle-up-dot\"\n  | \"triangle-up-open-dot\"\n  | \"triangle-down\"\n  | \"triangle-down-open\"\n  | \"triangle-down-dot\"\n  | \"triangle-down-open-dot\"\n  | \"triangle-left\"\n  | \"triangle-left-open\"\n  | \"triangle-left-dot\"\n  | \"triangle-left-open-dot\"\n  | \"triangle-right\"\n  | \"triangle-right-open\"\n  | \"triangle-right-dot\"\n  | \"triangle-right-open-dot\"\n  | \"triangle-ne\"\n  | \"triangle-ne-open\"\n  | \"triangle-ne-dot\"\n  | \"triangle-ne-open-dot\"\n  | \"triangle-se\"\n  | \"triangle-se-open\"\n  | \"triangle-se-dot\"\n  | \"triangle-se-open-dot\"\n  | \"triangle-sw\"\n  | \"triangle-sw-open\"\n  | \"triangle-sw-dot\"\n  | \"triangle-sw-open-dot\"\n  | \"triangle-nw\"\n  | \"triangle-nw-open\"\n  | \"triangle-nw-dot\"\n  | \"triangle-nw-open-dot\"\n  | \"pentagon\"\n  | \"pentagon-open\"\n  | \"pentagon-dot\"\n  | \"pentagon-open-dot\"\n  | \"hexagon\"\n  | \"hexagon-open\"\n  | \"hexagon-dot\"\n  | \"hexagon-open-dot\"\n  | \"hexagon2\"\n  | \"hexagon2-open\"\n  | \"hexagon2-dot\"\n  | \"hexagon2-open-dot\"\n  | \"octagon\"\n  | \"octagon-open\"\n  | \"octagon-dot\"\n  | \"octagon-open-dot\"\n  | \"star\"\n  | \"star-open\"\n  | \"star-dot\"\n  | \"star-open-dot\"\n  | \"hexagram\"\n  | \"hexagram-open\"\n  | \"hexagram-dot\"\n  | \"hexagram-open-dot\"\n  | \"star-triangle-up\"\n  | \"star-triangle-up-open\"\n  | \"star-triangle-up-dot\"\n  | \"star-triangle-up-open-dot\"\n  | \"star-triangle-down\"\n  | \"star-triangle-down-open\"\n  | \"star-triangle-down-dot\"\n  | \"star-triangle-down-open-dot\"\n  | \"star-square\"\n  | \"star-square-open\"\n  | \"star-square-dot\"\n  | \"star-square-open-dot\"\n  | \"star-diamond\"\n  | \"star-diamond-open\"\n  | \"star-diamond-dot\"\n  | \"star-diamond-open-dot\"\n  | \"diamond-tall\"\n  | \"diamond-tall-open\"\n  | \"diamond-tall-dot\"\n  | \"diamond-tall-open-dot\"\n  | \"diamond-wide\"\n  | \"diamond-wide-open\"\n  | \"diamond-wide-dot\"\n  | \"diamond-wide-open-dot\"\n  | \"hourglass\"\n  | \"hourglass-open\"\n  | \"bowtie\"\n  | \"bowtie-open\"\n  | \"circle-cross\"\n  | \"circle-cross-open\"\n  | \"circle-x\"\n  | \"circle-x-open\"\n  | \"square-cross\"\n  | \"square-cross-open\"\n  | \"square-x\"\n  | \"square-x-open\"\n  | \"diamond-cross\"\n  | \"diamond-cross-open\"\n  | \"diamond-x\"\n  | \"diamond-x-open\"\n  | \"cross-thin\"\n  | \"cross-thin-open\"\n  | \"x-thin\"\n  | \"x-thin-open\"\n  | \"asterisk\"\n  | \"asterisk-open\"\n  | \"hash\"\n  | \"hash-open\"\n  | \"hash-dot\"\n  | \"hash-open-dot\"\n  | \"y-up\"\n  | \"y-up-open\"\n  | \"y-down\"\n  | \"y-down-open\"\n  | \"y-left\"\n  | \"y-left-open\"\n  | \"y-right\"\n  | \"y-right-open\"\n  | \"line-ew\"\n  | \"line-ew-open\"\n  | \"line-ns\"\n  | \"line-ns-open\"\n  | \"line-ne\"\n  | \"line-ne-open\"\n  | \"line-nw\"\n  | \"line-nw-open\"\n  | \"arrow\"\n  | \"arrow-open\"\n  | \"arrow-wide\"\n  | \"arrow-wide-open\";\n\ninterface LineDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  /** Optional color override (auto-assigned from CHART_COLORS if not provided) */\n  color?: string;\n  symbol?: MarkerSymbol;\n  error_y?: {\n    type: \"data\";\n    array: number[];\n    visible: boolean;\n  };\n}\n\ntype LineGraphVariant = \"lines\" | \"lines+markers\" | \"lines+markers+error_bars\";\n\ntype LineGraphProps = {\n  dataSeries: LineDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  variant?: LineGraphVariant;\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n};\n\nconst LineGraph: React.FC<LineGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  variant = \"lines\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Line Graph\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  const { yMin, yMax } = useMemo(() => {\n    let minX = Number.MAX_VALUE;\n    let maxX = Number.MIN_VALUE;\n    let minY = Number.MAX_VALUE;\n    let maxY = Number.MIN_VALUE;\n\n    dataSeries.forEach((series) => {\n      series.x.forEach((x) => {\n        minX = Math.min(minX, x);\n        maxX = Math.max(maxX, x);\n      });\n      series.y.forEach((y) => {\n        minY = Math.min(minY, y);\n        maxY = Math.max(maxY, y);\n      });\n    });\n\n    const xPadding = (maxX - minX) * 0.1;\n    const yPadding = (maxY - minY) * 0.1;\n\n    return {\n      xMin: minX - xPadding,\n      xMax: maxX + xPadding,\n      yMin: minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries]);\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const yTicks = useMemo(() => {\n    const range = effectiveYRange[1] - effectiveYRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveYRange[0] / step) * step;\n    while (current <= effectiveYRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveYRange]);\n\n  const xTicks = useMemo(\n    () => [...new Set(dataSeries.flatMap((s) => s.x))],\n    [dataSeries],\n  );\n\n  const mode = useMemo((): \"lines\" | \"lines+markers\" => {\n    switch (variant) {\n      case \"lines+markers\":\n      case \"lines+markers+error_bars\":\n        return \"lines+markers\";\n      default:\n        return \"lines\";\n    }\n  }, [variant]);\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: \"Inter, sans-serif\",\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = dataSeries.map((series, index) => {\n      const color = seriesColor(index, series.color);\n      return {\n        x: series.x,\n        y: series.y,\n        type: \"scatter\" as const,\n        mode: mode,\n        name: series.name,\n        hoverinfo: \"none\" as const,\n        line: {\n          color,\n          width: 1.5,\n        },\n        marker:\n          variant === \"lines\"\n            ? { opacity: 0 }\n            : {\n                color,\n                size: 8,\n                symbol: series.symbol || \"triangle-up\",\n              },\n        error_y:\n          variant === \"lines+markers+error_bars\"\n            ? series.error_y || {\n                type: \"data\" as const,\n                array: series.y.map(() => 10),\n                visible: true,\n                color,\n                thickness: 1,\n                width: 5,\n              }\n            : undefined,\n      };\n    });\n\n    const layout = {\n      title: {\n        text: title,\n        font: {\n          size: 32,\n          family: \"Inter, sans-serif\",\n          color: theme.textColor,\n        },\n      },\n      width,\n      height,\n      margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      dragmode: false as const,\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 32,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\n        ticktext: xTicks.map(String),\n        showgrid: true,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 30,\n        },\n        gridcolor: theme.gridColor,\n        range: yRange,\n        autorange: !yRange,\n        tickmode: \"array\" as const,\n        tickvals: yTicks,\n        showgrid: true,\n        ...tickOptions,\n      },\n      legend: {\n        x: 0.5,\n        y: -0.2,\n        xanchor: \"center\" as const,\n        yanchor: \"top\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 16,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n        },\n      },\n      showlegend: true,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, effectiveYRange, variant, theme, bindTooltip]);\n\n  return (\n    <div className=\"chart-container relative\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { LineGraph };\nexport type { LineDataSeries, LineGraphVariant, LineGraphProps, MarkerSymbol };\n"],"names":["LineGraph","dataSeries","width","height","xRange","yRange","variant","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveYRange","yTicks","range","step","ticks","current","xTicks","s","mode","tickOptions","useEffect","plotData","index","color","seriesColor","layout","config","Plotly","plotElement","jsxs","jsx"],"mappings":"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"}

package/dist/components/charts/PieChart/PieChart.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),b=require("plotly.js-dist"),a=require("react"),C=require("../../../hooks/use-plotly-theme.cjs"),N=require("../../../utils/colors.cjs"),j=N.CHART_COLORS,P=({dataSeries:e,width:u=400,height:g=400,title:h="Pie Chart",textInfo:f="percent",hole:p=0,rotation:x=0})=>{const c=a.useRef(null),i=C.usePlotlyTheme(),m=a.useMemo(()=>{if(e.colors&&e.colors.length>=e.labels.length)return e.colors;const s=[...e.colors||[]],r=e.labels.length-s.length;if(r<=0)return s;for(let n=0;n<r;n++)s.push(j[n%j.length]);return s},[e.colors,e.labels.length]);a.useEffect(()=>{if(!c.current)return;const s=[{type:"pie",labels:e.labels,values:e.values,name:e.name,marker:{colors:m},textinfo:f,hoverinfo:"label+text+value",insidetextfont:{size:0,family:"Inter, sans-serif",color:"transparent"},hole:p,rotation:x}],r={width:u,height:g,font:{family:"Inter, sans-serif",color:i.textColor},showlegend:!1,margin:{l:40,r:40,b:40,t:40},paper_bgcolor:i.paperBg,plot_bgcolor:i.plotBg},n={responsive:!0,displayModeBar:!1,displaylogo:!1};b.newPlot(c.current,s,r,n);const t=c.current;return()=>{t&&b.purge(t)}},[m,e.labels,e.name,e.values,u,g,f,p,x,i]);const y=({labels:s,colors:r})=>{const n=s.map((o,v)=>l.jsx(a.Fragment,{children:l.jsxs("div",{className:"legend-item",children:[l.jsx("span",{className:"color-box",style:{background:r[v]}}),o,v<s.length-1&&l.jsx("span",{className:"divider"})]})},o)),t=6,d=[];for(let o=0;o<n.length;o+=t)d.push(l.jsx("div",{className:"legend-row",children:n.slice(o,o+t)},o));return l.jsx("div",{className:"legend-container",children:d})};return l.jsx("div",{className:"card-container",style:{width:u},children:l.jsxs("div",{className:"chart-container",children:[h&&l.jsx("div",{className:"title-container",children:l.jsx("h2",{className:"title",children:h})}),l.jsx("div",{ref:c,style:{width:"100%",height:"100%",margin:"0"}}),l.jsx(y,{labels:e.labels,colors:m})]})})};exports.PieChart=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),j=require("plotly.js-dist"),a=require("react"),P=require("../ChartTooltip/ChartTooltip.cjs"),T=require("../../../hooks/use-plotly-theme.cjs"),R=require("../../../utils/colors.cjs"),y=R.CHART_COLORS,q=({dataSeries:e,width:u=400,height:h=400,title:g="Pie Chart",textInfo:p="percent",hole:f=0,rotation:d=0})=>{const t=a.useRef(null),i=T.usePlotlyTheme(),{bindTooltip:x,tooltipElement:C}=P.useChartTooltip({followCursor:!0}),m=a.useMemo(()=>{if(e.colors&&e.colors.length>=e.labels.length)return e.colors;const s=[...e.colors||[]],r=e.labels.length-s.length;if(r<=0)return s;for(let o=0;o<r;o++)s.push(y[o%y.length]);return s},[e.colors,e.labels.length]);a.useEffect(()=>{if(!t.current)return;const s=[{type:"pie",labels:e.labels,values:e.values,name:e.name,marker:{colors:m},textinfo:p,hoverinfo:"none",insidetextfont:{size:0,family:"Inter, sans-serif",color:"transparent"},hole:f,rotation:d}],r={width:u,height:h,font:{family:"Inter, sans-serif",color:i.textColor},showlegend:!1,margin:{l:40,r:40,b:40,t:40},paper_bgcolor:i.paperBg,plot_bgcolor:i.plotBg},o={responsive:!0,displayModeBar:!1,displaylogo:!1};j.newPlot(t.current,s,r,o),x(t.current);const c=t.current;return()=>{c&&j.purge(c)}},[m,e.labels,e.name,e.values,u,h,p,f,d,i,x]);const N=({labels:s,colors:r})=>{const o=s.map((n,b)=>l.jsx(a.Fragment,{children:l.jsxs("div",{className:"legend-item",children:[l.jsx("span",{className:"color-box",style:{background:r[b]}}),n,b<s.length-1&&l.jsx("span",{className:"divider"})]})},n)),c=6,v=[];for(let n=0;n<o.length;n+=c)v.push(l.jsx("div",{className:"legend-row",children:o.slice(n,n+c)},n));return l.jsx("div",{className:"legend-container",children:v})};return l.jsxs("div",{className:"card-container relative",style:{width:u},children:[l.jsxs("div",{className:"chart-container",children:[g&&l.jsx("div",{className:"title-container",children:l.jsx("h2",{className:"title",children:g})}),l.jsx("div",{ref:t,style:{width:"100%",height:"100%",margin:"0"}}),l.jsx(N,{labels:e.labels,colors:m})]}),C]})};exports.PieChart=q;
 //# sourceMappingURL=PieChart.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.cjs","sources":["../../../../src/components/charts/PieChart/PieChart.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title = \"Pie Chart\",\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"label+text+value\" as const,\n        insidetextfont: {\n          size: 0,\n          family: \"Inter, sans-serif\",\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={label}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: colors[i] }} />\n          {label}\n          {i < labels.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div className=\"card-container\" style={{ width: width }}>\n      <div className=\"chart-container\">\n        {title && (\n          <div className=\"title-container\">\n            <h2 className=\"title\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","PieChartLegend","labels","items","label","jsx","React","jsxs","rowSize","rows"],"mappings":"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"}
+{"version":3,"file":"PieChart.cjs","sources":["../../../../src/components/charts/PieChart/PieChart.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title = \"Pie Chart\",\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Slices are large hover targets, so the tooltip tracks the cursor (clamped\n  // to the viewport) rather than pinning to the slice centroid\n  const { bindTooltip, tooltipElement } = useChartTooltip({ followCursor: true });\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"none\" as const,\n        insidetextfont: {\n          size: 0,\n          family: \"Inter, sans-serif\",\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme, bindTooltip]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={label}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: colors[i] }} />\n          {label}\n          {i < labels.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div className=\"card-container relative\" style={{ width: width }}>\n      <div className=\"chart-container\">\n        {title && (\n          <div className=\"title-container\">\n            <h2 className=\"title\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","PieChartLegend","labels","items","label","jsx","React","jsxs","rowSize","rows"],"mappings":"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"}

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

@@ -1,29 +1,30 @@
-import { jsx as l, jsxs as b } from "react/jsx-runtime";
-import y from "plotly.js-dist";
-import N, { useRef as x, useMemo as P, useEffect as R } from "react";
-import { usePlotlyTheme as _ } from "../../../hooks/use-plotly-theme.js";
-import { CHART_COLORS as L } from "../../../utils/colors.js";
-const C = L, k = ({
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import C from "plotly.js-dist";
+import x, { useRef as R, useMemo as _, useEffect as w } from "react";
+import { useChartTooltip as L } from "../ChartTooltip/ChartTooltip.js";
+import { usePlotlyTheme as T } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as E } from "../../../utils/colors.js";
+const N = E, F = ({
   dataSeries: e,
   width: a = 400,
   height: f = 400,
-  title: p = "Pie Chart",
-  textInfo: u = "percent",
+  title: u = "Pie Chart",
+  textInfo: h = "percent",
   hole: g = 0,
-  rotation: h = 0
+  rotation: d = 0
 }) => {
-  const c = x(null), i = _(), m = P(() => {
+  const s = R(null), i = T(), { bindTooltip: v, tooltipElement: P } = L({ followCursor: !0 }), m = _(() => {
     if (e.colors && e.colors.length >= e.labels.length)
       return e.colors;
-    const o = [...e.colors || []], s = e.labels.length - o.length;
-    if (s <= 0) return o;
-    for (let n = 0; n < s; n++)
-      o.push(C[n % C.length]);
-    return o;
+    const l = [...e.colors || []], t = e.labels.length - l.length;
+    if (t <= 0) return l;
+    for (let n = 0; n < t; n++)
+      l.push(N[n % N.length]);
+    return l;
   }, [e.colors, e.labels.length]);
-  return R(() => {
-    if (!c.current) return;
-    const o = [
+  return w(() => {
+    if (!s.current) return;
+    const l = [
       {
         type: "pie",
         labels: e.labels,
@@ -32,17 +33,17 @@ const C = L, k = ({
         marker: {
           colors: m
         },
-        textinfo: u,
-        hoverinfo: "label+text+value",
+        textinfo: h,
+        hoverinfo: "none",
         insidetextfont: {
           size: 0,
           family: "Inter, sans-serif",
           color: "transparent"
         },
         hole: g,
-        rotation: h
+        rotation: d
       }
-    ], s = {
+    ], t = {
       width: a,
       height: f,
       font: {
@@ -58,42 +59,45 @@ const C = L, k = ({
       displayModeBar: !1,
       displaylogo: !1
     };
-    y.newPlot(c.current, o, s, n);
-    const t = c.current;
+    C.newPlot(s.current, l, t, n), v(s.current);
+    const c = s.current;
     return () => {
-      t && y.purge(t);
+      c && C.purge(c);
     };
-  }, [m, e.labels, e.name, e.values, a, f, u, g, h, i]), /* @__PURE__ */ l("div", { className: "card-container", style: { width: a }, children: /* @__PURE__ */ b("div", { className: "chart-container", children: [
-    p && /* @__PURE__ */ l("div", { className: "title-container", children: /* @__PURE__ */ l("h2", { className: "title", children: p }) }),
-    /* @__PURE__ */ l(
-      "div",
-      {
-        ref: c,
-        style: {
-          width: "100%",
-          height: "100%",
-          margin: "0"
+  }, [m, e.labels, e.name, e.values, a, f, h, g, d, i, v]), /* @__PURE__ */ p("div", { className: "card-container relative", style: { width: a }, children: [
+    /* @__PURE__ */ p("div", { className: "chart-container", children: [
+      u && /* @__PURE__ */ o("div", { className: "title-container", children: /* @__PURE__ */ o("h2", { className: "title", children: u }) }),
+      /* @__PURE__ */ o(
+        "div",
+        {
+          ref: s,
+          style: {
+            width: "100%",
+            height: "100%",
+            margin: "0"
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ l(({
-      labels: o,
-      colors: s
-    }) => {
-      const n = o.map((r, v) => /* @__PURE__ */ l(N.Fragment, { children: /* @__PURE__ */ b("div", { className: "legend-item", children: [
-        /* @__PURE__ */ l("span", { className: "color-box", style: { background: s[v] } }),
-        r,
-        v < o.length - 1 && /* @__PURE__ */ l("span", { className: "divider" })
-      ] }) }, r)), t = 6, d = [];
-      for (let r = 0; r < n.length; r += t)
-        d.push(
-          /* @__PURE__ */ l("div", { className: "legend-row", children: n.slice(r, r + t) }, r)
-        );
-      return /* @__PURE__ */ l("div", { className: "legend-container", children: d });
-    }, { labels: e.labels, colors: m })
-  ] }) });
+      ),
+      /* @__PURE__ */ o(({
+        labels: l,
+        colors: t
+      }) => {
+        const n = l.map((r, y) => /* @__PURE__ */ o(x.Fragment, { children: /* @__PURE__ */ p("div", { className: "legend-item", children: [
+          /* @__PURE__ */ o("span", { className: "color-box", style: { background: t[y] } }),
+          r,
+          y < l.length - 1 && /* @__PURE__ */ o("span", { className: "divider" })
+        ] }) }, r)), c = 6, b = [];
+        for (let r = 0; r < n.length; r += c)
+          b.push(
+            /* @__PURE__ */ o("div", { className: "legend-row", children: n.slice(r, r + c) }, r)
+          );
+        return /* @__PURE__ */ o("div", { className: "legend-container", children: b });
+      }, { labels: e.labels, colors: m })
+    ] }),
+    P
+  ] });
 };
 export {
-  k as PieChart
+  F as PieChart
 };
 //# sourceMappingURL=PieChart.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.js","sources":["../../../../src/components/charts/PieChart/PieChart.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title = \"Pie Chart\",\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"label+text+value\" as const,\n        insidetextfont: {\n          size: 0,\n          family: \"Inter, sans-serif\",\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={label}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: colors[i] }} />\n          {label}\n          {i < labels.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div className=\"card-container\" style={{ width: width }}>\n      <div className=\"chart-container\">\n        {title && (\n          <div className=\"title-container\">\n            <h2 className=\"title\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","jsx","jsxs","labels","items","label","React","rowSize","rows"],"mappings":"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"}
+{"version":3,"file":"PieChart.js","sources":["../../../../src/components/charts/PieChart/PieChart.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title = \"Pie Chart\",\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Slices are large hover targets, so the tooltip tracks the cursor (clamped\n  // to the viewport) rather than pinning to the slice centroid\n  const { bindTooltip, tooltipElement } = useChartTooltip({ followCursor: true });\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"none\" as const,\n        insidetextfont: {\n          size: 0,\n          family: \"Inter, sans-serif\",\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme, bindTooltip]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={label}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: colors[i] }} />\n          {label}\n          {i < labels.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div className=\"card-container relative\" style={{ width: width }}>\n      <div className=\"chart-container\">\n        {title && (\n          <div className=\"title-container\">\n            <h2 className=\"title\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","jsxs","jsx","labels","items","label","React","rowSize","rows"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),Re=require("plotly.js-dist"),m=require("react");;/* empty css                */const r=require("./constants.cjs"),v=require("./types.cjs"),c=require("./utils.cjs"),tt=require("../../ui/button.cjs"),at=require("../../../hooks/use-plotly-theme.cjs"),lt=({data:S,layerConfigs:re,initialLayerId:we,onLayerChange:Pe,plateFormat:ne=v.PLATE_FORMAT_96,rows:be,columns:ze,visualizationMode:Ie="heatmap",categoryColors:ce,regions:x,title:C,xTitle:ie,yTitle:F,xLabels:De,yLabels:Fe,colorScale:je=r.DEFAULT_COLOR_SCALE,valueMin:ke,valueMax:Ge,emptyWellColor:T=r.COLORS.emptyWell,showColorBar:pe=!0,showLegend:$e=!0,legendConfig:_,width:N=800,height:j=500,precision:ue=0,markerShape:H="circle",onWellClick:de})=>{const me=m.useRef(null),h=at.usePlotlyTheme(),Y=m.useRef(de);Y.current=de;const[W,Ue]=m.useState(we);let i,p;if(ne===v.PLATE_FORMAT_CUSTOM)i=be??8,p=ze??12;else{const e=r.PLATE_CONFIGS[ne];i=e.rows,p=e.columns}const d=m.useMemo(()=>{if(Array.isArray(S)&&S.length>0&&"wellId"in S[0]){const e=S;if(c.hasMultiValueWells(e))return c.extractLayers(e,re)}return null},[S,re]),f=m.useMemo(()=>!d||d.length===0?null:W?d.find(e=>e.id===W)??d[0]:d[0],[d,W]),R=f?.visualizationMode??Ie,L=f?.colorScale??je,qe=f?.valueMin??ke,Ve=f?.valueMax??Ge,X=f?.valueUnit?` ${f.valueUnit}`:"",k=m.useMemo(()=>({...r.DEFAULT_CATEGORY_COLORS,...ce,...f?.categoryColors}),[ce,f?.categoryColors]),fe=f?.id,{grid:O,categoriesGrid:J,allValuesMap:K,tooltipDataMap:Q}=m.useMemo(()=>{let e,t=Array.from({length:i},()=>Array(p).fill(null)),l=new Map,o=new Map;if(Array.isArray(S)&&S.length>0){const a=c.wellDataToGrid(S,i,p,fe);e=a.grid,t=a.categories,l=a.allValues,o=a.tooltipData}else e=Array.from({length:i},()=>Array.from({length:p},()=>Math.random()*r.PLATEMAP_CONSTANTS.MAX_RANDOM_VALUE));return{grid:e,categoriesGrid:t,allValuesMap:l,tooltipDataMap:o}},[S,i,p,fe]),y=Fe??c.generateRowLabels(i),E=De??c.generateColumnLabels(p),ge=c.calculateValueRange(O),w=qe??ge.min,P=Ve??ge.max,G=O.some(e=>e.includes(null)),b=w-(P-w)*r.PLATEMAP_CONSTANTS.SENTINEL_RATIO-1,Ae=G?O.map(e=>e.map(t=>t===null?b:t)):O,Se=m.useMemo(()=>{if(!G)return L;let e;if(typeof L=="string"){const a=r.NAMED_COLORSCALES[L];if(a)e=a;else return L}else e=L;const t=P-b,l=(w-b)/t,o=[[0,T],[l*r.PLATEMAP_CONSTANTS.COLOR_SCALE_THRESHOLD,T]];for(const[a,u]of e){const g=l+a*(1-l);o.push([g,u])}return o},[L,G,w,P,b,T]),_e=G?b:w,Be=m.useMemo(()=>{const e=new Map;if(d)for(const t of d)e.set(t.id,t);return e},[d]),he=O.map((e,t)=>e.map((l,o)=>{const a=`${y[t]}${E[o]}`,u=String(a).toUpperCase();return c.buildWellHoverText({wellId:a,value:l,allValues:K.get(u),tooltipExtra:Q.get(u),activeLayerId:f?.id,layerConfigMap:Be,precision:ue,valueUnit:X})})),{categoricalGrid:ee,categoricalColorScale:te,uniqueTypes:ae,catMax:xe}=m.useMemo(()=>{if(R!=="categorical")return{categoricalGrid:null,categoricalColorScale:null,uniqueTypes:[],catMax:0};const e=new Set;let t=!1;for(const n of J)for(const A of n)A?e.add(A):t=!0;t&&e.add("empty");const l=[...e].sort(),o=new Map;l.forEach((n,A)=>o.set(n,A));const a=J.map(n=>n.map(A=>A===null?o.get("empty")??0:o.get(A)??o.get("empty")??0)),u=l.length,g=[];if(u===1){const n=k[l[0]]||T;g.push([0,n]),g.push([1,n])}else l.forEach((n,A)=>{const V=k[n]||T,B=A/(u-1),Z=.5/(u-1),oe=Math.max(0,B-Z),D=Math.min(1,B+Z-r.PLATEMAP_CONSTANTS.COLOR_SCALE_EPSILON);g.push([oe,V]),g.push([D,V])});return{categoricalGrid:a,categoricalColorScale:g,uniqueTypes:l,catMax:u-1}},[R,J,k,T]),Te=m.useMemo(()=>{if(!x||x.length===0)return[];const e=[];for(const t of x){const l=c.parseRegionWells(t.wells,y,E);if(!l)continue;const o=.49,a=l.minCol+1-o,u=l.maxCol+1+o,g=l.minRow-o,n=l.maxRow+o;e.push({type:"rect",xref:"x",yref:"y",x0:a,x1:u,y0:g,y1:n,line:{color:t.borderColor||r.COLORS.textDark,width:t.borderWidth??2},fillcolor:t.fillColor||"transparent",layer:"above"})}return e},[x,y,E]);m.useEffect(()=>{const e=me.current;if(!e)return;const t=R==="categorical",l=t&&ee?ee:Ae,o=t&&te?te:Se,a=t?0:_e,u=t?xe||1:P,g=t?!1:pe,{xData:n,yData:A,colorData:V,textData:B}=c.flattenGridData(l,y,he,i,p,a),Z=c.calculateMarkerSize(N,j,i,p,H,!!C,!!F),oe=[{x:n,y:A,mode:"markers",type:"scatter",marker:{symbol:H,size:Z,color:V,colorscale:o,cmin:a,cmax:u,showscale:g,colorbar:c.buildColorbarConfig(_?.position??"right",X,_?.title),line:{color:h.gridColor,width:1}},hoverinfo:"text",text:B}],D=_?.position??"right",Xe={autosize:!1,title:C?{text:C,font:{family:"Inter, sans-serif",size:20,color:h.textSecondary},x:c.calculateTitleX(D),xanchor:"center",y:.98,yanchor:"top"}:void 0,width:N,height:j,margin:c.buildPlotMargins(D,!!C,!!F),xaxis:{title:{text:ie||"",font:{size:16,color:h.textSecondary,family:"Inter, sans-serif"},standoff:15},side:"top",fixedrange:!0,dtick:1,range:[.5,p+.5],automargin:!1,tickmode:"array",tickvals:Array.from({length:p},(se,M)=>M+1),ticktext:E.map(String),tickangle:0,tickfont:{size:p>24?8:r.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE},domain:c.calculateAxisDomain(D)},yaxis:{title:{text:F||"",font:{size:16,color:h.textSecondary,family:"Inter, sans-serif"},standoff:15},fixedrange:!0,dtick:1,range:[i+r.PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET,r.PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET],automargin:!1,tickmode:"array",tickvals:Array.from({length:i},(se,M)=>M),ticktext:y.map(String),tickfont:{size:i>16?8:r.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE}},paper_bgcolor:h.paperBg,plot_bgcolor:h.plotBg,font:{family:"Inter, sans-serif",color:h.textSecondary},shapes:Te},Je={responsive:!0,displayModeBar:!1,displaylogo:!1};return Re.newPlot(e,oe,Xe,Je),e.on("plotly_click",se=>{if(!Y.current)return;const M=se.points[0];if(M){const Le=y,Oe=E,Ee=Le.indexOf(M.y),ve=Oe.indexOf(M.x);if(Ee>=0&&ve>=0){const Ce=`${Le[Ee]}${Oe[ve]}`,Ne=String(Ce).toUpperCase(),Ke=K.get(Ne),Qe=Q.get(Ne),et={wellId:Ce,values:Ke,tooltipData:Qe};Y.current?.(et)}}}),()=>{e&&Re.purge(e)}},[Ae,E,y,Se,pe,_e,P,X,C,ie,F,N,j,he,ue,Q,K,O,R,ee,te,ae.length,xe,Te,i,p,_,H,h]);const Ze=()=>!d||d.length<=1?null:s.jsx("div",{className:"platemap-layer-selector",children:d.map(e=>{const t=f?.id===e.id;return s.jsx(tt.Button,{variant:t?"default":"outline",size:"sm",onClick:()=>{Ue(e.id),Pe?.(e.id)},children:e.name},e.id)})}),z=_?.position??"right",le=_?.fontSize??12,He=_?.itemSpacing??4,$=_?.swatchSize??16,ye=_?.title,Me=120,I=z==="top"||z==="bottom",Ye=()=>{const e=R==="categorical"&&ae.length>0,t=x&&x.length>0;if(!$e||!e&&!t)return I?null:s.jsx("div",{className:"platemap-legend-placeholder",style:{width:Me}});const l=["platemap-legend"];I?l.push("platemap-legend--horizontal"):z==="left"?l.push("platemap-legend--left"):z==="right"&&l.push("platemap-legend--right");const o={gap:`${He}px`,width:I?void 0:Me};return s.jsxs("div",{className:l.join(" "),style:o,children:[ye&&s.jsx("div",{className:`platemap-legend__title${I?" platemap-legend__title--horizontal":""}`,style:{fontSize:`${le}px`},children:ye}),e&&ae.map(a=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch",style:{width:`${$}px`,height:`${$}px`,backgroundColor:k[a]||T}}),s.jsx("span",{className:"platemap-legend__label platemap-legend__label--capitalize",style:{fontSize:`${le}px`},children:a})]},a)),t&&x.map(a=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch platemap-legend__swatch--region",style:{width:`${$}px`,height:`${$}px`,backgroundColor:a.fillColor||"transparent",border:`${a.borderWidth||2}px solid ${a.borderColor||r.COLORS.regionBorder}`}}),s.jsx("span",{className:"platemap-legend__label",style:{fontSize:`${le}px`},children:a.name})]},a.id))]})},U=s.jsx("div",{ref:me,className:"platemap-plot",style:{width:N,height:j}}),q=Ye(),We=()=>{switch(z){case"left":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[q,U]});case"top":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[q,U]});case"bottom":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[U,q]});default:return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[U,q]})}};return s.jsxs("div",{className:"platemap-container",style:{width:I?void 0:N},children:[Ze(),We()]})};exports.DEFAULT_CATEGORY_COLORS=r.DEFAULT_CATEGORY_COLORS;exports.PLATE_FORMAT_1536=v.PLATE_FORMAT_1536;exports.PLATE_FORMAT_384=v.PLATE_FORMAT_384;exports.PLATE_FORMAT_96=v.PLATE_FORMAT_96;exports.PLATE_FORMAT_CUSTOM=v.PLATE_FORMAT_CUSTOM;exports.PlateMap=lt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),De=require("plotly.js-dist"),r=require("react");;/* empty css                */const ot=require("../ChartTooltip/ChartTooltip.cjs"),n=require("./constants.cjs"),R=require("./types.cjs"),u=require("./utils.cjs"),lt=require("../../ui/button.cjs"),st=require("../../../hooks/use-plotly-theme.cjs"),rt=({data:h,layerConfigs:ce,initialLayerId:Ie,onLayerChange:je,plateFormat:ie=R.PLATE_FORMAT_96,rows:Fe,columns:ke,visualizationMode:Ge="heatmap",categoryColors:pe,regions:M,title:v,xTitle:ue,yTitle:w,xLabels:de,yLabels:me,colorScale:$e=n.DEFAULT_COLOR_SCALE,valueMin:Ue,valueMax:qe,emptyWellColor:y=n.COLORS.emptyWell,showColorBar:fe=!0,showLegend:Ve=!0,legendConfig:_,width:E=800,height:P=500,precision:J=0,markerShape:G="circle",onWellClick:ge})=>{const Ae=r.useRef(null),x=st.usePlotlyTheme(),K=r.useRef(ge);K.current=ge;const[Q,Be]=r.useState(Ie);let c,i;if(ie===R.PLATE_FORMAT_CUSTOM)c=Fe??8,i=ke??12;else{const e=n.PLATE_CONFIGS[ie];c=e.rows,i=e.columns}const ee=r.useMemo(()=>u.calculateMarkerSize(E,P,c,i,G,!!v,!!w),[E,P,c,i,G,v,w]),{bindTooltip:he,tooltipElement:Ze}=ot.useChartTooltip({hoverDistance:Math.ceil(ee/2)}),m=r.useMemo(()=>{if(Array.isArray(h)&&h.length>0&&"wellId"in h[0]){const e=h;if(u.hasMultiValueWells(e))return u.extractLayers(e,ce)}return null},[h,ce]),f=r.useMemo(()=>!m||m.length===0?null:Q?m.find(e=>e.id===Q)??m[0]:m[0],[m,Q]),b=f?.visualizationMode??Ge,C=f?.colorScale??$e,He=f?.valueMin??Ue,We=f?.valueMax??qe,$=f?.valueUnit?` ${f.valueUnit}`:"",U=r.useMemo(()=>({...n.DEFAULT_CATEGORY_COLORS,...pe,...f?.categoryColors}),[pe,f?.categoryColors]),_e=f?.id,{grid:S,categoriesGrid:te,allValuesMap:q,tooltipDataMap:V}=r.useMemo(()=>{let e,t=Array.from({length:c},()=>Array(i).fill(null)),o=new Map,l=new Map;if(Array.isArray(h)&&h.length>0){const a=u.wellDataToGrid(h,c,i,_e);e=a.grid,t=a.categories,o=a.allValues,l=a.tooltipData}else e=Array.from({length:c},()=>Array.from({length:i},()=>Math.random()*n.PLATEMAP_CONSTANTS.MAX_RANDOM_VALUE));return{grid:e,categoriesGrid:t,allValuesMap:o,tooltipDataMap:l}},[h,c,i,_e]),T=r.useMemo(()=>me??u.generateRowLabels(c),[me,c]),L=r.useMemo(()=>de??u.generateColumnLabels(i),[de,i]),xe=u.calculateValueRange(S),z=He??xe.min,D=We??xe.max,I=S.some(e=>e.includes(null)),N=z-(D-z)*n.PLATEMAP_CONSTANTS.SENTINEL_RATIO-1,Se=r.useMemo(()=>I?S.map(e=>e.map(t=>t===null?N:t)):S,[I,S,N]),Te=r.useMemo(()=>{if(!I)return C;let e;if(typeof C=="string"){const a=n.NAMED_COLORSCALES[C];if(a)e=a;else return C}else e=C;const t=D-N,o=(z-N)/t,l=[[0,y],[o*n.PLATEMAP_CONSTANTS.COLOR_SCALE_THRESHOLD,y]];for(const[a,d]of e){const g=o+a*(1-o);l.push([g,d])}return l},[C,I,z,D,N,y]),Me=I?N:z,ye=r.useMemo(()=>{const e=new Map;if(m)for(const t of m)e.set(t.id,t);return e},[m]),Le=r.useMemo(()=>S.map((e,t)=>e.map((o,l)=>{const a=`${T[t]}${L[l]}`,d=String(a).toUpperCase();return u.buildWellHoverText({wellId:a,value:o,allValues:q.get(d),tooltipExtra:V.get(d),activeLayerId:f?.id,layerConfigMap:ye,precision:J,valueUnit:$})})),[S,T,L,q,V,f?.id,ye,J,$]),{categoricalGrid:ae,categoricalColorScale:oe,uniqueTypes:le,catMax:Oe}=r.useMemo(()=>{if(b!=="categorical")return{categoricalGrid:null,categoricalColorScale:null,uniqueTypes:[],catMax:0};const e=new Set;let t=!1;for(const p of te)for(const A of p)A?e.add(A):t=!0;t&&e.add("empty");const o=[...e].sort(),l=new Map;o.forEach((p,A)=>l.set(p,A));const a=te.map(p=>p.map(A=>A===null?l.get("empty")??0:l.get(A)??l.get("empty")??0)),d=o.length,g=[];if(d===1){const p=U[o[0]]||y;g.push([0,p]),g.push([1,p])}else o.forEach((p,A)=>{const W=U[p]||y,Y=A/(d-1),X=.5/(d-1),k=Math.max(0,Y-X),re=Math.min(1,Y+X-n.PLATEMAP_CONSTANTS.COLOR_SCALE_EPSILON);g.push([k,W]),g.push([re,W])});return{categoricalGrid:a,categoricalColorScale:g,uniqueTypes:o,catMax:d-1}},[b,te,U,y]),ve=r.useMemo(()=>{if(!M||M.length===0)return[];const e=[];for(const t of M){const o=u.parseRegionWells(t.wells,T,L);if(!o)continue;const l=.49,a=o.minCol+1-l,d=o.maxCol+1+l,g=o.minRow-l,p=o.maxRow+l;e.push({type:"rect",xref:"x",yref:"y",x0:a,x1:d,y0:g,y1:p,line:{color:t.borderColor||n.COLORS.textDark,width:t.borderWidth??2},fillcolor:t.fillColor||"transparent",layer:"above"})}return e},[M,T,L]);r.useEffect(()=>{const e=Ae.current;if(!e)return;const t=b==="categorical",o=t&&ae?ae:Se,l=t&&oe?oe:Te,a=t?0:Me,d=t?Oe||1:D,g=t?!1:fe,{xData:p,yData:A,colorData:W,textData:Y}=u.flattenGridData(o,T,Le,c,i,a),X=[{x:p,y:A,mode:"markers",type:"scatter",marker:{symbol:G,size:ee,color:W,colorscale:l,cmin:a,cmax:d,showscale:g,colorbar:u.buildColorbarConfig(_?.position??"right",$,_?.title),line:{color:x.gridColor,width:1}},hoverinfo:"none",text:Y}],k=_?.position??"right",re={autosize:!1,title:v?{text:v,font:{family:"Inter, sans-serif",size:20,color:x.textSecondary},x:u.calculateTitleX(k),xanchor:"center",y:.98,yanchor:"top"}:void 0,width:E,height:P,margin:u.buildPlotMargins(k,!!v,!!w),xaxis:{title:{text:ue||"",font:{size:16,color:x.textSecondary,family:"Inter, sans-serif"},standoff:15},side:"top",fixedrange:!0,dtick:1,range:[.5,i+.5],automargin:!1,tickmode:"array",tickvals:Array.from({length:i},(ne,O)=>O+1),ticktext:L.map(String),tickangle:0,tickfont:{size:i>24?8:n.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE},domain:u.calculateAxisDomain(k)},yaxis:{title:{text:w||"",font:{size:16,color:x.textSecondary,family:"Inter, sans-serif"},standoff:15},fixedrange:!0,dtick:1,range:[c+n.PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET,n.PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET],automargin:!1,tickmode:"array",tickvals:Array.from({length:c},(ne,O)=>O),ticktext:T.map(String),tickfont:{size:c>16?8:n.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE}},paper_bgcolor:x.paperBg,plot_bgcolor:x.plotBg,font:{family:"Inter, sans-serif",color:x.textSecondary},shapes:ve},Qe={responsive:!0,displayModeBar:!1,displaylogo:!1};return De.newPlot(e,X,re,Qe),he(e),e.on("plotly_click",ne=>{if(!K.current)return;const O=ne.points[0];if(O){const Ne=T,Re=L,we=Ne.indexOf(O.y),Pe=Re.indexOf(O.x);if(we>=0&&Pe>=0){const be=`${Ne[we]}${Re[Pe]}`,ze=String(be).toUpperCase(),et=q.get(ze),tt=V.get(ze),at={wellId:be,values:et,tooltipData:tt};K.current?.(at)}}}),()=>{e&&De.purge(e)}},[Se,L,T,Te,fe,Me,D,$,v,ue,w,E,P,Le,J,V,q,S,b,ae,oe,le.length,Oe,ve,c,i,_,G,ee,x,he]);const Ye=()=>!m||m.length<=1?null:s.jsx("div",{className:"platemap-layer-selector",children:m.map(e=>{const t=f?.id===e.id;return s.jsx(lt.Button,{variant:t?"default":"outline",size:"sm",onClick:()=>{Be(e.id),je?.(e.id)},children:e.name},e.id)})}),j=_?.position??"right",se=_?.fontSize??12,Xe=_?.itemSpacing??4,B=_?.swatchSize??16,Ee=_?.title,Ce=120,F=j==="top"||j==="bottom",Je=()=>{const e=b==="categorical"&&le.length>0,t=M&&M.length>0;if(!Ve||!e&&!t)return F?null:s.jsx("div",{className:"platemap-legend-placeholder",style:{width:Ce}});const o=["platemap-legend"];F?o.push("platemap-legend--horizontal"):j==="left"?o.push("platemap-legend--left"):j==="right"&&o.push("platemap-legend--right");const l={gap:`${Xe}px`,width:F?void 0:Ce};return s.jsxs("div",{className:o.join(" "),style:l,children:[Ee&&s.jsx("div",{className:`platemap-legend__title${F?" platemap-legend__title--horizontal":""}`,style:{fontSize:`${se}px`},children:Ee}),e&&le.map(a=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch",style:{width:`${B}px`,height:`${B}px`,backgroundColor:U[a]||y}}),s.jsx("span",{className:"platemap-legend__label platemap-legend__label--capitalize",style:{fontSize:`${se}px`},children:a})]},a)),t&&M.map(a=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch platemap-legend__swatch--region",style:{width:`${B}px`,height:`${B}px`,backgroundColor:a.fillColor||"transparent",border:`${a.borderWidth||2}px solid ${a.borderColor||n.COLORS.regionBorder}`}}),s.jsx("span",{className:"platemap-legend__label",style:{fontSize:`${se}px`},children:a.name})]},a.id))]})},Z=s.jsxs("div",{className:"relative",children:[s.jsx("div",{ref:Ae,className:"platemap-plot",style:{width:E,height:P}}),Ze]}),H=Je(),Ke=()=>{switch(j){case"left":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[H,Z]});case"top":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[H,Z]});case"bottom":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[Z,H]});default:return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[Z,H]})}};return s.jsxs("div",{className:"platemap-container",style:{width:F?void 0:E},children:[Ye(),Ke()]})};exports.DEFAULT_CATEGORY_COLORS=n.DEFAULT_CATEGORY_COLORS;exports.PLATE_FORMAT_1536=R.PLATE_FORMAT_1536;exports.PLATE_FORMAT_384=R.PLATE_FORMAT_384;exports.PLATE_FORMAT_96=R.PLATE_FORMAT_96;exports.PLATE_FORMAT_CUSTOM=R.PLATE_FORMAT_CUSTOM;exports.PlateMap=rt;
 //# sourceMappingURL=PlateMap.cjs.map