UNPKG

igniteui-react-charts

Version:

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

226 lines (225 loc) 7.48 kB
/* THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE AGREEMENT ("AGREEMENT") LOCATED HERE: https://www.infragistics.com/legal/license/igultimate-la https://www.infragistics.com/legal/license/igultimate-eula GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE: you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company. */ import * as React from 'react'; import { TimeAxisLabelFormat } from "./TimeAxisLabelFormat"; import { TypeRegistrar } from "igniteui-react-core"; import { NamePatcher, getModifiedProps, isValidProp, toSpinal, initializePropertiesFromCss } from "igniteui-react-core"; export class IgrTimeAxisLabelFormat extends React.Component { get i() { return this._implementation; } onImplementationCreated() { } constructor(props) { super(props); this._renderer = null; this.__p = null; this._hasUserValues = new Set(); this._stylingContainer = null; this._stylingParent = null; this._inStyling = false; 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; } createImplementation() { return new TimeAxisLabelFormat(); } _provideRenderer(renderer) { this._renderer = renderer; } static _createFromInternal(internal) { if (!internal) { return null; } if (!internal.$type) { return null; } let name = internal.$type.name; let externalName = "Igr" + name; if (!TypeRegistrar.isRegistered(externalName)) { return null; } return TypeRegistrar.create(externalName); } /** * The visible axis range at which to apply this label format. * * The `Range` property provide the visible axis range at which to apply this label format. * * ```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); * ``` */ get range() { return this.i.o; } set range(v) { this.i.o = +v; } /** * The DateTime format string to apply. * Some common DateTime format strings are: yyyy, MM/dd/yy, and hh:mm:ss. * * The `Format` property provide the DateTime format string to apply. * * ```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); * ``` * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * <IgrTimeXAxis name="xAxis" label="Date" * dateTimeMemberPath="Date" /> * </IgrDataChart> * ``` */ get format() { return this.i.e; } set format(v) { this.i.e = v; } /** * The DateTime format string to apply, if the year is repeated from the prior date. * Some common DateTime format strings are: yyyy, MM/dd/yy, and hh:mm:ss. */ get repeatedYearFormat() { return this.i.l; } set repeatedYearFormat(v) { this.i.l = v; } /** * The DateTime format string to apply, if the month is repeated from the prior date. * Some common DateTime format strings are: yyyy, MM/dd/yy, and hh:mm:ss. */ get repeatedMonthFormat() { return this.i.j; } set repeatedMonthFormat(v) { this.i.j = v; } /** * The DateTime format string to apply, if the day is repeated from the prior date. * Some common DateTime format strings are: yyyy, MM/dd/yy, and hh:mm:ss. */ get repeatedDayFormat() { return this.i.h; } set repeatedDayFormat(v) { this.i.h = v; } findByName(name) { if (this.findEphemera) { if (name && name.indexOf("@@e:") == 0) { return this.findEphemera(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("TimeAxisLabelFormat"); 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; } }