chart-elements/context-mixin.js at master · danipv/chart-elements · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/**
 * Base connection between the chart element and the chart.js library.
 * @polymer
 * @mixinFunction
 */
export const ContextMixin = function(superClass) {
  return class extends superClass {
    _measure(cb) {
      function measure() {
        if (this.offsetHeight) {
          cb(true);
        } else {
          cb(false);
        }
      }
      requestAnimationFrame(measure.bind(this));
    }

    _queue() {
      if (this.__hasData) {
        this._measure(hasHeight => {
          if (hasHeight) {
            this.updateChart();
          }
        });
      }
    }

    updateChart() {

      setTimeout(() => {
        if (this.chart) {

          this.chart.stop();
          Object.assign(this.chart.data, this.data);
          this.chart.update();
          this.resize();

        } else {

          setTimeout(() => {
            if (this.__hasData) {
              this.chart = new Chart(this.ctx, {
                type: this.__type,
                data: this.data,
                options: this.options
              });
            }
          }, 0);

        }

      }, 0);

    }

    connectedCallback() {
      super.connectedCallback();
      this.updateComplete.then(() => {
        this.ctx = this.shadowRoot.querySelector('#canvas').getContext('2d');
        this._queue();
      });
    }
  }
};