@openshift-migration-advisor/shared-components 0.28.0-811d1036212f → 0.28.0-a68bc28c8af9

package/dist/charts/MigrationDonutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAG9C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAC/B,cAAc,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;IACb;;;;OAIG;IACH,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAoFD,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAoX5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAG9C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAC/B,cAAc,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;IACb;;;;OAIG;IACH,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAoFD,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAgY5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/charts/MigrationDonutChart.js

@@ -111,9 +111,13 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
             countDisplay: item.countDisplay ?? item.count,
         }));
     }, [data]);
-    const colorScale = useMemo(() => {
-        return chartData.map((item) => getColor(item.legendCategory));
-    }, [chartData, getColor]);
+    // Victory renders zero-value slices as degenerate zero-angle wedges but still
+    // keeps a `padAngle` gap around each one.
+    const donutChartData = useMemo(() => chartData.filter((item) => Number(item.y) > 0), [chartData]);
+    const donutColorScale = useMemo(() => donutChartData.map((item) => getColor(item.legendCategory)), [donutChartData, getColor]);
+    // A lone slice has no neighbour to pad against; forcing padAngle to 0 keeps it
+    // from leaving a gap against itself.
+    const effectivePadAngle = donutChartData.length <= 1 ? 0 : padAngle;
     const legendData = useMemo(() => {
         return chartData.map((item) => ({
             name: `${item.x} (${item.countDisplay})`,
@@ -221,7 +225,7 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
                             fontFamily: chartTextFontFamily,
                         },
                     } }) }) }) }));
-    return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, className: `${onItemClick ? styles.cursorPointer : styles.cursorDefault} ${styles.chartContainer}`, children: [_jsxs("div", { className: styles.donutWrapper, children: [_jsx(ChartDonut, { ariaDesc: "Migration data donut chart", data: chartData, events: chartEvents, labelComponent: donutTooltip, labels: ({ datum, }) => formatLabel(datum), colorScale: colorScale, constrainToVisibleArea: true, innerRadius: innerRadius, padAngle: padAngle, title: title, subTitle: subTitle, height: height, width: width, padding: {
+    return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, className: `${onItemClick ? styles.cursorPointer : styles.cursorDefault} ${styles.chartContainer}`, children: [_jsxs("div", { className: styles.donutWrapper, children: [_jsx(ChartDonut, { ariaDesc: "Migration data donut chart", data: donutChartData, events: chartEvents, labelComponent: donutTooltip, labels: ({ datum, }) => formatLabel(datum), colorScale: donutColorScale, constrainToVisibleArea: true, innerRadius: innerRadius, padAngle: effectivePadAngle, title: title, subTitle: subTitle, height: height, width: width, padding: {
                             bottom: 5,
                             left: 20,
                             right: 20,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.28.0-811d1036212f",
+  "version": "0.28.0-a68bc28c8af9",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",

package/src/charts/MigrationDonutChart.tsx

@@ -220,9 +220,21 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
     }));
   }, [data]);
 
-  const colorScale = useMemo(() => {
-    return chartData.map((item) => getColor(item.legendCategory));
-  }, [chartData, getColor]);
+  // Victory renders zero-value slices as degenerate zero-angle wedges but still
+  // keeps a `padAngle` gap around each one.
+  const donutChartData = useMemo(
+    () => chartData.filter((item) => Number(item.y) > 0),
+    [chartData],
+  );
+
+  const donutColorScale = useMemo(
+    () => donutChartData.map((item) => getColor(item.legendCategory)),
+    [donutChartData, getColor],
+  );
+
+  // A lone slice has no neighbour to pad against; forcing padAngle to 0 keeps it
+  // from leaving a gap against itself.
+  const effectivePadAngle = donutChartData.length <= 1 ? 0 : padAngle;
 
   const legendData = useMemo(() => {
     return chartData.map((item) => ({
@@ -446,7 +458,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
       <div className={styles.donutWrapper}>
         <ChartDonut
           ariaDesc="Migration data donut chart"
-          data={chartData}
+          data={donutChartData}
           events={chartEvents}
           labelComponent={donutTooltip}
           labels={({
@@ -459,10 +471,10 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
               countDisplay?: string | number;
             };
           }) => formatLabel(datum)}
-          colorScale={colorScale}
+          colorScale={donutColorScale}
           constrainToVisibleArea
           innerRadius={innerRadius}
-          padAngle={padAngle}
+          padAngle={effectivePadAngle}
           title={title}
           subTitle={subTitle}
           height={height}

package/src/charts/__tests__/MigrationDonutChart.test.tsx

@@ -0,0 +1,53 @@
+import "@testing-library/jest-dom";
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  MigrationDonutChart,
+  type MigrationDonutChartDatum,
+} from "../MigrationDonutChart.js";
+
+afterEach(() => cleanup());
+
+/**
+ * Victory renders one `<path role="presentation">` per slice handed to ChartDonut.
+ * Only real pie slices carry an arc command (`A`) in their path data — legend
+ * symbols are squares — so filtering on it isolates the donut slices.
+ */
+const sliceCount = (container: HTMLElement): number =>
+  Array.from(container.querySelectorAll("path[role='presentation']")).filter(
+    (path) => (path.getAttribute("d") ?? "").includes("A"),
+  ).length;
+
+describe("MigrationDonutChart", () => {
+  it("does not render slices for zero-value categories", () => {
+    // Fixed-category chart (e.g. power states) where only one category is populated.
+    const data: MigrationDonutChartDatum[] = [
+      { name: "Powered on", count: 7, legendCategory: "Powered on" },
+      { name: "Powered off", count: 0, legendCategory: "Powered off" },
+      { name: "Standby", count: 0, legendCategory: "Standby" },
+      { name: "Not responding", count: 0, legendCategory: "Not responding" },
+      { name: "Maintenance", count: 0, legendCategory: "Maintenance" },
+    ];
+
+    const { container } = render(
+      <MigrationDonutChart data={data} legendVariant="chart" />,
+    );
+
+    // Only the single populated slice should be drawn, leaving no empty gap.
+    expect(sliceCount(container)).toBe(1);
+  });
+
+  it("renders one slice per populated category", () => {
+    const data: MigrationDonutChartDatum[] = [
+      { name: "Powered on", count: 5, legendCategory: "Powered on" },
+      { name: "Powered off", count: 3, legendCategory: "Powered off" },
+      { name: "Standby", count: 0, legendCategory: "Standby" },
+    ];
+
+    const { container } = render(
+      <MigrationDonutChart data={data} legendVariant="chart" />,
+    );
+
+    expect(sliceCount(container)).toBe(2);
+  });
+});