Skip to content

Commit 91792a6

Browse files
IGvaleriesChronosSF
IGvaleries
authored and
ChronosSF
committed
fix(charts): reapplying Valerie's fixes for annotations
1 parent b9d0792 commit 91792a6

File tree

7 files changed

+194
-20
lines changed
  • samples/charts/data-chart

7 files changed

+194
-20
lines changed

‎samples/charts/data-chart/data-annotation-band-layer/src/index.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,32 @@ export default class Sample extends React.Component<any, any> {
2727
private chartRef(r: IgrDataChart) {
2828
this.chart = r;
2929
this.setState({});
30-
}
30+
}
3131
private xAxisBottom: IgrCategoryXAxis
32+
private xAxisBottomRef(r: IgrCategoryXAxis){
33+
this.xAxisBottom = r;
34+
this.setState({});
35+
}
3236
private xAxis: IgrCategoryXAxis
3337
private yAxisLeft: IgrNumericYAxis
3438
private yAxisRight: IgrNumericYAxis
3539
private series1: IgrFinancialPriceSeries
3640
private tooltip: IgrDataToolTipLayer
3741
private bandLayer: IgrDataAnnotationBandLayer
42+
private bandLayerRef(r: IgrDataAnnotationBandLayer) {
43+
this.bandLayer = r;
44+
this.setState({});
45+
}
3846

3947
constructor(props: any) {
4048
super(props);
4149

4250
this.chartRef = this.chartRef.bind(this);
51+
this.bandLayerRef = this.bandLayerRef.bind(this);
52+
this.xAxisBottomRef = this.xAxisBottomRef.bind(this);
53+
}
54+
componentDidMount(): void {
55+
this.bandLayer.targetAxis = this.xAxisBottom;
4356
}
4457

4558
public render(): JSX.Element {
@@ -67,6 +80,7 @@ export default class Sample extends React.Component<any, any> {
6780
chartTitle="Data Chart with DataAnnotationBandLayer bound to data that annotates stock rapid growth">
6881
<IgrCategoryXAxis
6982
name="xAxisBottom"
83+
ref={this.xAxisBottomRef}
7084
dataSource={this.stockTesla}
7185
label="index"
7286
tickLength="0"
@@ -131,8 +145,8 @@ export default class Sample extends React.Component<any, any> {
131145
</IgrDataToolTipLayer>
132146
<IgrDataAnnotationBandLayer
133147
name="BandLayer"
148+
ref={this.bandLayerRef}
134149
dataSource={this.annotationBandData}
135-
targetAxisName="xAxisBottom"
136150
centerLabelXDisplayMode="Hidden"
137151
startLabelXDisplayMode="DataLabel"
138152
endLabelXDisplayMode="DataLabel"

‎samples/charts/data-chart/data-annotation-line-layer/src/index.tsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,43 @@ export default class Sample extends React.Component<any, any> {
2828
private chartRef(r: IgrDataChart) {
2929
this.chart = r;
3030
this.setState({});
31-
}
31+
}
3232
private xAxis: IgrCategoryXAxis
33+
private xAxisRef(r: IgrCategoryXAxis){
34+
this.xAxis = r;
35+
this.setState({});
36+
}
3337
private yAxisLeft: IgrNumericYAxis
3438
private yAxisRight: IgrNumericYAxis
39+
private yAxisRightRef(r: IgrNumericYAxis){
40+
this.yAxisRight = r;
41+
this.setState({});
42+
}
3543
private series1: IgrFinancialPriceSeries
3644
private tooltip: IgrDataToolTipLayer
3745
private lineLayer52WeekRange: IgrDataAnnotationLineLayer
46+
private lineLayer52WeekRangeRef(r: IgrDataAnnotationLineLayer){
47+
this.lineLayer52WeekRange = r;
48+
this.setState({});
49+
}
3850
private lineLayerGrowthAndDecline: IgrDataAnnotationLineLayer
39-
51+
private lineLayerGrowthAndDeclineRef(r: IgrDataAnnotationLineLayer){
52+
this.lineLayerGrowthAndDecline = r;
53+
this.setState({});
54+
}
4055
constructor(props: any) {
4156
super(props);
4257

4358
this.chartRef = this.chartRef.bind(this);
59+
this.xAxisRef = this.xAxisRef.bind(this);
60+
this.yAxisRightRef = this.yAxisRightRef.bind(this);
61+
this.lineLayer52WeekRangeRef = this.lineLayer52WeekRangeRef.bind(this);
62+
this.lineLayerGrowthAndDeclineRef = this.lineLayerGrowthAndDeclineRef.bind(this);
63+
}
64+
componentDidMount(): void {
65+
this.lineLayer52WeekRange.targetAxis = this.yAxisRight;
66+
this.lineLayerGrowthAndDecline.targetAxis = this.xAxis;
4467
}
45-
4668
public render(): JSX.Element {
4769
return (
4870
<div className="container sample">
@@ -68,6 +90,7 @@ export default class Sample extends React.Component<any, any> {
6890
chartTitle="The Data Chart demonstrates the DataAnnotationLineLayer bound to data that annotates stock growth and decline patterns.">
6991
<IgrCategoryXAxis
7092
name="xAxis"
93+
ref={this.xAxisRef}
7194
dataSource={this.stockTesla}
7295
label="date"
7396
labelLeftMargin="0"
@@ -90,6 +113,7 @@ export default class Sample extends React.Component<any, any> {
90113
</IgrNumericYAxis>
91114
<IgrNumericYAxis
92115
name="yAxisRight"
116+
ref={this.yAxisRightRef}
93117
labelLocation="OutsideRight"
94118
labelTextStyle="normal normal 12px Verdana"
95119
labelExtent="80"
@@ -121,8 +145,8 @@ export default class Sample extends React.Component<any, any> {
121145
</IgrDataToolTipLayer>
122146
<IgrDataAnnotationLineLayer
123147
name="LineLayer52WeekRange"
148+
ref={this.lineLayer52WeekRangeRef}
124149
dataSource={this.annotationLineData1}
125-
targetAxisName="yAxisRight"
126150
centerLabelXDisplayMode="Hidden"
127151
startLabelXDisplayMode="Hidden"
128152
startLabelYDisplayMode="DataValue"
@@ -144,8 +168,8 @@ export default class Sample extends React.Component<any, any> {
144168
</IgrDataAnnotationLineLayer>
145169
<IgrDataAnnotationLineLayer
146170
name="LineLayerGrowthAndDecline"
171+
ref={this.lineLayerGrowthAndDeclineRef}
147172
dataSource={this.annotationLineData2}
148-
targetAxisName="xAxis"
149173
centerLabelXDisplayMode="Hidden"
150174
startLabelXDisplayMode="Hidden"
151175
endLabelXDisplayMode="Hidden"

‎samples/charts/data-chart/data-annotation-multiple-with-overlay-text/src/index.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,28 @@ export default class Sample extends React.Component<any, any> {
2929
}
3030
private xAxis: IgrCategoryXAxis
3131
private yAxis: IgrNumericYAxis
32+
private yAxisRef(r: IgrNumericYAxis) {
33+
this.yAxis = r;
34+
this.setState({});
35+
}
3236
private series1: IgrLineSeries
3337
private valueOverlay: IgrValueOverlay
3438
private valueLayer: IgrValueLayer
3539
private annoLayer: IgrDataAnnotationSliceLayer
40+
private annoLayerRef(r: IgrDataAnnotationSliceLayer){
41+
this.annoLayer = r;
42+
this.setState({});
43+
}
3644

3745
constructor(props: any) {
3846
super(props);
3947

4048
this.chartRef = this.chartRef.bind(this);
49+
this.yAxisRef = this.yAxisRef.bind(this);
50+
this.annoLayerRef = this.annoLayerRef.bind(this);
51+
}
52+
componentDidMount(): void {
53+
this.annoLayer.targetAxis = this.yAxis;
4154
}
4255

4356
public render(): JSX.Element {
@@ -60,6 +73,7 @@ export default class Sample extends React.Component<any, any> {
6073
</IgrCategoryXAxis>
6174
<IgrNumericYAxis
6275
name="yAxis"
76+
ref={this.yAxisRef}
6377
labelExtent="60"
6478
labelHorizontalAlignment="Center"
6579
labelLeftMargin="0"
@@ -104,8 +118,8 @@ export default class Sample extends React.Component<any, any> {
104118
</IgrValueLayer>
105119
<IgrDataAnnotationSliceLayer
106120
name="AnnoLayer"
121+
ref={this.annoLayerRef}
107122
dataSource={this.annotationSliceMultiOverlayData}
108-
targetAxisName="yAxis"
109123
brush="green"
110124
annotationTextColor="white"
111125
annotationLabelMemberPath="label"

‎samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.tsx‎

Lines changed: 74 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,23 +36,85 @@ export default class Sample extends React.Component<any, any> {
3636
this.setState({});
3737
}
3838
private xAxisBottom: IgrCategoryXAxis
39+
private xAxisBottonRef(r: IgrCategoryXAxis){
40+
this.xAxisBottom = r;
41+
this.setState({});
42+
}
3943
private xAxis: IgrCategoryXAxis
44+
private xAxisRef(r: IgrCategoryXAxis){
45+
this.xAxis = r;
46+
this.setState({});
47+
}
4048
private xAxisTop: IgrCategoryXAxis
49+
private xAxisTopRef(r: IgrCategoryXAxis){
50+
this.xAxisTop = r;
51+
this.setState({});
52+
}
4153
private yAxisLeft: IgrNumericYAxis
54+
private yAxisLeftRef(r: IgrNumericYAxis){
55+
this.yAxisLeft = r;
56+
this.setState({});
57+
}
4258
private yAxisRight: IgrNumericYAxis
59+
private yAxisRightRef(r: IgrNumericYAxis){
60+
this.yAxisRight = r;
61+
this.setState({});
62+
}
4363
private series1: IgrFinancialPriceSeries
4464
private tooltip: IgrDataToolTipLayer
4565
private stripLayer: IgrDataAnnotationStripLayer
66+
private stripRef1(r: IgrDataAnnotationStripLayer){
67+
this.stripLayer = r;
68+
this.setState({});
69+
}
4670
private lineLayer52WeekRange: IgrDataAnnotationLineLayer
71+
private lineRef1(r: IgrDataAnnotationLineLayer){
72+
this.lineLayer52WeekRange = r;
73+
this.setState({});
74+
}
4775
private lineLayerGrowthAndDecline: IgrDataAnnotationLineLayer
76+
private lineRef2(r: IgrDataAnnotationLineLayer){
77+
this.lineLayerGrowthAndDecline = r;
78+
this.setState({});
79+
}
4880
private sliceLayerStockSplit: IgrDataAnnotationSliceLayer
81+
private sliceRef1(r: IgrDataAnnotationSliceLayer){
82+
this.sliceLayerStockSplit = r;
83+
this.setState({});
84+
}
4985
private sliceLayerEarningsMissAnnotations: IgrDataAnnotationSliceLayer
86+
private sliceRef2(r: IgrDataAnnotationSliceLayer){
87+
this.sliceLayerEarningsMissAnnotations = r;
88+
this.setState({});
89+
}
5090
private sliceLayerEarningsBeatAnnotations: IgrDataAnnotationSliceLayer
51-
91+
private sliceRef3(r: IgrDataAnnotationSliceLayer){
92+
this.sliceLayerEarningsBeatAnnotations = r;
93+
this.setState({});
94+
}
5295
constructor(props: any) {
5396
super(props);
5497

5598
this.chartRef = this.chartRef.bind(this);
99+
this.stripRef1 = this.stripRef1.bind(this);
100+
this.lineRef1 = this.lineRef1.bind(this);
101+
this.lineRef2 = this.lineRef2.bind(this);
102+
this.sliceRef1 = this.sliceRef1.bind(this);
103+
this.sliceRef2 = this.sliceRef2.bind(this);
104+
this.sliceRef3 = this.sliceRef3.bind(this);
105+
this.xAxisRef = this.xAxisRef.bind(this);
106+
this.xAxisBottonRef = this.xAxisBottonRef.bind(this);
107+
this.xAxisTopRef = this.xAxisTopRef.bind(this);
108+
this.yAxisLeftRef = this.yAxisLeftRef.bind(this);
109+
this.yAxisRightRef = this.yAxisRightRef.bind(this);
110+
}
111+
componentDidMount(): void {
112+
this.stripLayer.targetAxis = this.xAxisTop;
113+
this.lineLayer52WeekRange.targetAxis = this.yAxisRight;
114+
this.lineLayerGrowthAndDecline.targetAxis = this.xAxis;
115+
this.sliceLayerStockSplit.targetAxis = this.xAxisBottom;
116+
this.sliceLayerEarningsMissAnnotations.targetAxis = this.xAxisBottom;
117+
this.sliceLayerEarningsBeatAnnotations.targetAxis = this.xAxisBottom;
56118
}
57119

58120
public render(): JSX.Element {
@@ -80,6 +142,7 @@ export default class Sample extends React.Component<any, any> {
80142
chartTitle="This Data Chart has multiple Data Annotation Layers bound to data that annotates important events and patterns in stock prices.">
81143
<IgrCategoryXAxis
82144
name="xAxisBottom"
145+
ref={this.xAxisBottonRef}
83146
dataSource={this.stockTesla}
84147
label="index"
85148
tickLength="0"
@@ -95,6 +158,7 @@ export default class Sample extends React.Component<any, any> {
95158
</IgrCategoryXAxis>
96159
<IgrCategoryXAxis
97160
name="xAxis"
161+
ref={this.xAxisRef}
98162
dataSource={this.stockTesla}
99163
label="date"
100164
labelLeftMargin="0"
@@ -104,6 +168,7 @@ export default class Sample extends React.Component<any, any> {
104168
</IgrCategoryXAxis>
105169
<IgrCategoryXAxis
106170
name="xAxisTop"
171+
ref={this.xAxisTopRef}
107172
dataSource={this.stockTesla}
108173
label="date"
109174
tickLength="0"
@@ -118,6 +183,7 @@ export default class Sample extends React.Component<any, any> {
118183
</IgrCategoryXAxis>
119184
<IgrNumericYAxis
120185
name="yAxisLeft"
186+
ref={this.yAxisLeftRef}
121187
labelLocation="OutsideLeft"
122188
labelTextStyle="normal normal 12px Verdana"
123189
labelExtent="80"
@@ -131,6 +197,7 @@ export default class Sample extends React.Component<any, any> {
131197
</IgrNumericYAxis>
132198
<IgrNumericYAxis
133199
name="yAxisRight"
200+
ref={this.yAxisRightRef}
134201
labelLocation="OutsideRight"
135202
labelTextStyle="normal normal 12px Verdana"
136203
labelExtent="80"
@@ -161,9 +228,9 @@ export default class Sample extends React.Component<any, any> {
161228
layoutMode="Vertical">
162229
</IgrDataToolTipLayer>
163230
<IgrDataAnnotationStripLayer
231+
ref={this.stripRef1}
164232
name="StripLayer"
165233
dataSource={this.annotationStripData}
166-
targetAxisName="xAxisTop"
167234
centerLabelMemberPath="label"
168235
startValueMemberPath="start"
169236
endValueMemberPath="end"
@@ -177,8 +244,8 @@ export default class Sample extends React.Component<any, any> {
177244
</IgrDataAnnotationStripLayer>
178245
<IgrDataAnnotationLineLayer
179246
name="LineLayer52WeekRange"
247+
ref={this.lineRef1}
180248
dataSource={this.annotationLineData1}
181-
targetAxisName="yAxisRight"
182249
centerLabelXDisplayMode="Hidden"
183250
startLabelXDisplayMode="Hidden"
184251
startLabelYDisplayMode="DataValue"
@@ -200,8 +267,8 @@ export default class Sample extends React.Component<any, any> {
200267
</IgrDataAnnotationLineLayer>
201268
<IgrDataAnnotationLineLayer
202269
name="LineLayerGrowthAndDecline"
270+
ref={this.lineRef2}
203271
dataSource={this.annotationLineData2}
204-
targetAxisName="xAxis"
205272
centerLabelXDisplayMode="Hidden"
206273
startLabelXDisplayMode="Hidden"
207274
endLabelXDisplayMode="Hidden"
@@ -221,8 +288,8 @@ export default class Sample extends React.Component<any, any> {
221288
</IgrDataAnnotationLineLayer>
222289
<IgrDataAnnotationSliceLayer
223290
name="SliceLayerStockSplit"
291+
ref={this.sliceRef1}
224292
dataSource={this.annotationSliceStockSplitData}
225-
targetAxisName="xAxisBottom"
226293
brush="dodgerblue"
227294
annotationTextColor="white"
228295
annotationLabelMemberPath="label"
@@ -235,8 +302,8 @@ export default class Sample extends React.Component<any, any> {
235302
</IgrDataAnnotationSliceLayer>
236303
<IgrDataAnnotationSliceLayer
237304
name="SliceLayerEarningsMissAnnotations"
305+
ref={this.sliceRef2}
238306
dataSource={this.annotationSliceEarningsMissData}
239-
targetAxisName="xAxisBottom"
240307
brush="red"
241308
annotationTextColor="white"
242309
annotationLabelMemberPath="label"
@@ -249,8 +316,8 @@ export default class Sample extends React.Component<any, any> {
249316
</IgrDataAnnotationSliceLayer>
250317
<IgrDataAnnotationSliceLayer
251318
name="SliceLayerEarningsBeatAnnotations"
319+
ref={this.sliceRef3}
252320
dataSource={this.annotationSliceEarningsBeatData}
253-
targetAxisName="xAxisBottom"
254321
brush="green"
255322
annotationTextColor="white"
256323
annotationLabelMemberPath="label"

0 commit comments

Comments
 (0)