bar-charts-react
Version:
This is a flexible bar charts
573 lines (499 loc) • 25.2 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import React, { Component } from "react";
import { strokeLine, strokeBar, writeText, getTextMaxWidth, getNumber, getMaxNumber, roundRect, circlePoint } from "../utils/utils";
import { BASE_X_AXIS, BASE_Y_AXIS, BASE_AXIS_COLOR, BASE_PADDING, BASE_TEXT_MARGIN, BASE_FONT, BASE_LEFT_TOP_TITLE, BASE_LTOP_TITLE_TIPS, BASE_LTOP_TITLE_COLOR, BASE_LTOP_TITLE_TIPS_COLOR, BASE_SCALE_TEXT_COLOR, BASE_LTOP_TITLE_FONT, BASE_LTOP_TITLE_TIPS_FONT, BASE_LTOP_TITLE_MARGIN, BASE_TEXT_ALIGN, SCALE_BOUNDARY_GAP, SCALE_LENGTH, SCALE_DIRECTION_Y, FIRST_SCALE_X, FIRST_SCALE_Y, BASE_LINE, X_AXIS_SCALE_ALIGN, X_AXIS_TXT_ALIGN, BASE_BAR_PADDING, BAR_BG_COLOR, BASE_MARK_INDEX, MARK_LINE_COLOR, MARK_LINE_WIDTH, CIRCLE_POINT_COLOR, CIRCLE_POINT_RADIUS, ROUND_RECT_RADIUS, ROUND_RECT_PADDING, ROUND_RECT_MARGIN, MARK_FONT, ROUND_RECT_BGCOLOR, MARK_TEXT_COLOR } from "../utils/globalConst";
var BarCharts =
/*#__PURE__*/
function (_Component) {
_inherits(BarCharts, _Component);
function BarCharts(props) {
var _this;
_classCallCheck(this, BarCharts);
_this = _possibleConstructorReturn(this, _getPrototypeOf(BarCharts).call(this, props));
_this.getDeviceWidth = function () {
return window.innerWidth || document.documentElement.clientWidth;
};
_this.ratio = window.devicePixelRatio || 1;
_this.canvasHeight = _this.props.height || 300;
_this.canvasWidth = _this.props.width || _this.getDeviceWidth();
_this.font = _this.props.font || BASE_FONT;
_this.padding = _this.props.padding || BASE_PADDING;
_this.textMargin = _this.props.textMargin || BASE_TEXT_MARGIN;
_this.leftTopTitle = _this.props.leftTopTitle || BASE_LEFT_TOP_TITLE;
_this.ltopTitleTips = _this.props.ltopTitleTips || BASE_LTOP_TITLE_TIPS;
_this.ltopTitleFont = _this.props.ltopTitleFont || BASE_LTOP_TITLE_FONT;
_this.ltopTitleTipsFont = _this.props.ltopTitleTipsFont || BASE_LTOP_TITLE_TIPS_FONT;
_this.ltopTitleColor = _this.props.ltopTitleColor || BASE_LTOP_TITLE_COLOR;
_this.ltopTitleTipsColor = _this.props.ltopTitleTipsColor || BASE_LTOP_TITLE_TIPS_COLOR;
_this.ltopTitleMargin = _this.props.ltopTitleMargin || BASE_LTOP_TITLE_MARGIN;
_this.scaleLength = _this.props.scaleLength || SCALE_LENGTH;
_this.scaleDirectionY = _this.props.scaleDirectionY || SCALE_DIRECTION_Y;
_this.scaleBoundaryGap = _this.props.scaleBoundaryGap || SCALE_BOUNDARY_GAP;
_this.scaleTextFont = _this.props.scaleTextFont || BASE_FONT;
_this.scaleTextColor = _this.props.scaleTextColor || BASE_SCALE_TEXT_COLOR;
_this.yAxisTextAlign = _this.props.yAxisTextAlign || BASE_TEXT_ALIGN;
_this.firstScaleX = _this.props.firstScaleX || FIRST_SCALE_X;
_this.firstScaleY = _this.props.firstScaleY || FIRST_SCALE_Y;
_this.axisColor = _this.props.axisColor || BASE_AXIS_COLOR;
_this.gridDashX = _this.props.gridDashX;
_this.gridColorX = _this.props.gridColorX || BASE_AXIS_COLOR;
_this.xAxisScaleAlign = _this.props.xAxisScaleAlign || X_AXIS_SCALE_ALIGN;
_this.xAxisTxtAlign = _this.props.xAxisTxtAlign || X_AXIS_TXT_ALIGN;
_this.barPadding = _this.props.barPadding || BASE_BAR_PADDING;
_this.barBgColor = _this.props.barBgColor || BAR_BG_COLOR;
_this.markLineColor = _this.props.markLineColor || MARK_LINE_COLOR;
_this.markLineWidth = _this.props.markLineWidth || MARK_LINE_WIDTH;
_this.markLineDash = _this.props.markLineDash;
_this.circlePointColor = _this.props.circlePointColor || CIRCLE_POINT_COLOR;
_this.circlePointRadius = _this.props.circlePointRadius || CIRCLE_POINT_RADIUS;
_this.roundRectRadius = _this.props.roundRectRadius || ROUND_RECT_RADIUS;
_this.roundRectPadding = _this.props.roundRectPadding || ROUND_RECT_PADDING;
_this.roundRectMargin = _this.props.roundRectMargin || ROUND_RECT_MARGIN;
_this.markFont = _this.props.markFont || MARK_FONT;
_this.markTextColor = _this.props.markTextColor || MARK_TEXT_COLOR;
_this.roundRectBgColor = _this.props.roundRectBgColor || ROUND_RECT_BGCOLOR;
_this.ltopTitleHeight = 0;
_this.axisStartX = 0;
_this.axisEndX = 0;
_this.axisStartY = 0;
_this.axisEndY = 0;
_this.canvasUpdate = function () {
var _assertThisInitialize = _assertThisInitialized(_this),
ratio = _assertThisInitialize.ratio,
canvasHeight = _assertThisInitialize.canvasHeight,
canvasWidth = _assertThisInitialize.canvasWidth,
chartBarCanvas = document.getElementById("chart-bar"),
ctx = chartBarCanvas.getContext("2d"); // 画布按ratio倍放大绘制
chartBarCanvas.width = canvasWidth * ratio;
chartBarCanvas.height = canvasHeight * ratio; // 显示时按ratio倍缩小还原回来
chartBarCanvas.style.width = canvasWidth + "px";
chartBarCanvas.style.height = canvasHeight + "px"; // 先计算X轴旁边文字的开始位置，对齐方式按左对齐
// 先计算X轴开始位置
_this.writeLTopTitle(ctx);
_this.drawAxis(ctx);
};
_this.rePainting = function () {
_this.canvasUpdate();
};
_this.writeLTopTitle = function (ctx) {
var _assertThisInitialize2 = _assertThisInitialized(_this),
padding = _assertThisInitialize2.padding,
ratio = _assertThisInitialize2.ratio,
leftTopTitle = _assertThisInitialize2.leftTopTitle,
ltopTitleTips = _assertThisInitialize2.ltopTitleTips,
ltopTitleFont = _assertThisInitialize2.ltopTitleFont,
ltopTitleTipsFont = _assertThisInitialize2.ltopTitleTipsFont,
ltopTitleColor = _assertThisInitialize2.ltopTitleColor,
ltopTitleTipsColor = _assertThisInitialize2.ltopTitleTipsColor,
ltopTitleHeight = _assertThisInitialize2.ltopTitleHeight,
ltopTitleWidth = 0;
if (leftTopTitle === "none" && ltopTitleTips === "none") {
_this.ltopTitleMargin = 0;
} else if (leftTopTitle !== "none" && ltopTitleTips !== "none") {
ltopTitleHeight = Math.max(getNumber(ltopTitleFont), getNumber(ltopTitleTipsFont));
} else if (leftTopTitle !== "none" || ltopTitleTips !== "none") {
ltopTitleHeight = leftTopTitle !== "none" ? getNumber(ltopTitleFont) : getNumber(ltopTitleTipsFont);
}
_this.ltopTitleHeight = ltopTitleHeight;
if (leftTopTitle !== "none") {
var lTopTitleStart = {
x: padding * ratio,
y: padding * ratio + ltopTitleHeight
};
writeText(ctx, leftTopTitle, lTopTitleStart, ltopTitleFont, ltopTitleColor, BASE_TEXT_ALIGN);
ltopTitleWidth = getTextMaxWidth(ctx, leftTopTitle, ltopTitleFont, true);
}
if (ltopTitleTips !== "none") {
var ltopTitleTipsStart = {
x: padding * ratio + ltopTitleWidth + 10,
y: padding * ratio + ltopTitleHeight
};
writeText(ctx, ltopTitleTips, ltopTitleTipsStart, ltopTitleTipsFont, ltopTitleTipsColor, BASE_TEXT_ALIGN);
}
};
_this.drawAxis = function (ctx) {
var _assertThisInitialize3 = _assertThisInitialized(_this),
padding = _assertThisInitialize3.padding,
textMargin = _assertThisInitialize3.textMargin,
axisColor = _assertThisInitialize3.axisColor,
font = _assertThisInitialize3.font,
canvasWidth = _assertThisInitialize3.canvasWidth,
canvasHeight = _assertThisInitialize3.canvasHeight,
ratio = _assertThisInitialize3.ratio,
ltopTitleMargin = _assertThisInitialize3.ltopTitleMargin,
ltopTitleHeight = _assertThisInitialize3.ltopTitleHeight,
scaleLength = _assertThisInitialize3.scaleLength,
scaleDirectionY = _assertThisInitialize3.scaleDirectionY,
yAxisDatas = _this.state.yAxisDatas,
textMaxWidth = getTextMaxWidth(ctx, yAxisDatas, font),
textMaxHeight = getNumber(font),
scaleLengthY = scaleDirectionY === "left" ? scaleLength : 0,
axisStartX = padding * ratio + textMaxWidth + textMargin + scaleLengthY,
axisEndX = (canvasWidth - padding) * ratio,
axisStartY = padding * ratio + ltopTitleHeight + ltopTitleMargin,
axisEndY = (canvasHeight - padding) * ratio - textMaxHeight - textMargin,
xAxisStart = {
x: axisStartX,
y: axisEndY
},
xAxisEnd = {
x: axisEndX,
y: axisEndY
},
yAxisStart = {
x: axisStartX,
y: axisStartY
},
yAxisEnd = {
x: axisStartX,
y: axisEndY
};
_this.axisStartX = axisStartX;
_this.axisEndX = axisEndX;
_this.axisStartY = axisStartY;
_this.axisEndY = axisEndY;
strokeLine(ctx, xAxisStart, xAxisEnd, undefined, axisColor);
strokeLine(ctx, yAxisStart, yAxisEnd, undefined, axisColor); // 坐标轴绘制完成调用绘制刻度线函数
_this.drawScaleAndTxt(ctx);
};
_this.drawScaleAndTxt = function (ctx) {
var _this$state = _this.state,
yAxisDatas = _this$state.yAxisDatas,
xAxisDatas = _this$state.xAxisDatas,
markIndex = _this$state.markIndex,
_assertThisInitialize4 = _assertThisInitialized(_this),
padding = _assertThisInitialize4.padding,
ratio = _assertThisInitialize4.ratio,
scaleBoundaryGap = _assertThisInitialize4.scaleBoundaryGap,
scaleLength = _assertThisInitialize4.scaleLength,
scaleDirectionY = _assertThisInitialize4.scaleDirectionY,
axisStartX = _assertThisInitialize4.axisStartX,
axisEndX = _assertThisInitialize4.axisEndX,
axisStartY = _assertThisInitialize4.axisStartY,
axisEndY = _assertThisInitialize4.axisEndY,
axisColor = _assertThisInitialize4.axisColor,
firstScaleX = _assertThisInitialize4.firstScaleX,
firstScaleY = _assertThisInitialize4.firstScaleY,
scaleTextColor = _assertThisInitialize4.scaleTextColor,
scaleTextFont = _assertThisInitialize4.scaleTextFont,
yAxisTextAlign = _assertThisInitialize4.yAxisTextAlign,
textMargin = _assertThisInitialize4.textMargin,
gridDashX = _assertThisInitialize4.gridDashX,
gridColorX = _assertThisInitialize4.gridColorX,
xAxisScaleAlign = _assertThisInitialize4.xAxisScaleAlign,
xAxisTxtAlign = _assertThisInitialize4.xAxisTxtAlign,
barPadding = _assertThisInitialize4.barPadding,
barBgColor = _assertThisInitialize4.barBgColor,
markLineColor = _assertThisInitialize4.markLineColor,
markLineWidth = _assertThisInitialize4.markLineWidth,
markLineDash = _assertThisInitialize4.markLineDash,
circlePointColor = _assertThisInitialize4.circlePointColor,
circlePointRadius = _assertThisInitialize4.circlePointRadius,
roundRectRadius = _assertThisInitialize4.roundRectRadius,
roundRectPadding = _assertThisInitialize4.roundRectPadding,
roundRectMargin = _assertThisInitialize4.roundRectMargin,
markFont = _assertThisInitialize4.markFont,
roundRectBgColor = _assertThisInitialize4.roundRectBgColor,
markTextColor = _assertThisInitialize4.markTextColor,
xAxisTitles = [],
xAxisFlexs = [],
xAxisValues = [],
yAxisTitles = [],
yAxisFlexs = [],
yAxisValues = []; ///*********************-整理x、y轴传入的基础数据-*********************///
///****************************************************************///
// 检测传入的X、Y轴参数是否合法
_this.checkParams(xAxisDatas);
_this.checkParams(yAxisDatas); // 整理x轴数据
for (var i in xAxisDatas) {
var _xAxisDatas$i = xAxisDatas[i],
_xAxisDatas$i$title = _xAxisDatas$i.title,
title = _xAxisDatas$i$title === void 0 ? "" : _xAxisDatas$i$title,
_xAxisDatas$i$flex = _xAxisDatas$i.flex,
flex = _xAxisDatas$i$flex === void 0 ? "undefined" : _xAxisDatas$i$flex,
_xAxisDatas$i$value = _xAxisDatas$i.value,
value = _xAxisDatas$i$value === void 0 ? undefined : _xAxisDatas$i$value;
if (value === undefined) return console.error("value is required!");
xAxisValues.push(value);
xAxisTitles.push(title);
xAxisFlexs.push(flex);
} // 整理Y轴值
for (var _i in yAxisDatas) {
var _yAxisDatas$_i = yAxisDatas[_i],
_yAxisDatas$_i$title = _yAxisDatas$_i.title,
_title = _yAxisDatas$_i$title === void 0 ? "" : _yAxisDatas$_i$title,
_yAxisDatas$_i$flex = _yAxisDatas$_i.flex,
_flex = _yAxisDatas$_i$flex === void 0 ? "undefined" : _yAxisDatas$_i$flex,
_yAxisDatas$_i$value = _yAxisDatas$_i.value,
_value = _yAxisDatas$_i$value === void 0 ? undefined : _yAxisDatas$_i$value;
if (_value === undefined) return console.error("value is required!");
var patt = new RegExp(_value, "i"),
hasEqualValue = patt.test(String(yAxisValues));
if (!hasEqualValue) yAxisValues.push(_value);
yAxisTitles.push(_title);
yAxisFlexs.push(_flex);
}
yAxisValues.sort(function (a, b) {
return a - b;
}); ///*********************-检查x、y轴基础数据中是否有启用flex属性-*********************///
///*****************************************************************************///
// flex值优先级最高，这个决定后边的算法
var totalFlexX = _this.getTotalFlex(xAxisFlexs),
totalFlexY = _this.getTotalFlex(yAxisFlexs); // 如果启用了flex值，检查数据组中是否有改属性缺省项
var yUsingFlex = totalFlexY && yAxisFlexs.toString().match(/undefined/i),
xUsingFlex = totalFlexX && xAxisFlexs.toString().match(/undefined/i);
if (yUsingFlex || xUsingFlex) return console.error("you has used flex property, some flex's value is missing");
var xCurrentFlex = 0,
xAxisScaleTotalLength = axisEndX - axisStartX - scaleBoundaryGap,
xMaxValue = getMaxNumber(xAxisTitles),
xUnitLength = totalFlexX ? (xAxisScaleTotalLength / totalFlexX).toFixed(2) : (xAxisScaleTotalLength / xMaxValue).toFixed(2),
yAxisScaleTotalLength = axisEndY - axisStartY - scaleBoundaryGap,
yUnitLength = !totalFlexY ? (yAxisScaleTotalLength / yAxisValues[yAxisValues.length - 1]).toFixed(2) : (yAxisScaleTotalLength / totalFlexY).toFixed(2),
yAxisStartX = scaleDirectionY === "left" ? axisStartX - scaleLength : axisStartX,
yAxisEndX = scaleDirectionY === "left" ? axisStartX : axisStartX + scaleLength,
textStartX = yAxisTextAlign === "left" ? padding * ratio : yAxisStartX - textMargin,
yCurrentFlex = 0,
preventScaleStartX = axisStartX; ///******************************-x轴绘图-******************************///
///*******************************************************************///
for (var _i2 = 0; _i2 < xAxisValues.length; _i2++) {
xCurrentFlex += xAxisFlexs[_i2];
var scaleStartX = axisStartX + (totalFlexX ? xUnitLength * xCurrentFlex : xUnitLength * getNumber(xAxisTitles[_i2]));
scaleStartX = _i2 === xAxisValues.length - 1 ? axisEndX - scaleBoundaryGap : scaleStartX;
var barHeight = yUnitLength * xAxisValues[_i2],
// 单个柱状图高度
barWidth = scaleStartX - preventScaleStartX - 2 * barPadding,
scaleCoord = {
startCoord: {
x: xAxisScaleAlign === "center" ? scaleStartX - xUnitLength / 2 : scaleStartX,
y: axisEndY
},
endCoord: {
x: xAxisScaleAlign === "center" ? scaleStartX - xUnitLength / 2 : scaleStartX,
y: axisEndY + scaleLength
}
},
barCoord = {
x: !_i2 ? axisStartX - 1 + barPadding : preventScaleStartX + barPadding - 1,
y: axisEndY - barHeight
}; // 绘制x轴刻度线
strokeLine(ctx, scaleCoord.startCoord, scaleCoord.endCoord, undefined, axisColor); // 绘制x轴文本
if (xAxisScaleAlign === "center" || xAxisScaleAlign !== "center" && xAxisTxtAlign === "center") {
var textCoord = {
x: scaleCoord.startCoord.x,
y: axisEndY + scaleLength + textMargin
};
writeText(ctx, xAxisTitles[_i2], textCoord, scaleTextFont, scaleTextColor, "center", "top");
} else if (xAxisScaleAlign !== "center" && xAxisTxtAlign === "between") {
var _textCoord = {
x: scaleCoord.startCoord.x - xUnitLength / 2,
y: axisEndY + scaleLength + textMargin
};
writeText(ctx, xAxisTitles[_i2], _textCoord, scaleTextFont, scaleTextColor, "center", "top");
} // 绘制柱状图
strokeBar(ctx, barCoord, barWidth, barHeight, barBgColor[_i2], undefined, undefined);
preventScaleStartX = scaleStartX;
} // x轴0点刻度线
if (firstScaleX) strokeLine(ctx, {
x: axisStartX,
y: axisEndY
}, {
x: axisStartX,
y: axisEndY + scaleLength
}, undefined, axisColor); // x轴0点刻度线文字
if (firstScaleX && xAxisTxtAlign === "center") {
var _textCoord2 = {
x: axisStartX,
y: axisEndY + scaleLength + textMargin
};
writeText(ctx, "0", _textCoord2, scaleTextFont, scaleTextColor, "center", "top");
} ///******************************-y轴绘图-******************************///
///*******************************************************************///
for (var _i3 = 0; _i3 < yAxisValues.length; _i3++) {
yCurrentFlex += yAxisFlexs[_i3];
var height = !totalFlexY ? yUnitLength * yAxisValues[_i3] : yUnitLength * yCurrentFlex,
isLastScale = _i3 === yAxisValues.length - 1,
_scaleCoord = {
startCoord: {
x: yAxisStartX,
y: isLastScale ? axisStartY + scaleBoundaryGap : axisEndY - height
},
endCoord: {
x: yAxisEndX,
y: isLastScale ? axisStartY + scaleBoundaryGap : axisEndY - height
}
},
_textCoord3 = {
x: textStartX,
y: isLastScale ? axisStartY + scaleBoundaryGap : axisEndY - height
},
gridCoordX = {
startCoord: {
x: scaleDirectionY === "left" ? axisStartX : axisStartX + scaleLength,
y: isLastScale ? axisStartY + scaleBoundaryGap : axisEndY - height
},
endCoord: {
x: axisEndX,
y: isLastScale ? axisStartY + scaleBoundaryGap : axisEndY - height
}
}; // 与X轴平行的栅格线
if (_i3) strokeLine(ctx, gridCoordX.startCoord, gridCoordX.endCoord, undefined, gridColorX, gridDashX); // Y轴刻度线
if (!(!firstScaleY && !_i3)) strokeLine(ctx, _scaleCoord.startCoord, _scaleCoord.endCoord, undefined, axisColor); // Y轴文本
if (!(!firstScaleY && !_i3)) writeText(ctx, yAxisTitles[_i3], _textCoord3, scaleTextFont, scaleTextColor, yAxisTextAlign, BASE_LINE);
} ///*****************-绘制markLine、markPoint、markText-******************///
///********************************************************************///
if (markIndex !== "none") {
var flexSum = 0;
if (totalFlexX) {
for (var _i4 = 0; _i4 < markIndex; _i4++) {
flexSum += xAxisFlexs[_i4];
}
}
var coordX = axisStartX + (totalFlexX ? xUnitLength * flexSum : xUnitLength * getNumber(xAxisTitles[markIndex]));
coordX = markIndex === xAxisValues.length - 1 ? axisEndX - scaleBoundaryGap - xUnitLength / 2 : coordX + xUnitLength / 2;
var startCoord = {
x: coordX,
y: axisEndY
},
endCoord = {
x: coordX,
y: axisEndY - yUnitLength * xAxisValues[markIndex]
},
txtWidth = getTextMaxWidth(ctx, xAxisValues[markIndex], markFont, true),
txtHeight = getNumber(markFont),
_this$getEachSidePadd = _this.getEachSidePadding(roundRectPadding),
paddingTop = _this$getEachSidePadd.paddingTop,
paddingBottom = _this$getEachSidePadd.paddingBottom,
paddingLeft = _this$getEachSidePadd.paddingLeft,
paddingRight = _this$getEachSidePadd.paddingRight,
roundRectW = txtWidth + paddingLeft + paddingRight,
roundRectH = Number(txtHeight) + paddingTop + paddingBottom,
roundRectX = endCoord.x,
roundRectY = endCoord.y - circlePointRadius - roundRectMargin - roundRectH;
var markTxtCoord = {
x: endCoord.x + paddingLeft,
y: roundRectY + paddingTop + 2
};
strokeLine(ctx, startCoord, endCoord, markLineWidth, markLineColor, markLineDash);
circlePoint(ctx, endCoord.x, endCoord.y, circlePointRadius, circlePointColor);
roundRect(ctx, roundRectX, roundRectY, roundRectW, roundRectH, roundRectRadius, roundRectBgColor);
writeText(ctx, xAxisValues[markIndex], markTxtCoord, markFont, markTextColor, "left", "top");
}
};
_this.getEachSidePadding = function (paddingStr) {
var paddingArr = getNumber(paddingStr, true),
paddingLeft = 0,
paddingRight = 0,
paddingTop = 0,
paddingBottom = 0,
paddingArrLength = paddingArr.length;
switch (paddingArrLength) {
case 1:
paddingLeft = paddingRight = paddingTop = paddingBottom = paddingArr[0];
break;
case 2:
paddingTop = paddingBottom = paddingArr[0];
paddingLeft = paddingRight = paddingArr[1];
break;
case 3:
paddingTop = paddingArr[0];
paddingLeft = paddingRight = paddingArr[1];
paddingBottom = paddingArr[2];
break;
case 4:
paddingTop = paddingArr[0];
paddingRight = paddingArr[1];
paddingBottom = paddingArr[2];
paddingLeft = paddingArr[3];
break;
default:
break;
}
return {
paddingTop: Number(paddingTop),
paddingBottom: Number(paddingBottom),
paddingLeft: Number(paddingLeft),
paddingRight: Number(paddingRight)
};
};
_this.getTotalFlex = function (flexArr) {
var totalFlex = 0;
flexArr.map(function (item) {
totalFlex = item === "undefined" ? totalFlex : item + totalFlex;
});
return totalFlex;
};
_this.checkParams = function (params) {
if (!params) {
return console.error(params + "is required, and its type should be Array!");
} else if (!Array.isArray(params)) {
return console.error("data type should be Array!");
}
};
_this.state = {
xAxisDatas: props.xAxisDatas || BASE_X_AXIS,
yAxisDatas: props.yAxisDatas || BASE_Y_AXIS,
markIndex: props.markIndex !== undefined ? props.markIndex : BASE_MARK_INDEX
};
return _this;
}
_createClass(BarCharts, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
window.onresize = function () {
_this2.canvasWidth = _this2.getDeviceWidth();
_this2.canvasUpdate();
};
this.canvasUpdate();
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var _this3 = this;
var _this$props = this.props,
xAxisDatas = _this$props.xAxisDatas,
yAxisDatas = _this$props.yAxisDatas,
markIndex = _this$props.markIndex;
if (JSON.stringify(xAxisDatas) !== JSON.stringify(nextProps.xAxisDatas)) {
this.setState({
xAxisDatas: nextProps.xAxisDatas
}, function () {
_this3.canvasUpdate();
});
}
if (JSON.stringify(yAxisDatas) !== JSON.stringify(nextProps.yAxisDatas)) {
this.setState({
yAxisDatas: nextProps.yAxisDatas
}, function () {
_this3.canvasUpdate();
});
}
if (markIndex !== nextProps.markIndex) {
this.setState({
markIndex: nextProps.markIndex
}, function () {
_this3.canvasUpdate();
});
}
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate() {
return false;
} // 画布大小生成
}, {
key: "render",
value: function render() {
return React.createElement("canvas", {
id: "chart-bar"
});
}
}]);
return BarCharts;
}(Component);
export default BarCharts;