d3plus-priestley
Version:
A reusable Priestley timeline built on D3.
239 lines (231 loc) • 12.4 kB
JavaScript
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
/**
@external Viz
@see https://github.com/d3plus/d3plus-viz#Viz
*/
import { min, max, range } from "d3-array";
import { nest } from "d3-collection";
import { scaleBand } from "d3-scale";
import { Axis, date } from "d3plus-axis";
import { accessor, assign, configPrep, elem } from "d3plus-common";
import { Rect } from "d3plus-shape";
import { Viz } from "d3plus-viz";
/**
@class Priestley
@extends external:Viz
@desc Creates a priestley timeline based on an array of data.
*/
var Priestley = /*#__PURE__*/function (_Viz) {
_inherits(Priestley, _Viz);
var _super = _createSuper(Priestley);
/**
@memberof Priestley
@desc Invoked when creating a new class instance, and sets any default parameters.
@private
*/
function Priestley() {
var _this;
_classCallCheck(this, Priestley);
_this = _super.call(this);
_this._axis = new Axis().align("end").orient("bottom");
_this._axisConfig = {
scale: "time"
};
_this._axisTest = new Axis().align("end").gridSize(0).orient("bottom");
_this.end("end");
_this._paddingInner = 0.05;
_this._paddingOuter = 0.05;
_this._shapeConfig = assign({}, _this._shapeConfig, {
ariaLabel: function ariaLabel(d, i) {
return "".concat(_this._drawLabel(d, i), ", ").concat(_this._start(d, i), " - ").concat(_this._end(d, i), ".");
}
});
_this.start("start");
return _this;
}
/**
@memberof Priestley
@desc Extends the render behavior of the abstract Viz class.
@private
*/
_createClass(Priestley, [{
key: "_draw",
value: function _draw(callback) {
var _this2 = this;
_get(_getPrototypeOf(Priestley.prototype), "_draw", this).call(this, callback);
if (!this._filteredData) return this;
var data = this._filteredData.map(function (data, i) {
return {
__d3plus__: true,
data: data,
end: _this2._axisConfig.scale === "time" ? date(_this2._end(data, i)) : _this2._end(data, i),
i: i,
id: _this2._id(data, i),
start: _this2._axisConfig.scale === "time" ? date(_this2._start(data, i)) : _this2._start(data, i)
};
}).filter(function (d) {
return d.end - d.start > 0;
}).sort(function (a, b) {
return a.start - b.start;
});
var nestedData;
if (this._groupBy.length > 1 && this._drawDepth > 0) {
var dataNest = nest();
var _loop = function _loop(i) {
dataNest.key(function (d) {
return _this2._groupBy[i](d.data, d.i);
});
};
for (var i = 0; i < this._drawDepth; i++) {
_loop(i);
}
nestedData = dataNest.entries(data);
} else nestedData = [{
values: data
}];
var maxLane = 0;
nestedData.forEach(function (g) {
var track = [];
g.values.forEach(function (d) {
track = track.map(function (t) {
return t <= d.start ? false : t;
});
var i = track.indexOf(false);
if (i < 0) {
d.lane = maxLane + track.length;
track.push(d.end);
} else {
track[i] = d.end;
d.lane = maxLane + i;
}
});
maxLane += track.length;
});
var axisConfig = {
domain: [min(data, function (d) {
return d.start;
}) || 0, max(data, function (d) {
return d.end;
}) || 0],
height: this._height - this._margin.top - this._margin.bottom,
width: this._width - this._margin.left - this._margin.right
};
var transform = "translate(".concat(this._margin.left, ", ").concat(this._margin.top, ")");
this._axisTest.config(axisConfig).config(this._axisConfig).select(elem("g.d3plus-priestley-axis-test", {
parent: this._select,
enter: {
opacity: 0
}
}).node()).render();
this._axis.config(axisConfig).config(this._axisConfig).select(elem("g.d3plus-priestley-axis", {
parent: this._select,
enter: {
transform: transform
},
update: {
transform: transform
}
}).node()).render();
var axisPad = this._axisTest._padding;
var xScale = this._axis._d3Scale;
var yScale = scaleBand().domain(range(0, maxLane, 1)).paddingInner(this._paddingInner).paddingOuter(this._paddingOuter).rangeRound([this._height - this._margin.bottom - this._axisTest.outerBounds().height - axisPad, this._margin.top + axisPad]);
var bandWidth = yScale.bandwidth();
this._shapes.push(new Rect().data(data).duration(this._duration).height(bandWidth).label(function (d, i) {
return _this2._drawLabel(d.data, i);
}).select(elem("g.d3plus-priestley-shapes", {
parent: this._select
}).node()).width(function (d) {
var w = Math.abs(xScale(d.end) - xScale(d.start));
return w > 2 ? w - 2 : w;
}).x(function (d) {
return xScale(d.start) + (xScale(d.end) - xScale(d.start)) / 2;
}).y(function (d) {
return yScale(d.lane) + bandWidth / 2;
}).config(configPrep.bind(this)(this._shapeConfig, "shape", "Rect")).render());
return this;
}
/**
@memberof Priestley
@desc If *value* is specified, sets the config method for the axis and returns the current class instance. If *value* is not specified, returns the current axis configuration.
@param {Object} [*value*]
@chainable
*/
}, {
key: "axisConfig",
value: function axisConfig(_) {
return arguments.length ? (this._axisConfig = assign(this._axisConfig, _), this) : this._axisConfig;
}
/**
@memberof Priestley
@desc If *value* is specified, sets the end accessor to the specified function or key and returns the current class instance. If *value* is not specified, returns the current end accessor.
@param {Function|String} [*value*]
@chainable
*/
}, {
key: "end",
value: function end(_) {
if (arguments.length) {
if (typeof _ === "function") this._end = _;else {
this._end = accessor(_);
if (!this._aggs[_]) this._aggs[_] = max;
}
return this;
} else return this._end;
}
/**
@memberof Priestley
@desc Sets the [paddingInner](https://github.com/d3/d3-scale#band_paddingInner) value of the underlining [Band Scale](https://github.com/d3/d3-scale#band-scales) used to determine the height of each bar. Values should be a ratio between 0 and 1 representing the space in between each rectangle.
@param {Number} [*value* = 0.05]
@chainable
*/
}, {
key: "paddingInner",
value: function paddingInner(_) {
return arguments.length ? (this._paddingInner = _, this) : this._paddingInner;
}
/**
@memberof Priestley
@desc Sets the [paddingOuter](https://github.com/d3/d3-scale#band_paddingOuter) value of the underlining [Band Scale](https://github.com/d3/d3-scale#band-scales) used to determine the height of each bar. Values should be a ratio between 0 and 1 representing the space around the outer rectangles.
@param {Number} [*value* = 0.05]
@chainable
*/
}, {
key: "paddingOuter",
value: function paddingOuter(_) {
return arguments.length ? (this._paddingOuter = _, this) : this._paddingOuter;
}
/**
@memberof Priestley
@desc If *value* is specified, sets the start accessor to the specified function or key and returns the current class instance. If *value* is not specified, returns the current start accessor.
@param {Function|String} [*value*]
@chainable
*/
}, {
key: "start",
value: function start(_) {
if (arguments.length) {
if (typeof _ === "function") this._start = _;else {
this._start = accessor(_);
if (!this._aggs[_]) this._aggs[_] = min;
}
return this;
} else return this._start;
}
}]);
return Priestley;
}(Viz);
export { Priestley as default };