123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- $(function() {
- "use strict";
- var _minRatio = 0,
- _maxRatio = 150;
- $.widget('custom.cwGauge', {
- ratioDiv: null,
- valueDiv: null,
- unitDiv: null,
- options: {
- width: '100%',
- height: 'auto',
- //maxValue: 5000,
- maxValue: 0,
- colorType: 1,
- title: '',
- value: 0,
- unit: ''
- },
- _init: function() {
- },
- _getUnitAccountClass: function() {
- switch (this.options.colorType) {
- case 1: return 'unit_account'
- case 2: return 'unit_account2'
- default: return 'unit_account3'
- }
- },
- _create: function() {
- this.element.addClass('graph_box_wrap');
-
- var title = $('<div>', {
- 'class': 'horizontal_graph_title'
- }).text(this.options.title);
- var ul = $('<ul>');
- this.valueDiv = $('<li>')
- .css('margin-top', '10px')
- .css('width', '220px')
- .css('margin-right', '30px')
- //.css('width', '140px')
- //.css('margin-right', '3px')
- .addClass(this._getUnitAccountClass())
- .text(this.options.value)
- .appendTo(ul);
- //this.unitDiv = $('<li>')
- this.unitDiv = $('<div>')
- //.css('margin-right', '6px')
- //.addClass('unit')
- .text(this.options.unit)
- .css('margin-top', '-10px')
- .css('margin-left', '220px')
- .appendTo(ul);
- var gaugeDiv = $('<div>', {
- 'class': 'horizontal_graph_wrap'
- //}).css('position', 'absolute')
- }).css('position', 'relative')
- .css('bottom', '70px')
- //.css('margin-right', '10px');
- .css('margin-left', '10px');
- this.ratioDiv = $('<div>', {
- 'class': 'horizontal_graph_gage'
- }).css('left', _minRatio + '%')
- .appendTo(gaugeDiv);
- this.element
- .css('height', this.options.height)
- .css('position', 'relative')
- .css('display', 'inline-block')
- .append(title)
- .append(ul)
- .append(gaugeDiv);
- },
- _setValue: function(value) {
- var totalRatio = _maxRatio - _minRatio;
- //var totalValue = this.options.maxValue - this.options.minValue;
- //var v = (value / this.options.maxValue);
- //var ratio = v * totalRatio - _minRatio;
- var ratio = (value / this.options.maxValue) * 100;
- if (ratio < _minRatio) {
- ratio = _minRatio;
- }
- else if (_maxRatio < ratio) {
- ratio = _maxRatio;
- }
- // this.options.value = value;
- if (typeof (value) === 'function') {
- value = value();
- }
- //value = String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
- //this.valueDiv.text(value + ' ' + this.options.unit);
- //this.valueDiv.text((value)); // hcLee 2016 03 09 $NumberFormat 추가
- this.valueDiv.text($NumberFormat(value));
- if (ratio > 150) ratio = 150;
- ratio = ratio * 1.33; // 150% 지만 이미지 pixcel크기는 200 이므로 비율을 맞춘다 /hcLee 2016 12 09
- ratio -= 10; // 눈금이미지 폭의 반만큼왼쪽으로 이동
- this.ratioDiv.css('left', ratio + 'px'); // '%'에서 픽셀로 수정 hcLee 2016 12 09
- },
- _refresh: function() {
- },
- _destroy: function() {
- },
- _setOption: function(key, value) {
- switch (key) {
- case 'value':
- this._setValue(value);
- break;
- case 'unit':
- this.unitDiv.text(value);
- //this.unitDiv.text('XX');
- //this.unitDiv.css('position', 'absolute')
- //this.unitDiv.css('margin-right', '10px');
- break;
- }
- this._super(key, value);
- this._refresh();
- },
- _setOptions: function() {
- this._superApply(arguments);
- this._refresh();
- },
- });
- function RateGauge(options) {
- this.id = '#' + options.id;
- $(this.id).cwGauge(options);
- };
- RateGauge.prototype.setValue2 = function (value,unit) {
- $(this.id).cwGauge2(value, unit);
- };
- RateGauge.prototype.setValue = function(value) {
- $(this.id).cwGauge('option', 'value', value);
- };
- RateGauge.prototype.setMaxValue = function(value) {
- $(this.id).cwGauge('option', 'maxValue', value);
- };
- RateGauge.prototype.setUnit = function(value) {
- $(this.id).cwGauge('option', 'unit', value);
- };
- BWA.Chart = BWA.Chart || {};
- BWA.Chart.RateGauge = {};
- BWA.Chart.RateGauge.newInstance = function(options) {
- return new RateGauge(options);
- };
- });
|