@visactor/vchart
Version:
charts lib based @visactor/VGrammar
267 lines (258 loc) • 15.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.registerBoxplotSeries = exports.BoxPlotSeries = exports.DEFAULT_STROKE_COLOR = exports.DEFAULT_FILL_COLOR = void 0;
const attribute_1 = require("../../constant/attribute"), data_1 = require("../../constant/data"), base_1 = require("../../constant/base"), scale_1 = require("../../util/scale"), cartesian_1 = require("../cartesian/cartesian"), type_1 = require("../interface/type"), interface_1 = require("../../compile/mark/interface"), register_1 = require("../../data/register"), vdataset_1 = require("@visactor/vdataset"), box_plot_1 = require("../../data/transforms/box-plot"), box_plot_2 = require("../../constant/box-plot"), tooltip_helper_1 = require("./tooltip-helper"), add_property_1 = require("../../data/transforms/add-property"), data_key_1 = require("../../data/transforms/data-key"), utils_1 = require("../../animation/utils"), config_1 = require("../../animation/config"), box_plot_3 = require("../../mark/box-plot"), symbol_1 = require("../../mark/symbol"), constant_1 = require("./constant"), factory_1 = require("../../core/factory"), vutils_1 = require("@visactor/vutils"), utils_2 = require("../util/utils"), cartesian_2 = require("../../component/axis/cartesian"), data_2 = require("../../compile/data"), animation_1 = require("./animation"), box_plot_4 = require("../../theme/builtin/common/series/box-plot"), DEFAULT_STROKE_WIDTH = 2, DEFAULT_SHAFT_FILL_OPACITY = .5, DEFAULT_SHAFT_SHAPE = "line";
exports.DEFAULT_FILL_COLOR = "#FFF", exports.DEFAULT_STROKE_COLOR = "#000";
const DEFAULT_OUTLIER_SIZE = 10;
class BoxPlotSeries extends cartesian_1.CartesianSeries {
constructor() {
super(...arguments), this.type = type_1.SeriesTypeEnum.boxPlot;
}
getMinField() {
return this._minField;
}
getMaxField() {
return this._maxField;
}
getQ1Field() {
return this._q1Field;
}
getMedianField() {
return this._medianField;
}
getQ3Field() {
return this._q3Field;
}
getOutliersField() {
return this._outliersField;
}
getShaftShape() {
return this._shaftShape;
}
getBoxFillColor() {
return this._boxFillColor;
}
getStrokeColor() {
return this._strokeColor;
}
getOutliersStyle() {
return this._outliersStyle;
}
setAttrFromSpec() {
var _a, _b, _c, _d, _e;
super.setAttrFromSpec();
const boxPlotStyle = null !== (_b = null === (_a = this._spec.boxPlot) || void 0 === _a ? void 0 : _a.style) && void 0 !== _b ? _b : {};
this._minField = this._spec.minField, this._maxField = this._spec.maxField, this._q1Field = this._spec.q1Field,
this._medianField = this._spec.medianField, this._q3Field = this._spec.q3Field,
this._outliersField = this._spec.outliersField, this._lineWidth = null !== (_c = boxPlotStyle.lineWidth) && void 0 !== _c ? _c : 2,
this._boxWidth = boxPlotStyle.boxWidth, this._shaftShape = null !== (_d = boxPlotStyle.shaftShape) && void 0 !== _d ? _d : "line",
this._shaftWidth = boxPlotStyle.shaftWidth, this._boxFillColor = boxPlotStyle.boxFill,
this._strokeColor = boxPlotStyle.stroke, this._shaftFillOpacity = "bar" === this._shaftShape ? null !== (_e = boxPlotStyle.shaftFillOpacity) && void 0 !== _e ? _e : .5 : void 0,
this._outliersStyle = this._spec.outliersStyle;
}
initMark() {
this._boxPlotMark = this._createMark(BoxPlotSeries.mark.boxPlot, {
groupKey: this._seriesField,
isSeriesMark: !0
}), this._outliersField && (this._outlierMark = this._createMark(BoxPlotSeries.mark.outlier, {
key: data_1.DEFAULT_DATA_INDEX,
groupKey: this._seriesField,
dataView: this._outlierDataView.getDataView(),
dataProductId: this._outlierDataView.getProductId()
}));
}
initMarkStyle() {
var _a, _b, _c, _d, _e;
const boxPlotMark = this._boxPlotMark;
if (boxPlotMark) {
const commonBoxplotStyles = {
lineWidth: this._lineWidth,
fill: null !== (_a = this._boxFillColor) && void 0 !== _a ? _a : "line" === this._shaftShape ? exports.DEFAULT_FILL_COLOR : this.getColorAttribute(),
minMaxFillOpacity: this._shaftFillOpacity,
stroke: null !== (_b = this._strokeColor) && void 0 !== _b ? _b : "line" === this._shaftShape ? this.getColorAttribute() : exports.DEFAULT_STROKE_COLOR
};
boxPlotMark.setGlyphConfig({
direction: this._direction,
shaftShape: this._shaftShape
});
const boxPlotMarkStyles = "horizontal" === this._direction ? Object.assign(Object.assign({
y: this.dataToPositionY.bind(this)
}, commonBoxplotStyles), {
boxHeight: () => {
var _a;
return null !== (_a = this._boxWidth) && void 0 !== _a ? _a : this._getMarkWidth();
},
ruleHeight: () => {
var _a;
return null !== (_a = this._shaftWidth) && void 0 !== _a ? _a : this._getMarkWidth();
},
q1q3Height: () => {
var _a;
return null !== (_a = this._boxWidth) && void 0 !== _a ? _a : this._getMarkWidth();
},
minMaxHeight: () => {
var _a;
return null !== (_a = this._shaftWidth) && void 0 !== _a ? _a : this._getMarkWidth();
}
}) : Object.assign(Object.assign({
x: this.dataToPositionX.bind(this)
}, commonBoxplotStyles), {
boxWidth: () => {
var _a;
return null !== (_a = this._boxWidth) && void 0 !== _a ? _a : this._getMarkWidth();
},
ruleWidth: () => {
var _a;
return null !== (_a = this._shaftWidth) && void 0 !== _a ? _a : this._getMarkWidth();
},
q1q3Width: () => {
var _a;
return null !== (_a = this._boxWidth) && void 0 !== _a ? _a : this._getMarkWidth();
},
minMaxWidth: () => {
var _a;
return null !== (_a = this._shaftWidth) && void 0 !== _a ? _a : this._getMarkWidth();
}
});
this.setMarkStyle(boxPlotMark, boxPlotMarkStyles, interface_1.STATE_VALUE_ENUM.STATE_NORMAL, attribute_1.AttributeLevel.Series);
}
const outlierMark = this._outlierMark;
outlierMark && this.setMarkStyle(outlierMark, {
fill: null !== (_d = null === (_c = this._outliersStyle) || void 0 === _c ? void 0 : _c.fill) && void 0 !== _d ? _d : this.getColorAttribute(),
size: (0, vutils_1.isNumber)(null === (_e = this._outliersStyle) || void 0 === _e ? void 0 : _e.size) ? this._outliersStyle.size : 10,
symbolType: "circle"
}, interface_1.STATE_VALUE_ENUM.STATE_NORMAL, attribute_1.AttributeLevel.Series);
}
initBoxPlotMarkStyle() {
var _a, _b;
const boxPlotMark = this._boxPlotMark, axisHelper = "horizontal" === this._direction ? this._xAxisHelper : this._yAxisHelper;
if (boxPlotMark && axisHelper) {
const {dataToPosition: dataToPosition} = axisHelper, scale = null === (_a = null == axisHelper ? void 0 : axisHelper.getScale) || void 0 === _a ? void 0 : _a.call(axisHelper, 0);
this.setMarkStyle(boxPlotMark, {
min: datum => (0, scale_1.valueInScaleRange)(dataToPosition(this.getDatumPositionValues(datum, this._minField), {
bandPosition: this._bandPosition
}), scale),
q1: datum => (0, scale_1.valueInScaleRange)(dataToPosition(this.getDatumPositionValues(datum, this._q1Field), {
bandPosition: this._bandPosition
}), scale),
median: datum => (0, scale_1.valueInScaleRange)(dataToPosition(this.getDatumPositionValues(datum, this._medianField), {
bandPosition: this._bandPosition
}), scale),
q3: datum => (0, scale_1.valueInScaleRange)(dataToPosition(this.getDatumPositionValues(datum, this._q3Field), {
bandPosition: this._bandPosition
}), scale),
max: datum => (0, scale_1.valueInScaleRange)(dataToPosition(this.getDatumPositionValues(datum, this._maxField), {
bandPosition: this._bandPosition
}), scale)
}, interface_1.STATE_VALUE_ENUM.STATE_NORMAL, attribute_1.AttributeLevel.Series);
}
const outlierMark = this._outlierMark;
if (outlierMark && axisHelper) {
const {dataToPosition: dataToPosition} = axisHelper, scale = null === (_b = null == axisHelper ? void 0 : axisHelper.getScale) || void 0 === _b ? void 0 : _b.call(axisHelper, 0), outlierMarkPositionChannel = "horizontal" === this._direction ? {
y: this.dataToPositionY.bind(this),
x: datum => (0, scale_1.valueInScaleRange)(dataToPosition(this.getDatumPositionValues(datum, box_plot_2.BOX_PLOT_OUTLIER_VALUE_FIELD), {
bandPosition: this._bandPosition
}), scale)
} : {
x: this.dataToPositionX.bind(this),
y: datum => (0, scale_1.valueInScaleRange)(dataToPosition(this.getDatumPositionValues(datum, box_plot_2.BOX_PLOT_OUTLIER_VALUE_FIELD), {
bandPosition: this._bandPosition
}), scale)
};
this.setMarkStyle(outlierMark, outlierMarkPositionChannel, interface_1.STATE_VALUE_ENUM.STATE_NORMAL, attribute_1.AttributeLevel.Series);
}
}
initData() {
if (super.initData(), !this._data) return;
(0, register_1.registerDataSetInstanceTransform)(this._dataSet, "foldOutlierData", box_plot_1.foldOutlierData),
(0, register_1.registerDataSetInstanceTransform)(this._dataSet, "addVChartProperty", add_property_1.addVChartProperty);
const outlierDataView = new vdataset_1.DataView(this._dataSet, {
name: `${this.type}_outlier_${this.id}_data`
});
outlierDataView.parse([ this.getViewData() ], {
type: "dataview"
}), outlierDataView.name = `${base_1.PREFIX}_series_${this.id}_outlierData`, outlierDataView.transform({
type: "foldOutlierData",
options: {
dimensionField: "horizontal" === this._direction ? this._fieldY : this._fieldX,
outliersField: this._outliersField
}
}), outlierDataView.transform({
type: "addVChartProperty",
options: {
beforeCall: data_key_1.initKeyMap.bind(this),
call: data_key_1.addDataKey
}
}, !1), this._outlierDataView = new data_2.CompilableData(this._option, outlierDataView);
}
compileData() {
var _a;
super.compileData(), null === (_a = this._outlierDataView) || void 0 === _a || _a.compile();
}
init(option) {
super.init(option), this.initBoxPlotMarkStyle();
}
_getMarkWidth() {
if (this._autoBoxWidth) return this._autoBoxWidth;
const bandAxisHelper = "horizontal" === this._direction ? this._yAxisHelper : this._xAxisHelper, xField = "horizontal" === this._direction ? this._fieldY : this._fieldX, autoBoxWidth = bandAxisHelper.getBandwidth(xField.length - 1) / xField.length;
return this._autoBoxWidth = autoBoxWidth, this._autoBoxWidth;
}
onLayoutEnd() {
super.onLayoutEnd(), this._autoBoxWidth = null;
}
_initAnimationSpec(config = {}) {
const newConfig = (0, vutils_1.merge)({}, config);
return [ "appear", "enter", "update", "exit", "disappear" ].forEach((state => {
newConfig[state] && "scaleIn" === newConfig[state].type ? newConfig[state].type = "line" === this._shaftShape ? "boxplotScaleIn" : "barBoxplotScaleIn" : newConfig[state] && "scaleOut" === newConfig[state].type && (newConfig[state].type = "line" === this._shaftShape ? "boxplotScaleOut" : "barBoxplotScaleOut");
})), newConfig;
}
initAnimation() {
var _a, _b, _c, _d, _e, _f, _g;
const animationParams = (0, utils_2.getGroupAnimationParams)(this);
if (this._boxPlotMark) {
const newDefaultConfig = this._initAnimationSpec(null === (_a = factory_1.Factory.getAnimationInKey("scaleInOut")) || void 0 === _a ? void 0 : _a()), newConfig = this._initAnimationSpec((0,
utils_1.userAnimationConfig)("boxPlot", this._spec, this._markAttributeContext));
this._boxPlotMark.setAnimationConfig((0, utils_1.animationConfig)(newDefaultConfig, newConfig, animationParams));
}
if (this._outlierMark) {
const outlierMarkUserAnimation = {
appear: null === (_b = this._spec.animationAppear) || void 0 === _b ? void 0 : _b.symbol,
disappear: null === (_c = this._spec.animationDisappear) || void 0 === _c ? void 0 : _c.symbol,
enter: null === (_d = this._spec.animationEnter) || void 0 === _d ? void 0 : _d.symbol,
exit: null === (_e = this._spec.animationExit) || void 0 === _e ? void 0 : _e.symbol,
update: null === (_f = this._spec.animationUpdate) || void 0 === _f ? void 0 : _f.symbol
};
this._outlierMark.setAnimationConfig((0, utils_1.animationConfig)(null === (_g = factory_1.Factory.getAnimationInKey("scaleInOut")) || void 0 === _g ? void 0 : _g(), outlierMarkUserAnimation, animationParams));
}
}
initTooltip() {
this._tooltipHelper = new tooltip_helper_1.BoxPlotSeriesTooltipHelper(this), this._boxPlotMark && this._tooltipHelper.activeTriggerSet.mark.add(this._boxPlotMark),
this._outlierMark && this._tooltipHelper.activeTriggerSet.mark.add(this._outlierMark);
}
getStatisticFields() {
const fields = super.getStatisticFields(), outliersField = fields.find((f => f.key === this._outliersField));
return outliersField && (outliersField.operations = [ "array-min", "array-max" ]),
fields;
}
onEvaluateEnd(ctx) {
super.onEvaluateEnd(ctx), this._outlierDataView.updateData();
}
getDefaultShapeType() {
return "square";
}
getActiveMarks() {
return [ this._boxPlotMark ];
}
}
exports.BoxPlotSeries = BoxPlotSeries, BoxPlotSeries.type = type_1.SeriesTypeEnum.boxPlot,
BoxPlotSeries.builtInTheme = {
boxPlot: box_plot_4.boxPlot
}, BoxPlotSeries.mark = constant_1.boxPlotSeriesMark;
const registerBoxplotSeries = () => {
(0, box_plot_3.registerBoxPlotMark)(), (0, symbol_1.registerSymbolMark)(), (0, config_1.registerScaleInOutAnimation)(),
(0, cartesian_2.registerCartesianBandAxis)(), (0, cartesian_2.registerCartesianLinearAxis)(),
(0, animation_1.registeBoxPlotScaleAnimation)(), factory_1.Factory.registerSeries(BoxPlotSeries.type, BoxPlotSeries);
};
exports.registerBoxplotSeries = registerBoxplotSeries;
//# sourceMappingURL=box-plot.js.map