skyquake/framework/widgets/components.js

   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
  20 var React = require('react');
  21 //var Histogram = require('react-d3-histogram')
  22 export 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'),
  29   Gauge: require('./gauge/gauge.js'),
  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 // });