Chart.js/src/core/core.js

"use strict";

module.exports = function() {

  var helpers = require('./core.helpers')

  //Occupy the global variable of Chart, and create a simple base class
  var Chart = function(context, config) {
    this.config = config;

    // Support a jQuery'd canvas element
    if (context.length && context[0].getContext) {
      context = context[0];
    }

    // Support a canvas domnode
    if (context.getContext) {
      context = context.getContext("2d");
    }

    this.ctx = context;
    this.canvas = context.canvas;

    // Figure out what the size of the chart will be.
    // If the canvas has a specified width and height, we use those else
    // we look to see if the canvas node has a CSS width and height.
    // If there is still no height, fill the parent container
    this.width = context.canvas.width || parseInt(helpers.getStyle(context.canvas, 'width')) || helpers.getMaximumWidth(context.canvas);
    this.height = context.canvas.height || parseInt(helpers.getStyle(context.canvas, 'height')) || helpers.getMaximumHeight(context.canvas);

    this.aspectRatio = this.width / this.height;

    if (isNaN(this.aspectRatio) || isFinite(this.aspectRatio) === false) {
      // If the canvas has no size, try and figure out what the aspect ratio will be.
      // Some charts prefer square canvases (pie, radar, etc). If that is specified, use that
      // else use the canvas default ratio of 2
      this.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2;
    }

    // Store the original style of the element so we can set it back
    this.originalCanvasStyleWidth = context.canvas.style.width;
    this.originalCanvasStyleHeight = context.canvas.style.height;

    // High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
    helpers.retinaScale(this);

    if (config) {
      this.controller = new Chart.Controller(this);
    }

    // Always bind this so that if the responsive state changes we still work
    var _this = this;
    helpers.addResizeListener(context.canvas.parentNode, function() {
      if (_this.controller && _this.controller.config.options.responsive) {
        _this.controller.resize();
      }
    });

    return this.controller ? this.controller : this;

  };

  //Globally expose the defaults to allow for user updating/changing
  Chart.defaults = {
    global: {
      responsive: true,
      responsiveAnimationDuration: 0,
      maintainAspectRatio: true,
      events: ["mousemove", "mouseout", "click", "touchstart", "touchmove"],
      hover: {
        onHover: null,
        mode: 'single',
        animationDuration: 400,
      },
      onClick: null,
      defaultColor: 'rgba(0,0,0,0.1)',
      defaultFontColor: '#666',
      defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
      defaultFontSize: 12,
      defaultFontStyle: 'normal',
      showLines: true,

      // Element defaults defined in element extensions
      elements: {},

      // Legend callback string
      legendCallback: function(chart) {
        var text = [];
        text.push('<ul class="' + chart.id + '-legend">');
        for (var i = 0; i < chart.data.datasets.length; i++) {
          text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '">');
          if (chart.data.datasets[i].label) {
            text.push(chart.data.datasets[i].label);
          }
          text.push('</span></li>');
        }
        text.push('</ul>');

        return text.join("");
      }
    },
  }

	return Chart

};