@progress/kendo-charts 2.6.3-dev.202411221315 → 2.7.0-dev.202501191051

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

@@ -0,0 +1,272 @@
+const SERIES_COLORS = 30;
+const seriesVar = '--kendo-chart-series-';
+const elementStyles = element => element.ownerDocument.defaultView.getComputedStyle(element);
+const cache = {};
+
+const toColor = (colorMix, element) => {
+    if (cache[colorMix]) {
+        return cache[colorMix];
+    }
+
+    const curColor = element.style.color;
+    element.style.color = colorMix;
+    const color = elementStyles(element).color;
+    element.style.color = curColor;
+
+    cache[colorMix] = color;
+
+    return color;
+};
+
+const getProp = (element, prop) => {
+    let value = elementStyles(element).getPropertyValue(prop);
+    if (/^color-mix/i.test(value)) {
+        value = toColor(value, element);
+    }
+    return value;
+};
+
+const getNumberProp = (element, prop) => parseFloat(elementStyles(element).getPropertyValue(prop));
+
+const getFont = (element, weightProp, sizeProp, familyProp) => {
+    const styles = elementStyles(element);
+    return [styles.getPropertyValue(weightProp), styles.getPropertyValue(sizeProp), styles.getPropertyValue(familyProp) || styles.fontFamily].join(" ");
+};
+
+const getSeriesColors = (element) => {
+    const styles = elementStyles(element);
+    const result = [];
+    let count = 1;
+    let color = styles.getPropertyValue(`${seriesVar}${count++}`);
+    while (color || count <= SERIES_COLORS) {
+        result.push(color);
+        color = styles.getPropertyValue(`${seriesVar}${count++}`);
+    }
+    return result;
+};
+
+export const gaugeTheme = (element) => ({
+    pointer: {
+        color: getProp(element, "--kendo-chart-gauge-pointer")
+    },
+    scale: {
+        labels: {
+            color: getProp(element, "--kendo-chart-text")
+        },
+
+        rangePlaceholderColor: getProp(element, "--kendo-chart-gauge-track"),
+
+        minorTicks: {
+            color: getProp(element, "--kendo-chart-text")
+        },
+
+        majorTicks: {
+            color: getProp(element, "--kendo-chart-text")
+        },
+
+        line: {
+            color: getProp(element, "--kendo-chart-text")
+        }
+    }
+});
+
+export const sankeyTheme = (element) => ({
+    labels: {
+        color: getProp(element, "--kendo-chart-text"),
+        font: getFont(element, "--kendo-font-weight", "--kendo-chart-font-size", "--kendo-font-family"),
+        stroke: {
+            color: getProp(element, "--kendo-chart-bg"),
+        },
+    },
+    links: {
+        color: getProp(element, "--kendo-color-subtle"),
+    },
+    nodeColors: getSeriesColors(element)
+});
+
+export const chartTheme = (element) => ({
+    axisDefaults: {
+        crosshair: {
+            color: getProp(element, "--kendo-chart-crosshair-bg"),
+        },
+        labels: {
+            color: getProp(element, "--kendo-chart-text"),
+            font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
+        },
+        line: {
+            color: getProp(element, "--kendo-chart-major-lines"),
+        },
+        majorGridLines: {
+            color: getProp(element, "--kendo-chart-major-lines"),
+        },
+        minorGridLines: {
+            color: getProp(element, "--kendo-chart-minor-lines"),
+        },
+        notes: {
+            icon: {
+                background: getProp(element, "--kendo-chart-notes-bg"),
+                border: {
+                    color: getProp(element, "--kendo-chart-notes-border"),
+                },
+            },
+            line: {
+                color: getProp(element, "--kendo-chart-notes-lines"),
+            },
+            label: {
+                font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
+            },
+        },
+        title: {
+            color: getProp(element, "--kendo-chart-text"),
+            font: getFont(element, "--kendo-font-weight", "--kendo-chart-font-size", "--kendo-font-family"),
+        }
+    },
+    chartArea: {
+        background: getProp(element, "--kendo-chart-bg"),
+    },
+    legend: {
+        inactiveItems: {
+            labels: {
+                color: getProp(element, "--kendo-chart-inactive"),
+            },
+            markers: {
+                color: getProp(element, "--kendo-chart-inactive"),
+            },
+        },
+        labels: {
+            color: getProp(element, "--kendo-chart-text"),
+            font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
+        },
+        title: {
+            color: getProp(element, "--kendo-chart-text"),
+            font: getFont(element, "--kendo-font-weight", "--kendo-chart-title-font-size", "--kendo-font-family"),
+        },
+    },
+    seriesColors: getSeriesColors(element),
+    seriesDefaults: {
+        area: {
+            opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
+            highlight: {
+                inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
+            },
+        },
+        boxPlot: {
+            downColor: getProp(element, "--kendo-chart-major-lines"),
+            mean: {
+                color: getProp(element, "--kendo-color-surface"),
+            },
+            median: {
+                color: getProp(element, "--kendo-color-surface"),
+            },
+            whiskers: {
+                color: getProp(element, "--kendo-color-primary"),
+            },
+        },
+        bullet: {
+            target: {
+                color: getProp(element, "--kendo-chart-text"),
+            },
+        },
+        candlestick: {
+            downColor: getProp(element, "--kendo-chart-text"),
+            line: {
+                color: getProp(element, "--kendo-chart-text"),
+            },
+        },
+        errorBars: {
+            color: getProp(element, "--kendo-chart-error-bars-bg"),
+        },
+        horizontalWaterfall: {
+            line: {
+                color: getProp(element, "--kendo-chart-major-lines"),
+            },
+        },
+        icon: {
+            border: {
+                color: getProp(element, "--kendo-chart-major-lines"),
+            },
+        },
+        labels: {
+            background: getProp(element, "--kendo-chart-bg"),
+            color: getProp(element, "--kendo-chart-text"),
+            font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
+            opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
+        },
+        line: {
+            highlight: {
+                inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
+            },
+        },
+        notes: {
+            icon: {
+                background: getProp(element, "--kendo-chart-notes-bg"),
+                border: {
+                    color: getProp(element, "--kendo-chart-notes-border"),
+                },
+            },
+            line: {
+                color: getProp(element, "--kendo-chart-notes-lines"),
+            },
+            label: {
+                font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
+            },
+        },
+        radarArea: {
+            opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
+            highlight: {
+                inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
+            },
+        },
+        verticalArea: {
+            opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
+            highlight: {
+                inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
+            },
+        },
+        verticalBoxPlot: {
+            downColor: getProp(element, "--kendo-chart-major-lines"),
+            mean: {
+                color: getProp(element, "--kendo-color-surface"),
+            },
+            median: {
+                color: getProp(element, "--kendo-color-surface"),
+            },
+            whiskers: {
+                color: getProp(element, "--kendo-chart-primary-bg"),
+            },
+        },
+        verticalBullet: {
+            target: {
+                color: getProp(element, "--kendo-chart-text"),
+            },
+        },
+        verticalLine: {
+            highlight: {
+                inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
+            },
+        },
+        verticalWaterfall: {
+            line: {
+                color: getProp(element, "--kendo-chart-major-lines"),
+            },
+        },
+        waterfall: {
+            line: {
+                color: getProp(element, "--kendo-chart-major-lines"),
+            },
+        },
+    },
+    subtitle: {
+        color: getProp(element, "--kendo-chart-text"),
+        font: getFont(element, "--kendo-chart-pane-title-font-weight", "--kendo-chart-pane-title-font-size", "--kendo-font-family"),
+    },
+    title: {
+        color: getProp(element, "--kendo-chart-text"),
+        font: getFont(element, "--kendo-font-weight", "--kendo-chart-title-font-size", "--kendo-font-family"),
+    },
+    paneDefaults: {
+        title: {
+            font: getFont(element, "--kendo-chart-pane-title-font-weight", "--kendo-chart-pane-title-font-size", "--kendo-font-family"),
+        }
+    }
+});

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

@@ -272,7 +272,7 @@ class ChartElement extends Class {
     }
 
     toggleFocusHighlight(show) {
-        const options = ((this.options || {}).accessibility || {}).highlight || {};
+        const options = (this.options || {}).focusHighlight || {};
         let focusHighlight = this._focusHighlight;
 
         if (!show && !focusHighlight) {

package/dist/es2015/main.js

@@ -11,5 +11,5 @@ export * from './sankey';
 export * from './common';
 export * from './chart-wizard';
 
-export { baseTheme as chartBaseTheme } from './chart/base-theme';
-
+export { baseTheme as chartBaseTheme } from './chart/theme/base-theme';
+export { chartTheme, gaugeTheme, sankeyTheme } from './chart/theme/load-theme';

package/dist/es2015/sankey/link.js

@@ -186,7 +186,7 @@ export class Link extends SankeyElement {
 
         const offset = calculateControlPointsOffsetX(link, this.options.rtl);
 
-        this._highlight = new drawing.Path({ stroke: this.options.focusHighlight, visible: false })
+        this._highlight = new drawing.Path({ stroke: this.options.focusHighlight.border, visible: false })
             .moveTo(x0, y0 + halfWidth)
             .lineTo(x0, y0 - halfWidth)
             .curveTo([xC + offset, y0 - halfWidth], [xC + offset, y1 - halfWidth], [x1, y1 - halfWidth])

package/dist/es2015/sankey/node.js

@@ -44,7 +44,7 @@ export class Node extends SankeyElement {
         }
 
         this._highlight = drawing.Path.fromRect(this.getRect(), {
-            stroke: this.options.focusHighlight,
+            stroke: this.options.focusHighlight.border,
             visible: false
         });
 

package/dist/es2015/sankey/sankey.js

@@ -594,7 +594,8 @@ export class Sankey extends Observable {
     calculateSankey(calcOptions, sankeyOptions) {
         const { title, legend, data, nodes, labels, nodeColors, disableAutoLayout, disableKeyboardNavigation, rtl } = sankeyOptions;
         const autoLayout = !disableAutoLayout;
-        const padding = disableKeyboardNavigation ? 0 : highlightOptions.width / 2;
+        const focusHighlightWidth = ((nodes.focusHighlight || {}).border || {}).width || 0;
+        const padding = disableKeyboardNavigation ? 0 : focusHighlightWidth / 2;
 
         const sankeyBox = new Box(0, 0, calcOptions.width, calcOptions.height);
         sankeyBox.unpad(padding);
@@ -925,7 +926,9 @@ setDefaultOptions(Sankey, {
         opacity: 1,
         align: 'stretch', // 'left', 'right', 'stretch'
         offset: { left: 0, top: 0 },
-        focusHighlight: Object.assign({}, highlightOptions),
+        focusHighlight: {
+            border: Object.assign({}, highlightOptions)
+        },
         labels: {
             ariaTemplate: ({ node }) => node.label.text
         }
@@ -937,7 +940,9 @@ setDefaultOptions(Sankey, {
             opacity: 0.8,
             inactiveOpacity: 0.2
         },
-        focusHighlight: Object.assign({}, highlightOptions),
+        focusHighlight: {
+            border: Object.assign({}, highlightOptions)
+        },
         labels: {
             ariaTemplate: ({ link }) => `${link.source.label.text} to ${link.target.label.text}`
         }

package/dist/npm/field-types/focus-highlight.interface.d.ts

@@ -0,0 +1,23 @@
+import { Border } from './border.interface';
+
+/**
+ * Represents the focus highlight border options.
+ */
+export interface FocusHighlightBorder extends Border {
+    /**
+     * The opacity of the focus highlight border.
+     *
+     * @default 1
+     */
+    opacity?: number;
+}
+
+/**
+ * Represents the focus highlight options.
+ */
+export interface FocusHighlight {
+    /**
+     * The border options of the focus highlight.
+     */
+    border?: FocusHighlightBorder;
+}

package/dist/npm/field-types.d.ts

@@ -3,4 +3,5 @@ export { DashType } from './field-types/dash-type';
 export { Margin } from './field-types/margin.interface';
 export { Padding } from './field-types/padding.interface';
 export { RenderMode } from './field-types/render-mode';
+export { FocusHighlight, FocusHighlightBorder } from './field-types/focus-highlight.interface';
 export * from './field-types/series-pattern.interface';