@progress/kendo-charts 2.10.0-develop.2 → 2.10.0-develop.3

package/dist/es/chart/chart.js

@@ -481,6 +481,75 @@ class Chart {
         return visual;
     }
 
+    _toggleCategoryHighlight(index, axis) {
+        const plotArea = this._plotArea;
+        const categoryAxis = axis || plotArea.categoryAxis;
+
+        if (this._categoryHighlightIndex === index && this._categoryHighlightAxis === categoryAxis) {
+            return;
+        }
+
+        this._categoryHighlightIndex = index;
+        this._categoryHighlightAxis = categoryAxis;
+
+        const highlightOptions = (categoryAxis.options || {}).highlight;
+
+        if (!highlightOptions || !highlightOptions.visible || index === null) {
+            if (this._categoryHighlight) {
+                this._categoryHighlight.visible(false);
+            }
+            return;
+        }
+
+        if (!this._categoryHighlight) {
+            this._categoryHighlight = new draw.Path({
+                fill: {
+                    color: highlightOptions.color,
+                    opacity: highlightOptions.opacity
+                },
+                stroke: highlightOptions.border || null,
+                closed: true
+            });
+
+            this.surface.draw(this._categoryHighlight);
+        } else {
+            const options = this._categoryHighlight.options;
+            options.set("fill", {
+                color: highlightOptions.color,
+                opacity: highlightOptions.opacity
+            });
+            options.set("stroke", highlightOptions.border);
+        }
+
+        const slot = categoryAxis.getSlot(index);
+        const rect = slot.toRect();
+        let plotBox = plotArea.box;
+
+        if (categoryAxis.pane) {
+            plotBox = categoryAxis.pane.chartsBox();
+        }
+
+        if (categoryAxis.options.vertical) {
+            rect.origin.x = plotBox.x1;
+            rect.size.width = plotBox.width();
+        } else {
+            rect.origin.y = plotBox.y1;
+            rect.size.height = plotBox.height();
+        }
+
+        const newPath = draw.Path.fromRect(rect);
+        this._categoryHighlight.segments.elements(newPath.segments.elements());
+        this._categoryHighlight.visible(true);
+    }
+
+    _categoryHighlightEnabled() {
+        const plotArea = this._plotArea;
+        const categoryAxis = plotArea.categoryAxis || {};
+        const highlightOptions = (categoryAxis.options || {}).highlight;
+
+        return plotArea instanceof CategoricalPlotArea && highlightOptions && highlightOptions.visible;
+    }
+
     _sharedTooltip() {
         return this._plotArea instanceof CategoricalPlotArea && this.options.tooltip && this.options.tooltip.shared;
     }
@@ -1796,6 +1865,22 @@ class Chart {
         if (this._sharedTooltip()) {
             this._trackSharedTooltip(coords, e);
         }
+
+        if (this._categoryHighlightEnabled()) {
+            this._trackCategoryHighlight(coords);
+        }
+    }
+
+    _trackCategoryHighlight(coords) {
+        const { _plotArea: plotArea } = this;
+        const categoryAxis = plotArea.categoryAxisByPoint(coords) || plotArea.categoryAxis;
+
+        if (plotArea.backgroundContainsPoint(coords)) {
+            const index = categoryAxis.pointCategoryIndex(coords);
+            this._toggleCategoryHighlight(index, categoryAxis);
+        } else {
+            this._toggleCategoryHighlight(null);
+        }
     }
 
     _trackCrosshairs(coords) {
@@ -1862,6 +1947,8 @@ class Chart {
         plotArea.hideCrosshairs();
 
         this._unsetActivePoint(options);
+
+        this._toggleCategoryHighlight(null);
     }
 
     _unsetActivePoint(options) {
@@ -2001,7 +2088,7 @@ class Chart {
     }
 
     _shouldAttachMouseMove() {
-        return this._plotArea.crosshairs.length || (this._tooltip && this._sharedTooltip()) || this.requiresHandlers([ PLOT_AREA_HOVER, PLOT_AREA_LEAVE ]);
+        return this._plotArea.crosshairs.length || (this._tooltip && this._sharedTooltip()) || this._categoryHighlightEnabled() || this.requiresHandlers([ PLOT_AREA_HOVER, PLOT_AREA_LEAVE ]);
     }
 
     updateMouseMoveHandler() {
@@ -2331,7 +2418,12 @@ setDefaultOptions(Chart, {
             }
         }
     },
-    categoryAxis: {},
+    categoryAxis: {
+        highlight: {
+            visible: false,
+            border: null
+        }
+    },
     seriesDefaults: {
         type: COLUMN,
         data: [],

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

@@ -883,6 +883,21 @@ class CategoricalPlotArea extends PlotAreaBase {
 
         return sortableSeries || stackableSeries && point.options.isStacked;
     }
+
+    categoryAxisByPoint(point) {
+        const axes = this.axes;
+        let axis;
+
+        for (let i = 0; i < axes.length; i++) {
+            const current = axes[i];
+            if (current instanceof CategoryAxis && current.pane.chartsBox().containsPoint(point)) {
+                axis = current;
+                break;
+            }
+        }
+
+        return axis;
+    }
 }
 
 function updateAxisOptions(targetOptions, axis, options) {

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

@@ -323,6 +323,12 @@ export const chartTheme = (element) => {
                 font: defaultFont(element),
             }
         },
+        categoryAxis: {
+            highlight: {
+                color: "#8C9FD9",
+                opacity: 0.15
+            }
+        },
         chartArea: {
             background: chartBg,
         },

package/dist/es2015/chart/chart.js

@@ -481,6 +481,75 @@ class Chart {
         return visual;
     }
 
+    _toggleCategoryHighlight(index, axis) {
+        const plotArea = this._plotArea;
+        const categoryAxis = axis || plotArea.categoryAxis;
+
+        if (this._categoryHighlightIndex === index && this._categoryHighlightAxis === categoryAxis) {
+            return;
+        }
+
+        this._categoryHighlightIndex = index;
+        this._categoryHighlightAxis = categoryAxis;
+
+        const highlightOptions = (categoryAxis.options || {}).highlight;
+
+        if (!highlightOptions || !highlightOptions.visible || index === null) {
+            if (this._categoryHighlight) {
+                this._categoryHighlight.visible(false);
+            }
+            return;
+        }
+
+        if (!this._categoryHighlight) {
+            this._categoryHighlight = new draw.Path({
+                fill: {
+                    color: highlightOptions.color,
+                    opacity: highlightOptions.opacity
+                },
+                stroke: highlightOptions.border || null,
+                closed: true
+            });
+
+            this.surface.draw(this._categoryHighlight);
+        } else {
+            const options = this._categoryHighlight.options;
+            options.set("fill", {
+                color: highlightOptions.color,
+                opacity: highlightOptions.opacity
+            });
+            options.set("stroke", highlightOptions.border);
+        }
+
+        const slot = categoryAxis.getSlot(index);
+        const rect = slot.toRect();
+        let plotBox = plotArea.box;
+
+        if (categoryAxis.pane) {
+            plotBox = categoryAxis.pane.chartsBox();
+        }
+
+        if (categoryAxis.options.vertical) {
+            rect.origin.x = plotBox.x1;
+            rect.size.width = plotBox.width();
+        } else {
+            rect.origin.y = plotBox.y1;
+            rect.size.height = plotBox.height();
+        }
+
+        const newPath = draw.Path.fromRect(rect);
+        this._categoryHighlight.segments.elements(newPath.segments.elements());
+        this._categoryHighlight.visible(true);
+    }
+
+    _categoryHighlightEnabled() {
+        const plotArea = this._plotArea;
+        const categoryAxis = plotArea.categoryAxis || {};
+        const highlightOptions = (categoryAxis.options || {}).highlight;
+
+        return plotArea instanceof CategoricalPlotArea && highlightOptions && highlightOptions.visible;
+    }
+
     _sharedTooltip() {
         return this._plotArea instanceof CategoricalPlotArea && this.options.tooltip && this.options.tooltip.shared;
     }
@@ -1796,6 +1865,22 @@ class Chart {
         if (this._sharedTooltip()) {
             this._trackSharedTooltip(coords, e);
         }
+
+        if (this._categoryHighlightEnabled()) {
+            this._trackCategoryHighlight(coords);
+        }
+    }
+
+    _trackCategoryHighlight(coords) {
+        const { _plotArea: plotArea } = this;
+        const categoryAxis = plotArea.categoryAxisByPoint(coords) || plotArea.categoryAxis;
+
+        if (plotArea.backgroundContainsPoint(coords)) {
+            const index = categoryAxis.pointCategoryIndex(coords);
+            this._toggleCategoryHighlight(index, categoryAxis);
+        } else {
+            this._toggleCategoryHighlight(null);
+        }
     }
 
     _trackCrosshairs(coords) {
@@ -1862,6 +1947,8 @@ class Chart {
         plotArea.hideCrosshairs();
 
         this._unsetActivePoint(options);
+
+        this._toggleCategoryHighlight(null);
     }
 
     _unsetActivePoint(options) {
@@ -2001,7 +2088,7 @@ class Chart {
     }
 
     _shouldAttachMouseMove() {
-        return this._plotArea.crosshairs.length || (this._tooltip && this._sharedTooltip()) || this.requiresHandlers([ PLOT_AREA_HOVER, PLOT_AREA_LEAVE ]);
+        return this._plotArea.crosshairs.length || (this._tooltip && this._sharedTooltip()) || this._categoryHighlightEnabled() || this.requiresHandlers([ PLOT_AREA_HOVER, PLOT_AREA_LEAVE ]);
     }
 
     updateMouseMoveHandler() {
@@ -2331,7 +2418,12 @@ setDefaultOptions(Chart, {
             }
         }
     },
-    categoryAxis: {},
+    categoryAxis: {
+        highlight: {
+            visible: false,
+            border: null
+        }
+    },
     seriesDefaults: {
         type: COLUMN,
         data: [],

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

@@ -883,6 +883,21 @@ class CategoricalPlotArea extends PlotAreaBase {
 
         return sortableSeries || stackableSeries && point.options.isStacked;
     }
+
+    categoryAxisByPoint(point) {
+        const axes = this.axes;
+        let axis;
+
+        for (let i = 0; i < axes.length; i++) {
+            const current = axes[i];
+            if (current instanceof CategoryAxis && current.pane.chartsBox().containsPoint(point)) {
+                axis = current;
+                break;
+            }
+        }
+
+        return axis;
+    }
 }
 
 function updateAxisOptions(targetOptions, axis, options) {

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

@@ -323,6 +323,12 @@ export const chartTheme = (element) => {
                 font: defaultFont(element),
             }
         },
+        categoryAxis: {
+            highlight: {
+                color: "#8C9FD9",
+                opacity: 0.15
+            }
+        },
         chartArea: {
             background: chartBg,
         },