Commit 44d72a11 authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Prepara windrose con filtro temporal, añade info

parent 3a527b42

public/javascript/app/designs/chart/main/MultiWindRoseChartWithToolbar.js

+159 −60
Original line number Diff line number Diff line 
define([

	"app/designs/base/_Main"

	, "app/designs/chart/Controller"

	, "app/designs/chart/layout/TopContent"

	, "app/redmicConfig"

	'app/designs/base/_Main'

	, 'app/designs/chart/Controller'

	, 'app/designs/chart/layout/TopContent'

	, 'app/redmicConfig'

	, 'd3/d3.min'

	, "dojo/_base/declare"

	, "dojo/_base/lang"

	, "redmic/modules/base/_Filter"

	, "redmic/modules/base/_Store"

	, "redmic/modules/chart/layer/ChartLayer/WindRoseChartImpl"

	, "redmic/modules/chart/layer/ChartLayer/_ObtainableValue"

	, "redmic/modules/chart/Toolbar/SliderSelectorImpl"

	, "redmic/modules/chart/Toolbar/GridManagementImpl"

	, 'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'moment/moment.min'

	, 'redmic/modules/base/_Filter'

	, 'redmic/modules/base/_Store'

	, 'redmic/modules/chart/layer/ChartLayer/WindRoseChartImpl'

	, 'redmic/modules/chart/layer/ChartLayer/_ObtainableValue'

	, 'redmic/modules/chart/Toolbar/DataFilterImpl'

	, 'redmic/modules/chart/Toolbar/GridManagementImpl'

	, 'redmic/modules/chart/Toolbar/SliderSelectorImpl'

], function (

	_Main

	, Controller
@@ -20,30 +22,34 @@ define([ 
	, d3

	, declare

	, lang

	, moment

	, _Filter

	, _Store

	, WindRoseChartImpl

	, _ObtainableValue

	, SliderSelectorImpl

	, DataFilterImpl

	, GridManagementImpl

	, SliderSelectorImpl

){

	return declare([TopContentLayout, Controller, _Main, _Filter, _Store], {

		//	summary:

		//		Gráfica de multi rosa de los vientos con barra de herramientas.

		//		Gráfica de rosa de los vientos multinivel con barra de herramientas.



		constructor: function(args) {



			this.config = {

				ownChannel: "multiPieChartWithToolbar",

				ownChannel: 'multiPieChartWithToolbar',

				events: {

					ADD_LAYER: "addLayer",

					REMOVE_LAYER: "removeLayer"

					ADD_LAYER: 'addLayer',

					REMOVE_LAYER: 'removeLayer'

				},

				actions: {

				},



				target: redmicConfig.services.timeSeriesWindRose,



				_unit: '%',



				_domainSplit: 4,

				_minDomainSplit: 1,

				_maxDomainSplit: 10,
@@ -102,19 +108,26 @@ define([ 
			}, this.gridManagementConfig || {}]);



			this.gridManagement = new GridManagementImpl(this.gridManagementConfig);



			this.dataFilter = new DataFilterImpl({

				parentChannel: this.getChannel()

			});

		},



		_defineMainSubscriptions: function() {



			this.subscriptionsConfig.push({

				channel : this._directionSplitSelector.getChannel("TOOL_ACTUATED"),

				callback: "_subDirectionSplitSelectorToolActuated"

				channel : this._directionSplitSelector.getChannel('TOOL_ACTUATED'),

				callback: '_subDirectionSplitSelectorToolActuated'

			},{

				channel : this._domainSplitSelector.getChannel('TOOL_ACTUATED'),

				callback: '_subDomainSplitSelectorToolActuated'

			},{

				channel : this._domainSplitSelector.getChannel("TOOL_ACTUATED"),

				callback: "_subDomainSplitSelectorToolActuated"

				channel : this.dataFilter.getChannel('TOOL_ACTUATED'),

				callback: '_subDataFilterToolActuated'

			},{

				channel : this.chartsContainer.getChannel("SHOWN"),

				callback: "_subChartsContainerShown"

				channel : this.chartsContainer.getChannel('SHOWN'),

				callback: '_subChartsContainerShown'

			});

		},
@@ -122,10 +135,10 @@ define([ 


			this.publicationsConfig.push({

				event: 'ADD_LAYER',

				channel: this.chartsContainer.getChannel("ADD_LAYER")

				channel: this.chartsContainer.getChannel('ADD_LAYER')

			},{

				event: 'REMOVE_LAYER',

				channel: this.chartsContainer.getChannel("REMOVE_LAYER")

				channel: this.chartsContainer.getChannel('REMOVE_LAYER')

			});

		},
@@ -133,21 +146,27 @@ define([ 


			this.inherited(arguments);



			this._publish(this._directionSplitSelector.getChannel("SHOW"), {

			this._publish(this._directionSplitSelector.getChannel('SHOW'), {

				node: this.buttonsContainerChartsTopNode

			});



			this._publish(this._domainSplitSelector.getChannel("SHOW"), {

			this._publish(this._domainSplitSelector.getChannel('SHOW'), {

				node: this.buttonsContainerChartsTopNode

			});



			this._publish(this.gridManagement.getChannel("SHOW"), {

			this._publish(this.gridManagement.getChannel('SHOW'), {

				node: this.buttonsContainerChartsTopNode

			});



			this._publish(this.chartsContainer.getChannel("SET_PROPS"), {

			this._publish(this.dataFilter.getChannel('SHOW'), {

				node: this.buttonsContainerChartsTopNode

			});



			this._publish(this.chartsContainer.getChannel('SET_PROPS'), {

				buttonsContainer: this.buttonsContainerChartsTopNode

			});



			setTimeout(lang.hitch(this, this._dataAvailable, {data: {}}), 1000);

		},



		_getDirectionLabels: function(start, end) {
@@ -198,9 +217,76 @@ define([ 
				chartsData = data.data,

				limits = data.limits;



			chartsData = [{

					value: 6.5

				},{

					value: 1

				},{

					value: 3

				},{

					value: 5.1

				},{

					value: 2.2

				},{

					value: 4.3

				},{

					value: 2.1

				},{

					value: 5.715

				},{

					value: 2

				},{

					value: 1

				},{

					value: 3

				},{

					value: 5.1

				},{

					value: 2.2

				},{

					value: 4.3

				},{

					value: 2.1

				},{

					value: 5.715

				},{

					value: 2

				},{

					value: 1

				},{

					value: 3

				},{

					value: 5.1

				},{

					value: 2.2

				},{

					value: 4.3

				},{

					value: 2.1

				},{

					value: 5.715

				},{

					value: 2

				},{

					value: 1

				},{

					value: 3

				},{

					value: 5.1

				},{

					value: 2.2

				},{

					value: 4.3

				},{

					value: 2.1

				},{

					value: 5.715

				}];

			limits = [{"min":8.666,"max":10.525}];



			this._chartsData = {

				data: chartsData,

				parameterName: "%"

				parameterName: this._unit

			};



			this._limits = limits;
@@ -208,51 +294,65 @@ define([ 
			this._updateCharts();

		},



		_subDirectionSplitSelectorToolActuated: function(req) {

		_subDirectionSplitSelectorToolActuated: function(res) {



			var value = req.value;

			var value = res.value;



			this._directionSplitPow = value;



			this._addToQueryChartsData({

				"dateLimits": {

					"startDate":"2012-01-18T20:34:00.000Z",

					"endDate":"2017-08-12T07:33:00.000Z"

			this._updateQuery();

		},

				"terms": {

					"dataDefinition": {

						"speed": 111,

						"direction": 112



		_subDomainSplitSelectorToolActuated: function(res) {



			var value = res.value;



			this._domainSplit = value;



			this._updateQuery();

		},

					"numSectors": Math.pow(2, this._directionSplitPow)

				}

			});



		_subDataFilterToolActuated: function(res) {



			var value = res.value;



			this._startDate = value.startDate;

			this._endDate = value.endDate;



			this._updateQuery();

		},



		_subDomainSplitSelectorToolActuated: function(req) {

		_updateQuery: function() {



			var value = req.value;

			if (this.speedDataDefinitionId === undefined || this.directionDataDefinitionId === undefined) {

				return;

			}



			this._domainSplit = value;

			if (!this._startDate || !this._endDate) {

				var currentDate = moment();

				this._endDate = currentDate.toISOString();

				this._startDate = currentDate.subtract(1, 'days').toISOString();

			}



			this._addToQueryChartsData({

				"dateLimits": {

					"startDate":"2012-01-18T20:34:00.000Z",

					"endDate":"2017-08-12T07:33:00.000Z"

				dateLimits: {

					startDate: this._startDate,

					endDate: this._endDate

				},

				"terms": {

					"dataDefinition": {

						"speed": 111,

						"direction": 112

				terms: {

					dataDefinition: {

						speed: this.speedDataDefinitionId,

						direction: this.directionDataDefinitionId

					},

					"numSplits": this._domainSplit

					numSectors: Math.pow(2, this._directionSplitPow),

					numSplits: this._domainSplit

				}

			});

		},



		_subChartsContainerShown: function() {



			this._emitEvt("REFRESH");

			this._emitEvt('REFRESH');

		},



		_updateCharts: function() {
@@ -266,7 +366,7 @@ define([ 


		_getColorScale: function() {



			var colorReferences = ["#0000ff", "#00ffff", "#00ff00", "#ffff00", "#ff0000"],

			var colorReferences = ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000'],

				maxDomainLevelIndex = this._domainSplit - 1,

				scaleDomain, scaleRange;
@@ -308,12 +408,11 @@ define([ 
		_getLayerLabel: function(i) {



			var param = this.i18n.frequency,

				unit = '<unit>',	// TODO habrá que cogerlo del datadefinition

				limits = this._limits[i],

				min = limits.min,

				max = limits.max;



			return param + ' (' + min + ' - ' + max + ' ' + unit + ')';

			return param + ' (' + min + ' - ' + max + ')';

		},



		_createChartLayer: function(layerConfig) {
@@ -335,7 +434,7 @@ define([ 


		_addDataToChart: function(i) {



			this._publish(this._chartInstances[i].getChannel("ADD_DATA"), this._chartsData);

			this._publish(this._chartInstances[i].getChannel('ADD_DATA'), this._chartsData);

		}

	});

});

public/javascript/app/nls/es/translation.js

+7 −0
Original line number Diff line number Diff line
@@ -1158,6 +1158,13 @@ define({ 
	, "webcams": "Webcams"

	, "noDataLoaderExistActivityCategories": "No hay carga de datos disponible para esta actividad."



	, "goToActivity": "Ir a actividad"

	, "goToPlatform": "Ir a plataforma"



	, "windrose": "Rosa de los vientos"

	, "sliderSelector": "Selector desplazable"

	, "dataFilter": "Filtro de datos"



	// Para capas que no se pueden cambiar las keys

	, "descript_1": "Descripción"

	, "descriptio": "Descripción"

public/javascript/app/nls/translation.js

+7 −0
Original line number Diff line number Diff line
@@ -1163,6 +1163,13 @@ define({ 
		, "webcams": "Webcams"

		, "noDataLoaderExistActivityCategories": "There is no data load available for this activity."



		, "goToActivity": "Go to activity"

		, "goToPlatform": "Go to platform"



		, "windrose": "Wind rose"

		, "sliderSelector": "Slider selector"

		, "dataFilter": "Data filter"



		//Para capas que no se pueden cambiar las keys

		, "descript_1": "Description"

		, "descriptio": "Description"

public/javascript/app/viewers/views/RealTimeDashboardView.js

+132 −9
Original line number Diff line number Diff line 
define([

	"app/designs/base/_Main"

	, "app/designs/chart/main/MultiWindRoseChartWithToolbar"

	, "app/designs/details/Controller"

	, "app/designs/details/Layout"

	, "app/designs/details/_AddBasicTitle"

	, "app/redmicConfig"

	, "dojo/_base/declare"

	, "dojo/_base/lang"

	, "redmic/modules/chart/ChartsContainer/_AngularAxisWithGridDrawing"

	, "redmic/modules/chart/ChartsContainer/_InfoOnMouseOver"

	, "redmic/modules/chart/ChartsContainer/_LegendBar"

	, "redmic/modules/chart/ChartsContainer/_RadialAxisWithGridDrawing"

	, "redmic/modules/layout/templateDisplayer/TemplateDisplayer"

	, "templates/RealTimeInfo"

	, "templates/SurveyStationDashboard"

], function(

	_Main

	, MultiWindRoseChartWithToolbar

	, Controller

	, Layout

	, _AddBasicTitle

	, redmicConfig

	, declare

	, lang

	, _AngularAxisWithGridDrawing

	, _InfoOnMouseOver

	, _LegendBar

	, _RadialAxisWithGridDrawing

	, TemplateDisplayer

	, RealTimeInfo

	, SurveyStationDashboardTemplate

){

	return declare([Layout, Controller, _Main, _AddBasicTitle], {
@@ -28,18 +40,38 @@ define([ 
			this.config = {

				title: ' ',

				noScroll: true,

				target: redmicConfig.services.timeSeriesStations,

				dashboardTarget: 'realTimeDashboard'



				timeSeriesStationsTarget: redmicConfig.services.timeSeriesStations,

				activityTarget: redmicConfig.services.activity,

				platformInfoTarget: 'platformInfo',

				dashboardTarget: 'realTimeDashboard',



				_directionUnitTypeId: 11,

				_speedUnitTypeId: 12

			};



			lang.mixin(this, this.config, args);



			this.target = [this.timeSeriesStationsTarget, this.activityTarget];

		},



		_setMainConfigurations: function() {



			this.widgetConfigs = this._merge([{

				info: {

					width: 2,

					height: 3,

					type: TemplateDisplayer,

					props: {

						title: this.i18n.info,

						template: RealTimeInfo,

						"class": "containerDetails",

						classEmptyTemplate: "contentListNoData",

						target: this.platformInfoTarget

					}

				},

				dashboard: {

					width: 6,

					width: 4,

					height: 6,

					type: TemplateDisplayer,

					props: {
@@ -47,16 +79,36 @@ define([ 
						template: SurveyStationDashboardTemplate,

						target: this.dashboardTarget

					}

				},

				windrose: {

					width: 2,

					height: 3,

					type: MultiWindRoseChartWithToolbar,

					props: {

						title: this.i18n.windrose,

						chartsContainerExts: [

							_AngularAxisWithGridDrawing,

							_RadialAxisWithGridDrawing,

							_InfoOnMouseOver,

							_LegendBar

						],

						domainLevels: this.domainLevels

					}

				}

			}, this.widgetConfigs || {}]);

		},



		postCreate: function() {



			this.inherited(arguments);

		},



		_refreshModules: function() {



			this._checkPathVariableId();



			this._emitEvt('GET', {

				target: this.target,

				target: this.timeSeriesStationsTarget,

				requesterId: this.ownChannel,

				id: this.pathVariableId

			});
@@ -73,6 +125,15 @@ define([ 


		_itemAvailable: function(res) {



			if (res.target === this.timeSeriesStationsTarget) {

				this._receiveSiteData(res);

			} else if (res.target === this.activityTarget) {

				this._receiveActivityData(res);

			}

		},



		_receiveSiteData: function(res) {



			var itemData = res.data;



			if (!itemData || !itemData.properties) {
@@ -81,14 +142,27 @@ define([ 


			var siteData = itemData.properties.site;



			if (!siteData) {

				return;

			}

			siteData && this._manageSiteData(siteData);



			var measurementData = itemData.properties.measurements;



			measurementData && this._manageMeasurementData(measurementData);



			this.title = siteData.name + ' (' + siteData.code + ')';

			var activityId = itemData.properties.activityId;



			this._emitEvt('GET', {

				target: this.activityTarget,

				requesterId: this.getOwnChannel(),

				id: activityId

			});

		},



		_manageSiteData: function(data) {



			this.title = data.name + ' (' + data.code + ')';

			this._updateTitle();



			this.dashboardUrl = siteData.dashboard;

			this.dashboardUrl = data.dashboard;



			this._emitEvt('INJECT_ITEM', {

				data: {
@@ -96,6 +170,55 @@ define([ 
				},

				target: this.dashboardTarget

			});

		},



		_manageMeasurementData: function(data) {



			var directionMeasurements = data.filter(function(measurement) {



				return measurement.unit.unitType.id === this._directionUnitTypeId;

			}, this);



			var speedMeasurements = data.filter(function(measurement) {



				return measurement.unit.unitType.id === this._speedUnitTypeId;

			}, this);



			var directionDataDefinitionId = directionMeasurements[0].dataDefinition.id,

				speedDataDefinitionId = speedMeasurements[0].dataDefinition.id;



			this._publish(this._widgets.windrose.getChannel('SET_PROPS'), {

				directionDataDefinitionId: directionDataDefinitionId,

				speedDataDefinitionId: speedDataDefinitionId

			});

		},



		_receiveActivityData: function(res) {



			var activityData = res.data,

				activityPlatformData = activityData.platforms[0].platform,

				platformData = {

					activityName: activityData.name,

					activityUrl: lang.replace(redmicConfig.viewPaths.activityCatalogDetails, {

						id: activityData.id

					}),

					platformName: activityPlatformData.name,

					platformUrl: lang.replace(redmicConfig.viewPaths.platformCatalogDetails, {

						id: activityPlatformData.id

					}),

					description: activityData.description,

					image: activityPlatformData.image

				};



			this._manageActivityData(platformData);

		},



		_manageActivityData: function(data) {



			this._emitEvt('INJECT_ITEM', {

				data: data,

				target: this.platformInfoTarget

			});

		}

	});

});

public/javascript/redmic/modules/chart/Toolbar/DataFilterImpl.js

0 → 100644
+94 −0
Original line number Diff line number Diff line 
define([

	"dojo/_base/declare"

	, "dojo/_base/lang"

	, "dojo/aspect"

	, "RWidgets/Utilities"

	, "redmic/modules/base/_ShowInTooltip"

	, "redmic/modules/base/_ShowOnEvt"

	, "redmic/modules/form/input/DateRangeTextBoxImpl"

	, "put-selector/put"

	, "./Toolbar"

], function(

	declare

	, lang

	, aspect

	, Utilities

	, _ShowInTooltip

	, _ShowOnEvt

	, DateRangeTextBoxImpl

	, put

	, Toolbar

){

	return declare(Toolbar, {

		//	summary:

		//		Herramienta para aplicar filtros en las peticiones de datos.



		constructor: function(args) {



			this.config = {

				ownChannel: 'dataFilter',

				iconClass: 'fa-filter',

				_closeOnValueSetTimeout: 800

			};



			lang.mixin(this, this.config, args);



			aspect.after(this, '_defineSubscriptions', lang.hitch(this, this._defineDataFilterSubscriptions));

		},



		_setConfigurations: function() {



			this.dateRangeTextBoxConfig = this._merge([{

				parentChannel: this.getChannel(),

				orient: ['below-alt'],

				classTooltip: 'tooltipButtonMenu',

				filterChannel: this.queryChannel

			}, this.dateRangeTextBoxConfig || {}]);

		},



		_initialize: function() {



			this.dateRangeTextBox = new declare([DateRangeTextBoxImpl, _ShowOnEvt])

				.extend(_ShowInTooltip)(this.dateRangeTextBoxConfig);

		},



		_defineDataFilterSubscriptions: function() {



			this.subscriptionsConfig.push({

				channel : this.dateRangeTextBox.getChannel('VALUE_CHANGED'),

				callback: '_subDateRangeTextBoxValueChanged'

			});

		},



		postCreate: function() {



			this.inherited(arguments);



			var classNames = '.icon.' + this._getIconClassNames(),

				title = this.title || this.i18n.dataFilter;



			this.sourceNode = put(this.domNode, 'i' + classNames + '[title=' + title + ']');



			this._publish(this.dateRangeTextBox.getChannel('ADD_EVT'), {

				sourceNode: this.sourceNode

			});

		},



		_getIconClassNames: function() {



			var iconClassPrefix = this.iconClass.split('-')[0];



			return iconClassPrefix + '.' + this.iconClass;

		},



		_subDateRangeTextBoxValueChanged: function(res) {



			setTimeout(lang.hitch(this, this._publish, this.dateRangeTextBox.getChannel('HIDE')),

				this._closeOnValueSetTimeout);



			this._emitEvt('TOOL_ACTUATED', {

				value: res.value

			});

		}

	});

});