Merge pull request #20252 from apache/master

Merge master into next

.github/workflows/pr-preview.yml

@@ -46,10 +46,12 @@ jobs:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
           name: pr_preview
+          path: pr-dist
           if_no_artifact_found: fail
 
       - name: Output PR metadata
         id: pr-metadata
+        working-directory: pr-dist
         run: |
           echo "NUMBER=$(cat pr_number)" >> $GITHUB_OUTPUT
           echo "COMMIT_SHA=$(cat pr_commit_sha)" >> $GITHUB_OUTPUT
@@ -59,6 +61,7 @@ jobs:
         env:
           PR_NUMBER: ${{ steps.pr-metadata.outputs.NUMBER }}
           SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+        working-directory: pr-dist
         run: |
           export SURGE_DOMAIN=https://echarts-pr-$PR_NUMBER.surge.sh
           npx surge --project ./package --domain $SURGE_DOMAIN --token $SURGE_TOKEN

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "typescript.tsdk": "./node_modules/typescript/lib"
-}
+    "typescript.tsdk": "./node_modules/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true
+}

src/chart/candlestick/CandlestickSeries.ts

@@ -124,7 +124,6 @@ class CandlestickSeriesModel extends SeriesModel<CandlestickSeriesOption> {
         },
 
         emphasis: {
-            scale: true,
             itemStyle: {
                 borderWidth: 2
             }

src/chart/candlestick/CandlestickView.ts

@@ -20,7 +20,7 @@
 import * as zrUtil from 'zrender/src/core/util';
 import ChartView from '../../view/Chart';
 import * as graphic from '../../util/graphic';
-import { setStatesStylesFromModel } from '../../util/states';
+import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
 import Path, { PathProps } from 'zrender/src/graphic/Path';
 import {createClipPath} from '../helper/createClipPathFromCoordSys';
 import CandlestickSeriesModel, { CandlestickDataItemOption } from './CandlestickSeries';
@@ -33,6 +33,7 @@ import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem';
 import Model from '../../model/Model';
 import { saveOldStyle } from '../../animation/basicTransition';
 import Element from 'zrender/src/Element';
+import { getBorderColor, getColor } from './candlestickVisual';
 
 const SKIP_PROPS = ['color', 'borderColor'] as const;
 
@@ -294,6 +295,19 @@ function setBoxCommon(el: NormalBoxPath, data: SeriesData, dataIndex: number, is
     el.__simpleBox = isSimpleBox;
 
     setStatesStylesFromModel(el, itemModel);
+
+    const sign = data.getItemLayout(dataIndex).sign;
+    zrUtil.each(el.states, (state, stateName) => {
+        const stateModel = itemModel.getModel(stateName as any);
+        const color = getColor(sign, stateModel);
+        const borderColor = getBorderColor(sign, stateModel) || color;
+        const stateStyle = state.style || (state.style = {});
+        color && (stateStyle.fill = color);
+        borderColor && (stateStyle.stroke = borderColor);
+    });
+
+    const emphasisModel = itemModel.getModel('emphasis');
+    toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
 }
 
 function transInit(points: number[][], itemLayout: CandlestickItemLayout) {
@@ -391,12 +405,9 @@ function createLarge(
 
 function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickSeriesModel, data: SeriesData) {
     // TODO put in visual?
-    let borderColor = seriesModel.get(['itemStyle', sign > 0 ? 'borderColor' : 'borderColor0'])
+    const borderColor = getBorderColor(sign, seriesModel)
         // Use color for border color by default.
-        || seriesModel.get(['itemStyle', sign > 0 ? 'color' : 'color0']);
-    if (sign === 0) {
-        borderColor = seriesModel.get(['itemStyle', 'borderColorDoji']);
-    }
+        || getColor(sign, seriesModel);
 
     // Color must be excluded.
     // Because symbol provide setColor individually to set fill and stroke

src/chart/candlestick/candlestickVisual.ts

@@ -29,6 +29,21 @@ const dojiBorderColorQuery = ['itemStyle', 'borderColorDoji'] as const;
 const positiveColorQuery = ['itemStyle', 'color'] as const;
 const negativeColorQuery = ['itemStyle', 'color0'] as const;
 
+export function getColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
+    return model.get(
+        sign > 0 ? positiveColorQuery : negativeColorQuery
+    );
+}
+
+export function getBorderColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
+    return model.get(
+        sign === 0 ? dojiBorderColorQuery
+            : sign > 0
+                ? positiveBorderColorQuery
+                : negativeBorderColorQuery
+    );
+}
+
 const candlestickVisual: StageHandler = {
 
     seriesType: 'candlestick',
@@ -39,22 +54,6 @@ const candlestickVisual: StageHandler = {
     performRawSeries: true,
 
     reset: function (seriesModel: CandlestickSeriesModel, ecModel) {
-
-        function getColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
-            return model.get(
-                sign > 0 ? positiveColorQuery : negativeColorQuery
-            );
-        }
-
-        function getBorderColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
-            return model.get(
-                sign === 0 ? dojiBorderColorQuery
-                    : sign > 0
-                        ? positiveBorderColorQuery
-                        : negativeBorderColorQuery
-            );
-        }
-
         // Only visible series has each data be visual encoded
         if (ecModel.isSeriesFiltered(seriesModel)) {
             return;

src/chart/line/LineView.ts

@@ -624,6 +624,8 @@ class LineView extends ChartView {
 
         this._symbolDraw = symbolDraw;
         this._lineGroup = lineGroup;
+
+        this._changePolyState = zrUtil.bind(this._changePolyState, this);
     }
 
     render(seriesModel: LineSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
@@ -885,9 +887,7 @@ class LineView extends ChartView {
             toggleHoverEmphasis(polygon, focus, blurScope, emphasisDisabled);
         }
 
-        const changePolyState = (toState: DisplayState) => {
-            this._changePolyState(toState);
-        };
+        const changePolyState = this._changePolyState;
 
         data.eachItemGraphicEl(function (el) {
             // Switch polyline / polygon state if element changed its state.

src/chart/pie/labelLayout.ts

@@ -89,7 +89,7 @@ function adjustSingleSide(
             const rA = r + item.len;
             const rA2 = rA * rA;
             // Use ellipse implicit function to calculate x
-            const dx = Math.sqrt((1 - Math.abs(dy * dy / rB2)) * rA2);
+            const dx = Math.sqrt(Math.abs((1 - dy * dy / rB2) * rA2));
             const newX = cx + (dx + item.len2) * dir;
             const deltaX = newX - item.label.x;
             const newTargetWidth = item.targetTextWidth - deltaX * dir;

src/chart/treemap/TreemapSeries.ts

@@ -144,7 +144,9 @@ export interface TreemapSeriesNodeItemOption extends TreemapSeriesVisualOption,
 
     color?: ColorString[] | 'none'
 
-    decal?: DecalObject[] | 'none'
+    decal?: DecalObject[] | 'none',
+
+    cursor?: string
 }
 
 export interface TreemapSeriesOption

src/chart/treemap/TreemapView.ts

@@ -877,6 +877,9 @@ function renderNode(
         // Only for enabling highlight/downplay.
         data.setItemGraphicEl(thisNode.dataIndex, group);
 
+        const cursorStyle = nodeModel.getShallow('cursor');
+        cursorStyle && content.attr('cursor', cursorStyle);
+
         enableHoverFocus(group, focusOrIndices, blurScope);
     }
 

src/component/axis/CartesianAxisView.ts

@@ -123,6 +123,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         const splitLineModel = axisModel.getModel('splitLine');
         const lineStyleModel = splitLineModel.getModel('lineStyle');
         let lineColors = lineStyleModel.get('color');
+        const showMinLine = splitLineModel.get('showMinLine') !== false;
+        const showMaxLine = splitLineModel.get('showMaxLine') !== false;
 
         lineColors = zrUtil.isArray(lineColors) ? lineColors : [lineColors];
 
@@ -142,6 +144,12 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         for (let i = 0; i < ticksCoords.length; i++) {
             const tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
 
+            if ((i === 0 && !showMinLine) || (i === ticksCoords.length - 1 && !showMaxLine)) {
+                continue;
+            }
+
+            const tickValue = ticksCoords[i].tickValue;
+
             if (isHorizontal) {
                 p1[0] = tickCoord;
                 p1[1] = gridRect.y;
@@ -156,9 +164,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
             }
 
             const colorIndex = (lineCount++) % lineColors.length;
-            const tickValue = ticksCoords[i].tickValue;
             const line = new graphic.Line({
-                anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
+                anid: tickValue != null ? 'line_' + tickValue : null,
                 autoBatch: true,
                 shape: {
                     x1: p1[0],

src/component/legend/LegendView.ts

@@ -329,7 +329,8 @@ class LegendView extends ComponentView {
                 },
                 onclick() {
                     api.dispatchAction({
-                        type: type === 'all' ? 'legendAllSelect' : 'legendInverseSelect'
+                        type: type === 'all' ? 'legendAllSelect' : 'legendInverseSelect',
+                        legendId: legendModel.id
                     });
                 }
             });

src/component/legend/legendAction.ts

@@ -17,59 +17,81 @@
 * under the License.
 */
 
-// @ts-nocheck
+import {curry, each, hasOwn} from 'zrender/src/core/util';
+import { EChartsExtensionInstallRegisters } from '../../extension';
+import { Payload } from '../../util/types';
+import type GlobalModel from '../../model/Global';
+import type LegendModel from './LegendModel';
 
-import {curry, each} from 'zrender/src/core/util';
+type LegendSelectMethodNames = 'select' | 'unSelect' | 'toggleSelected' | 'allSelect' | 'inverseSelect';
 
-function legendSelectActionHandler(methodName, payload, ecModel) {
-    const selectedMap = {};
-    const isToggleSelect = methodName === 'toggleSelected';
-    let isSelected;
-    // Update all legend components
-    ecModel.eachComponent('legend', function (legendModel) {
-        if (isToggleSelect && isSelected != null) {
-            // Force other legend has same selected status
-            // Or the first is toggled to true and other are toggled to false
-            // In the case one legend has some item unSelected in option. And if other legend
-            // doesn't has the item, they will assume it is selected.
-            legendModel[isSelected ? 'select' : 'unSelect'](payload.name);
-        }
-        else if (methodName === 'allSelect' || methodName === 'inverseSelect') {
+function legendSelectActionHandler(methodName: LegendSelectMethodNames, payload: Payload, ecModel: GlobalModel) {
+    const isAllSelect = methodName === 'allSelect' || methodName === 'inverseSelect';
+    const selectedMap: Record<string, boolean> = {};
+
+    const actionLegendIndices: number[] = [];
+    ecModel.eachComponent({ mainType: 'legend', query: payload }, function (legendModel: LegendModel) {
+        if (isAllSelect) {
             legendModel[methodName]();
         }
         else {
             legendModel[methodName](payload.name);
-            isSelected = legendModel.isSelected(payload.name);
         }
-        const legendData = legendModel.getData();
-        each(legendData, function (model) {
-            const name = model.get('name');
-            // Wrap element
-            if (name === '\n' || name === '') {
-                return;
-            }
-            const isItemSelected = legendModel.isSelected(name);
-            if (selectedMap.hasOwnProperty(name)) {
-                // Unselected if any legend is unselected
-                selectedMap[name] = selectedMap[name] && isItemSelected;
-            }
-            else {
-                selectedMap[name] = isItemSelected;
-            }
+
+        makeSelectedMap(legendModel, selectedMap);
+
+        actionLegendIndices.push(legendModel.componentIndex);
+    });
+
+    const allSelectedMap: Record<string, boolean> = {};
+
+    // make selectedMap from all legend components
+    ecModel.eachComponent('legend', function (legendModel: LegendModel) {
+        each(selectedMap, function (isSelected, name) {
+            // Force other legend has same selected status
+            // Or the first is toggled to true and other are toggled to false
+            // In the case one legend has some item unSelected in option. And if other legend
+            // doesn't has the item, they will assume it is selected.
+            legendModel[isSelected ? 'select' : 'unSelect'](name);
         });
+
+        makeSelectedMap(legendModel, allSelectedMap);
     });
+
     // Return the event explicitly
-    return (methodName === 'allSelect' || methodName === 'inverseSelect')
+    return isAllSelect
         ? {
-            selected: selectedMap
+            selected: allSelectedMap,
+            // return legendIndex array to tell the developers which legends are allSelect / inverseSelect
+            legendIndex: actionLegendIndices
         }
         : {
             name: payload.name,
-            selected: selectedMap
+            selected: allSelectedMap
         };
 }
 
-export function installLegendAction(registers) {
+function makeSelectedMap(legendModel: LegendModel, out?: Record<string, boolean>) {
+    const selectedMap: Record<string, boolean> = out || {};
+    each(legendModel.getData(), function (model) {
+        const name = model.get('name');
+        // Wrap element
+        if (name === '\n' || name === '') {
+            return;
+        }
+        const isItemSelected = legendModel.isSelected(name);
+        if (hasOwn(selectedMap, name)) {
+            // Unselected if any legend is unselected
+            selectedMap[name] = selectedMap[name] && isItemSelected;
+        }
+        else {
+            selectedMap[name] = isItemSelected;
+        }
+    });
+    return selectedMap;
+}
+
+export function installLegendAction(registers: EChartsExtensionInstallRegisters) {
     /**
      * @event legendToggleSelect
      * @type {Object}
@@ -113,4 +135,4 @@ export function installLegendAction(registers) {
         'legendUnSelect', 'legendunselected',
         curry(legendSelectActionHandler, 'unSelect')
     );
-}
+}

src/coord/Axis.ts

@@ -302,7 +302,7 @@ function fixOnBandTicksCoords(
     let diffSize;
     if (ticksLen === 1) {
         ticksCoords[0].coord = axisExtent[0];
-        last = ticksCoords[1] = {coord: axisExtent[1]};
+        last = ticksCoords[1] = {coord: axisExtent[1], tickValue: ticksCoords[0].tickValue};
     }
     else {
         const crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue;
@@ -315,7 +315,7 @@ function fixOnBandTicksCoords(
         const dataExtent = axis.scale.getExtent();
         diffSize = 1 + dataExtent[1] - ticksCoords[ticksLen - 1].tickValue;
 
-        last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize};
+        last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize, tickValue: dataExtent[1] + 1};
 
         ticksCoords.push(last);
     }

src/coord/axisCommonTypes.ts

@@ -258,7 +258,11 @@ interface MinorTickOption {
 
 interface SplitLineOption {
     show?: boolean,
-    interval?: 'auto' | number | ((index:number, value: string) => boolean)
+    interval?: 'auto' | number | ((index:number, value: string) => boolean),
+    // true | false
+    showMinLine?: boolean,
+    // true | false
+    showMaxLine?: boolean,
     // colors will display in turn
     lineStyle?: LineStyleOption<ZRColor | ZRColor[]>
 }

src/coord/axisDefault.ts

@@ -93,6 +93,8 @@ const defaultOption: AxisBaseOption = {
     },
     splitLine: {
         show: true,
+        showMinLine: true,
+        showMaxLine: true,
         lineStyle: {
             color: ['#E0E6F1'],
             width: 1,