@kirbydesign/designsystem 11.0.0 → 11.1.1

package/fesm2022/kirbydesign-designsystem-chart.mjs

@@ -1,153 +1,396 @@
 import * as i0 from '@angular/core';
 import { Injectable, ViewChild, Input, HostBinding, Component, NgModule } from '@angular/core';
 import { ResizeObserverFactory } from '@kirbydesign/designsystem/shared';
-import { ColorHelper, DesignTokenHelper, deepCopy, mergeDeepAll, chartConfigHasType } from '@kirbydesign/designsystem/helpers';
-import { toDate } from 'date-fns';
+import { mergeDeepAll, ColorHelper, DesignTokenHelper, deepCopy, chartConfigHasType } from '@kirbydesign/designsystem/helpers';
 import { CategoryScale, LinearScale, TimeScale, BarElement, LineElement, PointElement, BarController, LineController, Filler, Tooltip, Chart, Legend } from 'chart.js';
 import 'chartjs-adapter-date-fns';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { valueOrDefault } from 'chart.js/helpers';
+import { toDate } from 'date-fns';
 
 function isNumberArray(value) {
     return Array.isArray(value) && value.every((item) => typeof item === 'number');
 }
 
+class AnnotationsDelegate {
+    constructor(chartConfigService) {
+        this.chartConfigService = chartConfigService;
+    }
+    applyDefaultsToAnnotations(annotations) {
+        return annotations.map((annotation) => {
+            const annotationTypeDefaults = this.chartConfigService.getAnnotationDefaults(annotation.type);
+            return mergeDeepAll(annotationTypeDefaults, annotation);
+        });
+    }
+    createAnnotationPluginOptionsObject(annotations) {
+        const annotationsWithDefaults = this.applyDefaultsToAnnotations(annotations);
+        return {
+            plugins: {
+                annotation: {
+                    annotations: annotationsWithDefaults,
+                },
+            },
+        };
+    }
+    getExistingChartAnnotations(chart) {
+        const annotations = chart.options.plugins?.annotation?.annotations;
+        /* In browser chart.js might return annotations as a Proxy object; force it to be an array.
+           Each annotationOption in the resulting array  will also be a Proxy object.
+           But internally chart.js will just work with them as normal values */
+        if (annotations !== undefined) {
+            return Object.keys(annotations).map((key) => annotations[key]);
+        }
+        else {
+            return [];
+        }
+    }
+}
+
 const { getThemeColorHexString: getThemeColorHexString$5 } = ColorHelper;
-/* The chart.js annotation does not allow for changing the
-defaults it comes with. In order to have sensible defaults
-this object is used instead and manually merged with the
-rest of the annotations object */
-const borderColor = getThemeColorHexString$5('semi-dark');
-const borderDash = [6, 3];
-const borderWidth = 1;
-const CHART_ANNOTATIONS_CONFIG = {
-    line: {
-        borderDash,
-        borderWidth,
-        borderColor,
+const hoverBackgroundColor = getThemeColorHexString$5('primary');
+const backgroundColor = getThemeColorHexString$5('secondary');
+function scriptedBackgroundColor(context) {
+    const dataset = context.dataset;
+    const highlightedElements = dataset?.kirbyOptions?.highlightedElements;
+    if (highlightedElements && highlightedElements.includes(context.dataIndex)) {
+        return hoverBackgroundColor;
+    }
+    else {
+        return backgroundColor;
+    }
+}
+// Only adds a hovercolor if an onClick handler is provided
+function scriptedHoverBackgroundColor(context) {
+    if (context.chart.options.onClick) {
+        return hoverBackgroundColor;
+    }
+}
+const CHART_GLOBAL_DEFAULTS = {
+    maintainAspectRatio: false,
+    color: getThemeColorHexString$5('black'),
+    resizeDelay: 10,
+    elements: {
+        bar: {
+            backgroundColor: scriptedBackgroundColor,
+            hoverBackgroundColor: scriptedHoverBackgroundColor,
+        },
+        line: {
+            borderColor: scriptedBackgroundColor,
+            borderWidth: 2,
+            tension: 0.3,
+        },
     },
-    ellipse: {
-        borderDash,
-        borderWidth,
-        borderColor,
-        backgroundColor: 'transparent',
+    scales: {
+        linear: {
+            display: false,
+            ticks: {
+                display: false,
+            },
+        },
+        category: {
+            display: true,
+            grid: {
+                display: false,
+            },
+        },
     },
-    box: {
-        borderDash,
-        borderWidth,
-        borderColor,
-        backgroundColor: 'transparent',
+    font: {
+        family: 'Roboto',
     },
-    point: {
-        backgroundColor: 'initial',
+    plugins: {
+        legend: {
+            display: false,
+        },
+        datalabels: {
+            display: false,
+        },
+        tooltip: {
+            enabled: false,
+        },
     },
 };
 
-/* Allows for adding functionality to interactions chart.js while
-preserving the interaction functionality the consumer of the component has
-passed by being provided as a callback. */
-const CHART_INTERACTION_FUNCTIONS_EXTENSIONS = {
-    onHover: (_event, activeElements, _chart, callback) => {
-        if (_chart.options.onClick) {
-            _chart.canvas.style.cursor = activeElements[0] ? 'pointer' : 'default';
-        }
-        if (callback)
-            callback(_event, activeElements, _chart);
+/*
+  The marker plugin is heavily inspired by https://chartjs-plugin-crosshair.netlify.app
+  The project appears stale and only the vertical line feature is needed
+   part of the plugin that was actually needed is implemented here.
+*/
+const defaultOptions = {
+    line: {
+        color: 'black',
+        width: 1,
+        dashPattern: [],
+    },
+    snap: {
+        enabled: false,
     },
 };
-
-const { fontSize: fontSize$2 } = DesignTokenHelper;
-const { getThemeColorHexString: getThemeColorHexString$4, getThemeColorRgbString: getThemeColorRgbString$1 } = ColorHelper;
-/**
- * A filter to read a chartpoint from a Chart.js point context (used for chartdata points). Context is provided by Chart.js.
- */
-const getChartPointFromContext = (context) => {
-    return context.dataset.data[context.dataIndex];
+const hasMarkerConfiguration = (chart) => {
+    /*
+      Hacky solution. Should be fixed in this issue: https://github.com/kirbydesign/designsystem/issues/1967
+    */
+    return chart.data.datasets.some((dataset) => !!dataset?.kirbyOptions?.isStockChart);
 };
-const CHART_TYPES_CONFIG = {
-    bar: {
-        type: 'bar',
-        options: {
-            datasets: {
-                bar: {
-                    barPercentage: 0.6,
-                },
-                line: {
-                    spanGaps: true,
-                },
-            },
-            indexAxis: 'y',
-            scales: {
-                y: {
-                    grid: {
-                        drawBorder: false,
-                    },
-                    ticks: {
-                        font: {
-                            size: parseInt(fontSize$2('s')),
-                        },
-                    },
-                },
-            },
-            elements: {
-                point: {
-                    radius: 0,
-                },
-                line: {
-                    borderColor: getThemeColorHexString$4('medium'),
-                },
-            },
-        },
+var MarkerPlugin = {
+    id: 'marker',
+    afterInit: function (chart) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        const xScaleType = chart.config.options.scales.x.type;
+        if (xScaleType !== 'linear' &&
+            xScaleType !== 'time' &&
+            xScaleType !== 'category' &&
+            xScaleType !== 'logarithmic') {
+            return;
+        }
+        if (chart.options.plugins.marker === undefined) {
+            chart.options.plugins.marker = defaultOptions;
+        }
+        chart.marker = {
+            enabled: false,
+            suppressUpdate: false,
+            x: null,
+            originalData: [],
+            originalXRange: {},
+            dragStarted: false,
+            dragStartX: null,
+            dragEndX: null,
+            suppressTooltips: false,
+            ignoreNextEvents: 0,
+        };
     },
-    column: {
-        type: 'bar',
-        options: {
-            datasets: {
-                bar: {
-                    barPercentage: 0.6,
-                },
-                line: {
-                    spanGaps: true,
-                },
-            },
-            indexAxis: 'x',
-            scales: {
-                x: {
-                    grid: {
-                        drawBorder: false,
-                    },
-                    ticks: {
-                        font: {
-                            size: parseInt(fontSize$2('xs')),
-                        },
-                    },
-                },
-            },
-            elements: {
-                line: {
-                    tension: 0.2,
-                    borderColor: getThemeColorHexString$4('medium'),
-                },
-                point: {
-                    radius: 0,
-                },
-            },
-        },
+    getOption: function (chart, category, name) {
+        return valueOrDefault(chart.options.plugins.marker[category]
+            ? chart.options.plugins.marker[category][name]
+            : undefined, defaultOptions[category][name]);
     },
-    line: {
-        type: 'line',
-        options: {
-            backgroundColor: getThemeColorRgbString$1('semi-light', 0.5),
-            scales: {
-                x: {
-                    grid: {
-                        borderColor: getThemeColorHexString$4('medium'),
-                        borderWidth: 1,
-                    },
-                    ticks: {
+    getXScale: function (chart) {
+        return chart.data.datasets.length ? chart.scales[chart.getDatasetMeta(0).xAxisID] : null;
+    },
+    getYScale: function (chart) {
+        return chart.scales[chart.getDatasetMeta(0).yAxisID];
+    },
+    afterEvent: function (chart, event) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        if (chart.config.options.scales.x.length == 0) {
+            return;
+        }
+        const e = event.event;
+        const xScaleType = chart.config.options.scales.x.type;
+        if (xScaleType !== 'linear' &&
+            xScaleType !== 'time' &&
+            xScaleType !== 'category' &&
+            xScaleType !== 'logarithmic') {
+            return;
+        }
+        const xScale = this.getXScale(chart);
+        if (!xScale) {
+            return;
+        }
+        if (chart.marker.ignoreNextEvents > 0) {
+            chart.marker.ignoreNextEvents -= 1;
+            return;
+        }
+        chart.marker.enabled =
+            e.type !== 'mouseout' &&
+                e.x > xScale.getPixelForValue(xScale.min) &&
+                e.x < xScale.getPixelForValue(xScale.max);
+        if (!chart.marker.enabled && !chart.marker.suppressUpdate) {
+            if (e.x > xScale.getPixelForValue(xScale.max)) {
+                // suppress future updates to prevent endless redrawing of chart
+                chart.marker.suppressUpdate = true;
+                chart.update('none');
+            }
+            chart.marker.dragStarted = false; // cancel zoom in progress
+            return false;
+        }
+        chart.marker.suppressUpdate = false;
+        chart.marker.x = e.x;
+        chart.draw();
+    },
+    doDraw: function (chart) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        if (!chart.marker.enabled) {
+            return;
+        }
+        this.drawTraceLine(chart);
+        this.interpolateValues(chart);
+        this.drawTracePoints(chart);
+        return true;
+    },
+    beforeDraw: function (chart) {
+        return this.doDraw(chart);
+    },
+    // Logic moved to beforeDraw in order
+    // for the vertical line to be drawn
+    // under tooltip and datalabels.
+    // afterDraw: function(chart) {
+    //   return this.doDraw(chart);
+    // },
+    drawTraceLine: function (chart) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        const yScale = this.getYScale(chart);
+        const lineWidth = this.getOption(chart, 'line', 'width');
+        const color = this.getOption(chart, 'line', 'color');
+        const dashPattern = this.getOption(chart, 'line', 'dashPattern');
+        const snapEnabled = this.getOption(chart, 'snap', 'enabled');
+        let lineX = chart.marker.x;
+        if (snapEnabled && chart._active.length) {
+            lineX = chart._active[0].element.x;
+        }
+        chart.ctx.beginPath();
+        chart.ctx.setLineDash(dashPattern);
+        chart.ctx.moveTo(lineX, yScale.getPixelForValue(yScale.max));
+        chart.ctx.lineWidth = lineWidth;
+        chart.ctx.strokeStyle = color;
+        chart.ctx.lineTo(lineX, yScale.getPixelForValue(yScale.min));
+        chart.ctx.stroke();
+        chart.ctx.setLineDash([]);
+    },
+    drawTracePoints: function (chart) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        for (let chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
+            const dataset = chart.data.datasets[chartIndex];
+            const meta = chart.getDatasetMeta(chartIndex);
+            const yScale = chart.scales[meta.yAxisID];
+            if (meta.hidden || !dataset.interpolate) {
+                continue;
+            }
+            chart.ctx.beginPath();
+            chart.ctx.arc(chart.marker.x, yScale.getPixelForValue(dataset.interpolatedValue), 3, 0, 2 * Math.PI, false);
+            chart.ctx.fillStyle = 'white';
+            chart.ctx.lineWidth = 2;
+            chart.ctx.strokeStyle = dataset.borderColor;
+            chart.ctx.fill();
+            chart.ctx.stroke();
+        }
+    },
+    interpolateValues: function (chart) {
+        for (let chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
+            const dataset = chart.data.datasets[chartIndex];
+            const meta = chart.getDatasetMeta(chartIndex);
+            const xScale = chart.scales[meta.xAxisID];
+            const xValue = xScale.getValueForPixel(chart.marker.x);
+            if (meta.hidden || !dataset.interpolate) {
+                continue;
+            }
+            const data = dataset.data;
+            const index = data.findIndex(function (o) {
+                return o.x >= xValue;
+            });
+            const prev = data[index - 1];
+            const next = data[index];
+            if (chart.data.datasets[chartIndex].steppedLine && prev) {
+                dataset.interpolatedValue = prev.y;
+            }
+            else if (prev && next) {
+                const slope = (next.y - prev.y) / (next.x - prev.x);
+                dataset.interpolatedValue = prev.y + (xValue - prev.x) * slope;
+            }
+            else {
+                dataset.interpolatedValue = NaN;
+            }
+        }
+    },
+};
+
+const CHART_SCALES = [CategoryScale, LinearScale, TimeScale];
+const CHART_ELEMENTS = [BarElement, LineElement, PointElement];
+const CHART_CONTROLLERS = [BarController, LineController];
+const CHART_PLUGINS = [annotationPlugin, Filler, ChartDataLabels, Tooltip, MarkerPlugin].map((plugin) => (plugin?.__esModule ? plugin.default : plugin));
+/* Order matters; defaults must be merged after register as
+   register modifies the Chart.defaults objects */
+Chart.register(Legend, ...CHART_SCALES, ...CHART_ELEMENTS, ...CHART_CONTROLLERS, ...CHART_PLUGINS);
+/* Chart.defaults is read only; set each key modified in
+   CHART_GLOBAL_DEFAULTS manually */
+const mergedDefaults = mergeDeepAll(Chart.defaults, CHART_GLOBAL_DEFAULTS);
+Object.entries(CHART_GLOBAL_DEFAULTS).forEach(([key]) => {
+    Chart.defaults[key] = mergedDefaults[key];
+});
+
+const { getThemeColorHexString: getThemeColorHexString$4 } = ColorHelper;
+/* The chart.js annotation does not allow for changing the
+defaults it comes with. In order to have sensible defaults
+this object is used instead and manually merged with the
+rest of the annotations object */
+const borderColor = getThemeColorHexString$4('semi-dark');
+const borderDash = [6, 3];
+const borderWidth = 1;
+const CHART_ANNOTATIONS_CONFIG = {
+    line: {
+        borderDash,
+        borderWidth,
+        borderColor,
+    },
+    ellipse: {
+        borderDash,
+        borderWidth,
+        borderColor,
+        backgroundColor: 'transparent',
+    },
+    box: {
+        borderDash,
+        borderWidth,
+        borderColor,
+        backgroundColor: 'transparent',
+    },
+    point: {
+        backgroundColor: 'initial',
+    },
+};
+
+/* Allows for adding functionality to interactions chart.js while
+preserving the interaction functionality the consumer of the component has
+passed by being provided as a callback. */
+const CHART_INTERACTION_FUNCTIONS_EXTENSIONS = {
+    onHover: (_event, activeElements, _chart, callback) => {
+        if (_chart.options.onClick) {
+            _chart.canvas.style.cursor = activeElements[0] ? 'pointer' : 'default';
+        }
+        if (callback)
+            callback(_event, activeElements, _chart);
+    },
+};
+
+const { fontSize: fontSize$2 } = DesignTokenHelper;
+const { getThemeColorHexString: getThemeColorHexString$3, getThemeColorRgbString: getThemeColorRgbString$1 } = ColorHelper;
+/**
+ * A filter to read a chartpoint from a Chart.js point context (used for chartdata points). Context is provided by Chart.js.
+ */
+const getChartPointFromContext = (context) => {
+    return context.dataset.data[context.dataIndex];
+};
+const CHART_TYPES_CONFIG = {
+    bar: {
+        type: 'bar',
+        options: {
+            datasets: {
+                bar: {
+                    barPercentage: 0.6,
+                },
+                line: {
+                    spanGaps: true,
+                },
+            },
+            indexAxis: 'y',
+            scales: {
+                y: {
+                    grid: {
+                        drawBorder: false,
+                    },
+                    ticks: {
                         font: {
-                            size: parseInt(fontSize$2('xs')),
+                            size: parseInt(fontSize$2('s')),
                         },
                     },
                 },
@@ -156,44 +399,106 @@ const CHART_TYPES_CONFIG = {
                 point: {
                     radius: 0,
                 },
+                line: {
+                    borderColor: getThemeColorHexString$3('medium'),
+                },
             },
         },
     },
-    stock: {
-        type: 'line',
+    column: {
+        type: 'bar',
         options: {
-            responsive: true,
-            animation: {
-                duration: 0,
-            },
-            layout: {
-                padding: {
-                    left: 20,
-                    right: 20,
-                    top: 30,
-                    bottom: 0,
+            datasets: {
+                bar: {
+                    barPercentage: 0.6,
+                },
+                line: {
+                    spanGaps: true,
                 },
             },
-            backgroundColor: getThemeColorRgbString$1('semi-light', 0.5),
+            indexAxis: 'x',
             scales: {
                 x: {
                     grid: {
-                        lineWidth: 0,
+                        drawBorder: false,
                     },
                     ticks: {
-                        maxRotation: 0,
-                        autoSkipPadding: 120,
                         font: {
                             size: parseInt(fontSize$2('xs')),
                         },
                     },
                 },
-                y: {
-                    position: 'right',
-                    display: true,
-                    grid: {
-                        drawBorder: false,
-                    },
+            },
+            elements: {
+                line: {
+                    tension: 0.2,
+                    borderColor: getThemeColorHexString$3('medium'),
+                },
+                point: {
+                    radius: 0,
+                },
+            },
+        },
+    },
+    line: {
+        type: 'line',
+        options: {
+            backgroundColor: getThemeColorRgbString$1('semi-light', 0.5),
+            scales: {
+                x: {
+                    grid: {
+                        borderColor: getThemeColorHexString$3('medium'),
+                        borderWidth: 1,
+                    },
+                    ticks: {
+                        font: {
+                            size: parseInt(fontSize$2('xs')),
+                        },
+                    },
+                },
+            },
+            elements: {
+                point: {
+                    radius: 0,
+                },
+            },
+        },
+    },
+    stock: {
+        type: 'line',
+        options: {
+            responsive: true,
+            animation: {
+                duration: 0,
+            },
+            layout: {
+                padding: {
+                    left: 20,
+                    right: 20,
+                    top: 30,
+                    bottom: 0,
+                },
+            },
+            backgroundColor: getThemeColorRgbString$1('semi-light', 0.5),
+            scales: {
+                x: {
+                    grid: {
+                        lineWidth: 0,
+                    },
+                    ticks: {
+                        maxRotation: 0,
+                        autoSkipPadding: 120,
+                        font: {
+                            size: parseInt(fontSize$2('xs')),
+                        },
+                    },
+                },
+                y: {
+                    position: 'right',
+                    display: true,
+                    grid: {
+                        drawBorder: false,
+                    },
                     ticks: {
                         display: true,
                         font: {
@@ -221,9 +526,9 @@ const CHART_TYPES_CONFIG = {
                     enabled: true,
                     mode: 'index',
                     intersect: false,
-                    backgroundColor: getThemeColorHexString$4('semi-light'),
-                    titleColor: getThemeColorHexString$4('semi-light-contrast'),
-                    bodyColor: getThemeColorHexString$4('semi-light-contrast'),
+                    backgroundColor: getThemeColorHexString$3('semi-light'),
+                    titleColor: getThemeColorHexString$3('semi-light-contrast'),
+                    bodyColor: getThemeColorHexString$3('semi-light-contrast'),
                     caretSize: 0,
                     bodySpacing: 5,
                     titleSpacing: 5,
@@ -232,7 +537,7 @@ const CHART_TYPES_CONFIG = {
                         labelColor: (tooltipItem) => {
                             return {
                                 backgroundColor: tooltipItem.dataset.borderColor,
-                                borderColor: getThemeColorHexString$4('semi-light'),
+                                borderColor: getThemeColorHexString$3('semi-light'),
                                 borderWidth: 2, // This value must be exactly 2. If it is less, a white "border" will appear, if greater than, a shadow around the box will be shown.
                                 // An issue has been created, requesting a test to check this value doesn´t change: https://github.com/kirbydesign/designsystem/issues/2578
                             };
@@ -241,7 +546,7 @@ const CHART_TYPES_CONFIG = {
                 },
                 datalabels: {
                     backgroundColor: (context) => context.dataset.borderColor,
-                    color: getThemeColorHexString$4('white'),
+                    color: getThemeColorHexString$3('white'),
                     borderRadius: 3,
                     font: {
                         lineHeight: 1,
@@ -324,318 +629,13 @@ class ChartConfigService {
             },
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartConfigService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartConfigService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartConfigService, decorators: [{
             type: Injectable
         }] });
 
-class AnnotationsDelegate {
-    constructor(chartConfigService) {
-        this.chartConfigService = chartConfigService;
-    }
-    applyDefaultsToAnnotations(annotations) {
-        return annotations.map((annotation) => {
-            const annotationTypeDefaults = this.chartConfigService.getAnnotationDefaults(annotation.type);
-            return mergeDeepAll(annotationTypeDefaults, annotation);
-        });
-    }
-    createAnnotationPluginOptionsObject(annotations) {
-        const annotationsWithDefaults = this.applyDefaultsToAnnotations(annotations);
-        return {
-            plugins: {
-                annotation: {
-                    annotations: annotationsWithDefaults,
-                },
-            },
-        };
-    }
-    getExistingChartAnnotations(chart) {
-        const annotations = chart.options.plugins?.annotation?.annotations;
-        /* In browser chart.js might return annotations as a Proxy object; force it to be an array.
-           Each annotationOption in the resulting array  will also be a Proxy object.
-           But internally chart.js will just work with them as normal values */
-        if (annotations !== undefined) {
-            return Object.keys(annotations).map((key) => annotations[key]);
-        }
-        else {
-            return [];
-        }
-    }
-}
-
-const { getThemeColorHexString: getThemeColorHexString$3 } = ColorHelper;
-const hoverBackgroundColor = getThemeColorHexString$3('primary');
-const backgroundColor = getThemeColorHexString$3('secondary');
-function scriptedBackgroundColor(context) {
-    const dataset = context.dataset;
-    const highlightedElements = dataset?.kirbyOptions?.highlightedElements;
-    if (highlightedElements && highlightedElements.includes(context.dataIndex)) {
-        return hoverBackgroundColor;
-    }
-    else {
-        return backgroundColor;
-    }
-}
-// Only adds a hovercolor if an onClick handler is provided
-function scriptedHoverBackgroundColor(context) {
-    if (context.chart.options.onClick) {
-        return hoverBackgroundColor;
-    }
-}
-const CHART_GLOBAL_DEFAULTS = {
-    maintainAspectRatio: false,
-    color: getThemeColorHexString$3('black'),
-    resizeDelay: 10,
-    elements: {
-        bar: {
-            backgroundColor: scriptedBackgroundColor,
-            hoverBackgroundColor: scriptedHoverBackgroundColor,
-        },
-        line: {
-            borderColor: scriptedBackgroundColor,
-            borderWidth: 2,
-            tension: 0.3,
-        },
-    },
-    scales: {
-        linear: {
-            display: false,
-            ticks: {
-                display: false,
-            },
-        },
-        category: {
-            display: true,
-            grid: {
-                display: false,
-            },
-        },
-    },
-    font: {
-        family: 'Roboto',
-    },
-    plugins: {
-        legend: {
-            display: false,
-        },
-        datalabels: {
-            display: false,
-        },
-        tooltip: {
-            enabled: false,
-        },
-    },
-};
-
-/*
-  The marker plugin is heavily inspired by https://chartjs-plugin-crosshair.netlify.app
-  The project appears stale and only the vertical line feature is needed
-   part of the plugin that was actually needed is implemented here.
-*/
-const defaultOptions = {
-    line: {
-        color: 'black',
-        width: 1,
-        dashPattern: [],
-    },
-    snap: {
-        enabled: false,
-    },
-};
-const hasMarkerConfiguration = (chart) => {
-    /*
-      Hacky solution. Should be fixed in this issue: https://github.com/kirbydesign/designsystem/issues/1967
-    */
-    return chart.data.datasets.some((dataset) => !!dataset?.kirbyOptions?.isStockChart);
-};
-var MarkerPlugin = {
-    id: 'marker',
-    afterInit: function (chart) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        const xScaleType = chart.config.options.scales.x.type;
-        if (xScaleType !== 'linear' &&
-            xScaleType !== 'time' &&
-            xScaleType !== 'category' &&
-            xScaleType !== 'logarithmic') {
-            return;
-        }
-        if (chart.options.plugins.marker === undefined) {
-            chart.options.plugins.marker = defaultOptions;
-        }
-        chart.marker = {
-            enabled: false,
-            suppressUpdate: false,
-            x: null,
-            originalData: [],
-            originalXRange: {},
-            dragStarted: false,
-            dragStartX: null,
-            dragEndX: null,
-            suppressTooltips: false,
-            ignoreNextEvents: 0,
-        };
-    },
-    getOption: function (chart, category, name) {
-        return valueOrDefault(chart.options.plugins.marker[category]
-            ? chart.options.plugins.marker[category][name]
-            : undefined, defaultOptions[category][name]);
-    },
-    getXScale: function (chart) {
-        return chart.data.datasets.length ? chart.scales[chart.getDatasetMeta(0).xAxisID] : null;
-    },
-    getYScale: function (chart) {
-        return chart.scales[chart.getDatasetMeta(0).yAxisID];
-    },
-    afterEvent: function (chart, event) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        if (chart.config.options.scales.x.length == 0) {
-            return;
-        }
-        const e = event.event;
-        const xScaleType = chart.config.options.scales.x.type;
-        if (xScaleType !== 'linear' &&
-            xScaleType !== 'time' &&
-            xScaleType !== 'category' &&
-            xScaleType !== 'logarithmic') {
-            return;
-        }
-        const xScale = this.getXScale(chart);
-        if (!xScale) {
-            return;
-        }
-        if (chart.marker.ignoreNextEvents > 0) {
-            chart.marker.ignoreNextEvents -= 1;
-            return;
-        }
-        chart.marker.enabled =
-            e.type !== 'mouseout' &&
-                e.x > xScale.getPixelForValue(xScale.min) &&
-                e.x < xScale.getPixelForValue(xScale.max);
-        if (!chart.marker.enabled && !chart.marker.suppressUpdate) {
-            if (e.x > xScale.getPixelForValue(xScale.max)) {
-                // suppress future updates to prevent endless redrawing of chart
-                chart.marker.suppressUpdate = true;
-                chart.update('none');
-            }
-            chart.marker.dragStarted = false; // cancel zoom in progress
-            return false;
-        }
-        chart.marker.suppressUpdate = false;
-        chart.marker.x = e.x;
-        chart.draw();
-    },
-    doDraw: function (chart) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        if (!chart.marker.enabled) {
-            return;
-        }
-        this.drawTraceLine(chart);
-        this.interpolateValues(chart);
-        this.drawTracePoints(chart);
-        return true;
-    },
-    beforeDraw: function (chart) {
-        return this.doDraw(chart);
-    },
-    // Logic moved to beforeDraw in order
-    // for the vertical line to be drawn
-    // under tooltip and datalabels.
-    // afterDraw: function(chart) {
-    //   return this.doDraw(chart);
-    // },
-    drawTraceLine: function (chart) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        const yScale = this.getYScale(chart);
-        const lineWidth = this.getOption(chart, 'line', 'width');
-        const color = this.getOption(chart, 'line', 'color');
-        const dashPattern = this.getOption(chart, 'line', 'dashPattern');
-        const snapEnabled = this.getOption(chart, 'snap', 'enabled');
-        let lineX = chart.marker.x;
-        if (snapEnabled && chart._active.length) {
-            lineX = chart._active[0].element.x;
-        }
-        chart.ctx.beginPath();
-        chart.ctx.setLineDash(dashPattern);
-        chart.ctx.moveTo(lineX, yScale.getPixelForValue(yScale.max));
-        chart.ctx.lineWidth = lineWidth;
-        chart.ctx.strokeStyle = color;
-        chart.ctx.lineTo(lineX, yScale.getPixelForValue(yScale.min));
-        chart.ctx.stroke();
-        chart.ctx.setLineDash([]);
-    },
-    drawTracePoints: function (chart) {
-        if (!hasMarkerConfiguration(chart)) {
-            return;
-        }
-        for (let chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
-            const dataset = chart.data.datasets[chartIndex];
-            const meta = chart.getDatasetMeta(chartIndex);
-            const yScale = chart.scales[meta.yAxisID];
-            if (meta.hidden || !dataset.interpolate) {
-                continue;
-            }
-            chart.ctx.beginPath();
-            chart.ctx.arc(chart.marker.x, yScale.getPixelForValue(dataset.interpolatedValue), 3, 0, 2 * Math.PI, false);
-            chart.ctx.fillStyle = 'white';
-            chart.ctx.lineWidth = 2;
-            chart.ctx.strokeStyle = dataset.borderColor;
-            chart.ctx.fill();
-            chart.ctx.stroke();
-        }
-    },
-    interpolateValues: function (chart) {
-        for (let chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
-            const dataset = chart.data.datasets[chartIndex];
-            const meta = chart.getDatasetMeta(chartIndex);
-            const xScale = chart.scales[meta.xAxisID];
-            const xValue = xScale.getValueForPixel(chart.marker.x);
-            if (meta.hidden || !dataset.interpolate) {
-                continue;
-            }
-            const data = dataset.data;
-            const index = data.findIndex(function (o) {
-                return o.x >= xValue;
-            });
-            const prev = data[index - 1];
-            const next = data[index];
-            if (chart.data.datasets[chartIndex].steppedLine && prev) {
-                dataset.interpolatedValue = prev.y;
-            }
-            else if (prev && next) {
-                const slope = (next.y - prev.y) / (next.x - prev.x);
-                dataset.interpolatedValue = prev.y + (xValue - prev.x) * slope;
-            }
-            else {
-                dataset.interpolatedValue = NaN;
-            }
-        }
-    },
-};
-
-const CHART_SCALES = [CategoryScale, LinearScale, TimeScale];
-const CHART_ELEMENTS = [BarElement, LineElement, PointElement];
-const CHART_CONTROLLERS = [BarController, LineController];
-const CHART_PLUGINS = [annotationPlugin, Filler, ChartDataLabels, Tooltip, MarkerPlugin].map((plugin) => (plugin?.__esModule ? plugin.default : plugin));
-/* Order matters; defaults must be merged after register as
-   register modifies the Chart.defaults objects */
-Chart.register(Legend, ...CHART_SCALES, ...CHART_ELEMENTS, ...CHART_CONTROLLERS, ...CHART_PLUGINS);
-/* Chart.defaults is read only; set each key modified in
-   CHART_GLOBAL_DEFAULTS manually */
-const mergedDefaults = mergeDeepAll(Chart.defaults, CHART_GLOBAL_DEFAULTS);
-Object.entries(CHART_GLOBAL_DEFAULTS).forEach(([key]) => {
-    Chart.defaults[key] = mergedDefaults[key];
-});
-
 class ChartJSService {
     constructor(chartConfigService) {
         this.chartConfigService = chartConfigService;
@@ -800,10 +800,10 @@ class ChartJSService {
             return this.getDefaultLabels(datasets);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartJSService, deps: [{ token: ChartConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartJSService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartJSService, deps: [{ token: ChartConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartJSService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartJSService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartJSService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ChartConfigService }] });
 
@@ -1065,10 +1065,10 @@ class BaseChartComponent {
     ngOnDestroy() {
         this.chartJSService.destroyChart();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseChartComponent, deps: [{ token: ChartJSService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BaseChartComponent, isStandalone: false, selector: "kirby-base-chart", inputs: { type: "type", data: "data", labels: "labels", customOptions: "customOptions", annotations: "annotations", highlightedElements: "highlightedElements", height: "height" }, host: { properties: { "style.--kirby-chart-height": "this._height" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: BaseChartComponent, deps: [{ token: ChartJSService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: BaseChartComponent, isStandalone: false, selector: "kirby-base-chart", inputs: { type: "type", data: "data", labels: "labels", customOptions: "customOptions", annotations: "annotations", highlightedElements: "highlightedElements", height: "height" }, host: { properties: { "style.--kirby-chart-height": "this._height" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: BaseChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-base-chart', standalone: false, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
         }], ctorParameters: () => [{ type: ChartJSService }], propDecorators: { type: [{
@@ -1098,10 +1098,10 @@ class ChartComponent extends BaseChartComponent {
         super(...arguments);
         this.type = 'column';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ChartComponent, isStandalone: false, selector: "kirby-chart", inputs: { type: "type" }, providers: [ChartJSService], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: ChartComponent, isStandalone: false, selector: "kirby-chart", inputs: { type: "type" }, providers: [ChartJSService], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-chart', providers: [ChartJSService], standalone: false, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
         }], propDecorators: { type: [{
@@ -1196,10 +1196,10 @@ class StockChartJSService extends ChartJSService {
         });
         return { value, pointer };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StockChartJSService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StockChartJSService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: StockChartJSService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: StockChartJSService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StockChartJSService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: StockChartJSService, decorators: [{
             type: Injectable
         }] });
 
@@ -1211,10 +1211,10 @@ class StockChartComponent extends BaseChartComponent {
     renderChart() {
         super.renderChart({ dataLabelOptions: this.dataLabelOptions });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StockChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StockChartComponent, isStandalone: false, selector: "kirby-stock-chart", inputs: { dataLabelOptions: "dataLabelOptions" }, providers: [{ provide: ChartJSService, useClass: StockChartJSService }], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: StockChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: StockChartComponent, isStandalone: false, selector: "kirby-stock-chart", inputs: { dataLabelOptions: "dataLabelOptions" }, providers: [{ provide: ChartJSService, useClass: StockChartJSService }], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StockChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: StockChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-stock-chart', providers: [{ provide: ChartJSService, useClass: StockChartJSService }], standalone: false, template: "<div class=\"chart-container\">\n  <canvas #chartCanvas>\n    <!-- Slotted content makes it possible to insert fallback content for screen readers \n    https://www.chartjs.org/docs/latest/general/accessibility.html-->\n    <ng-content></ng-content>\n  </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
         }], propDecorators: { dataLabelOptions: [{
@@ -1222,11 +1222,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class ChartsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ChartsModule, declarations: [ChartComponent, StockChartComponent], exports: [ChartComponent, StockChartComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartsModule, providers: [ChartConfigService] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0", ngImport: i0, type: ChartsModule, declarations: [ChartComponent, StockChartComponent], exports: [ChartComponent, StockChartComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartsModule, providers: [ChartConfigService] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChartsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ChartsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ChartComponent, StockChartComponent],