https://www.ipbmr.ru/assets/tmpl/js/components/hs.chart-pie.js

1/**
2 * Chart Pies wrapper.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires appear.js (v1.0.3), circles.js (v0.0.6)
7 *
8 */
9;
10(function ($) {
11  'use strict';
12
13  $.HSCore.components.HSChartPie = {
14
15    /**
16     *
17     *
18     * @var Object _baseConfig
19     */
20    _baseConfig: {
21      bounds: -100,
22      debounce: 10,
23      rtl: false,
24      wrpClass: 'circles-wrp',
25      textClass: 'circles-text',
26      valueStrokeClass: 'circles-valueStroke',
27      maxValueStrokeClass: 'circles-maxValueStroke',
28      styleWrapper: true,
29      styleText: true
30    },
31
32    /**
33     *
34     *
35     * @var jQuery pageCollection
36     */
37    pageCollection: $(),
38
39    /**
40     *
41     *
42     * @var
43     */
44    appearCollectionIds: [],
45
46    /**
47     * Initialization of ChartPie wrapper.
48     *
49     * @param String selector (optional)
50     * @param Object config (optional)
51     *
52     * @return jQuery pageCollection - collection of initialized items.
53     */
54    init: function (selector, config) {
55
56      this.collection = selector && $(selector).length ? $(selector) : $();
57      if (!$(selector).length) return;
58
59      this.config = config && $.isPlainObject(config) ?
60        $.extend({}, this._baseConfig, config) : this._baseConfig;
61
62      this.config.itemSelector = selector;
63
64      this.initCircles();
65
66      return this.pageCollection;
67
68    },
69
70    /**
71     * Initialization of each Circle of the page.
72     *
73     * @return undefined
74     */
75    initCircles: function () {
76
77      var lastItem = this.pageCollection.last(),
78        lastId = 0,
79        self = this;
80
81
82      if (lastItem.length) {
83        lastId = +lastItem.attr('id').substring(lastItem.attr('id').lastIndexOf('-') + 1);
84      }
85
86      this.collection.each(function (i, el) {
87
88        var $this = $(el),
89          id = 'hs-pie-' + (lastId + (i + 1)),
90          value = 0;
91
92        $this.attr('id', id);
93
94        if (!$this.data('circles-scroll-animate')) {
95          value = $this.data('circles-value') || 0;
96        } else {
97          $this.data('reminded-value', $this.data('circles-value') || 0);
98          self.appearCollectionIds.push('#' + id);
99        }
100
101        var circle = Circles.create({
102          id: id,
103          radius: $this.data('circles-radius') || 80,
104          value: value,
105          maxValue: $this.data('circles-max-value') || 100,
106          width: $this.data('circles-stroke-width') || 10,
107          text: function (value) {
108            if ($this.data('circles-type') == 'iconic') {
109              return $this.data('circles-icon');
110            } else {
111              return value + ($this.data('circles-additional-text') || '');
112            }
113          },
114          colors: [$this.data('circles-bg-color') || '#72c02c', $this.data('circles-fg-color') || '#eeeeee'],
115          duration: $this.data('circles-duration') || 1000,
116          wrpClass: self.config['wrpClass'],
117          textClass: self.config['textClass'],
118          valueStrokeClass: self.config['valueStrokeClass'],
119          maxValueStrokeClass: self.config['maxValueStrokeClass'],
120          styleWrapper: self.config['styleWrapper'],
121          styleText: self.config['styleText']
122        });
123
124        $this.data('circle', circle);
125
126        $this.find('.' + self.config['textClass']).css({
127          'font-size': $this.data('circles-font-size'),
128          'font-weight': $this.data('circles-font-weight'),
129          'color': $this.data('circles-color')
130        });
131
132
133        if (self.config['rtl']) {
134          $this.find('svg').css('transform', 'matrix(-1, 0, 0, 1, 0, 0)');
135        }
136
137        self.pageCollection = self.pageCollection.add($this);
138
139      });
140
141      if (self.appearCollectionIds.length) self._initAppear();
142
143    },
144
145    /**
146     * Updates value of the chart pie when an item has appeared in the visible region.
147     *
148     * @return undefined
149     */
150    _initAppear: function () {
151
152      var self = this;
153
154      appear({
155        bounds: self.config['bounds'],
156        debounce: self.config['debounce'],
157        elements: function () {
158          return document.querySelectorAll(self.appearCollectionIds.join(','));
159        },
160        appear: function (element) {
161
162          element = $(element);
163
164          element.data('circle').update(element.data('reminded-value'));
165
166        }
167      });
168
169    },
170
171    /**
172     * Returns item by index or entire collection in case when index has not been passed.
173     *
174     * @param Number index
175     *
176     * @return jQuery
177     */
178    get: function (index) {
179      if (index && $.isNumeric(index)) return this.pageCollection.eq(index);
180
181      return this.pageCollection;
182    },
183
184    /**
185     * Returns item by id.
186     *
187     * @param String id
188     *

189     * @return circle
190     */
191    getById: function (id) {
192      if (id && this.pageCollection.filter('#' + id).length) return this.pageCollection.filter('#' + id);
193
194      return null;
195    },
196
197    /**
198     * Returns object of circle class (for the access to circle API) by index.
199     *
200     * @param Number index
201     *
202     * @return circle
203     */
204    getCircleAPI: function (index) {
205      if (index && $.isNumeric(index) && this.pageCollection.eq(index).length) return this.pageCollection.eq(index).data('circle');
206
207      return null;
208    },
209
210    /**
211     * Returns object of circle class (for the access to circle API) by id.
212     *
213     * @param String id
214     *
215     * @return circle
216     */
217    getCircleAPIById: function (id) {
218      if (id && this.pageCollection.filter('#' + id).length) return this.pageCollection.filter('#' + id).data('circle');
219
220      return null;
221    }
222
223  }
224
225})(jQuery);