@progress/kendo-charts 1.24.1 → 1.25.0-dev.202208301021

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

@@ -303,6 +303,10 @@ var title = function () { return ({
     font: SANS16
 }); };
 
+var subtitle = function () { return ({
+    font: SANS12
+}); };
+
 var legend = function () { return ({
     labels: {
         font: SANS12
@@ -329,6 +333,7 @@ export var baseTheme = function (options) {
     },
     seriesDefaults: seriesDefaults(options),
     title: title(),
+    subtitle: subtitle(),
     legend: legend()
 });
 };

package/dist/es/chart/chart.js

@@ -471,7 +471,12 @@ var Chart = (function (Class) {
         model.chart = this;
         model._plotArea = plotArea;
 
-        Title.buildTitle(options.title, model);
+        var title = Title.buildTitle(options.title);
+        var subtitle = Title.buildTitle(options.subtitle, {
+            align: options.title.align,
+            position: options.title.position
+        });
+        model.append.apply(model, Title.orderTitles([title, subtitle]));
 
         if (options.legend && options.legend.visible) {
             model.append(new Legend(plotArea.options.legend, this.chartService));

package/dist/es/chart/pane.js

@@ -36,7 +36,10 @@ var Pane = (function (BoxElement) {
             });
         }
 
-        this.title = Title.buildTitle(titleOptions, this, Pane.prototype.options.title);
+        this.title = Title.buildTitle(titleOptions, Pane.prototype.options.title);
+        if (this.title) {
+            this.append(this.title);
+        }
     };
 
     Pane.prototype.appendAxis = function appendAxis (axis) {

package/dist/es/core/title.js

@@ -1,18 +1,18 @@
 import ChartElement from './chart-element';
 import TextBox from './text-box';
 
-import { X, BLACK, TOP, CENTER } from '../common/constants';
+import { X, BLACK, TOP, CENTER, BOTTOM } from '../common/constants';
 import { getSpacing, setDefaultOptions } from '../common';
 
 var Title = (function (ChartElement) {
     function Title(options) {
         ChartElement.call(this, options);
 
-        this.append(
-            new TextBox(this.options.text, Object.assign({}, this.options, {
-                vAlign: this.options.position
-            }))
-        );
+        this._textBox = new TextBox(this.options.text, Object.assign({}, this.options, {
+            vAlign: this.options.position
+        }));
+
+        this.append(this._textBox);
     }
 
     if ( ChartElement ) Title.__proto__ = ChartElement;
@@ -24,7 +24,7 @@ var Title = (function (ChartElement) {
         this.box.snapTo(targetBox, X);
     };
 
-    Title.buildTitle = function buildTitle (options, parent, defaultOptions) {
+    Title.buildTitle = function buildTitle (options, defaultOptions) {
         var titleOptions = options;
 
         if (typeof options === "string") {
@@ -36,15 +36,35 @@ var Title = (function (ChartElement) {
         var title;
         if (titleOptions && titleOptions.visible && titleOptions.text) {
             title = new Title(titleOptions);
-            parent.append(title);
         }
 
         return title;
     };
 
+    Title.orderTitles = function orderTitles (titles) {
+        var items = [].concat(titles);
+        var top = items.filter(function (item) { return item && item.options.position !== BOTTOM; });
+        var bottom = items.filter(function (item) { return item && item.options.position === BOTTOM; });
+
+        collapseVerticalMargins(top);
+        collapseVerticalMargins(bottom);
+
+        bottom.reverse();
+        return top.concat(bottom);
+    };
+
     return Title;
 }(ChartElement));
 
+function collapseVerticalMargins(items) {
+    for (var i = 1; i < items.length; i++) {
+        var box = items[i]._textBox;
+        var prevBox = items[i - 1]._textBox;
+        prevBox.options.margin = Object.assign(getSpacing(prevBox.options.margin), { bottom: 0 });
+        box.options.margin = Object.assign(getSpacing(box.options.margin), { top: 0 });
+    }
+}
+
 setDefaultOptions(Title, {
     color: BLACK,
     position: TOP,
@@ -53,4 +73,4 @@ setDefaultOptions(Title, {
     padding: getSpacing(5)
 });
 
-export default Title;
+export default Title;

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

@@ -303,6 +303,10 @@ const title = () => ({
     font: SANS16
 });
 
+const subtitle = () => ({
+    font: SANS12
+});
+
 const legend = () => ({
     labels: {
         font: SANS12
@@ -326,6 +330,7 @@ export const baseTheme = (options = {}) => ({
     },
     seriesDefaults: seriesDefaults(options),
     title: title(),
+    subtitle: subtitle(),
     legend: legend()
 });
 

package/dist/es2015/chart/chart.js

@@ -461,7 +461,12 @@ class Chart extends Class {
         model.chart = this;
         model._plotArea = plotArea;
 
-        Title.buildTitle(options.title, model);
+        const title = Title.buildTitle(options.title);
+        const subtitle = Title.buildTitle(options.subtitle, {
+            align: options.title.align,
+            position: options.title.position
+        });
+        model.append.apply(model, Title.orderTitles([title, subtitle]));
 
         if (options.legend && options.legend.visible) {
             model.append(new Legend(plotArea.options.legend, this.chartService));

package/dist/es2015/chart/pane.js

@@ -32,7 +32,10 @@ class Pane extends BoxElement {
             });
         }
 
-        this.title = Title.buildTitle(titleOptions, this, Pane.prototype.options.title);
+        this.title = Title.buildTitle(titleOptions, Pane.prototype.options.title);
+        if (this.title) {
+            this.append(this.title);
+        }
     }
 
     appendAxis(axis) {

package/dist/es2015/core/title.js

@@ -1,18 +1,18 @@
 import ChartElement from './chart-element';
 import TextBox from './text-box';
 
-import { X, BLACK, TOP, CENTER } from '../common/constants';
+import { X, BLACK, TOP, CENTER, BOTTOM } from '../common/constants';
 import { getSpacing, setDefaultOptions } from '../common';
 
 class Title extends ChartElement {
     constructor(options) {
         super(options);
 
-        this.append(
-            new TextBox(this.options.text, Object.assign({}, this.options, {
-                vAlign: this.options.position
-            }))
-        );
+        this._textBox = new TextBox(this.options.text, Object.assign({}, this.options, {
+            vAlign: this.options.position
+        }));
+
+        this.append(this._textBox);
     }
 
     reflow(targetBox) {
@@ -20,7 +20,7 @@ class Title extends ChartElement {
         this.box.snapTo(targetBox, X);
     }
 
-    static buildTitle(options, parent, defaultOptions) {
+    static buildTitle(options, defaultOptions) {
         let titleOptions = options;
 
         if (typeof options === "string") {
@@ -32,11 +32,31 @@ class Title extends ChartElement {
         let title;
         if (titleOptions && titleOptions.visible && titleOptions.text) {
             title = new Title(titleOptions);
-            parent.append(title);
         }
 
         return title;
     }
+
+    static orderTitles(titles) {
+        const items = [].concat(titles);
+        const top = items.filter(item => item && item.options.position !== BOTTOM);
+        const bottom = items.filter(item => item && item.options.position === BOTTOM);
+
+        collapseVerticalMargins(top);
+        collapseVerticalMargins(bottom);
+
+        bottom.reverse();
+        return top.concat(bottom);
+    }
+}
+
+function collapseVerticalMargins(items) {
+    for (let i = 1; i < items.length; i++) {
+        const box = items[i]._textBox;
+        const prevBox = items[i - 1]._textBox;
+        prevBox.options.margin = Object.assign(getSpacing(prevBox.options.margin), { bottom: 0 });
+        box.options.margin = Object.assign(getSpacing(box.options.margin), { top: 0 });
+    }
 }
 
 setDefaultOptions(Title, {
@@ -47,4 +67,4 @@ setDefaultOptions(Title, {
     padding: getSpacing(5)
 });
 
-export default Title;
+export default Title;