UNPKG

devextreme-react

Version:

DevExtreme React UI and Visualization Components

710 lines (708 loc) 26.7 kB
/*! * devextreme-react * Version: 24.2.6 * Build date: Mon Mar 17 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-react */ import * as React from "react"; import { Ref, ReactElement } from "react"; import dxBarGauge, { Properties } from "devextreme/viz/bar_gauge"; import { IHtmlOptions, NestedComponentMeta } from "./core/component"; import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, TooltipHiddenEvent, TooltipShownEvent, BarGaugeBarInfo, BarGaugeLegendItem } from "devextreme/viz/bar_gauge"; import type { AnimationEaseMode, Font as ChartsFont, TextOverflow, WordWrap, DashStyle } from "devextreme/common/charts"; import type { HorizontalAlignment, VerticalEdge, ExportFormat, Format as CommonFormat, Position, template, Orientation } from "devextreme/common"; import type { Format as LocalizationFormat } from "devextreme/common/core/localization"; type ReplaceFieldTypes<TSource, TReplacement> = { [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P]; }; type IBarGaugeOptionsNarrowedEvents = { onDisposing?: ((e: DisposingEvent) => void); onDrawn?: ((e: DrawnEvent) => void); onExported?: ((e: ExportedEvent) => void); onExporting?: ((e: ExportingEvent) => void); onFileSaving?: ((e: FileSavingEvent) => void); onIncidentOccurred?: ((e: IncidentOccurredEvent) => void); onInitialized?: ((e: InitializedEvent) => void); onTooltipHidden?: ((e: TooltipHiddenEvent) => void); onTooltipShown?: ((e: TooltipShownEvent) => void); }; type IBarGaugeOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IBarGaugeOptionsNarrowedEvents> & IHtmlOptions & { centerRender?: (...params: any) => React.ReactNode; centerComponent?: React.ComponentType<any>; defaultLoadingIndicator?: Record<string, any>; defaultValues?: Array<number>; onLoadingIndicatorChange?: (value: Record<string, any>) => void; onValuesChange?: (value: Array<number>) => void; }>; interface BarGaugeRef { instance: () => dxBarGauge; } declare const BarGauge: (props: React.PropsWithChildren<IBarGaugeOptions> & { ref?: Ref<BarGaugeRef>; }) => ReactElement | null; type IAnimationProps = React.PropsWithChildren<{ duration?: number; easing?: AnimationEaseMode; enabled?: boolean; }>; declare const Animation: ((props: IAnimationProps) => React.FunctionComponentElement<React.PropsWithChildren<{ duration?: number | undefined; easing?: AnimationEaseMode | undefined; enabled?: boolean | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IBarGaugeTitleProps = React.PropsWithChildren<{ font?: ChartsFont; horizontalAlignment?: HorizontalAlignment; margin?: number | Record<string, any> | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: Record<string, any> | string | { font?: ChartsFont; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; text?: string; textOverflow?: TextOverflow; verticalAlignment?: VerticalEdge; wordWrap?: WordWrap; }>; declare const BarGaugeTitle: ((props: IBarGaugeTitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{ font?: ChartsFont | undefined; horizontalAlignment?: HorizontalAlignment | undefined; margin?: number | Record<string, any> | { bottom?: number | undefined; left?: number | undefined; right?: number | undefined; top?: number | undefined; } | undefined; placeholderSize?: number | undefined; subtitle?: string | Record<string, any> | { font?: ChartsFont | undefined; offset?: number | undefined; text?: string | undefined; textOverflow?: TextOverflow | undefined; wordWrap?: WordWrap | undefined; } | undefined; text?: string | undefined; textOverflow?: TextOverflow | undefined; verticalAlignment?: VerticalEdge | undefined; wordWrap?: WordWrap | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IBarGaugeTitleSubtitleProps = React.PropsWithChildren<{ font?: ChartsFont; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }>; declare const BarGaugeTitleSubtitle: ((props: IBarGaugeTitleSubtitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{ font?: ChartsFont | undefined; offset?: number | undefined; text?: string | undefined; textOverflow?: TextOverflow | undefined; wordWrap?: WordWrap | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IBorderProps = React.PropsWithChildren<{ color?: string; cornerRadius?: number; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }>; declare const Border: ((props: IBorderProps) => React.FunctionComponentElement<React.PropsWithChildren<{ color?: string | undefined; cornerRadius?: number | undefined; dashStyle?: DashStyle | undefined; opacity?: number | undefined; visible?: boolean | undefined; width?: number | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IExportProps = React.PropsWithChildren<{ backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array<ExportFormat>; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }>; declare const Export: ((props: IExportProps) => React.FunctionComponentElement<React.PropsWithChildren<{ backgroundColor?: string | undefined; enabled?: boolean | undefined; fileName?: string | undefined; formats?: ExportFormat[] | undefined; margin?: number | undefined; printingEnabled?: boolean | undefined; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IFontProps = React.PropsWithChildren<{ color?: string; family?: string; opacity?: number; size?: number | string; weight?: number; }>; declare const Font: ((props: IFontProps) => React.FunctionComponentElement<React.PropsWithChildren<{ color?: string | undefined; family?: string | undefined; opacity?: number | undefined; size?: string | number | undefined; weight?: number | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IFormatProps = React.PropsWithChildren<{ currency?: string; formatter?: ((value: number | Date) => string); parser?: ((value: string) => number | Date); precision?: number; type?: CommonFormat | string; useCurrencyAccountingStyle?: boolean; }>; declare const Format: ((props: IFormatProps) => React.FunctionComponentElement<React.PropsWithChildren<{ currency?: string | undefined; formatter?: ((value: number | Date) => string) | undefined; parser?: ((value: string) => number | Date) | undefined; precision?: number | undefined; type?: string | undefined; useCurrencyAccountingStyle?: boolean | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IGeometryProps = React.PropsWithChildren<{ endAngle?: number; startAngle?: number; }>; declare const Geometry: ((props: IGeometryProps) => React.FunctionComponentElement<React.PropsWithChildren<{ endAngle?: number | undefined; startAngle?: number | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IItemTextFormatProps = React.PropsWithChildren<{ currency?: string; formatter?: ((value: number | Date) => string); parser?: ((value: string) => number | Date); precision?: number; type?: CommonFormat | string; useCurrencyAccountingStyle?: boolean; }>; declare const ItemTextFormat: ((props: IItemTextFormatProps) => React.FunctionComponentElement<React.PropsWithChildren<{ currency?: string | undefined; formatter?: ((value: number | Date) => string) | undefined; parser?: ((value: string) => number | Date) | undefined; precision?: number | undefined; type?: string | undefined; useCurrencyAccountingStyle?: boolean | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ILabelProps = React.PropsWithChildren<{ connectorColor?: string | undefined; connectorWidth?: number; customizeText?: ((barValue: { value: number; valueText: string; }) => string); font?: ChartsFont; format?: LocalizationFormat | undefined; indent?: number; visible?: boolean; }>; declare const Label: ((props: ILabelProps) => React.FunctionComponentElement<React.PropsWithChildren<{ connectorColor?: string | undefined; connectorWidth?: number | undefined; customizeText?: ((barValue: { value: number; valueText: string; }) => string) | undefined; font?: ChartsFont | undefined; format?: LocalizationFormat | undefined; indent?: number | undefined; visible?: boolean | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ILegendProps = React.PropsWithChildren<{ backgroundColor?: string | undefined; border?: Record<string, any> | { color?: string; cornerRadius?: number; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; columnCount?: number; columnItemSpacing?: number; customizeHint?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string); customizeItems?: ((items: Array<BarGaugeLegendItem>) => Array<BarGaugeLegendItem>); customizeText?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string); font?: ChartsFont; horizontalAlignment?: HorizontalAlignment; itemsAlignment?: HorizontalAlignment | undefined; itemTextFormat?: LocalizationFormat | undefined; itemTextPosition?: Position | undefined; margin?: number | Record<string, any> | { bottom?: number; left?: number; right?: number; top?: number; }; markerSize?: number; markerTemplate?: ((legendItem: BarGaugeLegendItem, element: any) => string | any) | template | undefined; orientation?: Orientation | undefined; paddingLeftRight?: number; paddingTopBottom?: number; rowCount?: number; rowItemSpacing?: number; title?: Record<string, any> | string | { font?: ChartsFont; horizontalAlignment?: HorizontalAlignment | undefined; margin?: Record<string, any> | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: Record<string, any> | string | { font?: ChartsFont; offset?: number; text?: string; }; text?: string; verticalAlignment?: VerticalEdge; }; verticalAlignment?: VerticalEdge; visible?: boolean; markerRender?: (...params: any) => React.ReactNode; markerComponent?: React.ComponentType<any>; }>; declare const Legend: ((props: ILegendProps) => React.FunctionComponentElement<React.PropsWithChildren<{ backgroundColor?: string | undefined; border?: Record<string, any> | { color?: string | undefined; cornerRadius?: number | undefined; dashStyle?: DashStyle | undefined; opacity?: number | undefined; visible?: boolean | undefined; width?: number | undefined; } | undefined; columnCount?: number | undefined; columnItemSpacing?: number | undefined; customizeHint?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string) | undefined; customizeItems?: ((items: Array<BarGaugeLegendItem>) => Array<BarGaugeLegendItem>) | undefined; customizeText?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string) | undefined; font?: ChartsFont | undefined; horizontalAlignment?: HorizontalAlignment | undefined; itemsAlignment?: HorizontalAlignment | undefined; itemTextFormat?: LocalizationFormat | undefined; itemTextPosition?: Position | undefined; margin?: number | Record<string, any> | { bottom?: number | undefined; left?: number | undefined; right?: number | undefined; top?: number | undefined; } | undefined; markerSize?: number | undefined; markerTemplate?: template | ((legendItem: BarGaugeLegendItem, element: any) => string | any) | undefined; orientation?: Orientation | undefined; paddingLeftRight?: number | undefined; paddingTopBottom?: number | undefined; rowCount?: number | undefined; rowItemSpacing?: number | undefined; title?: string | Record<string, any> | { font?: ChartsFont | undefined; horizontalAlignment?: HorizontalAlignment | undefined; margin?: Record<string, any> | { bottom?: number | undefined; left?: number | undefined; right?: number | undefined; top?: number | undefined; } | undefined; placeholderSize?: number | undefined; subtitle?: string | Record<string, any> | { font?: ChartsFont | undefined; offset?: number | undefined; text?: string | undefined; } | undefined; text?: string | undefined; verticalAlignment?: VerticalEdge | undefined; } | undefined; verticalAlignment?: VerticalEdge | undefined; visible?: boolean | undefined; markerRender?: ((...params: any) => React.ReactNode) | undefined; markerComponent?: React.ComponentType<any> | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ILegendBorderProps = React.PropsWithChildren<{ color?: string; cornerRadius?: number; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }>; declare const LegendBorder: ((props: ILegendBorderProps) => React.FunctionComponentElement<React.PropsWithChildren<{ color?: string | undefined; cornerRadius?: number | undefined; dashStyle?: DashStyle | undefined; opacity?: number | undefined; visible?: boolean | undefined; width?: number | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ILegendTitleProps = React.PropsWithChildren<{ font?: ChartsFont; horizontalAlignment?: HorizontalAlignment | undefined; margin?: Record<string, any> | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: Record<string, any> | string | { font?: ChartsFont; offset?: number; text?: string; }; text?: string; verticalAlignment?: VerticalEdge; }>; declare const LegendTitle: ((props: ILegendTitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{ font?: ChartsFont | undefined; horizontalAlignment?: HorizontalAlignment | undefined; margin?: Record<string, any> | { bottom?: number | undefined; left?: number | undefined; right?: number | undefined; top?: number | undefined; } | undefined; placeholderSize?: number | undefined; subtitle?: string | Record<string, any> | { font?: ChartsFont | undefined; offset?: number | undefined; text?: string | undefined; } | undefined; text?: string | undefined; verticalAlignment?: VerticalEdge | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ILegendTitleSubtitleProps = React.PropsWithChildren<{ font?: ChartsFont; offset?: number; text?: string; }>; declare const LegendTitleSubtitle: ((props: ILegendTitleSubtitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{ font?: ChartsFont | undefined; offset?: number | undefined; text?: string | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ILoadingIndicatorProps = React.PropsWithChildren<{ backgroundColor?: string; font?: ChartsFont; show?: boolean; text?: string; defaultShow?: boolean; onShowChange?: (value: boolean) => void; }>; declare const LoadingIndicator: ((props: ILoadingIndicatorProps) => React.FunctionComponentElement<React.PropsWithChildren<{ backgroundColor?: string | undefined; font?: ChartsFont | undefined; show?: boolean | undefined; text?: string | undefined; defaultShow?: boolean | undefined; onShowChange?: ((value: boolean) => void) | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IMarginProps = React.PropsWithChildren<{ bottom?: number; left?: number; right?: number; top?: number; }>; declare const Margin: ((props: IMarginProps) => React.FunctionComponentElement<React.PropsWithChildren<{ bottom?: number | undefined; left?: number | undefined; right?: number | undefined; top?: number | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IShadowProps = React.PropsWithChildren<{ blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }>; declare const Shadow: ((props: IShadowProps) => React.FunctionComponentElement<React.PropsWithChildren<{ blur?: number | undefined; color?: string | undefined; offsetX?: number | undefined; offsetY?: number | undefined; opacity?: number | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ISizeProps = React.PropsWithChildren<{ height?: number | undefined; width?: number | undefined; }>; declare const Size: ((props: ISizeProps) => React.FunctionComponentElement<React.PropsWithChildren<{ height?: number | undefined; width?: number | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ISubtitleProps = React.PropsWithChildren<{ font?: ChartsFont; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }>; declare const Subtitle: ((props: ISubtitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{ font?: ChartsFont | undefined; offset?: number | undefined; text?: string | undefined; textOverflow?: TextOverflow | undefined; wordWrap?: WordWrap | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ITitleProps = React.PropsWithChildren<{ font?: ChartsFont; horizontalAlignment?: HorizontalAlignment | undefined; margin?: Record<string, any> | number | { bottom?: number; left?: number; right?: number; top?: number; }; placeholderSize?: number | undefined; subtitle?: Record<string, any> | string | { font?: ChartsFont; offset?: number; text?: string; textOverflow?: TextOverflow; wordWrap?: WordWrap; }; text?: string; verticalAlignment?: VerticalEdge; textOverflow?: TextOverflow; wordWrap?: WordWrap; }>; declare const Title: ((props: ITitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{ font?: ChartsFont | undefined; horizontalAlignment?: HorizontalAlignment | undefined; margin?: number | Record<string, any> | { bottom?: number | undefined; left?: number | undefined; right?: number | undefined; top?: number | undefined; } | undefined; placeholderSize?: number | undefined; subtitle?: string | Record<string, any> | { font?: ChartsFont | undefined; offset?: number | undefined; text?: string | undefined; textOverflow?: TextOverflow | undefined; wordWrap?: WordWrap | undefined; } | undefined; text?: string | undefined; verticalAlignment?: VerticalEdge | undefined; textOverflow?: TextOverflow | undefined; wordWrap?: WordWrap | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ITooltipProps = React.PropsWithChildren<{ arrowLength?: number; border?: Record<string, any> | { color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; color?: string; container?: any | string | undefined; contentTemplate?: ((scaleValue: { index: number; value: number; valueText: string; }, element: any) => string | any) | template | undefined; cornerRadius?: number; customizeTooltip?: ((scaleValue: { index: number; value: number; valueText: string; }) => Record<string, any>) | undefined; enabled?: boolean; font?: ChartsFont; format?: LocalizationFormat | undefined; interactive?: boolean; opacity?: number | undefined; paddingLeftRight?: number; paddingTopBottom?: number; shadow?: Record<string, any> | { blur?: number; color?: string; offsetX?: number; offsetY?: number; opacity?: number; }; zIndex?: number | undefined; contentRender?: (...params: any) => React.ReactNode; contentComponent?: React.ComponentType<any>; }>; declare const Tooltip: ((props: ITooltipProps) => React.FunctionComponentElement<React.PropsWithChildren<{ arrowLength?: number | undefined; border?: Record<string, any> | { color?: string | undefined; dashStyle?: DashStyle | undefined; opacity?: number | undefined; visible?: boolean | undefined; width?: number | undefined; } | undefined; color?: string | undefined; container?: any | string | undefined; contentTemplate?: template | ((scaleValue: { index: number; value: number; valueText: string; }, element: any) => string | any) | undefined; cornerRadius?: number | undefined; customizeTooltip?: ((scaleValue: { index: number; value: number; valueText: string; }) => Record<string, any>) | undefined; enabled?: boolean | undefined; font?: ChartsFont | undefined; format?: LocalizationFormat | undefined; interactive?: boolean | undefined; opacity?: number | undefined; paddingLeftRight?: number | undefined; paddingTopBottom?: number | undefined; shadow?: Record<string, any> | { blur?: number | undefined; color?: string | undefined; offsetX?: number | undefined; offsetY?: number | undefined; opacity?: number | undefined; } | undefined; zIndex?: number | undefined; contentRender?: ((...params: any) => React.ReactNode) | undefined; contentComponent?: React.ComponentType<any> | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ITooltipBorderProps = React.PropsWithChildren<{ color?: string; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }>; declare const TooltipBorder: ((props: ITooltipBorderProps) => React.FunctionComponentElement<React.PropsWithChildren<{ color?: string | undefined; dashStyle?: DashStyle | undefined; opacity?: number | undefined; visible?: boolean | undefined; width?: number | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; export default BarGauge; export { BarGauge, IBarGaugeOptions, BarGaugeRef, Animation, IAnimationProps, BarGaugeTitle, IBarGaugeTitleProps, BarGaugeTitleSubtitle, IBarGaugeTitleSubtitleProps, Border, IBorderProps, Export, IExportProps, Font, IFontProps, Format, IFormatProps, Geometry, IGeometryProps, ItemTextFormat, IItemTextFormatProps, Label, ILabelProps, Legend, ILegendProps, LegendBorder, ILegendBorderProps, LegendTitle, ILegendTitleProps, LegendTitleSubtitle, ILegendTitleSubtitleProps, LoadingIndicator, ILoadingIndicatorProps, Margin, IMarginProps, Shadow, IShadowProps, Size, ISizeProps, Subtitle, ISubtitleProps, Title, ITitleProps, Tooltip, ITooltipProps, TooltipBorder, ITooltipBorderProps }; import type * as BarGaugeTypes from 'devextreme/viz/bar_gauge_types'; export { BarGaugeTypes };