@progress/kendo-charts 2.7.2-develop.3 → 2.7.3-develop.1

package/dist/es/chart/bar-chart/bar.js

@@ -6,7 +6,7 @@ import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE,
 
 import hasGradientOverlay from '../utils/has-gradient-overlay';
 
-import { ChartElement, createPatternFill, Point } from '../../core';
+import { ChartElement, createPatternFill, Point, Box } from '../../core';
 
 import PointEventsMixin from '../mixins/point-events-mixin';
 import NoteMixin from '../mixins/note-mixin';
@@ -14,6 +14,7 @@ import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mix
 
 import { WHITE, LEFT, RIGHT, BOTTOM, TOP } from '../../common/constants';
 import { alignPathToPixel, deepExtend, defined, getTemplate, valueOrDefault } from '../../common';
+import unclipBox from '../utils/unclip-box';
 
 const BAR_ALIGN_MIN_WIDTH = 6;
 
@@ -272,6 +273,20 @@ class Bar extends ChartElement {
         return this.box.overlaps(box);
     }
 
+    unclipBox() {
+        const label = this.label && this.label.textBox;
+        return unclipBox(this.box.clone(), [label, this.note]);
+    }
+
+    labelBox() {
+        const label = this.label && this.label.textBox;
+        return label ? label.box : new Box();
+    }
+
+    noteBox() {
+        return this.note ? this.note.box : new Box();
+    }
+
     pointData() {
         return {
             dataItem: this.dataItem,

package/dist/es/chart/chart-container.js

@@ -2,6 +2,7 @@ import { drawing as draw } from '@progress/kendo-drawing';
 import { alignPathToPixel } from '../common';
 
 import { ChartElement } from '../core';
+import { Box } from '../core';
 
 class ChartContainer extends ChartElement {
     constructor(options, pane) {
@@ -49,31 +50,75 @@ class ChartContainer extends ChartElement {
         const { children: charts, clipBox } = this;
 
         for (let i = 0; i < charts.length; i++) {
-            const points = charts[i].points || {};
+            const points = charts[i].points || [];
             const length = points.length;
 
             for (let j = 0; j < length; j++) {
                 const point = points[j];
-                if (point && point.visible !== false && point.overlapsBox && point.overlapsBox(clipBox)) {
-                    if (point.unclipElements) {
-                        point.unclipElements();
-                    } else {
-                        const { label, note } = point;
-
-                        if (label && label.options.visible) {
-                            if (label.alignToClipBox) {
-                                label.alignToClipBox(clipBox);
+                if (point && point.visible !== false && point.overlapsBox) {
+                    if (point.overlapsBox(clipBox)) {
+                        if (point.unclipElements) {
+                            point.unclipElements();
+                        } else {
+                            const { label, note } = point;
+
+                            if (label && label.options.visible) {
+                                if (label.alignToClipBox) {
+                                    label.alignToClipBox(clipBox);
+                                }
+                                label.options.noclip = true;
+                            }
+
+                            if (note && note.options.visible) {
+                                note.options.noclip = true;
                             }
-                            label.options.noclip = true;
                         }
+                    }
+                }
+            }
+        }
+    }
+
+    unclipBox() {
+        const { children: charts } = this;
+        const clipBox = this._clipBox();
+        const box = clipBox.clone();
+
+        for (let i = 0; i < charts.length; i++) {
+            const points = charts[i].points || [];
+            const length = points.length;
 
-                        if (note && note.options.visible) {
-                            note.options.noclip = true;
+            for (let j = 0; j < length; j++) {
+                const point = points[j];
+
+                if (point && point.unclipBox && point.overlapsBox && point.visible !== false) {
+                    if (!point.overlapsBox(clipBox)) {
+                        // Hide points outside of the viewport (clipBox)
+                        if (point.clipElements) {
+                            point.clipElements();
                         }
+
+                        continue;
+                    }
+
+                    // Extend viewport to include all point elements, including labels
+                    const unclipBox = point.unclipBox();
+                    if (box.overlaps(unclipBox)) {
+                        const labelBox = point.labelBox ? point.labelBox() : new Box();
+                        const noteBox = point.noteBox ? point.noteBox() : new Box();
+
+                        const heightLimit = Math.max(labelBox.height(), noteBox.height());
+                        const widthLimit = Math.max(labelBox.width(), noteBox.width());
+
+                        // Limit the size change of the viewport to the label and note boxes dimensions
+                        // to avoid extending it too much.
+                        box.wrapLimit(unclipBox, widthLimit, heightLimit);
                     }
                 }
             }
         }
+
+        return box;
     }
 
     destroy() {
@@ -85,4 +130,4 @@ class ChartContainer extends ChartElement {
 
 ChartContainer.prototype.isStackRoot = true;
 
-export default ChartContainer;
+export default ChartContainer;

package/dist/es/chart/line-chart/line-point.js

@@ -9,13 +9,14 @@ import { LINE_MARKER_SIZE, FADEIN, INITIAL_ANIMATION_DURATION, BORDER_BRIGHTNESS
 import { WHITE, CIRCLE, CENTER, TOP, BOTTOM, LEFT, HIGHLIGHT_ZINDEX } from '../../common/constants';
 import { deepExtend, defined, getTemplate, getAriaTemplate, valueOrDefault, getSpacing } from '../../common';
 import guid from '../../core/utils/guid';
+import unclipBox from '../utils/unclip-box';
 
 class LinePoint extends ChartElement {
     constructor(value, options) {
         super();
 
         this.value = value;
-        this.options = options;
+        this.options = Object.assign({}, options);
         this.aboveAxis = valueOrDefault(this.options.aboveAxis, true);
         this.tooltipTracking = true;
         this._id = guid();
@@ -103,7 +104,7 @@ class LinePoint extends ChartElement {
         return border;
     }
 
-    createVisual() {}
+    createVisual() { }
 
     createMarker() {
         const options = this.options.markers;
@@ -242,7 +243,7 @@ class LinePoint extends ChartElement {
             const size = this.options.markers.size;
             const halfSize = size / 2;
             const center = this.box.center();
-            rect = new geom.Rect([ center.x - halfSize, center.y - halfSize ], [ size, size ]);
+            rect = new geom.Rect([center.x - halfSize, center.y - halfSize], [size, size]);
         }
 
         return {
@@ -311,6 +312,10 @@ class LinePoint extends ChartElement {
         return markerBox.overlaps(box);
     }
 
+    clipElements() {
+        this.options.visible = false;
+    }
+
     unclipElements() {
         if (this.label) {
             this.label.options.noclip = true;
@@ -321,6 +326,18 @@ class LinePoint extends ChartElement {
         }
     }
 
+    unclipBox() {
+        return unclipBox(this.markerBox().clone(), [this.label, this.note]);
+    }
+
+    labelBox() {
+        return this.label ? this.label.box : new Box();
+    }
+
+    noteBox() {
+        return this.note ? this.note.box : new Box();
+    }
+
     pointData() {
         return {
             dataItem: this.dataItem,

package/dist/es/chart/pane.js

@@ -99,6 +99,11 @@ class Pane extends BoxElement {
         }
     }
 
+    // This is the box for the charts in the pane _and_ all the overflowing ("unclipped") labels.
+    unclipBox() {
+        return this.chartContainer.unclipBox();
+    }
+
     visualStyle() {
         const style = super.visualStyle();
         style.zIndex = -10;

package/dist/es/chart/plotarea/plotarea-base.js

@@ -7,8 +7,10 @@ import { hasValue } from '../utils';
 import SeriesBinder from '../series-binder';
 
 import { WHITE, BLACK, X, Y, COORD_PRECISION, TOP, BOTTOM, LEFT, RIGHT, START, END, INHERIT } from '../../common/constants';
-import { append, deepExtend, defined, getSpacing, getTemplate, inArray, isFunction, isString,
-    limitValue, round, setDefaultOptions, last, cycleIndex } from '../../common';
+import {
+    append, deepExtend, defined, getSpacing, getTemplate, inArray, isFunction, isString,
+    limitValue, round, setDefaultOptions, last, cycleIndex
+} from '../../common';
 import { TRENDLINE_SERIES } from '../constants';
 
 const visiblePoint = (point) => point.options.visible !== false;
@@ -291,7 +293,7 @@ class PlotAreaBase extends ChartElement {
             if (seriesByPane[pane]) {
                 seriesByPane[pane].push(currentSeries);
             } else {
-                seriesByPane[pane] = [ currentSeries ];
+                seriesByPane[pane] = [currentSeries];
             }
         }
 
@@ -317,6 +319,15 @@ class PlotAreaBase extends ChartElement {
         const margin = getSpacing(options.margin);
 
         this.box = targetBox.clone().unpad(margin);
+
+        this.reflowArea(panes);
+
+        if (this.ensureLabelsFit(panes)) {
+            this.reflowArea(panes);
+        }
+    }
+
+    reflowArea(panes) {
         this.reflowPanes();
 
         this.detachLabels();
@@ -324,6 +335,42 @@ class PlotAreaBase extends ChartElement {
         this.reflowCharts(panes);
     }
 
+    ensureLabelsFit(panes) {
+        let change = false;
+
+        panes.forEach((pane) => {
+            const unclipBox = pane.unclipBox();
+            const clipBox = pane.chartContainer._clipBox();
+            const padding = getSpacing(pane.options.padding || {});
+
+            if (unclipBox.y1 < clipBox.y1 + padding.top) {
+                change = true;
+                padding.top = clipBox.y1 - unclipBox.y1 + padding.top;
+            }
+
+            if (unclipBox.y2 > clipBox.y2 - padding.bottom) {
+                change = true;
+                padding.bottom = unclipBox.y2 - clipBox.y2 + padding.bottom;
+            }
+
+            if (unclipBox.x1 < clipBox.x1 + padding.left) {
+                change = true;
+                padding.left = clipBox.x1 - unclipBox.x1 + padding.left;
+            }
+
+            if (unclipBox.x2 > clipBox.x2 - padding.right) {
+                change = true;
+                padding.right = unclipBox.x2 - clipBox.x2 + padding.right;
+            }
+
+            if (change) {
+                pane.options.padding = padding;
+            }
+        });
+
+        return change;
+    }
+
     redraw(panes) {
         const panesArray = [].concat(panes);
         this.initSeries();

package/dist/es/chart/utils/unclip-box.js

@@ -0,0 +1,10 @@
+export default function unclipBox(box, elements) {
+    elements.forEach(element => {
+        const options = element && element.options;
+        const elBox = element && (element.box || element.wrapperBox);
+        if (options && elBox && options.noclip !== false && options.visible !== false) {
+            box.wrap(elBox);
+        }
+    });
+    return box;
+}

package/dist/es/chart/utils.js

@@ -15,3 +15,4 @@ export { default as isDateAxis } from './utils/is-date-axis';
 export { default as segmentVisible } from './utils/segment-visible';
 export { default as singleItemOrArray } from './utils/single-item-or-array';
 export { default as createOutOfRangePoints } from './utils/create-out-of-range-points';
+export { default as unclipBox } from './utils/unclip-box';

package/dist/es/common/get-supported-features.js

@@ -13,8 +13,8 @@ function detectOS(ua) {
             wp: /(Windows Phone(?: OS)?)\s(\d+)\.(\d+(\.\d+)?)/,
             fire: /(Silk)\/(\d+)\.(\d+(\.\d+)?)/,
             android: /(Android|Android.*(?:Opera|Firefox).*?\/)\s*(\d+)\.?(\d+(\.\d+)?)?/,
-            iphone: /(iPhone|iPod).*OS\s+(\d+)[\._]([\d\._]+)/,
-            ipad: /(iPad).*OS\s+(\d+)[\._]([\d_]+)/,
+            iphone: /(iPhone|iPod).*OS\s+(\d+)[._]([\d._]+)/,
+            ipad: /(iPad).*OS\s+(\d+)[._]([\d_]+)/,
             playbook: /(PlayBook).*?Tablet\s*OS\s*(\d+)\.(\d+(\.\d+)?)/,
             windows: /(MSIE)\s+(\d+)\.(\d+(\.\d+)?)/,
             tizen: /(tizen).*?Version\/(\d+)\.(\d+(\.\d+)?)/i,

package/dist/es/core/box.js

@@ -63,6 +63,15 @@ class Box extends Class {
         return this;
     }
 
+    wrapLimit(targetBox, widthLimit, heightLimit) {
+        this.x1 = Math.min(this.x1, Math.max(this.x1 - widthLimit, targetBox.x1));
+        this.y1 = Math.min(this.y1, Math.max(this.y1 - heightLimit, targetBox.y1));
+        this.x2 = Math.max(this.x2, Math.min(this.x2 + widthLimit, targetBox.x2));
+        this.y2 = Math.max(this.y2, Math.min(this.y2 + heightLimit, targetBox.y2));
+
+        return this;
+    }
+
     wrapPoint(point) {
         const arrayPoint = isArray(point);
         const x = arrayPoint ? point[0] : point.x;

package/dist/es2015/chart/bar-chart/bar.js

@@ -6,7 +6,7 @@ import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE,
 
 import hasGradientOverlay from '../utils/has-gradient-overlay';
 
-import { ChartElement, createPatternFill, Point } from '../../core';
+import { ChartElement, createPatternFill, Point, Box } from '../../core';
 
 import PointEventsMixin from '../mixins/point-events-mixin';
 import NoteMixin from '../mixins/note-mixin';
@@ -14,6 +14,7 @@ import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mix
 
 import { WHITE, LEFT, RIGHT, BOTTOM, TOP } from '../../common/constants';
 import { alignPathToPixel, deepExtend, defined, getTemplate, valueOrDefault } from '../../common';
+import unclipBox from '../utils/unclip-box';
 
 const BAR_ALIGN_MIN_WIDTH = 6;
 
@@ -272,6 +273,20 @@ class Bar extends ChartElement {
         return this.box.overlaps(box);
     }
 
+    unclipBox() {
+        const label = this.label && this.label.textBox;
+        return unclipBox(this.box.clone(), [label, this.note]);
+    }
+
+    labelBox() {
+        const label = this.label && this.label.textBox;
+        return label ? label.box : new Box();
+    }
+
+    noteBox() {
+        return this.note ? this.note.box : new Box();
+    }
+
     pointData() {
         return {
             dataItem: this.dataItem,

package/dist/es2015/chart/chart-container.js

@@ -2,6 +2,7 @@ import { drawing as draw } from '@progress/kendo-drawing';
 import { alignPathToPixel } from '../common';
 
 import { ChartElement } from '../core';
+import { Box } from '../core';
 
 class ChartContainer extends ChartElement {
     constructor(options, pane) {
@@ -49,31 +50,75 @@ class ChartContainer extends ChartElement {
         const { children: charts, clipBox } = this;
 
         for (let i = 0; i < charts.length; i++) {
-            const points = charts[i].points || {};
+            const points = charts[i].points || [];
             const length = points.length;
 
             for (let j = 0; j < length; j++) {
                 const point = points[j];
-                if (point && point.visible !== false && point.overlapsBox && point.overlapsBox(clipBox)) {
-                    if (point.unclipElements) {
-                        point.unclipElements();
-                    } else {
-                        const { label, note } = point;
-
-                        if (label && label.options.visible) {
-                            if (label.alignToClipBox) {
-                                label.alignToClipBox(clipBox);
+                if (point && point.visible !== false && point.overlapsBox) {
+                    if (point.overlapsBox(clipBox)) {
+                        if (point.unclipElements) {
+                            point.unclipElements();
+                        } else {
+                            const { label, note } = point;
+
+                            if (label && label.options.visible) {
+                                if (label.alignToClipBox) {
+                                    label.alignToClipBox(clipBox);
+                                }
+                                label.options.noclip = true;
+                            }
+
+                            if (note && note.options.visible) {
+                                note.options.noclip = true;
                             }
-                            label.options.noclip = true;
                         }
+                    }
+                }
+            }
+        }
+    }
+
+    unclipBox() {
+        const { children: charts } = this;
+        const clipBox = this._clipBox();
+        const box = clipBox.clone();
+
+        for (let i = 0; i < charts.length; i++) {
+            const points = charts[i].points || [];
+            const length = points.length;
 
-                        if (note && note.options.visible) {
-                            note.options.noclip = true;
+            for (let j = 0; j < length; j++) {
+                const point = points[j];
+
+                if (point && point.unclipBox && point.overlapsBox && point.visible !== false) {
+                    if (!point.overlapsBox(clipBox)) {
+                        // Hide points outside of the viewport (clipBox)
+                        if (point.clipElements) {
+                            point.clipElements();
                         }
+
+                        continue;
+                    }
+
+                    // Extend viewport to include all point elements, including labels
+                    const unclipBox = point.unclipBox();
+                    if (box.overlaps(unclipBox)) {
+                        const labelBox = point.labelBox ? point.labelBox() : new Box();
+                        const noteBox = point.noteBox ? point.noteBox() : new Box();
+
+                        const heightLimit = Math.max(labelBox.height(), noteBox.height());
+                        const widthLimit = Math.max(labelBox.width(), noteBox.width());
+
+                        // Limit the size change of the viewport to the label and note boxes dimensions
+                        // to avoid extending it too much.
+                        box.wrapLimit(unclipBox, widthLimit, heightLimit);
                     }
                 }
             }
         }
+
+        return box;
     }
 
     destroy() {
@@ -85,4 +130,4 @@ class ChartContainer extends ChartElement {
 
 ChartContainer.prototype.isStackRoot = true;
 
-export default ChartContainer;
+export default ChartContainer;

package/dist/es2015/chart/line-chart/line-point.js

@@ -9,13 +9,14 @@ import { LINE_MARKER_SIZE, FADEIN, INITIAL_ANIMATION_DURATION, BORDER_BRIGHTNESS
 import { WHITE, CIRCLE, CENTER, TOP, BOTTOM, LEFT, HIGHLIGHT_ZINDEX } from '../../common/constants';
 import { deepExtend, defined, getTemplate, getAriaTemplate, valueOrDefault, getSpacing } from '../../common';
 import guid from '../../core/utils/guid';
+import unclipBox from '../utils/unclip-box';
 
 class LinePoint extends ChartElement {
     constructor(value, options) {
         super();
 
         this.value = value;
-        this.options = options;
+        this.options = Object.assign({}, options);
         this.aboveAxis = valueOrDefault(this.options.aboveAxis, true);
         this.tooltipTracking = true;
         this._id = guid();
@@ -103,7 +104,7 @@ class LinePoint extends ChartElement {
         return border;
     }
 
-    createVisual() {}
+    createVisual() { }
 
     createMarker() {
         const options = this.options.markers;
@@ -242,7 +243,7 @@ class LinePoint extends ChartElement {
             const size = this.options.markers.size;
             const halfSize = size / 2;
             const center = this.box.center();
-            rect = new geom.Rect([ center.x - halfSize, center.y - halfSize ], [ size, size ]);
+            rect = new geom.Rect([center.x - halfSize, center.y - halfSize], [size, size]);
         }
 
         return {
@@ -311,6 +312,10 @@ class LinePoint extends ChartElement {
         return markerBox.overlaps(box);
     }
 
+    clipElements() {
+        this.options.visible = false;
+    }
+
     unclipElements() {
         if (this.label) {
             this.label.options.noclip = true;
@@ -321,6 +326,18 @@ class LinePoint extends ChartElement {
         }
     }
 
+    unclipBox() {
+        return unclipBox(this.markerBox().clone(), [this.label, this.note]);
+    }
+
+    labelBox() {
+        return this.label ? this.label.box : new Box();
+    }
+
+    noteBox() {
+        return this.note ? this.note.box : new Box();
+    }
+
     pointData() {
         return {
             dataItem: this.dataItem,

package/dist/es2015/chart/pane.js

@@ -99,6 +99,11 @@ class Pane extends BoxElement {
         }
     }
 
+    // This is the box for the charts in the pane _and_ all the overflowing ("unclipped") labels.
+    unclipBox() {
+        return this.chartContainer.unclipBox();
+    }
+
     visualStyle() {
         const style = super.visualStyle();
         style.zIndex = -10;

package/dist/es2015/chart/plotarea/plotarea-base.js

@@ -7,8 +7,10 @@ import { hasValue } from '../utils';
 import SeriesBinder from '../series-binder';
 
 import { WHITE, BLACK, X, Y, COORD_PRECISION, TOP, BOTTOM, LEFT, RIGHT, START, END, INHERIT } from '../../common/constants';
-import { append, deepExtend, defined, getSpacing, getTemplate, inArray, isFunction, isString,
-    limitValue, round, setDefaultOptions, last, cycleIndex } from '../../common';
+import {
+    append, deepExtend, defined, getSpacing, getTemplate, inArray, isFunction, isString,
+    limitValue, round, setDefaultOptions, last, cycleIndex
+} from '../../common';
 import { TRENDLINE_SERIES } from '../constants';
 
 const visiblePoint = (point) => point.options.visible !== false;
@@ -291,7 +293,7 @@ class PlotAreaBase extends ChartElement {
             if (seriesByPane[pane]) {
                 seriesByPane[pane].push(currentSeries);
             } else {
-                seriesByPane[pane] = [ currentSeries ];
+                seriesByPane[pane] = [currentSeries];
             }
         }
 
@@ -317,6 +319,15 @@ class PlotAreaBase extends ChartElement {
         const margin = getSpacing(options.margin);
 
         this.box = targetBox.clone().unpad(margin);
+
+        this.reflowArea(panes);
+
+        if (this.ensureLabelsFit(panes)) {
+            this.reflowArea(panes);
+        }
+    }
+
+    reflowArea(panes) {
         this.reflowPanes();
 
         this.detachLabels();
@@ -324,6 +335,42 @@ class PlotAreaBase extends ChartElement {
         this.reflowCharts(panes);
     }
 
+    ensureLabelsFit(panes) {
+        let change = false;
+
+        panes.forEach((pane) => {
+            const unclipBox = pane.unclipBox();
+            const clipBox = pane.chartContainer._clipBox();
+            const padding = getSpacing(pane.options.padding || {});
+
+            if (unclipBox.y1 < clipBox.y1 + padding.top) {
+                change = true;
+                padding.top = clipBox.y1 - unclipBox.y1 + padding.top;
+            }
+
+            if (unclipBox.y2 > clipBox.y2 - padding.bottom) {
+                change = true;
+                padding.bottom = unclipBox.y2 - clipBox.y2 + padding.bottom;
+            }
+
+            if (unclipBox.x1 < clipBox.x1 + padding.left) {
+                change = true;
+                padding.left = clipBox.x1 - unclipBox.x1 + padding.left;
+            }
+
+            if (unclipBox.x2 > clipBox.x2 - padding.right) {
+                change = true;
+                padding.right = unclipBox.x2 - clipBox.x2 + padding.right;
+            }
+
+            if (change) {
+                pane.options.padding = padding;
+            }
+        });
+
+        return change;
+    }
+
     redraw(panes) {
         const panesArray = [].concat(panes);
         this.initSeries();

package/dist/es2015/chart/utils/unclip-box.js

@@ -0,0 +1,10 @@
+export default function unclipBox(box, elements) {
+    elements.forEach(element => {
+        const options = element && element.options;
+        const elBox = element && (element.box || element.wrapperBox);
+        if (options && elBox && options.noclip !== false && options.visible !== false) {
+            box.wrap(elBox);
+        }
+    });
+    return box;
+}

package/dist/es2015/chart/utils.js

@@ -15,3 +15,4 @@ export { default as isDateAxis } from './utils/is-date-axis';
 export { default as segmentVisible } from './utils/segment-visible';
 export { default as singleItemOrArray } from './utils/single-item-or-array';
 export { default as createOutOfRangePoints } from './utils/create-out-of-range-points';
+export { default as unclipBox } from './utils/unclip-box';

package/dist/es2015/common/get-supported-features.js

@@ -13,8 +13,8 @@ function detectOS(ua) {
             wp: /(Windows Phone(?: OS)?)\s(\d+)\.(\d+(\.\d+)?)/,
             fire: /(Silk)\/(\d+)\.(\d+(\.\d+)?)/,
             android: /(Android|Android.*(?:Opera|Firefox).*?\/)\s*(\d+)\.?(\d+(\.\d+)?)?/,
-            iphone: /(iPhone|iPod).*OS\s+(\d+)[\._]([\d\._]+)/,
-            ipad: /(iPad).*OS\s+(\d+)[\._]([\d_]+)/,
+            iphone: /(iPhone|iPod).*OS\s+(\d+)[._]([\d._]+)/,
+            ipad: /(iPad).*OS\s+(\d+)[._]([\d_]+)/,
             playbook: /(PlayBook).*?Tablet\s*OS\s*(\d+)\.(\d+(\.\d+)?)/,
             windows: /(MSIE)\s+(\d+)\.(\d+(\.\d+)?)/,
             tizen: /(tizen).*?Version\/(\d+)\.(\d+(\.\d+)?)/i,