@progress/kendo-angular-charts
Version:
Kendo UI Charts for Angular - A comprehensive package for creating beautiful and interactive data visualization. Every chart type, stock charts, and sparklines are included.
437 lines (436 loc) • 24.5 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2024 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { TemplateRef } from '@angular/core';
import { drawing } from '@progress/kendo-drawing';
import { CollectionItemComponent } from '../common/collection-item.component';
import { CollectionService } from '../common/collection.service';
import { ConfigurationService } from '../common/configuration.service';
import { Border, BulletTarget, DashType, LabelConnectors, LegendItem, LineStyle, Margin, NegativeBubbleValues, Overlay, Series, SeriesErrorBars, SeriesExtremes, SeriesHighlight, SeriesLabels, SeriesLine, SeriesMarkers, SeriesMean, SeriesMedian, SeriesNotes, SeriesOutliers, SeriesPattern, SeriesStack, SeriesTooltip, SeriesTrendline, SeriesType, SeriesVisualArgs, SeriesWhiskers } from '../common/property-types';
import { SeriesTooltipComponent } from './series-item/tooltip.component';
import { SeriesDrilldownTemplateDirective } from './series-drilldown-template.directive';
import * as i0 from "@angular/core";
/**
* The configuration component for a series item.
*
* @example
* ```html
* <kendo-chart ...>
* <kendo-chart-series>
* <kendo-chart-series-item type="line" ...> </kendo-chart-series-item>
* </kendo-chart-series>
* </kendo-chart>
* ```
*/
export declare class SeriesItemComponent extends CollectionItemComponent implements Series {
protected configurationService: ConfigurationService;
protected collectionService: CollectionService;
/**
* The aggregate function for the date series.
* The function is used when a category (year, month, or other) contains two or more points.
* The Chart displays the return value of the function instead of the individual points.
* The `aggregate` option is supported for categorical chart axis only.
*
* The supported values are:
* - `"avg"`—The average of all values for the date period.
* - `"count"`—The number of values for the date period.
* - `"max"`—The highest value for the date period.
* - `"min"`—The lowest value for the date period.
* - `"sum"`—The sum of all values for the date period. Defaults to `0` if no data points are defined.
* - `"sumOrNull"`—The sum of all values for the date period. Defaults to `null` if no data points are defined.
* - `"first"`—The first value.
* - function (values, series, dataItems, category)—A user-defined aggregate function. Returns a single value or a data item.
* - object (compound aggregate)—Applicable to the Candlestick, Box Plot, and OHLC series. Specifies the aggregate for each data item field.
*
* @default 'max'
*/
aggregate: any;
/**
* If set to `true`, the Chart automatically scales down to fit the content area.
* Applicable for the Pie and Donut series. ([See example](slug:donut_seriestypes_charts#displaying-labels-in-angular-donut-chart)).
* @default false
*/
autoFit: boolean;
/**
* The name of the value axis.
* The axis option is supported for Scatter plots. For more information on Scatter plots, refer to
* [`xAxis`]({% slug api_charts_xaxis %}) and [`yAxis`]({% slug api_charts_yaxis %}).
* @default 'primary'
*/
axis: string;
border: Border;
categoryAxis: string;
/**
* The data item field which contains the category name or date.
* If the category is a date, the points are rendered in chronological order.
* @default 'category'
*/
categoryField: string;
/**
* The data field that contains the `close` value.
* The `closeField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"` or `"ohlc"`.
* @default 'close'
*/
closeField: string;
color: any;
/**
* The data item field which contains the series color.
* The `colorField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type)
* is set to `"bar"`, `"column"`, `"rangeBar"`, `"rangeColumn"`, `"bubble"`, `"donut"`, `"pie"`, `"candlestick"`,
* `"ohlc"`, or `"waterfall"`.
* @default 'color'
*/
colorField: string;
connectors: LabelConnectors;
/**
* The data item field which contains the current value.
* The `currentField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bullet"` or `"verticalBullet"`.
* @default 'current'
*/
currentField: string;
/**
* The dash type of line Chart.
* The `dashType` option is considered only if the [`series.type`]({% slug api_charts_series %}#toc-type) option is set to `"line"`.
* @default 'solid'
*/
dashType: DashType;
data: any[];
downColor: string;
/**
* The data field which contains the color that is applied when the `open` value is greater than the `close` value.
* The `downColorField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"`.
* @default 'downColor'
*/
downColorField: string;
drilldownField: string;
/**
* The `dynamicHeight` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"funnel"` or `"pyramid"`.
* When set to `false`, all segments become with the same height.
* Otherwise, the height of each segment is based on its value.
* @default true
*/
dynamicHeight: boolean;
/**
* The option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"funnel"`.
* When set to `true`, the ratio of the bases of each segment is calculated based on the ratio of
* `currentDataItem.value`/`nextDataItem.value`.
* The last element is always created like a rectangle since there is no following element.
* @default false
*/
dynamicSlope: boolean;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) high value.
* The `errorHighField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"line"`, or `"area"`.
* @default 'errorHigh'
*/
errorHighField: string;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) low value.
* The `errorLowField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"line"`, or `"area"`.
* @default 'errorLow'
*/
errorLowField: string;
/**
* The data item field which contains a Boolean value indicating whether the sector is exploded.
* The `explodeField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"donut"` or `"pie"`.
* @default 'explode'
*/
explodeField: string;
/**
* The data item field which contains the series value.
* @default 'value'
*/
field: string;
/**
* The data item field which contains the series from value.
* @default 'min'
*/
fromField: string;
/**
* The distance between the categories expressed as a percentage of the bar width.
* See the related spacing setting.
* The `gap` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"candlestick"`, `"ohlc"`,
* `"radarColumn"`, or `"waterfall"`.
* @default 1.5
*/
gap: number;
/**
* The data field which contains the high value.
* The `highField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"` or `"ohlc"`.
* @default 'hight'
*/
highField: string;
holeSize: number;
line: SeriesLine;
/**
* The data field containing the low value.
* The `lowField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"` or `"ohlc"`.
* @default 'low'
*/
lowField: string;
/**
* The data item field which contains the series lower value.
* The `lowerField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
* @default 'lower'
*/
lowerField: string;
/**
* The margin around each donut series (ring). A numeric value sets all margins.
* @default 1
*/
margin: Margin | number;
/**
* The maximum size of the Chart bubble series marker.
* @default 100
*/
maxSize: number;
mean: SeriesMean;
/**
* The data item field which contains the series mean value.
* The `meanField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
* @default 'mean'
*/
meanField: string;
median: SeriesMedian;
/**
* The data item field which contains the series median value.
* The `medianField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
* @default 'median'
*/
medianField: string;
/**
* The minimum size of the Chart bubble series marker.
* @default 5
*/
minSize: number;
missingValues: 'gap' | 'interpolate' | 'zero';
name: string;
/**
* Specifies the top-base/bottom-base ratio of the whole Funnel Chart. If the `neckRatio` is set to `3`,
* it means the top base is three times smaller than the bottom base.
* The `neckRatio` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"funnel"` and `dynamicSlope` is set to `false`.
* @default 0.3
*/
neckRatio: number;
negativeColor: string;
negativeValues: NegativeBubbleValues;
/**
* The data item field which contains the series note text.
* @default 'noteText'
*/
noteTextField: string;
/**
* The opacity of the series. By default, the series are opaque.
* @default 1
*/
opacity: number;
openField: string;
/**
* The data item field which contains the series outliers value.
* The `outliersField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
* @default 'outliers'
*/
outliersField: string;
overlay: Overlay;
padding: number;
/**
* The data item field which contains the series `q1` value.
* The `q1Field` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
* @default 'q1'
*/
q1Field: string;
/**
* The data item field which contains the series `q3` value.
* The `q3Field` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
* @default 'q3'
*/
q3Field: string;
/**
* The space in pixels between the different segments of the Funnel or Pyramid Chart.
* The `segmentSpacing` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"funnel"` or `"pyramid"`.
* @default 0
*/
segmentSpacing: number;
size: number;
/**
* The data field which contains the bubble size value.
* @default 'size'
*/
sizeField: string;
/**
* The distance between series points within a category. Expressed as a percentage of the bar width.
* See the related `gap` setting.
* The spacing option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"candlestick"`, `"ohlc"`, or
* `"radarColumn"`.
* @default 0.4
*/
spacing: number;
/**
* A Boolean value which indicates if the series have to be stacked.
* A string value is interpreted as [`series.stack.group`]({% slug api_charts_seriesstack %}#toc-group).
*
* The `stack` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"line"`, `"area"`,
* `"verticalLine"`, `"verticalArea"`, `"radarLine"`, `"radarArea"`, and `"radarColumn"`.
* If not overridden, the stack settings of the first series are inherited as a default value by the rest of the series.
* @default false
*/
stack: boolean | string | SeriesStack;
/**
* The start angle (in degrees) of the first Donut or Pie segment.
* Angles increase clockwise with zero to the left. Negative values are acceptable.
* @default 90
*/
startAngle: number;
/**
* The `style` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to
* `"line"`, `"scatterLine"`, `"radarLine"`, or `"polarLine"`.
* @default 'normal'
*/
style: LineStyle;
/**
* The data item field which contains the summary type for the Waterfall series.
* The value (if any) of a data item marked as a summary point will be discarded.
*
* Summary columns are optional and can be one of two types:
*
* `"runningTotal"`—Displays the sum of all items since the last `"runningTotal"` point.
* `"total"`—Displays the sum of all previous items.
* @default 'summary'
*/
summaryField: string;
target: BulletTarget;
/**
* The data item field which contains the series to value.
* @default 'max'
*/
toField: string;
/**
* The type of the series.
* @default 'column'
*/
type: SeriesType;
/**
* The data item field which contains the series upper value.
* The `upperField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
* @default 'upper'
*/
upperField: string;
/**
* Sets the visible property of a Chart series.
* @default true
*/
visible: boolean;
/**
* A value which indicates whether to show the point category (for Funnel, Pyramid, Donut, and Pie series)
* or the series name (for other available series types) in the legend.
* @default true
*/
visibleInLegend: boolean;
visibleInLegendField: string;
visual: (e: SeriesVisualArgs) => drawing.Element;
width: number;
whiskers: SeriesWhiskers;
/**
* The name of the X axis.
* The [`xAxis`]({% slug api_charts_xaxis %}) option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bubble"`, `"scatter"`, `"scatterLine"`, or `"polar"` series.
* For the Polar series, the [`xAxis`]({% slug api_charts_xaxis %}) range is expressed in degrees.
* @default 'primary'
*/
xAxis: string;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) xAxis low value.
* The `xErrorLowField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"scatter"`, `"scatterLine"`, or
* `"bubble"`.
* @default 'xErrorHigh'
*/
xErrorHighField: string;
/**
* The data item field containing the x value.
* The `xField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bubble"`, `"scatter"`, `"scatterLine"`, or
* `"polar"` series.
* @default 'xErrorLow'
*/
xErrorLowField: string;
/**
* The data item field containing the x value.
* The `xField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bubble"`, `"scatter"`, `"scatterLine"`, or
* `"polar"` series.
* @default 'x'
*/
xField: string;
/**
* The name of the Y axis to use.
* Available for the Bubble, Scatter, Scatter Line, and Polar series.
* @default 'primary'
*/
yAxis: string;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) yAxis high value.
* The `yErrorHighField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"scatter"`, `"scatterLine"`, or
* `"bubble"`.
* @default 'yErrorHigh'
*/
yErrorHighField: string;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) yAxis low value.
* The `yErrorLowField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"scatter"`, `"scatterLine"`, or
* `"bubble"`.
* @default 'yErrorLow'
*/
yErrorLowField: string;
/**
* The data item field containing the y value.
* The `yField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bubble"`, `"scatter"`, or `"scatterLine"`.
* @default 'y'
*/
yField: string;
zIndex: number;
/**
* The configuration options of the trendline series.
*
* The `trendline` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to
* "`linearTrendline`", "`exponentialTrendline`", "`logarithmicTrendline`", "`powerTrendline`", "`polynomialTrendline`" or "`movingAverageTrendline`".
*/
trendline: SeriesTrendline;
for: string;
/**
* The configuration options of the series legend item.
*/
legendItem: LegendItem;
/**
* The configuration options of the series pattern.
*/
pattern?: SeriesPattern | ((point: any) => SeriesPattern);
/**
* The data item field which contains the series pattern.
* The `patternField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"pie"`, `"donut"`, `"funnel"`, `"heatmap"`, or `"pyramid"`.
*/
patternField?: string;
errorBars: SeriesErrorBars;
extremes: SeriesExtremes;
highlight: SeriesHighlight;
labels: SeriesLabels;
markers: SeriesMarkers;
notes: SeriesNotes;
outliers: SeriesOutliers;
tooltip: SeriesTooltip;
seriesTooltip: SeriesTooltipComponent;
drilldownTemplate: SeriesDrilldownTemplateDirective;
constructor(configurationService: ConfigurationService, collectionService: CollectionService);
/**
* Toggles the series visibility and updates the parent Chart
* without animated transitions.
*/
toggleVisibility(): void;
/**
* Toggles the visibility of a point with the given index.
* Applicable for the Pie, Donut, Funnel and Pyramid series.
*
* @param pointIndex - The zero-based index of the point to toggle.
*/
togglePointVisibility(pointIndex: number): void;
get seriesTooltipTemplateRef(): TemplateRef<any>;
static ɵfac: i0.ɵɵFactoryDeclaration<SeriesItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SeriesItemComponent, "kendo-chart-series-item", never, { "aggregate": { "alias": "aggregate"; "required": false; }; "autoFit": { "alias": "autoFit"; "required": false; }; "axis": { "alias": "axis"; "required": false; }; "border": { "alias": "border"; "required": false; }; "categoryAxis": { "alias": "categoryAxis"; "required": false; }; "categoryField": { "alias": "categoryField"; "required": false; }; "closeField": { "alias": "closeField"; "required": false; }; "color": { "alias": "color"; "required": false; }; "colorField": { "alias": "colorField"; "required": false; }; "connectors": { "alias": "connectors"; "required": false; }; "currentField": { "alias": "currentField"; "required": false; }; "dashType": { "alias": "dashType"; "required": false; }; "data": { "alias": "data"; "required": false; }; "downColor": { "alias": "downColor"; "required": false; }; "downColorField": { "alias": "downColorField"; "required": false; }; "drilldownField": { "alias": "drilldownField"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "dynamicSlope": { "alias": "dynamicSlope"; "required": false; }; "errorHighField": { "alias": "errorHighField"; "required": false; }; "errorLowField": { "alias": "errorLowField"; "required": false; }; "explodeField": { "alias": "explodeField"; "required": false; }; "field": { "alias": "field"; "required": false; }; "fromField": { "alias": "fromField"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "highField": { "alias": "highField"; "required": false; }; "holeSize": { "alias": "holeSize"; "required": false; }; "line": { "alias": "line"; "required": false; }; "lowField": { "alias": "lowField"; "required": false; }; "lowerField": { "alias": "lowerField"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "mean": { "alias": "mean"; "required": false; }; "meanField": { "alias": "meanField"; "required": false; }; "median": { "alias": "median"; "required": false; }; "medianField": { "alias": "medianField"; "required": false; }; "minSize": { "alias": "minSize"; "required": false; }; "missingValues": { "alias": "missingValues"; "required": false; }; "name": { "alias": "name"; "required": false; }; "neckRatio": { "alias": "neckRatio"; "required": false; }; "negativeColor": { "alias": "negativeColor"; "required": false; }; "negativeValues": { "alias": "negativeValues"; "required": false; }; "noteTextField": { "alias": "noteTextField"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "openField": { "alias": "openField"; "required": false; }; "outliersField": { "alias": "outliersField"; "required": false; }; "overlay": { "alias": "overlay"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "q1Field": { "alias": "q1Field"; "required": false; }; "q3Field": { "alias": "q3Field"; "required": false; }; "segmentSpacing": { "alias": "segmentSpacing"; "required": false; }; "size": { "alias": "size"; "required": false; }; "sizeField": { "alias": "sizeField"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "stack": { "alias": "stack"; "required": false; }; "startAngle": { "alias": "startAngle"; "required": false; }; "style": { "alias": "style"; "required": false; }; "summaryField": { "alias": "summaryField"; "required": false; }; "target": { "alias": "target"; "required": false; }; "toField": { "alias": "toField"; "required": false; }; "type": { "alias": "type"; "required": false; }; "upperField": { "alias": "upperField"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "visibleInLegend": { "alias": "visibleInLegend"; "required": false; }; "visibleInLegendField": { "alias": "visibleInLegendField"; "required": false; }; "visual": { "alias": "visual"; "required": false; }; "width": { "alias": "width"; "required": false; }; "whiskers": { "alias": "whiskers"; "required": false; }; "xAxis": { "alias": "xAxis"; "required": false; }; "xErrorHighField": { "alias": "xErrorHighField"; "required": false; }; "xErrorLowField": { "alias": "xErrorLowField"; "required": false; }; "xField": { "alias": "xField"; "required": false; }; "yAxis": { "alias": "yAxis"; "required": false; }; "yErrorHighField": { "alias": "yErrorHighField"; "required": false; }; "yErrorLowField": { "alias": "yErrorLowField"; "required": false; }; "yField": { "alias": "yField"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "trendline": { "alias": "trendline"; "required": false; }; "for": { "alias": "for"; "required": false; }; "legendItem": { "alias": "legendItem"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "patternField": { "alias": "patternField"; "required": false; }; "errorBars": { "alias": "errorBars"; "required": false; }; "extremes": { "alias": "extremes"; "required": false; }; "highlight": { "alias": "highlight"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "markers": { "alias": "markers"; "required": false; }; "notes": { "alias": "notes"; "required": false; }; "outliers": { "alias": "outliers"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; }, {}, ["seriesTooltip", "drilldownTemplate"], never, true, never>;
}