Gitiles
Code Review Sign In
osm.etsi.org / osm / UI / 6f5b417dfbeddcd8d452dcf156f75c293f22b74c / . / skyquake / framework / widgets / components.js
blob: f38719aee9c52c05561d56c00778789627d92f14 [file] [log] [blame]
Jeremy Mordkoffe29efc32016-09-07 18:59:17 -0400[diff] [blame]1
2/*
3 *
4 * Copyright 2016 RIFT.IO Inc
5 *
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
9 *
10 * http://www.apache.org/licenses/LICENSE-2.0
11 *
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
17 *
18 */
19
20var React = require('react');
21//var Histogram = require('react-d3-histogram')
22export default {
23 //test: require('./test/test.js'),
24 button: require('./button/rw.button.js'),
25 React: React,
26// Histogram: Histogram,
27 Multicomponent: require('./multicomponent/multicomponent.js'),
28 Mixins: require('./mixins/ButtonEventListener.js'),
KIRAN KASHALKARf6800642016-09-09 16:20:41 -0400[diff] [blame]29 // Gauge: require('./gauge/gauge.js'),
Jeremy Mordkoffe29efc32016-09-07 18:59:17 -0400[diff] [blame]30 Bullet: require('./bullet/bullet.js')
31};
32
33// require('../../assets/js/n3-line-chart.js');
34// var Gauge = require('../../assets/js/gauge-modified.js');
35// var bulletController = function($scope, $element) {
36// this.$element = $element;
37// this.vertical = false;
38// this.value = 0;
39// this.min = 0;
40// this.max = 100;
41// //this.range = this.max - this.min;
42// //this.percent = (this.value - this.min) / this.range;
43// this.displayValue = this.value;
44// this.isPercent = (this.units == '')? true:false;
45// this.bulletColor = "#6BB814";
46// this.fontsize = 28;
47// this.radius = 4;
48// this.containerMarginX = 0;
49// this.containerMarginY = 0;
50// this.textMarginX = 5;
51// this.textMarginY = 42;
52// this.bulletMargin = 0;
53// this.width = 512;
54// this.height = 64;
55// this.markerX = -100; // puts it off screen unless set
56// var self = this;
57// if (this.isPercent) {
58// this.displayValue + "%";
59// }
60// $scope.$watch(
61// function() {
62// return self.value;
63// },
64// function() {
65// self.valueChanged();
66// }
67// );
68
69// }
70
71// bulletController.prototype = {
72
73// valueChanged: function() {
74// var range = this.max - this.min;
75// var normalizedValue = (this.value - this.min) / range;
76// if (this.isPercent) {
77// this.displayValue = String(Math.round(normalizedValue * 100)) + "%";
78// } else {
79// this.displayValue = this.value;
80// }
81// // All versions of IE as of Jan 2015 does not support inline CSS transforms on SVG
82// if (platform.name == 'IE') {
83// this.bulletWidth = Math.round(100 * normalizedValue) + '%';
84// } else {
85// this.bulletWidth = this.width - (2 * this.containerMarginX);
86// var transform = 'scaleX(' + normalizedValue + ')';
87// var bullet = $(this.$element).find('.bullet2');
88// bullet.css('transform', transform);
89// bullet.css('-webkit-transform', transform);
90// }
91// },
92
93// markerChanged: function() {
94// var range = this.max - this.min;
95// var w = this.width - (2 * this.containerMarginX);
96// this.markerX = this.containerMarginX + ((this.marker - this.min) / range ) * w;
97// this.markerY1 = 7;
98// this.markerY2 = this.width - 7;
99// }
100// }
101
102// angular.module('components', ['n3-line-chart'])
103// .directive('rwBullet', function() {
104// return {
105// restrict : 'E',
106// templateUrl: 'modules/views/rw.bullet.tmpl.html',
107// bindToController: true,
108// controllerAs: 'bullet',
109// controller: bulletController,
110// replace: true,
111// scope: {
112// min : '@?',
113// max : '@?',
114// value : '@',
115// marker: '@?',
116// units: '@?',
117// bulletColor: '@?',
118// label: '@?'
119// }
120// };
121// })
122// .directive('rwSlider', function() {
123// var controller = function($scope, $element, $timeout) {
124// // Q: is there a way to force attributes to be ints?
125// $scope.min = $scope.min || "0";
126// $scope.max = $scope.max || "100";
127// $scope.step = $scope.step || "1";
128// $scope.height = $scope.height || "30";
129// $scope.orientation = $scope.orientation || 'horizontal';
130// $scope.tooltipInvert = $scope.tooltipInvert || false;
131// $scope.percent = $scope.percent || false;
132// $scope.kvalue = $scope.kvalue || false;
133// $scope.direction = $scope.direction || "ltr";
134// $($element).noUiSlider({
135// start: parseInt($scope.value),
136// step: parseInt($scope.step),
137// orientation: $scope.orientation,
138// range: {
139// min: parseInt($scope.min),
140// max: parseInt($scope.max)
141// },
142// direction: $scope.direction
143// });
144// //$(".no-Ui-target").Link('upper').to('-inline-<div class="tooltip"></div>')
145// var onSlide = function(e, value) {
146// $timeout(function(){
147// $scope.value = value;
148// })
149
150// };
151// $($element).on({
152// change: onSlide,
153// slide: onSlide,
154// set: $scope.onSet({value: $scope.value})
155// });
156// var val = String(Math.round($scope.value));
157// if ($scope.percent) {
158// val += "%"
159// } else if ($scope.kvalue) {
160// val += "k"
161// }
162// $($element).height($scope.height);
163// if ($scope.tooltipInvert) {
164// $($element).find('.noUi-handle').append("<div class='tooltip' style='position:relative;right:20px'>" + val + "</div>");
165// } else {
166// $($element).find('.noUi-handle').append("<div class='tooltip' style='position:relative;left:-20px'>" + val + "</div>");
167// }
168// $scope.$watch('value', function(value) {
169// var val = String(Math.round($scope.value));
170// if ($scope.percent) {
171// val += "%"
172// } else if($scope.kvalue) {
173// val += "k"
174// }
175// $($element).val(value);
176// $($element).find('.tooltip').html(val);
177// if ($scope.tooltipInvert) {
178// $($element).find('.tooltip').css('right', $($element).find('.tooltip').innerWidth() * -1);
179// } else {
180// $($element).find('.tooltip').css('left', $($element).find('.tooltip').innerWidth() * -1);
181// }
182// });
183// };
184
185// return {
186// restrict : 'E',
187// template: '<div></div>',
188// controller : controller,
189// replace: true,
190// scope: {
191// min : '@',
192// max : '@',
193// width: '@',
194// height: '@',
195// step : '@',
196// orientation : '@',
197// tooltipInvert: '@',
198// percent: '@',
199// kvalue: '@?',
200// onSet:'&?',
201// direction: '@?',
202// value:'=?'
203// }
204// };
205// })
206// .directive('rwGauge', function() {
207// return {
208// restrict: 'AE',
209// template: '<canvas class="rwgauge" style="width:100%;height:100%;max-width:{{width}}px;max-height:240px;"></canvas>',
210// replace: true,
211// scope: {
212// min: '@?',
213// max: '@?',
214// size: '@?',
215// color: '@?',
216// value: '@?',
217// resize: '@?',
218// isAggregate: '@?',
219// units: '@?',
220// valueFormat: '=?',
221// width: '@?'
222// },
223// bindToController: true,
224// controllerAs: 'gauge',
225// controller: function($scope, $element) {
226// var self = this;
227// this.gauge = null;
228// this.min = this.min || 0;
229// this.max = this.max || 100;
230// this.nSteps = 14;
231// this.size = this.size || 300;
232// this.units = this.units || '';
233// $scope.width = this.width || 240;
234// this.color = this.color || 'hsla(212, 57%, 50%, 1)';
235// if (!this.valueFormat) {
236// if (this.max > 1000 || this.value) {
237// self.valueFormat = {
238// "int": 1,
239// "dec": 0
240// };
241// } else {
242// self.valueFormat = {
243// "int": 1,
244// "dec": 2
245// };
246// }
247// }
248// this.isAggregate = this.isAggregate || false;
249// this.resize = this.resize || false;
250// if (this.format == 'percent') {
251// self.valueFormat = {
252// "int": 3,
253// "dec": 0
254// };
255// }
256// $scope.$watch(function() {
257// return self.max;
258// }, function(n, o) {
259// if(n !== o) {
260// renderGauge();
261// }
262// });
263// $scope.$watch(function() {
264// return self.valueFormat;
265// }, function(n, o) {
266// if(n != 0) {
267// renderGauge();
268// }
269// });
270// $scope.$watch(function() {
271// return self.value;
272// }, function() {
273// if (self.gauge) {
274// // w/o rounding gauge will unexplainably thrash round.
275// self.valueFormat = determineValueFormat(self.value);
276// self.gauge.setValue(Math.ceil(self.value * 100) / 100);
277// //self.gauge.setValue(Math.round(self.value));
278// }
279// });
280// angular.element($element).ready(function() {
281// console.log('rendering')
282// renderGauge();
283// })
284// window.testme = renderGauge;
285// function determineValueFormat(value) {
286
287// if (value > 999 || self.units == "%") {
288// return {
289// "int": 1,
290// "dec": 0
291// }
292// }
293
294// return {
295// "int": 1,
296// "dec": 2
297// }
298// }
299// function renderGauge(calcWidth) {
300// if (self.max == self.min) {
301// self.max = 14;
302// }
303// var range = self.max - self.min;
304// var step = Math.round(range / self.nSteps);
305// var majorTicks = [];
306// for (var i = 0; i <= self.nSteps; i++) {
307// majorTicks.push(self.min + (i * step));
308// };
309// var redLine = self.min + (range * 0.9);
310// var config = {
311// isAggregate: self.isAggregate,
312// renderTo: angular.element($element)[0],
313// width: calcWidth || self.size,
314// height: calcWidth || self.size,
315// glow: false,
316// units: self.units,
317// title: false,
318// minValue: self.min,
319// maxValue: self.max,
320// majorTicks: majorTicks,
321// valueFormat: determineValueFormat(self.value),
322// minorTicks: 0,
323// strokeTicks: false,
324// highlights: [],
325// colors: {
326// plate: 'rgba(0,0,0,0)',
327// majorTicks: 'rgba(15, 123, 182, .84)',
328// minorTicks: '#ccc',
329// title: 'rgba(50,50,50,100)',
330// units: 'rgba(50,50,50,100)',
331// numbers: '#fff',
332// needle: {
333// start: 'rgba(255, 255, 255, 1)',
334// end: 'rgba(255, 255, 255, 1)'
335// }
336// }
337// };
338// var min = config.minValue;
339// var max = config.maxValue;
340// var N = 1000;
341// var increment = (max - min) / N;
342// for (i = 0; i < N; i++) {
343// var temp_color = 'rgb(0, 172, 238)';
344// if (i > 0.5714 * N && i <= 0.6428 * N) {
345// temp_color = 'rgb(0,157,217)';
346// } else if (i >= 0.6428 * N && i < 0.7142 * N) {
347// temp_color = 'rgb(0,142,196)';
348// } else if (i >= 0.7142 * N && i < 0.7857 * N) {
349// temp_color = 'rgb(0,126,175)';
350// } else if (i >= 0.7857 * N && i < 0.8571 * N) {
351// temp_color = 'rgb(0,122,154)';
352// } else if (i >= 0.8571 * N && i < 0.9285 * N) {
353// temp_color = 'rgb(0,96,133)';
354// } else if (i >= 0.9285 * N) {
355// temp_color = 'rgb(0,80,112)';
356// }
357// config.highlights.push({
358// from: i * increment,
359// to: increment * (i + 2),
360// color: temp_color
361// })
362// }
363// var updateSize = _.debounce(function() {
364// config.maxValue = self.max;
365// var clientWidth = self.parentNode.parentNode.clientWidth / 2;
366// var calcWidth = (300 > clientWidth) ? clientWidth : 300;
367// self.gauge.config.width = self.gauge.config.height = calcWidth;
368// self.renderGauge(calcWidth);
369// }, 500);
370// if (self.resize) $(window).resize(updateSize)
371// if (self.gauge) {
372// self.gauge.updateConfig(config);
373// } else {
374// self.gauge = new Gauge(config);
375// self.gauge.draw();
376// }
377// };
378// },
379// }
380// });