@wix/design-system
Version:
@wix/design-system
49 lines (44 loc) • 1.69 kB
TypeScript
import * as React from 'react';
interface DataPoint {
value: number;
label: string;
color: string;
tooltipContent: React.ReactElement;
}
interface ScalePoint {
value: number;
label: string;
}
export interface RadarChartProps {
/** Applies a data-hook HTML attribute that can be used in tests */
dataHook?: string;
/** Defines data points that construct spider web-like charts. Available properties for array items:<br />
 - `value` - a number that represents value in chart<br />
 - `label` - a label that represents value description around the chart<br />
 - `color` - data point color.<br />
 - `tooltipContent` - data point tooltip content */
data?: DataPoint[];
/** Defines a number of scale circles in the chart. Available properties for each scale:<br />
 - `value` - a number representing scale<br />
 - `suffix` - a string that represents value meaning (i.e. % or $) */
scale?: ScalePoint[];
/** Specifies whether graph is disabled */
disabled?: boolean;
/** Controls the width of a graph. Minimum width is 150 pixels.
* @default 150
*/
width?: number;
/** Controls label distance from a chart
* @default 50
*/
labelDistance?: number;
/** Controls label width in pixels
* @default 100
*/
labelWidth?: number;
/** Defines the index of a data point in hover state */
hoverIndex?: null | number;
/** Defines a callback function which is called every time user hovers over a data point. Includes all data point data as first argument and index as second. */
onDataPointHover?(): void;
}
export default class RadarChart extends React.PureComponent<RadarChartProps> {}