@seasketch/geoprocessing/dist/src/components/table/ClassTable.d.ts

Geoprocessing and reporting framework for SeaSketch 2.0

import React from "react";
import { PercentEdgeOptions } from "../../helpers/index.js";
import { MetricGroup, Metric, Objective } from "../../types/index.js";
import { HorizontalStackedBarProps } from "../chart/HorizontalStackedBar.js";
import { ValueFormatter } from "../../helpers/valueFormatter.js";
export declare const ClassTableStyled: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
}, never>> & string;
/**
 * Function that given target value for current table row, the table row index, and total number of
 * table rows, returns a function that given target value returns a
 * formatted string or Element.  In other words a function that handles the formatting based on where
 * the row is in the table and returns a function handling the remaining formatting.
 */
export type TargetFormatter = (value: number, row: number, numRows: number) => (value: number) => string | JSX.Element;
export interface ClassTableColumnConfig {
    /** column display type */
    type: "class" | "metricValue" | "metricChart" | "metricGoal" | "layerToggle";
    /** metricId to use for column - metricGoal will access its values via the metricGroup  */
    metricId?: string;
    /** column header label */
    columnLabel?: string;
    /** unit string to display after value, or a format function that is passed the row value */
    valueLabel?: string | ((value: number | string) => string);
    /** column percent width out of 100 */
    width?: number;
    /** additional style properties for column */
    colStyle?: React.CSSProperties;
    /** formatting to apply to values in column row, defaults to as-is 'value' formatting. */
    valueFormatter?: ValueFormatter;
    /** formatting of target value based on the location of the row in the table */
    targetValueFormatter?: TargetFormatter;
    /** config options for percent value formatting.  see percentWithEdge function for more details */
    percentFormatterOptions?: PercentEdgeOptions;
    /** override options for metricChart column type */
    chartOptions?: Partial<HorizontalStackedBarProps>;
}
export interface ClassTableProps {
    /** Table row objects, each expected to have a classId and value. */
    rows: Metric[];
    /** Source for metric class definitions. if group has layerId at top-level, will display one toggle for whole group */
    metricGroup: MetricGroup;
    /** Optional objective for metric */
    objective?: Objective | Objective[];
    /** configuration of one or more columns to display */
    columnConfig: ClassTableColumnConfig[];
}
/**
 * Table displaying class metrics, one class per table row.  Having more than one metric per class may yield unexpected results
 * Returns 0 value in table when faced with a 'missing' metric instead of erroring
 * Handles "class has no value" NaN situation (common when sketch doesn't overlap with a geography) by overwriting with 0 and adding information circle
 */
export declare const ClassTable: React.FunctionComponent<ClassTableProps>;