chartist 1.3.0 → 1.4.0

package/dist/index.js

@@ -225,7 +225,11 @@ function extend() {
     }
     for(let i = 0; i < sources.length; i++){
         const source = sources[i];
+        const targetProto = Object.getPrototypeOf(target);
         for(const prop in source){
+            if (targetProto !== null && prop in targetProto) {
+                continue; // prevent prototype pollution
+            }
             const sourceProp = source[prop];
             if (typeof sourceProp === "object" && sourceProp !== null && !(sourceProp instanceof Array)) {
                 target[prop] = extend(target[prop], sourceProp);
@@ -1123,16 +1127,16 @@ function createAnimation(element, attribute, animationDefinition) {
         return this;
     }
     /**
-   * Get element height using `getBoundingClientRect`
+   * Get element height using `clientHeight`
    * @return The elements height in pixels
    */ height() {
-        return this._node.getBoundingClientRect().height;
+        return this._node.clientHeight;
     }
     /**
-   * Get element width using `getBoundingClientRect`
+   * Get element width using `clientWidth`
    * @return The elements width in pixels
    */ width() {
-        return this._node.getBoundingClientRect().width;
+        return this._node.clientWidth;
     }
     /**
    * The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes. Please refer to http://www.w3.org/TR/SVG/animate.html for a detailed specification about the available animation attributes. Additionally an easing property can be passed in the animation definition object. This can be a string with a name of an easing function in `Svg.Easing` or an array with four numbers specifying a cubic Bézier curve.
@@ -1234,6 +1238,9 @@ function createAnimation(element, attribute, animationDefinition) {
  * @return The created/reinitialized SVG element
  */ function createSvg(container) {
     let width = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "100%", height = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "100%", className = arguments.length > 3 ? arguments[3] : void 0;
+    if (!container) {
+        throw new Error("Container element is not found");
+    }
     // Check if there is a previous SVG element in the container that contains the Chartist XML namespace and remove it
     // Since the DOM API does not support namespaces we need to manually search the returned list http://www.w3.org/TR/selectors-api/
     Array.from(container.querySelectorAll("svg")).filter((svg)=>svg.getAttributeNS(namespaces.xmlns, "ct")
@@ -1417,7 +1424,7 @@ function createAnimation(element, attribute, animationDefinition) {
             responsiveOptions.forEach((responsiveOption)=>{
                 const mql = window.matchMedia(responsiveOption[0]);
                 if (mql.matches) {
-                    currentOptions = extend(currentOptions, responsiveOption[1]);
+                    currentOptions = extend({}, currentOptions, responsiveOption[1]);
                 }
             });
         }
@@ -2266,7 +2273,7 @@ class BaseChart {
         , 0);
         const container = typeof query === "string" ? document.querySelector(query) : query;
         if (!container) {
-            throw new Error("Target element is not found");
+            throw new Error("Target element ".concat(typeof query === "string" ? '"'.concat(query, '"') : "", " is not found"));
         }
         this.container = container;
         const prevInstance = instances.get(container);
@@ -3266,7 +3273,9 @@ class BarChart extends BaseChart {
     // Label direction can be 'neutral', 'explode' or 'implode'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center.
     labelDirection: "neutral",
     // If true empty values will be ignored to avoid drawing unnecessary slices and labels
-    ignoreEmptyValues: false
+    ignoreEmptyValues: false,
+    // If Nonzero check if a label has overlapping text then move it the number of pixels up and left (Should be half of label font size + 1 but you can tweak it as you prefer)
+    preventOverlappingLabelOffset: 0
 };
 /**
  * Determines SVG anchor position based on direction and center parameter
@@ -3282,6 +3291,19 @@ class BarChart extends BaseChart {
 }
 class PieChart extends BaseChart {
     /**
+   * Check if a label has overlapping text then move it the number of pixels up and left based on textSize.
+   * @param labelPos - Label position that chartist will be checking does not overlap with the list of LabelPositions.
+   * @param existingLabelPos - Label position that has already been placed that chartist will check against.
+   * @param textOffset - this is configured with preventOverlappingLabelOffset option.
+   * @param length - How many characters long the label is.
+   */ moveLabel(labelPos, existingLabelPos, textOffset, length) {
+        if (labelPos.y > existingLabelPos.y - textOffset && labelPos.y < existingLabelPos.y + textOffset && labelPos.x > existingLabelPos.x - length * textOffset && labelPos.x < existingLabelPos.x + length * textOffset) {
+            labelPos.y -= textOffset;
+            labelPos.x -= textOffset;
+            this.moveLabel(labelPos, existingLabelPos, textOffset, length);
+        }
+    }
+    /**
    * Creates the pie chart
    *
    * @param options
@@ -3290,6 +3312,7 @@ class PieChart extends BaseChart {
         const normalizedData = normalizeData(data);
         const seriesGroups = [];
         let labelsGroup;
+        const labelPositions = [];
         let labelRadius;
         let startAngle = options.startAngle;
         // Create SVG.js draw
@@ -3433,6 +3456,14 @@ class PieChart extends BaseChart {
                 }
                 const interpolatedValue = options.labelInterpolationFnc(rawValue, index);
                 if (interpolatedValue || interpolatedValue === 0) {
+                    if (options.preventOverlappingLabelOffset) {
+                        const textOffset = options.preventOverlappingLabelOffset;
+                        const length = String(normalizedData.labels[index]).length;
+                        labelPositions.forEach((item)=>{
+                            this.moveLabel(labelPosition, item, textOffset, length);
+                        });
+                        labelPositions.push(labelPosition);
+                    }
                     const labelElement = labelsGroup.elem("text", {
                         dx: labelPosition.x,
                         dy: labelPosition.y,