You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
8.1 KiB
JavaScript
263 lines
8.1 KiB
JavaScript
4 months ago
|
"use strict";
|
||
|
|
||
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||
|
|
||
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
||
|
|
||
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
||
|
|
||
|
var _cRender = require("@jiaminghi/c-render");
|
||
|
|
||
|
var _graphs = require("@jiaminghi/c-render/lib/config/graphs");
|
||
|
|
||
|
var _util = require("@jiaminghi/c-render/lib/plugin/util");
|
||
|
|
||
|
var _color = require("@jiaminghi/color");
|
||
|
|
||
|
var _index = require("../util/index");
|
||
|
|
||
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
||
|
|
||
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
||
|
|
||
|
var pie = {
|
||
|
shape: {
|
||
|
rx: 0,
|
||
|
ry: 0,
|
||
|
ir: 0,
|
||
|
or: 0,
|
||
|
startAngle: 0,
|
||
|
endAngle: 0,
|
||
|
clockWise: true
|
||
|
},
|
||
|
validator: function validator(_ref) {
|
||
|
var shape = _ref.shape;
|
||
|
var keys = ['rx', 'ry', 'ir', 'or', 'startAngle', 'endAngle'];
|
||
|
|
||
|
if (keys.find(function (key) {
|
||
|
return typeof shape[key] !== 'number';
|
||
|
})) {
|
||
|
console.error('Pie shape configuration is abnormal!');
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
return true;
|
||
|
},
|
||
|
draw: function draw(_ref2, _ref3) {
|
||
|
var ctx = _ref2.ctx;
|
||
|
var shape = _ref3.shape;
|
||
|
ctx.beginPath();
|
||
|
var rx = shape.rx,
|
||
|
ry = shape.ry,
|
||
|
ir = shape.ir,
|
||
|
or = shape.or,
|
||
|
startAngle = shape.startAngle,
|
||
|
endAngle = shape.endAngle,
|
||
|
clockWise = shape.clockWise;
|
||
|
rx = parseInt(rx) + 0.5;
|
||
|
ry = parseInt(ry) + 0.5;
|
||
|
ctx.arc(rx, ry, ir > 0 ? ir : 0, startAngle, endAngle, !clockWise);
|
||
|
var connectPoint1 = (0, _util.getCircleRadianPoint)(rx, ry, or, endAngle).map(function (p) {
|
||
|
return parseInt(p) + 0.5;
|
||
|
});
|
||
|
var connectPoint2 = (0, _util.getCircleRadianPoint)(rx, ry, ir, startAngle).map(function (p) {
|
||
|
return parseInt(p) + 0.5;
|
||
|
});
|
||
|
ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(connectPoint1));
|
||
|
ctx.arc(rx, ry, or > 0 ? or : 0, endAngle, startAngle, clockWise);
|
||
|
ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(connectPoint2));
|
||
|
ctx.closePath();
|
||
|
ctx.stroke();
|
||
|
ctx.fill();
|
||
|
}
|
||
|
};
|
||
|
var agArc = {
|
||
|
shape: {
|
||
|
rx: 0,
|
||
|
ry: 0,
|
||
|
r: 0,
|
||
|
startAngle: 0,
|
||
|
endAngle: 0,
|
||
|
gradientStartAngle: null,
|
||
|
gradientEndAngle: null
|
||
|
},
|
||
|
validator: function validator(_ref4) {
|
||
|
var shape = _ref4.shape;
|
||
|
var keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle'];
|
||
|
|
||
|
if (keys.find(function (key) {
|
||
|
return typeof shape[key] !== 'number';
|
||
|
})) {
|
||
|
console.error('AgArc shape configuration is abnormal!');
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
return true;
|
||
|
},
|
||
|
draw: function draw(_ref5, _ref6) {
|
||
|
var ctx = _ref5.ctx;
|
||
|
var shape = _ref6.shape,
|
||
|
style = _ref6.style;
|
||
|
var gradient = style.gradient;
|
||
|
gradient = gradient.map(function (cv) {
|
||
|
return (0, _color.getColorFromRgbValue)(cv);
|
||
|
});
|
||
|
|
||
|
if (gradient.length === 1) {
|
||
|
gradient = [gradient[0], gradient[0]];
|
||
|
}
|
||
|
|
||
|
var gradientArcNum = gradient.length - 1;
|
||
|
var gradientStartAngle = shape.gradientStartAngle,
|
||
|
gradientEndAngle = shape.gradientEndAngle,
|
||
|
startAngle = shape.startAngle,
|
||
|
endAngle = shape.endAngle,
|
||
|
r = shape.r,
|
||
|
rx = shape.rx,
|
||
|
ry = shape.ry;
|
||
|
if (gradientStartAngle === null) gradientStartAngle = startAngle;
|
||
|
if (gradientEndAngle === null) gradientEndAngle = endAngle;
|
||
|
var angleGap = (gradientEndAngle - gradientStartAngle) / gradientArcNum;
|
||
|
if (angleGap === Math.PI * 2) angleGap = Math.PI * 2 - 0.001;
|
||
|
|
||
|
for (var i = 0; i < gradientArcNum; i++) {
|
||
|
ctx.beginPath();
|
||
|
var startPoint = (0, _util.getCircleRadianPoint)(rx, ry, r, startAngle + angleGap * i);
|
||
|
var endPoint = (0, _util.getCircleRadianPoint)(rx, ry, r, startAngle + angleGap * (i + 1));
|
||
|
var color = (0, _index.getLinearGradientColor)(ctx, startPoint, endPoint, [gradient[i], gradient[i + 1]]);
|
||
|
var arcStartAngle = startAngle + angleGap * i;
|
||
|
var arcEndAngle = startAngle + angleGap * (i + 1);
|
||
|
var doBreak = false;
|
||
|
|
||
|
if (arcEndAngle > endAngle) {
|
||
|
arcEndAngle = endAngle;
|
||
|
doBreak = true;
|
||
|
}
|
||
|
|
||
|
ctx.arc(rx, ry, r, arcStartAngle, arcEndAngle);
|
||
|
ctx.strokeStyle = color;
|
||
|
ctx.stroke();
|
||
|
if (doBreak) break;
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
var numberText = {
|
||
|
shape: {
|
||
|
number: [],
|
||
|
content: '',
|
||
|
position: [0, 0],
|
||
|
toFixed: 0,
|
||
|
rowGap: 0,
|
||
|
formatter: null
|
||
|
},
|
||
|
validator: function validator(_ref7) {
|
||
|
var shape = _ref7.shape;
|
||
|
var number = shape.number,
|
||
|
content = shape.content,
|
||
|
position = shape.position;
|
||
|
|
||
|
if (!(number instanceof Array) || typeof content !== 'string' || !(position instanceof Array)) {
|
||
|
console.error('NumberText shape configuration is abnormal!');
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
return true;
|
||
|
},
|
||
|
draw: function draw(_ref8, _ref9) {
|
||
|
var ctx = _ref8.ctx;
|
||
|
var shape = _ref9.shape;
|
||
|
var number = shape.number,
|
||
|
content = shape.content,
|
||
|
toFixed = shape.toFixed,
|
||
|
rowGap = shape.rowGap,
|
||
|
formatter = shape.formatter;
|
||
|
var textSegments = content.split('{nt}');
|
||
|
var textString = '';
|
||
|
textSegments.forEach(function (t, i) {
|
||
|
var currentNumber = number[i];
|
||
|
if (typeof currentNumber !== 'number') currentNumber = '';
|
||
|
|
||
|
if (typeof currentNumber === 'number') {
|
||
|
currentNumber = currentNumber.toFixed(toFixed);
|
||
|
if (typeof formatter === 'function') currentNumber = formatter(currentNumber);
|
||
|
}
|
||
|
|
||
|
textString += t + (currentNumber || '');
|
||
|
});
|
||
|
|
||
|
_graphs.text.draw({
|
||
|
ctx: ctx
|
||
|
}, {
|
||
|
shape: _objectSpread(_objectSpread({}, shape), {}, {
|
||
|
content: textString,
|
||
|
rowGap: rowGap
|
||
|
})
|
||
|
});
|
||
|
}
|
||
|
};
|
||
|
var lineIcon = {
|
||
|
shape: {
|
||
|
x: 0,
|
||
|
y: 0,
|
||
|
w: 0,
|
||
|
h: 0
|
||
|
},
|
||
|
validator: function validator(_ref10) {
|
||
|
var shape = _ref10.shape;
|
||
|
var x = shape.x,
|
||
|
y = shape.y,
|
||
|
w = shape.w,
|
||
|
h = shape.h;
|
||
|
|
||
|
if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number') {
|
||
|
console.error('lineIcon shape configuration is abnormal!');
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
return true;
|
||
|
},
|
||
|
draw: function draw(_ref11, _ref12) {
|
||
|
var ctx = _ref11.ctx;
|
||
|
var shape = _ref12.shape;
|
||
|
ctx.beginPath();
|
||
|
var x = shape.x,
|
||
|
y = shape.y,
|
||
|
w = shape.w,
|
||
|
h = shape.h;
|
||
|
var halfH = h / 2;
|
||
|
ctx.strokeStyle = ctx.fillStyle;
|
||
|
ctx.moveTo(x, y + halfH);
|
||
|
ctx.lineTo(x + w, y + halfH);
|
||
|
ctx.lineWidth = 1;
|
||
|
ctx.stroke();
|
||
|
ctx.beginPath();
|
||
|
var radius = halfH - 5 * 2;
|
||
|
if (radius <= 0) radius = 3;
|
||
|
ctx.arc(x + w / 2, y + halfH, radius, 0, Math.PI * 2);
|
||
|
ctx.lineWidth = 5;
|
||
|
ctx.stroke();
|
||
|
ctx.fillStyle = '#fff';
|
||
|
ctx.fill();
|
||
|
},
|
||
|
hoverCheck: function hoverCheck(position, _ref13) {
|
||
|
var shape = _ref13.shape;
|
||
|
var x = shape.x,
|
||
|
y = shape.y,
|
||
|
w = shape.w,
|
||
|
h = shape.h;
|
||
|
return (0, _util.checkPointIsInRect)(position, x, y, w, h);
|
||
|
},
|
||
|
setGraphCenter: function setGraphCenter(e, _ref14) {
|
||
|
var shape = _ref14.shape,
|
||
|
style = _ref14.style;
|
||
|
var x = shape.x,
|
||
|
y = shape.y,
|
||
|
w = shape.w,
|
||
|
h = shape.h;
|
||
|
style.graphCenter = [x + w / 2, y + h / 2];
|
||
|
}
|
||
|
};
|
||
|
(0, _cRender.extendNewGraph)('pie', pie);
|
||
|
(0, _cRender.extendNewGraph)('agArc', agArc);
|
||
|
(0, _cRender.extendNewGraph)('numberText', numberText);
|
||
|
(0, _cRender.extendNewGraph)('lineIcon', lineIcon);
|