chartist 1.1.2 → 1.2.0

package/dist/index.cjs

@@ -262,7 +262,7 @@ function extend() {
  *
  * For example:
  * @example
- * ```javascript
+ * ```ts
  * const data = [[1, 2], [3], []];
  * serialMap(data, cb);
  *
@@ -1612,7 +1612,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 +1744,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 +1753,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  */ function none(options) {
     const finalOptions = {
         fillHoles: false,
@@ -1787,6 +1789,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 +1799,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  *
  * @param options The options of the simple interpolation factory function.
  */ function simple(options) {
@@ -1839,7 +1843,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 +1853,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  */ function step(options) {
     const finalOptions = {
         postpone: true,
@@ -1898,6 +1904,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 +1914,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  *
  * @param options The options of the cardinal factory function.
  */ function cardinal(options) {
@@ -1990,6 +1998,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 +2007,7 @@ class SvgPath {
  *     fillHoles: false
  *   })
  * });
+ * ```
  *
  * @param options The options of the monotoneCubic factory function.
  */ function monotoneCubic(options) {
@@ -2300,7 +2310,7 @@ class Axis {
                 // If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to
                 // on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will
                 // still be visible inside of the chart padding.
-                labelLength = Math.max(this.axisLength - projectedValue, 30);
+                labelLength = Math.max(this.axisLength - projectedValue, this.axisLength / this.ticks.length);
             }
             // Skip grid lines and labels where interpolated label values are falsey (except for 0)
             if (labelValue !== "" && isFalseyButZero(labelValue)) {
@@ -2733,6 +2743,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 +2762,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 +2778,10 @@ class LineChart extends BaseChart {
    *     tension: 0.2
    *   })
    * });
+   * ```
    *
    * @example
+   * ```ts
    * // Create a line chart with responsive options
    *
    * const data = {
@@ -2801,7 +2816,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;
@@ -3160,6 +3175,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 +3186,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 +3202,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;
@@ -3435,20 +3453,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 +3481,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 +3493,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 +3518,7 @@ class PieChart extends BaseChart {
    *     meta: 'Meta Three'
    *   }]
    * });
+   * ```
    */ constructor(query, data, options, responsiveOptions){
         super(query, data, defaultOptions, extend({}, defaultOptions, options), responsiveOptions);
         this.data = data;