@limetech/lime-elements
Version:
103 lines • 3.6 kB
TypeScript
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-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.
*/
accessibleItemsLabel?: string;
/**
* 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