@limetech/lime-elements 40.19.0 → 40.20.0

package/dist/collection/components/chart/chart.js

@@ -1,18 +1,25 @@
-import { h } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
+import { BarChart, GaugeChart, LineChart, PieChart, ScatterChart, } from "echarts/charts";
+import { GridComponent, PolarComponent, TooltipComponent, } from "echarts/components";
+import { init, use } from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
 import translate from "../../global/translations";
-import { createRandomString } from "../../util/random-string";
-const PERCENT = 100;
-const DEFAULT_INCREMENT_SIZE = 10;
-/**
- * Types whose items are parts of one whole. They draw no axis, and an item's
- * value or range extent is its share of `maxValue`, or of the combined items.
- */
-const WHOLE_TYPES = new Set([
-    'stacked-bar',
-    'pie',
-    'doughnut',
-    'ring',
-]);
+import { findNavigationTarget, findTabStop, isNavigationKey, NO_NAVIGATION_TARGET, } from "../../util/keyboard-navigation";
+import { drawChart, fitItemTexts, getItemIndex, getItemLabel, locateItem, } from "./options";
+import { formatValue, getAxisRange, MAX_AXIS_STEPS, usesAxisIncrement, } from "./scale";
+import { createThemeReader, watchTheme, } from "./theme";
+const orientations = ['horizontal', 'vertical'];
+const extensions = [
+    BarChart,
+    GaugeChart,
+    LineChart,
+    PieChart,
+    ScatterChart,
+    GridComponent,
+    PolarComponent,
+    TooltipComponent,
+    SVGRenderer,
+];
 /**
  * A chart is a graphical representation of data, in which
  * visual symbols such as such bars, dots, lines, or slices, represent
@@ -41,7 +48,6 @@ const WHOLE_TYPES = new Set([
  * @exampleComponent limel-example-chart-accessibility
  * @exampleComponent limel-example-chart-axis-labels
  * @exampleComponent limel-example-chart-styling
- * @exampleComponent limel-example-chart-creative-styling
  * @beta
  */
 export class Chart {
@@ -90,8 +96,42 @@ export class Chart {
          * Indicates whether the chart is in a loading state.
          */
         this.loading = false;
+        /**
+         * The item that last had focus, which is the one that Tab returns to.
+         */
+        this.focusedIndex = 0;
+        this.themeMayHaveChanged = false;
+        this.invalidColors = new Set();
+        this.setPlot = (element) => {
+            this.plot = element;
+        };
+        this.handleResize = () => {
+            this.draw();
+        };
+        this.handleThemeChange = () => {
+            this.themeMayHaveChanged = true;
+            this.draw();
+        };
+        this.handleChartClick = (event) => {
+            var _a, _b;
+            if (!this.drawing) {
+                return;
+            }
+            const item = this.getClickableItem(getItemIndex(this.drawing, event));
+            if (!item) {
+                return;
+            }
+            (_b = (_a = event.event) === null || _a === void 0 ? void 0 : _a.event) === null || _b === void 0 ? void 0 : _b.stopPropagation();
+            this.interact.emit(item);
+        };
+        this.handleChartOver = (event) => {
+            this.highlightItemAt(event, true);
+        };
+        this.handleChartOut = (event) => {
+            this.highlightItemAt(event, false);
+        };
         this.handleClick = (event) => {
-            const item = this.getClickableItem(event.currentTarget);
+            const item = this.getClickableItem(this.getRowIndex(event));
             if (!item) {
                 return;
             }
@@ -99,27 +139,79 @@ export class Chart {
             this.interact.emit(item);
         };
         this.handleKeyDown = (event) => {
+            const orientation = orientations.find((option) => isNavigationKey(event, { orientation: option }));
+            if (orientation) {
+                event.preventDefault();
+                this.focusItem(findNavigationTarget(this.items, event.key, this.getRowIndex(event), { orientation: orientation }));
+                return;
+            }
             if (event.key !== 'Enter' && event.key !== ' ') {
                 return;
             }
-            const item = this.getClickableItem(event.currentTarget);
+            const item = this.getClickableItem(this.getRowIndex(event));
             if (!item) {
                 return;
             }
             event.preventDefault();
             this.interact.emit(item);
         };
+        this.handleFocus = (event) => {
+            const row = event.currentTarget;
+            this.focusedIndex = Number(row.dataset.index);
+            this.showItem(row, true);
+        };
+        this.handleBlur = (event) => {
+            this.showItem(event.currentTarget, false);
+        };
     }
     componentWillLoad() {
-        this.recalculateRangeData();
+        this.warnAboutAxisIncrement();
+    }
+    connectedCallback() {
+        this.draw();
+    }
+    componentDidRender() {
+        this.draw();
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        this.disposeChart();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+        (_b = this.stopWatchingTheme) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.stopWatchingTheme = undefined;
+        (_c = this.themeReader) === null || _c === void 0 ? void 0 : _c.dispose();
+        this.themeReader = undefined;
+    }
+    warnAboutAxisIncrement() {
+        const warning = this.getAxisIncrementWarning();
+        if (warning && warning !== this.axisIncrementWarning) {
+            console.warn(warning);
+        }
+        this.axisIncrementWarning = warning;
+    }
+    getAxisIncrementWarning() {
+        var _a;
+        const increment = this.axisIncrement;
+        if (increment === undefined || increment === null) {
+            return;
+        }
+        if (increment <= 0 || Number.isNaN(increment)) {
+            return `limel-chart: \`axisIncrement\` must be above 0, but was ${increment}. Working out a step from the values instead.`;
+        }
+        if (!usesAxisIncrement(this.type)) {
+            return;
+        }
+        const range = getAxisRange((_a = this.items) !== null && _a !== void 0 ? _a : [], this.maxValue, increment);
+        if (range.increment !== increment) {
+            return `limel-chart: \`axisIncrement\` ${increment} would divide the axis into more than ${MAX_AXIS_STEPS} steps. Working out a step from the values instead.`;
+        }
     }
     render() {
         if (this.loading) {
             return h("limel-spinner", { limeBranded: false });
         }
-        return (h("table", { "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", style: {
-                '--limel-chart-number-of-items': this.items.length.toString(),
-            } }, this.renderCaption(), this.renderTableHeader(), this.renderAxises(), h("tbody", { class: "chart" }, this.renderItems())));
+        return (h(Host, null, h("div", { class: "plot", "aria-hidden": "true", ref: this.setPlot }), h("table", { "aria-live": "polite" }, this.renderCaption(), this.renderTableHeader(), h("tbody", null, this.renderItems()))));
     }
     renderCaption() {
         if (!this.accessibleLabel) {
@@ -128,300 +220,237 @@ export class Chart {
         return h("caption", null, this.accessibleLabel);
     }
     renderTableHeader() {
-        var _a, _b;
-        return (h("thead", null, h("tr", null, h("th", { scope: "col" }, (_a = this.accessibleItemsLabel) !== null && _a !== void 0 ? _a : translate.get('items', this.language)), h("th", { scope: "col" }, (_b = this.accessibleValuesLabel) !== null && _b !== void 0 ? _b : translate.get('value', this.language)))));
+        return (h("thead", null, h("tr", null, h("th", { scope: "col" }, this.itemsLabel), h("th", { scope: "col" }, this.valuesLabel))));
     }
-    renderAxises() {
-        if (!['bar', 'dot', 'area', 'line', 'scatter'].includes(this.type)) {
+    get itemsLabel() {
+        var _a;
+        return ((_a = this.accessibleItemsLabel) !== null && _a !== void 0 ? _a : translate.get('items', this.language));
+    }
+    get valuesLabel() {
+        var _a;
+        return ((_a = this.accessibleValuesLabel) !== null && _a !== void 0 ? _a : translate.get('value', this.language));
+    }
+    renderItems() {
+        var _a, _b;
+        const tabStop = findTabStop((_a = this.items) !== null && _a !== void 0 ? _a : [], this.focusedIndex);
+        return (_b = this.items) === null || _b === void 0 ? void 0 : _b.map((item, index) => (h("tr", { "data-index": index, "aria-description": this.getRowDescription(index), tabIndex: index === tabStop ? 0 : -1, role: item.clickable ? 'button' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("td", null, item.text), h("td", null, formatValue(item, this.type)))));
+    }
+    getRowDescription(index) {
+        const label = getItemLabel({
+            items: this.items,
+            type: this.type,
+            maxValue: this.maxValue,
+            displayItemPercentage: this.displayItemPercentage,
+        }, index);
+        return label === this.items[index].text ? undefined : label;
+    }
+    draw() {
+        var _a;
+        if (!((_a = this.plot) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+            this.disposeChart();
             return;
         }
-        if (this.type === 'scatter') {
-            return this.renderScatterAxises();
-        }
-        return this.renderAxisLines(this.range);
-    }
-    // Two value axes, so a full grid: horizontal lines for the vertical axis,
-    // vertical lines for the horizontal one. Which range maps to which flips
-    // with `orientation`, like the points.
-    renderScatterAxises() {
-        const portrait = this.orientation === 'portrait';
-        const horizontalLines = portrait ? this.secondaryAxisRange : this.range;
-        const verticalLines = portrait ? this.range : this.secondaryAxisRange;
-        return [
-            this.renderAxisLines(horizontalLines, 'horizontal-lines'),
-            this.renderAxisLines(verticalLines, 'vertical-lines'),
-        ];
-    }
-    renderAxisLines(range, direction) {
-        const { minValue, maxValue, increment } = range;
-        const lines = [];
-        for (let value = minValue; value <= maxValue; value += increment) {
-            lines.push(h("div", { class: {
-                    'axis-line': true,
-                    'zero-line': value === 0,
-                }, role: "presentation" }, h("limel-badge", { label: value })));
+        this.observeSize();
+        const { clientWidth: width, clientHeight: height } = this.plot;
+        if (!width || !height) {
+            return;
         }
-        const cssClass = { axises: true };
-        if (direction) {
-            cssClass[direction] = true;
+        this.createChart();
+        if (width !== this.chart.getWidth() ||
+            height !== this.chart.getHeight()) {
+            this.chart.resize();
         }
-        return (h("div", { class: cssClass, role: "presentation", key: direction }, lines));
+        this.updateChart();
+        this.fitItemTextsToSize();
     }
-    renderItems() {
+    createChart() {
         var _a;
-        if (!((_a = this.items) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (((_a = this.chart) === null || _a === void 0 ? void 0 : _a.getDom()) === this.plot) {
             return;
         }
-        let cumulativeOffset = 0;
-        return this.items.map((item, index) => {
-            const itemId = createRandomString();
-            const sizeAndOffset = this.calculateSizeAndOffset(item);
-            const size = sizeAndOffset.size;
-            let offset = sizeAndOffset.offset;
-            if (this.type === 'pie' || this.type === 'doughnut') {
-                offset = cumulativeOffset;
-                cumulativeOffset += size;
-            }
-            return (h("tr", { style: this.getItemStyle(item, index, size, offset), class: this.getItemClass(item), key: itemId, id: itemId, "data-index": index, tabIndex: 0, role: item.clickable ? 'button' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("td", { class: "text" }, this.getItemText(item)), h("td", { class: "value" }, this.getFormattedValue(item)), this.renderTooltip(item, itemId, size)));
-        });
+        this.disposeChart();
+        /*!
+         * Apache ECharts
+         * Copyright 2017-2026 The Apache Software Foundation
+         *
+         * This product includes software developed at
+         * The Apache Software Foundation (https://www.apache.org/).
+         *
+         * Licensed under the Apache License, Version 2.0
+         * (https://www.apache.org/licenses/LICENSE-2.0).
+         *
+         *
+         * ZRender
+         * Copyright (c) 2017, Baidu Inc.
+         * All rights reserved.
+         *
+         * Redistribution and use in source and binary forms, with or without
+         * modification, are permitted provided that the following conditions are met:
+         *
+         * * Redistributions of source code must retain the above copyright notice, this
+         *   list of conditions and the following disclaimer.
+         *
+         * * Redistributions in binary form must reproduce the above copyright notice,
+         *   this list of conditions and the following disclaimer in the documentation
+         *   and/or other materials provided with the distribution.
+         *
+         * * Neither the name of the copyright holder nor the names of its
+         *   contributors may be used to endorse or promote products derived from
+         *   this software without specific prior written permission.
+         *
+         * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+         * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+         * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+         * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+         * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+         * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+         * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+         * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+         * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+         * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+         */
+        use(extensions);
+        this.chart = init(this.plot, null, { renderer: 'svg' });
+        this.chart.on('click', this.handleChartClick);
+        this.chart.on('mouseover', this.handleChartOver);
+        this.chart.on('mouseout', this.handleChartOut);
     }
-    getItemStyle(item, index, size, offset) {
-        if (this.type === 'scatter') {
-            return this.getScatterItemStyle(item, index);
+    updateChart() {
+        var _a, _b;
+        const settings = this.getSettings();
+        const drawnSettings = JSON.stringify(settings);
+        if (drawnSettings === this.drawnSettings && !this.themeMayHaveChanged) {
+            return;
         }
-        const style = {
-            '--limel-chart-item-offset': `${offset}`,
-            '--limel-chart-item-size': `${size}`,
-            '--limel-chart-item-index': `${index}`,
-            '--limel-chart-item-value': `${item.value}`,
-        };
-        if (item.color) {
-            style['--limel-chart-item-color'] = item.color;
+        this.themeMayHaveChanged = false;
+        (_a = this.themeReader) !== null && _a !== void 0 ? _a : (this.themeReader = createThemeReader(this.host.shadowRoot));
+        (_b = this.stopWatchingTheme) !== null && _b !== void 0 ? _b : (this.stopWatchingTheme = watchTheme(this.host, this.handleThemeChange));
+        const theme = this.themeReader.theme();
+        const coloredSettings = this.withItemColors(settings, theme);
+        const drawnTheme = JSON.stringify({
+            theme: theme,
+            itemColors: coloredSettings.items.map((item) => item.color),
+        });
+        if (drawnSettings === this.drawnSettings &&
+            drawnTheme === this.drawnTheme) {
+            return;
         }
-        if (this.type === 'line' || this.type === 'area') {
-            const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);
-            style['--limel-chart-next-item-size'] = `${nextItem.size}`;
-            style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;
+        this.drawnSettings = drawnSettings;
+        this.drawnTheme = drawnTheme;
+        this.drawing = drawChart(coloredSettings, theme, this.itemSpace);
+        this.chart.setOption(this.drawing.option, { notMerge: true });
+        const focusedRow = this.host.shadowRoot.activeElement;
+        if (focusedRow instanceof HTMLElement && focusedRow.dataset.index) {
+            this.showItem(focusedRow, true);
         }
-        return style;
     }
-    getScatterItemStyle(item, index) {
-        const style = {
-            '--limel-chart-item-offset-x': `${this.normalize(this.getXValue(item), this.secondaryAxisRange)}`,
-            '--limel-chart-item-offset-y': `${this.normalize(this.getYValue(item), this.range)}`,
-            '--limel-chart-item-index': `${index}`,
-        };
-        if (item.color) {
-            style['--limel-chart-item-color'] = item.color;
+    fitItemTextsToSize() {
+        var _a;
+        const axis = (_a = this.drawing) === null || _a === void 0 ? void 0 : _a.itemTextAxis;
+        if (!axis) {
+            return;
         }
-        return style;
+        const finder = { [`${axis}Index`]: 0 };
+        const itemSpace = Math.floor(Math.abs(this.chart.convertToPixel(finder, 1) -
+            this.chart.convertToPixel(finder, 0)));
+        if (itemSpace === this.itemSpace) {
+            return;
+        }
+        this.itemSpace = itemSpace;
+        this.chart.setOption(fitItemTexts(this.drawing, itemSpace));
     }
-    getItemClass(item) {
+    getSettings() {
+        var _a;
         return {
-            item: true,
-            'has-start-value': this.type !== 'scatter' && Array.isArray(item.value),
-            'has-negative-value-only': this.getMaximumValue(item) < 0 && !this.isRangeItem(item),
-            // Scatter coordinates are independent values, so "value is zero"
-            // (which hides the value label elsewhere) must not apply.
-            'has-value-zero': this.type !== 'scatter' && this.getMaximumValue(item) === 0,
+            items: ((_a = this.items) !== null && _a !== void 0 ? _a : []).map((item) => ({
+                text: item.text,
+                value: item.value,
+                formattedValue: item.formattedValue,
+                color: item.color,
+                clickable: item.clickable,
+            })),
+            type: this.type,
+            orientation: this.orientation,
+            maxValue: this.maxValue,
+            axisIncrement: this.axisIncrement,
+            displayAxisLabels: this.displayAxisLabels,
+            itemsLabel: this.itemsLabel,
+            valuesLabel: this.valuesLabel,
+            displayItemText: this.displayItemText,
+            displayItemValue: this.displayItemValue,
+            displayItemPercentage: this.displayItemPercentage,
         };
     }
-    calculateSizeAndOffset(item) {
-        const { minValue, totalRange } = this.range;
-        if (!item) {
-            return {
-                size: 0,
-                offset: 0,
-            };
-        }
-        if (this.isPartOfWhole()) {
-            return {
-                size: (this.getValueSpan(item) / totalRange) * PERCENT,
-                offset: 0,
-            };
-        }
-        let startValue = 0;
-        if (this.isRangeItem(item)) {
-            startValue = this.getMinimumValue(item);
-        }
-        const normalizedStart = ((startValue - minValue) / totalRange) * PERCENT;
-        const normalizedEnd = ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;
-        return {
-            size: normalizedEnd - normalizedStart,
-            offset: normalizedStart,
-        };
+    withItemColors(settings, theme) {
+        return Object.assign(Object.assign({}, settings), { items: settings.items.map((item) => (Object.assign(Object.assign({}, item), { color: this.getItemColor(item, theme) }))) });
     }
-    getFormattedValue(item) {
-        const { value, formattedValue } = item;
-        if (formattedValue) {
-            return formattedValue;
+    getItemColor(item, theme) {
+        if (!item.color) {
+            return theme.itemColor;
         }
-        if (Array.isArray(value)) {
-            if (this.type === 'scatter') {
-                return `(${value[0]}, ${value[1]})`;
-            }
-            return `${value[0]} — ${value[1]}`;
+        const color = this.themeReader.color(item.color);
+        if (color) {
+            return color;
         }
-        return `${value}`;
-    }
-    getItemText(item) {
-        return item.text;
-    }
-    renderTooltip(item, itemId, size) {
-        const text = this.getItemText(item);
-        const PERCENT_DECIMAL = 2;
-        const formattedValue = this.getFormattedValue(item);
-        const tooltipProps = {
-            label: text,
-            helperLabel: formattedValue,
-            elementId: itemId,
-        };
-        if (this.displayItemPercentage && this.isPartOfWhole()) {
-            tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;
+        if (!this.invalidColors.has(item.color)) {
+            this.invalidColors.add(item.color);
+            const hint = item.color.includes('var(')
+                ? ' Check that its variables are set, and that they make a color.'
+                : '';
+            console.warn(`limel-chart: the color of an item must be a CSS color, but was \`${item.color}\`.${hint} Using the default item color instead.`);
         }
-        return (h("limel-tooltip", Object.assign({}, tooltipProps, { openDirection: this.orientation === 'portrait' ? 'right' : 'top' })));
+        return theme.itemColor;
     }
-    calculateRange() {
-        var _a;
-        if (this.range) {
-            return this.range;
-        }
-        if (this.isPartOfWhole()) {
-            return this.calculateWholeRange();
-        }
-        const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));
-        const maxRange = Math.max(...this.items.map(this.getMaximumValue));
-        const finalMaxRange = (_a = this.maxValue) !== null && _a !== void 0 ? _a : maxRange;
-        if (!this.axisIncrement) {
-            this.axisIncrement = this.calculateAxisIncrement(this.items.map(this.getMaximumValue));
+    observeSize() {
+        if (this.resizeObserver || typeof ResizeObserver === 'undefined') {
+            return;
         }
-        const visualMaxValue = Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;
-        const visualMinValue = Math.floor(minRange / this.axisIncrement) * this.axisIncrement;
-        const totalRange = visualMaxValue - visualMinValue;
-        return {
-            minValue: visualMinValue,
-            maxValue: visualMaxValue,
-            totalRange: totalRange,
-            increment: this.axisIncrement,
-        };
+        this.resizeObserver = new ResizeObserver(this.handleResize);
+        this.resizeObserver.observe(this.host);
     }
-    /**
-     * The range of a chart whose items are parts of one whole: `maxValue`
-     * when set, otherwise the combined item values or range extents. The value
-     * is a scale, not a cap, so the combined size can exceed it. The whole is
-     * not rounded to an axis step, since these types draw no axis and an item's
-     * size has to be its exact share.
-     */
-    calculateWholeRange() {
+    disposeChart() {
         var _a;
-        const sum = this.items.reduce((total, item) => total + this.getValueSpan(item), 0);
-        const inferredWhole = sum > 0 ? sum : 1;
-        // An explicit zero also falls back to 1, so normalization stays finite.
-        const whole = ((_a = this.maxValue) !== null && _a !== void 0 ? _a : inferredWhole) || 1;
-        return {
-            minValue: 0,
-            maxValue: whole,
-            totalRange: whole,
-            increment: whole,
-        };
-    }
-    isPartOfWhole() {
-        return WHOLE_TYPES.has(this.type);
-    }
-    calculateAxisIncrement(values, steps = DEFAULT_INCREMENT_SIZE) {
-        return this.calculateNiceStep(Math.max(...values), steps);
-    }
-    // A "nice" step (…× 10ⁿ) dividing `span` into ~`steps` intervals. Takes the
-    // axis length, not a raw max, so it's sign-safe (a negative max would make
-    // `Math.log10` return `NaN`).
-    calculateNiceStep(span, steps = DEFAULT_INCREMENT_SIZE) {
-        if (span <= 0) {
-            // Every value is identical (e.g. all zero); any positive step works.
-            return 1;
+        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.chart = undefined;
+        this.drawing = undefined;
+        this.drawnSettings = undefined;
+        this.drawnTheme = undefined;
+        this.itemSpace = undefined;
+    }
+    highlightItemAt(event, highlight) {
+        if (!this.drawing) {
+            return;
         }
-        const roughStep = span / steps;
-        const magnitude = 10 ** Math.floor(Math.log10(roughStep));
-        return Math.ceil(roughStep / magnitude) * magnitude;
-    }
-    // Axis length measured through zero, so the origin is always included.
-    axisSpan(values) {
-        return Math.max(0, ...values) - Math.min(0, ...values);
-    }
-    // A "nice" rounded range for one scatter axis. Both bounds include zero, so
-    // a fully-negative axis still shows its origin (and zero line).
-    calculateAxisRange(values, increment) {
-        const minValue = Math.floor(Math.min(0, ...values) / increment) * increment;
-        const maxValue = Math.ceil(Math.max(0, ...values) / increment) * increment;
-        return {
-            minValue: minValue,
-            maxValue: maxValue,
-            totalRange: maxValue - minValue,
-            increment: increment,
-        };
-    }
-    normalize(value, range) {
-        if (range.totalRange === 0) {
-            // Degenerate axis (every value is zero): center the point so it
-            // stays visible instead of dividing by zero.
-            return PERCENT / 2;
+        const location = locateItem(this.drawing, getItemIndex(this.drawing, event));
+        if (location.seriesIndex === event.seriesIndex) {
+            return;
         }
-        return ((value - range.minValue) / range.totalRange) * PERCENT;
+        this.chart.dispatchAction(Object.assign({ type: highlight ? 'highlight' : 'downplay' }, location));
     }
-    getXValue(item) {
-        return Array.isArray(item.value) ? item.value[0] : item.value;
-    }
-    getYValue(item) {
-        return Array.isArray(item.value) ? item.value[1] : item.value;
-    }
-    getMinimumValue(item) {
-        const value = item.value;
-        return Array.isArray(value) ? Math.min(...value) : value;
-    }
-    getMaximumValue(item) {
-        const value = item.value;
-        return Array.isArray(value) ? Math.max(...value) : value;
-    }
-    getValueSpan(item) {
-        const startValue = this.isRangeItem(item)
-            ? this.getMinimumValue(item)
-            : 0;
-        return this.getMaximumValue(item) - startValue;
-    }
-    isRangeItem(item) {
-        return Array.isArray(item.value);
-    }
-    handleChange() {
-        this.range = null;
-        this.secondaryAxisRange = null;
-        this.recalculateRangeData();
-    }
-    recalculateRangeData() {
-        if (this.type === 'scatter') {
-            this.recalculateScatterRanges();
+    getClickableItem(index) {
+        const item = this.items[index];
+        if (!(item === null || item === void 0 ? void 0 : item.clickable)) {
             return;
         }
-        this.range = this.calculateRange();
-    }
-    // Each axis derives its own range and step from its own zero-anchored span
-    // (positive, negative, and zero-crossing data all grid sensibly). The single
-    // `axisIncrement` prop can't describe two independent axes, so scatter
-    // ignores it and auto-derives both, like it does `maxValue`.
-    recalculateScatterRanges() {
-        const xValues = this.items.map((item) => this.getXValue(item));
-        const yValues = this.items.map((item) => this.getYValue(item));
-        this.range = this.calculateAxisRange(yValues, this.calculateNiceStep(this.axisSpan(yValues)));
-        this.secondaryAxisRange = this.calculateAxisRange(xValues, this.calculateNiceStep(this.axisSpan(xValues)));
-    }
-    getClickableItem(target) {
-        const index = target.dataset.index;
-        if (index === undefined) {
+        return item;
+    }
+    getRowIndex(event) {
+        return Number(event.currentTarget.dataset.index);
+    }
+    focusItem(index) {
+        if (index === NO_NAVIGATION_TARGET) {
             return;
         }
-        const item = this.items[Number(index)];
-        if (!item.clickable) {
+        const rows = this.host.shadowRoot.querySelectorAll('tbody tr');
+        rows[index].focus();
+    }
+    showItem(row, show) {
+        if (!this.chart || !this.drawing) {
             return;
         }
-        return item;
+        const location = locateItem(this.drawing, Number(row.dataset.index));
+        this.chart.dispatchAction(Object.assign({ type: show ? 'highlight' : 'downplay' }, location));
+        this.chart.dispatchAction(Object.assign({ type: show ? 'showTip' : 'hideTip' }, location));
     }
     static get is() { return "limel-chart"; }
     static get encapsulation() { return "shadow"; }
@@ -629,9 +658,16 @@ export class Chart {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'area'\n        | 'bar'\n        | 'doughnut'\n        | 'line'\n        | 'nps'\n        | 'pie'\n        | 'ring'\n        | 'dot'\n        | 'scatter'\n        | 'stacked-bar'",
+                    "original": "ChartType",
                     "resolved": "\"area\" | \"bar\" | \"dot\" | \"doughnut\" | \"line\" | \"nps\" | \"pie\" | \"ring\" | \"scatter\" | \"stacked-bar\"",
-                    "references": {}
+                    "references": {
+                        "ChartType": {
+                            "location": "import",
+                            "path": "./chart.types",
+                            "id": "src/components/chart/chart.types.ts::ChartType",
+                            "referenceLocation": "ChartType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -696,7 +732,7 @@ export class Chart {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the axis increment for `bar`, `dot`, `area`, and `line` charts.\nHas no effect on other chart types."
+                    "text": "Sets the axis increment for `bar`, `dot`, `area`, and `line` charts.\nWhen it is not set, or not above zero, the chart works out a step\nfrom the values. It also does that when the step would divide the\naxis into more than 100 parts, so that it does not draw too many lines.\nHas no effect on other chart types."
                 },
                 "getter": false,
                 "setter": false,
@@ -725,6 +761,11 @@ export class Chart {
             }
         };
     }
+    static get states() {
+        return {
+            "focusedIndex": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "interact",
@@ -750,19 +791,20 @@ export class Chart {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "items",
-                "methodName": "handleChange"
-            }, {
                 "propName": "axisIncrement",
-                "methodName": "handleChange"
+                "methodName": "warnAboutAxisIncrement"
+            }, {
+                "propName": "items",
+                "methodName": "warnAboutAxisIncrement"
             }, {
                 "propName": "maxValue",
-                "methodName": "handleChange"
+                "methodName": "warnAboutAxisIncrement"
             }, {
                 "propName": "type",
-                "methodName": "handleChange"
+                "methodName": "warnAboutAxisIncrement"
             }];
     }
 }