igniteui-webcomponents-charts
Version:
Ignite UI Web Components charting components for building rich data visualizations using TypeScript APIs.
186 lines (185 loc) • 7.89 kB
JavaScript
import { TimeAxisLabellingMode_$type } from "./TimeAxisLabellingMode";
import { IgcTimeAxisLabelFormatCollection } from "./igc-time-axis-label-format-collection";
import { IgcCategoryXAxisComponent } from "./igc-category-x-axis-component";
import { OrdinalTimeXAxis } from "./OrdinalTimeXAxis";
import { getAllPropertyNames, toSpinal, ensureEnum, enumToString } from "igniteui-webcomponents-core";
import { RegisterElementHelper } from "igniteui-webcomponents-core";
import { TimeAxisLabelFormatCollection as TimeAxisLabelFormatCollection_internal } from "./TimeAxisLabelFormatCollection";
import { TimeAxisLabelFormat } from "./TimeAxisLabelFormat";
import { SyncableObservableCollection$1 } from "igniteui-webcomponents-core";
let IgcOrdinalTimeXAxisComponent = /*@__PURE__*/ (() => {
class IgcOrdinalTimeXAxisComponent extends IgcCategoryXAxisComponent {
createImplementation() {
return new OrdinalTimeXAxis();
}
/**
* @hidden
*/
get i() {
return this._implementation;
}
constructor() {
super();
this._labelFormats = null;
}
connectedCallback() {
if (super["connectedCallback"]) {
super["connectedCallback"]();
}
if (this.i.connectedCallback) {
this.i.connectedCallback();
}
if (!this._attached) {
this._attached = true;
this._flushQueuedAttributes();
}
}
disconnectedCallback() {
if (super["disconnectedCallback"]) {
super["disconnectedCallback"]();
}
if (this.i.disconnectedCallback) {
this.i.disconnectedCallback();
}
if (this._attached) {
this._attached = false;
}
}
static get observedAttributes() {
if (IgcOrdinalTimeXAxisComponent._observedAttributesIgcOrdinalTimeXAxisComponent == null) {
let names = getAllPropertyNames(IgcOrdinalTimeXAxisComponent);
for (let i = 0; i < names.length; i++) {
names[i] = toSpinal(names[i]);
}
IgcOrdinalTimeXAxisComponent._observedAttributesIgcOrdinalTimeXAxisComponent = names;
}
return IgcOrdinalTimeXAxisComponent._observedAttributesIgcOrdinalTimeXAxisComponent;
}
static register() {
if (!IgcOrdinalTimeXAxisComponent._isElementRegistered) {
IgcOrdinalTimeXAxisComponent._isElementRegistered = true;
RegisterElementHelper.registerElement(IgcOrdinalTimeXAxisComponent.htmlTagName, IgcOrdinalTimeXAxisComponent);
}
}
/**
* Gets or sets the DateTime mapping property for the axis.
*/
get dateTimeMemberPath() {
return this.i.dateTimeMemberPath;
}
set dateTimeMemberPath(v) {
this.i.dateTimeMemberPath = v;
}
/**
* Gets or sets the labelling mode to use when the automatic label formats are applied.
*/
get labellingMode() {
return this.i.sn;
}
set labellingMode(v) {
this.i.sn = ensureEnum(TimeAxisLabellingMode_$type, v);
this._a("labellingMode", enumToString(TimeAxisLabellingMode_$type, this.i.sn));
}
/**
* Gets or sets if the current axis is of ordinal axis type
*/
get isOrdinal() {
return this.i.dr;
}
/**
* A list of axis label formats to apply, which are selected according to the visible axis range.
* The label format selected will be the one with the largest range smaller than the visible range of the axis.
*
* You can use the `LabelFormats` for adjusting the labels depending on the range of the time shown by the chart.
*
* ```ts
* let labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "hh:mm:ss";
* labelFormat.range = 1000;
* this.xAxis.labelFormats.add(labelFormat);
* labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "hh:mm";
* labelFormat.range = 60 * 1000;
* this.xAxis.labelFormats.add(labelFormat);
* labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "MMM-dd-yy";
* labelFormat.range = 24 * 60 * 60 * 1000;
* this.xAxis.labelFormats.add(labelFormat);
* labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "MMM yy";
* labelFormat.range = 365.24 * 24 * 60 * 60 * 1000;
* this.xAxis.labelFormats.add(labelFormat);
* labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "yyyy";
* labelFormat.range = 5 * 365 * 24 * 60 * 60 * 1000;
* this.xAxis.labelFormats.add(labelFormat);
* ```
*/
get labelFormats() {
if (this._labelFormats === null) {
let coll = new IgcTimeAxisLabelFormatCollection();
let innerColl = this.i.sl;
if (!innerColl) {
innerColl = new TimeAxisLabelFormatCollection_internal();
}
this._labelFormats = coll._fromInner(innerColl);
}
return this._labelFormats;
}
set labelFormats(v) {
if (this._labelFormats !== null) {
this._labelFormats._setSyncTarget(null);
this._labelFormats = null;
}
let coll = new IgcTimeAxisLabelFormatCollection();
this._labelFormats = coll._fromOuter(v);
let syncColl = new SyncableObservableCollection$1(TimeAxisLabelFormat.$type);
let innerColl = this.i.sl;
if (!innerColl) {
innerColl = new TimeAxisLabelFormatCollection_internal();
}
syncColl._inner = innerColl;
syncColl.clear();
this._labelFormats._setSyncTarget(syncColl);
}
/**
* Sets the minimum DateTime value to be displayed on this axis.
* This property can be used to constrain the items displayed on the axis, within the range of DateTimes in the ItemsSource. It will ignore any setting outside the actual range of data.
*/
get minimumValue() {
return this.i.minimumValue;
}
set minimumValue(v) {
this.i.minimumValue = v;
}
/**
* Sets the maximum DateTime value to be displayed on this axis.
* This property can be used to constrain the items displayed on the axis, within the range of DateTimes in the ItemsSource. It will ignore any setting outside the actual range of data.
*/
get maximumValue() {
return this.i.maximumValue;
}
set maximumValue(v) {
this.i.maximumValue = v;
}
findByName(name) {
var baseResult = super.findByName(name);
if (baseResult) {
return baseResult;
}
if (this.labelFormats != null && this.labelFormats.findByName && this.labelFormats.findByName(name)) {
return this.labelFormats.findByName(name);
}
return null;
}
getValueLabel(value) {
let iv = this.i.i8(value);
return (iv);
}
}
IgcOrdinalTimeXAxisComponent._observedAttributesIgcOrdinalTimeXAxisComponent = null;
IgcOrdinalTimeXAxisComponent.htmlTagName = "igc-ordinal-time-x-axis";
IgcOrdinalTimeXAxisComponent._isElementRegistered = false;
return IgcOrdinalTimeXAxisComponent;
})();
export { IgcOrdinalTimeXAxisComponent };