chartist 1.1.3 → 1.2.1

package/dist/index.cjs

@@ -247,12 +247,13 @@ function extend() {
  * @return The same value that was provided to the n parameter
  */ const noop = (n)=>n
 ;
-/**
- * Functional style helper to produce array with given length initialized with undefined values
- */ const times = (length)=>Array.from({
+function times(length, filler) {
+    return Array.from({
         length
-    })
-;
+    }, filler ? (_, i)=>filler(i)
+     : ()=>void 0
+    );
+}
 /**
  * Sum helper to be used in reduce functions
  */ const sum = (previous, current)=>previous + (current ? current : 0)
@@ -262,7 +263,7 @@ function extend() {
  *
  * For example:
  * @example
- * ```javascript
+ * ```ts
  * const data = [[1, 2], [3], []];
  * serialMap(data, cb);
  *
@@ -271,7 +272,7 @@ function extend() {
  * // 2. call arguments: (2, undefined, undefined)
  * ```
  */ const serialMap = (array, callback)=>times(Math.max(...array.map((element)=>element.length
-    ))).map((_inner, index)=>callback(...array.map((element)=>element[index]
+    )), (index)=>callback(...array.map((element)=>element[index]
         ))
     )
 ;
@@ -298,6 +299,14 @@ function getNumberOrUndefined(value) {
     }
     return data.every(Array.isArray);
 }
+/**
+ * Loop over array.
+ */ function each(list, callback) {
+    let reverse = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+    let index = 0;
+    list[reverse ? "reduceRight" : "reduce"]((_, item, itemIndex)=>callback(item, index++, itemIndex)
+    , void 0);
+}
 
 /**
  * Get meta data of a specific value in a series.
@@ -402,22 +411,25 @@ function normalizeData(data) {
     let reverse = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, multi = arguments.length > 2 ? arguments[2] : void 0, distributed = arguments.length > 3 ? arguments[3] : void 0;
     let labelCount;
     const normalized = {
-        labels: [],
+        labels: (data.labels || []).slice(),
         series: normalizeSeries(data.series, multi, distributed)
     };
+    const inputLabelCount = normalized.labels.length;
     // If all elements of the normalized data array are arrays we're dealing with
     // multi series data and we need to find the largest series if they are un-even
     if (isArrayOfArrays(normalized.series)) {
         // Getting the series with the the most elements
-        labelCount = Math.max(...normalized.series.map((series)=>series.length
+        labelCount = Math.max(inputLabelCount, ...normalized.series.map((series)=>series.length
         ));
+        normalized.series.forEach((series)=>{
+            series.push(...times(Math.max(0, labelCount - series.length)));
+        });
     } else {
         // We're dealing with Pie data so we just take the normalized array length
         labelCount = normalized.series.length;
     }
-    normalized.labels = (data.labels || []).slice();
     // Padding the labels to labelCount with empty strings
-    normalized.labels.push(...times(Math.max(0, labelCount - normalized.labels.length)).map(()=>""
+    normalized.labels.push(...times(Math.max(0, labelCount - inputLabelCount), ()=>""
     ));
     if (reverse) {
         reverseData(normalized);
@@ -1612,7 +1624,7 @@ class SvgPath {
    * @return The current path object for easy call chaining.
    */ parse(path) {
         // Parsing the SVG path string into an array of arrays [['M', '10', '10'], ['L', '100', '100']]
-        const chunks = path.replace(/([A-Za-z])([0-9])/g, "$1 $2").replace(/([0-9])([A-Za-z])/g, "$1 $2").split(/[\s,]+/).reduce((result, pathElement)=>{
+        const chunks = path.replace(/([A-Za-z])(-?[0-9])/g, "$1 $2").replace(/([0-9])([A-Za-z])/g, "$1 $2").split(/[\s,]+/).reduce((result, pathElement)=>{
             if (pathElement.match(/[A-Za-z]/)) {
                 result.push([]);
             }
@@ -1744,6 +1756,7 @@ class SvgPath {
  * This interpolation function does not smooth the path and the result is only containing lines and no curves.
  *
  * @example
+ * ```ts
  * const chart = new LineChart('.ct-chart', {
  *   labels: [1, 2, 3, 4, 5],
  *   series: [[1, 2, 8, 1, 7]]
@@ -1752,6 +1765,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  */ function none(options) {
     const finalOptions = {
         fillHoles: false,
@@ -1787,6 +1801,7 @@ class SvgPath {
  * All smoothing functions within Chartist are factory functions that accept an options parameter. The simple interpolation function accepts one configuration parameter `divisor`, between 1 and ∞, which controls the smoothing characteristics.
  *
  * @example
+ * ```ts
  * const chart = new LineChart('.ct-chart', {
  *   labels: [1, 2, 3, 4, 5],
  *   series: [[1, 2, 8, 1, 7]]
@@ -1796,6 +1811,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  *
  * @param options The options of the simple interpolation factory function.
  */ function simple(options) {
@@ -1839,7 +1855,8 @@ class SvgPath {
  * All smoothing functions within Chartist are factory functions that accept an options parameter. The step interpolation function accepts one configuration parameter `postpone`, that can be `true` or `false`. The default value is `true` and will cause the step to occur where the value actually changes. If a different behaviour is needed where the step is shifted to the left and happens before the actual value, this option can be set to `false`.
  *
  * @example
- * var chart = new Chartist.Line('.ct-chart', {
+ * ```ts
+ * const chart = new Chartist.Line('.ct-chart', {
  *   labels: [1, 2, 3, 4, 5],
  *   series: [[1, 2, 8, 1, 7]]
  * }, {
@@ -1848,6 +1865,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  */ function step(options) {
     const finalOptions = {
         postpone: true,
@@ -1898,6 +1916,7 @@ class SvgPath {
  * All smoothing functions within Chartist are factory functions that accept an options parameter. The cardinal interpolation function accepts one configuration parameter `tension`, between 0 and 1, which controls the smoothing intensity.
  *
  * @example
+ * ```ts
  * const chart = new LineChart('.ct-chart', {
  *   labels: [1, 2, 3, 4, 5],
  *   series: [[1, 2, 8, 1, 7]]
@@ -1907,6 +1926,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  *
  * @param options The options of the cardinal factory function.
  */ function cardinal(options) {
@@ -1990,6 +2010,7 @@ class SvgPath {
  * All smoothing functions within Chartist are factory functions that accept an options parameter.
  *
  * @example
+ * ```ts
  * const chart = new LineChart('.ct-chart', {
  *   labels: [1, 2, 3, 4, 5],
  *   series: [[1, 2, 8, 1, 7]]
@@ -1998,6 +2019,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  *
  * @param options The options of the monotoneCubic factory function.
  */ function monotoneCubic(options) {
@@ -2381,7 +2403,7 @@ class FixedScaleAxis extends Axis {
     constructor(axisUnit, data, chartRect, options){
         const highLow = options.highLow || getHighLow(data, options, axisUnit.pos);
         const divisor = options.divisor || 1;
-        const ticks = (options.ticks || times(divisor).map((_value, index)=>highLow.low + (highLow.high - highLow.low) / divisor * index
+        const ticks = (options.ticks || times(divisor, (index)=>highLow.low + (highLow.high - highLow.low) / divisor * index
         )).sort((a, b)=>Number(a) - Number(b)
         );
         const range = {
@@ -2555,7 +2577,7 @@ class LineChart extends BaseChart {
             createGridBackground(gridGroup, chartRect, options.classNames.gridBackground, this.eventEmitter);
         }
         // Draw the series
-        data.series.forEach((series, seriesIndex)=>{
+        each(data.series, (series, seriesIndex)=>{
             const seriesElement = seriesGroup.elem("g");
             const seriesName = safeHasProperty(series, "name") && series.name;
             const seriesClassName = safeHasProperty(series, "className") && series.className;
@@ -2715,7 +2737,7 @@ class LineChart extends BaseChart {
                     });
                 });
             }
-        });
+        }, options.reverseData);
         this.eventEmitter.emit("created", {
             chartRect,
             axisX,
@@ -2733,6 +2755,7 @@ class LineChart extends BaseChart {
    * @return An object which exposes the API for the created chart
    *
    * @example
+   * ```ts
    * // Create a simple line chart
    * const data = {
    *   // A labels array that can contain any sort of values
@@ -2751,8 +2774,10 @@ class LineChart extends BaseChart {
    *
    * // In the global name space Chartist we call the Line function to initialize a line chart. As a first parameter we pass in a selector where we would like to get our chart created. Second parameter is the actual data object and as a third parameter we pass in our options
    * new LineChart('.ct-chart', data, options);
+   * ```
    *
    * @example
+   * ```ts
    * // Use specific interpolation function with configuration from the Chartist.Interpolation module
    *
    * const chart = new LineChart('.ct-chart', {
@@ -2765,8 +2790,10 @@ class LineChart extends BaseChart {
    *     tension: 0.2
    *   })
    * });
+   * ```
    *
    * @example
+   * ```ts
    * // Create a line chart with responsive options
    *
    * const data = {
@@ -2801,7 +2828,7 @@ class LineChart extends BaseChart {
    * ];
    *
    * new LineChart('.ct-chart', data, null, responsiveOptions);
-   *
+   * ```
    */ constructor(query, data, options, responsiveOptions){
         super(query, data, defaultOptions$2, extend({}, defaultOptions$2, options), responsiveOptions);
         this.data = data;
@@ -3010,7 +3037,7 @@ class BarChart extends BaseChart {
             createGridBackground(gridGroup, chartRect, options.classNames.gridBackground, this.eventEmitter);
         }
         // Draw the series
-        data.series.forEach((series, seriesIndex)=>{
+        each(data.series, (series, seriesIndex)=>{
             // Calculating bi-polar value of index for seriesOffset. For i = 0..4 biPol will be -1.5, -0.5, 0.5, 1.5 etc.
             const biPol = seriesIndex - (data.series.length - 1) / 2;
             // Half of the period width between vertical grid lines used to position bars
@@ -3142,7 +3169,7 @@ class BarChart extends BaseChart {
                     ...positions
                 });
             });
-        });
+        }, options.reverseData);
         this.eventEmitter.emit("created", {
             chartRect,
             axisX,
@@ -3160,6 +3187,7 @@ class BarChart extends BaseChart {
    * @return An object which exposes the API for the created chart
    *
    * @example
+   * ```ts
    * // Create a simple bar chart
    * const data = {
    *   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
@@ -3170,8 +3198,10 @@ class BarChart extends BaseChart {
    *
    * // In the global name space Chartist we call the Bar function to initialize a bar chart. As a first parameter we pass in a selector where we would like to get our chart created and as a second parameter we pass our data object.
    * new BarChart('.ct-chart', data);
+   * ```
    *
    * @example
+   * ```ts
    * // This example creates a bipolar grouped bar chart where the boundaries are limitted to -10 and 10
    * new BarChart('.ct-chart', {
    *   labels: [1, 2, 3, 4, 5, 6, 7],
@@ -3184,7 +3214,7 @@ class BarChart extends BaseChart {
    *   low: -10,
    *   high: 10
    * });
-   *
+   * ```
    */ constructor(query, data, options, responsiveOptions){
         super(query, data, defaultOptions$1, extend({}, defaultOptions$1, options), responsiveOptions);
         this.data = data;
@@ -3228,8 +3258,6 @@ class BarChart extends BaseChart {
     labelInterpolationFnc: noop,
     // 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 the whole data is reversed including labels, the series order as well as the whole series data arrays.
-    reverseData: false,
     // If true empty values will be ignored to avoid drawing unnecessary slices and labels
     ignoreEmptyValues: false
 };
@@ -3435,20 +3463,25 @@ class PieChart extends BaseChart {
    * @param responsiveOptions Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]
    *
    * @example
+   * ```ts
    * // Simple pie chart example with four series
    * new PieChart('.ct-chart', {
    *   series: [10, 2, 4, 3]
    * });
+   * ```
    *
    * @example
+   * ```ts
    * // Drawing a donut chart
    * new PieChart('.ct-chart', {
    *   series: [10, 2, 4, 3]
    * }, {
    *   donut: true
    * });
+   * ```
    *
    * @example
+   * ```ts
    * // Using donut, startAngle and total to draw a gauge chart
    * new PieChart('.ct-chart', {
    *   series: [20, 10, 30, 40]
@@ -3458,8 +3491,10 @@ class PieChart extends BaseChart {
    *   startAngle: 270,
    *   total: 200
    * });
+   * ```
    *
    * @example
+   * ```ts
    * // Drawing a pie chart with padding and labels that are outside the pie
    * new PieChart('.ct-chart', {
    *   series: [20, 10, 30, 40]
@@ -3468,8 +3503,10 @@ class PieChart extends BaseChart {
    *   labelOffset: 50,
    *   labelDirection: 'explode'
    * });
+   * ```
    *
    * @example
+   * ```ts
    * // Overriding the class names for individual series as well as a name and meta data.
    * // The name will be written as ct:series-name attribute and the meta data will be serialized and written
    * // to a ct:meta attribute.
@@ -3491,6 +3528,7 @@ class PieChart extends BaseChart {
    *     meta: 'Meta Three'
    *   }]
    * });
+   * ```
    */ constructor(query, data, options, responsiveOptions){
         super(query, data, defaultOptions, extend({}, defaultOptions, options), responsiveOptions);
         this.data = data;
@@ -3520,6 +3558,7 @@ exports.createLabel = createLabel;
 exports.createSvg = createSvg;
 exports.deserialize = deserialize;
 exports.determineAnchorPosition = determineAnchorPosition;
+exports.each = each;
 exports.easings = easings;
 exports.ensureUnit = ensureUnit;
 exports.escapingMap = escapingMap;