Skip to content

Commit 6d0ee4c

Browse files
HUSSAR-mtrelaHUSSAR-mtrela
authored
update user anno (#1080)
1 parent ac8e214 commit 6d0ee4c

File tree

3 files changed

+59
-85
lines changed

3 files changed

+59
-85
lines changed

‎samples/charts/data-chart/user-annotation-layer/index.html‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,48 +17,50 @@
1717
<div id="root">
1818
<div class="container sample">
1919

20-
<div class="aboveContentSplit">
21-
<div class="aboveContentLeftContainer">
22-
<igc-toolbar name="toolbar" id="toolbar" orientation="Horizontal">
23-
</igc-toolbar>
24-
</div>
20+
<div class="display: flex; flex-direction: row">
21+
<igc-toolbar name="toolbar" id="toolbar" orientation="Horizontal">
22+
</igc-toolbar>
2523
</div>
2624

2725
<div class="container fill">
26+
2827
<igc-data-chart is-horizontal-zoom-enabled="true" is-vertical-zoom-enabled="true"
2928
computed-plot-area-margin-mode="Series" name="chart" id="chart" is-user-annotations-enabled="true">
30-
<igc-category-x-axis name="xAxis" id="xAxis" label="year">
31-
</igc-category-x-axis>
32-
<igc-numeric-y-axis name="yAxis" id="yAxis" title="TWh">
33-
</igc-numeric-y-axis>
34-
<igc-line-series name="lineSeries1" id="lineSeries1" title="Electricity" value-member-path="america">
35-
</igc-line-series>
36-
<igc-line-series name="lineSeries2" id="lineSeries2" title="Electricity" value-member-path="europe">
37-
</igc-line-series>
38-
<igc-line-series name="lineSeries3" id="lineSeries3" title="Electricity" value-member-path="china">
39-
</igc-line-series>
29+
<igc-category-x-axis name="xAxis" id="xAxis" label="year"></igc-category-x-axis>
30+
<igc-numeric-y-axis name="yAxis" id="yAxis" title="TWh"></igc-numeric-y-axis>
31+
32+
<igc-line-series name="lineSeries1" id="lineSeries1" title="Electricity" value-member-path="america"></igc-line-series>
33+
<igc-line-series name="lineSeries2" id="lineSeries2" title="Electricity" value-member-path="europe"></igc-line-series>
34+
<igc-line-series name="lineSeries3" id="lineSeries3" title="Electricity" value-member-path="china"></igc-line-series>
4035
</igc-data-chart>
4136

42-
<div class="annotationPopup">
43-
<div>
44-
<label>Label:</label>
45-
<igc-input id="annotationInput" display-type="text"></igc-input>
46-
</div>
47-
48-
<div>
49-
<label>Details:</label>
50-
<igc-textarea id="annotationTextArea"></igc-textarea>
51-
</div>
52-
53-
<div>
54-
<label>Badge Color:</label>
55-
<igc-color-editor id="annotationBadgeColorEditor"></igc-color-editor>
56-
57-
<label>Main Color:</label>
58-
<igc-color-editor id="annotationMainColorEditor"></igc-color-editor>
59-
</div>
37+
<div class="container vertical options" id="annotationPopup"
38+
style="position: fixed; display: none;
39+
top: 50%;
40+
left: 50%;
41+
transform: translate(-50%, -50%);
42+
width: 13rem;
43+
height: 21rem;
44+
background-color: white;
45+
border: 1px black solid;
46+
border-radius: 0.25rem;
47+
padding-left: 0.5rem;
48+
padding-right: 0.5rem;
49+
box-shadow: 0.05rem 0.05rem 0.5rem 0.05rem gray;">
50+
51+
<label>Label:</label>
52+
<igc-input id="annotationInput" value="Enter Label" display-type="text" style="width: calc(100% - 0.4rem);" ></igc-input>
53+
54+
<label>Details:</label>
55+
<igc-textarea id="annotationDetails" value="Enter Details" style="width: calc(100% - 0.25rem); height: 4rem; resize: none;"></igc-textarea>
56+
57+
<label>Badge Color:</label>
58+
<igc-color-editor id="annotationBadgeColorEditor" value="black"></igc-color-editor>
6059

61-
<div>
60+
<label>Main Color:</label>
61+
<igc-color-editor id="annotationMainColorEditor" value="black"></igc-color-editor>
62+
63+
<div class="container horizontal" style="height: auto; justify-content: center; align-items: center; padding: 1rem; gap: 1rem;">
6264
<button id="doneButton">Done</button>
6365
<button id="cancelButton">Cancel</button>
6466
</div>

‎samples/charts/data-chart/user-annotation-layer/src/index.css‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,2 @@
11
/* shared styles are loaded from: */
22
/* https://static.infragistics.com/xplatform/css/samples */
3-
4-
.aboveContentSplit {
5-
display: flex;
6-
flex-direction: row;
7-
}
8-
.aboveContentLeftContainer {
9-
margin-left: 1.25rem;
10-
display: flex;
11-
flex-grow: 1;
12-
justify-content: flex-start;
13-
align-items: flex-end;
14-
}
15-
.aboveContentRightContainer {
16-
margin-right: 1.25rem;
17-
display: flex;
18-
flex-grow: 1;
19-
justify-content: flex-end;
20-
align-items: flex-end;
21-
}
22-
23-
.annotationPopup {
24-
position: fixed;
25-
top: 50%;
26-
left: 50%;
27-
transform: translate(-50%, -50%);
28-
width: 20%;
29-
height: 350px;
30-
background-color: white;
31-
border: 1px black solid;
32-
display: none;
33-
border-radius: 5px;
34-
padding-left: 10px;
35-
padding-right: 10px;
36-
}

‎samples/charts/data-chart/user-annotation-layer/src/index.ts‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ export class Sample {
3131
private xAxis: IgcCategoryXAxisComponent
3232
private yAxis: IgcNumericYAxisComponent
3333
private annotationInput: IgcInputComponent;
34-
private annotationTextArea: IgcTextareaComponent;
34+
private annotationDetails: IgcTextareaComponent;
3535
private annotationBadgeColorEditor: IgcColorEditorComponent;
3636
private annotationMainColorEditor: IgcColorEditorComponent;
37-
private currentAnnotationInfo: IgcUserAnnotationInformation;
37+
private annotationInfo: IgcUserAnnotationInformation;
3838

3939
private _bind: () => void;
4040

@@ -47,7 +47,7 @@ export class Sample {
4747
var lineSeries2 = document.getElementById('lineSeries2') as IgcLineSeriesComponent;
4848
var lineSeries3 = document.getElementById('lineSeries3') as IgcLineSeriesComponent;
4949
this.annotationInput = document.getElementById('annotationInput') as IgcInputComponent;
50-
this.annotationTextArea = document.getElementById('annotationTextArea') as IgcTextareaComponent;
50+
this.annotationDetails = document.getElementById('annotationDetails') as IgcTextareaComponent;
5151
this.annotationMainColorEditor = document.getElementById('annotationMainColorEditor') as IgcColorEditorComponent;
5252
this.annotationBadgeColorEditor = document.getElementById('annotationBadgeColorEditor') as IgcColorEditorComponent;
5353

@@ -58,7 +58,7 @@ export class Sample {
5858
this.chart.userAnnotationToolTipContentUpdating = this.onUserAnnotationToolTipContentUpdating.bind(this);
5959

6060
doneButton.onclick = this.onDoneBtnClick.bind(this);
61-
cancelButton.onclick = this.onCancelBtnClick.bind(this);
61+
cancelButton.onclick = this.onCancelBtnClick.bind(this);
6262

6363
this._bind = () => {
6464
toolbar.target = this.chart;
@@ -77,8 +77,8 @@ export class Sample {
7777
this._bind();
7878
}
7979

80-
public onUserAnnotationInformationRequested(s: IgcSeriesViewerComponent, e: IgcUserAnnotationInformationEventArgs){
81-
this.currentAnnotationInfo = e.annotationInfo;
80+
public onUserAnnotationInformationRequested(s: IgcSeriesViewerComponent, e: IgcUserAnnotationInformationEventArgs) {
81+
this.annotationInfo = e.annotationInfo;
8282
this.toggleDialogState(true);
8383
}
8484

@@ -88,6 +88,7 @@ export class Sample {
8888
if (e.content.children.length == 0) {
8989
var element = document.createElement("div");
9090
element.textContent = tooltipText;
91+
element.style = "color: white";
9192
e.content.appendChild(element);
9293
}
9394
else {
@@ -98,27 +99,32 @@ export class Sample {
9899

99100
public onDoneBtnClick() {
100101

101-
this.currentAnnotationInfo.label = this.annotationInput.value;
102-
this.currentAnnotationInfo.annotationData = this.annotationTextArea.value;
103-
this.currentAnnotationInfo.mainColor = this.annotationMainColorEditor.value;
104-
this.currentAnnotationInfo.badgeColor = this.annotationBadgeColorEditor.value;
102+
this.annotationInfo.label = this.annotationInput.value;
103+
this.annotationInfo.annotationData = this.annotationDetails.value;
104+
this.annotationInfo.mainColor = this.annotationMainColorEditor.value;
105+
this.annotationInfo.badgeColor = this.annotationBadgeColorEditor.value;
105106

106-
this.chart.finishAnnotationFlow(this.currentAnnotationInfo);
107+
this.chart.finishAnnotationFlow(this.annotationInfo);
107108
this.toggleDialogState(false);
108109
}
109110

110-
public onCancelBtnClick(){
111-
this.chart.cancelAnnotationFlow(this.currentAnnotationInfo.annotationId);
111+
public onCancelBtnClick() {
112+
113+
if (this.annotationInfo !== undefined && this.annotationInfo.annotationId !== undefined)
114+
{
115+
this.chart.cancelAnnotationFlow(this.annotationInfo.annotationId);
116+
}
117+
112118
this.toggleDialogState(false);
113119
}
114120

115121
public toggleDialogState(open: boolean) : void{
116-
var popup = document.getElementsByClassName('annotationPopup')[0] as HTMLDivElement;
122+
var popup = document.getElementById('annotationPopup') as HTMLDivElement;
117123

118-
if(open){
119-
popup.style.display = "block";
124+
if (open) {
125+
popup.style.display = "flex";
120126
}
121-
else{
127+
else {
122128
popup.style.display = "none";
123129
}
124130
}

0 commit comments

Comments
 (0)