@czi-sds/data-viz/dist/index.esm.d.ts

2023 Science Initiative Data Visualization Component Library

/// <reference types="react" />
import { HTMLAttributes } from "react";
import { DatasetComponentOption, ECharts, EChartsOption, ScatterSeriesOption } from "echarts";
interface CreateChartOptionsProps {
    /**
     * Display reference line and axis value under mouse pointer
     * https://echarts.apache.org/en/option.html#axisPointer
     */
    axisPointer?: EChartsOption["axisPointer"];
    /**
     * The data array to be visualized
     * The data point object shape can be whatever you like, but it must be consistent with the `encode` option
     * For example, if the data point shape is:
     * {
     *   geneIndex: 0,
     *   cellTypeIndex: 0,
     *   percentage: 0.5
     * }
     * and you want geneIndex to be encoded to x axis and cellTypeIndex to be encoded to y axis, then make sure your encode option is:
     * encode: {
     *   x: 'geneIndex',
     *   y: 'cellTypeIndex'
     * }
     */
    data: DatasetComponentOption["source"];
    /**
     * The `dataZoom` prop is utilized for implementing zoom functionality within a
     * specific area of the chart. This feature empowers users to inspect data in
     * granular detail, obtain an overview of the entire dataset, or eliminate
     * outlier points.
     * By applying the `dataZoom` prop while locking the zoom level, the chart
     * efficiently renders a confined portion of the heatmap. This selective
     * rendering strategy becomes especially advantageous when dealing with
     * extensive datasets. Instead of rendering the entire heatmap at once,
     * the chart dynamically loads and renders specific segments as the user
     * scrolls through the data. This approach optimizes performance and enables
     * the creation of heatmaps with large amounts of data.
     * https://echarts.apache.org/en/option.html#dataZoom
     */
    dataZoom?: EChartsOption["dataZoom"];
    /**
     * The `camera` prop is utilized for implementing camera view port functionality
     * within a specific area of the chart. This feature empowers users to render
     * a confined portion of the heatmap. This selective rendering strategy becomes
     * especially advantageous when dealing with extensive datasets. Instead of
     * rendering the entire heatmap at once, the chart dynamically loads and renders
     * specific segments as the user scrolls through the data. This approach optimizes
     * performance and enables the creation of heatmaps with large amounts of data.
     *
     * The `height` and `width` properties are used to specify the dimensions of the
     * camera view port. The `active` property is used to enable or disable the camera
     * view port functionality.
     */
    camera?: {
        active: boolean;
        height: number;
        width: number;
    };
    /**
     * Customize the style of each cell item when mouse hovers on it, such as color, border, opacity, etc.
     * https://echarts.apache.org/en/option.html#series-scatter.emphasis
     */
    emphasis?: ScatterSeriesOption["emphasis"];
    /**
     * The data for the x axis
     * For example:
     * [{ value: "gene1", textStyle: { color: "red" } }, "gene2", "gene3"]
     */
    xAxisData: CategoryAxisData;
    /**
     * The data for the y axis
     * For example:
     * [{ value: "cellType1", textStyle: { color: "red" } }, "cellType2", "cellType3"]
     */
    yAxisData: CategoryAxisData;
    /**
     * The width of the chart in pixels
     */
    width: number;
    /**
     * The height of the chart in pixels
     */
    height: number;
    /**
     * Provide a mapping of data key to x/y axis encoding
     * For example, if the data is:
     * {
     *   geneIndex: 0,
     *   cellTypeIndex: 0,
     *   percentage: 0.5
     * }
     * and we want to encode `geneIndex` to x axis and `cellTypeIndex` to y axis, then
     * encode: {
     *  x: 'geneIndex',
     *  y: 'cellTypeIndex'
     * }
     * https://echarts.apache.org/en/option.html#series-scatter.encode
     */
    encode?: {
        x: string;
        y: string;
    };
    /**
     * Customize the style of each cell item, such as color, border, opacity, etc.
     * https://echarts.apache.org/en/option.html#series-scatter.itemStyle
     */
    itemStyle?: ScatterSeriesOption["itemStyle"];
    /**
     * The shape of the symbol.
     */
    symbol?: "circle" | "rect" | "roundRect";
    /**
     * `symbolSize` can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is 10.
     *
     * If size of symbols needs to be different, you can set with callback function in the following format:
     *
     * (value: Array|number, params: Object) => number|Array
     *
     * The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.
     * https://echarts.apache.org/en/option.html#series-scatter.symbolSize
     */
    symbolSize?: ScatterSeriesOption["symbolSize"];
    /**
     * https://echarts.apache.org/en/option.html#grid
     */
    grid?: EChartsOption["grid"] | ((defaultOption: EChartsOption["grid"]) => EChartsOption["grid"]);
    /**
     * The options object to be passed to echarts.setOption()
     * https://echarts.apache.org/en/option.html
     */
    options?: EChartsOption;
    /**
     * Event listeners for the chart
     * https://echarts.apache.org/en/api.html#events
     */
    onEvents?: Record<string, (event: unknown, chart: ECharts) => void>;
}
type OrdinalRawValue = string | number;
/**
 * (thuang): This copies echarts' CategoryAxisBaseOption["data"] type, since it's not exported
 */
type CategoryAxisData = (OrdinalRawValue | {
    value: OrdinalRawValue;
    /**
     * (thuang): This should be echarts `TextCommonOption` type, but it's not exported
     */
    textStyle?: never;
})[];
interface HeatmapChartProps extends HTMLAttributes<HTMLDivElement>, CreateChartOptionsProps {
    echartsRendererMode?: "svg" | "canvas";
}
declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<HeatmapChartProps & import("react").RefAttributes<HTMLDivElement>>>;
export { HeatmapChartProps, _default, _default as HeatmapChart };