feat(matrix): enhance matrix

package.json

@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "tslib": "2.3.0",
-    "zrender": "github:ecomfe/zrender#v6"
+    "zrender": "github:ecomfe/zrender#feat/ignore-host-silent"
   },
   "devDependencies": {
     "@babel/code-frame": "7.10.4",

src/chart/bar/BarSeries.ts

@@ -36,12 +36,15 @@ import type Polar from '../../coord/polar/Polar';
 import { inheritDefaultOption } from '../../util/component';
 import SeriesData from '../../data/SeriesData';
 import { BrushCommonSelectorsForSeries } from '../../component/brush/selector';
+import tokens from '../../visual/tokens';
 
-export type PolarBarLabelPosition = SeriesLabelOption['position']
-    | 'start' | 'insideStart' | 'middle' | 'end' | 'insideEnd';
+type PolarBarLabelPositionExtra = 'start' | 'insideStart' | 'middle' | 'end' | 'insideEnd';
+export type PolarBarLabelPosition = SeriesLabelOption['position'] | PolarBarLabelPositionExtra;
 
-export type BarSeriesLabelOption = Omit<SeriesLabelOption, 'position'>
-    & {position?: PolarBarLabelPosition | 'outside'};
+export type BarSeriesLabelOption = SeriesLabelOption<
+    CallbackDataParams,
+    {positionExtra: PolarBarLabelPositionExtra | 'outside'}
+>;
 
 export interface BarStateOption<TCbParams = never> {
     itemStyle?: BarItemStyleOption<TCbParams>
@@ -155,7 +158,8 @@ class BarSeriesModel extends BaseBarSeriesModel<BarSeriesOption> {
 
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary,
+                borderWidth: 2
             }
         },
 

src/chart/bar/BaseBarSeries.ts

@@ -67,6 +67,11 @@ export interface BaseBarSeriesOption<StateOption, ExtraStateOption extends State
      */
     barGap?: string | number
 
+    /**
+     * @private
+     */
+    defaultBarGap?: string | number
+
     /**
      * Gap between each category. Default to be 20%. can be an absolute pixel value.
      */
@@ -199,7 +204,9 @@ class BaseBarSeriesModel<Opts extends BaseBarSeriesOption<unknown> = BaseBarSeri
         large: false,
         largeThreshold: 400,
         progressive: 3e3,
-        progressiveChunkMode: 'mod'
+        progressiveChunkMode: 'mod',
+
+        defaultBarGap: '10%'
     };
 }
 

src/chart/bar/PictorialBarSeries.ts

@@ -27,14 +27,16 @@ import {
     StatesOptionMixin,
     OptionDataItemObject,
     DefaultEmphasisFocus,
-    SeriesEncodeOptionMixin
+    SeriesEncodeOptionMixin,
+    CallbackDataParams
 } from '../../util/types';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import { inheritDefaultOption } from '../../util/component';
+import tokens from '../../visual/tokens';
 
 export interface PictorialBarStateOption {
     itemStyle?: ItemStyleOption
-    label?: SeriesLabelOption
+    label?: SeriesLabelOption<CallbackDataParams, {positionExtra: 'outside'}>
 }
 
 interface PictorialBarSeriesSymbolOption {
@@ -169,7 +171,7 @@ class PictorialBarSeriesModel extends BaseBarSeriesModel<PictorialBarSeriesOptio
 
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary
             }
         }
     });

src/chart/boxplot/BoxplotSeries.ts

@@ -34,6 +34,7 @@ import {
 import type Axis2D from '../../coord/cartesian/Axis2D';
 import Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import { mixin } from 'zrender/src/core/util';
+import tokens from '../../visual/tokens';
 
 // [min,  Q1,  median (or Q2),  Q3,  max]
 type BoxplotDataValue = OptionDataValueNumeric[];
@@ -111,7 +112,7 @@ class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
         boxWidth: [7, 50],
 
         itemStyle: {
-            color: '#fff',
+            color: tokens.color.neutral00,
             borderWidth: 1
         },
 
@@ -123,7 +124,7 @@ class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
                 shadowBlur: 5,
                 shadowOffsetX: 1,
                 shadowOffsetY: 1,
-                shadowColor: 'rgba(0,0,0,0.2)'
+                shadowColor: tokens.color.shadow
             }
         },
 

src/chart/custom/CustomSeries.ts

@@ -26,10 +26,12 @@ import {
     AnimationOption,
     BlurScope,
     CallbackDataParams,
+    CoordinateSystemDataLayout,
     Dictionary,
     DimensionLoose,
     ItemStyleOption,
     LabelOption,
+    NullUndefined,
     OptionDataValue,
     OrdinalRawValue,
     ParsedValue,
@@ -303,13 +305,30 @@ export interface CustomSeriesRenderItemParamsCoordSys {
 }
 export interface CustomSeriesRenderItemCoordinateSystemAPI {
     coord(
-        data: OptionDataValue | OptionDataValue[],
-        clamp?: boolean
+        // @see `CoordinateSystemDataCoord`
+        data: (OptionDataValue | NullUndefined)
+            | (OptionDataValue | NullUndefined)[]
+            | (OptionDataValue | OptionDataValue[] | NullUndefined)[],
+        // Some coord sys may support `clamp?: boolean` there.
+        // Can also be an `{xxx?: ...}` here.
+        opt?: unknown
     ): number[];
     size?(
+        // Represents a range, rather than a absolute value.
+        // e.g., `dataSize: [5, 100]` represents
+        // data range `5` in x and data range `100` in y.
         dataSize: OptionDataValue | OptionDataValue[],
+        // Represents a data point, based on which to calculate size.
+        // Some axis, such as logarithm, size varies in different points.
         dataItem?: OptionDataValue | OptionDataValue[]
     ): number | number[];
+    layout?(
+        // @see `CoordinateSystemDataCoord`
+        data: (OptionDataValue | NullUndefined)
+            | (OptionDataValue | NullUndefined)[]
+            | (OptionDataValue | OptionDataValue[] | NullUndefined)[],
+        opt?: unknown
+    ): CoordinateSystemDataLayout;
 }
 
 export type WrapEncodeDefRet = Dictionary<number[]>;
@@ -396,7 +415,7 @@ export default class CustomSeriesModel extends SeriesModel<CustomSeriesOption> {
     static type = 'series.custom';
     readonly type = CustomSeriesModel.type;
 
-    static dependencies = ['grid', 'polar', 'geo', 'singleAxis', 'calendar'];
+    static dependencies = ['grid', 'polar', 'geo', 'singleAxis', 'calendar', 'matrix'];
 
     // preventAutoZ = true;
 

src/chart/custom/CustomView.ts

@@ -104,6 +104,7 @@ import {
 } from '../../animation/customGraphicKeyframeAnimation';
 import type SeriesModel from '../../model/Series';
 import { getCustomSeries } from './customSeriesRegister';
+import tokens from '../../visual/tokens';
 
 const EMPHASIS = 'emphasis' as const;
 const NORMAL = 'normal' as const;
@@ -155,6 +156,8 @@ const attachedTxInfoTmp = {
 
 
 /**
+ * FIXME: register rather than import directly, for size.
+ *
  * To reduce total package size of each coordinate systems, the modules `prepareCustom`
  * of each coordinate systems are not required by each coordinate systems directly, but
  * required by the module `custom`.
@@ -811,7 +814,7 @@ function makeRenderItem(
         visualColor != null && (itemStyle.fill = visualColor);
         opacity != null && (itemStyle.opacity = opacity);
 
-        const opt = {inheritColor: isString(visualColor) ? visualColor : '#000'};
+        const opt = {inheritColor: isString(visualColor) ? visualColor : tokens.color.neutral99};
         const labelModel = getLabelModel(dataIndexInside, NORMAL);
         // Now that the feature of "auto adjust text fill/stroke" has been migrated to zrender
         // since ec5, we should set `isAttached` as `false` here and make compat in

src/chart/funnel/FunnelSeries.ts

@@ -42,6 +42,7 @@ import {
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import SeriesData from '../../data/SeriesData';
+import tokens from '../../visual/tokens';
 
 type FunnelLabelOption = Omit<SeriesLabelOption, 'position'> & {
     position?: LabelOption['position']
@@ -147,14 +148,15 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
     }
 
     static defaultOption: FunnelSeriesOption = {
+        coordinateSystemUsage: 'box',
         // zlevel: 0,                  // 一级层叠
         z: 2,                       // 二级层叠
         legendHoverLink: true,
         colorBy: 'data',
         left: 80,
         top: 60,
         right: 80,
-        bottom: 60,
+        bottom: 65,
         // width: {totalWidth} - left - right,
         // height: {totalHeight} - top - bottom,
 
@@ -182,7 +184,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
         },
         itemStyle: {
             // color: 各异,
-            borderColor: '#fff',
+            borderColor: tokens.color.neutral00,
             borderWidth: 1
         },
         emphasis: {
@@ -192,7 +194,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
         },
         select: {
             itemStyle: {
-                borderColor: '#212121'
+                borderColor: tokens.color.primary
             }
         }
     };

src/chart/funnel/FunnelView.ts

@@ -128,12 +128,17 @@ class FunnelPiece extends graphic.Polygon {
             } }
         );
 
+        const labelModel = itemModel.getModel('label');
+        const labelColor = labelModel.get('color');
+        const overrideColor = labelColor === 'inherit'
+            ? visualColor
+            : null;
+
         polygon.setTextConfig({
             local: true,
             inside: !!labelLayout.inside,
-            insideStroke: visualColor,
-            // insideFill: 'auto',
-            outsideFill: visualColor
+            insideStroke: overrideColor,
+            outsideFill: overrideColor
         });
 
         const linePoints = labelLayout.linePoints;

src/chart/funnel/funnelLayout.ts

@@ -25,6 +25,7 @@ import SeriesData from '../../data/SeriesData';
 import GlobalModel from '../../model/Global';
 import { isFunction } from 'zrender/src/core/util';
 
+
 function getSortedIndices(data: SeriesData, sort: FunnelSeriesOption['sort']) {
     const valueDim = data.mapDimension('value');
     const valueArr = data.mapArray(valueDim, function (val: number) {
@@ -242,7 +243,10 @@ export default function funnelLayout(ecModel: GlobalModel, api: ExtensionAPI) {
         const data = seriesModel.getData();
         const valueDim = data.mapDimension('value');
         const sort = seriesModel.get('sort');
-        const viewRect = layout.getViewRect(seriesModel, api);
+
+        const layoutRef = layout.createBoxLayoutReference(seriesModel, api);
+        const viewRect = layout.getLayoutRect(seriesModel.getBoxLayoutParams(), layoutRef.refContainer);
+
         const orient = seriesModel.get('orient');
         const viewWidth = viewRect.width;
         const viewHeight = viewRect.height;

src/chart/gauge/GaugeSeries.ts

@@ -34,6 +34,7 @@ import {
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import SeriesData from '../../data/SeriesData';
+import tokens from '../../visual/tokens';
 
 // [percent, color]
 type GaugeColorStop = [number, ColorString];
@@ -218,7 +219,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             show: true,
             roundCap: false,
             lineStyle: {       // 属性lineStyle控制线条样式
-                color: [[1, '#E6EBF8']],
+                color: [[1, tokens.color.neutral10]],
                 width: 10
             }
         },
@@ -240,7 +241,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             distance: 10,
             // 属性lineStyle（详见lineStyle）控制线条样式
             lineStyle: {
-                color: '#63677A',
+                color: tokens.color.axisTick,
                 width: 3,
                 type: 'solid'
             }
@@ -256,7 +257,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             distance: 10,
             // 属性lineStyle控制线条样式
             lineStyle: {
-                color: '#63677A',
+                color: tokens.color.axisTickMinor,
                 width: 1,
                 type: 'solid'
             }
@@ -265,7 +266,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             show: true,
             distance: 15,
             // formatter: null,
-            color: '#464646',
+            color: tokens.color.axisLabel,
             fontSize: 12,
             rotate: 0
         },
@@ -286,9 +287,9 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             offsetCenter: [0, 0],
             keepAspect: false,
             itemStyle: {
-                color: '#fff',
+                color: tokens.color.neutral00,
                 borderWidth: 0,
-                borderColor: '#5470c6'
+                borderColor: tokens.color.theme[0]
             }
         },
 
@@ -297,23 +298,23 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             // x, y，单位px
             offsetCenter: [0, '20%'],
             // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-            color: '#464646',
+            color: tokens.color.secondary,
             fontSize: 16,
             valueAnimation: false
         },
         detail: {
             show: true,
-            backgroundColor: 'rgba(0,0,0,0)',
+            backgroundColor: tokens.color.transparent,
             borderWidth: 0,
-            borderColor: '#ccc',
+            borderColor: tokens.color.neutral40,
             width: 100,
             height: null, // self-adaption
             padding: [5, 10],
             // x, y，单位px
             offsetCenter: [0, '40%'],
             // formatter: null,
             // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-            color: '#464646',
+            color: tokens.color.primary,
             fontSize: 30,
             fontWeight: 'bold',
             lineHeight: 30,