@patternfly/react-charts/dist/js/echarts/components/Charts/Charts.d.ts

This library provides a set of React chart components for use with the PatternFly reference implementation.

import { FunctionComponent } from 'react';
import { EChartsInitOpts } from 'echarts/types/dist/echarts';
import { EChartsOption } from 'echarts/types/dist/option';
import { TooltipOption } from 'echarts/types/dist/shared';
import { ThemeDefinition } from '../themes/Theme';
/**
 * See https://echarts.apache.org/en/option.html#tooltip
 *
 * @public
 * @beta
 */
export interface TooltipOptionProps extends TooltipOption {
    /**
     * The destination label shown in the tooltip -- for Sankey only
     */
    destinationLabel?: string;
    /**
     * The source label shown in the tooltip -- for Sankey only
     */
    sourceLabel?: string;
}
/**
 * See https://echarts.apache.org/en/option.html
 *
 * @public
 * @beta
 */
export interface ChartsOptionProps extends EChartsOption {
    /**
     * Tooltip component -- see https://echarts.apache.org/en/option.html#tooltip
     */
    tooltip?: TooltipOptionProps | TooltipOptionProps[];
}
/**
 * This component is based on the Apache ECharts chart library. It provides additional functionality, custom
 * components, and theming for PatternFly. This provides a collection of React based components you can use to build
 * PatternFly patterns with consistent markup, styling, and behavior.
 *
 * See https://echarts.apache.org/en/api.html#echarts
 *
 * @public
 * @beta
 */
export interface ChartsProps {
    /**
     * The className prop specifies a class name that will be applied to outermost element
     */
    className?: string;
    /**
     * Specify height explicitly, in pixels
     */
    height?: number;
    /**
     * The id prop specifies an ID that will be applied to outermost element.
     */
    id?: string;
    /**
     * Flag indicating to use the legend tooltip (default). This may be overridden by the `option.tooltip` property.
     */
    isLegendTooltip?: boolean;
    /**
     * Flag indicating to use the SVG renderer (default). This may be overridden by the `opts.renderer` property.
     */
    isSvgRenderer?: boolean;
    /**
     * This creates a Mutation Observer to watch the given DOM selector.
     *
     * When the pf-v6-theme-dark selector is added or removed, this component will be notified to update its computed
     * theme styles. However, if the dark theme is not updated dynamically (e.g., via a toggle), there is no need to add
     * this Mutation Observer.
     *
     * Note: Don't provide ".pf-v6-theme-dark" as the node selector as it won't exist in the page for light theme.
     * The underlying querySelectorAll() function needs to find the element the dark theme selector will be added to.
     *
     * See https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors
     *
     * @propType string
     * @example <Charts nodeSelector="html" />
     * @example <Charts nodeSelector="#main" />
     * @example <Charts nodeSelector=".chr-scope__default-layout" />
     */
    nodeSelector?: string;
    /**
     * ECharts uses this object to configure its properties; for example, series, title, and tooltip
     *
     * See https://echarts.apache.org/en/option.html
     */
    option?: ChartsOptionProps;
    /**
     * Optional chart configuration
     *
     * See https://echarts.apache.org/en/api.html#echarts.init
     */
    opts?: EChartsInitOpts;
    /**
     * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or
     * props defined in theme may be overwritten by props specified on the component instance.
     *
     * See https://echarts.apache.org/handbook/en/concepts/style/#theme
     */
    theme?: ThemeDefinition;
    /**
     * Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc.
     *
     * Note: Not compatible with theme prop
     *
     * @example themeColor={ChartThemeColor.blue}
     */
    themeColor?: string;
    /**
     * Specify width explicitly, in pixels
     */
    width?: number;
}
export declare const Charts: FunctionComponent<ChartsProps>;
//# sourceMappingURL=Charts.d.ts.map