Histogram.js
3.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
Ext.define('amdaPlotComp.plotFunction.Histogram', {
extend: 'amdaPlotComp.plotFunction.BaseComponent', // This class extends from amdaPlotComp.plotFunction.BaseComponent
title: "Histogram Arguments", // The title of this component
// Define the IDs for the function, bins, and xMin and xMax fields
functionId: 'histo1d-function',
binsId: 'histo1d-xbinnumber',
xMinId: "histo1d-xmin",
xMaxId: 'histo1d-xmax',
/**
* Initializes the component.
* It creates a combo box for selecting the density type and number fields for entering the xMin, xMax, and number of bins.
*/
initComponent: function () {
const self = this;
// Define combo box store
const comboStore = Ext.create('Ext.data.Store', {
fields: ['label', 'value'],
data: [
{ value: 'density', label: 'Density' },
{ value: 'normdensity', label: 'Normalised Density' }
]
});
// Create combo box for selecting the density type
const densityTypeCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Density Type',
name: self.functionId,
store: comboStore,
queryMode: 'local',
displayField: 'label',
valueField: 'value',
editable: false,
value: 'density'
});
// Add items to the component
Ext.apply(self, {
items: [
{
xtype: 'numberfield',
fieldLabel: 'X Min',
name: self.xMinId,
allowDecimals: true,
hideTrigger: true,
keyNavEnabled: false,
},
{
xtype: 'numberfield',
fieldLabel: 'X Max',
name: self.xMaxId,
allowDecimals: true,
hideTrigger: true,
keyNavEnabled: false,
},
{
xtype: 'numberfield',
fieldLabel: 'Number of Bins',
name: self.binsId,
minValue: 1,
value: 100,
allowDecimals: false,
keyNavEnabled: false,
},
densityTypeCombo
]
});
// Call the parent class's initComponent method
self.callParent(arguments);
},
/**
* Retrieves the selected values from the combo box and number fields.
* Returns an object with properties set to these values.
*/
getValues: function () {
const densityTypeCombo = this.query('[name=' + this.functionId + ']')[0];
const densityTypeValue = densityTypeCombo.getValue();
const numBinsField = this.query('[name=' + this.binsId + ']')[0];
const numBinsValue = numBinsField.getValue();
const xMinField = this.query('[name=' + this.xMinId + ']')[0];
const xMinValue = xMinField.getValue();
const xMaxField = this.query('[name=' + this.xMaxId + ']')[0];
const xMaxValue = xMaxField.getValue();
let out = {};
out[this.functionId] = densityTypeValue;
out[this.binsId] = numBinsValue;
out[this.xMinId] = xMinValue;
out[this.xMaxId] = xMaxValue;
return out;
}
});