Merge pull request #20535 from apache/master

Merge master branch into release for v5.5.2

.github/workflows/pr-preview.yml

@@ -25,11 +25,11 @@ jobs:
             return jobsRes.data.jobs.some((job) => job.name.includes('build') && job.conclusion === 'success');
 
     outputs:
-      SHOULD_DEPOLY: ${{ steps.check-build-success.outputs.result }}
+      SHOULD_DEPLOY: ${{ steps.check-build-success.outputs.result }}
 
   deploy:
     needs: [on-success]
-    if: ${{ needs.on-success.outputs.SHOULD_DEPOLY == 'true' }}
+    if: ${{ needs.on-success.outputs.SHOULD_DEPLOY == 'true' }}
     runs-on: ubuntu-latest
 
     steps:
@@ -38,18 +38,20 @@ jobs:
           mkdir .actions
           cd .actions
           git clone --depth=1 https://github.com/dawidd6/action-download-artifact.git
-          git clone --depth=1 https://github.com/actions-cool/maintain-one-comment.git
+          git clone --depth=1 https://github.com/plainheart/maintain-one-comment.git
 
       - name: Fetch PR dist files
         uses: ./.actions/action-download-artifact
         with:
           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
@@ -70,7 +73,6 @@ jobs:
           COMMIT_SHA_SHORT: ${{ steps.pr-metadata.outputs.COMMIT_SHA_SHORT }}
         with:
           body: |
-            <!-- ECHARTS_PR_PREVIEW -->
             The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-${{ env.PR_NUMBER }}@${{ env.COMMIT_SHA_SHORT }}
           body-include: '<!-- ECHARTS_PR_PREVIEW -->'
           number: ${{ env.PR_NUMBER }}

.github/workflows/teardown-pr-preview.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Install action dependencies
-        run: git clone --depth=1 https://github.com/actions-cool/maintain-one-comment.git
+        run: git clone --depth=1 https://github.com/plainheart/maintain-one-comment.git
 
       - name: Delete PR preview comment
         uses: ./maintain-one-comment

.vscode/settings.json

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

package.json

@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "tslib": "2.3.0",
-    "zrender": "5.6.0"
+    "zrender": "github:ecomfe/zrender"
   },
   "devDependencies": {
     "@babel/code-frame": "7.10.4",

src/chart/bar/BarView.ts

@@ -1176,7 +1176,8 @@ function createLarge(
     el.barWidth = barWidth;
     group.add(el);
     el.useStyle(data.getVisual('style'));
-
+    // Stroke is rendered first to avoid overlapping with fill
+    el.style.stroke = null;
     // Enable tooltip and user mouse/touch event handlers.
     getECData(el).seriesIndex = seriesModel.seriesIndex;
 

src/chart/bar/PictorialBarView.ts

@@ -341,7 +341,7 @@ function prepareBarLength(
 
     // if 'pxSign' means sign of pixel,  it can't be zero, or symbolScale will be zero
     // and when borderWidth be settled, the actual linewidth will be NaN
-    outputSymbolMeta.pxSign = boundingLength > 0 ? 1 : -1;
+    outputSymbolMeta.pxSign = boundingLength >= 0 ? 1 : -1;
 }
 
 function convertToCoordOnAxis(axis: Axis2D, value: number) {

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/gauge/GaugeView.ts

@@ -451,7 +451,7 @@ class GaugeView extends ChartView {
                     r: r
                 }
             });
-            isOverlap && (progress.z2 = maxVal - (data.get(valueDim, idx) as number) % maxVal);
+            isOverlap && (progress.z2 = linearMap(data.get(valueDim, idx) as number, [minVal, maxVal], [100, 0], true));
             return progress;
         }
 

src/chart/helper/createClipPathFromCoordSys.ts

@@ -43,7 +43,7 @@ function createGridClipPath(
     let width = rect.width;
     let height = rect.height;
 
-    const lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;
+    const lineWidth = seriesModel.get(['lineStyle', 'width']) || 0;
     // Expand the clip path a bit to avoid the border is clipped and looks thinner
     x -= lineWidth / 2;
     y -= lineWidth / 2;

src/chart/helper/whiskerBoxCommon.ts

@@ -52,6 +52,17 @@ class WhiskerBoxCommonMixin<Opts extends CommonOption> {
 
     defaultValueDimensions: CoordDimensionDefinition['dimsDef'];
 
+    /**
+     * @private
+     */
+    _hasEncodeRule(key: string) {
+        const encodeRules = this.getEncode();
+        if (encodeRules && encodeRules.data && encodeRules.data.has(key)) {
+            return encodeRules.data.get(key) != null;
+        }
+        return false;
+    }
+
     /**
      * @override
      */
@@ -74,12 +85,12 @@ class WhiskerBoxCommonMixin<Opts extends CommonOption> {
         if (xAxisType === 'category') {
             option.layout = 'horizontal';
             ordinalMeta = xAxisModel.getOrdinalMeta();
-            addOrdinal = true;
+            addOrdinal = !this._hasEncodeRule('x');
         }
         else if (yAxisType === 'category') {
             option.layout = 'vertical';
             ordinalMeta = yAxisModel.getOrdinalMeta();
-            addOrdinal = true;
+            addOrdinal = !this._hasEncodeRule('y');
         }
         else {
             option.layout = option.layout || 'horizontal';
@@ -161,4 +172,4 @@ class WhiskerBoxCommonMixin<Opts extends CommonOption> {
 };
 
 
-export {WhiskerBoxCommonMixin};
+export {WhiskerBoxCommonMixin};