chrt-annotation/dist/chrt-annotation.esm.js

Annotation component for Chrt

// chrt.io v0.0.22 Copyright 2022 chrt
import chrtObject, { utils, cssDisplay } from 'chrt-object';

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.");
}

function color(value) {
  return this.attr('color', value);
}

// import { isNull } from '~/helpers';
function position(coords) {
  var currentPosition = this.attr('position')();

  if (typeof coords === 'undefined') {
    return currentPosition;
  }

  return this.attr('position', Object.assign({}, currentPosition, coords));
}
function top(y) {
  return position.call(this, {
    y: y
  });
}
function left(x) {
  return position.call(this, {
    x: x
  });
}

// import { isNull } from '~/helpers';
function alignment(align) {
  var currentAlignment = this.attr('alignment')();

  if (typeof align === 'undefined') {
    return currentAlignment;
  }

  return this.attr('alignment', Object.assign({}, currentAlignment, align));
}
function valign(position) {
  if (typeof position === 'undefined') {
    return alignment.call(this).vertical;
  }

  return alignment.call(this, {
    vertical: position
  });
}
function align(position) {
  if (typeof position === 'undefined') {
    return alignment.call(this).horizontal;
  }

  return alignment.call(this, {
    horizontal: position
  });
}

function offset() {
  for (var _len = arguments.length, offsets = new Array(_len), _key = 0; _key < _len; _key++) {
    offsets[_key] = arguments[_key];
  }

  if (!offsets.length) {
    return this.attr('offset')();
  }

  var currentOffset = this.attr('offset')();
  var left = offsets[0],
      top = offsets[1];
  return this.attr('offset', [left !== null && left !== void 0 ? left : currentOffset[0], top !== null && top !== void 0 ? top : currentOffset[1]]);
}

var isNull = utils.isNull,
    create = utils.create;

function chrtAnnotation(text) {
  var _this = this;

  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
    x: 'x',
    y: 'y'
  };
  chrtObject.call(this);
  this.type = 'annnotation';
  this.div = null;
  this.attr('text', text !== null && text !== void 0 ? text : '');
  this.attr('color', null);
  this.attr('position', {});
  this.attr('alignment', {
    horizontal: 'middle',
    vertical: 'middle'
  });
  this.attr('offset', [0, 0]);
  this._classNames = ['chrt-annotation']; // console.log('chrtAnnotation', options)

  this.text = function (text) {
    return _this.attr('text', text);
  };

  this.draw = function () {
    var _this$div$classList, _this$div$classList2;

    // annotations can only added to the main chrtCore component
    if (_this.parentNode.type !== 'chrt') {
      return _this;
    } // TODO: probably should be the last one


    var scales = {
      x: _this.parentNode.scales.x[options.x] || Object.values(_this.parentNode.scales.x)[0],
      y: _this.parentNode.scales.y[options.y] || Object.values(_this.parentNode.scales.y)[0]
    }; // console.log('options', options)
    // console.log('scales', scales)

    if (!_this.div) {
      var _this$parentNode$root, _this$parentNode$root2;

      _this.div = create('div');

      _this.parentNode.root.appendChild(_this.div);

      if (((_this$parentNode$root = _this.parentNode.root) === null || _this$parentNode$root === void 0 ? void 0 : (_this$parentNode$root2 = _this$parentNode$root.style) === null || _this$parentNode$root2 === void 0 ? void 0 : _this$parentNode$root2.position) === '') {
        _this.parentNode.root.style.position = 'relative';
      }

      _this.div.style.position = 'absolute';
      _this.g = _this.div;
    }

    console.log('display', _this.attr('display')());
    cssDisplay.call(_this, _this.attr('display')());

    _this.div.setAttribute('id', _this.id());

    (_this$div$classList = _this.div.classList).remove.apply(_this$div$classList, _toConsumableArray(_this.div.classList));

    (_this$div$classList2 = _this.div.classList).add.apply(_this$div$classList2, _toConsumableArray(_this._classNames));

    if (scales && scales['x']) {
      var _position = _this.attr('position')();

      var x = isNull(_position.x) ? 0 : scales.x(_position.x); // if y is not defined by the user, it should be calculated based on the closest Y value based on X

      var y = isNull(_position.y) ? 0 : scales.y(_position.y);

      var _offsets = _this.attr('offset')(); // offset.call(this)();


      _this.div.style.left = "".concat(x + _offsets[0], "px");
      _this.div.style.top = "".concat(y + _offsets[1], "px");
    }

    var transform = {
      x: 0,
      y: 0
    };

    var _alignment = _this.attr('alignment')();

    switch (_alignment.horizontal) {
      case 'left':
        transform.x = '0';
        break;

      case 'right':
        transform.x = '-100%';
        break;

      case 'center':
      case 'middle':
      default:
        transform.x = '-50%';
    }

    switch (_alignment.vertical) {
      case 'bottom':
        transform.y = '0';
        break;

      case 'top':
        transform.y = '-100%';
        break;

      case 'center':
      case 'middle':
      default:
        transform.y = '-50%';
    }

    _this.div.style.transform = "translate(".concat(transform.x, ",").concat(transform.y, ")");

    var label = _this.div.querySelector('span');

    if (!label) {
      var _this$color;

      label = create('span');
      label.style.color = (_this$color = _this.color()()) !== null && _this$color !== void 0 ? _this$color : 'inherit';

      _this.div.appendChild(label);
    }

    label.innerHTML = _this.attr('text')();
    return _this;
  };
}

chrtAnnotation.prototype = Object.create(chrtObject.prototype);
chrtAnnotation.prototype.constructor = chrtAnnotation;
chrtAnnotation.parent = chrtObject.prototype;
chrtAnnotation.prototype = Object.assign(chrtAnnotation.prototype, {
  color: color,
  position: position,
  top: top,
  left: left,
  align: align,
  valign: valign,
  offset: offset
}); // export default chrtAnnotation;

function chrtAnnotation$1 (text, options) {
  return new chrtAnnotation(text, options);
}

export { chrtAnnotation$1 as chrtAnnotation };