@grafana/ui/dist/types/components/BigValue/BigValueLayout.d.ts

Grafana Components Library

import { type CSSProperties, type JSX } from 'react';
import * as React from 'react';
import { type DisplayValue, type ThemeVisualizationColors } from '@grafana/data';
import { PercentChangeColorMode } from '@grafana/schema';
import { type Props } from './BigValueTypes';
export declare abstract class BigValueLayout {
    private props;
    titleFontSize: number;
    valueFontSize: number;
    percentFontSize: number;
    chartHeight: number;
    chartWidth: number;
    valueColor: string;
    panelPadding: number;
    justifyCenter: boolean;
    titleToAlignTo?: string;
    valueToAlignTo: string;
    maxTextWidth: number;
    maxTextHeight: number;
    textValues: BigValueTextValues;
    constructor(props: Props);
    getTitleStyles(): CSSProperties;
    getValueStyles(): CSSProperties;
    getPercentChangeStyles(percentChange: number, percentChangeColorMode: PercentChangeColorMode | undefined, valueStyles: React.CSSProperties): PercentChangeStyles;
    getValueAndTitleContainerStyles(): CSSProperties;
    getPanelStyles(): CSSProperties;
    renderChart(): JSX.Element | null;
    getChartStyles(): CSSProperties;
}
export declare class WideWithChartLayout extends BigValueLayout {
    constructor(props: Props);
    getValueAndTitleContainerStyles(): CSSProperties;
    getPanelStyles(): CSSProperties;
}
export declare class StackedWithChartLayout extends BigValueLayout {
    constructor(props: Props);
    getValueAndTitleContainerStyles(): CSSProperties;
    getPanelStyles(): CSSProperties;
}
export declare class StackedWithNoChartLayout extends BigValueLayout {
    constructor(props: Props);
    getValueAndTitleContainerStyles(): CSSProperties;
    renderChart(): JSX.Element | null;
    getPanelStyles(): CSSProperties;
}
export declare function buildLayout(props: Props): BigValueLayout;
export interface BigValueTextValues extends DisplayValue {
    valueToAlignTo: string;
    titleToAlignTo?: string;
    tooltip?: string;
}
export interface PercentChangeStyles {
    containerStyles: CSSProperties;
    iconSize: number;
}
export declare function getPercentChangeColor(percentChange: number, percentChangeColorMode: PercentChangeColorMode | undefined, valueStyles: CSSProperties, themeVisualizationColors: ThemeVisualizationColors): string | undefined;