@limetech/lime-elements 40.23.0 → 40.25.0

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

@@ -1,11 +1,14 @@
 import { format } from "echarts/core";
-import { getAxisRange, getDateRange, getDateTicks, getMaximumValue, getMinimumValue, getScatterRanges, getXValue, getYValue, getShare, getValueSpan, getWholeRange, isPartOfWhole, isRangeItem, } from "./scale";
+import { canDrawSeries, canStack, getAxisRange, getDateRange, getDateTicks, getMaximumValue, getMinimumValue, getScatterRanges, getXValue, getYValue, getShare, getValueSpan, getWholeRange, isPartOfWhole, isRangeItem, } from "./scale";
 import { formatShare, formatValue, getAxisValueFormatter, } from "./format";
+import { alignSeries, endsStack, getAxisItems, } from "./series";
 const DOT_SIZE = 8;
 const LINE_DOT_SIZE = 6;
 const CONNECTOR_WIDTH = 2;
 const DIMMED_OPACITY = 0.4;
 const AREA_OPACITY = 0.4;
+const SERIES_AREA_OPACITY = 0.15;
+const SERIES_STACK = { stack: 'series', stackStrategy: 'samesign' };
 const PADDING = 8;
 const NPS_MIN = -100;
 const NPS_MAX = 100;
@@ -16,6 +19,15 @@ const NPS_ARC_WIDTH = 16;
 const ITEM_TEXT_MIN_WIDTH = 40;
 const ITEM_TEXT_GAP = 4;
 const ITEM_TEXT_LINE_HEIGHT = 14;
+const SWATCH = {
+    width: '0.625rem',
+    height: '0.625rem',
+    'border-radius': '0.125rem',
+};
+const SWATCH_SHAPES = {
+    line: { height: '0.125rem' },
+    dot: { 'border-radius': '50%' },
+};
 const emphasis = { focus: 'self' };
 const blur = { itemStyle: { opacity: DIMMED_OPACITY } };
 const hidden = { show: false };
@@ -27,34 +39,116 @@ const hidden = { show: false };
  * when it is known from an earlier drawing
  */
 export function drawChart(settings, theme, itemSpace) {
-    const drawing = drawSeries(settings, theme, itemSpace);
-    return Object.assign(Object.assign({}, drawing), { option: Object.assign({ animation: theme.animate, textStyle: { fontFamily: theme.fontFamily, color: theme.textColor }, tooltip: {
-                trigger: 'item',
-                appendTo: 'body',
-                backgroundColor: theme.surfaceColor,
-                borderColor: theme.axisLineColor,
-                textStyle: { color: theme.textColor },
-                formatter: (params) => getTooltip(settings, getItemIndex(drawing, params)),
-            } }, drawing.option) });
+    const drawn = getDrawnSettings(settings);
+    const grid = getSeriesGrid(drawn);
+    const drawing = drawSeries(drawn, grid, theme, itemSpace);
+    return Object.assign(Object.assign({}, drawing), { option: Object.assign({ animation: theme.animate, textStyle: { fontFamily: theme.fontFamily, color: theme.textColor }, tooltip: Object.assign({ appendTo: 'body', backgroundColor: theme.surfaceColor, borderColor: theme.axisLineColor, textStyle: { color: theme.textColor } }, (drawn.series
+                ? getCategoryTooltipOption(drawn, grid, theme)
+                : {
+                    trigger: 'item',
+                    formatter: (params) => getTooltip(drawn, findItem(drawing, params).index),
+                })) }, drawing.option) });
 }
 /**
- * The index of the item drawn at a position, if an item is drawn there.
+ * The item drawn at a position, if an item is drawn there. A position in a
+ * series of ECharts that draws no items of its own, such as the invisible
+ * column of an item, belongs to the first series.
  * @param drawing - the drawing of the chart
  * @param location - a position within the drawn series
  */
-export function getItemIndex(drawing, location) {
-    return drawing.itemsAreSeries ? location.seriesIndex : location.dataIndex;
+export function findItem(drawing, location) {
+    var _a, _b;
+    if (drawing.itemsAreSeries) {
+        return { series: 0, index: location.seriesIndex };
+    }
+    return {
+        series: (_b = (_a = drawing.partsOfSeries) === null || _a === void 0 ? void 0 : _a[location.seriesIndex]) !== null && _b !== void 0 ? _b : 0,
+        index: location.dataIndex,
+    };
 }
 /**
  * Where an item is drawn, for highlighting it and showing its tooltip.
  * @param drawing - the drawing of the chart
- * @param index - the index of the item
+ * @param position - where the item is among the series
  */
-export function locateItem(drawing, index) {
+export function locateItem(drawing, position) {
     if (drawing.itemsAreSeries) {
-        return { seriesIndex: index, dataIndex: 0 };
+        return { seriesIndex: position.index, dataIndex: 0 };
+    }
+    return {
+        seriesIndex: drawing.seriesIndexes[position.series],
+        dataIndex: position.index,
+    };
+}
+/**
+ * The series that the chart draws: its series, when its type can draw them.
+ * @param settings - what the chart is given
+ */
+export function getDrawnSeries(settings) {
+    var _a;
+    if (!((_a = settings.series) === null || _a === void 0 ? void 0 : _a.length) || !canDrawSeries(settings.type)) {
+        return;
     }
-    return { seriesIndex: drawing.seriesIndex, dataIndex: index };
+    return settings.series;
+}
+/**
+ * The series whose items the chart draws as its items: its first series,
+ * when its type cannot draw series and it has no items.
+ * @param settings - what the chart is given
+ */
+export function getSeriesOfDrawnItems(settings) {
+    var _a, _b;
+    if (getDrawnSeries(settings) || ((_a = settings.items) === null || _a === void 0 ? void 0 : _a.length)) {
+        return;
+    }
+    return (_b = settings.series) === null || _b === void 0 ? void 0 : _b[0];
+}
+/**
+ * The items that the chart draws when it draws no series: its items, or the
+ * items of its first series when it has no items.
+ * @param settings - what the chart is given
+ */
+export function getDrawnItems(settings) {
+    var _a, _b, _c;
+    if (getDrawnSeries(settings)) {
+        return [];
+    }
+    return (_c = (_b = (_a = getSeriesOfDrawnItems(settings)) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : settings.items) !== null && _c !== void 0 ? _c : [];
+}
+/**
+ * Whether the chart stacks its series on each other. Only the types that
+ * can stack series do, and never with dates, since a sum of dates means
+ * nothing.
+ * @param settings - what the chart is given
+ */
+export function isStacked(settings) {
+    return Boolean(settings.stacked &&
+        getDrawnSeries(settings) &&
+        canStack(settings.type) &&
+        settings.valueFormat !== 'date');
+}
+function getDrawnSettings(settings) {
+    return Object.assign(Object.assign({}, settings), { items: getDrawnItems(settings), series: getDrawnSeries(settings), stacked: isStacked(settings) });
+}
+/**
+ * The series that the chart draws lined up by category, or the items it
+ * draws as the only series when it draws no series.
+ * @param settings - what the chart is given
+ */
+export function getSeriesGrid(settings) {
+    var _a;
+    return alignSeries((_a = getDrawnSeries(settings)) !== null && _a !== void 0 ? _a : [
+        { text: '', items: getDrawnItems(settings) },
+    ]);
+}
+/**
+ * The style of the marker of a series, in the legend and in the tooltip: a
+ * square for bars and areas, a line for lines, and a dot for dots.
+ * @param type - the chart type
+ * @param color - the color of the series
+ */
+export function getSwatchStyle(type, color = '') {
+    return Object.assign(Object.assign(Object.assign({}, SWATCH), SWATCH_SHAPES[type]), { 'background-color': color });
 }
 /**
  * Shows the text of every item on the axis, cut short to the space of the
@@ -113,7 +207,51 @@ export function getTooltip(settings, index) {
         .map((text) => format.encodeHTML(text))
         .join('<br/>');
 }
-function drawSeries(settings, theme, itemSpace) {
+/**
+ * The tooltip of a category of a chart with series, as HTML: its text, and
+ * the name and value of each series that has an item there.
+ * @param grid - the series of the chart, lined up by category
+ * @param style - how the chart writes values
+ * @param index - the index of the category
+ */
+export function getCategoryTooltip(grid, style, index) {
+    const category = grid.categories[index];
+    if (category === undefined) {
+        return '';
+    }
+    const lines = grid.series
+        .filter((series) => series.items[index] !== undefined)
+        .map((series) => {
+        var _a;
+        const item = series.items[index];
+        return getTooltipLine(getSwatch(style.type, (_a = item.color) !== null && _a !== void 0 ? _a : series.color), series.text, formatValue(item, style));
+    });
+    return [`<div>${format.encodeHTML(category)}</div>`, ...lines].join('');
+}
+function getTooltipLine(swatch, name, value) {
+    return `<div style="display:flex;justify-content:space-between;gap:1rem"><span>${swatch}${format.encodeHTML(name)}</span><span>${format.encodeHTML(value)}</span></div>`;
+}
+function getSwatch(type, color = '') {
+    const style = Object.assign({ display: 'inline-block', 'vertical-align': 'middle', 'margin-right': '0.375rem' }, getSwatchStyle(type, format.encodeHTML(color)));
+    const declarations = Object.entries(style).map(([property, value]) => `${property}:${value}`);
+    return `<span style="${declarations.join(';')}"></span>`;
+}
+function getCategoryTooltipOption(settings, grid, theme) {
+    return {
+        trigger: 'axis',
+        axisPointer: settings.type === 'bar'
+            ? {
+                type: 'shadow',
+                shadowStyle: { color: theme.axisLineColor, opacity: 0.2 },
+            }
+            : { type: 'line', lineStyle: { color: theme.axisLineColor } },
+        formatter: (params) => {
+            const [first] = [params].flat();
+            return getCategoryTooltip(grid, settings, first === null || first === void 0 ? void 0 : first.dataIndex);
+        },
+    };
+}
+function drawSeries(settings, grid, theme, itemSpace) {
     switch (settings.type) {
         case 'pie':
         case 'doughnut': {
@@ -132,46 +270,54 @@ function drawSeries(settings, theme, itemSpace) {
             return drawNps(settings, theme);
         }
         default: {
-            return drawOnAxes(settings, theme, itemSpace);
+            return drawOnAxes(settings, grid, theme, itemSpace);
         }
     }
 }
-function drawOnAxes(settings, theme, itemSpace) {
-    const { items, orientation } = settings;
-    const range = settings.valueFormat === 'date'
-        ? getDateRange(items.flatMap((item) => [
-            getMinimumValue(item),
-            getMaximumValue(item),
-        ]), settings.maxValue)
-        : getAxisRange(items, settings.maxValue, settings.axisIncrement);
-    const itemTextAxis = getItemTextAxis(settings);
-    const categoryAxis = Object.assign(Object.assign(Object.assign({}, getCategoryAxis(settings)), { axisLabel: Object.assign({ show: settings.displayItemText, color: theme.textColor }, (itemTextAxis &&
+function drawOnAxes(settings, grid, theme, itemSpace) {
+    const { orientation } = settings;
+    const range = getValueRange(settings, grid);
+    const itemTextAxis = getItemTextAxis(settings, grid);
+    const categoryAxis = Object.assign(Object.assign(Object.assign({}, getCategoryAxis(settings, grid)), { axisLabel: Object.assign({ show: settings.displayItemText, color: theme.textColor }, (itemTextAxis &&
             itemSpace &&
             getItemTextLayout(itemTextAxis, itemSpace))), axisTick: hidden, axisLine: { lineStyle: { color: theme.axisLineColor } } }), getAxisName(settings, settings.itemsLabel, theme));
     const valueAxis = getValueAxis(range, getAxisName(settings, settings.valuesLabel, theme), settings, theme);
-    const { series, seriesIndex } = getAxisSeries(settings, theme);
+    const { series, seriesIndexes, partsOfSeries } = getAxisSeries(settings, grid, theme);
     const option = {
         grid: getGrid(theme),
         xAxis: orientation === 'landscape' ? categoryAxis : valueAxis,
         yAxis: orientation === 'landscape' ? valueAxis : categoryAxis,
         series: series,
     };
+    const hasColumns = settings.type !== 'bar' && !settings.series;
     return {
-        seriesIndex: seriesIndex,
+        seriesIndexes: seriesIndexes,
+        partsOfSeries: partsOfSeries,
         itemsAreSeries: false,
         itemTextAxis: itemTextAxis,
-        option: settings.type === 'bar' ? option : withColumns(option, settings),
+        valueRange: range,
+        option: hasColumns ? withColumns(option, settings, grid) : option,
     };
 }
-function getCategoryAxis(settings) {
+function getValueRange(settings, grid) {
+    const items = getAxisItems(grid, Boolean(settings.stacked));
+    if (settings.valueFormat === 'date') {
+        return getDateRange(items.flatMap((item) => [
+            getMinimumValue(item),
+            getMaximumValue(item),
+        ]), settings.maxValue);
+    }
+    return getAxisRange(items, settings.maxValue, settings.axisIncrement);
+}
+function getCategoryAxis(settings, grid) {
     return {
         type: 'category',
-        data: settings.items.map((item) => item.text),
+        data: grid.categories,
         inverse: settings.orientation === 'portrait',
     };
 }
-function getItemTextAxis(settings) {
-    if (!settings.displayItemText || settings.items.length < 2) {
+function getItemTextAxis(settings, grid) {
+    if (!settings.displayItemText || grid.categories.length < 2) {
         return;
     }
     return settings.orientation === 'landscape' ? 'xAxis' : 'yAxis';
@@ -180,9 +326,9 @@ function getItemTextAxis(settings) {
 // column across the whole plot that shows its tooltip and takes its clicks.
 // The columns have axes of their own, so they are not laid out next to the
 // bars that draw ranges.
-function withColumns(option, settings) {
+function withColumns(option, settings, grid) {
     const { items, orientation } = settings;
-    const categoryAxis = Object.assign(Object.assign({}, getCategoryAxis(settings)), { show: false });
+    const categoryAxis = Object.assign(Object.assign({}, getCategoryAxis(settings, grid)), { show: false });
     const valueAxis = { type: 'value', min: 0, max: 1, show: false };
     const columns = {
         type: 'bar',
@@ -197,78 +343,140 @@ function withColumns(option, settings) {
     const landscape = orientation === 'landscape';
     return Object.assign(Object.assign({}, option), { xAxis: [option.xAxis, landscape ? categoryAxis : valueAxis], yAxis: [option.yAxis, landscape ? valueAxis : categoryAxis], series: [...option.series, columns] });
 }
-function getAxisSeries(settings, theme) {
+function getAxisSeries(settings, grid, theme) {
+    const series = [];
+    const seriesIndexes = [];
+    const partsOfSeries = [];
+    for (const index of grid.series.keys()) {
+        const drawn = drawItemSeries(settings, grid, index, theme);
+        seriesIndexes.push(series.length + drawn.seriesIndex);
+        series.push(...drawn.series);
+        partsOfSeries.push(...drawn.series.map(() => index));
+    }
+    return {
+        series: series,
+        seriesIndexes: seriesIndexes,
+        partsOfSeries: partsOfSeries,
+    };
+}
+function drawItemSeries(settings, grid, index, theme) {
+    const series = grid.series[index];
     if (settings.type === 'line' || settings.type === 'area') {
-        return getLineSeries(settings, theme);
+        return getLineSeries(settings, series, index, theme);
     }
     if (settings.type === 'dot') {
-        return getDotSeries(settings, theme);
+        return getDotSeries(settings, series, index, theme);
+    }
+    if (settings.stacked) {
+        return {
+            series: [getStackedBars(settings, grid, index, theme)],
+            seriesIndex: 0,
+        };
     }
-    return getBarSeries(settings, theme);
+    return getBarSeries(settings, series, index, theme);
 }
-function getBarSeries(settings, theme) {
-    const { items } = settings;
+function getStackedBars(settings, grid, index, theme) {
+    const series = grid.series[index];
+    return Object.assign(Object.assign({ type: 'bar' }, SERIES_STACK), { data: series.items.map((item, category) => item
+            ? {
+                value: getValueSpan(item),
+                itemStyle: {
+                    color: item.color,
+                    borderRadius: endsStack(grid, {
+                        series: index,
+                        index: category,
+                    })
+                        ? getOuterCorners(settings, item, theme)
+                        : 0,
+                    borderColor: theme.dividerColor,
+                    borderWidth: 1,
+                },
+            }
+            : null), label: Object.assign(Object.assign({}, getValueLabel(settings, series, theme)), { position: 'inside', color: undefined }), cursor: getSeriesCursor(series.items), emphasis: emphasis, blur: blur });
+}
+function getOuterCorners(settings, item, theme) {
+    const [topLeft, topRight, bottomRight, bottomLeft] = theme.itemBorderRadius;
+    const positive = getValueSpan(item) >= 0;
+    if (settings.orientation === 'portrait') {
+        return positive
+            ? [0, topRight, bottomRight, 0]
+            : [topLeft, 0, 0, bottomLeft];
+    }
+    return positive
+        ? [topLeft, topRight, 0, 0]
+        : [0, 0, bottomRight, bottomLeft];
+}
+function getBarSeries(settings, series, index, theme) {
+    const { items } = series;
     const bars = {
         type: 'bar',
-        data: items.map((item) => ({
-            value: getValueSpan(item),
-            itemStyle: {
-                color: item.color,
-                borderRadius: theme.itemBorderRadius,
-            },
-        })),
-        label: getValueLabel(settings, theme),
+        data: items.map((item) => item
+            ? {
+                value: getValueSpan(item),
+                itemStyle: {
+                    color: item.color,
+                    borderRadius: theme.itemBorderRadius,
+                },
+            }
+            : null),
+        label: getValueLabel(settings, series, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
     };
-    if (items.every((item) => !isRangeItem(item))) {
+    if (!hasRanges(items)) {
         return { series: [bars], seriesIndex: 0 };
     }
     return {
         series: [
-            Object.assign(Object.assign({ type: 'bar' }, rangeBase), { data: getRangeStarts(items) }),
-            Object.assign(Object.assign({}, bars), stacked),
+            Object.assign(Object.assign({ type: 'bar' }, getRangeBase(index)), { data: getRangeStarts(items) }),
+            Object.assign(Object.assign({}, bars), getRangeStack(index)),
         ],
         seriesIndex: 1,
     };
 }
-function getDotSeries(settings, theme) {
-    const { items, orientation } = settings;
-    const point = (index, value) => orientation === 'landscape' ? [index, value] : [value, index];
+function getDotSeries(settings, series, index, theme) {
+    const { items } = series;
+    const { orientation } = settings;
+    const point = (category, value) => orientation === 'landscape' ? [category, value] : [value, category];
     const ends = {
         type: 'scatter',
         symbolSize: DOT_SIZE,
-        data: items.map((item, index) => ({
-            value: point(index, getMaximumValue(item)),
-            itemStyle: { color: item.color },
-        })),
-        label: getValueLabel(settings, theme),
+        data: items.map((item, category) => item
+            ? {
+                value: point(category, getMaximumValue(item)),
+                itemStyle: { color: item.color },
+            }
+            : null),
+        label: getValueLabel(settings, series, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
     };
-    if (items.every((item) => !isRangeItem(item))) {
+    if (!hasRanges(items)) {
         return { series: [ends], seriesIndex: 0 };
     }
-    const connectors = Object.assign(Object.assign({ type: 'bar' }, stacked), { silent: true, barWidth: CONNECTOR_WIDTH, data: items.map((item) => ({
-            value: isRangeItem(item) ? getValueSpan(item) : null,
-            itemStyle: { color: item.color },
-        })) });
+    const connectors = Object.assign(Object.assign({ type: 'bar' }, getRangeStack(index)), { cursor: getSeriesCursor(items), emphasis: { disabled: true }, barWidth: CONNECTOR_WIDTH, barGap: '-100%', data: items.map((item) => item && isRangeItem(item)
+            ? {
+                value: getValueSpan(item),
+                itemStyle: { color: item.color },
+            }
+            : null) });
     const starts = {
         type: 'scatter',
-        silent: true,
+        cursor: getSeriesCursor(items),
+        emphasis: { disabled: true },
         symbolSize: DOT_SIZE,
-        data: items.map((item, index) => ({
-            value: isRangeItem(item)
-                ? point(index, getMinimumValue(item))
-                : [null, null],
-            itemStyle: { color: item.color },
-        })),
+        data: items.map((item, category) => item && isRangeItem(item)
+            ? {
+                value: point(category, getMinimumValue(item)),
+                itemStyle: { color: item.color },
+            }
+            : null),
     };
     return {
         series: [
-            Object.assign(Object.assign({ type: 'bar' }, rangeBase), { data: getRangeStarts(items) }),
+            Object.assign(Object.assign({ type: 'bar' }, getRangeBase(index)), { barGap: '-100%', data: getRangeStarts(items) }),
             connectors,
             starts,
             ends,
@@ -276,38 +484,63 @@ function getDotSeries(settings, theme) {
         seriesIndex: 3,
     };
 }
-function getLineSeries(settings, theme) {
-    const { items } = settings;
-    const color = theme.lineColor;
+function getLineSeries(settings, series, index, theme) {
+    var _a;
+    const { items } = series;
+    const color = (_a = series.color) !== null && _a !== void 0 ? _a : theme.lineColor;
     const area = settings.type === 'area';
-    const line = {
-        type: 'line',
-        color: color,
-        symbol: 'circle',
-        symbolSize: LINE_DOT_SIZE,
-        data: items.map((item) => ({
-            value: getValueSpan(item),
-            itemStyle: { color: item.color },
-        })),
-        areaStyle: area ? { color: color, opacity: AREA_OPACITY } : undefined,
-        label: getValueLabel(settings, theme),
-        cursor: getSeriesCursor(items),
-        emphasis: emphasis,
-        blur: blur,
-    };
-    if (items.every((item) => !isRangeItem(item))) {
+    const line = Object.assign(Object.assign({ type: 'line', color: color, symbol: 'circle', symbolSize: LINE_DOT_SIZE }, (settings.series &&
+        hasClickableItems(items) && {
+        showAllSymbol: true,
+        labelLayout: { hideOverlap: true },
+    })), { data: items.map((item) => item
+            ? {
+                value: getValueSpan(item),
+                itemStyle: { color: item.color },
+            }
+            : null), areaStyle: area
+            ? { color: color, opacity: getAreaOpacity(settings) }
+            : undefined, label: getValueLabel(settings, series, theme), cursor: getSeriesCursor(items), emphasis: emphasis, blur: blur });
+    if (settings.stacked) {
+        return { series: [Object.assign(Object.assign({}, line), SERIES_STACK)], seriesIndex: 0 };
+    }
+    if (!hasRanges(items)) {
         return { series: [line], seriesIndex: 0 };
     }
-    const base = Object.assign(Object.assign({ type: 'line' }, rangeBase), { symbol: 'none', color: color, lineStyle: { opacity: area ? 0 : 1 }, data: getRangeStarts(items) });
-    return { series: [base, Object.assign(Object.assign({}, line), stacked)], seriesIndex: 1 };
+    const base = Object.assign(Object.assign({ type: 'line' }, getRangeBase(index)), { symbol: 'none', color: color, lineStyle: { opacity: area ? 0 : 1 }, data: getRangeStarts(items) });
+    return {
+        series: [base, Object.assign(Object.assign({}, line), getRangeStack(index))],
+        seriesIndex: 1,
+    };
+}
+function getAreaOpacity(settings) {
+    var _a;
+    return ((_a = settings.series) === null || _a === void 0 ? void 0 : _a.length) > 1 && !settings.stacked
+        ? SERIES_AREA_OPACITY
+        : AREA_OPACITY;
+}
+function hasClickableItems(items) {
+    return items.some((item) => item === null || item === void 0 ? void 0 : item.clickable);
+}
+function hasRanges(items) {
+    return items.some((item) => item && isRangeItem(item));
 }
-const stacked = { stack: 'range', stackStrategy: 'all' };
 // A range is drawn as a stack of an invisible part from zero to its start,
 // and a visible part from its start to its end. Items that are not ranges
-// start at zero.
-const rangeBase = Object.assign(Object.assign({}, stacked), { silent: true, tooltip: hidden, emphasis: { disabled: true }, itemStyle: { color: 'transparent' } });
+// start at zero. Each series has a stack of its own.
+function getRangeStack(index) {
+    return { stack: `range${index}`, stackStrategy: 'all' };
+}
+function getRangeBase(index) {
+    return Object.assign(Object.assign({}, getRangeStack(index)), { silent: true, tooltip: hidden, emphasis: { disabled: true }, itemStyle: { color: 'transparent' } });
+}
 function getRangeStarts(items) {
-    return items.map((item) => (isRangeItem(item) ? getMinimumValue(item) : 0));
+    return items.map((item) => {
+        if (!item) {
+            return null;
+        }
+        return isRangeItem(item) ? getMinimumValue(item) : 0;
+    });
 }
 function drawScatter(settings, theme) {
     const { items } = settings;
@@ -337,7 +570,7 @@ function drawScatter(settings, theme) {
         blur: blur,
     };
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: false,
         option: {
             grid: getGrid(theme),
@@ -366,7 +599,7 @@ function drawPie(settings, theme) {
     }
     const innerRadius = settings.type === 'doughnut' ? '50%' : 0;
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: false,
         option: {
             series: [
@@ -401,7 +634,7 @@ function drawProportionBar(settings, theme) {
     const categoryAxis = { type: 'category', data: [''], show: false };
     const landscape = settings.orientation === 'landscape';
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: true,
         option: {
             backgroundColor: theme.backgroundColor,
@@ -430,7 +663,7 @@ function drawRing(settings, theme) {
     const { items } = settings;
     const whole = getWholeRange(items, settings.maxValue).totalRange;
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: false,
         option: {
             polar: { radius: ['20%', '90%'] },
@@ -467,7 +700,7 @@ function drawRing(settings, theme) {
 function drawNps(settings, theme) {
     const { items } = settings;
     return {
-        seriesIndex: 0,
+        seriesIndexes: [0],
         itemsAreSeries: false,
         option: {
             series: [
@@ -556,8 +789,8 @@ function getAxisName(settings, name, theme) {
         nameTextStyle: { color: theme.textColor },
     };
 }
-function getValueLabel(settings, theme) {
-    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings) });
+function getValueLabel(settings, series, theme) {
+    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(series.items[dataIndex], settings) });
 }
 function getLabelStyle(theme) {
     return { color: theme.textColor, textBorderWidth: 0 };
@@ -573,7 +806,7 @@ function getPointLabel(settings, item) {
     return parts.join(' ');
 }
 function getSeriesCursor(items) {
-    return getCursor(items.some((item) => item.clickable));
+    return getCursor(hasClickableItems(items));
 }
 function getCursor(clickable) {
     return clickable ? 'pointer' : 'default';