Skip to content

Commit 098bced

Browse files
michi42michi42
committed
improve 2d separation display
1 parent ab21909 commit 098bced

File tree

2 files changed

+74
-33
lines changed

2 files changed

+74
-33
lines changed

‎src/components/BeamPosition2dChart.js‎

Lines changed: 61 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export default class BeamPosition2dChart extends GenericChart {
1616
this.render();
1717

1818
this._unit = "sigma";
19+
this._mode = "sep";
1920

2021
this._data = null;
2122
this.sigmaInMM = 1; // NOTE: this needs to be changed later
@@ -28,21 +29,24 @@ export default class BeamPosition2dChart extends GenericChart {
2829
*/
2930
set unit(newUnits) {
3031
this._unit = newUnits;
31-
32-
this.chart.xAxis[0].setTitle({
33-
text: `Sep Beam position [${newUnits.replace("sigma", sigmaChar)}]`
34-
});
35-
36-
this.chart.yAxis[0].setTitle({
37-
text: `Xing Beam position [${newUnits.replace("sigma", sigmaChar)}]`
38-
});
39-
4032
this.refresh();
4133
}
4234
get unit() {
4335
return this._unit;
4436
}
4537

38+
/**
39+
* @param {string} newMode
40+
*/
41+
set mode(newMode) {
42+
this._mode = newMode;
43+
this.refresh();
44+
}
45+
get mode() {
46+
return this._mode;
47+
}
48+
49+
4650
set data(data) {
4751
this._data = data;
4852
this.refresh();
@@ -53,7 +57,15 @@ export default class BeamPosition2dChart extends GenericChart {
5357
}
5458

5559
refresh() {
56-
if (this.data == null) return;
60+
if (this.data == null || this.chart == null) return;
61+
62+
this.chart.xAxis[0].setTitle({
63+
text: `Sep Beam ${this.mode} [${this.unit.replace("sigma", sigmaChar)}]`
64+
});
65+
66+
this.chart.yAxis[0].setTitle({
67+
text: `Xing Beam ${this.mode} [${this.unit.replace("sigma", sigmaChar)}]`
68+
});
5769

5870
this.updateData(this.data);
5971
}
@@ -72,17 +84,44 @@ export default class BeamPosition2dChart extends GenericChart {
7284

7385
/**
7486
* @private
75-
* @param {any} newData
87+
* @param {any} data
7688
*/
77-
updateData(newData) {
78-
const crossing = newData.beamCrossing;
79-
const separation = newData.beamSeparation;
80-
if (crossing != null && separation != null) {
81-
this.chart.series[0].setData(this.toXYPoints(separation[0], crossing[0]).slice(0, -1));
82-
this.chart.series[1].setData(this.toXYPoints(separation[1], crossing[1]).slice(0, -1));
89+
updateData(data) {
90+
while (this.chart.series.length) {
91+
this.chart.series[0].remove();
92+
}
93+
94+
let positionBeam1 = [];
95+
let positionBeam2 = [];
96+
if (data.beamCrossing != null && data.beamSeparation != null) {
97+
positionBeam1 = this.toXYPoints(data.beamSeparation[0], data.beamCrossing[0]).slice(0, -1);
98+
positionBeam2 = this.toXYPoints(data.beamSeparation[1], data.beamCrossing[1]).slice(0, -1);
99+
}
100+
101+
if (this.mode == 'pos') {
102+
this.chart.addSeries({
103+
type: "scatter",
104+
name: "Beam 1",
105+
data: positionBeam1,
106+
color: "hsl(240, 70%, 70%)"
107+
});
108+
this.chart.addSeries({
109+
type: "scatter",
110+
name: "Beam 2",
111+
data: positionBeam2,
112+
color: "hsl(0, 70%, 70%)"
113+
});
83114
} else {
84-
this.chart.series[0].setData([]);
85-
this.chart.series[1].setData([]);
115+
const separation = positionBeam1.map((_, i) => [
116+
positionBeam1[i][0] - positionBeam2[i][0],
117+
positionBeam1[i][1] - positionBeam2[i][1],
118+
]);
119+
this.chart.addSeries({
120+
type: "scatter",
121+
name: "Nominal Separation",
122+
data: separation,
123+
color: "hsl(0, 0, 0)"
124+
});
86125
}
87126
}
88127

@@ -110,7 +149,7 @@ export default class BeamPosition2dChart extends GenericChart {
110149

111150
tooltip: {
112151
headerFormat: '<b>{series.name}</b><br/>',
113-
pointFormat: 'Separation: {point.x:.2f}<br/>Crossing: {point.y:.2f}',
152+
pointFormat: 'Separation Plane: {point.x:.2f}<br/>Crossing Plane: {point.y:.2f}',
114153
shared: true,
115154
// NOTE: disable this while https://github.com/highcharts/highcharts/issues/11688 is still a bug
116155
//outside: true // this is needed to make the tooltip not go under the axis title
@@ -130,18 +169,8 @@ export default class BeamPosition2dChart extends GenericChart {
130169
}
131170
},
132171

133-
series: [{
134-
type: "scatter",
135-
name: "Beam 1",
136-
data: [],
137-
color: "hsl(240, 70%, 70%)"
138-
}, {
139-
type: "scatter",
140-
name: "Beam 2",
141-
data: [],
142-
color: "hsl(0, 70%, 70%)"
143-
}
144-
]}));
172+
series: []
173+
}));
145174

146175
window.chart = this.chart;
147176
}

‎src/components/ChartsComponent.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,19 @@ export default class ChartsComponent extends MyHyperHTMLElement {
123123
<hr>
124124
<beam-position-chart properties=${chartProperties} data=${this.data.beamSeparation} id="separation-chart" title="Separation"></beam-position-chart>
125125
<beam-position-chart properties=${chartProperties} data=${this.data.beamCrossing} id="crossing-chart" title="Crossing"></beam-position-chart>
126-
<beam-position-2d-chart properties=${chartProperties} data=${{"beamCrossing": this.data.beamCrossing, "beamSeparation": this.data.beamSeparation}} id="sep-2d-chart" title="2D Beam Position"></beam-position-2d-chart>
126+
<hr>
127+
<div id="sepPosRadio">
128+
<span class="radio-description">Display:</span>
129+
<div class="option">
130+
<input type="radio" name="mode" id="beamPosition" value="pos" />
131+
<label for="beamPosition">Position</label>
132+
</div>
133+
<div class="option">
134+
<input checked type="radio" name="mode" id="beamSeparation" value="sep" />
135+
<label for="beamSeparation">Separation</label>
136+
</div>
137+
</div>
138+
<beam-position-2d-chart properties=${chartProperties} mode=${this.mode} data=${{"beamCrossing": this.data.beamCrossing, "beamSeparation": this.data.beamSeparation}} id="sep-2d-chart" title="2D Beam Position"></beam-position-2d-chart>
127139
<hr>
128140
<div id="logLinearRadio">
129141
<span class="radio-description">Scale:</span>

0 commit comments

Comments
 (0)