chrt-object/dist/chrt-object.esm.js

Universal Object components of Chrt

// chrt-object v0.0.19 Copyright 2020-2024 chrt chrt.io
function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
  return arr2;
}
function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var COMPONENTS_W_DATA = ['chrt', 'series'];

function isNull(value) {
  return value === null || value == null || typeof value === 'undefined';
}
function uuid() {
  return 'c' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
function hasData(obj) {
  return !isNull(obj.type) && COMPONENTS_W_DATA.indexOf(obj.type) > -1;
}
function isInfinity(value) {
  return !isFinite(value);
}
function oppositeSigns(x, y) {
  return (x ^ y) < 0;
}
function getCoords(data) {
  var _this = this;
  if (!(this !== null && this !== void 0 && this.fields)) {
    return [];
  }
  return data.map(function (d) {
    var x = isNull(d[_this.fields.x]) || isInfinity(d[_this.fields.x]) ? null : _this.parentNode.scales.x[_this.scales.x](d[_this.fields.x]);
    var y = isNull(d[_this.fields.y]) || isInfinity(d[_this.fields.y]) ? null : _this.parentNode.scales.y[_this.scales.y](d[_this.fields.y]);
    return [isInfinity(x) ? 0 : x, isInfinity(y) ? 0 : y];
  }); //.filter(d => !isNull(d[0]) && !isNull(d[1]))
}

function create(tag) {
  return document.createElement(tag);
}
function createSVG(tag) {
  return document.createElementNS('http://www.w3.org/2000/svg', tag);
}

function getStrokeStyle(style) {
  var strokeWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
  var strokeLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 4;
  var strokeStyle = null;
  switch (style) {
    case 'dashed':
      strokeStyle = "".concat(strokeWidth * strokeLength, " ").concat(strokeWidth * strokeLength);
      break;
    case 'dotted':
      strokeStyle = "".concat(strokeWidth, " ").concat(strokeWidth);
      break;
    case 'solid':
    default:
      strokeStyle = null;
  }
  return strokeStyle;
}

function add(obj) {
  var prepend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var id = obj._id || uuid();
  // console.log('adding to', this, obj.type, id, obj);
  obj.id(id).parent(this);
  // .render();

  if (prepend) {
    this.objects = [obj].concat(_toConsumableArray(this.objects));
  } else {
    this.objects.push(obj);
  }

  //return this.update();

  return this;
}

// export { add } from '../charts/util'

var index = /*#__PURE__*/Object.freeze({
__proto__: null,
add: add,
create: create,
createSVG: createSVG,
getCoords: getCoords,
getStrokeStyle: getStrokeStyle,
hasData: hasData,
isInfinity: isInfinity,
isNull: isNull,
oppositeSigns: oppositeSigns,
uuid: uuid
});

function render(parent) {
  // console.log('RENDER', this, parent)
  if (this.g) {
    // avoid duplication of g
    return this;
  }
  this.g = createSVG('g');
  if (this._id) {
    this.g.setAttribute('id', this._id);
  }

  // console.log('RENDER', this, this.parentNode)

  if (hasData(this)) {
    // series
    // in case of group or stack we want the chart to be added to svg g of the group/stack
    if (parent) {
      // if it's a stack we want the order of the charts in the dom to be opposite, so the stroke
      // of the charts below is not covered by the area above
      if (parent.type === 'stack' || parent.group === 'group') {
        parent.g.prepend(this.g);
      } else {
        parent.g.append(this.g);
      }
    } else {
      this.currentNode.append(this.g);
    }
  } else {
    //   const grid = (this.parentNode.objects || []).slice().reverse().find(obj => obj.type === 'grid');
    //   if(grid && this.type === 'axis') {
    //       // // console.log('THIS IS AN',this.type,'AND THERE IS A GRID',grid,'INSERT BEFORE',grid.node(), grid.node().nextSibling)
    //       this.currentNode.insertBefore(this.g, grid.node().nextSibling);
    //   } else {
    //     // console.log('THIS IS A', this.type, 'PREPEND')
    //     this.currentNode.append(this.g);
    //   }
    this.currentNode.append(this.g);
  }
  this.update();
  return this; // .parentNode;
}

function update() {
  if (this.parentNode && this.parentNode.scales.x[this.scales.x] && this.parentNode.scales.y[this.scales.y]) {
    this.draw();
  }
  return this;
}

function curve(interpolationFunction) {
  if (isNull(interpolationFunction)) {
    return this.interpolationFunction;
  }
  this.interpolationFunction = interpolationFunction;
  return this;
}

function attribute(name, fn) {
  var accessor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (value) {
    return value;
  };
  if (isNull(name)) {
    console.warn('name missing: attr method requires a name for the attribute');
    return this;
  }
  if (!isNull(name) && typeof fn === 'undefined') {
    var _this$attrs;
    // this.name()
    return ((_this$attrs = this.attrs) === null || _this$attrs === void 0 ? void 0 : _this$attrs[name]) || function () {};
  }
  if (typeof fn === 'function') {
    // something will go here
    this.attrs[name] = fn;
  } else {
    // fn is a Boolean, String, Number or any other type but function
    this.attrs[name] = function () {
      return accessor(fn);
    };
  }
  return this;
}

function data (data, accessor) {
  // console.log('---------------> data', data, accessor, this);
  if (!data) {
    // console.log('NO DATA return', hasData(this), this._data, hasData(this) ? this._data : this)
    return hasData(this) ? this._data || null : this;
  }
  // TODO: not sure what this is doing...
  if (!hasData(this)) {
    // console.log('NO HAS DATA')
    return this;
  }
  // console.log('HAS DATA')
  // // console.log('chrt or series', this.type)
  // passing only accessor to inherit/reuse data
  if (typeof arguments[0] === 'function') {
    this._accessor = arguments[0];
    return this;
  }

  // data is passed
  this._orginalData = this._orginalData || data;

  // define accessor function to map values
  var accessorFunction = accessor || this._accessor;
  this._accessor = accessorFunction;
  this._data = accessorFunction && !this._accessorApplied ? data.map(function (d, i, arr) {
    if (d instanceof Object) {
      return Object.assign({}, d, accessorFunction(d, i, arr));
    }
    return accessorFunction(d, i, arr);
  }) : data;

  // console.log('DATA', data)

  this._accessorApplied = true; // do not apply the accessor multiple times

  return this;
}

/**
 * node - Returns the DOM element that contains a chart element
 *
 * @param {type} node Set this as root node
 *
 * @return {type} Description
 */
function node (node) {
  if (!node) {
    return this.g || this.root;
  }
  this.root = node;
  this.currentNode = this.root;
  return this;
}

function parent (obj) {
  if (!obj) {
    return this.parentNode;
  }
  this.parentNode = obj;
  return this;
}

function display(value) {
  return attribute.call(this, 'display', value);
}
function show() {
  return display.call(this, true);
}
function hide() {
  return display.call(this, false);
}
function cssDisplay(value) {
  var DOMNode = node.call(this);
  if (!DOMNode) {
    return this;
  }
  var currentDisplay = DOMNode.style.display;
  this._display = typeof this._display !== 'undefined' ? this._display : DOMNode.style.display;
  if (!value) {
    DOMNode.style.display = 'none';
  } else {
    if (currentDisplay === 'none' && value) {
      DOMNode.style.display = this._display;
    }
  }
  return this;
}

function chrtObject() {
  var _this = this;
  this._id = null;
  this.objects = [];
  this.type = 'chrt-object';
  this.fields = {
    x: null,
    y: null
  };
  this.scales = {
    x: 'x',
    y: 'y'
  };
  this._classNames = [];
  this._accessor = function (d, i) {
    return {
      x: !isNull(d) && Object.prototype.hasOwnProperty.call(d, 'x') ? d.x : i,
      y: isNull(d) ? null : Object.prototype.hasOwnProperty.call(d, 'y') ? d.y : d
    };
  };
  this.interpolationFunction = null;

  // list of getter/setter function for custom attributes
  this.attrs = [];
  attribute.call(this, 'display', true);
  this.id = function (id) {
    // console.log('chrtObject.id', id, this._id);
    if (isNull(id)) {
      return _this._id;
    }
    _this._id = id || _this._id;
    if (_this.g) {
      _this.g.setAttribute('id', _this._id);
    }
    return _this;
  };
  this.aria = function (ariaLabel) {
    attribute.call(_this, 'aria', ariaLabel);
    // if(isNull(ariaLabel)) {
    //   return this.ariaLabel;
    // }
    // this.ariaLabel = ariaLabel || this.ariaLabel;
    //
    // if(this.g && this.ariaLabel) {
    //   this.g.setAttribute('aria-label', this.ariaLabel);
    // }
    return _this;
  };
  this.class = function (className) {
    if (isNull(className)) {
      return _this._classNames;
    }
    var classNames = (Array.isArray(className) ? className : className.split(' ')).map(function (d) {
      return d.replace(/\s\s+/g, ' ').trim();
    }).filter(function (d) {
      return d !== '';
    });
    _this.original_classNames = _this.original_classNames || _this._classNames;
    _this._classNames = _toConsumableArray(new Set([].concat(_toConsumableArray(_this.original_classNames), _toConsumableArray(classNames))));
    if (_this.g) {
      var _this$g$classList, _this$g$classList2;
      (_this$g$classList = _this.g.classList).remove.apply(_this$g$classList, _toConsumableArray(_this.g.classList));
      (_this$g$classList2 = _this.g.classList).add.apply(_this$g$classList2, _toConsumableArray(_this._classNames));
    }
    return _this;
  };
  this.hasData = function () {
    return hasData(_this);
  };
  var setScale = function setScale(scale, scaleName) {
    if (!isNull(scaleName)) {
      _this.scales[scale] = scaleName;
    }
  };
  this.x = function (scale) {
    if (isNull(scale)) {
      return _this.scales.x;
    }
    setScale('x', scale || 'x');
    return _this;
  };
  this.y = function (scale) {
    if (isNull(scale)) {
      return _this.scales.y;
    }
    setScale('y', scale || 'y');
    return _this;
  };
  this.getObjectTypeIndex = function () {
    var _this$parent$objects, _this$parent;
    return ((_this$parent$objects = (_this$parent = _this.parent()) === null || _this$parent === void 0 ? void 0 : _this$parent.objects) !== null && _this$parent$objects !== void 0 ? _this$parent$objects : []).filter(function (d) {
      return d.constructor.name === _this.constructor.name;
    }).indexOf(_this);
  };
  return this;
}
function chrt() {
  return new chrtObject();
}
chrtObject.prototype = Object.create(chrt.prototype);

// chrtObject.prototype = chrt.prototype = Object.assign(chrt.prototype, {
chrtObject.prototype = Object.assign(chrt.prototype, {
  node: node,
  data: data,
  add: add,
  snap: add,
  parent: parent,
  render: render,
  update: update,
  curve: curve,
  attr: attribute,
  show: show,
  hide: hide
});

export { cssDisplay, chrtObject as default, node, index as utils };