UNPKG

igniteui-react-charts

Version:

Ignite UI React charting components for building rich data visualizations using TypeScript APIs.

1,614 lines 151 kB
import * as React from 'react'; import { HorizontalAlignment_$type } from "igniteui-react-core"; import { UnknownValuePlotting_$type } from "igniteui-react-core"; import { TrendLineType_$type } from "igniteui-react-core"; import { IgrChartSeriesEventArgs } from './igr-chart-series-event-args'; import { arrayFindByName, brushToString, stringToBrush, toBrushCollection, fromBrushCollection, fromRect, toRect, ensureBool, ensureEnum, isValidProp, getModifiedProps, toSpinal, initializePropertiesFromCss, NamePatcher } from "igniteui-react-core"; import { MarkerType_$type } from "./MarkerType"; import { delegateCombine, delegateRemove } from "igniteui-react-core"; import { IgrDomainChartSeriesPointerEventArgs } from './igr-domain-chart-series-pointer-event-args'; import { MarkerTypeCollection as MarkerTypeCollection_internal } from './MarkerTypeCollection'; import { IgrMarkerTypeCollection } from './igr-marker-type-collection'; import { SyncableObservableCollection$1 } from "igniteui-react-core"; import { ToolTipType_$type } from "./ToolTipType"; import { CrosshairsDisplayMode_$type } from "./CrosshairsDisplayMode"; import { IgrCalloutStyleUpdatingEventArgs } from "./igr-callout-style-updating-event-args"; import { ComputedPlotAreaMarginMode_$type } from './ComputedPlotAreaMarginMode'; import { SeriesHighlightingMode_$type } from './SeriesHighlightingMode'; import { SeriesHighlightingBehavior_$type } from './SeriesHighlightingBehavior'; import { LegendHighlightingMode_$type } from './LegendHighlightingMode'; import { SeriesOutlineMode_$type } from './SeriesOutlineMode'; import { MarkerOutlineMode_$type } from './MarkerOutlineMode'; import { MarkerFillMode_$type } from './MarkerFillMode'; import { MarkerAutomaticBehavior_$type } from './MarkerAutomaticBehavior'; import { LegendItemBadgeMode_$type } from "igniteui-react-core"; import { LegendItemBadgeShape_$type } from "igniteui-react-core"; import { DataAbbreviationMode_$type } from "igniteui-react-core"; import { DataLegendValueMode_$type } from "igniteui-react-core"; import { DataLegendHeaderDateMode_$type } from "igniteui-react-core"; import { DataLegendHeaderTimeMode_$type } from "igniteui-react-core"; import { DataLegendUnitsMode_$type } from "igniteui-react-core"; import { DataLegendLabelMode_$type } from "igniteui-react-core"; import { DataLegendSummaryType_$type } from "igniteui-react-core"; import { Thickness } from "igniteui-react-core"; import { FontInfo } from "igniteui-react-core"; import { SeriesPlotAreaMarginHorizontalMode_$type } from './SeriesPlotAreaMarginHorizontalMode'; import { SeriesPlotAreaMarginVerticalMode_$type } from './SeriesPlotAreaMarginVerticalMode'; import { IgrCalloutPlacementPositionsCollection } from './igr-callout-placement-positions-collection'; import { CalloutPlacementPositions_$type } from './CalloutPlacementPositions'; import { SeriesViewerScrollbarMode_$type } from './SeriesViewerScrollbarMode'; import { SeriesViewerHorizontalScrollbarPosition_$type } from './SeriesViewerHorizontalScrollbarPosition'; import { SeriesViewerVerticalScrollbarPosition_$type } from './SeriesViewerVerticalScrollbarPosition'; import { IgrCalloutRenderStyleUpdatingEventArgs } from './igr-callout-render-style-updating-event-args'; import { CalloutPlacementPositionsCollection as CalloutPlacementPositionsCollection_internal } from './CalloutPlacementPositionsCollection'; import { DataToolTipLayerGroupingMode_$type } from "igniteui-react-core"; import { DataTooltipGroupedPositionX_$type } from "igniteui-react-core"; import { DataTooltipGroupedPositionY_$type } from "igniteui-react-core"; import { IgrChartSummaryDescriptionCollection } from './igr-chart-summary-description-collection'; import { IgrChartSortDescriptionCollection } from './igr-chart-sort-description-collection'; import { IgrFilterExpressionCollection } from "igniteui-react-core"; import { ValueModeCollection as ValueModeCollection_internal } from './ValueModeCollection'; import { IgrValueModeCollection } from './igr-value-mode-collection'; import { ValueLayerValueMode_$type } from './ValueLayerValueMode'; import { IgrFilterStringErrorsParsingEventArgs } from './igr-filter-string-errors-parsing-event-args'; import { SeriesHighlightedValuesDisplayMode_$type } from "igniteui-react-core"; import { SeriesSelectionMode_$type } from './SeriesSelectionMode'; import { SeriesSelectionBehavior_$type } from './SeriesSelectionBehavior'; import { ChartSelectedItemCollection as ChartSelectedItemCollection_internal } from "./ChartSelectedItemCollection"; import { ChartSelection } from "./ChartSelection"; import { IgrSeriesViewerSelectedSeriesItemsChangedEventArgs } from "./igr-series-viewer-selected-series-items-changed-event-args"; import { IgrChartSelectedItemCollection } from "./igr-chart-selected-item-collection"; import { CalloutCollisionMode_$type } from "igniteui-react-core"; import { Visibility_$type } from "igniteui-react-core"; import { IgrDomainChartPlotAreaPointerEventArgs } from './igr-domain-chart-plot-area-pointer-event-args'; import { IgrTrendLineTypeCollection } from './igr-trend-line-type-collection'; import { TrendLineTypeCollection as TrendLineTypeCollection_internal } from './TrendLineTypeCollection'; import { IgrCalloutLabelUpdatingEventArgs } from './igr-callout-label-updating-event-args'; export class IgrDomainChart extends React.Component { createImplementation() { return null; } get i() { return this._implementation; } onImplementationCreated() { } constructor(props) { super(props); this._calloutsDataSource = null; this._selectedSeriesItems = null; this._focusedSeriesItems = null; this._markerTypes = null; this._trendLineTypes = null; this._calloutsAllowedPositions = null; this._valueLines = null; this.__p = null; this._hasUserValues = new Set(); this._stylingContainer = null; this._stylingParent = null; this._inStyling = false; this._seriesAdded = null; this._seriesAdded_wrapped = null; this._seriesRemoved = null; this._seriesRemoved_wrapped = null; this._seriesPointerEnter = null; this._seriesPointerEnter_wrapped = null; this._seriesPointerLeave = null; this._seriesPointerLeave_wrapped = null; this._seriesPointerMove = null; this._seriesPointerMove_wrapped = null; this._seriesPointerDown = null; this._seriesPointerDown_wrapped = null; this._seriesPointerUp = null; this._seriesPointerUp_wrapped = null; this._seriesClick = null; this._seriesClick_wrapped = null; this._plotAreaPointerEnter = null; this._plotAreaPointerEnter_wrapped = null; this._plotAreaPointerLeave = null; this._plotAreaPointerLeave_wrapped = null; this._plotAreaPointerMove = null; this._plotAreaPointerMove_wrapped = null; this._plotAreaPointerDown = null; this._plotAreaPointerDown_wrapped = null; this._plotAreaPointerUp = null; this._plotAreaPointerUp_wrapped = null; this._calloutStyleUpdating = null; this._calloutStyleUpdating_wrapped = null; this._calloutRenderStyleUpdating = null; this._calloutRenderStyleUpdating_wrapped = null; this._calloutLabelUpdating = null; this._calloutLabelUpdating_wrapped = null; this._selectedSeriesItemsChanged = null; this._selectedSeriesItemsChanged_wrapped = null; this._focusedSeriesItemsChanged = null; this._focusedSeriesItemsChanged_wrapped = null; this._filterStringErrorsParsing = null; this._filterStringErrorsParsing_wrapped = null; if (this._styling) { NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this)); } this._implementation = this.createImplementation(); this._implementation.externalObject = this; this.onImplementationCreated(); } componentDidMount() { for (const p of Object.keys(this.props)) { if (isValidProp(this, p)) { this[p] = this.props[p]; } } } shouldComponentUpdate(nextProps, nextState) { const mod = getModifiedProps(this.props, nextProps); for (const p of Object.keys(mod)) { if (isValidProp(this, p)) { this[p] = mod[p]; } } return true; } render() { return null; } /** * Sets or gets the template reference to use for tooltips for all the series. * * */ get tooltipTemplate() { return this.i.tooltipTemplate; } set tooltipTemplate(v) { this.i.tooltipTemplate = v; } /** * Sets or gets the template references to use for tooltips for all the series, in order. * * */ get tooltipTemplates() { let ret = []; if (this.i.tooltipTemplates) { for (let ii = 0; ii < this.i.tooltipTemplates.count; ii++) { ret.push(this.i.tooltipTemplates.item(ii)); } } return ret; } set tooltipTemplates(v) { this.i.tooltipTemplates.clear(); if (v) { for (let ii = 0; ii < v.length; ii++) { this.i.tooltipTemplates.add(v[ii]); } } } get legend() { if (this.i.legend != null) return this.i.legend.externalObject; } set legend(v) { if (v != undefined && v != null) this.i.legend = v.i; } set calloutsDataSource(value) { this._calloutsDataSource = value; this.bindCalloutsData(); } get calloutsDataSource() { return this._calloutsDataSource; } bindCalloutsData() { if (this.i != null && this.i !== undefined) { this.i.calloutsItemsSource = this._calloutsDataSource; } } /** * Gets or sets the scaling value used to affect the pixel density of the control. * A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control * to appear blurry. */ get pixelScalingRatio() { return this.i.kc; } set pixelScalingRatio(v) { this.i.kc = +v; } /** * Gets or sets the left margin of chart title * * Use `titleLeftMargin` property for the left margin of chart title. * * ```ts * this.chart.titleLeftMargin = 10; * ``` * * ```ts * <IgrCategoryChart dataSource={this.state.data} * titleLeftMargin={20}> * </IgrCategoryChart> * ``` */ get titleLeftMargin() { return this.i.kp; } set titleLeftMargin(v) { this.i.kp = +v; } /** * Gets or sets the right margin of chart title * * Use `titleLeftMargin` property for the right margin of chart title. * * ```ts * this.chart.titleRightMargin = 10; * ``` * * ```ts * <IgrCategoryChart * dataSource={this.state.data} * titleRightMargin = 10> * </IgrCategoryChart> * ``` */ get titleRightMargin() { return this.i.kq; } set titleRightMargin(v) { this.i.kq = +v; } /** * Gets or sets the top margin of chart title * * Use `titleTopMargin` property for the top margin of chart title. * * ```ts * this.chart.titleTopMargin = 10; * ``` * * ```ts * <IgrCategoryChart dataSource={this.state.data} * titleTopMargin={10} /> * ``` */ get titleTopMargin() { return this.i.kr; } set titleTopMargin(v) { this.i.kr = +v; } /** * Gets or sets the bottom margin of chart title * * Use `titleBottomMargin` property for the bottom margin of chart title. * * ```ts * this.chart.titleBottomMargin = 5; * ``` * * ```ts * <IgrCategoryChart * width="100%" * height="100%" * chartType="Line" * dataSource={this.categoryData} * subtitle= "CategoryChart Subtitle" * subtitleAlignment="Right" * titleBottomMargin={5}/> * ``` */ get titleBottomMargin() { return this.i.ko; } set titleBottomMargin(v) { this.i.ko = +v; } /** * Gets or sets the left margin of chart subtitle * * Use `subtitleLeftMargin` property for the left margin of chart subtitle. * * ```ts * this.chart.subtitleLeftMargin = 20 ; * ``` * * ```ts * <IgrCategoryChart * width="100%" * height="100%" * chartType="Line" * dataSource={this.categoryData} * subtitle= "CategoryChart Subtitle" * subtitleLeftMargin= {20}/> * ``` */ get subtitleLeftMargin() { return this.i.kk; } set subtitleLeftMargin(v) { this.i.kk = +v; } /** * Gets or sets the top margin of chart subtitle * * Use `subtitleTopMargin` property for the top margin of chart subtitle. * * ```ts * this.chart.subtitleTopMargin = 10; * ``` * * ```ts * <IgrCategoryChart * width="100%" * height="100%" * chartType="Line" * dataSource={this.categoryData} * subtitle= "CategoryChart Subtitle" * subtitleTopMargin= {10}/> * ``` */ get subtitleTopMargin() { return this.i.km; } set subtitleTopMargin(v) { this.i.km = +v; } /** * Gets or sets the right margin of chart subtitle * * Use `subtitleRightMargin` property for the right margin of chart subtitle. * * ```ts * this.chart.subtitleRightMargin = 20 ; * ``` * * ```ts * <IgrCategoryChart * width="100%" * height="100%" * chartType="Line" * dataSource={this.categoryData} * subtitle= "CategoryChart Subtitle" * subtitleAlignment="Right" * subtitleRightMargin ={20}/> * ``` */ get subtitleRightMargin() { return this.i.kl; } set subtitleRightMargin(v) { this.i.kl = +v; } /** * Gets or sets the bottom margin of chart subtitle * * Use `subtitleBottomMargin` property for the bottom margin of chart subtitle. * * ```ts * <IgrCategoryChart * width="100%" * height="100%" * chartType="Line" * dataSource={this.categoryData} * subtitle= "CategoryChart Subtitle" * subtitleBottomMargin= {10}/> * ``` * * ```ts * this.chart.subtitleBottomMargin = 10 ; * ``` */ get subtitleBottomMargin() { return this.i.kj; } set subtitleBottomMargin(v) { this.i.kj = +v; } /** * Gets or sets color of chart subtitle * * Use `subtitleTextColor` property to color the subtitle. * * ```ts * this.chart.subtitleTextColor = "#ff0000" ; * ``` * * ```ts * <IgrCategoryChart * width="100%" * height="100%" * chartType="Line" * dataSource={this.categoryData} * subtitle= "CategoryChart Subtitle" * subtitleTextColor="#ff0000"/> * ``` */ get subtitleTextColor() { return brushToString(this.i.zv); } set subtitleTextColor(v) { this.i.zv = stringToBrush(v); } /** * Gets or sets color of chart title * * Use `titleTextColor` property to color the chart title * * ```ts * this.chart.titleTextColor="red" ; * ``` * * ```ts * <IgrCategoryChart * dataSource={this.state.data} * width="700px" * height="500px" * xAxisTitle="Countries" * titleTextColor="Red" /> * * ``` */ get titleTextColor() { return brushToString(this.i.zw); } set titleTextColor(v) { this.i.zw = stringToBrush(v); } /** * Gets or sets the left margin of the chart content. * * Use the 'leftMargin' property for the left margin of the chart content. * * ```ts * this.chart.leftMargin = 20; * ``` * * ```ts * <IgrCategoryChart dataSource={this.state.data} * leftMargin= {20}/> * ``` */ get leftMargin() { return this.i.j9; } set leftMargin(v) { this.i.j9 = +v; } /** * Gets or sets the top margin of the chart content. * * Use `topMargin` property for the margin of the chart content. * * ```ts * this.chart.topMargin=20; * ``` * * ```ts * <IgrCategoryChart dataSource={this.state.data} * topMargin={10} /> * ``` */ get topMargin() { return this.i.ks; } set topMargin(v) { this.i.ks = +v; } /** * Gets or sets the right margin of the chart content. * * Use `rightMargin` property for the right margin of the chart content. * * ```ts * this.chart.rightMargin = 20 ; * ``` * * ```ts * <IgrCategoryChart * width="100%" * height="100%" * chartType="Line" * markerTypes={this.state.markersTypes} * dataSource={this.categoryData} * rightMargin= {4}/> * ``` */ get rightMargin() { return this.i.ki; } set rightMargin(v) { this.i.ki = +v; } /** * Gets or sets the bottom margin around the chart content. * * Use the `bottomMargin` property for the bottom margin around the chart content. * * ```ts * this.chart.bottomMargin=20; * ``` * * ```ts * <IgrCategoryChart dataSource={this.state.data} * bottomMargin= 20 /> * ``` */ get bottomMargin() { return this.i.ju; } set bottomMargin(v) { this.i.ju = +v; } /** * Gets or sets the duration used for animating series plots when the data is changing * * Use the `TransitionDuration` property to animating between data values. * * ```ts * this.chart.transitionDuratio= 500; * ``` * * ```ts * <IgrCategoryChart dataSource={this.state.data} * transitionDuratio={500} /> * ``` */ get transitionDuration() { return this.i.l1; } set transitionDuration(v) { this.i.l1 = +v; } /** * Gets or sets the easing function used for animating series plots when the data is changing. * This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number. * * The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view. * * ```ts * this.chart.transitionInEasingFunction= this.cubicFunc; * * cubicFunc(time: number) : number * { * return time; * } * ``` * * ```ts * <IgrCategoryChart dataSource={this.state.data} * transitionInEasingFunction="cubic" /> * ``` */ get transitionEasingFunction() { return this.i.ev; } set transitionEasingFunction(v) { this.i.ev = v; } /** * Gets or sets the duration used for animating highlighting changes */ get highlightingTransitionDuration() { return this.i.lx; } set highlightingTransitionDuration(v) { this.i.lx = +v; } /** * Gets or sets the duration used for animating Selection changes */ get selectionTransitionDuration() { return this.i.l0; } set selectionTransitionDuration(v) { this.i.l0 = +v; } /** * Gets or sets the duration used for animating Focus changes */ get focusTransitionDuration() { return this.i.lv; } set focusTransitionDuration(v) { this.i.lv = +v; } /** * Gets or sets CSS font property for the chart subtitle * * Use `subtitleTextStyle` property for the CSS font of the chart subtitle. * * ```ts * this.chart.subtitleTextStyle= "16pt Verdona"; * ``` * * ```ts * <IgrCategoryChart * width="100%" * height="100%" * chartType="Line" * dataSource={this.categoryData} * subtitleTextStyle="16pt Verdona"/> * ``` */ get subtitleTextStyle() { return this.i.tj; } set subtitleTextStyle(v) { this.i.tj = v; } /** * Gets or sets CSS font property for the chart title * * Use `titleTextStyle` property for the CSS font property of the chart title * * ```ts * this.chart.xAxisTitleTextStyle = "24pt Verdona"; * ``` * * ```ts * <IgrCategoryChart dataSource={this.state.data} * width="700px" * height="500px" * xAxisTitle="Countries" * xAxisTitleTextColor="gray" * xAxisTitleTextStyle="12pt Verdana" * xAxisTitleAngle={0} * yAxisTitle="Trillions of Watt-hours (TWh)" * yAxisTitleTextStyle="12pt Verdana" * yAxisTitleTextColor="gray" * yAxisTitleAngle={90} * yAxisTitleLeftMargin={5}> * </IgrCategoryChart> * ``` */ get titleTextStyle() { return this.i.tu; } set titleTextStyle(v) { this.i.tu = v; } get isDetached() { return this.i.isDetached; } get dataToolTipGroupingMode() { return this.i.b0; } set dataToolTipGroupingMode(v) { this.i.b0 = ensureEnum(DataToolTipLayerGroupingMode_$type, v); } /** * Gets or sets the offset of the tooltip layer on the X axis. */ get dataToolTipPositionOffsetX() { return this.i.jz; } set dataToolTipPositionOffsetX(v) { this.i.jz = +v; } /** * Gets or sets the offset of the tooltip layer on the Y axis. */ get dataToolTipPositionOffsetY() { return this.i.j0; } set dataToolTipPositionOffsetY(v) { this.i.j0 = +v; } /** * Gets or sets the offset of the tooltip layer on the X axis. */ get dataToolTipDefaultPositionOffsetX() { return this.i.jx; } set dataToolTipDefaultPositionOffsetX(v) { this.i.jx = +v; } /** * Gets or sets the offset of the tooltip layer on the Y axis. */ get dataToolTipDefaultPositionOffsetY() { return this.i.jy; } set dataToolTipDefaultPositionOffsetY(v) { this.i.jy = +v; } /** * Gets or sets the tooltip position mode on the X axis for grouped series. */ get dataToolTipGroupedPositionModeX() { return this.i.bw; } set dataToolTipGroupedPositionModeX(v) { this.i.bw = ensureEnum(DataTooltipGroupedPositionX_$type, v); } /** * Gets or sets the tooltip position mode on the Y axis for grouped series. */ get dataToolTipGroupedPositionModeY() { return this.i.by; } set dataToolTipGroupedPositionModeY(v) { this.i.by = ensureEnum(DataTooltipGroupedPositionY_$type, v); } /** * Gets or sets whether the data legend should update when the series data is mutated. */ get dataToolTipShouldUpdateWhenSeriesDataChanges() { return this.i.gy; } set dataToolTipShouldUpdateWhenSeriesDataChanges(v) { this.i.gy = ensureBool(v); } /** * Gets or sets indexes, titles, or names of series to include in displaying in the data tooltip, e.g. "0, 1" or "Series1 Title, Series2 Title" * The DataToolTipExcludedSeries property takes precedence over values of DataToolTipIncludedSeries property */ get dataToolTipIncludedSeries() { return this.i.m; } set dataToolTipIncludedSeries(v) { if (v && !Array.isArray(v) && typeof (v) == "string") { const re = /\s*(?:,|\s|$)\s*/gm; v = v.split(re); } this.i.m = v; } /** * Gets or sets indexes, titles, or names of series to exclude from displaying in the data tooltip, e.g. "0, 1" or "Series1 Title, Series2 Title" * The DataToolTipExcludedSeries property takes precedence over values of DataToolTipIncludedSeries property */ get dataToolTipExcludedSeries() { return this.i.j; } set dataToolTipExcludedSeries(v) { if (v && !Array.isArray(v) && typeof (v) == "string") { const re = /\s*(?:,|\s|$)\s*/gm; v = v.split(re); } this.i.j = v; } /** * Gets or sets names of data columns or their labels to include in displaying in the data legend, e.g. "High, Low" or "H, L" * The DataToolTipExcludedColumns property takes precedence over values of DataToolTipIncludedColumns property */ get dataToolTipIncludedColumns() { return this.i.l; } set dataToolTipIncludedColumns(v) { if (v && !Array.isArray(v) && typeof (v) == "string") { const re = /\s*(?:,|\s|$)\s*/gm; v = v.split(re); } this.i.l = v; } /** * Gets or sets names of data columns or their labels to exclude from displaying in the data legend, e.g. "High, Low" or "H, L" * The DataToolTipExcludedColumns property takes precedence over values of DataToolTipIncludedColumns property */ get dataToolTipExcludedColumns() { return this.i.i; } set dataToolTipExcludedColumns(v) { if (v && !Array.isArray(v) && typeof (v) == "string") { const re = /\s*(?:,|\s|$)\s*/gm; v = v.split(re); } this.i.i = v; } /** * Gets or sets mode for abbreviating large numbers displayed in the legend * This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties */ get dataToolTipValueFormatAbbreviation() { return this.i.be; } set dataToolTipValueFormatAbbreviation(v) { this.i.be = ensureEnum(DataAbbreviationMode_$type, v); } /** * Gets or sets maximum digits for formatting numbers displayed in the legend * This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties */ get dataToolTipValueFormatMaxFractions() { return this.i.lr; } set dataToolTipValueFormatMaxFractions(v) { this.i.lr = +v; } /** * Gets or sets minimum digits for formatting numbers displayed in the legend * This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties */ get dataToolTipValueFormatMinFractions() { return this.i.ls; } set dataToolTipValueFormatMinFractions(v) { this.i.ls = +v; } /** * Gets or sets the mode for displaying values in the data legend, e.g. Currency ($500.25), Decimal (500.25), Integer (500) */ get dataToolTipValueFormatMode() { return this.i.bu; } set dataToolTipValueFormatMode(v) { this.i.bu = ensureEnum(DataLegendValueMode_$type, v); } /** * Gets or sets globalization culture when displaying values as currencies, e.g. use "en-GB" to display British pound symbol when the ValueFormatMode property is set to 'Currency' mode * This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties */ get dataToolTipValueFormatCulture() { return this.i.qi; } set dataToolTipValueFormatCulture(v) { this.i.qi = v; } /** * Gets or sets whether or not use grouping separator, e.g, 15,000 for 15000 * This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties */ get dataToolTipValueFormatUseGrouping() { return this.i.gz; } set dataToolTipValueFormatUseGrouping(v) { this.i.gz = ensureBool(v); } /** * Gets or sets the format string for values displayed in the data legend. */ get dataToolTipValueFormatString() { return this.i.qo; } set dataToolTipValueFormatString(v) { this.i.qo = v; } /** * Gets or sets the format specifiers to use with the ValueFormatString string. */ get dataToolTipValueFormatSpecifiers() { return this.i.n; } set dataToolTipValueFormatSpecifiers(v) { if (v && !Array.isArray(v) && typeof (v) == "string") { const re = /\s*(?:,|\s|$)\s*/gm; v = v.split(re); } this.i.n = v; } get dataToolTipValueRowMarginBottom() { return this.i.aap ? this.i.aap.bottom : NaN; } set dataToolTipValueRowMarginBottom(v) { this.ensureDataToolTipValueRowMargin(); this.i.aap.bottom = +v; this.i.aap = this.i.aap; } get dataToolTipValueRowMarginLeft() { return this.i.aap ? this.i.aap.left : NaN; } set dataToolTipValueRowMarginLeft(v) { this.ensureDataToolTipValueRowMargin(); this.i.aap.left = +v; this.i.aap = this.i.aap; } get dataToolTipValueRowMarginRight() { return this.i.aap ? this.i.aap.right : NaN; } set dataToolTipValueRowMarginRight(v) { this.ensureDataToolTipValueRowMargin(); this.i.aap.right = +v; this.i.aap = this.i.aap; } get dataToolTipValueRowMarginTop() { return this.i.aap ? this.i.aap.top : NaN; } set dataToolTipValueRowMarginTop(v) { this.ensureDataToolTipValueRowMargin(); this.i.aap.top = +v; this.i.aap = this.i.aap; } ensureDataToolTipValueRowMargin() { if (this.i.aap) { return; } this.i.aap = new Thickness(2); } /** * Gets or sets whether to show series rows. */ get dataToolTipValueRowVisible() { return this.i.g0; } set dataToolTipValueRowVisible(v) { this.i.g0 = ensureBool(v); } /** * Gets or sets text displayed when data column is missing a value, e.g. "no data" */ get dataToolTipValueTextWhenMissingData() { return this.i.qx; } set dataToolTipValueTextWhenMissingData(v) { this.i.qx = v; } /** * Gets or sets whether to use series colors when displaying values in the legend */ get dataToolTipValueTextUseSeriesColors() { return this.i.g1; } set dataToolTipValueTextUseSeriesColors(v) { this.i.g1 = ensureBool(v); } get dataToolTipValueTextMarginBottom() { return this.i.aaq ? this.i.aaq.bottom : NaN; } set dataToolTipValueTextMarginBottom(v) { this.ensureDataToolTipValueTextMargin(); this.i.aaq.bottom = +v; this.i.aaq = this.i.aaq; } get dataToolTipValueTextMarginLeft() { return this.i.aaq ? this.i.aaq.left : NaN; } set dataToolTipValueTextMarginLeft(v) { this.ensureDataToolTipValueTextMargin(); this.i.aaq.left = +v; this.i.aaq = this.i.aaq; } get dataToolTipValueTextMarginRight() { return this.i.aaq ? this.i.aaq.right : NaN; } set dataToolTipValueTextMarginRight(v) { this.ensureDataToolTipValueTextMargin(); this.i.aaq.right = +v; this.i.aaq = this.i.aaq; } get dataToolTipValueTextMarginTop() { return this.i.aaq ? this.i.aaq.top : NaN; } set dataToolTipValueTextMarginTop(v) { this.ensureDataToolTipValueTextMargin(); this.i.aaq.top = +v; this.i.aaq = this.i.aaq; } ensureDataToolTipValueTextMargin() { if (this.i.aaq) { return; } this.i.aaq = new Thickness(2); } /** * Gets or sets the units text color. */ get dataToolTipValueTextColor() { return brushToString(this.i.zj); } set dataToolTipValueTextColor(v) { this.i.zj = stringToBrush(v); } /** * Gets or Sets the style to use for the units text. */ get dataToolTipValueTextStyle() { if (this.i.fh == null) { return null; } return this.i.fh.fontString; } set dataToolTipValueTextStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.fh = fi; } /** * Gets or sets the format string for header text displayed in the data legend. */ get dataToolTipHeaderFormatString() { return this.i.o8; } set dataToolTipHeaderFormatString(v) { this.i.o8 = v; } /** * Gets or sets the format specifiers to use with the HeaderFormatString string. */ get dataToolTipHeaderFormatSpecifiers() { return this.i.k; } set dataToolTipHeaderFormatSpecifiers(v) { if (v && !Array.isArray(v) && typeof (v) == "string") { const re = /\s*(?:,|\s|$)\s*/gm; v = v.split(re); } this.i.k = v; } /** * Gets or sets globalization culture when displaying header as date time * This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties */ get dataToolTipHeaderFormatCulture() { return this.i.o4; } set dataToolTipHeaderFormatCulture(v) { this.i.o4 = v; } /** * Gets or sets date format for the header * This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties */ get dataToolTipHeaderFormatDate() { return this.i.bk; } set dataToolTipHeaderFormatDate(v) { this.i.bk = ensureEnum(DataLegendHeaderDateMode_$type, v); } /** * Gets or sets time format for the header * This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties */ get dataToolTipHeaderFormatTime() { return this.i.bm; } set dataToolTipHeaderFormatTime(v) { this.i.bm = ensureEnum(DataLegendHeaderTimeMode_$type, v); } /** * Gets or sets the HeaderText for the data legend. */ get dataToolTipHeaderText() { return this.i.pd; } set dataToolTipHeaderText(v) { this.i.pd = v; } /** * Gets or sets the header text color. */ get dataToolTipHeaderTextColor() { return brushToString(this.i.zb); } set dataToolTipHeaderTextColor(v) { this.i.zb = stringToBrush(v); } get dataToolTipHeaderTextMarginBottom() { return this.i.aaj ? this.i.aaj.bottom : NaN; } set dataToolTipHeaderTextMarginBottom(v) { this.ensureDataToolTipHeaderTextMargin(); this.i.aaj.bottom = +v; this.i.aaj = this.i.aaj; } get dataToolTipHeaderTextMarginLeft() { return this.i.aaj ? this.i.aaj.left : NaN; } set dataToolTipHeaderTextMarginLeft(v) { this.ensureDataToolTipHeaderTextMargin(); this.i.aaj.left = +v; this.i.aaj = this.i.aaj; } get dataToolTipHeaderTextMarginRight() { return this.i.aaj ? this.i.aaj.right : NaN; } set dataToolTipHeaderTextMarginRight(v) { this.ensureDataToolTipHeaderTextMargin(); this.i.aaj.right = +v; this.i.aaj = this.i.aaj; } get dataToolTipHeaderTextMarginTop() { return this.i.aaj ? this.i.aaj.top : NaN; } set dataToolTipHeaderTextMarginTop(v) { this.ensureDataToolTipHeaderTextMargin(); this.i.aaj.top = +v; this.i.aaj = this.i.aaj; } ensureDataToolTipHeaderTextMargin() { if (this.i.aaj) { return; } this.i.aaj = new Thickness(2); } get dataToolTipHeaderRowMarginBottom() { return this.i.aai ? this.i.aai.bottom : NaN; } set dataToolTipHeaderRowMarginBottom(v) { this.ensureDataToolTipHeaderRowMargin(); this.i.aai.bottom = +v; this.i.aai = this.i.aai; } get dataToolTipHeaderRowMarginLeft() { return this.i.aai ? this.i.aai.left : NaN; } set dataToolTipHeaderRowMarginLeft(v) { this.ensureDataToolTipHeaderRowMargin(); this.i.aai.left = +v; this.i.aai = this.i.aai; } get dataToolTipHeaderRowMarginRight() { return this.i.aai ? this.i.aai.right : NaN; } set dataToolTipHeaderRowMarginRight(v) { this.ensureDataToolTipHeaderRowMargin(); this.i.aai.right = +v; this.i.aai = this.i.aai; } get dataToolTipHeaderRowMarginTop() { return this.i.aai ? this.i.aai.top : NaN; } set dataToolTipHeaderRowMarginTop(v) { this.ensureDataToolTipHeaderRowMargin(); this.i.aai.top = +v; this.i.aai = this.i.aai; } ensureDataToolTipHeaderRowMargin() { if (this.i.aai) { return; } this.i.aai = new Thickness(2); } /** * Gets or sets whether to show Header row. */ get dataToolTipHeaderRowVisible() { return this.i.gx; } set dataToolTipHeaderRowVisible(v) { this.i.gx = ensureBool(v); } /** * Gets or Sets the style to use for the header text. */ get dataToolTipHeaderTextStyle() { if (this.i.e9 == null) { return null; } return this.i.e9.fontString; } set dataToolTipHeaderTextStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.e9 = fi; } /** * Gets or sets the Group text color. */ get dataToolTipGroupTextColor() { return brushToString(this.i.za); } set dataToolTipGroupTextColor(v) { this.i.za = stringToBrush(v); } get dataToolTipGroupTextMarginBottom() { return this.i.aah ? this.i.aah.bottom : NaN; } set dataToolTipGroupTextMarginBottom(v) { this.ensureDataToolTipGroupTextMargin(); this.i.aah.bottom = +v; this.i.aah = this.i.aah; } get dataToolTipGroupTextMarginLeft() { return this.i.aah ? this.i.aah.left : NaN; } set dataToolTipGroupTextMarginLeft(v) { this.ensureDataToolTipGroupTextMargin(); this.i.aah.left = +v; this.i.aah = this.i.aah; } get dataToolTipGroupTextMarginRight() { return this.i.aah ? this.i.aah.right : NaN; } set dataToolTipGroupTextMarginRight(v) { this.ensureDataToolTipGroupTextMargin(); this.i.aah.right = +v; this.i.aah = this.i.aah; } get dataToolTipGroupTextMarginTop() { return this.i.aah ? this.i.aah.top : NaN; } set dataToolTipGroupTextMarginTop(v) { this.ensureDataToolTipGroupTextMargin(); this.i.aah.top = +v; this.i.aah = this.i.aah; } ensureDataToolTipGroupTextMargin() { if (this.i.aah) { return; } this.i.aah = new Thickness(2); } get dataToolTipGroupRowMarginBottom() { return this.i.aag ? this.i.aag.bottom : NaN; } set dataToolTipGroupRowMarginBottom(v) { this.ensureDataToolTipGroupRowMargin(); this.i.aag.bottom = +v; this.i.aag = this.i.aag; } get dataToolTipGroupRowMarginLeft() { return this.i.aag ? this.i.aag.left : NaN; } set dataToolTipGroupRowMarginLeft(v) { this.ensureDataToolTipGroupRowMargin(); this.i.aag.left = +v; this.i.aag = this.i.aag; } get dataToolTipGroupRowMarginRight() { return this.i.aag ? this.i.aag.right : NaN; } set dataToolTipGroupRowMarginRight(v) { this.ensureDataToolTipGroupRowMargin(); this.i.aag.right = +v; this.i.aag = this.i.aag; } get dataToolTipGroupRowMarginTop() { return this.i.aag ? this.i.aag.top : NaN; } set dataToolTipGroupRowMarginTop(v) { this.ensureDataToolTipGroupRowMargin(); this.i.aag.top = +v; this.i.aag = this.i.aag; } ensureDataToolTipGroupRowMargin() { if (this.i.aag) { return; } this.i.aag = new Thickness(2); } /** * Gets or sets whether to show Group row. */ get dataToolTipGroupRowVisible() { return this.i.gw; } set dataToolTipGroupRowVisible(v) { this.i.gw = ensureBool(v); } /** * Gets or Sets the style to use for the Group text. */ get dataToolTipGroupTextStyle() { if (this.i.e8 == null) { return null; } return this.i.e8.fontString; } set dataToolTipGroupTextStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.e8 = fi; } /** * Gets or sets the summary text color. */ get dataToolTipSummaryTitleTextColor() { return brushToString(this.i.ze); } set dataToolTipSummaryTitleTextColor(v) { this.i.ze = stringToBrush(v); } /** * Gets or Sets the style to use for the summary text. */ get dataToolTipSummaryTitleTextStyle() { if (this.i.fc == null) { return null; } return this.i.fc.fontString; } set dataToolTipSummaryTitleTextStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.fc = fi; } /** * Gets or sets the SummaryType for the data legend. */ get dataToolTipSummaryType() { return this.i.bq; } set dataToolTipSummaryType(v) { this.i.bq = ensureEnum(DataLegendSummaryType_$type, v); } /** * Gets or sets the SummaryTitleText for the data legend. */ get dataToolTipSummaryTitleText() { return this.i.pw; } set dataToolTipSummaryTitleText(v) { this.i.pw = v; } get dataToolTipSummaryTitleTextMarginBottom() { return this.i.aam ? this.i.aam.bottom : NaN; } set dataToolTipSummaryTitleTextMarginBottom(v) { this.ensureDataToolTipSummaryTitleTextMargin(); this.i.aam.bottom = +v; this.i.aam = this.i.aam; } get dataToolTipSummaryTitleTextMarginLeft() { return this.i.aam ? this.i.aam.left : NaN; } set dataToolTipSummaryTitleTextMarginLeft(v) { this.ensureDataToolTipSummaryTitleTextMargin(); this.i.aam.left = +v; this.i.aam = this.i.aam; } get dataToolTipSummaryTitleTextMarginRight() { return this.i.aam ? this.i.aam.right : NaN; } set dataToolTipSummaryTitleTextMarginRight(v) { this.ensureDataToolTipSummaryTitleTextMargin(); this.i.aam.right = +v; this.i.aam = this.i.aam; } get dataToolTipSummaryTitleTextMarginTop() { return this.i.aam ? this.i.aam.top : NaN; } set dataToolTipSummaryTitleTextMarginTop(v) { this.ensureDataToolTipSummaryTitleTextMargin(); this.i.aam.top = +v; this.i.aam = this.i.aam; } ensureDataToolTipSummaryTitleTextMargin() { if (this.i.aam) { return; } this.i.aam = new Thickness(2); } get dataToolTipSummaryRowMarginBottom() { return this.i.aal ? this.i.aal.bottom : NaN; } set dataToolTipSummaryRowMarginBottom(v) { this.ensureDataToolTipSummaryRowMargin(); this.i.aal.bottom = +v; this.i.aal = this.i.aal; } get dataToolTipSummaryRowMarginLeft() { return this.i.aal ? this.i.aal.left : NaN; } set dataToolTipSummaryRowMarginLeft(v) { this.ensureDataToolTipSummaryRowMargin(); this.i.aal.left = +v; this.i.aal = this.i.aal; } get dataToolTipSummaryRowMarginRight() { return this.i.aal ? this.i.aal.right : NaN; } set dataToolTipSummaryRowMarginRight(v) { this.ensureDataToolTipSummaryRowMargin(); this.i.aal.right = +v; this.i.aal = this.i.aal; } get dataToolTipSummaryRowMarginTop() { return this.i.aal ? this.i.aal.top : NaN; } set dataToolTipSummaryRowMarginTop(v) { this.ensureDataToolTipSummaryRowMargin(); this.i.aal.top = +v; this.i.aal = this.i.aal; } ensureDataToolTipSummaryRowMargin() { if (this.i.aal) { return; } this.i.aal = new Thickness(2); } /** * Gets or sets the units text color. */ get dataToolTipSummaryValueTextColor() { return brushToString(this.i.zg); } set dataToolTipSummaryValueTextColor(v) { this.i.zg = stringToBrush(v); } /** * Gets or Sets the style to use for the units text. */ get dataToolTipSummaryValueTextStyle() { if (this.i.fe == null) { return null; } return this.i.fe.fontString; } set dataToolTipSummaryValueTextStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.fe = fi; } /** * Gets or sets the units text for the data legend. */ get dataToolTipSummaryLabelText() { return this.i.pr; } set dataToolTipSummaryLabelText(v) { this.i.pr = v; } /** * Gets or sets the units text color. */ get dataToolTipSummaryLabelTextColor() { return brushToString(this.i.zd); } set dataToolTipSummaryLabelTextColor(v) { this.i.zd = stringToBrush(v); } /** * Gets or Sets the style to use for the units text. */ get dataToolTipSummaryLabelTextStyle() { if (this.i.fb == null) { return null; } return this.i.fb.fontString; } set dataToolTipSummaryLabelTextStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.fb = fi; } /** * Gets or sets the units text for the data legend. */ get dataToolTipSummaryUnitsText() { return this.i.p2; } set dataToolTipSummaryUnitsText(v) { this.i.p2 = v; } /** * Gets or sets the units text color. */ get dataToolTipSummaryUnitsTextColor() { return brushToString(this.i.zf); } set dataToolTipSummaryUnitsTextColor(v) { this.i.zf = stringToBrush(v); } /** * Gets or Sets the style to use for the units text. */ get dataToolTipSummaryUnitsTextStyle() { if (this.i.fd == null) { return null; } return this.i.fd.fontString; } set dataToolTipSummaryUnitsTextStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.fd = fi; } get dataToolTipBadgeMarginBottom() { return this.i.aaf ? this.i.aaf.bottom : NaN; } set dataToolTipBadgeMarginBottom(v) { this.ensureDataToolTipBadgeMargin(); this.i.aaf.bottom = +v; this.i.aaf = this.i.aaf; } get dataToolTipBadgeMarginLeft() { return this.i.aaf ? this.i.aaf.left : NaN; } set dataToolTipBadgeMarginLeft(v) { this.ensureDataToolTipBadgeMargin(); this.i.aaf.left = +v; this.i.aaf = this.i.aaf; } get dataToolTipBadgeMarginRight() { return this.i.aaf ? this.i.aaf.right : NaN; } set dataToolTipBadgeMarginRight(v) { this.ensureDataToolTipBadgeMargin(); this.i.aaf.right = +v; this.i.aaf = this.i.aaf; } get dataToolTipBadgeMarginTop() { return this.i.aaf ? this.i.aaf.top : NaN; } set dataToolTipBadgeMarginTop(v) { this.ensureDataToolTipBadgeMargin(); this.i.aaf.top = +v; this.i.aaf = this.i.aaf; } ensureDataToolTipBadgeMargin() { if (this.i.aaf) { return; } this.i.aaf = new Thickness(2); } /** * Gets or sets the BadgeShape for the data legend. */ get dataToolTipBadgeShape() { return this.i.ct; } set dataToolTipBadgeShape(v) { this.i.ct = ensureEnum(LegendItemBadgeShape_$type, v); } /** * Gets or sets the UnitsMode for the data legend. */ get dataToolTipUnitsDisplayMode() { return this.i.bs; } set dataToolTipUnitsDisplayMode(v) { this.i.bs = ensureEnum(DataLegendUnitsMode_$type, v); } /** * Gets or sets the units text for the data legend. */ get dataToolTipUnitsText() { return this.i.qc; } set dataToolTipUnitsText(v) { this.i.qc = v; } /** * Gets or sets the units text color. */ get dataToolTipUnitsTextColor() { return brushToString(this.i.zi); } set dataToolTipUnitsTextColor(v) { this.i.zi = stringToBrush(v); } get dataToolTipUnitsTextMarginBottom() { return this.i.aao ? this.i.aao.bottom : NaN; } set dataToolTipUnitsTextMarginBottom(v) { this.ensureDataToolTipUnitsTextMargin(); this.i.aao.bottom = +v; this.i.aao = this.i.aao; } get dataToolTipUnitsTextMarginLeft() { return this.i.aao ? this.i.aao.left : NaN; } set dataToolTipUnitsTextMarginLeft(v) { this.ensureDataToolTipUnitsTextMargin(); this.i.aao.left = +v; this.i.aao = this.i.aao; } get dataToolTipUnitsTextMarginRight() { return this.i.aao ? this.i.aao.right : NaN; } set dataToolTipUnitsTextMarginRight(v) { this.ensureDataToolTipUnitsTextMargin(); this.i.aao.right = +v; this.i.aao = this.i.aao; } get dataToolTipUnitsTextMarginTop() { return this.i.aao ? this.i.aao.top : NaN; } set dataToolTipUnitsTextMarginTop(v) { this.ensureDataToolTipUnitsTextMargin(); this.i.aao.top = +v; this.i.aao = this.i.aao; } ensureDataToolTipUnitsTextMargin() { if (this.i.aao) { return; } this.i.aao = new Thickness(2); } /** * Gets or Sets the style to use for the units text. */ get dataToolTipUnitsTextStyle() { if (this.i.fg == null) { return null; } return this.i.fg.fontString; } set dataToolTipUnitsTextStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.fg = fi; } get dataToolTipTitleTextMarginBottom() { return