vue_jqxlineargauge.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518
  1. <template>
  2. <div v-bind:id="id">
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import '../jqwidgets/jqxcore.js';
  8. import '../jqwidgets/jqxdraw.js';
  9. import '../jqwidgets/jqxgauge.js';
  10. export default {
  11. props: {
  12. animationDuration: Number,
  13. background: Object,
  14. colorScheme: String,
  15. disabled: Boolean,
  16. easing: String,
  17. height: [Number, String],
  18. int64: Boolean,
  19. labels: Object,
  20. min: Number,
  21. max: Number,
  22. orientation: String,
  23. pointer: Object,
  24. rangesOffset: Number,
  25. rangeSize: String,
  26. ranges: Array,
  27. showRanges: Boolean,
  28. scaleStyle: Object,
  29. scaleLength: [String, Number],
  30. ticksOffset: Array,
  31. ticksPosition: String,
  32. ticksMinor: Object,
  33. ticksMajor: Object,
  34. value: Number,
  35. width: [Number, String],
  36. autoCreate: {
  37. default: true,
  38. type: Boolean
  39. }
  40. },
  41. created: function () {
  42. this.id = 'jqxLinearGauge' + JQXLite.generateID();
  43. this.componentSelector = '#' + this.id;
  44. },
  45. mounted: function () {
  46. if (this.autoCreate) this.__createComponent__();
  47. },
  48. methods: {
  49. createComponent: function (options) {
  50. if (!this.autoCreate) this.__createComponent__(options)
  51. else console.warn('Component is already created! If you want to use createComponent, please set "autoCreate" property to "false".');
  52. },
  53. setOptions: function (options) {
  54. JQXLite(this.componentSelector).jqxLinearGauge(options);
  55. },
  56. getOptions: function () {
  57. const usedProps = Object.keys(this.__manageProps__());
  58. const resultToReturn = {};
  59. for (let i = 0; i < usedProps.length; i++) {
  60. resultToReturn[usedProps[i]] = JQXLite(this.componentSelector).jqxLinearGauge(usedProps[i]);
  61. }
  62. return resultToReturn;
  63. },
  64. disable: function() {
  65. JQXLite(this.componentSelector).jqxLinearGauge('disable');
  66. },
  67. enable: function() {
  68. JQXLite(this.componentSelector).jqxLinearGauge('enable');
  69. },
  70. val: function(value) {
  71. if (value !== undefined) {
  72. JQXLite(this.componentSelector).jqxLinearGauge('val', value)
  73. } else {
  74. return JQXLite(this.componentSelector).jqxLinearGauge('val');
  75. }
  76. },
  77. _animationDuration: function(arg) {
  78. if (arg !== undefined) {
  79. JQXLite(this.componentSelector).jqxLinearGauge('animationDuration', arg)
  80. } else {
  81. return JQXLite(this.componentSelector).jqxLinearGauge('animationDuration');
  82. }
  83. },
  84. _background: function(arg) {
  85. if (arg !== undefined) {
  86. JQXLite(this.componentSelector).jqxLinearGauge('background', arg)
  87. } else {
  88. return JQXLite(this.componentSelector).jqxLinearGauge('background');
  89. }
  90. },
  91. _colorScheme: function(arg) {
  92. if (arg !== undefined) {
  93. JQXLite(this.componentSelector).jqxLinearGauge('colorScheme', arg)
  94. } else {
  95. return JQXLite(this.componentSelector).jqxLinearGauge('colorScheme');
  96. }
  97. },
  98. _disabled: function(arg) {
  99. if (arg !== undefined) {
  100. JQXLite(this.componentSelector).jqxLinearGauge('disabled', arg)
  101. } else {
  102. return JQXLite(this.componentSelector).jqxLinearGauge('disabled');
  103. }
  104. },
  105. _easing: function(arg) {
  106. if (arg !== undefined) {
  107. JQXLite(this.componentSelector).jqxLinearGauge('easing', arg)
  108. } else {
  109. return JQXLite(this.componentSelector).jqxLinearGauge('easing');
  110. }
  111. },
  112. _height: function(arg) {
  113. if (arg !== undefined) {
  114. JQXLite(this.componentSelector).jqxLinearGauge('height', arg)
  115. } else {
  116. return JQXLite(this.componentSelector).jqxLinearGauge('height');
  117. }
  118. },
  119. _int64: function(arg) {
  120. if (arg !== undefined) {
  121. JQXLite(this.componentSelector).jqxLinearGauge('int64', arg)
  122. } else {
  123. return JQXLite(this.componentSelector).jqxLinearGauge('int64');
  124. }
  125. },
  126. _labels: function(arg) {
  127. if (arg !== undefined) {
  128. JQXLite(this.componentSelector).jqxLinearGauge('labels', arg)
  129. } else {
  130. return JQXLite(this.componentSelector).jqxLinearGauge('labels');
  131. }
  132. },
  133. _min: function(arg) {
  134. if (arg !== undefined) {
  135. JQXLite(this.componentSelector).jqxLinearGauge('min', arg)
  136. } else {
  137. return JQXLite(this.componentSelector).jqxLinearGauge('min');
  138. }
  139. },
  140. _max: function(arg) {
  141. if (arg !== undefined) {
  142. JQXLite(this.componentSelector).jqxLinearGauge('max', arg)
  143. } else {
  144. return JQXLite(this.componentSelector).jqxLinearGauge('max');
  145. }
  146. },
  147. _orientation: function(arg) {
  148. if (arg !== undefined) {
  149. JQXLite(this.componentSelector).jqxLinearGauge('orientation', arg)
  150. } else {
  151. return JQXLite(this.componentSelector).jqxLinearGauge('orientation');
  152. }
  153. },
  154. _pointer: function(arg) {
  155. if (arg !== undefined) {
  156. JQXLite(this.componentSelector).jqxLinearGauge('pointer', arg)
  157. } else {
  158. return JQXLite(this.componentSelector).jqxLinearGauge('pointer');
  159. }
  160. },
  161. _rangesOffset: function(arg) {
  162. if (arg !== undefined) {
  163. JQXLite(this.componentSelector).jqxLinearGauge('rangesOffset', arg)
  164. } else {
  165. return JQXLite(this.componentSelector).jqxLinearGauge('rangesOffset');
  166. }
  167. },
  168. _rangeSize: function(arg) {
  169. if (arg !== undefined) {
  170. JQXLite(this.componentSelector).jqxLinearGauge('rangeSize', arg)
  171. } else {
  172. return JQXLite(this.componentSelector).jqxLinearGauge('rangeSize');
  173. }
  174. },
  175. _ranges: function(arg) {
  176. if (arg !== undefined) {
  177. JQXLite(this.componentSelector).jqxLinearGauge('ranges', arg)
  178. } else {
  179. return JQXLite(this.componentSelector).jqxLinearGauge('ranges');
  180. }
  181. },
  182. _showRanges: function(arg) {
  183. if (arg !== undefined) {
  184. JQXLite(this.componentSelector).jqxLinearGauge('showRanges', arg)
  185. } else {
  186. return JQXLite(this.componentSelector).jqxLinearGauge('showRanges');
  187. }
  188. },
  189. _scaleStyle: function(arg) {
  190. if (arg !== undefined) {
  191. JQXLite(this.componentSelector).jqxLinearGauge('scaleStyle', arg)
  192. } else {
  193. return JQXLite(this.componentSelector).jqxLinearGauge('scaleStyle');
  194. }
  195. },
  196. _scaleLength: function(arg) {
  197. if (arg !== undefined) {
  198. JQXLite(this.componentSelector).jqxLinearGauge('scaleLength', arg)
  199. } else {
  200. return JQXLite(this.componentSelector).jqxLinearGauge('scaleLength');
  201. }
  202. },
  203. _ticksOffset: function(arg) {
  204. if (arg !== undefined) {
  205. JQXLite(this.componentSelector).jqxLinearGauge('ticksOffset', arg)
  206. } else {
  207. return JQXLite(this.componentSelector).jqxLinearGauge('ticksOffset');
  208. }
  209. },
  210. _ticksPosition: function(arg) {
  211. if (arg !== undefined) {
  212. JQXLite(this.componentSelector).jqxLinearGauge('ticksPosition', arg)
  213. } else {
  214. return JQXLite(this.componentSelector).jqxLinearGauge('ticksPosition');
  215. }
  216. },
  217. _ticksMinor: function(arg) {
  218. if (arg !== undefined) {
  219. JQXLite(this.componentSelector).jqxLinearGauge('ticksMinor', arg)
  220. } else {
  221. return JQXLite(this.componentSelector).jqxLinearGauge('ticksMinor');
  222. }
  223. },
  224. _ticksMajor: function(arg) {
  225. if (arg !== undefined) {
  226. JQXLite(this.componentSelector).jqxLinearGauge('ticksMajor', arg)
  227. } else {
  228. return JQXLite(this.componentSelector).jqxLinearGauge('ticksMajor');
  229. }
  230. },
  231. _value: function(arg) {
  232. if (arg !== undefined) {
  233. JQXLite(this.componentSelector).jqxLinearGauge('value', arg)
  234. } else {
  235. return JQXLite(this.componentSelector).jqxLinearGauge('value');
  236. }
  237. },
  238. _width: function(arg) {
  239. if (arg !== undefined) {
  240. JQXLite(this.componentSelector).jqxLinearGauge('width', arg)
  241. } else {
  242. return JQXLite(this.componentSelector).jqxLinearGauge('width');
  243. }
  244. },
  245. __createComponent__: function (options) {
  246. let widgetOptions;
  247. options ? widgetOptions = options : widgetOptions = this.__manageProps__();
  248. JQXLite(this.componentSelector).jqxLinearGauge(widgetOptions);
  249. this.__extendProps__();
  250. this.__wireEvents__();
  251. },
  252. __manageProps__: function () {
  253. const widgetProps = ['animationDuration','background','colorScheme','disabled','easing','height','int64','labels','min','max','orientation','pointer','rangesOffset','rangeSize','ranges','showRanges','scaleStyle','scaleLength','ticksOffset','ticksPosition','ticksMinor','ticksMajor','value','width'];
  254. const componentProps = this.$options.propsData;
  255. let options = {};
  256. for (let prop in componentProps) {
  257. if (widgetProps.indexOf(prop) !== -1) {
  258. options[prop] = componentProps[prop];
  259. }
  260. }
  261. return options;
  262. },
  263. __extendProps__: function () {
  264. const that = this;
  265. Object.defineProperty(that, 'animationDuration', {
  266. get: function() {
  267. return that._animationDuration();
  268. },
  269. set: function(newValue) {
  270. that._animationDuration(newValue);
  271. },
  272. enumerable: true,
  273. configurable: true
  274. });
  275. Object.defineProperty(that, 'background', {
  276. get: function() {
  277. return that._background();
  278. },
  279. set: function(newValue) {
  280. that._background(newValue);
  281. },
  282. enumerable: true,
  283. configurable: true
  284. });
  285. Object.defineProperty(that, 'colorScheme', {
  286. get: function() {
  287. return that._colorScheme();
  288. },
  289. set: function(newValue) {
  290. that._colorScheme(newValue);
  291. },
  292. enumerable: true,
  293. configurable: true
  294. });
  295. Object.defineProperty(that, 'disabled', {
  296. get: function() {
  297. return that._disabled();
  298. },
  299. set: function(newValue) {
  300. that._disabled(newValue);
  301. },
  302. enumerable: true,
  303. configurable: true
  304. });
  305. Object.defineProperty(that, 'easing', {
  306. get: function() {
  307. return that._easing();
  308. },
  309. set: function(newValue) {
  310. that._easing(newValue);
  311. },
  312. enumerable: true,
  313. configurable: true
  314. });
  315. Object.defineProperty(that, 'height', {
  316. get: function() {
  317. return that._height();
  318. },
  319. set: function(newValue) {
  320. that._height(newValue);
  321. },
  322. enumerable: true,
  323. configurable: true
  324. });
  325. Object.defineProperty(that, 'int64', {
  326. get: function() {
  327. return that._int64();
  328. },
  329. set: function(newValue) {
  330. that._int64(newValue);
  331. },
  332. enumerable: true,
  333. configurable: true
  334. });
  335. Object.defineProperty(that, 'labels', {
  336. get: function() {
  337. return that._labels();
  338. },
  339. set: function(newValue) {
  340. that._labels(newValue);
  341. },
  342. enumerable: true,
  343. configurable: true
  344. });
  345. Object.defineProperty(that, 'min', {
  346. get: function() {
  347. return that._min();
  348. },
  349. set: function(newValue) {
  350. that._min(newValue);
  351. },
  352. enumerable: true,
  353. configurable: true
  354. });
  355. Object.defineProperty(that, 'max', {
  356. get: function() {
  357. return that._max();
  358. },
  359. set: function(newValue) {
  360. that._max(newValue);
  361. },
  362. enumerable: true,
  363. configurable: true
  364. });
  365. Object.defineProperty(that, 'orientation', {
  366. get: function() {
  367. return that._orientation();
  368. },
  369. set: function(newValue) {
  370. that._orientation(newValue);
  371. },
  372. enumerable: true,
  373. configurable: true
  374. });
  375. Object.defineProperty(that, 'pointer', {
  376. get: function() {
  377. return that._pointer();
  378. },
  379. set: function(newValue) {
  380. that._pointer(newValue);
  381. },
  382. enumerable: true,
  383. configurable: true
  384. });
  385. Object.defineProperty(that, 'rangesOffset', {
  386. get: function() {
  387. return that._rangesOffset();
  388. },
  389. set: function(newValue) {
  390. that._rangesOffset(newValue);
  391. },
  392. enumerable: true,
  393. configurable: true
  394. });
  395. Object.defineProperty(that, 'rangeSize', {
  396. get: function() {
  397. return that._rangeSize();
  398. },
  399. set: function(newValue) {
  400. that._rangeSize(newValue);
  401. },
  402. enumerable: true,
  403. configurable: true
  404. });
  405. Object.defineProperty(that, 'ranges', {
  406. get: function() {
  407. return that._ranges();
  408. },
  409. set: function(newValue) {
  410. that._ranges(newValue);
  411. },
  412. enumerable: true,
  413. configurable: true
  414. });
  415. Object.defineProperty(that, 'showRanges', {
  416. get: function() {
  417. return that._showRanges();
  418. },
  419. set: function(newValue) {
  420. that._showRanges(newValue);
  421. },
  422. enumerable: true,
  423. configurable: true
  424. });
  425. Object.defineProperty(that, 'scaleStyle', {
  426. get: function() {
  427. return that._scaleStyle();
  428. },
  429. set: function(newValue) {
  430. that._scaleStyle(newValue);
  431. },
  432. enumerable: true,
  433. configurable: true
  434. });
  435. Object.defineProperty(that, 'scaleLength', {
  436. get: function() {
  437. return that._scaleLength();
  438. },
  439. set: function(newValue) {
  440. that._scaleLength(newValue);
  441. },
  442. enumerable: true,
  443. configurable: true
  444. });
  445. Object.defineProperty(that, 'ticksOffset', {
  446. get: function() {
  447. return that._ticksOffset();
  448. },
  449. set: function(newValue) {
  450. that._ticksOffset(newValue);
  451. },
  452. enumerable: true,
  453. configurable: true
  454. });
  455. Object.defineProperty(that, 'ticksPosition', {
  456. get: function() {
  457. return that._ticksPosition();
  458. },
  459. set: function(newValue) {
  460. that._ticksPosition(newValue);
  461. },
  462. enumerable: true,
  463. configurable: true
  464. });
  465. Object.defineProperty(that, 'ticksMinor', {
  466. get: function() {
  467. return that._ticksMinor();
  468. },
  469. set: function(newValue) {
  470. that._ticksMinor(newValue);
  471. },
  472. enumerable: true,
  473. configurable: true
  474. });
  475. Object.defineProperty(that, 'ticksMajor', {
  476. get: function() {
  477. return that._ticksMajor();
  478. },
  479. set: function(newValue) {
  480. that._ticksMajor(newValue);
  481. },
  482. enumerable: true,
  483. configurable: true
  484. });
  485. Object.defineProperty(that, 'value', {
  486. get: function() {
  487. return that._value();
  488. },
  489. set: function(newValue) {
  490. that._value(newValue);
  491. },
  492. enumerable: true,
  493. configurable: true
  494. });
  495. Object.defineProperty(that, 'width', {
  496. get: function() {
  497. return that._width();
  498. },
  499. set: function(newValue) {
  500. that._width(newValue);
  501. },
  502. enumerable: true,
  503. configurable: true
  504. });
  505. },
  506. __wireEvents__: function () {
  507. const that = this;
  508. JQXLite(this.componentSelector).on('valueChanging', function (event) { that.$emit('valueChanging', event); });
  509. JQXLite(this.componentSelector).on('valueChanged', function (event) { that.$emit('valueChanged', event); });
  510. }
  511. }
  512. }
  513. </script>