@adobe/react-spectrum-charts
Version:
Declarative library for composing Spectrum visualizations in React.
80 lines • 4.34 kB
TypeScript
import { JSXElementConstructor, ReactElement } from 'react';
import { Config, Locale, NumberLocale, Padding, TimeLocale } from 'vega';
import { Theme } from '@react-types/provider';
import { LocaleCode, NumberLocaleCode, TimeLocaleCode } from '@spectrum-charts/locales';
import { ChartData, ChartOptions, Height, PartiallyRequired, TooltipAnchor, TooltipPlacement, Width } from '@spectrum-charts/vega-spec-builder';
import { AxisElement } from './axis';
import { ChartPopoverElement, ChartTooltipElement } from './dialogs';
import { LegendElement } from './legend.types';
import { AreaElement, BarAnnotationElement, BarElement, BigNumberElement, ComboElement, DonutElement, DonutSummaryElement, LineElement, MetricRangeElement, ScatterAnnotationElement, ScatterElement, ScatterPathElement, SegmentLabelElement, TrendlineElement, VennElement } from './marks';
import { TitleElement } from './title.types';
import { Children } from './util.types';
export type ChartChildElement = AreaElement | AxisElement | BarElement | BigNumberElement | DonutElement | ComboElement | LegendElement | LineElement | ScatterElement | TitleElement | VennElement;
export type MarkChildElement = BarAnnotationElement | ChartPopoverElement | ChartTooltipElement | DonutSummaryElement | MetricRangeElement | ScatterAnnotationElement | ScatterPathElement | SegmentLabelElement | TrendlineElement;
export interface SharedChartProps extends Omit<ChartOptions, 'axes' | 'legends' | 'marks' | 'titles'> {
children?: Children<ChartChildElement>;
/** Vega config that can be used to tweak the style of the chart. @see https://vega.github.io/vega/docs/config/ */
config?: Config;
/** Chart data array. */
data: ChartData[];
/** Enables debug mode which will console log things like the generated vega spec and the datums for tooltips. */
debug?: boolean;
/** Number and time locales to use */
locale?: Locale | LocaleCode | {
number?: NumberLocaleCode | NumberLocale;
time?: TimeLocaleCode | TimeLocale;
};
/** Chart padding */
padding?: Padding;
/** Method to use for rendering the chart. 'canvas' is ideal for large data sets. */
renderer?: 'svg' | 'canvas';
/** Sets what the tooltip should be anchored to. Defaults to `cursor`. */
tooltipAnchor?: TooltipAnchor;
/** The placement of the tooltip with respect to the mark. Only applicable if `tooltipAnchor = 'mark'`. */
tooltipPlacement?: TooltipPlacement;
}
type RscChartPropsWithDefaults = 'backgroundColor' | 'colors' | 'colorScheme' | 'debug' | 'hiddenSeries' | 'idKey' | 'lineTypes' | 'lineWidths' | 'locale' | 'padding' | 'renderer' | 's2' | 'tooltipAnchor' | 'tooltipPlacement';
export interface RscChartProps extends PartiallyRequired<SharedChartProps, RscChartPropsWithDefaults> {
chartWidth: number;
chartHeight: number;
}
type SpecPropsWithDefaults = 'backgroundColor' | 'colors' | 'colorScheme' | 'hiddenSeries' | 'idKey' | 'lineTypes' | 'lineWidths' | 's2' | 'symbolShapes' | 'symbolSizes';
export interface SanitizedSpecProps extends PartiallyRequired<Omit<ChartOptions, 'axes' | 'legends' | 'marks' | 'titles'>, SpecPropsWithDefaults> {
/** Children with all non-RSC components removed */
children: ChartChildElement[];
data?: ChartData[];
}
export interface ChartProps extends SharedChartProps {
/** Test id */
dataTestId?: string;
/** Optional text to display when the data set is empty and loading is complete. */
emptyStateText?: string;
/** Loading state. If true, a spinner will render in place of the chart. */
loading?: boolean;
/** Maximum chart width */
maxWidth?: number;
/** Minimum chart width. */
minWidth?: number;
/** Chart height */
height?: Height;
/** Maximum height of the chart */
maxHeight?: number;
/** Minimum height of the chart */
minHeight?: number;
/** react-spectrum theme. This sets the react-spectrum theming on tooltips and popovers. */
theme?: Theme;
/** Chart width */
width?: Width;
}
export type ChartElement = ReactElement<ChartProps, JSXElementConstructor<ChartProps>>;
/**
* @deprecated
*/
export interface MarkProps {
name?: string;
children?: Children<MarkChildElement>;
color?: string;
metric?: string;
}
export {};
//# sourceMappingURL=chart.types.d.ts.map