Skip to content

Changes from igniteui-xplat-examples-output+PRs_2025.6.17.1 #873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: vnext
Choose a base branch
from
Open

Changes from igniteui-xplat-examples-output+PRs_2025.6.17.1 #873

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 2 additions & 16 deletions samples/charts/data-chart/data-annotation-band-layer/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,32 +27,19 @@ export default class Sample extends React.Component<any, any> {
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxisBottom: IgrCategoryXAxis
private xAxisBottomRef(r: IgrCategoryXAxis){
this.xAxisBottom = r;
this.setState({});
}
private xAxisBottom: IgrCategoryXAxis
private xAxis: IgrCategoryXAxis
private yAxisLeft: IgrNumericYAxis
private yAxisRight: IgrNumericYAxis
private series1: IgrFinancialPriceSeries
private tooltip: IgrDataToolTipLayer
private bandLayer: IgrDataAnnotationBandLayer
private bandLayerRef(r: IgrDataAnnotationBandLayer) {
this.bandLayer = r;
this.setState({});
}

constructor(props: any) {
super(props);

this.chartRef = this.chartRef.bind(this);
this.bandLayerRef = this.bandLayerRef.bind(this);
this.xAxisBottomRef = this.xAxisBottomRef.bind(this);
}
componentDidMount(): void {
this.bandLayer.targetAxis = this.xAxisBottom;
}

public render(): JSX.Element {
Expand Down Expand Up @@ -80,7 +67,6 @@ export default class Sample extends React.Component<any, any> {
chartTitle="Data Chart with DataAnnotationBandLayer bound to data that annotates stock rapid growth">
<IgrCategoryXAxis
name="xAxisBottom"
ref={this.xAxisBottomRef}
dataSource={this.stockTesla}
label="index"
tickLength="0"
Expand Down Expand Up @@ -145,8 +131,8 @@ export default class Sample extends React.Component<any, any> {
</IgrDataToolTipLayer>
<IgrDataAnnotationBandLayer
name="BandLayer"
ref={this.bandLayerRef}
dataSource={this.annotationBandData}
targetAxis={this.xAxisBottom}
centerLabelXDisplayMode="Hidden"
startLabelXDisplayMode="DataLabel"
endLabelXDisplayMode="DataLabel"
Expand Down
34 changes: 5 additions & 29 deletions samples/charts/data-chart/data-annotation-line-layer/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,43 +28,21 @@ export default class Sample extends React.Component<any, any> {
private chartRef(r: IgrDataChart) {
this.chart = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private xAxisRef(r: IgrCategoryXAxis){
this.xAxis = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private yAxisLeft: IgrNumericYAxis
private yAxisRight: IgrNumericYAxis
private yAxisRightRef(r: IgrNumericYAxis){
this.yAxisRight = r;
this.setState({});
}
private series1: IgrFinancialPriceSeries
private tooltip: IgrDataToolTipLayer
private lineLayer52WeekRange: IgrDataAnnotationLineLayer
private lineLayer52WeekRangeRef(r: IgrDataAnnotationLineLayer){
this.lineLayer52WeekRange = r;
this.setState({});
}
private lineLayerGrowthAndDecline: IgrDataAnnotationLineLayer
private lineLayerGrowthAndDeclineRef(r: IgrDataAnnotationLineLayer){
this.lineLayerGrowthAndDecline = r;
this.setState({});
}

constructor(props: any) {
super(props);

this.chartRef = this.chartRef.bind(this);
this.xAxisRef = this.xAxisRef.bind(this);
this.yAxisRightRef = this.yAxisRightRef.bind(this);
this.lineLayer52WeekRangeRef = this.lineLayer52WeekRangeRef.bind(this);
this.lineLayerGrowthAndDeclineRef = this.lineLayerGrowthAndDeclineRef.bind(this);
}
componentDidMount(): void {
this.lineLayer52WeekRange.targetAxis = this.yAxisRight;
this.lineLayerGrowthAndDecline.targetAxis = this.xAxis;
}

public render(): JSX.Element {
return (
<div className="container sample">
Expand All @@ -90,7 +68,6 @@ export default class Sample extends React.Component<any, any> {
chartTitle="The Data Chart demonstrates the DataAnnotationLineLayer bound to data that annotates stock growth and decline patterns.">
<IgrCategoryXAxis
name="xAxis"
ref={this.xAxisRef}
dataSource={this.stockTesla}
label="date"
labelLeftMargin="0"
Expand All @@ -113,7 +90,6 @@ export default class Sample extends React.Component<any, any> {
</IgrNumericYAxis>
<IgrNumericYAxis
name="yAxisRight"
ref={this.yAxisRightRef}
labelLocation="OutsideRight"
labelTextStyle="normal normal 12px Verdana"
labelExtent="80"
Expand Down Expand Up @@ -145,8 +121,8 @@ export default class Sample extends React.Component<any, any> {
</IgrDataToolTipLayer>
<IgrDataAnnotationLineLayer
name="LineLayer52WeekRange"
ref={this.lineLayer52WeekRangeRef}
dataSource={this.annotationLineData1}
targetAxis={this.yAxisRight}
centerLabelXDisplayMode="Hidden"
startLabelXDisplayMode="Hidden"
startLabelYDisplayMode="DataValue"
Expand All @@ -168,8 +144,8 @@ export default class Sample extends React.Component<any, any> {
</IgrDataAnnotationLineLayer>
<IgrDataAnnotationLineLayer
name="LineLayerGrowthAndDecline"
ref={this.lineLayerGrowthAndDeclineRef}
dataSource={this.annotationLineData2}
targetAxis={this.xAxis}
centerLabelXDisplayMode="Hidden"
startLabelXDisplayMode="Hidden"
endLabelXDisplayMode="Hidden"
Expand Down
16 changes: 1 addition & 15 deletions samples/charts/data-chart/data-annotation-multiple-with-overlay-text/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,28 +29,15 @@ export default class Sample extends React.Component<any, any> {
}
private xAxis: IgrCategoryXAxis
private yAxis: IgrNumericYAxis
private yAxisRef(r: IgrNumericYAxis) {
this.yAxis = r;
this.setState({});
}
private series1: IgrLineSeries
private valueOverlay: IgrValueOverlay
private valueLayer: IgrValueLayer
private annoLayer: IgrDataAnnotationSliceLayer
private annoLayerRef(r: IgrDataAnnotationSliceLayer){
this.annoLayer = r;
this.setState({});
}

constructor(props: any) {
super(props);

this.chartRef = this.chartRef.bind(this);
this.yAxisRef = this.yAxisRef.bind(this);
this.annoLayerRef = this.annoLayerRef.bind(this);
}
componentDidMount(): void {
this.annoLayer.targetAxis = this.yAxis;
}

public render(): JSX.Element {
Expand All @@ -73,7 +60,6 @@ export default class Sample extends React.Component<any, any> {
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxis"
ref={this.yAxisRef}
labelExtent="60"
labelHorizontalAlignment="Center"
labelLeftMargin="0"
Expand Down Expand Up @@ -118,8 +104,8 @@ export default class Sample extends React.Component<any, any> {
</IgrValueLayer>
<IgrDataAnnotationSliceLayer
name="AnnoLayer"
ref={this.annoLayerRef}
dataSource={this.annotationSliceMultiOverlayData}
targetAxis={this.yAxis}
brush="green"
annotationTextColor="white"
annotationLabelMemberPath="label"
Expand Down
81 changes: 7 additions & 74 deletions samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,85 +36,23 @@ export default class Sample extends React.Component<any, any> {
this.setState({});
}
private xAxisBottom: IgrCategoryXAxis
private xAxisBottonRef(r: IgrCategoryXAxis){
this.xAxisBottom = r;
this.setState({});
}
private xAxis: IgrCategoryXAxis
private xAxisRef(r: IgrCategoryXAxis){
this.xAxis = r;
this.setState({});
}
private xAxisTop: IgrCategoryXAxis
private xAxisTopRef(r: IgrCategoryXAxis){
this.xAxisTop = r;
this.setState({});
}
private yAxisLeft: IgrNumericYAxis
private yAxisLeftRef(r: IgrNumericYAxis){
this.yAxisLeft = r;
this.setState({});
}
private yAxisRight: IgrNumericYAxis
private yAxisRightRef(r: IgrNumericYAxis){
this.yAxisRight = r;
this.setState({});
}
private series1: IgrFinancialPriceSeries
private tooltip: IgrDataToolTipLayer
private stripLayer: IgrDataAnnotationStripLayer
private stripRef1(r: IgrDataAnnotationStripLayer){
this.stripLayer = r;
this.setState({});
}
private lineLayer52WeekRange: IgrDataAnnotationLineLayer
private lineRef1(r: IgrDataAnnotationLineLayer){
this.lineLayer52WeekRange = r;
this.setState({});
}
private lineLayerGrowthAndDecline: IgrDataAnnotationLineLayer
private lineRef2(r: IgrDataAnnotationLineLayer){
this.lineLayerGrowthAndDecline = r;
this.setState({});
}
private sliceLayerStockSplit: IgrDataAnnotationSliceLayer
private sliceRef1(r: IgrDataAnnotationSliceLayer){
this.sliceLayerStockSplit = r;
this.setState({});
}
private sliceLayerEarningsMissAnnotations: IgrDataAnnotationSliceLayer
private sliceRef2(r: IgrDataAnnotationSliceLayer){
this.sliceLayerEarningsMissAnnotations = r;
this.setState({});
}
private sliceLayerEarningsBeatAnnotations: IgrDataAnnotationSliceLayer
private sliceRef3(r: IgrDataAnnotationSliceLayer){
this.sliceLayerEarningsBeatAnnotations = r;
this.setState({});
}

constructor(props: any) {
super(props);

this.chartRef = this.chartRef.bind(this);
this.stripRef1 = this.stripRef1.bind(this);
this.lineRef1 = this.lineRef1.bind(this);
this.lineRef2 = this.lineRef2.bind(this);
this.sliceRef1 = this.sliceRef1.bind(this);
this.sliceRef2 = this.sliceRef2.bind(this);
this.sliceRef3 = this.sliceRef3.bind(this);
this.xAxisRef = this.xAxisRef.bind(this);
this.xAxisBottonRef = this.xAxisBottonRef.bind(this);
this.xAxisTopRef = this.xAxisTopRef.bind(this);
this.yAxisLeftRef = this.yAxisLeftRef.bind(this);
this.yAxisRightRef = this.yAxisRightRef.bind(this);
}
componentDidMount(): void {
this.stripLayer.targetAxis = this.xAxisTop;
this.lineLayer52WeekRange.targetAxis = this.yAxisRight;
this.lineLayerGrowthAndDecline.targetAxis = this.xAxis;
this.sliceLayerStockSplit.targetAxis = this.xAxisBottom;
this.sliceLayerEarningsMissAnnotations.targetAxis = this.xAxisBottom;
this.sliceLayerEarningsBeatAnnotations.targetAxis = this.xAxisBottom;
}

public render(): JSX.Element {
Expand Down Expand Up @@ -142,7 +80,6 @@ export default class Sample extends React.Component<any, any> {
chartTitle="This Data Chart has multiple Data Annotation Layers bound to data that annotates important events and patterns in stock prices.">
<IgrCategoryXAxis
name="xAxisBottom"
ref={this.xAxisBottonRef}
dataSource={this.stockTesla}
label="index"
tickLength="0"
Expand All @@ -158,7 +95,6 @@ export default class Sample extends React.Component<any, any> {
</IgrCategoryXAxis>
<IgrCategoryXAxis
name="xAxis"
ref={this.xAxisRef}
dataSource={this.stockTesla}
label="date"
labelLeftMargin="0"
Expand All @@ -168,7 +104,6 @@ export default class Sample extends React.Component<any, any> {
</IgrCategoryXAxis>
<IgrCategoryXAxis
name="xAxisTop"
ref={this.xAxisTopRef}
dataSource={this.stockTesla}
label="date"
tickLength="0"
Expand All @@ -183,7 +118,6 @@ export default class Sample extends React.Component<any, any> {
</IgrCategoryXAxis>
<IgrNumericYAxis
name="yAxisLeft"
ref={this.yAxisLeftRef}
labelLocation="OutsideLeft"
labelTextStyle="normal normal 12px Verdana"
labelExtent="80"
Expand All @@ -197,7 +131,6 @@ export default class Sample extends React.Component<any, any> {
</IgrNumericYAxis>
<IgrNumericYAxis
name="yAxisRight"
ref={this.yAxisRightRef}
labelLocation="OutsideRight"
labelTextStyle="normal normal 12px Verdana"
labelExtent="80"
Expand Down Expand Up @@ -228,9 +161,9 @@ export default class Sample extends React.Component<any, any> {
layoutMode="Vertical">
</IgrDataToolTipLayer>
<IgrDataAnnotationStripLayer
ref={this.stripRef1}
name="StripLayer"
dataSource={this.annotationStripData}
targetAxis={this.xAxisTop}
centerLabelMemberPath="label"
startValueMemberPath="start"
endValueMemberPath="end"
Expand All @@ -244,8 +177,8 @@ export default class Sample extends React.Component<any, any> {
</IgrDataAnnotationStripLayer>
<IgrDataAnnotationLineLayer
name="LineLayer52WeekRange"
ref={this.lineRef1}
dataSource={this.annotationLineData1}
targetAxis={this.yAxisRight}
centerLabelXDisplayMode="Hidden"
startLabelXDisplayMode="Hidden"
startLabelYDisplayMode="DataValue"
Expand All @@ -267,8 +200,8 @@ export default class Sample extends React.Component<any, any> {
</IgrDataAnnotationLineLayer>
<IgrDataAnnotationLineLayer
name="LineLayerGrowthAndDecline"
ref={this.lineRef2}
dataSource={this.annotationLineData2}
targetAxis={this.xAxis}
centerLabelXDisplayMode="Hidden"
startLabelXDisplayMode="Hidden"
endLabelXDisplayMode="Hidden"
Expand All @@ -288,8 +221,8 @@ export default class Sample extends React.Component<any, any> {
</IgrDataAnnotationLineLayer>
<IgrDataAnnotationSliceLayer
name="SliceLayerStockSplit"
ref={this.sliceRef1}
dataSource={this.annotationSliceStockSplitData}
targetAxis={this.xAxisBottom}
brush="dodgerblue"
annotationTextColor="white"
annotationLabelMemberPath="label"
Expand All @@ -302,8 +235,8 @@ export default class Sample extends React.Component<any, any> {
</IgrDataAnnotationSliceLayer>
<IgrDataAnnotationSliceLayer
name="SliceLayerEarningsMissAnnotations"
ref={this.sliceRef2}
dataSource={this.annotationSliceEarningsMissData}
targetAxis={this.xAxisBottom}
brush="red"
annotationTextColor="white"
annotationLabelMemberPath="label"
Expand All @@ -316,8 +249,8 @@ export default class Sample extends React.Component<any, any> {
</IgrDataAnnotationSliceLayer>
<IgrDataAnnotationSliceLayer
name="SliceLayerEarningsBeatAnnotations"
ref={this.sliceRef3}
dataSource={this.annotationSliceEarningsBeatData}
targetAxis={this.xAxisBottom}
brush="green"
annotationTextColor="white"
annotationLabelMemberPath="label"
Expand Down
Loading