Commit 48e98e36d8589bfb10bbe26fe5a5d20ecf94316b

Authored by Menouard AZIB
1 parent 1f9f9178

I have created a component to compute to allow a user to choose a function to be…

… applied on the data's parameter
js/app/models/PlotObjects/PlotObjectConfig.js
... ... @@ -544,50 +544,6 @@ Ext.define('amdaPlotObj.PlotObjectConfig', {
544 544 dimNullValue: "-1"
545 545 }
546 546 },
547   - plotFunctionItems: {
548   - name: "Appliquer une Transformation",
549   - type: {
550   - name: "type",
551   - field: "Function Type",
552   - values: {
553   - fft: "FFT",
554   - sum: "SUM"
555   - }
556   - },
557   - scale: {
558   - name: "scale",
559   - field: "Scale Abscisse",
560   - values: {
561   - log: "Log",
562   - linear: "Linear"
563   - }
564   - },
565   - abscisse: {
566   - name: "abscisse",
567   - field: "Abscisse",
568   - values: {
569   - frequency: "Frequency",
570   - period: "Period"
571   - }
572   - },
573   - scale_ordonnee: {
574   - name: "scale_ordonnee",
575   - field: "Scale Ordonnée"
576   - },
577   - nbEchantillons: {
578   - name: 'N',
579   - field: "Nb d'échantillons (N)"
580   - },
581   - fe: {
582   - name: 'FE',
583   - field: "Fréq d’échantillonnage (Fe)"
584   - },
585   - parameter: {
586   - id: "id",
587   - MinSampling: 'MinSampling'
588   - }
589   - },
590   -
591 547 getParamConfig: function (paramId, onParamConfigLoaded) {
592 548 AmdaAction.getParamPlotInit({ "paramId": paramId }, function (result, e) {
593 549 onParamConfigLoaded(result.success, result.data);
... ...
js/app/views/PlotComponents/PlotZoomPlug.js
... ... @@ -18,7 +18,7 @@ Ext.define('amdaPlotComp.PlotZoomPlug', {
18 18 extend: 'Ext.util.Observable',
19 19 alias: 'plugin.plotZoomPlugin',
20 20 requires: [
21   - 'amdaPlotComp.plotFunction.ParamField'],
  21 + 'amdaPlotComp.plotFunction.ParamField', 'amdaPlotComp.plotFunction.FunctionType'],
22 22  
23 23 id: 'plot-zoom-plug',
24 24  
... ... @@ -32,8 +32,14 @@ Ext.define('amdaPlotComp.PlotZoomPlug', {
32 32 panelId: -1,
33 33  
34 34 linkedTTCatNode: null,
35   -
  35 + /**
  36 + * Un composant de 'PlotFunction' qui permet d'afficher le min samplig de chaque paramètre et le nombre de points théoriques entre un start time et stop time
  37 + */
36 38 plotFunctionParamField: null,
  39 + /**
  40 + * Un composant de 'PlotFunction' qui permet à l'utilisateur de séléctionner le type de fonction à appliquer : FFT, SUM, ...
  41 + */
  42 + plotFunctionType: null,
37 43  
38 44 constructor: function (config) {
39 45 Ext.apply(this, config);
... ... @@ -46,6 +52,7 @@ Ext.define('amdaPlotComp.PlotZoomPlug', {
46 52  
47 53 init: function (cmp) {
48 54 this.hostCmp = cmp;
  55 + this.plotFunctionType = new amdaPlotComp.plotFunction.FunctionType({});
49 56 },
50 57  
51 58 /**
... ... @@ -99,22 +106,6 @@ Ext.define('amdaPlotComp.PlotZoomPlug', {
99 106 },
100 107  
101 108 /**
102   - * Update nb Echantillons parameter
103   - */
104   - updateNbEchantillons: function () {
105   - const start = this.form.getForm().findField('zoom-min-time').getValue();
106   - const stop = this.form.getForm().findField('zoom-max-time').getValue();
107   - const firstParam = this.listParams[0];
108   - const minSampling = firstParam[amdaPlotObj.PlotObjectConfig.plotFunctionItems.parameter.MinSampling];
109   - const nbEchantillons = (stop - start) / minSampling;
110   - const ui_item = this.form.getForm().findField(amdaPlotObj.PlotObjectConfig.plotFunctionItems.nbEchantillons.name);
111   - if (ui_item !== null && ui_item !== undefined) {
112   - this.form.getForm().findField(amdaPlotObj.PlotObjectConfig.plotFunctionItems.nbEchantillons.name)
113   - .setValue(nbEchantillons);
114   - }
115   - },
116   -
117   - /**
118 109 * add Interval to Time table
119 110 **/
120 111 insertInterval: function () {
... ... @@ -139,6 +130,7 @@ Ext.define('amdaPlotComp.PlotZoomPlug', {
139 130 */
140 131 show: function (interactiveId, zoomType, panelId, isPlotFunction_ = false) {
141 132 this.isPlotFunction = isPlotFunction_;
  133 +
142 134 if (!this.win) {
143 135 this.win = new Ext.Window({
144 136 id: 'plot-zoom-win-' + this.hostCmp.ownerCt.getId(), // Plot window ID
... ... @@ -195,7 +187,7 @@ Ext.define('amdaPlotComp.PlotZoomPlug', {
195 187 switch (zoomType) {
196 188 case 'timeAxis':
197 189 if (this.isPlotFunction) {
198   - const title = amdaPlotObj.PlotObjectConfig.plotFunctionItems.name;
  190 + const title = "Appliquer une Transformation";
199 191 this.win.setTitle(title + '-Panel Id: ' + panelId);
200 192 } else {
201 193 this.win.setTitle('Zoom on time axis & Interval selection - Panel Id : ' + panelId);
... ... @@ -429,10 +421,6 @@ Ext.define('amdaPlotComp.PlotZoomPlug', {
429 421 ]
430 422 };
431 423  
432   - //Ici on rajoute les composants associés à la fonctionnalité 'PlotFunction'
433   - const plotFunctionComponents = this.createPlotFunctionComponents();
434   - const minSamplingCompo = this.createNbEchantillonsLayout();
435   -
436 424 this.form = new Ext.form.FormPanel({
437 425 frame: true,
438 426 width: 255,
... ... @@ -446,8 +434,9 @@ Ext.define('amdaPlotComp.PlotZoomPlug', {
446 434 },
447 435 items: [
448 436 intervalFieldSet,
449   - me.isPlotFunction ? plotFunctionComponents : insertTTFieldSet,
450   - me.isPlotFunction ? minSamplingCompo : null,
  437 + //Ici on rajoute les composants associés à la fonctionnalité 'PlotFunction'
  438 + me.isPlotFunction ? this.plotFunctionType : insertTTFieldSet,
  439 + me.isPlotFunction ? this.plotFunctionParamField : null,
451 440 ],
452 441 fbar: [
453 442 {
... ... @@ -496,222 +485,9 @@ Ext.define('amdaPlotComp.PlotZoomPlug', {
496 485 }
497 486 ]
498 487 });
499   - return this.form;
500   - },
501   -
502   - /**
503   - * Create the componenets of the 'plotFunction' feature
504   - * @returns a field set which contains componenets of 'plotFunction' feature
505   - */
506   - createPlotFunctionComponents: function () {
507   - const key_ = "key";
508   - const name_ = "name";
509   - //Combo to choose a type of fucntion to be applied
510   - const data_function_type = [];
511   - let item_type = {};
512   - item_type[key_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.type.values.fft;
513   - item_type[name_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.type.values.fft;
514   - data_function_type.push(item_type);
515   - item_type = {};
516   - item_type[key_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.type.values.sum;
517   - item_type[name_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.type.values.sum;
518   - data_function_type.push(item_type);
519   -
520   - const function_type = Ext.create('Ext.data.Store', {
521   - fields: [key_, name_],
522   - data: data_function_type
523   - });
524 488  
525   - //Combo to choose type of scaling
526   - const data_ = [];
527   - const item_log = {};
528   - item_log[key_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale.values.log;
529   - item_log[name_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale.values.log;
530   - data_.push(item_log);
531   -
532   - const item_linear = {};
533   - item_linear[key_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale.values.linear;
534   - item_linear[name_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale.values.linear;
535   - data_.push(item_linear);
536   -
537   - const scale = Ext.create('Ext.data.Store', {
538   - fields: [key_, name_],
539   - data: data_
540   - });
541   -
542   - //Combo to choose x type data of FFT
543   - const data__ = [];
544   - const item_frequency = {};
545   - item_frequency[key_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.abscisse.values.frequency;
546   - item_frequency[name_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.abscisse.values.frequency;
547   - data__.push(item_frequency);
548   -
549   - const item_period = {};
550   - item_period[key_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.abscisse.values.period;
551   - item_period[name_] = amdaPlotObj.PlotObjectConfig.plotFunctionItems.abscisse.values.period;
552   - data__.push(item_period);
553   -
554   - const abscisse = Ext.create('Ext.data.Store', {
555   - fields: [key_, name_],
556   - data: data__
557   - });
558   -
559   - var me = this;
560   -
561   - const parameterFieldSet = {
562   - xtype: 'fieldset',
563   -
564   - title: 'Parameter Selection',
565   - name: 'parameter-selection-fieldset',
566   - collapsible: false,
567   -
568   - layout: {
569   - type: 'vbox',
570   - pack: 'start',
571   - align: 'stretch',
572   - },
573   - items: [
574   - {
575   - xtype: 'combo',
576   - fieldLabel: amdaPlotObj.PlotObjectConfig.plotFunctionItems.type.field,
577   - store: function_type,
578   - queryMode: 'local',
579   - displayField: name_,
580   - valueField: key_,
581   - editable: false,
582   - value: amdaPlotObj.PlotObjectConfig.plotFunctionItems.type.values.sum,
583   - name: amdaPlotObj.PlotObjectConfig.plotFunctionItems.type.name,
584   - listeners: {
585   - change: function (combo, value) {
586   - if (value === amdaPlotObj.PlotObjectConfig.plotFunctionItems.type.values.sum) {
587   - me.form.getForm().findField(amdaPlotObj.PlotObjectConfig.plotFunctionItems.abscisse.name).setVisible(false);
588   - me.form.getForm().findField(amdaPlotObj.PlotObjectConfig.plotFunctionItems.nbEchantillons.name).setVisible(false);
589   - me.form.getForm().findField(amdaPlotObj.PlotObjectConfig.plotFunctionItems.fe.name).setVisible(false);
590   - }
591   - else {
592   - me.form.getForm().findField(amdaPlotObj.PlotObjectConfig.plotFunctionItems.abscisse.name).setVisible(true);
593   - me.form.getForm().findField(amdaPlotObj.PlotObjectConfig.plotFunctionItems.nbEchantillons.name).setVisible(true);
594   - me.form.getForm().findField(amdaPlotObj.PlotObjectConfig.plotFunctionItems.fe.name).setVisible(true);
595   - }
596   - }
597   - }
598   - },
599   - {
600   - xtype: 'combo',
601   - fieldLabel: amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale.field,
602   - store: scale,
603   - queryMode: 'local',
604   - displayField: name_,
605   - valueField: key_,
606   - editable: false,
607   - value: amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale.values.linear,
608   - name: amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale.name
609   - },
610   - {
611   - xtype: 'combo',
612   - fieldLabel: amdaPlotObj.PlotObjectConfig.plotFunctionItems.abscisse.field,
613   - store: abscisse,
614   - queryMode: 'local',
615   - displayField: name_,
616   - valueField: key_,
617   - editable: false,
618   - hidden: true,
619   - value: amdaPlotObj.PlotObjectConfig.plotFunctionItems.abscisse.values.frequency,
620   - name: amdaPlotObj.PlotObjectConfig.plotFunctionItems.abscisse.name
621   - },
622   - {
623   - xtype: 'combo',
624   - fieldLabel: amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale_ordonnee.field,
625   - store: scale,
626   - queryMode: 'local',
627   - displayField: name_,
628   - valueField: key_,
629   - editable: false,
630   - value: amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale.values.linear,
631   - name: amdaPlotObj.PlotObjectConfig.plotFunctionItems.scale_ordonnee.name
632   - },
633   - {
634   - xtype: 'numberfield',
635   - name: amdaPlotObj.PlotObjectConfig.plotFunctionItems.nbEchantillons.name,
636   - labelWidth: 140,
637   - width: 50,
638   - minValue: 1,
639   - hidden: true,
640   - fieldLabel: amdaPlotObj.PlotObjectConfig.plotFunctionItems.nbEchantillons.field
641   - },
642   - {
643   - xtype: 'numberfield',
644   - name: amdaPlotObj.PlotObjectConfig.plotFunctionItems.fe.name,
645   - labelWidth: 160,
646   - width: 30,
647   - minValue: 0,
648   - disabled: true,
649   - hidden: true,
650   - fieldLabel: amdaPlotObj.PlotObjectConfig.plotFunctionItems.fe.field
651   - }
652   - ]
653   - };
654   -
655   - return parameterFieldSet;
  489 + this.plotFunctionType.setParent(this.form.getForm());
  490 + return this.form;
656 491 },
657 492  
658   - createNbEchantillonsLayout: function () {
659   - const l = [];
660   - for (p in this.listParams) {
661   - const param = this.listParams[p];
662   - const compo = {
663   - xtype: 'numberfield',
664   - name: amdaPlotObj.PlotObjectConfig.plotFunctionItems.fe.name + "_" + param.id,
665   - labelWidth: 160,
666   - width: 30,
667   - minValue: 0,
668   - disabled: true,
669   - hidden: false,
670   - fieldLabel: param.id
671   - };
672   - l.push(compo);
673   - }
674   -
675   - var form = Ext.create('Ext.tab.Panel', {
676   - layout: 'fit',
677   - plain: true,
678   - bodyStyle: 'background: none',
679   - items: [
680   - {
681   - title: 'Home',
682   - xtype: 'textfield',
683   - name: 'name',
684   - label: 'Name'
685   - },
686   - {
687   - xtype: 'textfield',
688   - name: 'email',
689   - label: 'Email'
690   - },
691   - {
692   - xtype: 'textfield',
693   - name: 'password',
694   - label: 'Password'
695   - }
696   - ]
697   - });
698   -
699   - l.push(form);
700   - console.log(l);
701   - const fieldSet = {
702   - xtype: 'fieldset',
703   -
704   - title: 'Min Sampling & Nb Echantillons',
705   - name: 'min-sampling',
706   - collapsible: true,
707   - layout: {
708   - type: 'vbox',
709   - align: 'stretch',
710   - },
711   - items: l
712   - }
713   -
714   -
715   - return this.plotFunctionParamField;
716   - }
717 493 });
... ...
js/app/views/PlotComponents/plotFunction/FunctionType.js 0 → 100644
... ... @@ -0,0 +1,190 @@
  1 +/**
  2 + * Un composant de 'PlotFunction' qui permet à l'utilisateur de séléctionner le type de fonction à appliquer : FFT, SUM, ...
  3 + */
  4 +Ext.define('amdaPlotComp.plotFunction.FunctionType', {
  5 + extend: 'Ext.form.Panel',
  6 + parent: null,
  7 + plotFunctionItems: {
  8 + type: {
  9 + name: "type",
  10 + field: "Function Type",
  11 + values: {
  12 + fft: "FFT",
  13 + sum: "SUM"
  14 + }
  15 + },
  16 + scale: {
  17 + name: "scale_abscisse",
  18 + field: "Scale Abscisse",
  19 + values: {
  20 + log: "Log",
  21 + linear: "Linear"
  22 + }
  23 + },
  24 + abscisse: {
  25 + name: "abscisse",
  26 + field: "Abscisse",
  27 + values: {
  28 + frequency: "Frequency",
  29 + period: "Period"
  30 + }
  31 + },
  32 + scale_ordonnee: {
  33 + name: "scale_ordonnee",
  34 + field: "Scale Ordonnée"
  35 + }
  36 + },
  37 +
  38 + initComponent: function () {
  39 + const key_ = "key";
  40 + const name_ = "name";
  41 +
  42 + //Combobox to choose the type of fucntion to be applied
  43 + const data_function_type = [];
  44 + let item_type = {};
  45 + item_type[key_] = this.plotFunctionItems.type.values.fft;
  46 + item_type[name_] = this.plotFunctionItems.type.values.fft;
  47 + data_function_type.push(item_type);
  48 + item_type = {};
  49 + item_type[key_] = this.plotFunctionItems.type.values.sum;
  50 + item_type[name_] = this.plotFunctionItems.type.values.sum;
  51 + data_function_type.push(item_type);
  52 +
  53 + const function_type = Ext.create('Ext.data.Store', {
  54 + fields: [key_, name_],
  55 + data: data_function_type
  56 + });
  57 +
  58 + //Combo to choose type of scaling
  59 + const data_ = [];
  60 + const item_log = {};
  61 + item_log[key_] = this.plotFunctionItems.scale.values.log;
  62 + item_log[name_] = this.plotFunctionItems.scale.values.log;
  63 + data_.push(item_log);
  64 +
  65 + const item_linear = {};
  66 + item_linear[key_] = this.plotFunctionItems.scale.values.linear;
  67 + item_linear[name_] = this.plotFunctionItems.scale.values.linear;
  68 + data_.push(item_linear);
  69 +
  70 + const scale = Ext.create('Ext.data.Store', {
  71 + fields: [key_, name_],
  72 + data: data_
  73 + });
  74 +
  75 + //Combo to choose x type data of FFT
  76 + const data__ = [];
  77 + const item_frequency = {};
  78 + item_frequency[key_] = this.plotFunctionItems.abscisse.values.frequency;
  79 + item_frequency[name_] = this.plotFunctionItems.abscisse.values.frequency;
  80 + data__.push(item_frequency);
  81 +
  82 + const item_period = {};
  83 + item_period[key_] = this.plotFunctionItems.abscisse.values.period;
  84 + item_period[name_] = this.plotFunctionItems.abscisse.values.period;
  85 + data__.push(item_period);
  86 +
  87 + const abscisse = Ext.create('Ext.data.Store', {
  88 + fields: [key_, name_],
  89 + data: data__
  90 + });
  91 +
  92 + const me = this;
  93 +
  94 + const tabParams = Ext.create('Ext.form.FieldSet', {
  95 + collapsible: false,
  96 + layout: {
  97 + type: 'vbox',
  98 + pack: 'start',
  99 + align: 'stretch',
  100 + },
  101 + bodyStyle: 'background: none',
  102 + items: [
  103 + {
  104 + xtype: 'combo',
  105 + fieldLabel: this.plotFunctionItems.type.field,
  106 + store: function_type,
  107 + queryMode: 'local',
  108 + displayField: name_,
  109 + valueField: key_,
  110 + editable: false,
  111 + value: this.plotFunctionItems.type.values.sum,
  112 + name: this.plotFunctionItems.type.name,
  113 + listeners: {
  114 + change: function (combo, value) {
  115 + if (value === me.plotFunctionItems.type.values.sum) {
  116 + me.parent.findField(me.plotFunctionItems.abscisse.name).setVisible(false);
  117 + }
  118 + else {
  119 + me.parent.findField(me.plotFunctionItems.abscisse.name).setVisible(true);
  120 + }
  121 + }
  122 + }
  123 + },
  124 + {
  125 + xtype: 'combo',
  126 + fieldLabel: this.plotFunctionItems.scale.field,
  127 + store: scale,
  128 + queryMode: 'local',
  129 + displayField: name_,
  130 + valueField: key_,
  131 + editable: false,
  132 + value: this.plotFunctionItems.scale.values.linear,
  133 + name: this.plotFunctionItems.scale.name
  134 + },
  135 + {
  136 + xtype: 'combo',
  137 + fieldLabel: this.plotFunctionItems.abscisse.field,
  138 + store: abscisse,
  139 + queryMode: 'local',
  140 + displayField: name_,
  141 + valueField: key_,
  142 + editable: false,
  143 + hidden: true,
  144 + value: this.plotFunctionItems.abscisse.values.frequency,
  145 + name: this.plotFunctionItems.abscisse.name
  146 + },
  147 + {
  148 + xtype: 'combo',
  149 + fieldLabel: this.plotFunctionItems.scale_ordonnee.field,
  150 + store: scale,
  151 + queryMode: 'local',
  152 + displayField: name_,
  153 + valueField: key_,
  154 + editable: false,
  155 + value: this.plotFunctionItems.scale.values.linear,
  156 + name: this.plotFunctionItems.scale_ordonnee.name
  157 + }
  158 + ]
  159 + });
  160 +
  161 + const config =
  162 + {
  163 + title: 'Function Type',
  164 + bodyStyle: { background: '#dfe8f6' },
  165 + items: [tabParams]
  166 + };
  167 +
  168 + Ext.apply(this, config);
  169 + this.callParent(arguments);
  170 + },
  171 +
  172 + setParent: function (parent_) {
  173 + this.parent = parent_;
  174 + },
  175 +
  176 + getValues: function () {
  177 + const value_scale = this.parent.findField(this.plotFunctionItems.scale.name).getValue();
  178 + const value_abscisse = this.parent.findField(this.plotFunctionItems.abscisse.name).getValue();
  179 + const value_scale_ordonnee = this.parent.findField(this.plotFunctionItems.scale_ordonnee.name).getValue();
  180 + const type_function = this.parent.findField(this.plotFunctionItems.type.name).getValue();
  181 +
  182 + let out = {};
  183 + out[this.plotFunctionItems.type.name] = type_function;
  184 + out[this.plotFunctionItems.abscisse.name] = value_abscisse;
  185 + out[this.plotFunctionItems.scale.name] = value_scale;
  186 + out[this.plotFunctionItems.scale_ordonnee.name] = value_scale_ordonnee;
  187 +
  188 + return out;
  189 + }
  190 +});
0 191 \ No newline at end of file
... ...
js/app/views/PlotComponents/plotFunction/ParamField.js
  1 +/**
  2 + * Un composant de 'PlotFunction' qui permet d'afficher le min samplig de chaque paramètre et le nombre de points théoriques entre un start time et stop time
  3 + */
1 4 Ext.define('amdaPlotComp.plotFunction.ParamField', {
2 5 extend: 'Ext.form.Panel',
3 6 label_number_field: "NUMBERFIELD",
... ...