echarts 4.4.0 → 4.6.0

package/lib/layout/barGrid.js

@@ -67,6 +67,7 @@ function getAxisKey(axis) {
  * @param {number} opt.count Positive interger.
  * @param {number} [opt.barWidth]
  * @param {number} [opt.barMaxWidth]
+ * @param {number} [opt.barMinWidth]
  * @param {number} [opt.barGap]
  * @param {number} [opt.barCategoryGap]
  * @return {Object} {width, offset, offsetCenter} If axis.type is not 'category', return undefined.
@@ -114,23 +115,116 @@ function prepareLayoutBarSeries(seriesType, ecModel) {
   });
   return seriesModels;
 }
+/**
+ * Map from (baseAxis.dim + '_' + baseAxis.index) to min gap of two adjacent
+ * values.
+ * This works for time axes, value axes, and log axes.
+ * For a single time axis, return value is in the form like
+ * {'x_0': [1000000]}.
+ * The value of 1000000 is in milliseconds.
+ */
+
+
+function getValueAxesMinGaps(barSeries) {
+  /**
+   * Map from axis.index to values.
+   * For a single time axis, axisValues is in the form like
+   * {'x_0': [1495555200000, 1495641600000, 1495728000000]}.
+   * Items in axisValues[x], e.g. 1495555200000, are time values of all
+   * series.
+   */
+  var axisValues = {};
+  zrUtil.each(barSeries, function (seriesModel) {
+    var cartesian = seriesModel.coordinateSystem;
+    var baseAxis = cartesian.getBaseAxis();
+
+    if (baseAxis.type !== 'time' && baseAxis.type !== 'value') {
+      return;
+    }
+
+    var data = seriesModel.getData();
+    var key = baseAxis.dim + '_' + baseAxis.index;
+    var dim = data.mapDimension(baseAxis.dim);
+
+    for (var i = 0, cnt = data.count(); i < cnt; ++i) {
+      var value = data.get(dim, i);
+
+      if (!axisValues[key]) {
+        // No previous data for the axis
+        axisValues[key] = [value];
+      } else {
+        // No value in previous series
+        axisValues[key].push(value);
+      } // Ignore duplicated time values in the same axis
+
+    }
+  });
+  var axisMinGaps = [];
+
+  for (var key in axisValues) {
+    if (axisValues.hasOwnProperty(key)) {
+      var valuesInAxis = axisValues[key];
+
+      if (valuesInAxis) {
+        // Sort axis values into ascending order to calculate gaps
+        valuesInAxis.sort(function (a, b) {
+          return a - b;
+        });
+        var min = null;
+
+        for (var j = 1; j < valuesInAxis.length; ++j) {
+          var delta = valuesInAxis[j] - valuesInAxis[j - 1];
+
+          if (delta > 0) {
+            // Ignore 0 delta because they are of the same axis value
+            min = min === null ? delta : Math.min(min, delta);
+          }
+        } // Set to null if only have one data
+
+
+        axisMinGaps[key] = min;
+      }
+    }
+  }
+
+  return axisMinGaps;
+}
 
 function makeColumnLayout(barSeries) {
+  var axisMinGaps = getValueAxesMinGaps(barSeries);
   var seriesInfoList = [];
   zrUtil.each(barSeries, function (seriesModel) {
-    var data = seriesModel.getData();
     var cartesian = seriesModel.coordinateSystem;
     var baseAxis = cartesian.getBaseAxis();
     var axisExtent = baseAxis.getExtent();
-    var bandWidth = baseAxis.type === 'category' ? baseAxis.getBandWidth() : Math.abs(axisExtent[1] - axisExtent[0]) / data.count();
+    var bandWidth;
+
+    if (baseAxis.type === 'category') {
+      bandWidth = baseAxis.getBandWidth();
+    } else if (baseAxis.type === 'value' || baseAxis.type === 'time') {
+      var key = baseAxis.dim + '_' + baseAxis.index;
+      var minGap = axisMinGaps[key];
+      var extentSpan = Math.abs(axisExtent[1] - axisExtent[0]);
+      var scale = baseAxis.scale.getExtent();
+      var scaleSpan = Math.abs(scale[1] - scale[0]);
+      bandWidth = minGap ? extentSpan / scaleSpan * minGap : extentSpan; // When there is only one data value
+    } else {
+      var data = seriesModel.getData();
+      bandWidth = Math.abs(axisExtent[1] - axisExtent[0]) / data.count();
+    }
+
     var barWidth = parsePercent(seriesModel.get('barWidth'), bandWidth);
     var barMaxWidth = parsePercent(seriesModel.get('barMaxWidth'), bandWidth);
+    var barMinWidth = parsePercent( // barMinWidth by default is 1 in cartesian. Because in value axis,
+    // the auto-calculated bar width might be less than 1.
+    seriesModel.get('barMinWidth') || 1, bandWidth);
     var barGap = seriesModel.get('barGap');
     var barCategoryGap = seriesModel.get('barCategoryGap');
     seriesInfoList.push({
       bandWidth: bandWidth,
       barWidth: barWidth,
       barMaxWidth: barMaxWidth,
+      barMinWidth: barMinWidth,
       barGap: barGap,
       barCategoryGap: barCategoryGap,
       axisKey: getAxisKey(baseAxis),
@@ -169,7 +263,6 @@ function doCalBarWidthAndOffset(seriesInfoList) {
     // will be shared by series. Consider that they have default values,
     // only the attributes set on the last series will work.
     // Do not change this fact unless there will be a break change.
-    // TODO
 
     var barWidth = seriesInfo.barWidth;
 
@@ -182,6 +275,8 @@ function doCalBarWidthAndOffset(seriesInfoList) {
 
     var barMaxWidth = seriesInfo.barMaxWidth;
     barMaxWidth && (stacks[stackId].maxWidth = barMaxWidth);
+    var barMinWidth = seriesInfo.barMinWidth;
+    barMinWidth && (stacks[stackId].minWidth = barMinWidth);
     var barGap = seriesInfo.barGap;
     barGap != null && (columnsOnAxis.gap = barGap);
     var barCategoryGap = seriesInfo.barCategoryGap;
@@ -199,18 +294,48 @@ function doCalBarWidthAndOffset(seriesInfoList) {
     var autoWidth = (remainedWidth - categoryGap) / (autoWidthCount + (autoWidthCount - 1) * barGapPercent);
     autoWidth = Math.max(autoWidth, 0); // Find if any auto calculated bar exceeded maxBarWidth
 
-    zrUtil.each(stacks, function (column, stack) {
+    zrUtil.each(stacks, function (column) {
       var maxWidth = column.maxWidth;
+      var minWidth = column.minWidth;
+
+      if (!column.width) {
+        var finalWidth = autoWidth;
+
+        if (maxWidth && maxWidth < finalWidth) {
+          finalWidth = Math.min(maxWidth, remainedWidth);
+        } // `minWidth` has higher priority. `minWidth` decide that wheter the
+        // bar is able to be visible. So `minWidth` should not be restricted
+        // by `maxWidth` or `remainedWidth` (which is from `bandWidth`). In
+        // the extreme cases for `value` axis, bars are allowed to overlap
+        // with each other if `minWidth` specified.
+
+
+        if (minWidth && minWidth > finalWidth) {
+          finalWidth = minWidth;
+        }
+
+        if (finalWidth !== autoWidth) {
+          column.width = finalWidth;
+          remainedWidth -= finalWidth + barGapPercent * finalWidth;
+          autoWidthCount--;
+        }
+      } else {
+        // `barMinWidth/barMaxWidth` has higher priority than `barWidth`, as
+        // CSS does. Becuase barWidth can be a percent value, where
+        // `barMaxWidth` can be used to restrict the final width.
+        var finalWidth = column.width;
+
+        if (maxWidth) {
+          finalWidth = Math.min(finalWidth, maxWidth);
+        } // `minWidth` has higher priority, as described above
 
-      if (maxWidth && maxWidth < autoWidth) {
-        maxWidth = Math.min(maxWidth, remainedWidth);
 
-        if (column.width) {
-          maxWidth = Math.min(maxWidth, column.width);
+        if (minWidth) {
+          finalWidth = Math.max(finalWidth, minWidth);
         }
 
-        remainedWidth -= maxWidth;
-        column.width = maxWidth;
+        column.width = finalWidth;
+        remainedWidth -= finalWidth + barGapPercent * finalWidth;
         autoWidthCount--;
       }
     }); // Recalculate width again
@@ -438,7 +563,7 @@ function isInLargeMode(seriesModel) {
 
 
 function getValueAxisStart(baseAxis, valueAxis, stacked) {
-  return valueAxis.toGlobalCoord(valueAxis.dataToCoord(0));
+  return valueAxis.toGlobalCoord(valueAxis.dataToCoord(valueAxis.type === 'log' ? 1 : 0));
 }
 
 exports.getLayoutOnAxis = getLayoutOnAxis;

package/lib/layout/barPolar.js

@@ -90,6 +90,7 @@ function barLayoutPolar(seriesType, ecModel, api) {
     var stacked = isDimensionStacked(data, valueDim
     /*, baseDim*/
     );
+    var clampLayout = baseAxis.dim !== 'radius' || !seriesModel.get('roundCap', true);
     var valueAxisStart = valueAxis.getExtent()[0];
 
     for (var idx = 0, len = data.count(); idx < len; idx++) {
@@ -139,8 +140,7 @@ function barLayoutPolar(seriesType, ecModel, api) {
         stacked && (lastStackCoords[stackId][baseValue][sign] = r);
       } // tangential sector
       else {
-          // angleAxis must be clamped.
-          var angleSpan = valueAxis.dataToAngle(value, true) - valueAxisStart;
+          var angleSpan = valueAxis.dataToAngle(value, clampLayout) - valueAxisStart;
           var radius = baseAxis.dataToRadius(baseValue);
 
           if (Math.abs(angleSpan) < barMinAngle) {

package/lib/model/Global.js

@@ -222,7 +222,7 @@ var GlobalModel = Model.extend({
         } else {
           var ComponentModelClass = ComponentModel.getClass(mainType, resultItem.keyInfo.subType, true);
 
-          if (componentModel && componentModel instanceof ComponentModelClass) {
+          if (componentModel && componentModel.constructor === ComponentModelClass) {
             componentModel.name = resultItem.keyInfo.name; // componentModel.settingTask && componentModel.settingTask.dirty();
 
             componentModel.mergeOption(newCptOption, this);

package/lib/model/Series.js

@@ -95,11 +95,11 @@ var SeriesModel = ComponentModel.extend({
   defaultOption: null,
 
   /**
-   * Data provided for legend
-   * @type {Function}
+   * legend visual provider to the legend component
+   * @type {Object}
    */
   // PENDING
-  legendDataProvider: null,
+  legendVisualProvider: null,
 
   /**
    * Access path of color for visual

package/lib/model/referHelper.js

@@ -56,7 +56,8 @@ var each = _util.each;
 // check: "modelHelper" of tooltip and "BrushTargetManager".
 
 /**
- * @return {Object} For example:
+ * @class
+ * For example:
  * {
  *     coordSysName: 'cartesian2d',
  *     coordSysDims: ['x', 'y', ...],
@@ -68,19 +69,46 @@ var each = _util.each;
  *         x: xAxisModel,
  *         y: undefined
  *     }),
- *     // It also indicate that whether there is category axis.
+ *     // The index of the first category axis in `coordSysDims`.
+ *     // `null/undefined` means no category axis exists.
  *     firstCategoryDimIndex: 1,
  *     // To replace user specified encode.
  * }
  */
-function getCoordSysDefineBySeries(seriesModel) {
+function CoordSysInfo(coordSysName) {
+  /**
+   * @type {string}
+   */
+  this.coordSysName = coordSysName;
+  /**
+   * @type {Array.<string>}
+   */
+
+  this.coordSysDims = [];
+  /**
+   * @type {module:zrender/core/util#HashMap}
+   */
+
+  this.axisMap = createHashMap();
+  /**
+   * @type {module:zrender/core/util#HashMap}
+   */
+
+  this.categoryAxisMap = createHashMap();
+  /**
+   * @type {number}
+   */
+
+  this.firstCategoryDimIndex = null;
+}
+/**
+ * @return {module:model/referHelper#CoordSysInfo}
+ */
+
+
+function getCoordSysInfoBySeries(seriesModel) {
   var coordSysName = seriesModel.get('coordinateSystem');
-  var result = {
-    coordSysName: coordSysName,
-    coordSysDims: [],
-    axisMap: createHashMap(),
-    categoryAxisMap: createHashMap()
-  };
+  var result = new CoordSysInfo(coordSysName);
   var fetch = fetchers[coordSysName];
 
   if (fetch) {
@@ -104,7 +132,7 @@ var fetchers = {
 
     if (isCategory(yAxisModel)) {
       categoryAxisMap.set('y', yAxisModel);
-      result.firstCategoryDimIndex = 1;
+      result.firstCategoryDimIndex == null & (result.firstCategoryDimIndex = 1);
     }
   },
   singleAxis: function (seriesModel, result, axisMap, categoryAxisMap) {
@@ -132,7 +160,7 @@ var fetchers = {
 
     if (isCategory(angleAxisModel)) {
       categoryAxisMap.set('angle', angleAxisModel);
-      result.firstCategoryDimIndex = 1;
+      result.firstCategoryDimIndex == null && (result.firstCategoryDimIndex = 1);
     }
   },
   geo: function (seriesModel, result, axisMap, categoryAxisMap) {
@@ -159,4 +187,4 @@ function isCategory(axisModel) {
   return axisModel.get('type') === 'category';
 }
 
-exports.getCoordSysDefineBySeries = getCoordSysDefineBySeries;
+exports.getCoordSysInfoBySeries = getCoordSysInfoBySeries;

package/lib/scale/Interval.js

@@ -97,10 +97,95 @@ var IntervalScale = Scale.extend({
   },
 
   /**
+   * @param {boolean} [expandToNicedExtent=false] If expand the ticks to niced extent.
    * @return {Array.<number>}
    */
-  getTicks: function () {
-    return helper.intervalScaleGetTicks(this._interval, this._extent, this._niceExtent, this._intervalPrecision);
+  getTicks: function (expandToNicedExtent) {
+    var interval = this._interval;
+    var extent = this._extent;
+    var niceTickExtent = this._niceExtent;
+    var intervalPrecision = this._intervalPrecision;
+    var ticks = []; // If interval is 0, return [];
+
+    if (!interval) {
+      return ticks;
+    } // Consider this case: using dataZoom toolbox, zoom and zoom.
+
+
+    var safeLimit = 10000;
+
+    if (extent[0] < niceTickExtent[0]) {
+      if (expandToNicedExtent) {
+        ticks.push(roundNumber(niceTickExtent[0] - interval));
+      } else {
+        ticks.push(extent[0]);
+      }
+    }
+
+    var tick = niceTickExtent[0];
+
+    while (tick <= niceTickExtent[1]) {
+      ticks.push(tick); // Avoid rounding error
+
+      tick = roundNumber(tick + interval, intervalPrecision);
+
+      if (tick === ticks[ticks.length - 1]) {
+        // Consider out of safe float point, e.g.,
+        // -3711126.9907707 + 2e-10 === -3711126.9907707
+        break;
+      }
+
+      if (ticks.length > safeLimit) {
+        return [];
+      }
+    } // Consider this case: the last item of ticks is smaller
+    // than niceTickExtent[1] and niceTickExtent[1] === extent[1].
+
+
+    var lastNiceTick = ticks.length ? ticks[ticks.length - 1] : niceTickExtent[1];
+
+    if (extent[1] > lastNiceTick) {
+      if (expandToNicedExtent) {
+        ticks.push(lastNiceTick + interval);
+      } else {
+        ticks.push(extent[1]);
+      }
+    }
+
+    return ticks;
+  },
+
+  /**
+   * @param {number} [splitNumber=5]
+   * @return {Array.<Array.<number>>}
+   */
+  getMinorTicks: function (splitNumber) {
+    var ticks = this.getTicks(true);
+    var minorTicks = [];
+    var extent = this.getExtent();
+
+    for (var i = 1; i < ticks.length; i++) {
+      var nextTick = ticks[i];
+      var prevTick = ticks[i - 1];
+      var count = 0;
+      var minorTicksGroup = [];
+      var interval = nextTick - prevTick;
+      var minorInterval = interval / splitNumber;
+
+      while (count < splitNumber - 1) {
+        var minorTick = numberUtil.round(prevTick + (count + 1) * minorInterval); // For the first and last interval. The count may be less than splitNumber.
+
+        if (minorTick > extent[0] && minorTick < extent[1]) {
+          minorTicksGroup.push(minorTick);
+        }
+
+        count++;
+      }
+
+      minorTicks.push(minorTicksGroup);
+    }
+
+    return minorTicks;
   },
 
   /**

package/lib/scale/Log.js

@@ -67,13 +67,14 @@ var LogScale = Scale.extend({
   },
 
   /**
+   * @param {boolean} [expandToNicedExtent=false] If expand the ticks to niced extent.
    * @return {Array.<number>}
    */
-  getTicks: function () {
+  getTicks: function (expandToNicedExtent) {
     var originalScale = this._originalScale;
     var extent = this._extent;
     var originalExtent = originalScale.getExtent();
-    return zrUtil.map(intervalScaleProto.getTicks.call(this), function (val) {
+    return zrUtil.map(intervalScaleProto.getTicks.call(this, expandToNicedExtent), function (val) {
       var powVal = numberUtil.round(mathPow(this.base, val)); // Fix #4158
 
       powVal = val === extent[0] && originalScale.__fixMin ? fixRoundingError(powVal, originalExtent[0]) : powVal;
@@ -82,6 +83,12 @@ var LogScale = Scale.extend({
     }, this);
   },
 
+  /**
+   * @param {number} splitNumber
+   * @return {Array.<Array.<number>>}
+   */
+  getMinorTicks: intervalScaleProto.getMinorTicks,
+
   /**
    * @param {number} val
    * @return {string}

package/lib/scale/helper.js

@@ -99,48 +99,6 @@ function fixExtent(niceTickExtent, extent) {
   }
 }
 
-function intervalScaleGetTicks(interval, extent, niceTickExtent, intervalPrecision) {
-  var ticks = []; // If interval is 0, return [];
-
-  if (!interval) {
-    return ticks;
-  } // Consider this case: using dataZoom toolbox, zoom and zoom.
-
-
-  var safeLimit = 10000;
-
-  if (extent[0] < niceTickExtent[0]) {
-    ticks.push(extent[0]);
-  }
-
-  var tick = niceTickExtent[0];
-
-  while (tick <= niceTickExtent[1]) {
-    ticks.push(tick); // Avoid rounding error
-
-    tick = roundNumber(tick + interval, intervalPrecision);
-
-    if (tick === ticks[ticks.length - 1]) {
-      // Consider out of safe float point, e.g.,
-      // -3711126.9907707 + 2e-10 === -3711126.9907707
-      break;
-    }
-
-    if (ticks.length > safeLimit) {
-      return [];
-    }
-  } // Consider this case: the last item of ticks is smaller
-  // than niceTickExtent[1] and niceTickExtent[1] === extent[1].
-
-
-  if (extent[1] > (ticks.length ? ticks[ticks.length - 1] : niceTickExtent[1])) {
-    ticks.push(extent[1]);
-  }
-
-  return ticks;
-}
-
 exports.intervalScaleNiceTicks = intervalScaleNiceTicks;
 exports.getIntervalPrecision = getIntervalPrecision;
-exports.fixExtent = fixExtent;
-exports.intervalScaleGetTicks = intervalScaleGetTicks;
+exports.fixExtent = fixExtent;

package/lib/theme/dark.js

@@ -80,6 +80,9 @@ var theme = {
       },
       crossStyle: {
         color: contrastColor
+      },
+      label: {
+        color: '#000'
       }
     }
   },

package/lib/util/graphic.js

@@ -1125,8 +1125,7 @@ function rollbackDefaultTextStyle(style) {
 }
 
 function getFont(opt, ecModel) {
-  // ecModel or default text style model.
-  var gTextStyleModel = ecModel || ecModel.getModel('textStyle');
+  var gTextStyleModel = ecModel && ecModel.getModel('textStyle');
   return zrUtil.trim([// FIXME in node-canvas fontWeight is before fontStyle
   opt.fontStyle || gTextStyleModel && gTextStyleModel.getShallow('fontStyle') || '', opt.fontWeight || gTextStyleModel && gTextStyleModel.getShallow('fontWeight') || '', (opt.fontSize || gTextStyleModel && gTextStyleModel.getShallow('fontSize') || 12) + 'px', opt.fontFamily || gTextStyleModel && gTextStyleModel.getShallow('fontFamily') || 'sans-serif'].join(' '));
 }

package/lib/util/number.js

@@ -401,9 +401,32 @@ function parseDate(value) {
 function quantity(val) {
   return Math.pow(10, quantityExponent(val));
 }
+/**
+ * Exponent of the quantity of a number
+ * e.g., 1234 equals to 1.234*10^3, so quantityExponent(1234) is 3
+ *
+ * @param  {number} val non-negative value
+ * @return {number}
+ */
+
 
 function quantityExponent(val) {
-  return Math.floor(Math.log(val) / Math.LN10);
+  if (val === 0) {
+    return 0;
+  }
+
+  var exp = Math.floor(Math.log(val) / Math.LN10);
+  /**
+   * exp is expected to be the rounded-down result of the base-10 log of val.
+   * But due to the precision loss with Math.log(val), we need to restore it
+   * using 10^exp to make sure we can get val back from exp. #11249
+   */
+
+  if (val / Math.pow(10, exp) >= 10) {
+    exp++;
+  }
+
+  return exp;
 }
 /**
  * find a “nice” number approximately equal to x. Round the number if round = true,
@@ -556,6 +579,7 @@ exports.remRadian = remRadian;
 exports.isRadianAroundZero = isRadianAroundZero;
 exports.parseDate = parseDate;
 exports.quantity = quantity;
+exports.quantityExponent = quantityExponent;
 exports.nice = nice;
 exports.quantile = quantile;
 exports.reformIntervals = reformIntervals;

package/lib/util/shape/sausage.js

@@ -0,0 +1,93 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var _graphic = require("../graphic");
+
+var extendShape = _graphic.extendShape;
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Sausage: similar to sector, but have half circle on both sides
+ * @public
+ */
+var _default = extendShape({
+  type: 'sausage',
+  shape: {
+    cx: 0,
+    cy: 0,
+    r0: 0,
+    r: 0,
+    startAngle: 0,
+    endAngle: Math.PI * 2,
+    clockwise: true
+  },
+  buildPath: function (ctx, shape) {
+    var x = shape.cx;
+    var y = shape.cy;
+    var r0 = Math.max(shape.r0 || 0, 0);
+    var r = Math.max(shape.r, 0);
+    var dr = (r - r0) * 0.5;
+    var rCenter = r0 + dr;
+    var startAngle = shape.startAngle;
+    var endAngle = shape.endAngle;
+    var clockwise = shape.clockwise;
+    var unitStartX = Math.cos(startAngle);
+    var unitStartY = Math.sin(startAngle);
+    var unitEndX = Math.cos(endAngle);
+    var unitEndY = Math.sin(endAngle);
+    var lessThanCircle = clockwise ? endAngle - startAngle < Math.PI * 2 : startAngle - endAngle < Math.PI * 2;
+
+    if (lessThanCircle) {
+      ctx.moveTo(unitStartX * r0 + x, unitStartY * r0 + y);
+      ctx.arc(unitStartX * rCenter + x, unitStartY * rCenter + y, dr, -Math.PI + startAngle, startAngle, !clockwise);
+    }
+
+    ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
+    ctx.moveTo(unitEndX * r + x, unitEndY * r + y);
+    ctx.arc(unitEndX * rCenter + x, unitEndY * rCenter + y, dr, endAngle - Math.PI * 2, endAngle - Math.PI, !clockwise);
+
+    if (r0 !== 0) {
+      ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
+      ctx.moveTo(unitStartX * r0 + x, unitEndY * r0 + y);
+    }
+
+    ctx.closePath();
+  }
+});
+
+module.exports = _default;