@progress/kendo-charts/dist/es/chart/theme/load-theme.js

Kendo UI platform-independent Charts library

var SERIES_COLORS = 30;
var seriesVar = '--kendo-chart-series-';
var elementStyles = function (element) { return element.ownerDocument.defaultView.getComputedStyle(element); };
var cache = {};

var toColor = function (colorMix, element) {
    if (cache[colorMix]) {
        return cache[colorMix];
    }

    var curColor = element.style.color;
    element.style.color = colorMix;
    var color = elementStyles(element).color;
    element.style.color = curColor;

    cache[colorMix] = color;

    return color;
};

var getProp = function (element, prop) {
    var value = elementStyles(element).getPropertyValue(prop);
    if (/^color-mix/i.test(value)) {
        value = toColor(value, element);
    }
    return value;
};

var getNumberProp = function (element, prop) { return parseFloat(elementStyles(element).getPropertyValue(prop)); };

var getFont = function (element, weightProp, sizeProp, familyProp) {
    var styles = elementStyles(element);
    return [styles.getPropertyValue(weightProp), styles.getPropertyValue(sizeProp), styles.getPropertyValue(familyProp) || styles.fontFamily].join(" ");
};

var getSeriesColors = function (element) {
    var styles = elementStyles(element);
    var result = [];
    var count = 1;
    var color = styles.getPropertyValue(("" + seriesVar + count));
    while (color || count <= SERIES_COLORS) {
        result.push(color);
        count++;
        color = styles.getPropertyValue(("" + seriesVar + count));
    }
    return result;
};

var defaultFont = function (element) { return getFont(element, "--kendo-font-weight", '--kendo-chart-font-size', "--kendo-font-family"); };
var paneTitleFont = function (element) { return getFont(element, "--kendo-chart-pane-title-font-weight", '--kendo-chart-pane-title-font-size', "--kendo-font-family"); };
var normalTextColor = function (element) { return getProp(element, "--kendo-chart-text"); };

var title = function (element) { return ({
    color: normalTextColor(element),
    font: getFont(element, "--kendo-font-weight", '--kendo-chart-title-font-size', "--kendo-font-family"),
}); };

var sankeyLegend = function (element) {
    var textColorNormal = normalTextColor(element);
    return {
        labels: {
            color: textColorNormal,
            font: defaultFont(element),
        },
        title: {
            color: textColorNormal,
        }
    };
};

var chartLegend = function (element) {
    var inactiveColor = getProp(element, "--kendo-chart-inactive");
    return Object.assign({}, {inactiveItems: {
            labels: {
                color: inactiveColor,
            },
            markers: {
                color: inactiveColor,
            },
        }},
        sankeyLegend(element));
};

export var gaugeTheme = function (element) {
    var textColorNormal = normalTextColor(element);
    return {
        pointer: {
            color: getProp(element, "--kendo-chart-gauge-pointer")
        },
        scale: {
            labels: {
                color: textColorNormal
            },

            rangePlaceholderColor: getProp(element, "--kendo-chart-gauge-track"),

            minorTicks: {
                color: textColorNormal
            },

            majorTicks: {
                color: textColorNormal
            },

            line: {
                color: textColorNormal
            }
        }
    };
};

export var sankeyTheme = function (element) { return ({
    labels: {
        color: normalTextColor(element),
        font: defaultFont(element),
        stroke: {
            color: getProp(element, "--kendo-chart-bg"),
        },
    },
    links: {
        color: getProp(element, "--kendo-color-subtle"),
    },
    nodeColors: getSeriesColors(element),
    title: title(element),
    legend: sankeyLegend(element),
}); };

var notes = function (element) { return ({
    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: defaultFont(element),
    },
}); };

export var chartTheme = function (element) {
    var majorLines = getProp(element, "--kendo-chart-major-lines");
    var normalTextColor = getProp(element, "--kendo-chart-text");
    var axisLabelFont = getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family");
    var chartBg = getProp(element, "--kendo-chart-bg");
    var notesProps = notes(element);
    var areaOpacity = getNumberProp(element, "--kendo-chart-area-opacity");
    var surfaceColor = getProp(element, "--kendo-color-surface");
    var primaryBg = getProp(element, "--kendo-chart-primary-bg");

    var boxPlot = function () { return ({
        downColor: majorLines,
        mean: {
            color: surfaceColor,
        },
        median: {
            color: surfaceColor,
        },
        whiskers: {
            color: primaryBg,
        },
    }); };

    var waterfall = function () { return ({
        line: {
            color: majorLines,
        },
    }); };

    var area = function () { return ({
        opacity: areaOpacity,
        highlight: {
            inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
        },
    }); };

    var line = function () { return ({
        highlight: {
            inactiveOpacity: getNumberProp(element, "--kendo-chart-line-inactive-opacity"),
        },
    }); };

    var bullet = function () { return ({
        target: {
            color: normalTextColor,
        },
    }); };

    return {
        axisDefaults: {
            crosshair: {
                color: getProp(element, "--kendo-chart-crosshair-bg"),
            },
            labels: {
                color: normalTextColor,
                font: axisLabelFont,
            },
            line: {
                color: majorLines,
            },
            majorGridLines: {
                color: majorLines,
            },
            minorGridLines: {
                color: getProp(element, "--kendo-chart-minor-lines"),
            },
            notes: structuredClone(notesProps),
            title: {
                color: normalTextColor,
                font: defaultFont(element),
            }
        },
        chartArea: {
            background: chartBg,
        },
        legend: chartLegend(element),
        seriesColors: getSeriesColors(element),
        seriesDefaults: {
            area: area(),
            verticalArea: area(),
            radarArea: area(),

            boxPlot: boxPlot(),
            verticalBoxPlot: boxPlot(),

            bullet: bullet(),
            verticalBullet: bullet(),

            horizontalWaterfall: waterfall(),
            waterfall: waterfall(),

            line: line(),
            verticalLine: line(),

            candlestick: {
                downColor: normalTextColor,
                line: {
                    color: normalTextColor,
                },
            },
            errorBars: {
                color: getProp(element, "--kendo-chart-error-bars-bg"),
            },
            icon: {
                border: {
                    color: majorLines,
                },
            },
            labels: {
                background: chartBg,
                color: normalTextColor,
                font: axisLabelFont,
                opacity: areaOpacity,
            },
            notes: structuredClone(notesProps),
        },
        subtitle: {
            color: normalTextColor,
            font: paneTitleFont(element),
        },
        title: title(element),
        paneDefaults: {
            title: {
                font: paneTitleFont(element),
            }
        }
    };
};