@visactor/vrender-components 0.20.1-alpha.5 → 0.20.1-alpha.6

package/dist/index.es.js

@@ -3857,7 +3857,7 @@ class Animate {
       delta = this._duringTime + delta * this.timeScale - this._startTime, this._duringTime = this._startTime;
     }
     this.status === AnimateStatus.INITIAL && (this.status = AnimateStatus.RUNNING, this._onStart && this._onStart.forEach(cb => cb()));
-    this.setPosition(Math.max(this.rawPosition, 0) + delta * this.timeScale) && this.status === AnimateStatus.RUNNING && (this.status = AnimateStatus.END, this._onEnd && this._onEnd.forEach(cb => cb()));
+    this.setPosition(this.rawPosition + delta * this.timeScale) && this.status === AnimateStatus.RUNNING && (this.status = AnimateStatus.END, this._onEnd && this._onEnd.forEach(cb => cb()));
   }
   setPosition(rawPosition) {
     let sa,
@@ -3980,7 +3980,7 @@ class SubAnimate {
       end = !1;
     const startAt = null !== (_a = this._startAt) && void 0 !== _a ? _a : 0;
     if (rawPosition < 0 && (rawPosition = 0), rawPosition < startAt) return this.rawPosition = rawPosition, !1;
-    if (rawPosition -= startAt, d <= 0 && (end = !0, d < 0)) return end;
+    if (rawPosition -= startAt, d <= 0) return end = !0, end;
     if (loop = Math.floor(rawPosition / d), position = rawPosition - loop * d, end = rawPosition >= loopCount * d + d, end && (position = d, loop = loopCount, rawPosition = position * loop + d), rawPosition === prevRawPos) return end;
     const rev = !this.reversed != !(this.bounce && loop % 2);
     return rev && (position = d - position), this._deltaPosition = position - this.position, this.position = position, this.rawPosition = rawPosition + startAt, this.updatePosition(end, rev), end;
@@ -16071,7 +16071,8 @@ class LabelBase extends AbstractComponent {
         this._bmpTool = bmpTool;
     }
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, LabelBase.defaultAttributes, attributes));
+        const { data } = attributes, restAttributes = __rest(attributes, ["data"]);
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : Object.assign({ data }, merge({}, LabelBase.defaultAttributes, restAttributes)));
         this.name = 'label';
         this._onHover = (e) => {
             const target = e.target;
@@ -16773,7 +16774,8 @@ const getLabelComponent = (type) => {
 
 class SymbolLabel extends LabelBase {
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, SymbolLabel.defaultAttributes, attributes));
+        const { data } = attributes, restAttributes = __rest(attributes, ["data"]);
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : Object.assign({ data }, merge({}, SymbolLabel.defaultAttributes, restAttributes)));
         this.name = 'symbol-label';
     }
     labeling(textBounds, graphicBounds, position = 'top', offset = 0) {
@@ -16794,7 +16796,8 @@ const registerSymbolDataLabel = () => {
 
 class RectLabel extends LabelBase {
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, RectLabel.defaultAttributes, attributes));
+        const { data } = attributes, restAttributes = __rest(attributes, ["data"]);
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : Object.assign({ data }, merge({}, RectLabel.defaultAttributes, restAttributes)));
     }
     labeling(textBounds, graphicBounds, position = 'top', offset = 0) {
         if (!textBounds || !graphicBounds) {
@@ -16848,7 +16851,8 @@ const registerRectDataLabel = () => {
 
 class LineLabel extends LabelBase {
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, LineLabel.defaultAttributes, attributes));
+        const { data } = attributes, restAttributes = __rest(attributes, ["data"]);
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : Object.assign({ data }, merge({}, LineLabel.defaultAttributes, restAttributes)));
         this.name = 'line-label';
     }
     getGraphicBounds(graphic, point = {}, position = 'end') {
@@ -16921,7 +16925,8 @@ class ArcInfo {
 }
 class ArcLabel extends LabelBase {
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, ArcLabel.defaultAttributes, attributes));
+        const { data } = attributes, restAttributes = __rest(attributes, ["data"]);
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : Object.assign({ data }, merge({}, ArcLabel.defaultAttributes, restAttributes)));
         this.name = 'arc-label';
         this._ellipsisWidth = 0;
         this._arcLeft = new Map();
@@ -17642,7 +17647,8 @@ const registerArcDataLabel = () => {
 
 class DataLabel extends AbstractComponent {
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, DataLabel.defaultAttributes, attributes));
+        const { dataLabels } = attributes, restAttributes = __rest(attributes, ["dataLabels"]);
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : Object.assign({ dataLabels }, merge({}, DataLabel.defaultAttributes, restAttributes)));
         this.name = 'data-label';
     }
     render() {
@@ -18022,6 +18028,8 @@ var AXIS_ELEMENT_NAME;
     AXIS_ELEMENT_NAME["line"] = "axis-line";
     AXIS_ELEMENT_NAME["background"] = "axis-background";
     AXIS_ELEMENT_NAME["axisLabelBackground"] = "axis-label-background";
+    AXIS_ELEMENT_NAME["axisBreak"] = "axis-break";
+    AXIS_ELEMENT_NAME["axisBreakSymbol"] = "axis-break-symbol";
 })(AXIS_ELEMENT_NAME || (AXIS_ELEMENT_NAME = {}));
 var AxisStateValue;
 (function (AxisStateValue) {
@@ -18091,6 +18099,12 @@ const DEFAULT_AXIS_THEME = {
         }
     }
 };
+const DEFAULT_AXIS_BREAK_SYMBOL_STYLE = {
+    size: 8,
+    stroke: '#000',
+    lineWidth: 1,
+    zIndex: 1
+};
 
 const clampRadian = (angle = 0) => {
     if (angle < 0) {
@@ -18148,6 +18162,13 @@ function getCircleLabelPosition(tickPosition, tickVector, text, style) {
     const y = baseY - dy;
     return { x, y };
 }
+function getAxisBreakSymbolAttrs(props = {}) {
+    var _a, _b;
+    const { style = {} } = props;
+    const symbolStyle = merge({}, DEFAULT_AXIS_BREAK_SYMBOL_STYLE, style);
+    const symbolSize = (_a = symbolStyle.size) !== null && _a !== void 0 ? _a : DEFAULT_AXIS_BREAK_SYMBOL_STYLE.size;
+    return Object.assign(Object.assign({}, symbolStyle), { symbolType: (_b = symbolStyle.symbolType) !== null && _b !== void 0 ? _b : `M ${-symbolSize / 2} ${symbolSize / 6} L ${symbolSize / 2} ${-symbolSize / 6}`, symbolSize });
+}
 function getElMap(g) {
     const elMap = {};
     traverseGroup(g, (el) => {
@@ -19084,7 +19105,43 @@ class LineAxis extends AxisBase {
     }
     _renderInner(container) {
         var _a;
+        if (this.attribute.breaks && this.attribute.breaks.length) {
+            const transformedBreaks = [];
+            for (let index = 0; index < this.attribute.breaks.length; index++) {
+                const aBreak = this.attribute.breaks[index];
+                const { range, breakSymbol, rawRange } = aBreak;
+                transformedBreaks.push({
+                    startPoint: this.getTickCoord(range[0]),
+                    endPoint: this.getTickCoord(range[1]),
+                    range,
+                    breakSymbol,
+                    rawRange
+                });
+            }
+            this._breaks = transformedBreaks;
+        }
         super._renderInner(container);
+        if (this._breaks && this._breaks.length) {
+            this._breaks.forEach((b, index) => {
+                const { startPoint, endPoint, breakSymbol, rawRange } = b;
+                if ((breakSymbol === null || breakSymbol === void 0 ? void 0 : breakSymbol.visible) !== false) {
+                    const axisBreakGroup = graphicCreator.group({
+                        zIndex: 99
+                    });
+                    axisBreakGroup.name = AXIS_ELEMENT_NAME.axisBreak;
+                    axisBreakGroup.id = this._getNodeId(`${AXIS_ELEMENT_NAME.axisBreak}-${index}`);
+                    axisBreakGroup.data = rawRange;
+                    const symbolStyle = getAxisBreakSymbolAttrs(breakSymbol);
+                    const shape1 = graphicCreator.symbol(Object.assign({ x: startPoint.x, y: startPoint.y }, symbolStyle));
+                    shape1.name = AXIS_ELEMENT_NAME.axisBreakSymbol;
+                    const shape2 = graphicCreator.symbol(Object.assign({ x: endPoint.x, y: endPoint.y }, symbolStyle));
+                    shape2.name = AXIS_ELEMENT_NAME.axisBreakSymbol;
+                    axisBreakGroup.add(shape1);
+                    axisBreakGroup.add(shape2);
+                    container.add(axisBreakGroup);
+                }
+            });
+        }
         const { panel } = this.attribute;
         if (panel && panel.visible) {
             const axisContainer = this.axisContainer;
@@ -19098,9 +19155,24 @@ class LineAxis extends AxisBase {
     }
     renderLine(container) {
         const { start, end, line } = this.attribute;
-        const _a = line, { startSymbol, endSymbol, style, breakRange, breakShape, breakShapeStyle, state } = _a, restLineAttrs = __rest(_a, ["startSymbol", "endSymbol", "style", "breakRange", "breakShape", "breakShapeStyle", "state"]);
-        const lineAttrs = Object.assign({ points: [start, end], startSymbol,
+        const _a = line, { startSymbol, endSymbol, style, state } = _a, restLineAttrs = __rest(_a, ["startSymbol", "endSymbol", "style", "state"]);
+        const lineAttrs = Object.assign({ startSymbol,
             endSymbol, lineStyle: style }, restLineAttrs);
+        if (this._breaks && this._breaks.length) {
+            const linePoints = [];
+            let lastStartPoint = start;
+            this._breaks.forEach(b => {
+                const { startPoint, endPoint } = b;
+                linePoints.push([lastStartPoint, startPoint]);
+                lastStartPoint = endPoint;
+            });
+            linePoints.push([lastStartPoint, end]);
+            lineAttrs.points = linePoints;
+            lineAttrs.multiSegment = true;
+        }
+        else {
+            lineAttrs.points = [start, end];
+        }
         if (!isEmpty(state)) {
             lineAttrs.state = {
                 line: merge({}, DEFAULT_STATES$1, state),
@@ -19855,8 +19927,34 @@ const isAxisHorizontal = (axisOrientType) => {
     return ['bottom', 'top', 'z'].includes(axisOrientType);
 };
 
+function getScaleTicks(op, scale, count, getTicks) {
+    let scaleTicks;
+    const { breakData } = op;
+    if (breakData) {
+        const { range: breakRanges } = breakData();
+        const domain = scale.domain();
+        scaleTicks = [];
+        for (let i = 0; i < domain.length; i++) {
+            if (i < domain.length - 1) {
+                const range = [domain[i], domain[i + 1]];
+                const ticks = getTicks(count, range);
+                ticks.forEach(tick => {
+                    if (!breakRanges.some((breakRange) => tick >= breakRange[0] && tick <= breakRange[1])) {
+                        scaleTicks.push(tick);
+                    }
+                });
+            }
+        }
+        scale.domain(domain);
+    }
+    else {
+        scaleTicks = getTicks(count);
+    }
+    return scaleTicks;
+}
 const DEFAULT_CONTINUOUS_TICK_COUNT = 5;
 const continuousTicks = (scale, op) => {
+    var _a, _b;
     if (!isContinuous(scale.type)) {
         return convertDomainToTickData(scale.domain());
     }
@@ -19865,22 +19963,37 @@ const continuousTicks = (scale, op) => {
     if (rangeSize < 2) {
         return convertDomainToTickData([scale.domain()[0]]);
     }
-    const { tickCount, forceTickCount, tickStep, noDecimals = false, labelStyle } = op;
+    const { tickCount, forceTickCount, tickStep, noDecimals = false, labelStyle, breakData } = op;
     let scaleTicks;
     if (isValid(tickStep)) {
         scaleTicks = scale.stepTicks(tickStep);
     }
     else if (isValid(forceTickCount)) {
-        scaleTicks = scale.forceTicks(forceTickCount);
+        scaleTicks = getScaleTicks(op, scale, forceTickCount, (count, range) => {
+            if (range && range.length) {
+                return scale.domain(range).forceTicks(count);
+            }
+            return scale.forceTicks(count);
+        });
     }
     else if (op.tickMode === 'd3') {
-        const count = isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount;
-        scaleTicks = scale.d3Ticks(count !== null && count !== void 0 ? count : DEFAULT_CONTINUOUS_TICK_COUNT, { noDecimals });
+        const count = (_a = (isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount)) !== null && _a !== void 0 ? _a : DEFAULT_CONTINUOUS_TICK_COUNT;
+        scaleTicks = getScaleTicks(op, scale, count, (count, range) => {
+            if (range && range.length) {
+                return scale.domain(range).d3Ticks(count, { noDecimals });
+            }
+            return scale.d3Ticks(count, { noDecimals });
+        });
     }
     else {
-        const count = isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount;
+        const count = (_b = (isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount)) !== null && _b !== void 0 ? _b : DEFAULT_CONTINUOUS_TICK_COUNT;
         const customTicks = isFunction(op.tickMode) ? op.tickMode : undefined;
-        scaleTicks = scale.ticks(count !== null && count !== void 0 ? count : DEFAULT_CONTINUOUS_TICK_COUNT, { noDecimals, customTicks });
+        scaleTicks = getScaleTicks(op, scale, count, (count, range) => {
+            if (range && range.length) {
+                return scale.domain(range).ticks(count, { noDecimals, customTicks });
+            }
+            return scale.ticks(count, { noDecimals, customTicks });
+        });
     }
     if (op.sampling) {
         if (op.coordinateType === 'cartesian' || (op.coordinateType === 'polar' && op.axisOrientType === 'radius')) {
@@ -19889,8 +20002,9 @@ const continuousTicks = (scale, op) => {
                 AABBBounds: bounds,
                 value: scaleTicks[i]
             }));
+            const samplingMethod = breakData ? methods.greedy : methods.parity;
             while (items.length >= 3 && hasOverlap(items, labelGap)) {
-                items = methods.parity(items);
+                items = samplingMethod(items, labelGap);
             }
             const ticks = items.map(item => item.value);
             if (ticks.length < 3 && labelFlush) {
@@ -28509,6 +28623,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.20.1-alpha.5";
+const version = "0.20.1-alpha.6";
 
-export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };
+export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };

package/es/axis/config.d.ts

@@ -52,3 +52,9 @@ export declare const DEFAULT_AXIS_THEME: {
         };
     };
 };
+export declare const DEFAULT_AXIS_BREAK_SYMBOL_STYLE: {
+    size: number;
+    stroke: string;
+    lineWidth: number;
+    zIndex: number;
+};

package/es/axis/config.js

@@ -52,4 +52,11 @@ export const DEFAULT_AXIS_THEME = {
         }
     }
 };
+
+export const DEFAULT_AXIS_BREAK_SYMBOL_STYLE = {
+    size: 8,
+    stroke: "#000",
+    lineWidth: 1,
+    zIndex: 1
+};
 //# sourceMappingURL=config.js.map

package/es/axis/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axis/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,CAAC;SACf;KACF;IACD,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,MAAM;YACZ,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,CAAC;SACf;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,KAAK;QACb,cAAc,EAAE,IAAI;QACpB,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;CACF,CAAC","file":"config.js","sourcesContent":["export const DEFAULT_AXIS_THEME = {\n  title: {\n    space: 4,\n    padding: 0,\n    textStyle: {\n      fontSize: 12,\n      fill: '#333333',\n      fontWeight: 'normal',\n      fillOpacity: 1\n    }\n  },\n  label: {\n    visible: true,\n    inside: false,\n    space: 4,\n    padding: 0,\n    style: {\n      fontSize: 12,\n      fill: '#333',\n      fontWeight: 'normal',\n      fillOpacity: 1\n    }\n  },\n  tick: {\n    visible: true,\n    inside: false,\n    alignWithLabel: true,\n    length: 4,\n    style: {\n      lineWidth: 1,\n      stroke: '#000',\n      strokeOpacity: 1\n    }\n  },\n  subTick: {\n    visible: false,\n    inside: false,\n    count: 4,\n    length: 2,\n    style: {\n      lineWidth: 1,\n      stroke: '#999',\n      strokeOpacity: 1\n    }\n  },\n  line: {\n    visible: true,\n    style: {\n      lineWidth: 1,\n      stroke: '#000',\n      strokeOpacity: 1\n    }\n  }\n};\n"]}
+{"version":3,"sources":["../src/axis/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,CAAC;SACf;KACF;IACD,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,MAAM;YACZ,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,CAAC;SACf;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,KAAK;QACb,cAAc,EAAE,IAAI;QACpB,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,+BAA+B,GAAG;IAC7C,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,CAAC;IACZ,MAAM,EAAE,CAAC;CACV,CAAC","file":"config.js","sourcesContent":["export const DEFAULT_AXIS_THEME = {\n  title: {\n    space: 4,\n    padding: 0,\n    textStyle: {\n      fontSize: 12,\n      fill: '#333333',\n      fontWeight: 'normal',\n      fillOpacity: 1\n    }\n  },\n  label: {\n    visible: true,\n    inside: false,\n    space: 4,\n    padding: 0,\n    style: {\n      fontSize: 12,\n      fill: '#333',\n      fontWeight: 'normal',\n      fillOpacity: 1\n    }\n  },\n  tick: {\n    visible: true,\n    inside: false,\n    alignWithLabel: true,\n    length: 4,\n    style: {\n      lineWidth: 1,\n      stroke: '#000',\n      strokeOpacity: 1\n    }\n  },\n  subTick: {\n    visible: false,\n    inside: false,\n    count: 4,\n    length: 2,\n    style: {\n      lineWidth: 1,\n      stroke: '#999',\n      strokeOpacity: 1\n    }\n  },\n  line: {\n    visible: true,\n    style: {\n      lineWidth: 1,\n      stroke: '#000',\n      strokeOpacity: 1\n    }\n  }\n};\n\nexport const DEFAULT_AXIS_BREAK_SYMBOL_STYLE = {\n  size: 8,\n  stroke: '#000',\n  lineWidth: 1,\n  zIndex: 1\n};\n"]}

package/es/axis/constant.d.ts

@@ -12,7 +12,9 @@ export declare enum AXIS_ELEMENT_NAME {
     gridRegion = "axis-grid-region",
     line = "axis-line",
     background = "axis-background",
-    axisLabelBackground = "axis-label-background"
+    axisLabelBackground = "axis-label-background",
+    axisBreak = "axis-break",
+    axisBreakSymbol = "axis-break-symbol"
 }
 export declare enum AxisStateValue {
     selected = "selected",

package/es/axis/constant.js

@@ -7,7 +7,8 @@ export var AXIS_ELEMENT_NAME;
     AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", 
     AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", 
     AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", 
-    AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background";
+    AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background", 
+    AXIS_ELEMENT_NAME.axisBreak = "axis-break", AXIS_ELEMENT_NAME.axisBreakSymbol = "axis-break-symbol";
 }(AXIS_ELEMENT_NAME || (AXIS_ELEMENT_NAME = {}));
 
 export var AxisStateValue;

package/es/axis/constant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axis/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,iBAeX;AAfD,WAAY,iBAAiB;IAC3B,6CAAwB,CAAA;IACxB,qDAAgC,CAAA;IAChC,4DAAuC,CAAA;IACvC,0DAAqC,CAAA;IACrC,uCAAkB,CAAA;IAClB,8CAAyB,CAAA;IACzB,yCAAoB,CAAA;IACpB,yCAAoB,CAAA;IACpB,0DAAqC,CAAA;IACrC,uCAAkB,CAAA;IAClB,oDAA+B,CAAA;IAC/B,uCAAkB,CAAA;IAClB,mDAA8B,CAAA;IAC9B,kEAA6C,CAAA;AAC/C,CAAC,EAfW,iBAAiB,KAAjB,iBAAiB,QAe5B;AAED,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,sDAAoC,CAAA;IACpC,iCAAe,CAAA;IACf,gDAA8B,CAAA;AAChC,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAED,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,EAAE;IACpC,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,EAAE;IAC7B,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE;IAC1B,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,EAAE;CAClC,CAAC","file":"constant.js","sourcesContent":["export enum AXIS_ELEMENT_NAME {\n  innerView = 'inner-view',\n  axisContainer = 'axis-container',\n  labelContainer = 'axis-label-container',\n  tickContainer = 'axis-tick-container',\n  tick = 'axis-tick',\n  subTick = 'axis-sub-tick',\n  label = 'axis-label',\n  title = 'axis-title',\n  gridContainer = 'axis-grid-container',\n  grid = 'axis-grid',\n  gridRegion = 'axis-grid-region',\n  line = 'axis-line',\n  background = 'axis-background',\n  axisLabelBackground = 'axis-label-background'\n}\n\nexport enum AxisStateValue {\n  selected = 'selected',\n  selectedReverse = 'selected_reverse',\n  hover = 'hover',\n  hoverReverse = 'hover_reverse'\n}\n\nexport const DEFAULT_STATES = {\n  [AxisStateValue.selectedReverse]: {},\n  [AxisStateValue.selected]: {},\n  [AxisStateValue.hover]: {},\n  [AxisStateValue.hoverReverse]: {}\n};\n"]}
+{"version":3,"sources":["../src/axis/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,iBAiBX;AAjBD,WAAY,iBAAiB;IAC3B,6CAAwB,CAAA;IACxB,qDAAgC,CAAA;IAChC,4DAAuC,CAAA;IACvC,0DAAqC,CAAA;IACrC,uCAAkB,CAAA;IAClB,8CAAyB,CAAA;IACzB,yCAAoB,CAAA;IACpB,yCAAoB,CAAA;IACpB,0DAAqC,CAAA;IACrC,uCAAkB,CAAA;IAClB,oDAA+B,CAAA;IAC/B,uCAAkB,CAAA;IAClB,mDAA8B,CAAA;IAC9B,kEAA6C,CAAA;IAC7C,6CAAwB,CAAA;IACxB,0DAAqC,CAAA;AACvC,CAAC,EAjBW,iBAAiB,KAAjB,iBAAiB,QAiB5B;AAED,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,sDAAoC,CAAA;IACpC,iCAAe,CAAA;IACf,gDAA8B,CAAA;AAChC,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAED,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,EAAE;IACpC,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,EAAE;IAC7B,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE;IAC1B,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,EAAE;CAClC,CAAC","file":"constant.js","sourcesContent":["export enum AXIS_ELEMENT_NAME {\n  innerView = 'inner-view',\n  axisContainer = 'axis-container',\n  labelContainer = 'axis-label-container',\n  tickContainer = 'axis-tick-container',\n  tick = 'axis-tick',\n  subTick = 'axis-sub-tick',\n  label = 'axis-label',\n  title = 'axis-title',\n  gridContainer = 'axis-grid-container',\n  grid = 'axis-grid',\n  gridRegion = 'axis-grid-region',\n  line = 'axis-line',\n  background = 'axis-background',\n  axisLabelBackground = 'axis-label-background',\n  axisBreak = 'axis-break',\n  axisBreakSymbol = 'axis-break-symbol'\n}\n\nexport enum AxisStateValue {\n  selected = 'selected',\n  selectedReverse = 'selected_reverse',\n  hover = 'hover',\n  hoverReverse = 'hover_reverse'\n}\n\nexport const DEFAULT_STATES = {\n  [AxisStateValue.selectedReverse]: {},\n  [AxisStateValue.selected]: {},\n  [AxisStateValue.hover]: {},\n  [AxisStateValue.hoverReverse]: {}\n};\n"]}

package/es/axis/line.d.ts

@@ -62,6 +62,7 @@ export declare class LineAxis extends AxisBase<LineAxisAttributes> {
         };
     };
     constructor(attributes: LineAxisAttributes, options?: ComponentOptions);
+    private _breaks;
     protected _renderInner(container: IGroup): void;
     protected renderLine(container: IGroup): void;
     protected getTitleAttribute(): TagAttributes;

package/es/axis/line.js

@@ -36,6 +36,8 @@ import { LineAxisMixin } from "./mixin/line";
 
 import { loadLineAxisComponent } from "./register";
 
+import { getAxisBreakSymbolAttrs } from "./util";
+
 loadLineAxisComponent();
 
 export class LineAxis extends AxisBase {
@@ -44,7 +46,41 @@ export class LineAxis extends AxisBase {
     }
     _renderInner(container) {
         var _a;
-        super._renderInner(container);
+        if (this.attribute.breaks && this.attribute.breaks.length) {
+            const transformedBreaks = [];
+            for (let index = 0; index < this.attribute.breaks.length; index++) {
+                const aBreak = this.attribute.breaks[index], {range: range, breakSymbol: breakSymbol, rawRange: rawRange} = aBreak;
+                transformedBreaks.push({
+                    startPoint: this.getTickCoord(range[0]),
+                    endPoint: this.getTickCoord(range[1]),
+                    range: range,
+                    breakSymbol: breakSymbol,
+                    rawRange: rawRange
+                });
+            }
+            this._breaks = transformedBreaks;
+        }
+        super._renderInner(container), this._breaks && this._breaks.length && this._breaks.forEach(((b, index) => {
+            const {startPoint: startPoint, endPoint: endPoint, breakSymbol: breakSymbol, rawRange: rawRange} = b;
+            if (!1 !== (null == breakSymbol ? void 0 : breakSymbol.visible)) {
+                const axisBreakGroup = graphicCreator.group({
+                    zIndex: 99
+                });
+                axisBreakGroup.name = AXIS_ELEMENT_NAME.axisBreak, axisBreakGroup.id = this._getNodeId(`${AXIS_ELEMENT_NAME.axisBreak}-${index}`), 
+                axisBreakGroup.data = rawRange;
+                const symbolStyle = getAxisBreakSymbolAttrs(breakSymbol), shape1 = graphicCreator.symbol(Object.assign({
+                    x: startPoint.x,
+                    y: startPoint.y
+                }, symbolStyle));
+                shape1.name = AXIS_ELEMENT_NAME.axisBreakSymbol;
+                const shape2 = graphicCreator.symbol(Object.assign({
+                    x: endPoint.x,
+                    y: endPoint.y
+                }, symbolStyle));
+                shape2.name = AXIS_ELEMENT_NAME.axisBreakSymbol, axisBreakGroup.add(shape1), axisBreakGroup.add(shape2), 
+                container.add(axisBreakGroup);
+            }
+        }));
         const {panel: panel} = this.attribute;
         if (panel && panel.visible) {
             const axisContainer = this.axisContainer, axisContainerBounds = axisContainer.AABBBounds, bgRect = graphicCreator.rect(Object.assign({
@@ -59,12 +95,19 @@ export class LineAxis extends AxisBase {
         }
     }
     renderLine(container) {
-        const {start: start, end: end, line: line} = this.attribute, _a = line, {startSymbol: startSymbol, endSymbol: endSymbol, style: style, breakRange: breakRange, breakShape: breakShape, breakShapeStyle: breakShapeStyle, state: state} = _a, restLineAttrs = __rest(_a, [ "startSymbol", "endSymbol", "style", "breakRange", "breakShape", "breakShapeStyle", "state" ]), lineAttrs = Object.assign({
-            points: [ start, end ],
+        const {start: start, end: end, line: line} = this.attribute, _a = line, {startSymbol: startSymbol, endSymbol: endSymbol, style: style, state: state} = _a, restLineAttrs = __rest(_a, [ "startSymbol", "endSymbol", "style", "state" ]), lineAttrs = Object.assign({
             startSymbol: startSymbol,
             endSymbol: endSymbol,
             lineStyle: style
         }, restLineAttrs);
+        if (this._breaks && this._breaks.length) {
+            const linePoints = [];
+            let lastStartPoint = start;
+            this._breaks.forEach((b => {
+                const {startPoint: startPoint, endPoint: endPoint} = b;
+                linePoints.push([ lastStartPoint, startPoint ]), lastStartPoint = endPoint;
+            })), linePoints.push([ lastStartPoint, end ]), lineAttrs.points = linePoints, lineAttrs.multiSegment = !0;
+        } else lineAttrs.points = [ start, end ];
         isEmpty(state) || (lineAttrs.state = {
             line: merge({}, DEFAULT_STATES, state),
             symbol: merge({}, DEFAULT_STATES, state)