fybdp-d3-kg/dist/src/BarChart/BarSeries/Bar.d.ts

Knowledge Graph using React and D3.js

import React, { Component, ReactElement } from 'react';
import { ChartTooltip, ChartTooltipProps } from '../../common/Tooltip';
import { Gradient, GradientProps } from '../../common/Gradient';
import { ChartInternalShallowDataShape, Direction } from '../../common/data';
import { RangeLinesProps, RangeLines } from './RangeLines';
import { Mask, MaskProps } from '../../common/Mask';
import { PropFunctionTypes } from '../../common/utils/functions';
import { BarLabelProps, BarLabel } from './BarLabel';
export declare type BarType = 'standard' | 'grouped' | 'stacked' | 'stackedNormalized' | 'stackedDiverging' | 'marimekko' | 'waterfall';
export declare type BarProps = {
    /**
     * D3 scale for X Axis. Set internally by `BarChart`.
     */
    xScale: any;
    /**
     * D3 scale for Y Axis. Set internally by `BarChart`.
     */
    yScale: any;
    /**
     * D3 scale for X Multi-Group Axis. Set internally by `BarChart`.
     */
    xScale1: any;
    /**
     * Parsed data shape. Set internally by `BarChart`.
     */
    data: ChartInternalShallowDataShape;
    /**
     * Id set internally by `BarChart`.
     */
    id: string;
    /**
     * Gradient shades for the bar.
     */
    gradient: ReactElement<GradientProps, typeof Gradient> | null;
    /**
     * SVG rx attribute for the bar.
     */
    rx: number;
    /**
     * SVG ry attribute for the bar.
     */
    ry: number;
    /**
     * Width of the bar. Set internally by `BarSeries`.
     */
    width: number;
    /**
     * Padding for the bar groups.
     */
    padding: number;
    /**
     * Total number of bars used for animation. Set internally by `BarSeries`.
     */
    barCount: number;
    /**
     * Color callback for the bar.
     */
    color: any;
    /**
     * Whether the bar is rounded or not.
     */
    rounded: boolean;
    /**
     * Cursor for the bar element.
     */
    cursor: string;
    /**
     * Index of the bar. Set internally by `BarSeries`.
     */
    barIndex: number;
    /**
     * Index of the group. Set internally by `BarSeries`.
     */
    groupIndex?: number;
    /**
     * Whether to animate the enter/update/exit. Set internally by `BarSeries`.
     */
    animated: boolean;
    /**
     * Whether this is categorical chart or not. Set internally by `BarSeries`.
     */
    isCategorical: boolean;
    /**
     * Rangelines element. for the bar.
     */
    rangeLines: ReactElement<RangeLinesProps, typeof RangeLines> | null;
    /**
     * Mask element for the bar.
     */
    mask: ReactElement<MaskProps, typeof Mask> | null;
    /**
     * Tooltip element.
     */
    tooltip: ReactElement<ChartTooltipProps, typeof ChartTooltip> | null;
    /**
     * Direction of the chart. Set internally by `BarSeries`.
     */
    layout: Direction;
    /**
     * Type of bar chart. Set internally by `BarSeries`.
     */
    type: BarType;
    /**
     * Label element.
     */
    label: ReactElement<BarLabelProps, typeof BarLabel> | null;
    /**
     * Event for when the bar is clicked.
     */
    onClick: (event: any) => void;
    /**
     * Event for when the bar has mouse enter.
     */
    onMouseEnter: (event: any) => void;
    /**
     * Event for when the bar has mouse leave.
     */
    onMouseLeave: (event: any) => void;
} & PropFunctionTypes;
interface BarState {
    active?: boolean;
}
interface BarCoordinates {
    width: number;
    height: number;
    x: number;
    y: number;
}
export declare class Bar extends Component<BarProps, BarState> {
    static defaultProps: Partial<BarProps>;
    rect: React.RefObject<SVGGElement>;
    state: BarState;
    getExit({ x, y, width, height }: BarCoordinates): {
        x: number;
        y: number;
        height: number;
        width: number;
    };
    getKeyCoords(v: any, v0: any, v1: any, scale: any, sizeOverride: number, isCategorical: boolean, padding: number): {
        offset: any;
        size: any;
    };
    getValueCoords(v0: any, v1: any, scale: any): {
        offset: number;
        size: number;
    };
    getIsVertical(): boolean;
    getCoords(): BarCoordinates;
    /**
     * This function calculates the padding on a linear scale used by the marimekko chart.
     */
    calculateLinearScalePadding(scale: any, offset: number, size: number): {
        size: number;
        offset: number;
    };
    onMouseEnter(event: MouseEvent): void;
    onMouseLeave(event: MouseEvent): void;
    onMouseClick(event: MouseEvent): void;
    getFill(color: string): string;
    getTooltipData(): {
        y: import("../../common/data").ChartInternalDataTypes;
        x: import("../../common/data").ChartInternalDataTypes;
    };
    getTransition(index: number): {
        delay: number;
        type: string;
        velocity: number;
        damping: number;
    } | {
        type: boolean;
        delay: number;
    };
    renderBar(currentColorShade: string, coords: BarCoordinates, index: number): JSX.Element;
    render(): JSX.Element;
}
export {};