@wix/design-system/dist/types/AnalyticsSummaryCard/AnalyticsSummaryCard.types.d.ts

@wix/design-system

import { ReactNode, MouseEvent } from 'react';
import { HORIZONTAL_PADDING } from './AnalyticsSummaryCard.constants';
import { ValuesOf } from '../utils/typeUtils';
/** Controls spacing size from left and right sides */
export type AnalyticsSummaryCardHorizontalPadding = ValuesOf<typeof HORIZONTAL_PADDING>;
export interface AnalyticsSummaryCardProps {
    /** Applied as data-hook HTML attribute that can be used in the tests */
    dataHook?: string;
    /** Specifies a CSS class name to be appended to the component’s root element.
     * @internal
     */
    className?: string;
    /** Text for the title */
    title?: string;
    /** Text for title tooltip */
    titleTooltip?: string;
    /** Text value */
    value: string;
    /** Text for value tooltip */
    valueTooltip?: string;
    /** A number to be displayed as the trend, a positive number will be green with an arrow facing up and a negative number will be red with an arrow facing down */
    trend?: number;
    /** Invert color and arrow direction of Trend. */
    invertedTrend?: boolean;
    /** Show/Hide trend
     * @default false
     */
    isTrendVisible?: boolean;
    /** Whether component is loading
     * @default false
     */
    isLoading?: boolean;
    /** CTA button React Node
     * @default null
     */
    ctaButton?: ReactNode;
    /** Fires when CTA button is clicked */
    onCTAClick?: (event: MouseEvent<HTMLDivElement>) => void;
    /** Always show CTA button
     * @default false
     */
    alwaysShowCTA?: boolean;
    /** Card would be clickable */
    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
    /** Fires when chart is hovered
     * @default noop
     */
    onChartHover?: (index: number) => void;
    /** Indicates the starting index of the highlighted area of the chart */
    chartHighlightedStartingIndex?: number;
    /** Chart width
     * @default 69
     */
    chartWidth?: number;
    /** Chart data */
    chartData: {
        label: Date;
        value: number;
    }[];
    /** Chart tooltip content */
    getChartTooltipContent?: (index: number) => ReactNode;
    /** Sets the color of the chart */
    chartColorHex?: string;
    /** Chart animation duration
     * @default 300
     */
    chartAnimationDuration?: number;
    /** Footer - node
     * @default null
     */
    footer?: ReactNode;
    /** Adds a border and corner radius
     * @default false
     */
    border?: boolean;
    /** Controls spacing size from left and right sides
     * @default large
     */
    horizontalPadding?: AnalyticsSummaryCardHorizontalPadding;
}
//# sourceMappingURL=AnalyticsSummaryCard.types.d.ts.map