• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

vaadin / vaadin-charts / 2481

16 Aug 2018 - 10:26 coverage: 75.948%. First build
2481

Pull #405

travis-ci

web-flow
Skip polymer lint while we investigate the caching issue
Pull Request #405: Improve parity with vaadin-element-skeleton

280 of 410 branches covered (68.29%)

Branch coverage included in aggregate %.

421 of 513 new or added lines in 2 files covered. (82.07%)

421 of 513 relevant lines covered (82.07%)

529.1 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

77.4
/src/vaadin-chart-series.html
1
<!--
2
@license
3
Vaadin Charts
4
Copyright (C) 2015 Vaadin Ltd
5
This program is available under Commercial Vaadin Add-On License 3.0 (CVALv3).
6
See the file LICENSE.md distributed with this software for more information about licensing.
7
See <a href="https://vaadin.com/license/cval-3">the website</a> for the complete license.
8
-->
9

10
<link rel="import" href="../../polymer/polymer-element.html">
11

12
<dom-module id="vaadin-chart-series">
13
  <script>
14
    if (!Polymer.Element) {
Branches [[0, 0]] missed. 72×
NEW
15
      throw new Error(`Unexpected Polymer version ${Polymer.version} is used, expected v2.0.0 or later.`);
!
16
    }
17

18
    (() => {
72×
19
      /**
20
       * `<vaadin-chart-series>` is a Polymer 2 element for creating series for Vaadin Charts.
21
       *
22
       * ### Basic use
23
       *
24
       * To use `<vaadin-chart-series>`, simply add it inside a `<vaadin-chart>` element:
25
       *
26
       * ```
27
       *  <vaadin-chart>
28
       *    <vaadin-chart-series></vaadin-chart-series>
29
       *  </vaadin-chart>
30
       * ```
31
       *
32
       * `<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:
33
       *
34
       * ```
35
       *  <vaadin-chart-series values="[10,20,30,40,50]"></vaadin-chart-series>
36
       * ```
37
       *
38
       * which will add a new line series, where each value will be a data point.
39
       * Look for the Properties session to see all available attributes.
40
       *
41
       * ### Dynamically adding and removing series
42
       *
43
       * You are also able to add and remove series by using DOM API.
44
       *
45
       * To create a new series, simply call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:
46
       *
47
       * ```
48
       *  const chart = \* a <vaadin-chart> reference *\
49
       *  const newSeries = document.createElement('vaadin-chart-series');
50
       *  newSeries.values = [10,20,30,40,50];
51
       *  chart.appendChild(newSeries);
52
       * ```
53
       *
54
       * In order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:
55
       *
56
       * ```
57
       *  const chart = \* a <vaadin-chart> reference *\
58
       *  const seriesToBeRemoved = \* a <vaadin-chart-series> reference to remove*\
59
       *  chart.removeChild(seriesToBeRemoved);
60
       * ```
61
       *
62
       * (There's an issue with `#remove()` method on Firefox, so we advice to remove the element from its parent)
63
       *
64
       *
65
       * @polymer
66
       * @customElement
67
       * @extends {Polymer.Element}
68
       * @memberof Vaadin
69
       * @demo demo/index.html
70
       */
71
      class ChartSeriesElement extends Polymer.Element {
72
        static get is() {
73
          return 'vaadin-chart-series';
216×
74
        }
75

76
        get options() {
77
          const options = Vaadin.Charts.ChartDeepMerger.__deepMerge({}, this.additionalOptions);
1,360×
78

79
          if (this.type) {
1,360×
80
            options.type = this.type;
320×
81
          }
82

83
          if (this.title) {
1,360×
84
            options.name = this.title;
648×
85
          }
86

87
          if (this.values) {
Branches [[3, 1]] missed. 1,360×
88
            options.data = this.values;
1,360×
89
          }
90

91
          if (this.markers) {
Branches [[4, 0]] missed. 1,360×
NEW
92
            if (!this.__isMarkersValid()) {
Branches [[5, 0], [5, 1]] missed. !
NEW
93
              this.markers = 'auto';
!
94
            }
NEW
95
            options.marker = this.__markersConfiguration;
!
96
          }
97

98
          if (this.unit) {
1,360×
99
            options.yAxis = this.unit;
416×
100
          }
101

102
          if (this.stack) {
1,360×
103
            options.stack = this.stack;
192×
104
          }
105

106
          if (isFinite(this.valueMin)) {
1,360×
107
            options.yAxisValueMin = this.valueMin;
32×
108
          }
109

110
          if (isFinite(this.valueMax)) {
1,360×
111
            options.yAxisValueMax = this.valueMax;
32×
112
          }
113

114
          if (this.neckWidth) {
1,360×
115
            options.neckWidth = this.neckWidth;
296×
116
          }
117

118
          if (this.neckPosition) {
1,360×
119
            options.neckHeight = this.neckPosition;
296×
120
          }
121

122
          return options;
1,360×
123
        }
124

125
        static get properties() {
126
          return {
144×
127
            /**
128
             * An array of data used by the series.
129
             * Format depends on the chart type and can be:
130
             *   - An array of numerical values `[y0, y1, y2, y3,...]`
131
             *   - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`
132
             *   - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`
133
             *
134
             *  See more in [API Site](https://api.highcharts.com/highcharts/series)
135
             *
136
             * Note that you should always use [Polymer API](https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation)
137
             * to mutate the values array in order to make the component aware of the
138
             * change and be able to synchronize it.
139
             */
140
            values: {
141
              type: Array,
142
              value: () => []
700×
143
            },
144

145
            /**
146
             *  Value-axis minimum-value.
147
             *  Sets the value to a series bound by 'unit' property.
148
             *  Otherwise sets the value to the first series.
149
             *  Undefined by default (determined from data).
150
             */
151
            valueMin: {
152
              type: Number,
153
              observer: '__valueMinObserver',
154
              reflectToAttribute: true
155
            },
156

157
            /**
158
             *  Value-axis maximum-value.
159
             *  See the 'valueMin'
160
             */
161
            valueMax: {
162
              type: Number,
163
              observer: '__valueMaxObserver',
164
              reflectToAttribute: true
165
            },
166

167
            /**
168
             *  A string with the type of the series.
169
             *  Defaults to `'line'` in case no type is set for the chart.
170
             * Note that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.
171
             */
172
            type: {
173
              type: String,
174
              observer: '__typeObserver',
175
              reflectToAttribute: true
176
            },
177

178
            /**
179
             * The name of the series as shown in the legend, tooltip etc.
180
             */
181
            title: {
182
              type: String,
183
              observer: '__titleObserver',
184
              reflectToAttribute: true
185
            },
186

187
            /**
188
             * Shows/hides data-point markers for line-like series.
189
             * Acceptable input are:
190
             *  - `shown`: markers are always visible
191
             *  - `hidden`: markers are always hidden
192
             *  - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*
193
             */
194
            markers: {
195
              type: String,
196
              observer: '__markersObserver',
197
              reflectToAttribute: true
198
            },
199

200
            /** Used to connect the series to an axis; if multiple series have the same ���unit���, they will share axis.
201
             * Displayed as a title for the axis.
202
             * If no unit is defined, then series will be connected to the first axis.
203
             */
204
            unit: {
205
              type: String,
206
              observer: '__unitObserver',
207
              reflectToAttribute: true
208
            },
209

210
            /** Used to group series in a different stacks.
211
             * "stacking" property should be specified either for each series or in plotOptions.
212
             * It is recommended to place series in a single stack, when they belong to the same yAxis.
213
             */
214
            stack: {
215
              type: String,
216
              observer: '__stackObserver',
217
              reflectToAttribute: true
218
            },
219

220
            /** The height of the neck, the lower part of the funnel.
221
             * A number defines pixel width, a percentage string defines a percentage of the plot area height. Defaults to 30%.
222
             * Note that this property only applies for "funnel" charts.
223
             */
224
            neckPosition: {
225
              type: String,
226
              observer: '__neckPositionOberserver',
227
              reflectToAttribute: true
228
            },
229

230
            /** The width of the neck, the lower part of the funnel.
231
             * A number defines pixel width, a percentage string defines a percentage of the plot area width. Defaults to 30%.
232
             * Note that this property only applies for "funnel" charts.
233
             */
234
            neckWidth: {
235
              type: String,
236
              observer: '__neckWidthOberserver',
237
              reflectToAttribute: true
238
            },
239

240
            /**
241
             * Object with the configured options defined and used to create a series.
242
             *
243
             * @readonly
244
             */
245
            options: {
246
              type: Object
247
            },
248

249
            /**
250
             * Represents additional JSON configuration.
251
             */
252
            additionalOptions: {
253
              type: Object,
254
              reflectToAttribute: true
255
            }
256
          };
257
        }
258

259
        static get observers() {
260
          return [
48×
261
            '__valuesObserver(values.splices)',
262
            '__additionalOptionsObserver(additionalOptions.*)'
263
          ];
264
        }
265

266
        /** @private */
267
        disconnectedCallback() {
268
          super.disconnectedCallback();
644×
269
          if (this.__hasSeriesConfig()) {
644×
270
            this._series.remove();
624×
271
          }
272
        }
273

274
        /**
275
         * Method to attach a series object of type `Highcharts.Series`.
276
         * @param series Object of type `Highcharts.Series`
277
         */
278
        setSeries(series) {
279
          this._series = series;
680×
280
        }
281

282
        __valuesObserver() {
283
          if (this.__hasSeriesConfig()) {
712×
284
            this._series.setData(this.values);
12×
285
          }
286
        }
287

288
        __additionalOptionsObserver() {
289
          if (this.__hasSeriesConfig()) {
Branches [[14, 0]] missed. 20×
NEW
290
            this._series.update(this.additionalOptions);
!
291
          }
292
        }
293

294
        __valueMinObserver() {
295
          if (!this.__hasSeriesConfig()) {
24×
296
            return;
20×
297
          }
298

299
          if (!isFinite(this.valueMin)) {
Branches [[16, 1]] missed. 4×
300
            this.__showWarn('value-min', 'Numbers or null');
4×
301
            return;
4×
302
          }
303

NEW
304
          if (this._series.yAxis) {
Branches [[17, 0], [17, 1]] missed. !
NEW
305
            this._series.yAxis.update({
!
306
              min: this.valueMin
307
            });
308
          }
309
        }
310

311
        __valueMaxObserver() {
312
          if (!this.__hasSeriesConfig()) {
24×
313
            return;
20×
314
          }
315

316
          if (!isFinite(this.valueMax)) {
Branches [[19, 1]] missed. 4×
317
            this.__showWarn('value-max', 'Numbers or null');
4×
318
            return;
4×
319
          }
320

NEW
321
          if (this._series.yAxis) {
Branches [[20, 0], [20, 1]] missed. !
NEW
322
            this._series.yAxis.update({
!
323
              max: this.valueMax
324
            });
325
          }
326
        }
327

328
        __typeObserver() {
329
          if (this.__hasSeriesConfig()) {
164×
330
            this._series.update({
4×
331
              type: this.type
332
            });
333
          }
334
        }
335

336
        __titleObserver() {
337
          if (this.__hasSeriesConfig()) {
328×
338
            this._series.update({
4×
339
              name: this.title
340
            });
341
          }
342
        }
343

344
        __stackObserver() {
345
          if (!this.__hasSeriesConfig()) {
Branches [[23, 1]] missed. 112×
346
            return;
112×
347
          }
348

NEW
349
          this._series.update({
!
350
            stack: this.stack
351
          });
352
        }
353

354
        __neckPositionOberserver() {
355
          if (!this.__hasSeriesConfig()) {
152×
356
            return;
148×
357
          }
358
          this._series.update({
4×
359
            neckHeight: this.neckPosition
360
          });
361
        }
362

363
        __neckWidthOberserver() {
364
          if (!this.__hasSeriesConfig()) {
152×
365
            return;
148×
366
          }
367
          this._series.update({
4×
368
            neckWidth: this.neckWidth
369
          });
370
        }
371

372
        __unitObserver() {
373
          if (this.__hasSeriesConfig()) {
212×
374
            const parent = this.parentNode instanceof Vaadin.ChartElement && this.parentNode;
4×
375
            if (parent && parent instanceof Vaadin.ChartElement) {
Branches [[28, 1]] missed. 4×
376

377
              if (this.unit && !parent.__getAxis(this.unit)) {
Branches [[30, 0], [31, 1]] missed. 4×
NEW
378
                const title = {title: {text: this.unit}};
!
NEW
379
                parent.__addAxis(Object.assign({id: this.unit, axisGenerated: true}, title));
!
380
              }
381
              this._series.update({yAxis: this.unit || 0});
4×
382
              this.__valueMinObserver();
4×
383
              this.__valueMaxObserver();
4×
384
              parent.__removeAxisIfEmpty();
4×
385
            }
386
          }
387
        }
388

389
        __hasSeriesConfig() {
390
          return !!this._series;
2,552×
391
        }
392

393
        __isMarkersValid() {
394
          if (['shown', 'hidden', 'auto'].indexOf(this.markers) === -1) {
Branches [[33, 0]] missed. 8×
NEW
395
            this.__showWarn('markers', '"shown", "hidden" or "auto"');
!
NEW
396
            return false;
!
397
          }
398
          return true;
8×
399
        }
400

401
        __markersObserver() {
402
          if (!this.__isMarkersValid()) {
Branches [[34, 0]] missed. 8×
NEW
403
            this.markers = 'auto';
!
NEW
404
            return;
!
405
          }
406
          if (this.__hasSeriesConfig()) {
Branches [[35, 1]] missed. 8×
407
            this._series.update({
8×
408
              marker: this.__markersConfiguration
409
            });
410
          }
411
        }
412

413
        get __markersConfiguration() {
414
          const config = {};
8×
415
          switch (this.markers) {
Branches [[36, 2], [36, 3]] missed. 8×
416
            case 'shown':
417
              config.enabled = true;
4×
418
              break;
4×
419
            case 'hidden':
420
              config.enabled = false;
4×
421
              break;
4×
422
            case 'auto':
423
            default:
NEW
424
              config.enabled = null;
!
NEW
425
              break;
!
426
          }
427

428
          return config;
8×
429
        }
430

431
        __showWarn(propertyName, acceptedValues) {
432
          console.warn('<vaadin-chart-series> Acceptable values for "' + propertyName + '" are ' + acceptedValues);
8×
433
        }
434
      }
435

436
      customElements.define(ChartSeriesElement.is, ChartSeriesElement);
72×
437

438
      window.Vaadin = window.Vaadin || {};
Branches [[37, 1]] missed. 72×
439

440
      /**
441
       * @namespace Vaadin
442
       */
443
      window.Vaadin.ChartSeriesElement = ChartSeriesElement;
72×
444
    })();
445
  </script>
446
</dom-module>
Troubleshooting · Open an Issue · Sales · Support · ENTERPRISE · CAREERS · STATUS
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2023 Coveralls, Inc