@progress/kendo-charts 2.5.4-dev.202410140828 → 2.6.0-dev.202410171740

package/dist/es2015/chart/chart.js

@@ -330,6 +330,7 @@ class Chart extends Class {
         this._createPannable();
         this._createZoomSelection();
         this._createMousewheelZoom();
+        this._setComputedStyles();
 
         this.trigger(RENDER);
         triggerPaneRender(this._plotArea.panes);
@@ -341,7 +342,16 @@ class Chart extends Class {
         this._redrawFocusHighlight();
     }
 
+    _setComputedStyles() {
+        const titleHeight = this.titleHeight();
+        this.element.style.setProperty('--kendo-chart-computed-title-height', `${titleHeight}px`);
+    }
+
     _redrawFocusHighlight() {
+        if (this._destroyed) {
+            return;
+        }
+
         const { _focusState: { legendInFocus, preserveHighlight } } = this;
 
         if (legendInFocus && preserveHighlight) {
@@ -528,9 +538,30 @@ class Chart extends Class {
         model.append(plotArea);
         model.reflow();
 
+        this._setTitleBox(title, subtitle);
+
         return model;
     }
 
+    _setTitleBox(title, subtitle) {
+        if (!title && !subtitle) {
+            return;
+        }
+
+        this._titleBox = (title || subtitle).box.clone();
+
+        const titlePosition = title ? title.options.position : '';
+        const subtitlePosition = subtitle ? subtitle.options.position : '';
+        const samePosition = titlePosition === subtitlePosition;
+        const subtitleAtTop = subtitlePosition !== 'bottom';
+
+        if (samePosition && subtitle) {
+            this._titleBox.wrap(subtitle.box);
+        } else if (title && subtitle && subtitleAtTop) {
+            this._titleBox = subtitle.box.clone();
+        }
+    }
+
     _modelOptions() {
         const options = this.options;
         const size = this.getSize();
@@ -647,6 +678,14 @@ class Chart extends Class {
         return isDefaultPrevented;
     }
 
+    titleHeight() {
+        if (!this._titleBox) {
+            return 0;
+        }
+
+        return this._titleBox.height();
+    }
+
     _attachEvents() {
         const element = this.element;
 

package/dist/es2015/chart/constants.js

@@ -122,6 +122,7 @@ const MOUSEWHEEL_ZOOM_RATE = 0.3;
 
 const DRILLDOWN = "drilldown";
 const DRILLDOWN_FIELD = "drilldown";
+const PATTERN_FIELD = "pattern";
 
 const MIN_MOVING_AVERAGE_PERIOD = 2;
 
@@ -158,6 +159,7 @@ export {
     TRENDLINE_MOVING_AVERAGE,
     TRENDLINE_POLYNOMIAL,
     TRENDLINE_POWER,
+    PATTERN_FIELD,
     CHART_POINT_ROLE, CHART_POINT_CLASSNAME, CHART_POINT_ROLE_DESCRIPTION,
     LEGEND_ITEM_ROLE, LEGEND_ITEM_CLASSNAME,
     LEGEND_ITEM_ARIA_ROLE_DESCRIPTION

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

@@ -10,6 +10,8 @@ const DONUT_SECTOR_ANIM_DELAY = 50;
 class DonutChart extends PieChart {
     addValue(value, sector, fields) {
         const segmentOptions = deepExtend({}, fields.series, { index: fields.index });
+        segmentOptions.pattern = fields.pattern || segmentOptions.pattern;
+
         this.evalSegmentOptions(segmentOptions, value, fields);
 
         this.createLegendItem(value, segmentOptions, fields);

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

@@ -85,6 +85,8 @@ class FunnelChart extends ChartElement {
 
     createSegment(value, fields) {
         const seriesOptions = deepExtend({}, fields.series);
+        seriesOptions.pattern = fields.pattern || seriesOptions.pattern;
+
         this.evalSegmentOptions(seriesOptions, value, fields);
 
         this.createLegendItem(value, seriesOptions, fields);

package/dist/es2015/chart/funnel-chart/funnel-segment.js

@@ -7,6 +7,7 @@ import { WHITE } from '../../common/constants';
 import { deepExtend, setDefaultOptions, getTemplate } from '../../common';
 import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 import { CHART_POINT_CLASSNAME, CHART_POINT_ROLE, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
+import { createPatternFill } from '../../core/pattern';
 
 class FunnelSegment extends ChartElement {
     constructor(value, options, segmentOptions) {
@@ -74,10 +75,10 @@ class FunnelSegment extends ChartElement {
         const options = this.options;
         const border = options.border;
         const path = draw.Path.fromPoints(this.points, {
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: options.color,
                 opacity: options.opacity
-            },
+            }),
             stroke: {
                 color: border.color,
                 opacity: border.opacity,

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

@@ -116,6 +116,7 @@ class HeatmapChart extends ChartElement {
         let pointOptions = this.pointOptions(series, fields.seriesIx);
         let color = fields.color || series.color;
 
+        pointOptions.pattern = fields.pattern || pointOptions.pattern;
         pointOptions = this.evalPointOptions(pointOptions, value, fields);
 
         if (isFunction(series.color)) {

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

@@ -148,6 +148,7 @@ class HeatmapPoint extends ChartElement {
             rotation: markerOptions.rotation,
             background: this.color,
             border: this.markerBorder(),
+            pattern: options.pattern,
             borderRadius: markerOptions.borderRadius,
             opacity: this.series.opacity || options.opacity,
             zIndex: valueOrDefault(options.zIndex, this.series.zIndex),

package/dist/es2015/chart/legend/legend-item.js

@@ -108,14 +108,32 @@ class LegendItem extends BoxElement {
         return this._markerLineArea;
     }
 
+    _reduceSize(object, prop, factor = 0.6) {
+        if (typeof object[prop] === 'number') {
+            object[prop] = object[prop] * factor;
+        }
+    }
+
     _createSquare() {
         const options = this.options;
         if (options.type === AREA) {
+            let pattern = options.pattern || (options.series || {}).pattern;
+            if (pattern) {
+                if (typeof pattern === 'function') {
+                    pattern = pattern(options.series);
+                }
+                pattern = structuredClone(pattern);
+                this._reduceSize(pattern, 'gap');
+                this._reduceSize(pattern, 'width');
+                this._reduceSize(pattern, 'radius');
+            }
+
             this._square = new LegendItemSquare(Object.assign({}, {border: options.border,
                 vAlign: options.markers.visible ? BOTTOM : CENTER,
                 highlight: this._highlightOptions()},
                 options.area,
-                {background: options.area.background || options.markerColor}));
+                {pattern: pattern,
+                background: options.area.background || options.markerColor}));
             this.markerWrap.append(this._square);
         }
         return this._square;

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

@@ -115,6 +115,7 @@ class LinePoint extends ChartElement {
             background: options.background,
             border: this.markerBorder(),
             opacity: options.opacity,
+            pattern: this.options.pattern,
             zIndex: valueOrDefault(options.zIndex, this.series.zIndex),
             animation: options.animation,
             visual: options.visual,

package/dist/es2015/chart/mixins/pie-chart-mixin.js

@@ -43,6 +43,7 @@ const PieChartMixin = {
                     text: text,
                     series: options.series,
                     markerColor: markerColor,
+                    pattern: point.pattern,
                     labels: itemLabelOptions
                 });
             }

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

@@ -73,6 +73,7 @@ class PieChart extends ChartElement {
                 callback(value, new Ring(null, 0, 0, currentAngle, angle), {
                     owner: this,
                     category: defined(fields.category) ? fields.category : "",
+                    pattern: defined(fields.pattern) ? fields.pattern : currentSeries.pattern,
                     index: i,
                     series: currentSeries,
                     seriesIx: seriesIx,
@@ -109,6 +110,7 @@ class PieChart extends ChartElement {
 
     addValue(value, sector, fields) {
         const segmentOptions = deepExtend({}, fields.series, { index: fields.index });
+        segmentOptions.pattern = fields.pattern || segmentOptions.pattern;
         this.evalSegmentOptions(segmentOptions, value, fields);
 
         this.createLegendItem(value, segmentOptions, fields);

package/dist/es2015/chart/pie-chart/pie-segment.js

@@ -1,6 +1,6 @@
 import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
 
-import { ChartElement, ShapeBuilder, TextBox, Box } from '../../core';
+import { ChartElement, ShapeBuilder, TextBox, Box, createPatternFill } from '../../core';
 
 import PointEventsMixin from '../mixins/point-events-mixin';
 
@@ -163,10 +163,10 @@ class PieSegment extends ChartElement {
             }
         } : {};
         const color = options.color;
-        const fill = {
+        const fill = createPatternFill(options.pattern, {
             color: color,
             opacity: options.opacity
-        };
+        });
         const visual = this.createSegment(sector, deepExtend({
             fill: fill,
             stroke: {

package/dist/es2015/chart/register-charts.js

@@ -15,7 +15,7 @@ import { COLUMN, DONUT, PIE, FUNNEL, PYRAMID, BAR, LINE, VERTICAL_LINE, AREA, VE
     RANGE_BAR, WATERFALL, HORIZONTAL_WATERFALL, SCATTER, SCATTER_LINE, BUBBLE,
     POLAR_AREA, POLAR_LINE, POLAR_SCATTER, RADAR_AREA, RADAR_COLUMN, RADAR_LINE, CATEGORY,
     RANGE_AREA, VERTICAL_RANGE_AREA, X_ERROR_LOW_FIELD, X_ERROR_HIGH_FIELD, Y_ERROR_LOW_FIELD, Y_ERROR_HIGH_FIELD,
-    ERROR_LOW_FIELD, ERROR_HIGH_FIELD, HEATMAP, DRILLDOWN_FIELD, TRENDLINE_SERIES } from './constants';
+    ERROR_LOW_FIELD, ERROR_HIGH_FIELD, HEATMAP, DRILLDOWN_FIELD, TRENDLINE_SERIES, PATTERN_FIELD } from './constants';
 import { X, Y, VALUE } from '../common/constants';
 
 const COLOR = "color";
@@ -57,25 +57,25 @@ PlotAreaFactory.current.register(HeatmapPlotArea, [ HEATMAP ]);
 
 SeriesBinder.current.register(
     [ BAR, COLUMN, LINE, VERTICAL_LINE, AREA, VERTICAL_AREA ],
-    [ VALUE ], [ CATEGORY, COLOR, NOTE_TEXT, ERROR_LOW_FIELD, ERROR_HIGH_FIELD, DRILLDOWN_FIELD ]
+    [ VALUE ], [ CATEGORY, COLOR, NOTE_TEXT, ERROR_LOW_FIELD, ERROR_HIGH_FIELD, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 SeriesBinder.current.register(
     [ RANGE_COLUMN, RANGE_BAR, RANGE_AREA, VERTICAL_RANGE_AREA ],
-    [ FROM, TO ], [ CATEGORY, COLOR, NOTE_TEXT, DRILLDOWN_FIELD ]
+    [ FROM, TO ], [ CATEGORY, COLOR, NOTE_TEXT, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 SeriesBinder.current.register(
     [ WATERFALL, HORIZONTAL_WATERFALL ],
-    [ VALUE ], [ CATEGORY, COLOR, NOTE_TEXT, SUMMARY_FIELD, DRILLDOWN_FIELD ]
+    [ VALUE ], [ CATEGORY, COLOR, NOTE_TEXT, SUMMARY_FIELD, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
-SeriesBinder.current.register([ POLAR_AREA, POLAR_LINE, POLAR_SCATTER ], [ X, Y ], [ COLOR, DRILLDOWN_FIELD ]);
-SeriesBinder.current.register([ RADAR_AREA, RADAR_COLUMN, RADAR_LINE ], [ VALUE ], [ CATEGORY, COLOR, DRILLDOWN_FIELD ]);
+SeriesBinder.current.register([ POLAR_AREA, POLAR_LINE, POLAR_SCATTER ], [ X, Y ], [ COLOR, DRILLDOWN_FIELD, PATTERN_FIELD ]);
+SeriesBinder.current.register([ RADAR_AREA, RADAR_COLUMN, RADAR_LINE ], [ VALUE ], [ CATEGORY, COLOR, DRILLDOWN_FIELD, PATTERN_FIELD ]);
 
 SeriesBinder.current.register(
     [ FUNNEL, PYRAMID ],
-    [ VALUE ], [ CATEGORY, COLOR, "visibleInLegend", "visible", DRILLDOWN_FIELD ]
+    [ VALUE ], [ CATEGORY, COLOR, "visibleInLegend", "visible", DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 DefaultAggregates.current.register(
@@ -99,17 +99,17 @@ SeriesBinder.current.register(
 );
 
 SeriesBinder.current.register(
-    [ BUBBLE ], [ X, Y, "size" ], [ COLOR, CATEGORY, NOTE_TEXT ]
+    [ BUBBLE ], [ X, Y, "size" ], [ COLOR, CATEGORY, NOTE_TEXT, PATTERN_FIELD ]
 );
 
 SeriesBinder.current.register(
     [ HEATMAP ],
-    [ X, Y, VALUE ], [ COLOR, NOTE_TEXT ]
+    [ X, Y, VALUE ], [ COLOR, NOTE_TEXT, PATTERN_FIELD ]
 );
 
 SeriesBinder.current.register(
     [ CANDLESTICK, OHLC ],
-    [ "open", "high", "low", "close" ], [ CATEGORY, COLOR, "downColor", NOTE_TEXT ]
+    [ "open", "high", "low", "close" ], [ CATEGORY, COLOR, "downColor", NOTE_TEXT, PATTERN_FIELD ]
 );
 
 DefaultAggregates.current.register(
@@ -120,7 +120,7 @@ DefaultAggregates.current.register(
 
 SeriesBinder.current.register(
     [ BOX_PLOT, VERTICAL_BOX_PLOT ],
-    [ "lower", "q1", "median", "q3", "upper", "mean", "outliers" ], [ CATEGORY, COLOR, NOTE_TEXT, DRILLDOWN_FIELD ]
+    [ "lower", "q1", "median", "q3", "upper", "mean", "outliers" ], [ CATEGORY, COLOR, NOTE_TEXT, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 DefaultAggregates.current.register(
@@ -131,7 +131,7 @@ DefaultAggregates.current.register(
 
 SeriesBinder.current.register(
     [ BULLET, VERTICAL_BULLET ],
-    [ "current", "target" ], [ CATEGORY, COLOR, "visibleInLegend", NOTE_TEXT, DRILLDOWN_FIELD ]
+    [ "current", "target" ], [ CATEGORY, COLOR, "visibleInLegend", NOTE_TEXT, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 DefaultAggregates.current.register(
@@ -141,5 +141,5 @@ DefaultAggregates.current.register(
 
 SeriesBinder.current.register(
     [ PIE, DONUT ],
-    [ VALUE ], [ CATEGORY, COLOR, "explode", "visibleInLegend", "visible", DRILLDOWN_FIELD ]
+    [ VALUE ], [ CATEGORY, COLOR, "explode", "visibleInLegend", "visible", DRILLDOWN_FIELD, PATTERN_FIELD ]
 );

package/dist/es2015/core/box-element.js

@@ -5,6 +5,7 @@ import Box from './box';
 
 import { BLACK, LEFT, TOP, X, Y } from '../common/constants';
 import { getSpacing, setDefaultOptions, valueOrDefault } from '../common';
+import { createPatternFill } from './pattern';
 
 class BoxElement extends ChartElement {
     constructor(options) {
@@ -100,10 +101,10 @@ class BoxElement extends ChartElement {
                 opacity: valueOrDefault(border.opacity, options.opacity),
                 dashType: border.dashType
             },
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: options.background,
                 opacity: options.opacity
-            },
+            }, undefined),
             cursor: options.cursor
         };
     }

package/dist/es2015/core/pattern.js

@@ -0,0 +1,23 @@
+import { drawing } from '@progress/kendo-drawing';
+import { isFunction } from './../common';
+
+const { dotsPattern, verticalStripesPattern, crosshatchPattern, diagonalStripesPattern, gridPattern } = drawing;
+
+const patternMap = {
+    dots: dotsPattern,
+    verticalStripes: verticalStripesPattern,
+    crosshatch: crosshatchPattern,
+    diagonalStripes: diagonalStripesPattern,
+    grid: gridPattern
+};
+
+export function evaluatePattern(options, point) {
+    return isFunction(options) ? options(point) : options;
+}
+
+export function createPatternFill(options, fill, point) {
+    const patternOptions = evaluatePattern(options, point);
+    const pattern = patternOptions && patternMap[patternOptions.type];
+
+    return pattern ? pattern(Object.assign({}, fill, patternOptions)) : fill;
+}

package/dist/es2015/core.js

@@ -27,3 +27,4 @@ export { default as RadarLogarithmicAxis } from './core/radar-logarithmic-axis';
 export { default as CurveProcessor } from './core/curve-processor';
 export { default as Gradients } from './core/gradients';
 export { default as rectToBox } from './core/utils/rect-to-box';
+export { createPatternFill } from './core/pattern';