@cdx-ui/components 0.3.5 → 0.3.7

package/src/components/chart/types.ts

@@ -0,0 +1,183 @@
+import type { ChartColor } from './palette';
+
+/** Where a formatted value is shown. */
+export type ChartValueLocation = 'tick' | 'tooltip' | 'label' | 'a11y';
+
+export interface ChartValueFormatterContext {
+  location: ChartValueLocation;
+  /** Set when the value belongs to one series. Unset for axis ticks. */
+  seriesId?: string;
+  /** Row in `dataset` (or `data` for pie). Unset for axis ticks. */
+  dataIndex?: number;
+}
+
+/**
+ * Turns a value into display text. `null` is a missing value. The chart picks the
+ * formatter in order: series, then axis, then the locale default.
+ */
+export type ChartValueFormatter = (
+  value: number | null,
+  context: ChartValueFormatterContext,
+) => string;
+
+/** Fields every series shares, whatever its data source. */
+export interface ChartSeriesCommon {
+  /** Stable id. `selectedItem.seriesId` and tooltip items refer to it. */
+  id: string;
+  /**
+   * Series name. Bar and line charts show it in the legend, tooltip, and screen reader text. A
+   * pie chart only prefixes tooltip values with it; slice labels name the legend and slices.
+   */
+  label?: string;
+  /** Chart token name, not a CSS color. Omit to take the next color from the chart's `palette`. */
+  color?: ChartColor;
+  /**
+   * Formats this series' values for tooltips and screen reader text, plus bar value labels, line
+   * marker values, and a pie's legend value column. `context.location` says where. On charts
+   * with axes it wins over the value axis `valueFormatter`.
+   */
+  valueFormatter?: ChartValueFormatter;
+}
+
+/** A series that reads one numeric column from `dataset`. */
+export interface ChartSeriesBase<TRow> extends ChartSeriesCommon {
+  /** Numeric column in `dataset`. A key that is not on the row type is a compile error. */
+  dataKey: keyof TRow & string;
+}
+
+export type ChartScaleType = 'band' | 'linear';
+
+export interface ChartAxis<TRow> {
+  /** Axis id, as in MUI X. */
+  id: string;
+  /** Column in `dataset` that holds this axis's values (category names on a band axis). */
+  dataKey?: keyof TRow & string;
+  /** Scale kind, as in MUI X. Accepted for parity; charts do not read it yet. */
+  scaleType?: ChartScaleType;
+  /** Lowest value on a value axis. Omit to fit the data. */
+  min?: number;
+  /** Highest value on a value axis. Omit to fit the data. */
+  max?: number;
+  /** Approximate tick count. The chart rounds to readable steps. */
+  tickNumber?: number;
+  /** Axis title, as in MUI X. Accepted for parity; not drawn yet. */
+  label?: string;
+  /**
+   * Formats tick text on this axis (`location: 'tick'`). On a value axis it also formats series
+   * values when the series has no `valueFormatter`. On a line chart's x-axis it formats numeric
+   * categories, both the tick (`location: 'tick'`) and the tooltip title (`location: 'tooltip'`).
+   */
+  valueFormatter?: ChartValueFormatter;
+  /**
+   * Side the axis labels draw on. `'none'` hides them. Each chart accepts the sides it can draw
+   * and falls back to its default side for the others.
+   */
+  position?: ChartAxisPosition;
+  /**
+   * Which category labels to draw. A function keeps the label at `index` when it returns
+   * `true`. `'auto'` currently draws every label; it does not thin them yet.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: unknown, index: number) => boolean);
+}
+
+export type ChartAxisPosition = 'top' | 'bottom' | 'left' | 'right' | 'none';
+
+/** Grid lines across the plot. A chart draws the lines that run along its value axis. */
+export interface ChartGrid {
+  /** Horizontal grid lines. */
+  horizontal?: boolean;
+  /** Vertical grid lines. */
+  vertical?: boolean;
+}
+
+/** One mark: a bar, a line point, or a pie slice. `null` clears the selection. */
+export type ChartSelectedItem = { seriesId: string; dataIndex: number } | null;
+
+export interface ChartTooltipProps {
+  /**
+   * `item` shows the mark under the pointer, `axis` every series at that category,
+   * `none` hides the tooltip.
+   */
+  trigger?: 'item' | 'axis' | 'none';
+}
+
+/** A dashed guide line across the plot. */
+export interface ChartReferenceLine {
+  /** Position on the value axis. */
+  value: number;
+  /** Caption drawn beside the line. Omit or pass `''` for no caption. */
+  label?: string;
+}
+
+export interface ChartTooltipItem {
+  seriesId: string;
+  label: string;
+  /** Resolved paint for the swatch. */
+  color: string;
+  formattedValue: string;
+}
+
+/** What the tooltip shows. Built from the chart's data, never from its drawing. */
+export interface ChartTooltipContent {
+  title: string;
+  items: readonly ChartTooltipItem[];
+}
+
+export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ChartSizeProps {
+  /**
+   * Plot box. Named sizes set both width and height; `width` / `height` override one side.
+   * @default 'lg'
+   */
+  size?: ChartSize;
+  /** Pixel width. Overrides the `size` width. */
+  width?: number;
+  /** Pixel height. Overrides the `size` height. */
+  height?: number;
+}
+
+/** A named value in a generated summary. `label` is empty for an unnamed series. */
+export interface ChartSummaryValue {
+  label: string;
+  formattedValue: string;
+}
+
+/** One category in a generated summary. */
+export interface ChartSummaryCategory {
+  label: string;
+  values: readonly ChartSummaryValue[];
+}
+
+export type ChartTrendDirection = 'up' | 'down' | 'none';
+
+export interface ChartTrend {
+  direction: ChartTrendDirection;
+  /** Absolute change, already formatted. */
+  formattedDelta: string;
+  /** Name of the series compared against. Empty when it has none. */
+  comparisonLabel: string;
+}
+
+/** Every string a chart generates. Pass a partial `localeText` to override some of them. */
+export interface ChartLocaleText {
+  /** Shown when there is nothing to plot. */
+  noData: string;
+  /** Tooltip and screen reader text for a category with no value. */
+  noValue: string;
+  /** Legend name for a series without a `label`. */
+  defaultSeriesLabel: string;
+  /** Waterfall step that raises the running total. */
+  waterfallIncrease: string;
+  /** Waterfall step that lowers the running total. */
+  waterfallDecrease: string;
+  /** Change against the comparison series, read after the value. */
+  trend: (trend: ChartTrend) => string;
+  /** Bar chart summary. Called with an empty list when there is no data. */
+  barChartSummary: (categories: readonly ChartSummaryCategory[]) => string;
+  /** Line chart summary of the latest category. `null` when there is no data. */
+  lineChartSummary: (latest: ChartSummaryCategory | null) => string;
+  /** Pie chart summary. `formattedValue` is the share. Empty list when there is no data. */
+  pieChartSummary: (slices: readonly ChartSummaryValue[]) => string;
+}

package/src/components/chart/useChartHostWidth.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+
+/** Runs the chart's own handler first, then the consumer's. */
+export function composeChartLayout(
+  own: (event: LayoutChangeEvent) => void,
+  consumer: ((event: LayoutChangeEvent) => void) | null | undefined,
+): (event: LayoutChangeEvent) => void {
+  return composeEventHandlers<LayoutChangeEvent>(own, consumer);
+}
+
+/**
+ * Measured width of the chart root (`0` before the first layout) and the `onLayout` to put on
+ * it. The consumer's `onLayout` still fires.
+ */
+export function useChartHostWidth(
+  onLayout: ((event: LayoutChangeEvent) => void) | null | undefined,
+): readonly [number, (event: LayoutChangeEvent) => void] {
+  const [width, setWidth] = useState(0);
+  const handleLayout = composeChartLayout((event) => {
+    const next = event.nativeEvent.layout.width;
+    setWidth((prev) => (prev === next ? prev : next));
+  }, onLayout);
+  return [width, handleLayout] as const;
+}

package/src/components/index.ts

@@ -46,6 +46,9 @@ export * from './Accordion';
 export * from './Menu';
 export * from './ProgressBar';
 export * from './ProgressCircle';
+export * from './PieChart';
+export * from './BarChart';
+export * from './LineChart';
 export * from './Skeleton';
 export * from './ProgressSegmented';
 export * from './Radio';
@@ -53,6 +56,7 @@ export * from './ScopedTheme';
 export * from './ScrollShadow';
 export * from './Select';
 export * from './Slider';
+export * from './Stepper';
 export * from './VirtualizedList';
 export type {
   ReorderableListLabels,
@@ -60,6 +64,7 @@ export type {
   ReorderableListRenderItemInfo,
 } from './ReorderableList/types';
 export * from './Switch';
+export * from './SystemAlert';
 export * from './Tabs';
 export * from './Table';
 export * from './Textarea';
@@ -71,5 +76,6 @@ export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';
 export * from './Icon';
+export * from './CountryFlag';
 export * from './IconButton';
 export * from './QuickActionButton';

package/src/styles.css

@@ -1,5 +1,4 @@
 @source './**/*.{ts,tsx}';
-@source '../../data-grid/src/**/*.{ts,tsx}';
 
 /*
  * react-native-web resets every root <Text> to `display: inline`, which stops