@trackunit/react-chart-components 2.6.38 → 2.6.40

package/index.cjs.js

@@ -249,7 +249,14 @@ const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
         },
         isClickable: {
             false: "cursor-default",
-            true: "cursor-pointer",
+            true: [
+                "cursor-pointer",
+                "rounded-sm",
+                "focus-visible:outline-none",
+                "focus-visible:ring-2",
+                "focus-visible:ring-primary-500",
+                "focus-visible:ring-offset-2",
+            ],
         },
     },
     defaultVariants: {
@@ -258,27 +265,52 @@ const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
         isClickable: false,
     },
 });
-const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-3", "mr-1", "h-3", "rounded-[50%]", "flex-none"], {
-    variants: {
-        selected: {
-            false: "",
-            true: "",
-        },
-    },
-    defaultVariants: {
-        selected: false,
-    },
-});
+const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-2.5", "mr-1", "h-2.5", "rounded-[50%]", "flex-none"]);
+const cvaLegendItemLineSwatch = cssClassVarianceUtilities.cvaMerge(["relative", "mr-1", "h-3", "w-5", "flex-none", "overflow-hidden"]);
+const cvaLegendItemLineSvg = cssClassVarianceUtilities.cvaMerge(["h-full", "w-full"]);
 
+const LINE_SWATCH_WIDTH = 20;
+const LINE_SWATCH_HEIGHT = 12;
+const LINE_SWATCH_MID_Y = 6;
+const LINE_STROKE_WIDTH = 2;
+const LINE_DASH_ARRAY = "3 2";
+const EMPTY_CIRCLE_RADIUS = 3;
+const LegendItemSwatch = ({ color, dataTestId, indicator, symbol }) => {
+    switch (indicator) {
+        case "fill":
+            return (jsxRuntime.jsx("div", { className: cvaLegendItemIndicator(), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }));
+        case "solid line":
+        case "dashed line":
+            return (jsxRuntime.jsx("div", { className: cvaLegendItemLineSwatch(), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, children: jsxRuntime.jsxs("svg", { "aria-hidden": "true", className: cvaLegendItemLineSvg(), viewBox: `0 0 ${LINE_SWATCH_WIDTH} ${LINE_SWATCH_HEIGHT}`, children: [jsxRuntime.jsx("line", { "data-testid": dataTestId ? `${dataTestId}-indicator-line` : null, stroke: color, strokeDasharray: indicator === "dashed line" ? LINE_DASH_ARRAY : undefined, strokeWidth: LINE_STROKE_WIDTH, x1: 0, x2: LINE_SWATCH_WIDTH, y1: LINE_SWATCH_MID_Y, y2: LINE_SWATCH_MID_Y }), indicator === "solid line" && symbol === "emptyCircle" ? (jsxRuntime.jsx("circle", { cx: LINE_SWATCH_WIDTH / 2, cy: LINE_SWATCH_MID_Y, "data-testid": dataTestId ? `${dataTestId}-indicator-symbol` : null, fill: "white", r: EMPTY_CIRCLE_RADIUS, stroke: color, strokeWidth: LINE_STROKE_WIDTH })) : null] }) }));
+        default:
+            return sharedUtils.exhaustiveCheck(indicator);
+    }
+};
 /**
- * The LegendItem component is used to show form legends.
+ * The LegendItem component is the standard chart legend row: a swatch, a label, and an optional count.
+ *
+ * ### When to use
+ * - Fill for field/sector bars and donut slices
+ * - Solid line with a hollow circle when individual data points are part of the reading
+ * - Dashed line with no symbol for averages, targets, and comparisons
  *
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, }) => {
+const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, ...indicatorProps }) => {
     const handleOnClick = onClick && !disabled ? e => onClick(e) : undefined;
-    return (jsxRuntime.jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && onClick !== undefined, className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: style, children: [jsxRuntime.jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), jsxRuntime.jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : (jsxRuntime.jsxs("p", { className: "text-xs", children: ["(", count ?? 0, ")", unit ?? ""] }))] }));
+    const handleOnKeyDown = handleOnClick
+        ? event => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                event.currentTarget.click();
+            }
+        }
+        : undefined;
+    const indicator = indicatorProps.indicator ?? "fill";
+    const symbol = indicatorProps.indicator === "solid line" ? (indicatorProps.symbol ?? "emptyCircle") : "none";
+    const isSwitch = handleOnClick !== undefined;
+    return (jsxRuntime.jsxs("div", { "aria-checked": isSwitch ? selected : undefined, className: cvaLegendItem({ disabled, selected, isClickable: isSwitch, className }), "data-testid": dataTestId, onClick: handleOnClick, onKeyDown: handleOnKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: isSwitch ? "switch" : undefined, style: style, tabIndex: isSwitch ? 0 : undefined, children: [jsxRuntime.jsx(LegendItemSwatch, { color: color, dataTestId: dataTestId, indicator: indicator, symbol: symbol }), jsxRuntime.jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : jsxRuntime.jsx("p", { className: "text-xs", children: `(${count ?? 0}${unit ?? ""})` })] }));
 };
 
 /**

package/index.esm.js

@@ -5,7 +5,7 @@ import { useLocale, useDateAndTime } from '@trackunit/react-date-and-time-hooks'
 import { DEFAULT_CHART_COLORS, CHART_STATUS_COLORS, fontFamily, DEFAULT_CHART_OTHER } from '@trackunit/ui-design-tokens';
 import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { Spinner, Text, useMergeRefs } from '@trackunit/react-components';
-import { objectKeys } from '@trackunit/shared-utils';
+import { objectKeys, exhaustiveCheck } from '@trackunit/shared-utils';
 import * as echarts from 'echarts';
 
 function isECElementEvent(value) {
@@ -228,7 +228,14 @@ const cvaLegendItem = cvaMerge([
         },
         isClickable: {
             false: "cursor-default",
-            true: "cursor-pointer",
+            true: [
+                "cursor-pointer",
+                "rounded-sm",
+                "focus-visible:outline-none",
+                "focus-visible:ring-2",
+                "focus-visible:ring-primary-500",
+                "focus-visible:ring-offset-2",
+            ],
         },
     },
     defaultVariants: {
@@ -237,27 +244,52 @@ const cvaLegendItem = cvaMerge([
         isClickable: false,
     },
 });
-const cvaLegendItemIndicator = cvaMerge(["w-3", "mr-1", "h-3", "rounded-[50%]", "flex-none"], {
-    variants: {
-        selected: {
-            false: "",
-            true: "",
-        },
-    },
-    defaultVariants: {
-        selected: false,
-    },
-});
+const cvaLegendItemIndicator = cvaMerge(["w-2.5", "mr-1", "h-2.5", "rounded-[50%]", "flex-none"]);
+const cvaLegendItemLineSwatch = cvaMerge(["relative", "mr-1", "h-3", "w-5", "flex-none", "overflow-hidden"]);
+const cvaLegendItemLineSvg = cvaMerge(["h-full", "w-full"]);
 
+const LINE_SWATCH_WIDTH = 20;
+const LINE_SWATCH_HEIGHT = 12;
+const LINE_SWATCH_MID_Y = 6;
+const LINE_STROKE_WIDTH = 2;
+const LINE_DASH_ARRAY = "3 2";
+const EMPTY_CIRCLE_RADIUS = 3;
+const LegendItemSwatch = ({ color, dataTestId, indicator, symbol }) => {
+    switch (indicator) {
+        case "fill":
+            return (jsx("div", { className: cvaLegendItemIndicator(), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }));
+        case "solid line":
+        case "dashed line":
+            return (jsx("div", { className: cvaLegendItemLineSwatch(), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, children: jsxs("svg", { "aria-hidden": "true", className: cvaLegendItemLineSvg(), viewBox: `0 0 ${LINE_SWATCH_WIDTH} ${LINE_SWATCH_HEIGHT}`, children: [jsx("line", { "data-testid": dataTestId ? `${dataTestId}-indicator-line` : null, stroke: color, strokeDasharray: indicator === "dashed line" ? LINE_DASH_ARRAY : undefined, strokeWidth: LINE_STROKE_WIDTH, x1: 0, x2: LINE_SWATCH_WIDTH, y1: LINE_SWATCH_MID_Y, y2: LINE_SWATCH_MID_Y }), indicator === "solid line" && symbol === "emptyCircle" ? (jsx("circle", { cx: LINE_SWATCH_WIDTH / 2, cy: LINE_SWATCH_MID_Y, "data-testid": dataTestId ? `${dataTestId}-indicator-symbol` : null, fill: "white", r: EMPTY_CIRCLE_RADIUS, stroke: color, strokeWidth: LINE_STROKE_WIDTH })) : null] }) }));
+        default:
+            return exhaustiveCheck(indicator);
+    }
+};
 /**
- * The LegendItem component is used to show form legends.
+ * The LegendItem component is the standard chart legend row: a swatch, a label, and an optional count.
+ *
+ * ### When to use
+ * - Fill for field/sector bars and donut slices
+ * - Solid line with a hollow circle when individual data points are part of the reading
+ * - Dashed line with no symbol for averages, targets, and comparisons
  *
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, }) => {
+const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, ...indicatorProps }) => {
     const handleOnClick = onClick && !disabled ? e => onClick(e) : undefined;
-    return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && onClick !== undefined, className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: style, children: [jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : (jsxs("p", { className: "text-xs", children: ["(", count ?? 0, ")", unit ?? ""] }))] }));
+    const handleOnKeyDown = handleOnClick
+        ? event => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                event.currentTarget.click();
+            }
+        }
+        : undefined;
+    const indicator = indicatorProps.indicator ?? "fill";
+    const symbol = indicatorProps.indicator === "solid line" ? (indicatorProps.symbol ?? "emptyCircle") : "none";
+    const isSwitch = handleOnClick !== undefined;
+    return (jsxs("div", { "aria-checked": isSwitch ? selected : undefined, className: cvaLegendItem({ disabled, selected, isClickable: isSwitch, className }), "data-testid": dataTestId, onClick: handleOnClick, onKeyDown: handleOnKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: isSwitch ? "switch" : undefined, style: style, tabIndex: isSwitch ? 0 : undefined, children: [jsx(LegendItemSwatch, { color: color, dataTestId: dataTestId, indicator: indicator, symbol: symbol }), jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : jsx("p", { className: "text-xs", children: `(${count ?? 0}${unit ?? ""})` })] }));
 };
 
 /**

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/chart-components/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["// Migration entry point for @nx/js:tsc build target.\n// Migrations are registered in ../migrations.json and resolved by NX at runtime.\nexport {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "2.6.38",
+  "version": "2.6.40",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -10,11 +10,11 @@
   "dependencies": {
     "echarts": "5.6.0",
     "@trackunit/date-and-time-utils": "1.14.26",
-    "@trackunit/react-date-and-time-hooks": "2.6.38",
+    "@trackunit/react-date-and-time-hooks": "2.6.39",
     "@trackunit/ui-design-tokens": "1.15.15",
     "@trackunit/shared-utils": "1.16.28",
     "@trackunit/css-class-variance-utilities": "1.14.25",
-    "@trackunit/react-components": "2.11.2"
+    "@trackunit/react-components": "2.11.3"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

package/src/LegendItem/LegendItem.d.ts

@@ -1,6 +1,17 @@
 import { Refable, type Styleable } from "@trackunit/react-components";
-import { MouseEventHandler } from "react";
-export interface LegendItemProps extends Refable<HTMLDivElement>, Styleable {
+import { MouseEventHandler, ReactElement } from "react";
+/**
+ * Shape of the colour indicator. `fill` is a solid circle for a block of colour. `solid line` is a
+ * horizontal rule with an optional hollow-circle marker. `dashed line` is a reference series and
+ * never has a marker.
+ */
+export type LegendItemIndicator = "fill" | "solid line" | "dashed line";
+/**
+ * Marker on a solid-line indicator. `emptyCircle` is the default hollow circle. Pass `none` only when
+ * the reader should follow the trend rather than each sample. Dashed lines cannot take a symbol.
+ */
+export type LegendItemSymbol = "none" | "emptyCircle";
+interface LegendItemBaseProps extends Refable<HTMLDivElement>, Styleable {
     label: string;
     count?: number;
     selected?: boolean;
@@ -14,10 +25,51 @@ export interface LegendItemProps extends Refable<HTMLDivElement>, Styleable {
     unit?: "%";
     hideValue?: boolean;
 }
+interface LegendItemFillProps extends LegendItemBaseProps {
+    /**
+     * Filled colour block for field/sector bars and donut slices. This is the default indicator.
+     *
+     * @category primary
+     */
+    indicator?: "fill";
+}
+interface LegendItemSolidLineProps extends LegendItemBaseProps {
+    /**
+     * Solid line for a series whose individual data points are part of the reading, such as a
+     * cumulative series. Defaults to a hollow circle marker.
+     *
+     * @category primary
+     */
+    indicator: "solid line";
+    /**
+     * Marker on a solid line. Defaults to a hollow circle. Pass `none` only when the reader should
+     * follow the trend rather than each sample. Do not use a solid line with `symbol="none"` for
+     * averages, targets, or comparisons — those use `indicator="dashed line"`.
+     *
+     * @category primary
+     */
+    symbol?: LegendItemSymbol;
+}
+interface LegendItemDashedLineProps extends LegendItemBaseProps {
+    /**
+     * Dashed line for a reference or secondary series (average, target, comparison). Dashed lines
+     * never have a symbol.
+     *
+     * @category primary
+     */
+    indicator: "dashed line";
+}
+export type LegendItemProps = LegendItemFillProps | LegendItemSolidLineProps | LegendItemDashedLineProps;
 /**
- * The LegendItem component is used to show form legends.
+ * The LegendItem component is the standard chart legend row: a swatch, a label, and an optional count.
+ *
+ * ### When to use
+ * - Fill for field/sector bars and donut slices
+ * - Solid line with a hollow circle when individual data points are part of the reading
+ * - Dashed line with no symbol for averages, targets, and comparisons
  *
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-export declare const LegendItem: ({ className, style, count, label, disabled, selected, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit, hideValue, }: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LegendItem: ({ className, style, count, label, disabled, selected, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit, hideValue, ...indicatorProps }: LegendItemProps) => ReactElement;
+export {};

package/src/LegendItem/LegendItem.variants.d.ts

@@ -3,6 +3,6 @@ export declare const cvaLegendItem: (props?: ({
     disabled?: boolean | null | undefined;
     isClickable?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaLegendItemIndicator: (props?: ({
-    selected?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaLegendItemIndicator: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaLegendItemLineSwatch: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaLegendItemLineSvg: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;