chrt-dotplot/dist/chrt-dotplot.esm.js

Dot Plot component for Chrt

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

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

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 pointSize(value) {
  return this.attr('radius', value);
}

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

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

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

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

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

function range() {
  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  return this.attr('range', value);
}
function rangeColor(value) {
  return this.attr('rangeColor', value);
}
function rangeWidth(value) {
  return this.attr('rangeWidth', value);
}

function orient(value) {
  return this.attr('orient', value);
}
function horizontal() {
  return orient.call(this, 'horizontal');
}
function vertical() {
  return orient.call(this, 'vertical');
}

var isNull = utils.isNull,
    create = utils.createSVG;
var DEFAULT_POINT_SIZE = 3;
var DEFAULT_POINT_COLOR = '#000';

function chrtDotPlot() {
  var _this = this;

  chrtObject.call(this);
  this.type = 'series'; // this.size = DEFAULT_POINT_SIZE;
  // this.fill = DEFAULT_POINT_COLOR;
  // this.stroke = DEFAULT_POINT_COLOR;
  // this.strokeWidth = 0;
  // this._opacity = 1;

  this.attr('radius', DEFAULT_POINT_SIZE);
  this.attr('stroke', DEFAULT_POINT_COLOR);
  this.attr('fill', DEFAULT_POINT_COLOR);
  this.attr('strokeWidth', 0);
  this.attr('strokeOpacity', 1);
  this.attr('fillOpacity', 1);
  this.attr('range', false);
  this.attr('rangeWidth', DEFAULT_POINT_SIZE);
  this.attr('rangeColor', DEFAULT_POINT_COLOR);
  horizontal.call(this);
  this._classNames = ['chrt-dotplot'];

  this.getXScale = function () {
    if (isNull(_this.fields.x)) {
      _this.fields.x = _this.parentNode.scales.x[_this.scales.x].field;
    }

    return _this.parentNode.scales.x[_this.scales.x];
  };

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

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

    (_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));

    if (!isNull(_this._data)) {
      if (isNull(_this.fields.x)) {
        _this.fields.x = _this.parentNode.scales.x[_this.scales.x].field;
      }

      if (isNull(_this.fields.y)) {
        //console.log('this.scales', this.scales)
        //console.log('this.parentNode.scales', this.parentNode.scales)
        _this.fields.y = _this.parentNode.scales.y[_this.scales.y].field;
      }

      if (_this.attr('range')()) {
        // console.log('ORIENT', this.attr('orient')())
        var _rangeWidth = _this.attr('rangeWidth')();

        var _rangeColor = _this.attr('rangeColor')();

        var rangeType = _this.attr('orient')() === 'vertical' ? 'x' : 'y';

        var ranges = _this._data.reduce(function (acc, d) {
          var _ref;

          var otherField = rangeType === 'x' ? _this.fields.y : _this.fields.x;
          acc[d[_this.fields[rangeType]]] = acc[d[_this.fields[rangeType]]] || (_ref = {}, _defineProperty(_ref, rangeType, d[_this.fields[rangeType]]), _defineProperty(_ref, "data", []), _defineProperty(_ref, "field", rangeType), _defineProperty(_ref, "otherField", otherField), _ref);

          acc[d[_this.fields[rangeType]]].data.push(d);

          var otherData = acc[d[_this.fields[rangeType]]].data.map(function (d) {
            return d[otherField];
          });

          acc[d[_this.fields[rangeType]]].max = Math.max.apply(Math, _toConsumableArray(otherData));
          acc[d[_this.fields[rangeType]]].min = Math.min.apply(Math, _toConsumableArray(otherData));
          return acc;
        }, {}); // console.log('ranges', ranges);


        Object.values(ranges).forEach(function (r, rangeIndex) {
          var dataID = escape("range-".concat(r[rangeType], "-").concat(rangeIndex));

          var range = _this.g.querySelector("[data-id='".concat(dataID, "']"));

          if (!range) {
            range = create('line');
            range.setAttribute('data-id', dataID);

            _this.g.appendChild(range);
          }

          if (!isNull(_this.parentNode.scales.x[_this.scales.x]) && !isNull(_this.parentNode.scales.y[_this.scales.y])) {
            var _coords;

            // const x = this.parentNode.scales.x[this.scales.x](range.min);
            // const y = this.parentNode.scales.y[this.scales.y](d[this.fields.y]);
            var coords = (_coords = {}, _defineProperty(_coords, r.field, _this.parentNode.scales[r.field][_this.scales[r.field]](r[r.field])), _defineProperty(_coords, "".concat(r.otherField, "Min"), _this.parentNode.scales[r.otherField][_this.scales[r.otherField]](r.min)), _defineProperty(_coords, "".concat(r.otherField, "Max"), _this.parentNode.scales[r.otherField][_this.scales[r.otherField]](r.max)), _coords); // console.log(coords);

            if (rangeType === 'y') {
              range.setAttribute('x1', !isNaN(coords["".concat(r.otherField, "Min")]) ? coords["".concat(r.otherField, "Min")] : 0);
              range.setAttribute('x2', !isNaN(coords["".concat(r.otherField, "Max")]) ? coords["".concat(r.otherField, "Max")] : 0);
              range.setAttribute('y1', !isNaN(coords[r.field]) ? coords[r.field] : 0);
              range.setAttribute('y2', !isNaN(coords[r.field]) ? coords[r.field] : 0);
            } else {
              range.setAttribute('y1', !isNaN(coords["".concat(r.otherField, "Min")]) ? coords["".concat(r.otherField, "Min")] : 0);
              range.setAttribute('y2', !isNaN(coords["".concat(r.otherField, "Max")]) ? coords["".concat(r.otherField, "Max")] : 0);
              range.setAttribute('x1', !isNaN(coords[r.field]) ? coords[r.field] : 0);
              range.setAttribute('x2', !isNaN(coords[r.field]) ? coords[r.field] : 0);
            }

            range.setAttribute('stroke-width', _rangeWidth);
            range.setAttribute('stroke', _rangeColor);
          }
        });
      }

      _this._data.forEach(function (d, i, arr) {
        var dataID = escape("circle-".concat(name, "-").concat(i));

        var circle = _this.g.querySelector("[data-id='".concat(dataID, "']"));

        if (!circle) {
          circle = create('circle');
          circle.setAttribute('data-id', dataID);

          _this.g.appendChild(circle);
        }

        if (!isNull(_this.parentNode.scales.x[_this.scales.x]) && !isNull(_this.parentNode.scales.y[_this.scales.y])) {
          var x = _this.parentNode.scales.x[_this.scales.x](d[_this.fields.x]);

          var y = _this.parentNode.scales.y[_this.scales.y](d[_this.fields.y]);

          var cx = !isNaN(x) ? x : 0;
          var cy = !isNaN(y) ? y : 0;

          var r = _this.attr('radius')(d, i, arr);

          d.anchorPoints = {
            x: cx,
            width: r,
            y: cy,
            height: r,
            relativePosition: [0, 0],
            directions: {
              x: 1,
              y: 1
            },
            alignment: {
              horizontal: 'middle',
              vertical: 'top'
            }
          };
          circle.setAttribute('cx', cx);
          circle.setAttribute('cy', cy);
          circle.setAttribute('r', r);
          circle.setAttribute('fill', _this.attr('fill')(d, i, arr));
          circle.setAttribute('fill-opacity', _this.attr('fillOpacity')(d, i, arr) || 1);
          circle.setAttribute('stroke', _this.attr('stroke')(d, i, arr));
          circle.setAttribute('stroke-width', _this.attr('strokeWidth')(d, i, arr));
          circle.setAttribute('stroke-opacity', _this.attr('strokeOpacity')(d, i, arr));
        }
      }); // // // console.log('points', points);

    }

    _this.objects.forEach(function (obj) {
      return obj.draw();
    });

    return _this.parentNode;
  };
}

chrtDotPlot.prototype = Object.create(chrtObject.prototype);
chrtDotPlot.prototype.constructor = chrtDotPlot;
chrtDotPlot.parent = chrtObject.prototype;
chrtDotPlot.prototype = Object.assign(chrtDotPlot.prototype, {
  pointSize: pointSize,
  size: pointSize,
  radius: pointSize,
  color: pointColor,
  stroke: pointStroke,
  width: pointStrokeWidth,
  strokeWidth: pointStrokeWidth,
  opacity: pointOpacity,
  strokeOpacity: strokeOpacity,
  range: range,
  rangeColor: rangeColor,
  rangeWidth: rangeWidth,
  orient: orient,
  horizontal: horizontal,
  vertical: vertical
}); // export default chrtDotPlot;

function chrtDotPlot$1 () {
  return new chrtDotPlot();
}

export { chrtDotPlot$1 as chrtDotPlot };