@seasketch/geoprocessing/dist/src/components/chart/HorizontalStackedBar.d.ts

Geoprocessing and reporting framework for SeaSketch 2.0

import React from "react";
export interface StyledHorizontalStackedBarProps {
    $rowTotals: number[];
    $blockGroupColors: (string | undefined)[];
    $showTitle: boolean;
    $target?: number;
    $barHeight?: number;
    $titleWidth?: number;
    $targetLabelPosition?: "top" | "bottom";
    $targetLabelStyle?: "normal" | "tight";
}
/** Single rectangle block value representing length  */
export type Block = number;
/** Group of blocks with the same color */
export type BlockGroup = Block[];
/** One or more BlockGroups forming a single linear stacked row */
export type HorizontalStackedBarRow = BlockGroup[];
export type RowConfig = {
    title: string | ((value: number) => string | JSX.Element);
};
export interface HorizontalStackedBarProps {
    /** row data */
    rows: HorizontalStackedBarRow[];
    /** row config */
    rowConfigs: RowConfig[];
    /** height of row bar in pixels */
    /** Maximum value for each row */
    max: number;
    blockGroupNames: string[];
    /** Style for each block group */
    blockGroupStyles?: React.CSSProperties[];
    barHeight?: number;
    titleWidth?: number;
    target?: number;
    showTargetLabel?: boolean;
    showTitle?: boolean;
    showLegend?: boolean;
    showTotalLabel?: boolean;
    targetLabelPosition?: "top" | "bottom";
    targetLabelStyle?: "normal" | "tight";
    valueFormatter?: (value: number) => string | JSX.Element;
    targetValueFormatter?: (value: number) => string | JSX.Element;
    targetReachedColor?: string;
}
/**
 * Horizontal stacked bar chart component
 */
export declare const HorizontalStackedBar: React.FunctionComponent<HorizontalStackedBarProps>;