@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/charts/BarChart.js

@@ -1,264 +1,230 @@
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextSize, TextWeight } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
-import { useElementWidth } from "../hooks/useElementWidth.js";
-import Wrapper from "../containers/Wrapper.js";
-import { DEFAULT_BAR_PADDING_INNER, DEFAULT_BAR_PADDING_OUTER, getChartPalette } from "./constants.js";
-import { buildBandScale, buildLinearScale, defaultLabelFormatter, defaultValueFormatter, getGroupedMax, getPlotDimensions, getStackedMax, resolveMargin, resolveSeriesColor, roundedTopRectPath } from "./utils.js";
-import ChartLegend from "./ChartLegend.js";
-import ChartTooltip from "./ChartTooltip.js";
-import { XAxis, YAxis } from "./ChartAxis.js";
-/* empty css                   */
-import { styled } from "@linaria/react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
+import { BarChartNormalization, ChartMarkState } from "./types.js";
+import { addAxisTitleSpace, getValueTicks } from "./chartScales.js";
+import { useChartInteraction } from "./useChartInteraction.js";
+import { useChartFormatters } from "./useChartFormatters.js";
+import { useChartDimensions } from "./useChartDimensions.js";
+import { resolveChartPaletteColor, resolveSeriesColor } from "./chartTheme.js";
+import { buildBarChartGeometry, roundedRectPath } from "./barChartGeometry.js";
+import { ChartBarPath, ChartHitTarget } from "./ChartPrimitives.js";
+import ChartFrame from "./ChartFrame.js";
+import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
+import { useCallback, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/BarChart.tsx
-var BarChartMode = /* @__PURE__ */ function(BarChartMode) {
-	BarChartMode["GROUPED"] = "GROUPED";
-	BarChartMode["STACKED"] = "STACKED";
-	return BarChartMode;
-}({});
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
-var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var ChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ChartWrapper",
-	class: "c16zjhoz",
-	propsAsIs: false,
-	vars: {
-		"c16zjhoz-0": [_exp()],
-		"c16zjhoz-1": [_exp2()]
-	}
-}));
-var BarChart = ({ data, series, width, height, margin: marginOverride, fillWidth = false, aspectRatio, mode = "STACKED", barRadius = 4, barPaddingInner = DEFAULT_BAR_PADDING_INNER, barPaddingOuter = DEFAULT_BAR_PADDING_OUTER, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, tooltipRenderer, noTooltip = false, showLegend = true, showValues = false, showGrid = true, ariaLabel }) => {
+/**
+* Bar chart with a three-level data model.
+*
+* Grouping and stacking are properties of the data rather than a mode: several
+* `bars` in a group render side by side, several `components` in a bar stack,
+* and a chart doing both at once needs no extra configuration.
+*/
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
 	const { theme } = useGalaxyTheme();
 	const containerRef = useRef(null);
-	const svgRef = useRef(null);
-	const [tooltip, setTooltip] = useState(null);
-	const [hoveredDatumIndex, setHoveredDatumIndex] = useState(null);
-	const measuredWidth = useElementWidth(containerRef);
-	const resolvedWidth = fillWidth ? measuredWidth ?? 0 : width ?? 0;
-	const resolvedHeight = aspectRatio ? resolvedWidth / aspectRatio : height ?? 0;
-	const palette = useMemo(() => getChartPalette(theme), [theme]);
-	const margin = useMemo(() => resolveMargin(marginOverride), [marginOverride]);
-	const { plotWidth, plotHeight } = useMemo(() => getPlotDimensions(resolvedWidth, resolvedHeight, margin), [
-		resolvedWidth,
-		resolvedHeight,
-		margin
-	]);
-	const seriesKeys = useMemo(() => series.map((s) => s.key), [series]);
-	const labels = useMemo(() => data.map((d) => d.label), [data]);
-	const xScale = useMemo(() => buildBandScale(labels, [0, plotWidth], barPaddingInner, barPaddingOuter), [
-		labels,
-		plotWidth,
-		barPaddingInner,
-		barPaddingOuter
-	]);
-	const yMax = useMemo(() => mode === "STACKED" ? getStackedMax(data, seriesKeys) : getGroupedMax(data, seriesKeys), [
-		data,
-		seriesKeys,
-		mode
+	const dimensions = useChartDimensions({
+		containerRef,
+		width,
+		height,
+		fillWidth,
+		fillHeight,
+		aspectRatio,
+		margin: addAxisTitleSpace(margin, {
+			hasValueTitle: Boolean(valueAxisTitle),
+			hasCategoryTitle: Boolean(categoryAxisTitle)
+		})
+	});
+	const { plotWidth, plotHeight } = dimensions;
+	const { formatValue, formatLabel } = useChartFormatters({
+		valueFormatter,
+		valueUnit,
+		labelFormatter
+	});
+	/**
+	* Axis and tooltip formatting for a percent-normalized chart.
+	*
+	* Normalization rescales values into 0–1, so the caller's formatter — which
+	* describes their real units — would label the axis `0.2`, `0.4`. Unless they
+	* asked for something specific, show shares as percentages.
+	*/
+	const formatAxisValue = useMemo(() => {
+		if (normalization !== BarChartNormalization.PERCENT) return formatValue;
+		if (valueFormatter || valueUnit) return formatValue;
+		return (value) => `${Math.round(value * 100)}%`;
+	}, [
+		normalization,
+		valueFormatter,
+		valueUnit,
+		formatValue
 	]);
-	const yScale = useMemo(() => buildLinearScale(yMax, [plotHeight, 0]), [yMax, plotHeight]);
-	const innerScale = useMemo(() => {
-		if (mode !== "GROUPED") return null;
-		return buildBandScale(seriesKeys, [0, xScale.bandwidth()], .05, 0);
+	const metricKeys = useMemo(() => Object.keys(series), [series]);
+	/**
+	* True when any bar carries more than one component.
+	*
+	* This is what decides the colour grammar. In a stacked chart the segments
+	* are the thing being compared, so they take the palette and every stack
+	* repeats the same ramp; in an unstacked one the metrics are, so each bar
+	* takes its metric's colour. Applying the metric colour to a stack would
+	* paint every segment identically.
+	*/
+	const isStacked = useMemo(() => groups.some((group) => group.bars.some((bar) => bar.components.length > 1)), [groups]);
+	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => {
+		if (explicit) return resolveChartPaletteColor(theme, explicit);
+		if (barIsStacked) return resolveSeriesColor(theme, componentIndex);
+		return resolveSeriesColor(theme, metricKeys.indexOf(metric), series[metric]?.color);
 	}, [
-		mode,
-		seriesKeys,
-		xScale
+		theme,
+		metricKeys,
+		series
+	]);
+	const geometry = useMemo(() => buildBarChartGeometry({
+		groups,
+		plotWidth,
+		plotHeight,
+		normalization,
+		isStacked,
+		valueDomain,
+		resolveColor
+	}), [
+		groups,
+		plotWidth,
+		plotHeight,
+		normalization,
+		isStacked,
+		valueDomain,
+		resolveColor
 	]);
-	const handleBarMouseEnter = useCallback((datumIndex, x, y) => {
-		const datum = data[datumIndex];
-		if (!datum) return;
-		setHoveredDatumIndex(datumIndex);
-		setTooltip({
-			label: datum.label,
-			items: series.map((s, i) => ({
-				seriesKey: s.key,
-				seriesName: s.name,
-				value: datum.values[s.key] ?? 0,
-				color: resolveSeriesColor(s, i, palette)
-			})),
-			x: x + margin.left,
-			y: y + margin.top
+	const valueTicks = useMemo(() => getValueTicks(geometry.valueScale, valueDomain), [geometry.valueScale, valueDomain]);
+	const isEmpty = groups.length === 0;
+	const legendItems = useMemo(() => {
+		if (!isStacked) return metricKeys.map((metric) => ({
+			key: metric,
+			label: series[metric].label,
+			color: resolveColor({
+				metric,
+				barIndex: 0,
+				componentIndex: 0,
+				isStacked: false,
+				explicit: series[metric].color
+			})
+		}));
+		const seen = /* @__PURE__ */ new Map();
+		for (const group of groups) for (const bar of group.bars) bar.components.forEach((component, componentIndex) => {
+			if (!seen.has(component.key)) seen.set(component.key, {
+				label: component.label,
+				index: componentIndex,
+				explicit: component.color
+			});
 		});
+		return [...seen.entries()].map(([key, { label, index, explicit }]) => ({
+			key,
+			label,
+			color: resolveColor({
+				metric: metricKeys[0],
+				barIndex: 0,
+				componentIndex: index,
+				isStacked: true,
+				explicit
+			})
+		}));
 	}, [
-		data,
+		isStacked,
+		metricKeys,
 		series,
-		palette,
-		margin
+		groups,
+		resolveColor
 	]);
-	const handleBarMouseLeave = useCallback(() => {
-		setHoveredDatumIndex(null);
-		setTooltip(null);
-	}, []);
-	const handleBarFocus = useCallback((datumIndex, x, y) => {
-		handleBarMouseEnter(datumIndex, x, y);
-	}, [handleBarMouseEnter]);
-	const handleBarBlur = useCallback(() => {
-		handleBarMouseLeave();
-	}, [handleBarMouseLeave]);
-	if (resolvedWidth === 0 || resolvedHeight === 0) return /* @__PURE__ */ jsx(ChartWrapper, {
-		ref: containerRef,
-		$fillWidth: fillWidth
+	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
+	const interaction = useChartInteraction({
+		categoryCount: geometry.bands.length,
+		seriesKeys: legendKeys,
+		disabled: noTooltip || isLoading || isEmpty,
+		onPinnedChange
 	});
-	const renderStackedBars = () => {
-		return data.map((datum, datumIndex) => {
-			const x = xScale(datum.label) ?? 0;
-			const bandWidth = xScale.bandwidth();
-			let cumulativeY = plotHeight;
-			return /* @__PURE__ */ jsx("g", { children: series.map((s, seriesIndex) => {
-				const value = datum.values[s.key] ?? 0;
-				if (value === 0) return null;
-				const barHeight = plotHeight - yScale(value);
-				const barY = cumulativeY - barHeight;
-				cumulativeY = barY;
-				const color = resolveSeriesColor(s, seriesIndex, palette);
-				const isTopSegment = seriesIndex === series.length - 1 || series.slice(seriesIndex + 1).every((next) => (datum.values[next.key] ?? 0) === 0);
-				const isDimmed = hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex;
-				return /* @__PURE__ */ jsxs("g", { children: [isTopSegment ? /* @__PURE__ */ jsx("path", {
-					d: roundedTopRectPath(x, barY, bandWidth, barHeight, barRadius),
-					fill: color,
-					opacity: isDimmed ? .3 : 1,
-					style: { transition: `opacity 150ms ease-in-out` },
-					onMouseEnter: () => handleBarMouseEnter(datumIndex, x + bandWidth / 2, barY),
-					onMouseLeave: handleBarMouseLeave,
-					onFocus: () => handleBarFocus(datumIndex, x + bandWidth / 2, barY),
-					onBlur: handleBarBlur,
-					tabIndex: 0,
-					role: "graphics-symbol",
-					"aria-roledescription": "bar",
-					"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(value)}`
-				}) : /* @__PURE__ */ jsx("rect", {
-					x,
-					y: barY,
-					width: bandWidth,
-					height: barHeight,
-					fill: color,
-					opacity: isDimmed ? .3 : 1,
-					style: { transition: `opacity 150ms ease-in-out` },
-					onMouseEnter: () => handleBarMouseEnter(datumIndex, x + bandWidth / 2, barY),
-					onMouseLeave: handleBarMouseLeave,
-					onFocus: () => handleBarFocus(datumIndex, x + bandWidth / 2, barY),
-					onBlur: handleBarBlur,
-					tabIndex: 0,
-					role: "graphics-symbol",
-					"aria-roledescription": "bar",
-					"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(value)}`
-				}), showValues && isTopSegment && /* @__PURE__ */ jsx("foreignObject", {
-					x,
-					y: barY - 20,
-					width: bandWidth,
-					height: 20,
-					children: /* @__PURE__ */ jsx(FlexWrapper, {
-						justifyContent: JustifyContent.CENTER,
-						alignItems: AlignItems.END,
-						fillWidth: true,
-						fillHeight: true,
-						children: /* @__PURE__ */ jsx(Text, {
-							size: TextSize.CAPTION,
-							weight: TextWeight.MEDIUM,
-							children: valueFormatter(value)
-						})
-					})
-				})] }, s.key);
-			}) }, datum.label);
-		});
-	};
-	const renderGroupedBars = () => {
-		if (!innerScale) return null;
-		return data.map((datum, datumIndex) => {
-			const groupX = xScale(datum.label) ?? 0;
-			const isDimmed = hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex;
-			return /* @__PURE__ */ jsx("g", {
-				transform: `translate(${groupX}, 0)`,
-				children: series.map((s, seriesIndex) => {
-					const value = datum.values[s.key] ?? 0;
-					if (value === 0) return null;
-					const barX = innerScale(s.key) ?? 0;
-					const barWidth = innerScale.bandwidth();
-					const barHeight = plotHeight - yScale(value);
-					const barY = yScale(value);
-					const color = resolveSeriesColor(s, seriesIndex, palette);
-					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
-						d: roundedTopRectPath(barX, barY, barWidth, barHeight, barRadius),
-						fill: color,
-						opacity: isDimmed ? .3 : 1,
-						style: { transition: `opacity 150ms ease-in-out` },
-						onMouseEnter: () => handleBarMouseEnter(datumIndex, groupX + barX + barWidth / 2, barY),
-						onMouseLeave: handleBarMouseLeave,
-						onFocus: () => handleBarFocus(datumIndex, groupX + barX + barWidth / 2, barY),
-						onBlur: handleBarBlur,
-						tabIndex: 0,
-						role: "graphics-symbol",
-						"aria-roledescription": "bar",
-						"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(value)}`
-					}), showValues && /* @__PURE__ */ jsx("foreignObject", {
-						x: barX,
-						y: barY - 20,
-						width: barWidth,
-						height: 20,
-						children: /* @__PURE__ */ jsx(FlexWrapper, {
-							justifyContent: JustifyContent.CENTER,
-							alignItems: AlignItems.END,
-							fillWidth: true,
-							fillHeight: true,
-							children: /* @__PURE__ */ jsx(Text, {
-								size: TextSize.CAPTION,
-								weight: TextWeight.MEDIUM,
-								children: valueFormatter(value)
-							})
-						})
-					})] }, s.key);
-				})
-			}, datum.label);
-		});
-	};
-	const defaultAriaLabel = `Bar chart with ${data.length} categories and ${series.length} series`;
-	return /* @__PURE__ */ jsxs(ChartWrapper, {
-		ref: containerRef,
-		$fillWidth: fillWidth,
-		children: [/* @__PURE__ */ jsxs(Wrapper, {
-			position: "relative",
-			children: [/* @__PURE__ */ jsx("svg", {
-				ref: svgRef,
-				width: resolvedWidth,
-				height: resolvedHeight,
-				role: "img",
-				"aria-label": ariaLabel ?? defaultAriaLabel,
-				children: /* @__PURE__ */ jsxs("g", {
-					transform: `translate(${margin.left}, ${margin.top})`,
-					children: [
-						/* @__PURE__ */ jsx(YAxis, {
-							scale: yScale,
-							transform: "translate(0, 0)",
-							plotWidth,
-							formatter: valueFormatter,
-							showGrid,
-							theme
-						}),
-						/* @__PURE__ */ jsx(XAxis, {
-							scale: xScale,
-							transform: `translate(0, ${plotHeight})`,
-							plotWidth,
-							formatter: labelFormatter
-						}),
-						mode === "STACKED" ? renderStackedBars() : renderGroupedBars()
-					]
-				})
-			}), !noTooltip && (tooltipRenderer ? tooltip && tooltipRenderer(tooltip) : /* @__PURE__ */ jsx(ChartTooltip, {
-				data: tooltip,
-				valueFormatter
-			}))]
-		}), showLegend && /* @__PURE__ */ jsxs(FlexWrapper, {
-			direction: FlexDirection.ROW,
-			gap: 0,
-			children: [/* @__PURE__ */ jsx(Wrapper, { minWidth: margin.left }), /* @__PURE__ */ jsx(ChartLegend, {
-				series,
-				palette
-			})]
-		})]
+	const tooltipModel = useMemo(() => {
+		if (noTooltip || interaction.activeIndex === null) return null;
+		const band = geometry.bands[interaction.activeIndex];
+		const group = groups[interaction.activeIndex];
+		if (!band || !group) return null;
+		const rows = geometry.rects.filter((rect) => rect.groupIndex === interaction.activeIndex).map((rect) => ({
+			key: rect.id,
+			label: rect.label,
+			group: series[rect.metric]?.label,
+			value: rect.value,
+			formattedValue: formatValue(rect.value),
+			color: rect.color
+		}));
+		return {
+			label: formatLabel(group.label),
+			rows,
+			anchorX: band.anchorX,
+			anchorY: band.anchorY
+		};
+	}, [
+		noTooltip,
+		interaction.activeIndex,
+		geometry,
+		groups,
+		series,
+		formatValue,
+		formatLabel
+	]);
+	const categoryPositions = useMemo(() => geometry.bands.map((band) => band.x), [geometry.bands]);
+	const categoryStep = geometry.bands[0]?.width ?? 0;
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		containerRef,
+		dimensions,
+		fillWidth,
+		fillHeight,
+		interaction,
+		ariaLabel: ariaLabel ?? `Bar chart with ${groups.length} categories and ${metricKeys.length} series`,
+		ariaDescription,
+		axes: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
+			ticks: valueTicks,
+			scale: geometry.valueScale,
+			plotWidth,
+			plotHeight,
+			marginLeft: dimensions.margin.left,
+			formatter: formatAxisValue,
+			showGrid,
+			title: valueAxisTitle
+		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
+			labels: groups.map((group) => group.label),
+			positions: categoryPositions,
+			step: categoryStep,
+			plotWidth,
+			plotHeight,
+			formatter: formatLabel,
+			mode: categoryLabelMode,
+			title: categoryAxisTitle
+		})] }),
+		noTooltip,
+		tooltipModel,
+		tooltipRenderer,
+		anchorHalfWidth: categoryStep / 2,
+		isEmpty,
+		isLoading,
+		contentWhenEmpty,
+		showLegend,
+		legendItems,
+		children: [geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
+			d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
+			fill: rect.color,
+			"data-state": isLoading ? ChartMarkState.MUTED : interaction.getMarkState({
+				categoryIndex: rect.groupIndex,
+				seriesKey: isStacked ? rect.componentKey : rect.metric
+			})
+		}, rect.id)), !noTooltip && !isLoading && geometry.bands.map((band) => /* @__PURE__ */ jsx(ChartHitTarget, {
+			x: band.x,
+			y: band.y,
+			width: band.width,
+			height: band.height,
+			"data-interactive": "true",
+			onMouseEnter: () => interaction.onCategoryEnter(band.groupIndex),
+			onMouseLeave: interaction.onCategoryLeave,
+			onClick: () => interaction.onCategoryClick(band.groupIndex)
+		}, band.groupIndex))]
 	});
 };
 //#endregion
-export { BarChartMode, BarChart as default };
+export { BarChart as default };

package/dist/charts/ChartAxis.d.ts

@@ -1,28 +1,53 @@
-import type { ScaleBand, ScaleLinear, ScalePoint } from "d3-scale";
-import type { Theme } from "../theme/types";
+import { ChartCategoryLabelMode } from "./types";
 import type { ChartLabelFormatter, ChartValueFormatter } from "./types";
-interface XAxisProps {
-    scale: ScaleBand<string>;
-    transform: string;
+/**
+ * Axes for the cartesian charts.
+ *
+ * Neither axis draws a domain line or tick marks — the grid lines carry the
+ * structure, and the one at zero is what makes bars read as resting on a
+ * baseline rather than floating.
+ */
+interface ChartValueAxisProps {
+    ticks: number[];
+    /** Maps a tick value to its y position in plot coordinates. */
+    scale: (value: number) => number;
     plotWidth: number;
-    formatter?: ChartLabelFormatter;
-}
-export declare const XAxis: ({ scale, transform, formatter }: XAxisProps) => import("react").JSX.Element;
-interface XAxisPointProps {
-    scale: ScalePoint<string>;
-    transform: string;
-    plotWidth: number;
-    formatter?: ChartLabelFormatter;
+    /**
+     * The chart's left margin. The label box is this minus the tick gap, so the
+     * axis follows the margin instead of hardcoding an offset — a custom margin
+     * used to push these labels outside the viewport.
+     */
+    marginLeft: number;
+    /** Needed to centre a rotated axis title along the gutter. */
+    plotHeight: number;
+    formatter: ChartValueFormatter;
+    showGrid?: boolean;
+    /**
+     * Rotated title in the left gutter.
+     *
+     * Space for it must already be reserved by `addAxisTitleSpace`, since the
+     * margin is resolved before this renders.
+     */
+    title?: string;
 }
-export declare const XAxisPoint: ({ scale, transform, formatter, }: XAxisPointProps) => import("react").JSX.Element;
-interface YAxisProps {
-    scale: ScaleLinear<number, number>;
-    transform: string;
+export declare const ChartValueAxis: ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid, title, }: ChartValueAxisProps) => import("react").JSX.Element;
+interface ChartCategoryAxisProps {
+    labels: string[];
+    /** Left edge of each category's slot, in plot coordinates. */
+    positions: number[];
+    /** Width of one category slot. */
+    step: number;
+    /** Needed to span an axis title across the full plot. */
     plotWidth: number;
-    tickCount?: number;
-    formatter?: ChartValueFormatter;
-    showGrid?: boolean;
-    theme: Theme;
+    plotHeight: number;
+    formatter: ChartLabelFormatter;
+    mode?: ChartCategoryLabelMode;
+    /**
+     * Title below the tick labels.
+     *
+     * Space for it must already be reserved by `addAxisTitleSpace`.
+     */
+    title?: string;
 }
-export declare const YAxis: ({ scale, transform, plotWidth, tickCount, formatter, showGrid, theme, }: YAxisProps) => import("react").JSX.Element;
+export declare const ChartCategoryAxis: ({ labels, positions, step, plotWidth, plotHeight, formatter, mode, title, }: ChartCategoryAxisProps) => import("react").JSX.Element;
 export {};