MigrationChart.tsx

import { css } from "@emotion/css";
import {
  Button,
  Content,
  ContentVariants,
  Flex,
  FlexItem,
  Popover,
} from "@patternfly/react-core";
import { InfoCircleIcon } from "@patternfly/react-icons";
import { Table, Tbody, Td, Tr } from "@patternfly/react-table";
import React, { useMemo } from "react";

interface OSData {
  name: string;
  count: number;
  legendCategory: string;
  infoText?: string;
}

interface MigrationChartProps {
  data: OSData[];
  legend?: Record<string, string>;
  dataLength?: DLength;
  maxHeight?: string;
  barHeight?: number;
}

type DLength =
  | 10
  | 15
  | 20
  | 25
  | 30
  | 35
  | 40
  | 45
  | 50
  | 60
  | 70
  | 80
  | 90
  | 100;

// ---------------------------------------------------------------------------
// Styles
// ---------------------------------------------------------------------------

const upgradeRecommendationPopover = css`
  .popover-override .pf-v5-c-popover__close .pf-v5-c-button.pf-m-plain {
    color: var(--pf-t--global--text--color--regular);
  }
  .popover-override .pf-v5-c-popover__close .pf-v5-c-button.pf-m-plain:hover {
    color: var(--pf-t--global--text--color--regular);
  }
`;

const legendColors = ["#28a745", "#f0ad4e", "#d9534f", "#C9190B"];

const MigrationChart: React.FC<MigrationChartProps> = ({
  data,
  legend,
  dataLength = 40,
  maxHeight = "200px",
  barHeight = 8,
}: MigrationChartProps) => {
  // Ensure tiny percentages still render a visible colored segment
  const MIN_BAR_PX = 3;
  const dynamicLegend = useMemo<Record<string, string>>(() => {
    const legendMap: Record<string, string> = {};
    const seen = new Set<string>();

    data.forEach((item) => {
      const key = item.legendCategory;
      if (!seen.has(key)) {
        seen.add(key);
        legendMap[key] = legendColors[seen.size - 1] ?? legendColors[0];
      }
    });

    return legendMap;
  }, [data]);

  // Calculate the sum of all count values to normalize bar widths
  const sumOfAllCounts = useMemo(() => {
    if (!data || data.length === 0) return 1;
    return data.reduce((sum, item) => sum + item.count, 0) || 1;
  }, [data]);

  const chartLegend = legend ?? dynamicLegend;
  const getColor = (name: string): string =>
    chartLegend[name] ?? legendColors[0];

  return (
    <Flex
      direction={{ default: "column" }}
      spaceItems={{ default: "spaceItemsLg" }}
    >
      {/* Legend */}
      <FlexItem>
        <Flex
          spaceItems={{ default: "spaceItemsLg" }}
          justifyContent={{ default: "justifyContentFlexEnd" }}
        >
          {Object.entries(chartLegend).map(([key, color]) => (
            <FlexItem key={key}>
              <Flex
                alignItems={{ default: "alignItemsCenter" }}
                spaceItems={{ default: "spaceItemsSm" }}
              >
                <FlexItem>
                  <div
                    style={{
                      width: "12px",
                      height: "12px",
                      backgroundColor: color,
                      borderRadius: "2px",
                    }}
                  />
                </FlexItem>
                <FlexItem>
                  <Content component={ContentVariants.small}>{key}</Content>
                </FlexItem>
              </Flex>
            </FlexItem>
          ))}
        </Flex>
      </FlexItem>
      {/* Chart Area */}
      <FlexItem>
        <Flex
          direction={{ default: "column" }}
          spaceItems={{ default: "spaceItemsMd" }}
        >
          <div
            style={{
              maxHeight: maxHeight.includes("auto") ? "none" : maxHeight,
              overflowY: maxHeight.includes("auto") ? "visible" : "auto",
            }}
          >
            <Table variant="compact" borders={false}>
              <Tbody>
                {data.map((item, index) => (
                  <Tr key={index}>
                    <Td
                      width={dataLength}
                      style={{ paddingLeft: "0px", paddingTop: "4px" }}
                    >
                      <Flex
                        alignItems={{ default: "alignItemsCenter" }}
                        spaceItems={{ default: "spaceItemsXs" }}
                        flexWrap={{ default: "nowrap" }}
                      >
                        <FlexItem>
                          <Content
                            component={ContentVariants.p}
                            style={{
                              fontSize: "clamp(0.4rem, 0.7vw, 1.1rem)",
                              overflow: "hidden",
                              textOverflow: "ellipsis",
                              wordBreak: "break-word",
                              display: "-webkit-box",
                              WebkitLineClamp: 1,
                              textTransform: "capitalize",
                              WebkitBoxOrient: "vertical",
                            }}
                          >
                            {item.name}
                          </Content>
                        </FlexItem>
                        {item.infoText ? (
                          <FlexItem shrink={{ default: "shrink" }}>
                            <Popover
                              className={upgradeRecommendationPopover}
                              position="bottom"
                              headerContent="Upgrade to get support"
                              bodyContent={<div>{item.infoText}</div>}
                            >
                              <Button
                                type="button"
                                aria-label="Open operating system upgrade information"
                                variant="plain"
                                style={{
                                  padding: "0",
                                  verticalAlign: "middle",
                                }}
                              >
                                <InfoCircleIcon color="var(--pf-t--global--icon--color--status--info--default)" />
                              </Button>
                            </Popover>
                          </FlexItem>
                        ) : null}
                      </Flex>
                    </Td>
                    <Td>
                      {/* Visual Bar */}
                      <div>
                        <div
                          style={{
                            position: "relative",
                            height: `${barHeight}px`,
                            backgroundColor:
                              "var(--pf-t--global--background--color--secondary--default)",
                            overflow: "hidden",
                          }}
                        >
                          {((): React.ReactNode => {
                            const barWidth =
                              sumOfAllCounts > 0
                                ? (item.count / sumOfAllCounts) * 100
                                : 0;
                            const hasValue = barWidth > 0;
                            return (
                              <div
                                style={{
                                  height: "100%",
                                  width: `${barWidth}%`,
                                  minWidth: hasValue ? `${MIN_BAR_PX}px` : "0",
                                  backgroundColor: `${getColor(
                                    item.legendCategory,
                                  )}`,
                                  transition: "width 0.3s ease",
                                }}
                              />
                            );
                          })()}
                        </div>
                      </div>
                    </Td>
                    <Td
                      width={10}
                      style={{
                        paddingRight: "0px",
                        textAlign: "center",
                        paddingTop: "5px",
                      }}
                    >
                      <Content
                        component="p"
                        style={{ fontSize: "clamp(0.4rem, 0.7vw, 1.1rem)" }}
                      >
                        {item.count}
                      </Content>
                    </Td>
                  </Tr>
                ))}
              </Tbody>
            </Table>
          </div>
        </Flex>
      </FlexItem>
    </Flex>
  );
};

export default MigrationChart;