refactor: chart legend API with more semantic types

Author: jsilll

src/core/chart-core.tsx

@@ -13,7 +13,6 @@ import Spinner from "@cloudscape-design/components/spinner";
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import * as Styles from "../internal/chart-styles";
-import { ChartLegendType } from "../internal/components/chart-legend";
 import { castArray } from "../internal/utils/utils";
 import { useChartAPI } from "./chart-api";
 import { ChartContainer } from "./chart-container";
@@ -32,19 +31,6 @@ import { getPointAccessibleDescription, hasVisibleLegendItems } from "./utils";
 import styles from "./styles.css.js";
 import testClasses from "./test-classes/styles.css.js";
 
-function getLegendType(options: CoreChartProps.LegendOptions, isSecondaryLegend: boolean = false): ChartLegendType {
-  switch (options.type) {
-    case "single":
-      return options.position === "side" ? "stacked" : "bottom";
-    case "dual":
-      if (options.position === "side") {
-        return isSecondaryLegend ? "stacked-bottom" : "stacked-top";
-      }
-      return isSecondaryLegend ? "bottom-right" : "bottom-left";
-  }
-  return "bottom";
-}
-
 /**
  * CoreChart is the core internal abstraction that accepts the entire set of Highcharts options along
  * with Cloudscape props to define custom tooltip, no-data, formatters, items visibility, and more.
@@ -318,8 +304,9 @@ export function InternalCoreChart({
         primaryLegend={
           context.legendEnabled && hasVisibleLegendItems(options) ? (
             <ChartLegend
-              type={legendOptions ? getLegendType(legendOptions) : "bottom"}
               api={api}
+              type={legendOptions?.type === "single" ? "single" : "primary"}
+              alignment={legendOptions?.position === "side" ? "vertical" : "horizontal"}
               i18nStrings={i18nStrings}
               title={legendOptions?.title}
               actions={legendOptions?.actions}
@@ -331,8 +318,9 @@ export function InternalCoreChart({
         secondaryLegend={
           context.legendEnabled && legendOptions && legendOptions.type === "dual" ? (
             <ChartLegend
-              type={getLegendType(legendOptions, true)}
               api={api}
+              type={"secondary"}
+              alignment={legendOptions?.position === "side" ? "vertical" : "horizontal"}
               i18nStrings={i18nStrings}
               title={legendOptions.secondaryLegendTitle}
               actions={legendOptions.actions}

src/core/components/core-legend.tsx

@@ -3,39 +3,25 @@
 
 import { useInternalI18n } from "@cloudscape-design/components/internal/do-not-use/i18n";
 
-import { ChartLegend as ChartLegendComponent, ChartLegendType } from "../../internal/components/chart-legend";
-import { LegendItem } from "../../internal/components/interfaces";
+import { ChartLegend as ChartLegendComponent } from "../../internal/components/chart-legend";
 import { fireNonCancelableEvent, NonCancelableEventHandler } from "../../internal/events";
 import { useSelector } from "../../internal/utils/async-store";
 import { ChartAPI } from "../chart-api";
 import { BaseI18nStrings, CoreChartProps } from "../interfaces";
 
-function getFilteredItems(type: ChartLegendType, items: readonly LegendItem[]) {
-  switch (type) {
-    case "bottom":
-    case "stacked":
-      return items;
-    case "bottom-left":
-    case "stacked-top":
-      return items.filter((item) => !item.oppositeAxis);
-    case "bottom-right":
-    case "stacked-bottom":
-      return items.filter((item) => item.oppositeAxis);
-  }
-  return items;
-}
-
 export function ChartLegend({
-  type,
   api,
+  type,
+  alignment,
   title,
   actions,
   i18nStrings,
   onItemHighlight,
   getLegendTooltipContent,
 }: {
-  type: ChartLegendType;
   api: ChartAPI;
+  alignment: "horizontal" | "vertical";
+  type: "single" | "primary" | "secondary";
   title?: string;
   actions?: React.ReactNode;
   i18nStrings?: BaseI18nStrings;
@@ -47,8 +33,13 @@ export function ChartLegend({
   const legendItems = useSelector(api.legendStore, (s) => s.items);
   const isChartTooltipPinned = useSelector(api.tooltipStore, (s) => s.pinned);
 
-  const filteredItems = getFilteredItems(type, legendItems);
   const someHighlighted = legendItems.some((item) => item.highlighted);
+  const filteredItems =
+    type === "single"
+      ? legendItems
+      : type === "primary"
+        ? legendItems.filter((item) => !item.oppositeAxis)
+        : legendItems.filter((item) => item.oppositeAxis);
 
   const onToggleItem = (itemId: string) => {
     const visibleItems = legendItems.filter((i) => i.visible).map((i) => i.id);
@@ -78,6 +69,7 @@ export function ChartLegend({
   return (
     <ChartLegendComponent
       type={type}
+      alignment={alignment}
       ariaLabel={ariaLabel}
       legendTitle={title}
       items={filteredItems}

src/internal-do-not-use/core-legend/index.tsx

@@ -16,8 +16,6 @@ export const CoreLegend = ({
   onVisibleItemsChange,
   getLegendTooltipContent,
 }: CoreLegendProps) => {
-  const type = alignment === "horizontal" ? "bottom" : "stacked";
-
   const onToggleItem = (itemId: string) => {
     const visibleItems = items.filter((i) => i.visible).map((i) => i.id);
     if (visibleItems.includes(itemId)) {
@@ -50,8 +48,9 @@ export const CoreLegend = ({
 
   return (
     <ChartLegendComponent
-      type={type}
       items={items}
+      type={"single"}
+      alignment={alignment}
       actions={actions}
       legendTitle={title}
       ariaLabel={ariaLabel}

src/internal/components/chart-legend/index.tsx

@@ -28,12 +28,11 @@ const HIGHLIGHT_LOST_DELAY = 50;
 const SCROLL_DELAY = 100;
 const SHOULD_STACK_SIZE = 400;
 
-export type ChartLegendType = "bottom" | "stacked" | "stacked-top" | "stacked-bottom" | "bottom-left" | "bottom-right";
-
 export interface ChartLegendProps {
-  type: ChartLegendType;
   someHighlighted: boolean;
   items: readonly LegendItem[];
+  alignment: "horizontal" | "vertical";
+  type: "single" | "primary" | "secondary";
   legendTitle?: string;
   ariaLabel?: string;
   actions?: React.ReactNode;
@@ -45,8 +44,9 @@ export interface ChartLegendProps {
 }
 
 export const ChartLegend = ({
-  type,
   items,
+  type,
+  alignment,
   someHighlighted,
   legendTitle,
   ariaLabel,
@@ -57,7 +57,7 @@ export const ChartLegend = ({
   onItemHighlightExit,
   getTooltipContent,
 }: ChartLegendProps) => {
-  const [shouldStack, containerQueryRef] = useContainerQuery((rect) => rect.borderBoxWidth <= SHOULD_STACK_SIZE);
+  const [shouldAutoStack, containerQueryRef] = useContainerQuery((rect) => rect.borderBoxWidth <= SHOULD_STACK_SIZE);
   const containerRef = containerQueryRef as React.RefObject<HTMLDivElement>;
   const elementsByIndexRef = useRef<Record<number, HTMLElement>>([]);
   const elementsByIdRef = useRef<Record<string, HTMLElement>>({});
@@ -210,8 +210,8 @@ export const ChartLegend = ({
     navigationAPI.current!.updateFocusTarget();
   });
 
-  const isStacked = type.startsWith("stacked") || shouldStack;
-  const isBottomRightNotStacked = type === "bottom-right" && !shouldStack;
+  const isStacked = alignment === "vertical" || shouldAutoStack;
+  const isHorizontalSecondaryAndNotStacked = alignment === "horizontal" && type === "secondary" && !shouldAutoStack;
 
   const tooltipTrack = useRef<null | HTMLElement>(null);
   const tooltipTarget = items.find((item) => item.id === tooltipItemId) ?? null;
@@ -234,7 +234,11 @@ export const ChartLegend = ({
         onMouseLeave={() => (isMouseInContainer.current = false)}
       >
         {legendTitle && (
-          <Box fontWeight="bold" textAlign={isBottomRightNotStacked ? "right" : "left"} className={testClasses.title}>
+          <Box
+            fontWeight="bold"
+            className={testClasses.title}
+            textAlign={isHorizontalSecondaryAndNotStacked ? "right" : "left"}
+          >
             {legendTitle}
           </Box>
         )}
@@ -246,7 +250,7 @@ export const ChartLegend = ({
           className={clsx(styles.list, {
             [styles["list-side"]]: isStacked,
             [styles["list-bottom"]]: !isStacked,
-            [styles["list-bottom-secondary"]]: isBottomRightNotStacked,
+            [styles["list-bottom-secondary"]]: isHorizontalSecondaryAndNotStacked,
           })}
         >
           {actions && (