@limetech/lime-elements/dist/types/components/chart/chart.d.ts

Lime Elements

import { EventEmitter } from '../../stencil-public-runtime';
import { Languages } from '../date-picker/date.types';
import { ChartItem } from './chart.types';
/**
 * A chart is a graphical representation of data, in which
 * visual symbols such as such bars, dots, lines, or slices, represent
 * each data point, in comparison to others.
 *
 * @exampleComponent limel-example-chart-stacked-bar
 * @exampleComponent limel-example-chart-orientation
 * @exampleComponent limel-example-chart-max-value
 * @exampleComponent limel-example-chart-type-bar
 * @exampleComponent limel-example-chart-type-dot
 * @exampleComponent limel-example-chart-type-area
 * @exampleComponent limel-example-chart-type-line
 * @exampleComponent limel-example-chart-type-pie
 * @exampleComponent limel-example-chart-type-doughnut
 * @exampleComponent limel-example-chart-type-ring
 * @exampleComponent limel-example-chart-type-gantt
 * @exampleComponent limel-example-chart-type-nps
 * @exampleComponent limel-example-chart-multi-axis
 * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
 * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
 * @exampleComponent limel-example-chart-axis-increment
 * @exampleComponent limel-example-chart-clickable-items
 * @exampleComponent limel-example-chart-accessibility
 * @exampleComponent limel-example-chart-axis-labels
 * @exampleComponent limel-example-chart-styling
 * @exampleComponent limel-example-chart-creative-styling
 * @beta
 */
export declare class Chart {
    /**
     * Defines the language for translations.
     * Will translate the translatable strings on the components.
     */
    language: Languages;
    /**
     * Helps users of assistive technologies to understand
     * the context of the chart, and what is being displayed.
     */
    accessibleLabel?: string;
    /**
     * Helps users of assistive technologies to understand
     * what the items in the chart represent.
     * Defaults to the translation for "items" in the current language.
     */
    accessibleItemsLabel?: string;
    /**
     * Helps users of assistive technologies to understand
     * what the values in the chart represent.
     * Defaults to the translation for "value" in the current language.
     */
    accessibleValuesLabel?: string;
    /**
     * When set to true, renders visible labels for X and Y axes.
     * Only affects chart types with X and Y axes, such as area, bar, and line charts.
     */
    displayAxisLabels: boolean;
    /**
     * Makes the `text` of chart items constantly visible,
     * By default, item texts are displayed in a tooltip,
     * when the item is hovered or focused.
     * Only affects chart types with X and Y axes, such as area, bar, and line charts.
     */
    displayItemText: boolean;
    /**
     * Makes the `value` (or `formattedValue`) of chart items constantly visible,
     * By default, item values are displayed in a tooltip,
     * when the item is hovered or focused.
     * Only affects chart types with X and Y axes, such as area, bar, and line charts.
     */
    displayItemValue: boolean;
    /**
     * List of items in the chart,
     * each representing a data point.
     */
    items: ChartItem[];
    /**
     * Defines how items are visualized in the chart.
     */
    type?: 'area' | 'bar' | 'doughnut' | 'line' | 'nps' | 'pie' | 'ring' | 'dot' | 'stacked-bar';
    /**
     * Defines whether the chart is intended to be displayed wide or tall.
     * Does not have any effect on chart types which generate circular forms.
     */
    orientation?: 'landscape' | 'portrait';
    /**
     * Specifies the range that items' values could be in.
     * This is used in calculation of the size of the items in the chart.
     * When not provided, the sum of all values in the items will be considered as the range.
     */
    maxValue?: number;
    /**
     * Specifies the increment for the axis lines.
     */
    axisIncrement?: number;
    /**
     * Indicates whether the chart is in a loading state.
     */
    loading: boolean;
    private range;
    /**
     * Fired when a chart item with `clickable` set to `true` is clicked
     */
    interact: EventEmitter<ChartItem>;
    componentWillLoad(): void;
    render(): any;
    private renderCaption;
    private renderTableHeader;
    private renderAxises;
    private renderItems;
    private getItemStyle;
    private getItemClass;
    private calculateSizeAndOffset;
    private getFormattedValue;
    private getItemText;
    private renderTooltip;
    private calculateRange;
    private calculateAxisIncrement;
    private getMinimumValue;
    private getMaximumValue;
    private isRangeItem;
    handleChange(): void;
    private recalculateRangeData;
    private getClickableItem;
    private readonly handleClick;
    private readonly handleKeyDown;
}
//# sourceMappingURL=chart.d.ts.map