@backstage-community/plugin-apiiro 0.1.0

package/dist/components/charts/GaugeChart.esm.js

@@ -0,0 +1,249 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Gauge, gaugeClasses, useGaugeState } from '@mui/x-charts/Gauge';
+import { useState, useRef, useEffect } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { getGaugeColors } from '../../theme/themeUtils.esm.js';
+import { CustomTooltip } from '../common/CustomTooltip.esm.js';
+import Typography from '@mui/material/Typography';
+
+const getArcColor = (value, tickValue, gaugeColors) => {
+  if (tickValue === 0) {
+    return gaugeColors.background;
+  }
+  return value > tickValue ? gaugeColors.warning : gaugeColors.success;
+};
+function GaugeCenterLabel({
+  value,
+  width,
+  height,
+  unit = "Hours"
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: width / 2,
+        y: height / 2 / 2 + 20,
+        fontSize: "24px",
+        fontWeight: "bold",
+        fill: theme.palette.text.primary,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        children: value ? Math.round(value) : "-"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: width / 2,
+        y: height / 2 / 2 + 40,
+        fontSize: "12px",
+        fontWeight: "100",
+        fill: theme.palette.text.secondary,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        children: value ? unit : null
+      }
+    )
+  ] });
+}
+function GaugeBottomLabels({
+  minValue,
+  maxValue,
+  categoryLabel,
+  width = "135px"
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width,
+        marginTop: 7
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            style: { fontSize: "14px", color: theme.palette.text.secondary },
+            children: minValue
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            style: {
+              fontSize: "14px",
+              fontWeight: 400,
+              color: theme.palette.text.primary
+            },
+            children: categoryLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            style: { fontSize: "14px", color: theme.palette.text.secondary },
+            children: maxValue
+          }
+        )
+      ]
+    }
+  );
+}
+function GaugePointer({
+  markerValue,
+  min = 0,
+  max = 100,
+  displayMarkerValue
+}) {
+  const theme = useTheme();
+  const gaugeColors = getGaugeColors(theme);
+  const { startAngle, endAngle, innerRadius, outerRadius, cx, cy } = useGaugeState();
+  if (markerValue === null || markerValue === void 0) {
+    return null;
+  }
+  const clampedValue = Math.min(Math.max(markerValue, min), max);
+  const valueRatio = (clampedValue - min) / (max - min);
+  const valueAngle = startAngle + valueRatio * (endAngle - startAngle);
+  const x1 = cx + innerRadius * Math.sin(valueAngle);
+  const y1 = cy - innerRadius * Math.cos(valueAngle);
+  const x2 = cx + outerRadius * Math.sin(valueAngle);
+  const y2 = cy - outerRadius * Math.cos(valueAngle);
+  const labelOffset = 10;
+  const labelRadius = outerRadius + labelOffset;
+  const labelX = cx + labelRadius * Math.sin(valueAngle);
+  const labelY = cy - labelRadius * Math.cos(valueAngle);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1,
+        y1,
+        x2,
+        y2,
+        stroke: gaugeColors.pointer,
+        strokeWidth: 2,
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: labelX,
+        y: labelY,
+        fontSize: "12px",
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        fill: theme.palette.text.primary,
+        children: [
+          displayMarkerValue || markerValue,
+          "*"
+        ]
+      }
+    )
+  ] });
+}
+function GaugeChart({
+  width,
+  height,
+  value,
+  tickValue,
+  minValue,
+  maxValue,
+  tooltip,
+  unit = "Hours",
+  displayValue,
+  displayTickValue
+}) {
+  const theme = useTheme();
+  const gaugeColors = getGaugeColors(theme);
+  const [animatedValue, setAnimatedValue] = useState(0);
+  const animationRef = useRef();
+  const currentValueRef = useRef(0);
+  const animateValue = (start, end, duration = 1e3) => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+    const startTime = Date.now();
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeOut = 1 - Math.pow(1 - progress, 3);
+      const currentValue = start + (end - start) * easeOut;
+      setAnimatedValue(currentValue);
+      currentValueRef.current = currentValue;
+      if (progress < 1) {
+        animationRef.current = requestAnimationFrame(animate);
+      }
+    };
+    animate();
+  };
+  useEffect(() => {
+    animateValue(currentValueRef.current, value);
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [value]);
+  const margin = { top: 20, right: 20, bottom: 20, left: 20 };
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const outerRadius = Math.min(innerWidth, innerHeight) / 2.2;
+  const innerRadius = outerRadius * 0.72;
+  const arcColor = getArcColor(value, tickValue, gaugeColors);
+  const gaugeElement = /* @__PURE__ */ jsxs(
+    Gauge,
+    {
+      width,
+      height: height / 2,
+      startAngle: -90,
+      endAngle: 90,
+      innerRadius,
+      outerRadius,
+      value: animatedValue,
+      valueMin: minValue,
+      valueMax: maxValue,
+      text: () => null,
+      sx: () => ({
+        [`& .${gaugeClasses.valueArc}`]: {
+          fill: arcColor,
+          transition: "none"
+          // Disable default transitions to let react-spring handle it
+        },
+        [`& .${gaugeClasses.referenceArc}`]: {
+          fill: gaugeColors.background
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          GaugePointer,
+          {
+            markerValue: tickValue,
+            min: minValue,
+            max: maxValue,
+            displayMarkerValue: displayTickValue
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          GaugeCenterLabel,
+          {
+            value: displayValue || animatedValue,
+            width,
+            height,
+            unit
+          }
+        )
+      ]
+    }
+  );
+  return tooltip ? /* @__PURE__ */ jsx("div", { style: { display: "inline-block", cursor: "pointer" }, children: /* @__PURE__ */ jsx(CustomTooltip, { title: tooltip, placement: "top", children: /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, children: gaugeElement }) }) }) : gaugeElement;
+}
+
+export { GaugeBottomLabels, GaugeChart as default };
+//# sourceMappingURL=GaugeChart.esm.js.map

package/dist/components/charts/GaugeChart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.esm.js","sources":["../../../src/components/charts/GaugeChart.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useGaugeState, Gauge, gaugeClasses } from '@mui/x-charts/Gauge';\nimport { useState, useEffect, useRef } from 'react';\nimport { useTheme } from '@mui/material/styles';\nimport { getGaugeColors } from '../../theme/themeUtils';\nimport CustomTooltip from '../common/CustomTooltip';\nimport Typography from '@mui/material/Typography';\n\nconst getArcColor = (\n  value: number,\n  tickValue: number,\n  gaugeColors: ReturnType<typeof getGaugeColors>,\n) => {\n  if (tickValue === 0) {\n    return gaugeColors.background;\n  }\n  return value > tickValue ? gaugeColors.warning : gaugeColors.success;\n};\n\nfunction GaugeCenterLabel({\n  value,\n  width,\n  height,\n  unit = 'Hours',\n}: {\n  value: number;\n  width: number;\n  height: number;\n  unit?: string;\n}) {\n  const theme = useTheme();\n  return (\n    <g>\n      <text\n        x={width / 2}\n        y={height / 2 / 2 + 20}\n        fontSize=\"24px\"\n        fontWeight=\"bold\"\n        fill={theme.palette.text.primary}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n      >\n        {value ? Math.round(value) : '-'}\n      </text>\n      <text\n        x={width / 2}\n        y={height / 2 / 2 + 40}\n        fontSize=\"12px\"\n        fontWeight=\"100\"\n        fill={theme.palette.text.secondary}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n      >\n        {value ? unit : null}\n      </text>\n    </g>\n  );\n}\n\nfunction GaugeBottomLabels({\n  minValue,\n  maxValue,\n  categoryLabel,\n  width = '135px',\n}: {\n  minValue: number;\n  maxValue: number;\n  categoryLabel: string;\n  width?: string;\n}) {\n  const theme = useTheme();\n  return (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        width,\n        marginTop: 7,\n      }}\n    >\n      <Typography\n        style={{ fontSize: '14px', color: theme.palette.text.secondary }}\n      >\n        {minValue}\n      </Typography>\n      <Typography\n        style={{\n          fontSize: '14px',\n          fontWeight: 400,\n          color: theme.palette.text.primary,\n        }}\n      >\n        {categoryLabel}\n      </Typography>\n      <Typography\n        style={{ fontSize: '14px', color: theme.palette.text.secondary }}\n      >\n        {maxValue}\n      </Typography>\n    </div>\n  );\n}\n\nfunction GaugePointer({\n  markerValue,\n  min = 0,\n  max = 100,\n  displayMarkerValue,\n}: {\n  markerValue: number | null | undefined;\n  min?: number;\n  max?: number;\n  displayMarkerValue?: number;\n}) {\n  const theme = useTheme();\n  const gaugeColors = getGaugeColors(theme);\n  const { startAngle, endAngle, innerRadius, outerRadius, cx, cy } =\n    useGaugeState();\n\n  // Handle null or undefined values - show tick in middle with \"_\" label\n  if (markerValue === null || markerValue === undefined) {\n    return null;\n  }\n\n  // Clamp markerValue between min and max\n  const clampedValue = Math.min(Math.max(markerValue, min), max);\n\n  // Map markerValue to angle (radians)\n  const valueRatio = (clampedValue - min) / (max - min);\n  const valueAngle = startAngle + valueRatio * (endAngle - startAngle);\n\n  // Pointer line endpoints\n  const x1 = cx + innerRadius * Math.sin(valueAngle);\n  const y1 = cy - innerRadius * Math.cos(valueAngle);\n\n  const x2 = cx + outerRadius * Math.sin(valueAngle);\n  const y2 = cy - outerRadius * Math.cos(valueAngle);\n\n  // Label position outside outer radius\n  const labelOffset = 10; // pixels outside outerRadius\n  const labelRadius = outerRadius + labelOffset;\n\n  const labelX = cx + labelRadius * Math.sin(valueAngle);\n  const labelY = cy - labelRadius * Math.cos(valueAngle);\n\n  return (\n    <g>\n      {/* Pointer line */}\n      <line\n        x1={x1}\n        y1={y1}\n        x2={x2}\n        y2={y2}\n        stroke={gaugeColors.pointer}\n        strokeWidth={2}\n        strokeLinecap=\"round\"\n      />\n\n      {/* Marker value label positioned outside outerRadius */}\n      <text\n        x={labelX}\n        y={labelY}\n        fontSize=\"12px\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        fill={theme.palette.text.primary}\n      >\n        {displayMarkerValue || markerValue}*\n      </text>\n    </g>\n  );\n}\n\nexport { GaugeBottomLabels };\n\nexport default function GaugeChart({\n  width,\n  height,\n  value,\n  tickValue,\n  minValue,\n  maxValue,\n  tooltip,\n  unit = 'Hours',\n  displayValue,\n  displayTickValue,\n}: {\n  width: number;\n  height: number;\n  value: number;\n  tickValue: number;\n  minValue: number;\n  maxValue: number;\n  tooltip?: string;\n  unit?: string;\n  displayValue?: number;\n  displayTickValue?: number;\n}) {\n  const theme = useTheme();\n  const gaugeColors = getGaugeColors(theme);\n  const [animatedValue, setAnimatedValue] = useState(0);\n  const animationRef = useRef<number>();\n  const currentValueRef = useRef(0);\n\n  // Custom animation function\n  const animateValue = (\n    start: number,\n    end: number,\n    duration: number = 1000,\n  ) => {\n    if (animationRef.current) {\n      cancelAnimationFrame(animationRef.current);\n    }\n\n    const startTime = Date.now();\n    const animate = () => {\n      const elapsed = Date.now() - startTime;\n      const progress = Math.min(elapsed / duration, 1);\n\n      // Easing function (ease-out)\n      const easeOut = 1 - Math.pow(1 - progress, 3);\n      const currentValue = start + (end - start) * easeOut;\n\n      setAnimatedValue(currentValue);\n      currentValueRef.current = currentValue;\n\n      if (progress < 1) {\n        animationRef.current = requestAnimationFrame(animate);\n      }\n    };\n\n    animate();\n  };\n\n  // Animate when value changes\n  useEffect(() => {\n    animateValue(currentValueRef.current, value);\n\n    return () => {\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current);\n      }\n    };\n  }, [value]);\n\n  // Define margins (adjust as needed)\n  const margin = { top: 20, right: 20, bottom: 20, left: 20 };\n\n  const innerWidth = width - margin.left - margin.right; // 220 - 20 - 20 = 180\n  const innerHeight = height - margin.top - margin.bottom; // 200 - 20 - 20 = 160   // fixed centerY (you can adjust this)\n\n  const outerRadius = Math.min(innerWidth, innerHeight) / 2.2;\n  // Math.min(180, 160) / 2.2 ≈ 72.73\n\n  const innerRadius = outerRadius * 0.72;\n\n  const arcColor = getArcColor(value, tickValue, gaugeColors);\n\n  // 72.73 * 0.67 ≈ 48.72\n\n  const gaugeElement = (\n    <Gauge\n      width={width}\n      height={height / 2}\n      startAngle={-90}\n      endAngle={90}\n      innerRadius={innerRadius}\n      outerRadius={outerRadius}\n      value={animatedValue}\n      valueMin={minValue}\n      valueMax={maxValue}\n      text={() => null}\n      sx={() => ({\n        [`& .${gaugeClasses.valueArc}`]: {\n          fill: arcColor,\n          transition: 'none', // Disable default transitions to let react-spring handle it\n        },\n        [`& .${gaugeClasses.referenceArc}`]: {\n          fill: gaugeColors.background,\n        },\n      })}\n    >\n      <GaugePointer\n        markerValue={tickValue}\n        min={minValue}\n        max={maxValue}\n        displayMarkerValue={displayTickValue}\n      />\n      <GaugeCenterLabel\n        value={displayValue || animatedValue}\n        width={width}\n        height={height}\n        unit={unit}\n      />\n    </Gauge>\n  );\n\n  // If tooltip is provided, wrap with CustomTooltip, otherwise return gauge directly\n  return tooltip ? (\n    <div style={{ display: 'inline-block', cursor: 'pointer' }}>\n      <CustomTooltip title={tooltip} placement=\"top\">\n        <div style={{ width: '100%', height: '100%' }}>{gaugeElement}</div>\n      </CustomTooltip>\n    </div>\n  ) : (\n    gaugeElement\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/charts/LineChart.esm.js

@@ -0,0 +1,328 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { LineChart as LineChart$1 } from '@mui/x-charts/LineChart';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { formatNumberWithSuffix } from '../../utils/numberFormatter.esm.js';
+
+const formatValue = (value) => {
+  return formatNumberWithSuffix(value, 1);
+};
+const CustomLegendContainer = styled(Box)(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "16px",
+  flexWrap: "wrap",
+  maxWidth: "100%",
+  padding: "8px",
+  boxSizing: "border-box"
+}));
+const LegendItem = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  flexShrink: 0,
+  whiteSpace: "nowrap"
+}));
+const LegendColor = styled(Box)(({ color }) => ({
+  width: "16px",
+  height: "3px",
+  backgroundColor: color,
+  borderRadius: "1px",
+  flexShrink: 0
+}));
+const LegendText = styled("p")(({ theme }) => ({
+  fontSize: "11px",
+  color: theme.palette.text.secondary,
+  fontWeight: 400,
+  lineHeight: 1.2,
+  margin: 0,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100px",
+  minWidth: "40px"
+}));
+const LineChart = ({
+  series,
+  width = 400,
+  height = 300,
+  showLegend = true,
+  legendPosition = "bottom",
+  showGrid = true,
+  formatYValue = formatValue,
+  formatXValue,
+  showDataPoints = false,
+  customXSort,
+  formatTooltipXValue,
+  yAxisMin,
+  yAxisMax,
+  yAxisTicks
+}) => {
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(400);
+  useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const newWidth = rect.width;
+        setContainerWidth(newWidth > 0 ? Math.floor(newWidth) - 10 : 400);
+      }
+    };
+    updateWidth();
+    const resizeObserver = new ResizeObserver(() => {
+      updateWidth();
+    });
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    window.addEventListener("resize", updateWidth);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateWidth);
+    };
+  }, []);
+  const chartWidth = typeof width === "string" ? containerWidth : width || 400;
+  const { chartSeries, xAxisData } = useMemo(() => {
+    const allXValues = /* @__PURE__ */ new Set();
+    series.forEach((s) => {
+      s.data.forEach((point) => {
+        allXValues.add(point.x);
+      });
+    });
+    const sortedXValues = customXSort ? customXSort(Array.from(allXValues)) : Array.from(allXValues).sort((a, b) => {
+      if (typeof a === "number" && typeof b === "number") {
+        return a - b;
+      }
+      return String(a).localeCompare(String(b));
+    });
+    const processedSeries = series.map((s) => ({
+      id: s.id,
+      label: s.label,
+      data: sortedXValues.map((xVal) => {
+        const point = s.data.find((p) => p.x === xVal);
+        return point ? point.y : null;
+      }),
+      color: s.color,
+      connectNulls: false,
+      curve: "linear"
+    }));
+    return {
+      chartSeries: processedSeries,
+      xAxisData: sortedXValues
+    };
+  }, [series, customXSort]);
+  const CustomLegend = () => /* @__PURE__ */ jsx(CustomLegendContainer, { children: series.map((s) => /* @__PURE__ */ jsxs(LegendItem, { children: [
+    /* @__PURE__ */ jsx(LegendColor, { color: s.color }),
+    /* @__PURE__ */ jsx(LegendText, { children: s.label })
+  ] }, s.id)) });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: containerRef,
+      sx: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      },
+      children: [
+        showLegend && legendPosition === "top" && /* @__PURE__ */ jsx(CustomLegend, {}),
+        /* @__PURE__ */ jsx(Box, { sx: { width: "100%", overflowX: "auto", minWidth: 0 }, children: /* @__PURE__ */ jsx(
+          LineChart$1,
+          {
+            width: chartWidth,
+            height: showLegend && legendPosition === "bottom" ? height - 35 : height,
+            series: chartSeries,
+            legend: { hidden: true },
+            margin: { left: 40, right: 20, top: 20, bottom: 40 },
+            xAxis: [
+              {
+                scaleType: "point",
+                data: xAxisData,
+                valueFormatter: formatXValue,
+                tickInterval: (_, index) => {
+                  return [0, 7, 14, 21, 28].includes(index);
+                }
+              }
+            ],
+            yAxis: [
+              {
+                valueFormatter: formatYValue,
+                tickNumber: yAxisTicks && yAxisTicks.length > 0 ? void 0 : 6,
+                tickInterval: yAxisTicks && yAxisTicks.length > 0 ? yAxisTicks : void 0,
+                min: yAxisMin,
+                max: yAxisMax
+              }
+            ],
+            skipAnimation: false,
+            grid: showGrid ? { horizontal: true, vertical: false } : void 0,
+            tooltip: formatTooltipXValue ? {
+              axisContent: (props) => {
+                const dataIndex = props?.dataIndex ?? 0;
+                const rawX = xAxisData?.[dataIndex];
+                const header = rawX !== void 0 ? formatTooltipXValue(rawX) : props?.label;
+                return /* @__PURE__ */ jsx("div", { className: "MuiChartsTooltip-root", children: /* @__PURE__ */ jsx("table", { className: "MuiChartsTooltip-table", children: /* @__PURE__ */ jsxs("tbody", { children: [
+                  /* @__PURE__ */ jsx("tr", { className: "MuiChartsTooltip-row", children: /* @__PURE__ */ jsx("td", { className: "MuiChartsTooltip-cell", colSpan: 2, children: header }) }),
+                  chartSeries.map((s, idx) => {
+                    const value = s.data?.[dataIndex];
+                    let formatted;
+                    if (typeof value === "number") {
+                      formatted = formatYValue(value);
+                    } else if (value === null || value === void 0) {
+                      formatted = "-";
+                    } else {
+                      formatted = String(value);
+                    }
+                    return /* @__PURE__ */ jsxs("tr", { className: "MuiChartsTooltip-row", children: [
+                      /* @__PURE__ */ jsx("td", { className: "MuiChartsTooltip-labelCell", children: s.label }),
+                      /* @__PURE__ */ jsx("td", { className: "MuiChartsTooltip-valueCell", children: formatted })
+                    ] }, idx);
+                  })
+                ] }) }) });
+              }
+            } : void 0,
+            sx: (theme) => ({
+              [`.${axisClasses.left} .${axisClasses.line}`]: {
+                display: "none"
+              },
+              [`.${axisClasses.bottom} .${axisClasses.line}`]: {
+                display: "none"
+              },
+              [`.${axisClasses.left} .${axisClasses.tick}`]: {
+                display: "none"
+              },
+              [`.${axisClasses.bottom} .${axisClasses.tick}`]: {
+                stroke: theme.palette.divider,
+                strokeWidth: 1,
+                transform: "translate(0, -5px)"
+              },
+              [`.${axisClasses.bottom} .${axisClasses.tickLabel}`]: {
+                transform: "translate(5px, 0px)"
+              },
+              "& .MuiChartsGrid-line": {
+                strokeDasharray: "3 3",
+                stroke: theme.palette.divider,
+                strokeWidth: 1
+              },
+              "& .MuiLineElement-root": {
+                strokeWidth: 2
+              },
+              "& .MuiMarkElement-root": {
+                r: showDataPoints ? 3 : 0,
+                strokeWidth: 2,
+                fill: theme.palette.background.paper,
+                opacity: showDataPoints ? 1 : 0,
+                transition: "all 0.2s ease-in-out",
+                "&:hover": {
+                  r: 4,
+                  opacity: 1
+                }
+              }
+            }),
+            slotProps: {
+              popper: {
+                placement: "auto",
+                modifiers: [
+                  {
+                    name: "flip",
+                    enabled: true,
+                    options: {
+                      fallbackPlacements: ["top", "bottom", "right", "left"],
+                      allowedAutoPlacements: ["top", "bottom"]
+                    }
+                  },
+                  {
+                    name: "preventOverflow",
+                    enabled: true,
+                    options: {
+                      boundary: "clippingParents",
+                      padding: 8
+                    }
+                  },
+                  {
+                    name: "offset",
+                    enabled: true,
+                    options: {
+                      offset: [90, 10]
+                    }
+                  },
+                  {
+                    name: "arrow",
+                    enabled: false
+                  }
+                ],
+                sx: (theme) => ({
+                  "& .MuiChartsTooltip-root": {
+                    backgroundColor: theme.palette.background.paper,
+                    border: `1px solid ${theme.palette.divider}`,
+                    borderRadius: "12px",
+                    filter: theme.palette.mode === "dark" ? "drop-shadow(0 4px 12px rgba(0,0,0,0.3))" : "drop-shadow(0 4px 12px rgba(0,0,0,0.1))",
+                    padding: "12px 16px",
+                    minWidth: "140px",
+                    fontSize: "12px"
+                  },
+                  "& .MuiChartsTooltip-table": {
+                    margin: 0,
+                    borderSpacing: 0,
+                    width: "100%"
+                  },
+                  "& .MuiChartsTooltip-row": {
+                    "&:first-of-type": {
+                      "& .MuiChartsTooltip-cell": {
+                        fontSize: "16px",
+                        fontWeight: 600,
+                        color: theme.palette.text.secondary,
+                        paddingBottom: "16px",
+                        borderBottom: "none"
+                      }
+                    },
+                    "&:not(:first-of-type)": {
+                      "& .MuiChartsTooltip-cell": {
+                        padding: "4px 0",
+                        borderBottom: "none"
+                      },
+                      "& .MuiChartsTooltip-labelCell": {
+                        position: "relative",
+                        paddingLeft: "16px",
+                        paddingRight: "4px",
+                        paddingBottom: "8px",
+                        fontSize: "14px",
+                        color: theme.palette.text.secondary,
+                        "&::before": {
+                          content: '""',
+                          position: "absolute",
+                          left: "0",
+                          top: "10%",
+                          width: "3px",
+                          height: "16px",
+                          backgroundColor: theme.palette.primary.main,
+                          borderRadius: "2px"
+                        }
+                      },
+                      "& .MuiChartsTooltip-valueCell": {
+                        fontSize: "14px",
+                        fontWeight: 600,
+                        color: theme.palette.text.secondary,
+                        textAlign: "right",
+                        paddingLeft: "4px",
+                        paddingBottom: "8px",
+                        verticalAlign: "middle"
+                      }
+                    }
+                  }
+                })
+              }
+            }
+          }
+        ) }),
+        showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx(CustomLegend, {})
+      ]
+    }
+  );
+};
+
+export { LineChart, LineChart as default };
+//# sourceMappingURL=LineChart.esm.js.map

package/dist/components/charts/LineChart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.esm.js","sources":["../../../src/components/charts/LineChart.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useMemo, useRef, useEffect, useState } from 'react';\nimport { LineChart as MuiLineChart } from '@mui/x-charts/LineChart';\nimport { axisClasses } from '@mui/x-charts/ChartsAxis';\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport { formatNumberWithSuffix } from '../../utils/numberFormatter';\n\nexport interface LineChartDataPoint {\n  x: string | number;\n  y: number;\n}\n\nexport type LineChartCurveType =\n  | 'linear'\n  | 'step'\n  | 'natural'\n  | 'monotoneX'\n  | 'monotoneY'\n  | 'catmullRom';\n\nexport interface LineChartSeries {\n  id: string;\n  label: string;\n  data: LineChartDataPoint[];\n  color: string;\n  connectNulls?: boolean;\n  curve?: LineChartCurveType;\n}\n\nexport interface LineChartProps {\n  series: LineChartSeries[];\n  width?: number | string;\n  height?: number;\n  showLegend?: boolean;\n  legendPosition?: 'top' | 'bottom';\n  showGrid?: boolean;\n  xAxisLabel?: string;\n  yAxisLabel?: string;\n  formatYValue?: (value: number) => string;\n  formatXValue?: (value: string | number) => string;\n  showDataPoints?: boolean;\n  customXSort?: (values: (string | number)[]) => (string | number)[];\n  // Optional: allows different formatting for tooltip header than x-axis ticks\n  formatTooltipXValue?: (value: string | number) => string;\n  // Optional: custom y-axis range\n  yAxisMin?: number;\n  yAxisMax?: number;\n  // Optional: explicit y-axis tick values (overrides tickNumber)\n  yAxisTicks?: number[];\n}\n\nconst formatValue = (value: number): string => {\n  return formatNumberWithSuffix(value, 1);\n};\n\nconst CustomLegendContainer = styled(Box)(() => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  gap: '16px',\n  flexWrap: 'wrap',\n  maxWidth: '100%',\n  padding: '8px',\n  boxSizing: 'border-box',\n}));\n\nconst LegendItem = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n  flexShrink: 0,\n  whiteSpace: 'nowrap',\n}));\n\nconst LegendColor = styled(Box)<{ color: string }>(({ color }) => ({\n  width: '16px',\n  height: '3px',\n  backgroundColor: color,\n  borderRadius: '1px',\n  flexShrink: 0,\n}));\n\nconst LegendText = styled('p')(({ theme }) => ({\n  fontSize: '11px',\n  color: theme.palette.text.secondary,\n  fontWeight: 400,\n  lineHeight: 1.2,\n  margin: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100px',\n  minWidth: '40px',\n}));\n\nexport const LineChart = ({\n  series,\n  width = 400,\n  height = 300,\n  showLegend = true,\n  legendPosition = 'bottom',\n  showGrid = true,\n  formatYValue = formatValue,\n  formatXValue,\n  showDataPoints = false,\n  customXSort,\n  formatTooltipXValue,\n  yAxisMin,\n  yAxisMax,\n  yAxisTicks,\n}: LineChartProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState<number>(400);\n\n  useEffect(() => {\n    const updateWidth = () => {\n      if (containerRef.current) {\n        const rect = containerRef.current.getBoundingClientRect();\n        const newWidth = rect.width;\n        setContainerWidth(newWidth > 0 ? Math.floor(newWidth) - 10 : 400);\n      }\n    };\n\n    // Initial measurement\n    updateWidth();\n\n    // Use ResizeObserver for better accuracy\n    const resizeObserver = new ResizeObserver(() => {\n      updateWidth();\n    });\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n\n    window.addEventListener('resize', updateWidth);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', updateWidth);\n    };\n  }, []);\n\n  const chartWidth = typeof width === 'string' ? containerWidth : width || 400;\n\n  const { chartSeries, xAxisData } = useMemo(() => {\n    const allXValues = new Set<string | number>();\n\n    // Collect all unique x values\n    series.forEach(s => {\n      s.data.forEach(point => {\n        allXValues.add(point.x);\n      });\n    });\n\n    const sortedXValues = customXSort\n      ? customXSort(Array.from(allXValues))\n      : Array.from(allXValues).sort((a, b) => {\n          if (typeof a === 'number' && typeof b === 'number') {\n            return a - b;\n          }\n          return String(a).localeCompare(String(b));\n        });\n\n    const processedSeries = series.map(s => ({\n      id: s.id,\n      label: s.label,\n      data: sortedXValues.map(xVal => {\n        const point = s.data.find(p => p.x === xVal);\n        return point ? point.y : null;\n      }),\n      color: s.color,\n      connectNulls: false,\n      curve: 'linear' as const,\n    }));\n\n    return {\n      chartSeries: processedSeries,\n      xAxisData: sortedXValues,\n    };\n  }, [series, customXSort]);\n\n  const CustomLegend = () => (\n    <CustomLegendContainer>\n      {series.map(s => (\n        <LegendItem key={s.id}>\n          <LegendColor color={s.color} />\n          <LegendText>{s.label}</LegendText>\n        </LegendItem>\n      ))}\n    </CustomLegendContainer>\n  );\n\n  return (\n    <Box\n      ref={containerRef}\n      sx={{\n        width: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n      }}\n    >\n      {showLegend && legendPosition === 'top' && <CustomLegend />}\n\n      <Box sx={{ width: '100%', overflowX: 'auto', minWidth: 0 }}>\n        <MuiLineChart\n          width={chartWidth}\n          height={\n            showLegend && legendPosition === 'bottom' ? height - 35 : height\n          }\n          series={chartSeries}\n          legend={{ hidden: true }}\n          margin={{ left: 40, right: 20, top: 20, bottom: 40 }}\n          xAxis={[\n            {\n              scaleType: 'point',\n              data: xAxisData,\n              valueFormatter: formatXValue,\n              tickInterval: (_, index) => {\n                // Show ticks at indices: 0, 7, 14, 21, 28 (approximately every 7 days, starting from first date)\n                return [0, 7, 14, 21, 28].includes(index);\n              },\n            },\n          ]}\n          yAxis={[\n            {\n              valueFormatter: formatYValue,\n              tickNumber: yAxisTicks && yAxisTicks.length > 0 ? undefined : 6,\n              tickInterval:\n                yAxisTicks && yAxisTicks.length > 0 ? yAxisTicks : undefined,\n              min: yAxisMin,\n              max: yAxisMax,\n            },\n          ]}\n          skipAnimation={false}\n          grid={showGrid ? { horizontal: true, vertical: false } : undefined}\n          tooltip={\n            formatTooltipXValue\n              ? {\n                  axisContent: (props: any) => {\n                    const dataIndex = props?.dataIndex ?? 0;\n                    const rawX = xAxisData?.[dataIndex];\n                    const header =\n                      rawX !== undefined\n                        ? formatTooltipXValue(rawX)\n                        : props?.label;\n\n                    return (\n                      <div className=\"MuiChartsTooltip-root\">\n                        <table className=\"MuiChartsTooltip-table\">\n                          <tbody>\n                            <tr className=\"MuiChartsTooltip-row\">\n                              <td className=\"MuiChartsTooltip-cell\" colSpan={2}>\n                                {header}\n                              </td>\n                            </tr>\n                            {chartSeries.map((s, idx) => {\n                              const value = s.data?.[dataIndex];\n                              let formatted: string;\n                              if (typeof value === 'number') {\n                                formatted = formatYValue(value);\n                              } else if (\n                                value === null ||\n                                value === undefined\n                              ) {\n                                formatted = '-';\n                              } else {\n                                formatted = String(value);\n                              }\n                              return (\n                                <tr key={idx} className=\"MuiChartsTooltip-row\">\n                                  <td className=\"MuiChartsTooltip-labelCell\">\n                                    {s.label}\n                                  </td>\n                                  <td className=\"MuiChartsTooltip-valueCell\">\n                                    {formatted}\n                                  </td>\n                                </tr>\n                              );\n                            })}\n                          </tbody>\n                        </table>\n                      </div>\n                    );\n                  },\n                }\n              : undefined\n          }\n          sx={theme => ({\n            [`.${axisClasses.left} .${axisClasses.line}`]: {\n              display: 'none',\n            },\n            [`.${axisClasses.bottom} .${axisClasses.line}`]: {\n              display: 'none',\n            },\n            [`.${axisClasses.left} .${axisClasses.tick}`]: {\n              display: 'none',\n            },\n            [`.${axisClasses.bottom} .${axisClasses.tick}`]: {\n              stroke: theme.palette.divider,\n              strokeWidth: 1,\n              transform: 'translate(0, -5px)',\n            },\n            [`.${axisClasses.bottom} .${axisClasses.tickLabel}`]: {\n              transform: 'translate(5px, 0px)',\n            },\n            '& .MuiChartsGrid-line': {\n              strokeDasharray: '3 3',\n              stroke: theme.palette.divider,\n              strokeWidth: 1,\n            },\n            '& .MuiLineElement-root': {\n              strokeWidth: 2,\n            },\n            '& .MuiMarkElement-root': {\n              r: showDataPoints ? 3 : 0,\n              strokeWidth: 2,\n              fill: theme.palette.background.paper,\n              opacity: showDataPoints ? 1 : 0,\n              transition: 'all 0.2s ease-in-out',\n              '&:hover': {\n                r: 4,\n                opacity: 1,\n              },\n            },\n          })}\n          slotProps={{\n            popper: {\n              placement: 'auto',\n              modifiers: [\n                {\n                  name: 'flip',\n                  enabled: true,\n                  options: {\n                    fallbackPlacements: ['top', 'bottom', 'right', 'left'],\n                    allowedAutoPlacements: ['top', 'bottom'],\n                  },\n                },\n                {\n                  name: 'preventOverflow',\n                  enabled: true,\n                  options: {\n                    boundary: 'clippingParents',\n                    padding: 8,\n                  },\n                },\n                {\n                  name: 'offset',\n                  enabled: true,\n                  options: {\n                    offset: [90, 10],\n                  },\n                },\n                {\n                  name: 'arrow',\n                  enabled: false,\n                },\n              ],\n              sx: theme => ({\n                '& .MuiChartsTooltip-root': {\n                  backgroundColor: theme.palette.background.paper,\n                  border: `1px solid ${theme.palette.divider}`,\n                  borderRadius: '12px',\n                  filter:\n                    theme.palette.mode === 'dark'\n                      ? 'drop-shadow(0 4px 12px rgba(0,0,0,0.3))'\n                      : 'drop-shadow(0 4px 12px rgba(0,0,0,0.1))',\n                  padding: '12px 16px',\n                  minWidth: '140px',\n                  fontSize: '12px',\n                },\n                '& .MuiChartsTooltip-table': {\n                  margin: 0,\n                  borderSpacing: 0,\n                  width: '100%',\n                },\n                '& .MuiChartsTooltip-row': {\n                  '&:first-of-type': {\n                    '& .MuiChartsTooltip-cell': {\n                      fontSize: '16px',\n                      fontWeight: 600,\n                      color: theme.palette.text.secondary,\n                      paddingBottom: '16px',\n                      borderBottom: 'none',\n                    },\n                  },\n                  '&:not(:first-of-type)': {\n                    '& .MuiChartsTooltip-cell': {\n                      padding: '4px 0',\n                      borderBottom: 'none',\n                    },\n                    '& .MuiChartsTooltip-labelCell': {\n                      position: 'relative',\n                      paddingLeft: '16px',\n                      paddingRight: '4px',\n                      paddingBottom: '8px',\n                      fontSize: '14px',\n                      color: theme.palette.text.secondary,\n                      '&::before': {\n                        content: '\"\"',\n                        position: 'absolute',\n                        left: '0',\n                        top: '10%',\n                        width: '3px',\n                        height: '16px',\n                        backgroundColor: theme.palette.primary.main,\n                        borderRadius: '2px',\n                      },\n                    },\n                    '& .MuiChartsTooltip-valueCell': {\n                      fontSize: '14px',\n                      fontWeight: 600,\n                      color: theme.palette.text.secondary,\n                      textAlign: 'right',\n                      paddingLeft: '4px',\n                      paddingBottom: '8px',\n                      verticalAlign: 'middle',\n                    },\n                  },\n                },\n              }),\n            },\n          }}\n        />\n      </Box>\n\n      {showLegend && legendPosition === 'bottom' && <CustomLegend />}\n    </Box>\n  );\n};\n\nexport default LineChart;\n"],"names":["MuiLineChart"],"mappings":"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"}