@galaxy-io/dls 1.5.5 → 1.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24,5 +24,5 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
24
24
  * `bars` in a group render side by side, several `components` in a bar stack,
25
25
  * and a chart doing both at once needs no extra configuration.
26
26
  */
27
- declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
27
+ declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
28
28
  export default BarChart;
@@ -17,7 +17,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
17
17
  * `bars` in a group render side by side, several `components` in a bar stack,
18
18
  * and a chart doing both at once needs no extra configuration.
19
19
  */
20
- var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
20
+ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
21
21
  const containerRef = useRef(null);
22
22
  const colors = useSeriesColorResolver(series);
23
23
  /**
@@ -176,6 +176,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
176
176
  noTooltip,
177
177
  buildCategoryTooltip,
178
178
  tooltipRenderer,
179
+ tooltipMaxItems,
179
180
  categoryTargets,
180
181
  anchorHalfWidth: categoryStep / 2,
181
182
  isEmpty,
@@ -78,6 +78,8 @@ export interface ChartFrameProps {
78
78
  */
79
79
  buildCategoryTooltip: (index: number) => ChartPlotTooltipModel | null;
80
80
  tooltipRenderer?: ChartTooltipRenderer;
81
+ /** Row cap for the built-in tooltip body. See {@link BaseChartProps.tooltipMaxItems}. */
82
+ tooltipMaxItems?: number;
81
83
  /**
82
84
  * One target per category, in plot coordinates and in category order.
83
85
  *
@@ -109,5 +111,5 @@ export interface ChartFrameProps {
109
111
  */
110
112
  legendInset?: number;
111
113
  }
112
- declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendMaxItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
114
+ declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendMaxItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
113
115
  export default ChartFrame;
@@ -9,7 +9,7 @@ import { match } from "ts-pattern";
9
9
  import { useId, useMemo } from "react";
10
10
  import { jsx, jsxs } from "react/jsx-runtime";
11
11
  //#region src/charts/ChartFrame.tsx
12
- var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendMaxItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
12
+ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendMaxItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
13
13
  const { width, height, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
14
14
  const generatedId = useId();
15
15
  const descriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
@@ -101,7 +101,8 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
101
101
  anchorHalfWidth,
102
102
  placeAwayFromX: placeAwayFromX === void 0 ? void 0 : placeAwayFromX + margin.left,
103
103
  verticalAlign,
104
- renderer: tooltipRenderer
104
+ renderer: tooltipRenderer,
105
+ maxItems: tooltipMaxItems
105
106
  }),
106
107
  isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(ChartEmptyState, { content: contentWhenEmpty })
107
108
  ]
@@ -374,21 +374,21 @@ var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
374
374
  * series to the next. Trailing only, so the first entry stays flush with the
375
375
  * plot's left edge (or the column's top).
376
376
  */
377
- var _exp45 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
377
+ var _exp46 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
378
378
  var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
379
379
  name: "ChartLegendItemButton",
380
380
  class: "ccpczg",
381
381
  propsAsIs: false,
382
- vars: { "ccpczg-0": [_exp45()] }
382
+ vars: { "ccpczg-0": [_exp46()] }
383
383
  });
384
384
  /** The same row, when the legend is inert — no button semantics to announce.
385
385
  * Carries the same trailing padding; see {@link ChartLegendItemButton}. */
386
- var _exp47 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
386
+ var _exp48 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
387
387
  var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
388
388
  name: "ChartLegendItemStatic",
389
389
  class: "c2re25h",
390
390
  propsAsIs: false,
391
- vars: { "c2re25h-0": [_exp47()] }
391
+ vars: { "c2re25h-0": [_exp48()] }
392
392
  });
393
393
  //#endregion
394
394
  export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendMeasureClip, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };
@@ -23,6 +23,8 @@ interface ChartTooltipProps {
23
23
  placeAwayFromX?: number;
24
24
  verticalAlign?: ChartTooltipVerticalAlign;
25
25
  renderer?: ChartTooltipRenderer;
26
+ /** Cap on built-in body rows; the rest collapse into "+N more". */
27
+ maxItems?: number;
26
28
  }
27
- declare const ChartTooltip: ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, }: ChartTooltipProps) => import("react").JSX.Element;
29
+ declare const ChartTooltip: ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, maxItems, }: ChartTooltipProps) => import("react").JSX.Element;
28
30
  export default ChartTooltip;
@@ -7,7 +7,7 @@ import { ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartT
7
7
  import { Fragment, useState } from "react";
8
8
  import { jsx, jsxs } from "react/jsx-runtime";
9
9
  //#region src/charts/ChartTooltip.tsx
10
- var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer }) => {
10
+ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, maxItems }) => {
11
11
  const [retained, setRetained] = useState(model);
12
12
  if (model !== null && model !== retained) setRetained(model);
13
13
  const { tooltipRef, x, y, isMeasured } = useChartTooltipPosition({
@@ -20,6 +20,10 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
20
20
  verticalAlign
21
21
  });
22
22
  const displayed = model ?? retained;
23
+ const rows = displayed?.rows ?? [];
24
+ const cap = maxItems === void 0 ? rows.length : Math.max(1, maxItems);
25
+ const visibleRows = rows.slice(0, cap);
26
+ const hiddenCount = rows.length - visibleRows.length;
23
27
  return /* @__PURE__ */ jsx(ChartTooltipPositioner, {
24
28
  ref: tooltipRef,
25
29
  $x: x,
@@ -31,31 +35,39 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
31
35
  direction: FlexDirection.COLUMN,
32
36
  gap: 8,
33
37
  fillWidth: true,
34
- children: [/* @__PURE__ */ jsx(Text, {
35
- size: TextSize.BODY_SM,
36
- variant: TextVariant.TERTIARY,
37
- isEllipsis: true,
38
- children: displayed.label
39
- }), displayed.rows.length === 0 ? /* @__PURE__ */ jsx(Text, {
40
- size: TextSize.BODY_SM,
41
- variant: TextVariant.SECONDARY,
42
- children: "No data"
43
- }) : /* @__PURE__ */ jsx(ChartTooltipGrid, { children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChartTooltipLabelCell, { children: [/* @__PURE__ */ jsx(FlexItem, {
44
- shrink: 0,
45
- children: /* @__PURE__ */ jsx(Circle, {
46
- size: 8,
47
- hex: row.color
38
+ children: [
39
+ /* @__PURE__ */ jsx(Text, {
40
+ size: TextSize.BODY_SM,
41
+ variant: TextVariant.SECONDARY,
42
+ isEllipsis: true,
43
+ children: displayed.label
44
+ }),
45
+ displayed.rows.length === 0 ? /* @__PURE__ */ jsx(Text, {
46
+ size: TextSize.BODY_SM,
47
+ variant: TextVariant.SECONDARY,
48
+ children: "No data"
49
+ }) : /* @__PURE__ */ jsx(ChartTooltipGrid, { children: visibleRows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChartTooltipLabelCell, { children: [/* @__PURE__ */ jsx(FlexItem, {
50
+ shrink: 0,
51
+ children: /* @__PURE__ */ jsx(Circle, {
52
+ size: 8,
53
+ hex: row.color
54
+ })
55
+ }), /* @__PURE__ */ jsx(Text, {
56
+ size: TextSize.BODY_SM,
57
+ isEllipsis: true,
58
+ children: row.label
59
+ })] }), /* @__PURE__ */ jsx(ChartTooltipValueCell, { children: /* @__PURE__ */ jsx(Text, {
60
+ size: TextSize.BODY_SM,
61
+ weight: TextWeight.MEDIUM,
62
+ align: "right",
63
+ children: row.formattedValue
64
+ }) })] }, row.key)) }),
65
+ hiddenCount > 0 && /* @__PURE__ */ jsx(Text, {
66
+ size: TextSize.BODY_SM,
67
+ variant: TextVariant.SECONDARY,
68
+ children: `+${hiddenCount} more`
48
69
  })
49
- }), /* @__PURE__ */ jsx(Text, {
50
- size: TextSize.BODY_SM,
51
- isEllipsis: true,
52
- children: row.label
53
- })] }), /* @__PURE__ */ jsx(ChartTooltipValueCell, { children: /* @__PURE__ */ jsx(Text, {
54
- size: TextSize.BODY_SM,
55
- weight: TextWeight.MEDIUM,
56
- align: "right",
57
- children: row.formattedValue
58
- }) })] }, row.key)) })]
70
+ ]
59
71
  })
60
72
  });
61
73
  };
@@ -34,5 +34,5 @@ export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & C
34
34
  * what a reader wants, and it avoids the proximity search a
35
35
  * nearest-point-to-cursor model needs.
36
36
  */
37
- declare const LineChart: <TMetric extends string>({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve, strokeWidth, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: LineChartProps<TMetric>) => import("react").JSX.Element;
37
+ declare const LineChart: <TMetric extends string>({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve, strokeWidth, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: LineChartProps<TMetric>) => import("react").JSX.Element;
38
38
  export default LineChart;
@@ -18,7 +18,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
18
18
  * what a reader wants, and it avoids the proximity search a
19
19
  * nearest-point-to-cursor model needs.
20
20
  */
21
- var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
21
+ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
22
22
  const containerRef = useRef(null);
23
23
  const colors = useSeriesColorResolver(series);
24
24
  const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
@@ -136,6 +136,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
136
136
  noTooltip,
137
137
  buildCategoryTooltip,
138
138
  tooltipRenderer,
139
+ tooltipMaxItems,
139
140
  categoryTargets,
140
141
  anchorHalfWidth: geometry.step / 2,
141
142
  isEmpty,
@@ -40,5 +40,5 @@ export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize &
40
40
  * each arc is its own target. Small slices are folded into an "Other" bucket by
41
41
  * default, which keeps every remaining arc large enough to actually hit.
42
42
  */
43
- declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
43
+ declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
44
44
  export default PieChart;
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
19
19
  * each arc is its own target. Small slices are folded into an "Other" bucket by
20
20
  * default, which keeps every remaining arc large enough to actually hit.
21
21
  */
22
- var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
22
+ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
23
23
  const containerRef = useRef(null);
24
24
  const colors = useSeriesColorResolver(series);
25
25
  const dimensions = useChartDimensions({
@@ -124,6 +124,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
124
124
  noTooltip,
125
125
  buildCategoryTooltip,
126
126
  tooltipRenderer,
127
+ tooltipMaxItems,
127
128
  categoryTargets,
128
129
  categoryTargetsTransform: `translate(${geometry.centerX}, ${geometry.centerY})`,
129
130
  placeAwayFromX: geometry.centerX,
@@ -192,7 +192,7 @@ export declare const CHART_MARK_OPACITY_DIMMED = 0.4;
192
192
  /** Distance in px between the tooltip and its anchor. */
193
193
  export declare const CHART_TOOLTIP_OFFSET = 10;
194
194
  /** Minimum width of the tooltip, in px. */
195
- export declare const CHART_TOOLTIP_MIN_WIDTH = 168;
195
+ export declare const CHART_TOOLTIP_MIN_WIDTH = 200;
196
196
  /** Maximum width of the tooltip, in px. */
197
197
  export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
198
198
  /** Gap in px between the plot box and a side-placed legend. */
@@ -218,6 +218,12 @@ export declare const CHART_LEGEND_VERTICAL_GAP = 8;
218
218
  * the caller's `legendMaxItems`; this one only bounds the overflow list itself.
219
219
  */
220
220
  export declare const CHART_LEGEND_OVERFLOW_MAX_HEIGHT = 208;
221
+ /**
222
+ * Floor on the collapsed-legend popover's width, in px, measured as the full
223
+ * popover box — the list inside subtracts the Tooltip's 8px inset per side.
224
+ * Without one, a couple of short labels shrink-wrap into a scrunched box.
225
+ */
226
+ export declare const CHART_LEGEND_OVERFLOW_MIN_WIDTH = 160;
221
227
  /**
222
228
  * Approximate width of one CAPTION-size character.
223
229
  *
@@ -202,7 +202,7 @@ var CHART_MARK_OPACITY_DIMMED = .4;
202
202
  /** Distance in px between the tooltip and its anchor. */
203
203
  var CHART_TOOLTIP_OFFSET = 10;
204
204
  /** Minimum width of the tooltip, in px. */
205
- var CHART_TOOLTIP_MIN_WIDTH = 168;
205
+ var CHART_TOOLTIP_MIN_WIDTH = 200;
206
206
  /** Maximum width of the tooltip, in px. */
207
207
  var CHART_TOOLTIP_MAX_WIDTH = 320;
208
208
  /** Gap in px between the plot box and a side-placed legend. */
@@ -229,6 +229,12 @@ var CHART_LEGEND_VERTICAL_GAP = 8;
229
229
  */
230
230
  var CHART_LEGEND_OVERFLOW_MAX_HEIGHT = 208;
231
231
  /**
232
+ * Floor on the collapsed-legend popover's width, in px, measured as the full
233
+ * popover box — the list inside subtracts the Tooltip's 8px inset per side.
234
+ * Without one, a couple of short labels shrink-wrap into a scrunched box.
235
+ */
236
+ var CHART_LEGEND_OVERFLOW_MIN_WIDTH = 160;
237
+ /**
232
238
  * Approximate width of one CAPTION-size character.
233
239
  *
234
240
  * Axis sizing estimates label widths arithmetically rather than measuring the
@@ -276,4 +282,4 @@ var CHART_PALETTE_ORDER = [
276
282
  ChartPalette.RED
277
283
  ];
278
284
  //#endregion
279
- export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_DIMMED, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
285
+ export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_OVERFLOW_MIN_WIDTH, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_DIMMED, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
@@ -448,6 +448,12 @@ export interface BaseChartProps {
448
448
  tooltipRenderer?: ChartTooltipRenderer;
449
449
  /** Suppress the tooltip and its hit targets entirely. */
450
450
  noTooltip?: boolean;
451
+ /**
452
+ * Cap on tooltip rows. Rows past the cap collapse into an inert "+N more"
453
+ * line. Applies to the built-in body only; a custom `tooltipRenderer`
454
+ * receives the full model. Clamped to at least 1.
455
+ */
456
+ tooltipMaxItems?: number;
451
457
  /** Show the legend beneath the plot. */
452
458
  showLegend?: boolean;
453
459
  /**
package/dist/styles.css CHANGED
@@ -35,7 +35,7 @@
35
35
  .cblgiyf{stroke:var(--cblgiyf-0);pointer-events:none;}
36
36
  .c1lr03cc{fill:var(--c1lr03cc-0);pointer-events:none;}
37
37
  .cizy1s8{overflow:visible;pointer-events:none;}
38
- .c1ukq11d{position:absolute;z-index:10;pointer-events:none;left:var(--c1ukq11d-0);top:var(--c1ukq11d-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--c1ukq11d-2);border-radius:6px;background-color:var(--c1ukq11d-3);opacity:var(--c1ukq11d-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.c1ukq11d{-webkit-transition:none;transition:none;}}
38
+ .c1ukq11d{position:absolute;z-index:10;pointer-events:none;left:var(--c1ukq11d-0);top:var(--c1ukq11d-1);min-width:200px;max-width:320px;padding:10px 12px;border:0.5px solid var(--c1ukq11d-2);border-radius:6px;background-color:var(--c1ukq11d-3);opacity:var(--c1ukq11d-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.c1ukq11d{-webkit-transition:none;transition:none;}}
39
39
  .cwcko2m{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0, 1fr) auto;grid-template-columns:minmax(0, 1fr) auto;-webkit-column-gap:16px;column-gap:16px;row-gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}
40
40
  .cqwhvyz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;min-width:0;}
41
41
  .c1iaray{text-align:right;white-space:nowrap;}
@@ -44,7 +44,7 @@
44
44
  .cjirv6a{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cjirv6a-1);-webkit-box-align:var(--cjirv6a-1);-ms-flex-align:var(--cjirv6a-1);align-items:var(--cjirv6a-1);-webkit-box-pack:var(--cjirv6a-2);-ms-flex-pack:var(--cjirv6a-2);-webkit-justify-content:var(--cjirv6a-2);justify-content:var(--cjirv6a-2);width:var(--cjirv6a-3);min-width:var(--cjirv6a-4);height:var(--cjirv6a-5);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--cjirv6a-6);padding-left:var(--cjirv6a-7);}
45
45
  .c1armna5{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;}
46
46
  .cgd77rv{position:absolute;visibility:hidden;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cgd77rv-0);-ms-flex-direction:var(--cgd77rv-0);flex-direction:var(--cgd77rv-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cgd77rv-1);-webkit-box-align:var(--cgd77rv-1);-ms-flex-align:var(--cgd77rv-1);align-items:var(--cgd77rv-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;white-space:nowrap;}
47
- .cutidpi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;max-height:208px;overflow-y:auto;}
47
+ .cutidpi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;max-height:208px;overflow-y:auto;min-width:144px;}.cutidpi>:last-child{padding-bottom:0;}
48
48
  .ccpczg{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:var(--ccpczg-0);margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;}.ccpczg[data-state="muted"]{opacity:0.1;}.ccpczg[data-state="dimmed"]{opacity:0.4;}.ccpczg:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
49
49
  .c2re25h{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;padding:var(--c2re25h-0);opacity:1;}.c2re25h[data-state="muted"]{opacity:0.1;}.c2re25h[data-state="dimmed"]{opacity:0.4;}
50
50
  .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@galaxy-io/dls",
3
- "version": "1.5.5",
3
+ "version": "1.5.7",
4
4
  "description": "Galaxy Design Language System",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",