igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
214 lines (211 loc) • 6.3 kB
JavaScript
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { AxisAngleLabelMode_$type } from "./AxisAngleLabelMode";
import { IgrCategoryAxisBase } from "./igr-category-axis-base";
import { CategoryAngleAxis } from "./CategoryAngleAxis";
import { ensureEnum } from "igniteui-react-core";
/**
* Represents a IgxDataChartComponent category angle axis. Useful for displaying radial categories.
*
* `CategoryAngleAxis` represents a IgxDataChartComponent category angle axis. Useful for displaying radial categories
*
* ```ts
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.state.dataSource}
* width="100%"
* height="100%" >
*
* <IgrCategoryAngleAxis name="angleAxis" label="Department" />
* <IgrNumericRadiusAxis name="radiusAxis" />
*
* </IgrDataChart>
* ```
*/
export class IgrCategoryAngleAxis extends IgrCategoryAxisBase {
createImplementation() {
return new CategoryAngleAxis();
}
/**
* @hidden
*/
get i() {
return this._implementation;
}
constructor(props) {
super(props);
this._actualIntervalChange = null;
this._actualIntervalChange_wrapped = null;
}
/**
* Checks if the axis is of angular type
*/
get isAngular() {
return this.i.c5;
}
/**
* Indicates the angle in degress that the chart's 0th angle should be offset.
*
* Indicates the angle in degress that the chart's 0th angle should be offset.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource} >
*
* <IgrCategoryAngleAxis name="angleAxis" startAngleOffset ={30} />
* <IgrNumericRadiusAxis name="radiusAxis" />
*
* </IgrDataChart>
* ```
*/
get startAngleOffset() {
return this.i.q0;
}
set startAngleOffset(v) {
this.i.q0 = +v;
}
/**
* Indicates the mode axis labels will operate in.
*/
get labelMode() {
return this.i.p7;
}
set labelMode(v) {
this.i.p7 = ensureEnum(AxisAngleLabelMode_$type, v);
}
get areGroupSizesUneven() {
return this.i.qh;
}
/**
* Gets or sets the frequency of displayed labels.
* The set value is a factor that determines which labels will be hidden. For example, an interval of 2 will display every other label.
*
* Gets or sets the frequency of displayed labels.The set value is a factor that determines which labels will be hidden.
* For example, an interval of 2 will display every other label.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource} >
*
* <IgrCategoryAngleAxis name="angleAxis" interval ={2} />
* <IgrNumericRadiusAxis name="radiusAxis" />
*
* </IgrDataChart>
* ```
*/
get interval() {
return this.i.qx;
}
set interval(v) {
this.i.qx = +v;
}
/**
* Gets the effective value for the current Interval.
*
* Gets the effective value for the current Interval.
*
* ```ts
*
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.state.dataSource}
* width="100%"
* height="100%" >
*
* <IgrCategoryAngleAxis name="angleAxis" label="Department" actualInterval={5} />
* <IgrNumericRadiusAxis name="radiusAxis" />
*
* </IgrDataChart>
* ```
*/
get actualInterval() {
return this.i.qp;
}
set actualInterval(v) {
this.i.qp = +v;
}
/**
* Gets or sets the frequency of displayed minor lines.
* The set value is a factor that determines how the minor lines will be displayed.
*
* Gets or sets the frequency of displayed minor lines. The set value is a factor that determines how the minor lines will be displayed.
*
* ```ts
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.state.dataSource}
* width="100%"
* height="100%" >
*
* <IgrCategoryAngleAxis name="angleAxis" label="Department" minorInterval={5} />
* <IgrNumericRadiusAxis name="radiusAxis" />
*
* </IgrDataChart>
* ```
*/
get minorInterval() {
return this.i.qy;
}
set minorInterval(v) {
this.i.qy = +v;
}
/**
* Gets the effective value for the current MinorInterval.
*
* Get the effective value for the current minorInterval.
*
* ```ts
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.state.dataSource}
* width="100%"
* height="100%" >
*
* <IgrCategoryAngleAxis name="angleAxis" label="Department" actualMinorInterval={5} />
* <IgrNumericRadiusAxis name="radiusAxis" />
*
* </IgrDataChart>
* ```
*/
get actualMinorInterval() {
return this.i.qq;
}
set actualMinorInterval(v) {
this.i.qq = +v;
}
/**
* Gets the scaled angle in radians from the raw axis value.
* @param unscaledAngle * The raw axis value.
*/
getScaledAngle(unscaledAngle) {
let iv = this.i.getScaledAngle(unscaledAngle);
return (iv);
}
/**
* Gets the raw axis value from the scaled angle in radians.
*/
getUnscaledAngle(scaledAngle) {
let iv = this.i.getUnscaledAngle(scaledAngle);
return (iv);
}
get actualIntervalChange() {
return this._actualIntervalChange;
}
set actualIntervalChange(ev) {
if (this._actualIntervalChange_wrapped !== null) {
this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._actualIntervalChange_wrapped);
this._actualIntervalChange_wrapped = null;
this._actualIntervalChange = null;
}
this._actualIntervalChange = ev;
this._actualIntervalChange_wrapped = (o, e) => {
let ext = this.actualInterval;
if (this.beforeActualIntervalChange) {
this.beforeActualIntervalChange(this, ext);
}
if (this._actualIntervalChange) {
this._actualIntervalChange(this, ext);
}
};
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._actualIntervalChange_wrapped);
}
}