igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
777 lines (775 loc) • 28.2 kB
JavaScript
import { EventEmitter, Output, Component, Input } from '@angular/core';
import { delegateCombine } from "igniteui-angular-core";
import { LabelsPosition_$type } from "./LabelsPosition";
import { Visibility_$type } from "igniteui-angular-core";
import { Style } from "igniteui-angular-core";
import { LeaderLineType_$type } from "./LeaderLineType";
import { OthersCategoryType_$type } from "igniteui-angular-core";
import { IgxPropertyUpdatedEventArgs } from "igniteui-angular-core";
import { ensureEnum, arrayFindByName, toBrushCollection, fromBrushCollection, ensureBool, toSpinal, initializePropertiesFromCss, NamePatcher, brushToString, stringToBrush } from "igniteui-angular-core";
import { TypeRegistrar } from "igniteui-angular-core";
import * as i0 from "@angular/core";
/**
* Represents a
* IgxDoughnutChartComponent base series.
*/
export let IgxRingSeriesBaseComponent = /*@__PURE__*/ (() => {
class IgxRingSeriesBaseComponent {
constructor() {
//
this._dataSource = null;
this._tooltipTemplate = null;
this._tooltipContent = null;
this._tooltipContainerTemplate = null;
this._showDefaultTooltip = false;
this.__p = null;
this._hasUserValues = new Set();
this._stylingContainer = null;
this._stylingParent = null;
this._inStyling = false;
this._propertyUpdated = null;
this._zoneRunner = null;
if (this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
}
this._implementation = this.createImplementation();
this._implementation.externalObject = this;
this.onImplementationCreated();
}
createImplementation() {
return null;
}
ngOnInit() {
}
set dataSource(value) {
this._dataSource = value;
this.bindData();
}
get dataSource() {
return this._dataSource;
}
bindData() {
if (this.i != null && this.i !== undefined) {
this.i.itemsSource = this._dataSource;
}
}
get i() {
return this._implementation;
}
onImplementationCreated() {
}
static _createFromInternal(internal) {
if (!internal) {
return null;
}
if (!internal.$type) {
return null;
}
let name = internal.$type.name;
let externalName = "Igx" + name + "Component";
if (!TypeRegistrar.isRegistered(externalName)) {
return null;
}
return TypeRegistrar.create(externalName);
}
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 tooltipTemplate(value) {
this._tooltipTemplate = value;
if (value == null) {
if (this._tooltipContent !== null) {
this._tooltipContent.destroy();
this._tooltipContent = null;
}
}
if (this._tooltipContent != null) {
this._tooltipContent.instance.template = this._tooltipTemplate;
}
else {
if (this.owner != null) {
this.owner._ensureTooltipCreated(this);
}
}
}
get tooltipTemplate() {
return this._tooltipTemplate;
}
set tooltipContainerTemplate(value) {
this._tooltipContainerTemplate = value;
if (this._tooltipContent != null) {
this._tooltipContent.instance.containerTemplate = this._tooltipContainerTemplate;
}
}
get tooltipContainerTemplate() {
return this._tooltipContainerTemplate;
}
_ensureTooltipCreated(createTooltip, createWrapper) {
if (this._tooltipTemplate == null) {
this.i.toolTip = null;
}
if (this._tooltipContent == null && this._tooltipTemplate != null) {
let tooltip = createTooltip();
if (tooltip == null) {
return;
}
this._tooltipContent = tooltip;
tooltip.instance.template = this._tooltipTemplate;
this.i.toolTip = createWrapper(tooltip.location.nativeElement);
}
}
_ensureTooltipDestroyed() {
if (this._tooltipContent !== null) {
this._tooltipContent.destroy();
this._tooltipContent = null;
}
}
/**
* Gets or sets whether default tooltip will be shown.
*/
get showDefaultTooltip() {
return this._showDefaultTooltip;
}
set showDefaultTooltip(v) {
this._showDefaultTooltip = ensureBool(v);
}
sychronizeCollections() { }
/**
* Gets or Sets the property name that contains the values.
*/
get valueMemberPath() {
return this.i.cs;
}
set valueMemberPath(v) {
this.i.cs = v;
}
/**
* Gets or sets the property name that contains the labels.
*/
get labelMemberPath() {
return this.i.bp;
}
set labelMemberPath(v) {
this.i.bp = v;
}
/**
* Gets or sets the property name that contains the legend labels.
*/
get legendLabelMemberPath() {
return this.i.b3;
}
set legendLabelMemberPath(v) {
this.i.b3 = v;
}
/**
* Gets or sets the position of chart labels.
*/
get labelsPosition() {
return this.i.an;
}
set labelsPosition(v) {
this.i.an = ensureEnum(LabelsPosition_$type, v);
}
/**
* Gets or sets whether the leader lines are visible.
*/
get leaderLineVisibility() {
return this.i.en;
}
set leaderLineVisibility(v) {
this.i.en = ensureEnum(Visibility_$type, v);
}
/**
* Gets or sets the fill brush.
*/
get leaderLineFill() {
return this.i.ei ? this.i.ei.fill : null;
}
set leaderLineFill(v) {
this.ensureLeaderLineStyle();
this.i.ei.fill = v;
}
/**
* Gets or sets the stroke brush.
*/
get leaderLineStroke() {
return this.i.ei ? this.i.ei.stroke : null;
}
set leaderLineStroke(v) {
this.ensureLeaderLineStyle();
this.i.ei.stroke = v;
}
/**
* Gets or sets the stroke thickness.
*/
get leaderLineStrokeThickness() {
return this.i.ei ? this.i.ei.strokeThickness : NaN;
}
set leaderLineStrokeThickness(v) {
this.ensureLeaderLineStyle();
this.i.ei.strokeThickness = +v;
}
/**
* Gets or sets the opacity.
*/
get leaderLineOpacity() {
return this.i.ei ? this.i.ei.opacity : NaN;
}
set leaderLineOpacity(v) {
this.ensureLeaderLineStyle();
this.i.ei.opacity = +v;
}
ensureLeaderLineStyle() {
if (this.i.ei) {
return;
}
this.i.ei = new Style();
}
/**
* Gets or sets what type of leader lines will be used for the outside end labels.
*/
get leaderLineType() {
return this.i.ao;
}
set leaderLineType(v) {
this.i.ao = ensureEnum(LeaderLineType_$type, v);
}
/**
* Gets or sets the margin between a label and its leader line. The default is 6 pixels.
*/
get leaderLineMargin() {
return this.i.a7;
}
set leaderLineMargin(v) {
this.i.a7 = +v;
}
/**
* Gets or sets the threshold value that determines if slices are grouped into the Others slice.
*/
get othersCategoryThreshold() {
return this.i.a8;
}
set othersCategoryThreshold(v) {
this.i.a8 = +v;
}
/**
* Gets or sets whether to use numeric or percent-based threshold value.
*/
get othersCategoryType() {
return this.i.ap;
}
set othersCategoryType(v) {
this.i.ap = ensureEnum(OthersCategoryType_$type, v);
}
/**
* Gets or sets the label of the Others slice.
*/
get othersCategoryText() {
return this.i.ca;
}
set othersCategoryText(v) {
this.i.ca = v;
}
/**
* Sets or gets a function which takes an object that produces a formatted label for displaying in the chart.
*/
get formatLabel() {
return this.i.aq;
}
set formatLabel(v) {
this.i.aq = v;
}
/**
* Sets or gets a function which takes an object that produces a formatted label for displaying in the chart's legend.
*/
get formatLegendLabel() {
return this.i.ar;
}
set formatLegendLabel(v) {
this.i.ar = v;
}
/**
* Gets or sets the label format string to use for the label.
*/
get labelFormat() {
return this.i.bl;
}
set labelFormat(v) {
this.i.bl = v;
}
/**
* Gets or sets the format specifiers to use with the LabelFormat string.
*/
get labelFormatSpecifiers() {
return this.i.ag;
}
set labelFormatSpecifiers(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.ag = v;
}
/**
* Gets or sets the label format string to use for the label.
*/
get othersLabelFormat() {
return this.i.ce;
}
set othersLabelFormat(v) {
this.i.ce = v;
}
/**
* Gets or sets the format specifiers to use with the OthersLabelFormat string.
*/
get othersLabelFormatSpecifiers() {
return this.i.aj;
}
set othersLabelFormatSpecifiers(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.aj = v;
}
/**
* Gets or sets the label format string to use for the label.
*/
get legendLabelFormat() {
return this.i.b0;
}
set legendLabelFormat(v) {
this.i.b0 = v;
}
/**
* Gets or sets the format specifiers to use with the LegendLabelFormat string.
*/
get legendLabelFormatSpecifiers() {
return this.i.ah;
}
set legendLabelFormatSpecifiers(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.ah = v;
}
/**
* Gets or sets the label format string to use for the label.
*/
get legendOthersLabelFormat() {
return this.i.b5;
}
set legendOthersLabelFormat(v) {
this.i.b5 = v;
}
/**
* Gets or sets the format specifiers to use with the LegendOthersLabelFormat string.
*/
get legendOthersLabelFormatSpecifiers() {
return this.i.ai;
}
set legendOthersLabelFormatSpecifiers(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.ai = v;
}
/**
* Gets or sets the pixel amount by which the labels are offset from the edge of the slices.
*/
get labelExtent() {
return this.i.a6;
}
set labelExtent(v) {
this.i.a6 = +v;
}
/**
* Gets or sets the starting angle of the chart.
* The default zero value is equivalent to 3 o'clock.
*/
get startAngle() {
return this.i.ba;
}
set startAngle(v) {
this.i.ba = +v;
}
/**
* Gets or sets the fill brush.
*/
get othersCategoryFill() {
return this.i.ej ? this.i.ej.fill : null;
}
set othersCategoryFill(v) {
this.ensureOthersCategoryStyle();
this.i.ej.fill = v;
}
/**
* Gets or sets the stroke brush.
*/
get othersCategoryStroke() {
return this.i.ej ? this.i.ej.stroke : null;
}
set othersCategoryStroke(v) {
this.ensureOthersCategoryStyle();
this.i.ej.stroke = v;
}
/**
* Gets or sets the stroke thickness.
*/
get othersCategoryStrokeThickness() {
return this.i.ej ? this.i.ej.strokeThickness : NaN;
}
set othersCategoryStrokeThickness(v) {
this.ensureOthersCategoryStyle();
this.i.ej.strokeThickness = +v;
}
/**
* Gets or sets the opacity.
*/
get othersCategoryOpacity() {
return this.i.ej ? this.i.ej.opacity : NaN;
}
set othersCategoryOpacity(v) {
this.ensureOthersCategoryStyle();
this.i.ej.opacity = +v;
}
ensureOthersCategoryStyle() {
if (this.i.ej) {
return;
}
this.i.ej = new Style();
}
/**
* Gets or sets the fill brush.
*/
get selectedSliceFill() {
return this.i.ek ? this.i.ek.fill : null;
}
set selectedSliceFill(v) {
this.ensureSelectedStyle();
this.i.ek.fill = v;
}
/**
* Gets or sets the stroke brush.
*/
get selectedSliceStroke() {
return this.i.ek ? this.i.ek.stroke : null;
}
set selectedSliceStroke(v) {
this.ensureSelectedStyle();
this.i.ek.stroke = v;
}
/**
* Gets or sets the stroke thickness.
*/
get selectedSliceStrokeThickness() {
return this.i.ek ? this.i.ek.strokeThickness : NaN;
}
set selectedSliceStrokeThickness(v) {
this.ensureSelectedStyle();
this.i.ek.strokeThickness = +v;
}
/**
* Gets or sets the opacity.
*/
get selectedSliceOpacity() {
return this.i.ek ? this.i.ek.opacity : NaN;
}
set selectedSliceOpacity(v) {
this.ensureSelectedStyle();
this.i.ek.opacity = +v;
}
ensureSelectedStyle() {
if (this.i.ek) {
return;
}
this.i.ek = new Style();
}
/**
* Gets or sets the palette of brushes to use for coloring the slices.
*/
get brushes() {
return fromBrushCollection(this.i.ak);
}
set brushes(v) {
this.i.ak = toBrushCollection(v);
}
/**
* Gets or sets the palette of brushes to use for outlines on the slices.
*/
get outlines() {
return fromBrushCollection(this.i.al);
}
set outlines(v) {
this.i.al = toBrushCollection(v);
}
/**
* Gets or sets the color for labels rendered outside of the pie chart.
*/
get labelOuterColor() {
return brushToString(this.i.eg);
}
set labelOuterColor(v) {
this.i.eg = stringToBrush(v);
}
/**
* Gets or sets the color for labels rendered inside of the pie chart.
*/
get labelInnerColor() {
return brushToString(this.i.ef);
}
set labelInnerColor(v) {
this.i.ef = stringToBrush(v);
}
/**
* Gets or sets the text style to use for labels.
*/
get textStyle() {
return this.i.co;
}
set textStyle(v) {
this.i.co = v;
}
/**
* Gets or sets whether all surface interactions with the plot area should be disabled.
*/
get isSurfaceInteractionDisabled() {
return this.i.a3;
}
set isSurfaceInteractionDisabled(v) {
this.i.a3 = ensureBool(v);
}
/**
* Gets or sets the scaling factor of the chart's radius. Value between 0 and 1.
*/
get radiusFactor() {
return this.i.a9;
}
set radiusFactor(v) {
this.i.a9 = +v;
}
findByName(name) {
if (this.findEphemera) {
if (name && name.indexOf("@@e:") == 0) {
return this.findEphemera(name);
}
}
if (this.legend && this.legend.name && this.legend.name == name) {
return this.legend;
}
if (this.labelFormatSpecifiers != null && arrayFindByName(this.labelFormatSpecifiers, name)) {
return arrayFindByName(this.labelFormatSpecifiers, name);
}
if (this.othersLabelFormatSpecifiers != null && arrayFindByName(this.othersLabelFormatSpecifiers, name)) {
return arrayFindByName(this.othersLabelFormatSpecifiers, name);
}
if (this.legendLabelFormatSpecifiers != null && arrayFindByName(this.legendLabelFormatSpecifiers, name)) {
return arrayFindByName(this.legendLabelFormatSpecifiers, name);
}
if (this.legendOthersLabelFormatSpecifiers != null && arrayFindByName(this.legendOthersLabelFormatSpecifiers, name)) {
return arrayFindByName(this.legendOthersLabelFormatSpecifiers, name);
}
return null;
}
get hasUserValues() {
return this._hasUserValues;
}
__m(propertyName) {
if (!this._inStyling) {
this._hasUserValues.add(propertyName);
}
}
_styling(container, component, parent) {
if (this._inStyling) {
return;
}
this._inStyling = true;
this._stylingContainer = container;
this._stylingParent = component;
let genericPrefix = "";
let typeName = this.i.$type.name;
if (typeName.indexOf("Xam") === 0) {
typeName = typeName.substring(3);
}
genericPrefix = toSpinal("RingSeriesBaseComponent");
let additionalPrefixes = [];
let prefix = toSpinal(typeName);
additionalPrefixes.push(prefix + "-");
let b = this.i.$type.baseType;
while (b && b.name != "Object" &&
b.name != "Base" &&
b.name != "Control" &&
b.Name != "DependencyObject" &&
b.Name != "FrameworkElement") {
typeName = b.name;
if (typeName.indexOf("Xam") === 0) {
typeName = typeName.substring(3);
}
let basePrefix = toSpinal(typeName);
additionalPrefixes.push(basePrefix + "-");
b = b.baseType;
}
if (parent) {
let parentTypeName = parent.i.$type.name;
if (parentTypeName.indexOf("Xam") === 0) {
parentTypeName = parentTypeName.substring(3);
}
let parentPrefix = toSpinal(parentTypeName);
additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
}
initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
if (this._otherStyling) {
this._otherStyling(container, component, parent);
}
this._inStyling = false;
}
/**
* Called by the UI framework to provide a UI container for rendering this control.
* @param container * The UI container element.
*/
provideContainer(container) {
this.i.c5(container);
}
/**
* Event raised when a property (including "effective" and non-dependency property) value changes.
*/
get propertyUpdated() {
if (this._propertyUpdated == null) {
this._propertyUpdated = new EventEmitter();
this.i.propertyUpdated = delegateCombine(this.i.propertyUpdated, (o, e) => {
this._runInZone(() => {
let outerArgs = new IgxPropertyUpdatedEventArgs();
outerArgs._provideImplementation(e);
if (this.beforePropertyUpdated) {
this.beforePropertyUpdated(this, outerArgs);
}
this._propertyUpdated.emit({
sender: this,
args: outerArgs
});
});
});
}
return this._propertyUpdated;
}
_runInZone(act) {
if (this._zoneRunner != null) {
this._zoneRunner(act);
}
else {
act();
}
}
}
IgxRingSeriesBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxRingSeriesBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
IgxRingSeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxRingSeriesBaseComponent, selector: "ng-component", inputs: { dataSource: "dataSource", legend: "legend", tooltipTemplate: "tooltipTemplate", tooltipContainerTemplate: "tooltipContainerTemplate", showDefaultTooltip: "showDefaultTooltip", valueMemberPath: "valueMemberPath", labelMemberPath: "labelMemberPath", legendLabelMemberPath: "legendLabelMemberPath", labelsPosition: "labelsPosition", leaderLineVisibility: "leaderLineVisibility", leaderLineFill: "leaderLineFill", leaderLineStroke: "leaderLineStroke", leaderLineStrokeThickness: "leaderLineStrokeThickness", leaderLineOpacity: "leaderLineOpacity", leaderLineType: "leaderLineType", leaderLineMargin: "leaderLineMargin", othersCategoryThreshold: "othersCategoryThreshold", othersCategoryType: "othersCategoryType", othersCategoryText: "othersCategoryText", formatLabel: "formatLabel", formatLegendLabel: "formatLegendLabel", labelFormat: "labelFormat", labelFormatSpecifiers: "labelFormatSpecifiers", othersLabelFormat: "othersLabelFormat", othersLabelFormatSpecifiers: "othersLabelFormatSpecifiers", legendLabelFormat: "legendLabelFormat", legendLabelFormatSpecifiers: "legendLabelFormatSpecifiers", legendOthersLabelFormat: "legendOthersLabelFormat", legendOthersLabelFormatSpecifiers: "legendOthersLabelFormatSpecifiers", labelExtent: "labelExtent", startAngle: "startAngle", othersCategoryFill: "othersCategoryFill", othersCategoryStroke: "othersCategoryStroke", othersCategoryStrokeThickness: "othersCategoryStrokeThickness", othersCategoryOpacity: "othersCategoryOpacity", selectedSliceFill: "selectedSliceFill", selectedSliceStroke: "selectedSliceStroke", selectedSliceStrokeThickness: "selectedSliceStrokeThickness", selectedSliceOpacity: "selectedSliceOpacity", brushes: "brushes", outlines: "outlines", labelOuterColor: "labelOuterColor", labelInnerColor: "labelInnerColor", textStyle: "textStyle", isSurfaceInteractionDisabled: "isSurfaceInteractionDisabled", radiusFactor: "radiusFactor" }, outputs: { propertyUpdated: "propertyUpdated" }, ngImport: i0, template: ``, isInline: true });
return IgxRingSeriesBaseComponent;
})();
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxRingSeriesBaseComponent, decorators: [{
type: Component,
args: [{
template: ``,
}]
}], ctorParameters: function () { return []; }, propDecorators: { dataSource: [{
type: Input
}], legend: [{
type: Input
}], tooltipTemplate: [{
type: Input
}], tooltipContainerTemplate: [{
type: Input
}], showDefaultTooltip: [{
type: Input
}], valueMemberPath: [{
type: Input
}], labelMemberPath: [{
type: Input
}], legendLabelMemberPath: [{
type: Input
}], labelsPosition: [{
type: Input
}], leaderLineVisibility: [{
type: Input
}], leaderLineFill: [{
type: Input
}], leaderLineStroke: [{
type: Input
}], leaderLineStrokeThickness: [{
type: Input
}], leaderLineOpacity: [{
type: Input
}], leaderLineType: [{
type: Input
}], leaderLineMargin: [{
type: Input
}], othersCategoryThreshold: [{
type: Input
}], othersCategoryType: [{
type: Input
}], othersCategoryText: [{
type: Input
}], formatLabel: [{
type: Input
}], formatLegendLabel: [{
type: Input
}], labelFormat: [{
type: Input
}], labelFormatSpecifiers: [{
type: Input
}], othersLabelFormat: [{
type: Input
}], othersLabelFormatSpecifiers: [{
type: Input
}], legendLabelFormat: [{
type: Input
}], legendLabelFormatSpecifiers: [{
type: Input
}], legendOthersLabelFormat: [{
type: Input
}], legendOthersLabelFormatSpecifiers: [{
type: Input
}], labelExtent: [{
type: Input
}], startAngle: [{
type: Input
}], othersCategoryFill: [{
type: Input
}], othersCategoryStroke: [{
type: Input
}], othersCategoryStrokeThickness: [{
type: Input
}], othersCategoryOpacity: [{
type: Input
}], selectedSliceFill: [{
type: Input
}], selectedSliceStroke: [{
type: Input
}], selectedSliceStrokeThickness: [{
type: Input
}], selectedSliceOpacity: [{
type: Input
}], brushes: [{
type: Input
}], outlines: [{
type: Input
}], labelOuterColor: [{
type: Input
}], labelInnerColor: [{
type: Input
}], textStyle: [{
type: Input
}], isSurfaceInteractionDisabled: [{
type: Input
}], radiusFactor: [{
type: Input
}], propertyUpdated: [{
type: Output
}] } });