chore: fix a few typos

src/chart/custom/CustomView.ts

@@ -305,7 +305,7 @@ export default class CustomChartView extends ChartView {
         }
 
         // Enable to give a name on a group made by `renderItem`, and listen
-        // events that triggerd by its descendents.
+        // events that are triggered by its descendents.
         while ((targetEl = (targetEl.__hostTarget || targetEl.parent)) && targetEl !== this.group) {
             if (targetEl.name === elementName) {
                 return true;
@@ -382,23 +382,23 @@ function createEl(elOption: CustomElementOption): Element {
  * ----------------------------------------------------------
  * [STRATEGY_MERGE] Merge properties or erase all properties:
  *
- * Based on the fact that the existing zr element probably be reused, we now consider whether
- * merge or erase all properties to the exsiting elements.
- * That is, if a certain props is not specified in the lastest return of `renderItem`:
+ * Based on the fact that the existing zr element probably is reused, we now consider whether
+ * merge or erase all properties to the existing elements.
+ * That is, if a certain props is not specified in the latest return of `renderItem`:
  * + "Merge" means that do not modify the value on the existing element.
  * + "Erase all" means that use a default value to the existing element.
  *
- * "Merge" might bring some unexpected state retaining for users and "erase all" seams to be
- * more safe. "erase all" force users to specify all of the props each time, which is recommanded
+ * "Merge" might bring some unexpected state retaining for users and "erase all" seems to be
+ * more safe. "erase all" forces users to specify all of the props each time, which is recommended
  * in most cases.
  * But "erase all" theoretically disables the chance of performance optimization (e.g., just
  * generete shape and style at the first time rather than always do that).
  * So we still use "merge" rather than "erase all". If users need "erase all", they can
- * simple always set all of the props each time.
+ * simply always set all of the props each time.
  * Some "object-like" config like `textConfig`, `textContent`, `style` which are not needed for
- * every elment, so we replace them only when user specify them. And the that is a total replace.
+ * every element, so we replace them only when users specify them. And that is a total replace.
  *
- * TODO: there is no hint of 'isFirst' to users. So the performance enhancement can not be
+ * TODO: There is no hint of 'isFirst' to users. So the performance enhancement cannot be
  * performed yet. Consider the case:
  * (1) setOption to "mergeChildren" with a smaller children count
  * (2) Use dataZoom to make an item disappear.
@@ -412,7 +412,7 @@ function createEl(elOption: CustomElementOption): Element {
  * So we  trade a {xx: null} or {xx: undefined} as "not specified" if possible rather than
  * "set them to null/undefined". In most cases, props can not be cleared. Some typicall
  * clearable props like `style`/`textConfig`/`textContent` we enable `false` to means
- * "clear". In some othere special cases that the prop is able to set as null/undefined,
+ * "clear". In some other special cases that the prop is able to set as null/undefined,
  * but not suitable to use `false`, `hasOwnProperty` is checked.
  *
  * ---------------------------------------------
@@ -526,7 +526,7 @@ function updateElOnState(
             }
         }
         else {
-            // style is needed to enable defaut emphasis.
+            // style is needed to enable default emphasis.
             stateObj.style = styleOpt || null;
         }
         // If `elOption.styleEmphasis` or `elOption.emphasis.style` is `false`,
@@ -732,9 +732,9 @@ function makeRenderItem(
     }
 
     /**
-     * @deprecated The orgininal intention of `api.style` is enable to set itemStyle
-     * like other series. But it not necessary and not easy to give a strict definition
-     * of what it return. And since echarts5 it needs to be make compat work. So
+     * @deprecated The original intention of `api.style` is enable to set itemStyle
+     * like other series. But it is not necessary and not easy to give a strict definition
+     * of what it returns. And since echarts5 it needs to be make compat work. So
      * deprecates it since echarts5.
      *
      * By default, `visual` is applied to style (to support visualMap).
@@ -767,7 +767,7 @@ function makeRenderItem(
 
         const opt = {inheritColor: isString(visualColor) ? visualColor : '#000'};
         const labelModel = getLabelModel(dataIndexInside, NORMAL);
-        // Now that the feture of "auto adjust text fill/stroke" has been migrated to zrender
+        // 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
         // `convertToEC4StyleForCustomSerise`.
         const textStyle = labelStyleHelper.createTextStyle(labelModel, null, opt, false, true);
@@ -1134,7 +1134,7 @@ function doCreateOrUpdateAttachedTx(
     isInit: boolean,
     attachedTxInfo: AttachedTxInfo
 ): void {
-    // group do not support textContent temporarily untill necessary.
+    // Group does not support textContent temporarily until necessary.
     if (el.isGroup) {
         return;
     }
@@ -1143,7 +1143,7 @@ function doCreateOrUpdateAttachedTx(
     processTxInfo(elOption, null, attachedTxInfo);
     processTxInfo(elOption, EMPHASIS, attachedTxInfo);
 
-    // If `elOption.textConfig` or `elOption.textContent` is null/undefined, it does not make sence.
+    // If `elOption.textConfig` or `elOption.textContent` is null/undefined, it does not make sense.
     // So for simplicity, if "elOption hasOwnProperty of them but be null/undefined", we do not
     // trade them as set to null to el.
     // Especially:
@@ -1232,7 +1232,7 @@ function processTxInfo(
         // `textContent: {type: 'text'}`, the "type" is easy to be missing. So we tolerate it.
         !txConOptNormal.type && (txConOptNormal.type = 'text');
         if (__DEV__) {
-            // Do not tolerate incorret type for forward compat.
+            // Do not tolerate incorrcet type for forward compat.
             assert(
                 txConOptNormal.type === 'text',
                 'textContent.type must be "text"'
@@ -1281,9 +1281,9 @@ function retrieveStyleOptionOnState(
 //     the element at the same index, if exists. On the other hand, if the new
 //     child is and empty object `{}`, it means to keep the element not changed.
 //
-// For implementation simpleness, do not provide a direct way to remove sinlge
-// child (otherwise the total indicies of the children array have to be modified).
-// User can remove a single child by set its `ignore` as `true`.
+// For implementation simpleness, do not provide a direct way to remove single
+// child (otherwise the total indices of the children array have to be modified).
+// User can remove a single child by setting its `ignore` to `true`.
 function mergeChildren(
     api: ExtensionAPI,
     el: graphicUtil.Group,

src/chart/graph/forceHelper.ts

@@ -18,7 +18,7 @@
 */
 
 /*
-* A third-party license is embeded for some of the code in this file:
+* A third-party license is embedded for some of the code in this file:
 * Some formulas were originally copied from "d3.js" with some
 * modifications made for this project.
 * (See more details in the comment of the method "step" below.)

src/chart/line/LineView.ts

@@ -404,7 +404,7 @@ function canShowAllSymbolForCategory(
     categoryAxis: Axis2D,
     data: SeriesData
 ) {
-    // In mose cases, line is monotonous on category axis, and the label size
+    // In most cases, line is monotonous on category axis, and the label size
     // is close with each other. So we check the symbol size and some of the
     // label size alone with the category axis to estimate whether all symbol
     // can be shown without overlap.
@@ -778,7 +778,7 @@ class LineView extends ChartView {
             }
 
             // Always update, or it is wrong in the case turning on legend
-            // because points are not changed
+            // because points are not changed.
             showSymbol && symbolDraw.updateData(data, {
                 isIgnore: isIgnoreFunc,
                 clipShape: clipShapeForSymbol,
@@ -788,8 +788,8 @@ class LineView extends ChartView {
                 }
             });
 
-            // In the case data zoom triggerred refreshing frequently
-            // Data may not change if line has a category axis. So it should animate nothing
+            // In the case data zoom triggered refreshing frequently
+            // Data may not change if line has a category axis. So it should animate nothing.
             if (!isPointsSame(this._stackedOnPoints, stackedOnPoints)
                 || !isPointsSame(this._points, points)
             ) {
@@ -943,7 +943,7 @@ class LineView extends ChartView {
                     // Null data
                     return;
                 }
-                // fix #11360: should't draw symbol outside clipShapeForSymbol
+                // fix #11360: shouldn't draw symbol outside clipShapeForSymbol
                 if (this._clipShapeForSymbol && !this._clipShapeForSymbol.contain(x, y)) {
                     return;
                 }

src/chart/map/MapSeries.ts

@@ -287,8 +287,8 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
         aspectScale: null,
 
         // Layout with center and size
-        // If you wan't to put map in a fixed size box with right aspect ratio
-        // This two properties may more conveninet
+        // If you want to put map in a fixed size box with right aspect ratio
+        // This two properties may be more convenient.
         // layoutCenter: [50%, 50%]
         // layoutSize: 100
 

src/chart/pie/labelLayout.ts

@@ -288,12 +288,12 @@ function constrainTextWidth(
         const oldHeight = textRect.height;
         if (overflow && overflow.match('break')) {
             // Temporarily set background to be null to calculate
-            // the bounding box without backgroud.
+            // the bounding box without background.
             label.setStyle('backgroundColor', null);
             // Set constraining width
             label.setStyle('width', availableWidth - paddingH);
 
-            // This is the real bounding box of the text without padding
+            // This is the real bounding box of the text without padding.
             const innerRect = label.getBoundingRect();
 
             label.setStyle('width', Math.ceil(innerRect.width));

src/chart/sunburst/SunburstSeries.ts

@@ -238,7 +238,7 @@ class SunburstSeriesModel extends SeriesModel<SunburstSeriesOption> {
             rotate: 'radial',
             show: true,
             opacity: 1,
-            // 'left' is for inner side of inside, and 'right' is for outter
+            // 'left' is for inner side of inside, and 'right' is for outer
             // side for inside
             align: 'center',
             position: 'inside',
@@ -269,7 +269,7 @@ class SunburstSeriesModel extends SeriesModel<SunburstSeriesOption> {
             }
         },
 
-        // Animation type canbe expansion, scale
+        // Animation type can be expansion, scale.
         animationType: 'expansion',
         animationDuration: 1000,
         animationDurationUpdate: 500,

src/chart/themeRiver/ThemeRiverSeries.ts

@@ -156,7 +156,7 @@ class ThemeRiverSeriesModel extends SeriesModel<ThemeRiverSeriesOption> {
 
     /**
      * @override
-     * @param  option  the initial option that user gived
+     * @param  option  the initial option that user gave
      * @param  ecModel  the model object for themeRiver option
      */
     getInitialData(option: ThemeRiverSeriesOption, ecModel: GlobalModel): SeriesData {
@@ -326,4 +326,4 @@ class ThemeRiverSeriesModel extends SeriesModel<ThemeRiverSeriesOption> {
     };
 }
 
-export default ThemeRiverSeriesModel;
+export default ThemeRiverSeriesModel;

src/chart/tree/layoutHelper.ts

@@ -18,7 +18,7 @@
 */
 
 /*
-* A third-party license is embeded for some of the code in this file:
+* A third-party license is embedded for some of the code in this file:
 * The tree layoutHelper implementation was originally copied from
 * "d3.js"(https://github.com/d3/d3-hierarchy) with
 * some modifications made for this project.
@@ -328,4 +328,4 @@ function defaultSeparation(node1: TreeLayoutNode, node2: TreeLayoutNode): number
 
 interface SeparationFunc {
     (node1: TreeLayoutNode, node2: TreeLayoutNode): number
-}
+}

src/chart/treemap/TreemapSeries.ts

@@ -46,7 +46,7 @@ import { normalizeToArray } from '../../util/model';
 import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
 import enableAriaDecalForTree from '../helper/enableAriaDecalForTree';
 
-// Only support numberic value.
+// Only support numeric value.
 type TreemapSeriesDataValue = number | number[];
 
 interface BreadcrumbItemStyleOption extends ItemStyleOption {
@@ -113,7 +113,7 @@ export interface TreemapSeriesVisualOption {
     colorAlpha?: number[] | 'none'
     colorSaturation?: number[] | 'none'
     // A color list for a level. Each node in the level will obtain a color from the color list.
-    // Only suuport ColorString for interpolation
+    // Only support ColorString for interpolation.
     // color?: ColorString[]
 
     /**
@@ -191,7 +191,7 @@ export interface TreemapSeriesOption
      * Leaf node click behaviour: 'zoomToNode', 'link', false.
      * If leafDepth is set and clicking a node which has children but
      * be on left depth, the behaviour would be changing root. Otherwise
-     * use behavious defined above.
+     * use behaviour defined above.
      */
     nodeClick?: 'zoomToNode' | 'link' | false
 
@@ -281,7 +281,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             // Do not use textDistance, for ellipsis rect just the same as treemap node rect.
             distance: 0,
             padding: 5,
-            position: 'inside', // Can be [5, '5%'] or position stirng like 'insideTopLeft', ...
+            position: 'inside', // Can be [5, '5%'] or position string like 'insideTopLeft', ...
             // formatter: null,
             color: '#fff',
             overflow: 'truncate'

src/chart/treemap/TreemapView.ts

@@ -254,9 +254,9 @@ class TreemapView extends ChartView {
             );
         }
 
-        // Notice: when thisTree and oldTree are the same tree (see list.cloneShallow),
-        // the oldTree is actually losted, so we can not find all of the old graphic
-        // elements from tree. So we use this stragegy: make element storage, move
+        // Notice: When thisTree and oldTree are the same tree (see list.cloneShallow),
+        // the oldTree is actually losted, so we cannot find all of the old graphic
+        // elements from tree. So we use this strategy: make element storage, move
         // from old storage to new storage, clear old storage.
 
         dualTravel(
@@ -684,7 +684,7 @@ class TreemapView extends ChartView {
                 const point = bgEl.transformCoordToLocal(x, y);
                 const shape = bgEl.shape;
 
-                // For performance consideration, dont use 'getBoundingRect'.
+                // For performance consideration, don't use 'getBoundingRect'.
                 if (shape.x <= point[0]
                     && point[0] <= shape.x + shape.width
                     && shape.y <= point[1]
@@ -1098,9 +1098,9 @@ function renderNode(
 
 }
 
-// We can not set all backgroud with the same z, Because the behaviour of
+// We cannot set all background with the same z, because the behaviour of
 // drill down and roll up differ background creation sequence from tree
-// hierarchy sequence, which cause that lowser background element overlap
+// hierarchy sequence, which cause lower background elements to overlap
 // upper ones. So we calculate z based on depth.
 // Moreover, we try to shrink down z interval to [0, 1] to avoid that
 // treemap with large z overlaps other components.

src/chart/treemap/treemapLayout.ts

@@ -18,7 +18,7 @@
 */
 
 /*
-* A third-party license is embeded for some of the code in this file:
+* A third-party license is embedded for some of the code in this file:
 * The treemap layout implementation was originally copied from
 * "d3.js" with some modifications made for this project.
 * (See more details in the comment of the method "squarify" below.)
@@ -573,7 +573,7 @@ function estimateRootSize(
     containerHeight: number
 ) {
     // If targetInfo.node exists, we zoom to the node,
-    // so estimate whold width and heigth by target node.
+    // so estimate whole width and height by target node.
     let currNode = (targetInfo || {}).node;
     const defaultSize = [containerWidth, containerHeight];
 
@@ -616,7 +616,7 @@ function estimateRootSize(
     return [containerWidth * scale, containerHeight * scale];
 }
 
-// Root postion base on coord of containerGroup
+// Root position based on coord of containerGroup
 function calculateRootPosition(
     layoutInfo: layout.LayoutRect,
     rootRect: RectLike,

src/chart/treemap/treemapVisual.ts

@@ -226,16 +226,16 @@ function buildVisualMapping(
     return mapping;
 }
 
-// Notice: If we dont have the attribute 'colorRange', but only use
+// Notice: If we don't have the attribute 'colorRange', but only use
 // attribute 'color' to represent both concepts of 'colorRange' and 'color',
 // (It means 'colorRange' when 'color' is Array, means 'color' when not array),
 // this problem will be encountered:
-// If a level-1 node dont have children, and its siblings has children,
-// and colorRange is set on level-1, then the node can not be colored.
+// If a level-1 node doesn't have children, and its siblings have children,
+// and colorRange is set on level-1, then the node cannot be colored.
 // So we separate 'colorRange' and 'color' to different attributes.
 function getRangeVisual(nodeModel: NodeModel, name: keyof TreemapVisual) {
     // 'colorRange', 'colorARange', 'colorSRange'.
-    // If not exsits on this node, fetch from levels and series.
+    // If not exists on this node, fetch from levels and series.
     const range = nodeModel.get(name);
     return (isArray(range) && range.length) ? {
         name: name,

src/component/dataZoom/AxisProxy.ts

@@ -197,7 +197,7 @@ class AxisProxy {
         asc(percentWindow);
 
         // The windows from user calling of `dispatchAction` might be out of the extent,
-        // or do not obey the `min/maxSpan`, `min/maxValueSpan`. But we dont restrict window
+        // or do not obey the `min/maxSpan`, `min/maxValueSpan`. But we don't restrict window
         // by `zoomLock` here, because we see `zoomLock` just as a interaction constraint,
         // where API is able to initialize/modify the window size even though `zoomLock`
         // specified.
@@ -232,8 +232,8 @@ class AxisProxy {
     }
 
     /**
-     * Notice: reset should not be called before series.restoreData() called,
-     * so it is recommanded to be called in "process stage" but not "model init
+     * Notice: reset should not be called before series.restoreData() is called,
+     * so it is recommended to be called in "process stage" but not "model init
      * stage".
      */
     reset(dataZoomModel: DataZoomModel) {