@castianta/chart-lc
Version:
328 lines (288 loc) • 15.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = Base;
var _card = _interopRequireDefault(require("antd/lib/card"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _lcjs = require("@arction/lcjs");
var _utils = require("../utils");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var titleFillStyle = function titleFillStyle(props) {
var _props$emptyFill;
if ((_props$emptyFill = props === null || props === void 0 ? void 0 : props.emptyFill) !== null && _props$emptyFill !== void 0 ? _props$emptyFill : false) {
return _lcjs.emptyFill;
} else {
return new _lcjs.SolidFill({
color: (0, _utils.colorType)(props === null || props === void 0 ? void 0 : props.titleColor)
});
}
};
var fontStyles = ['size', 'family', 'weight', 'style', 'variant'];
var fontSetting = function fontSetting(props) {
if (props === void 0) {
props = {
size: null
};
}
return new _lcjs.FontSettings(Object.fromEntries(fontStyles.filter(function (key) {
return props[key];
}).map(function (key) {
var _props$key;
return [key, Array.isArray(props[key]) ? (_props$key = props[key]) === null || _props$key === void 0 ? void 0 : _props$key.join() : props[key]];
})));
};
var axisSetting = function axisSetting(axis, _ref, chart3D) {
var title = _ref.title,
titleColor = _ref.titleColor,
interval = _ref.interval,
scrollStrategy = _ref.scrollStrategy,
tickStrategy = _ref.tickStrategy,
tickStrategyStyler = _ref.tickStrategyStyler,
animationScroll = _ref.animationScroll,
dragging = _ref.dragging,
draggingZoom = _ref.draggingZoom,
WheelingZoom = _ref.WheelingZoom,
strokeStyle = _ref.strokeStyle,
fontSettings = _ref.fontSettings;
var axisConfig = axis.setTitle(title ? title : axis.getTitle()).setTitleFillStyle((0, _utils.toStyle)(axis.getTitleFillStyle(), titleColor)).setScrollStrategy(_lcjs.AxisScrollStrategies[scrollStrategy]).setTickStrategy(_lcjs.AxisTickStrategies[tickStrategy], tickStrategyStyler).setAnimationScroll(animationScroll).setStrokeStyle((0, _utils.toStrokeStyle)(strokeStyle === null || strokeStyle === void 0 ? void 0 : strokeStyle.thickness, strokeStyle === null || strokeStyle === void 0 ? void 0 : strokeStyle.color, axis.getStrokeStyle())).setTitleFont(fontSettings ? fontSettings : axis.getTitleFont());
if (Array.isArray(interval) && interval.length > 0) {
axisConfig.setInterval.apply(axisConfig, interval);
}
if (!chart3D) {
axisConfig.setAxisInteractionPanByDragging(dragging !== null && dragging !== void 0 ? dragging : true).setAxisInteractionZoomByDragging(draggingZoom !== null && draggingZoom !== void 0 ? draggingZoom : true).setAxisInteractionZoomByWheeling(WheelingZoom !== null && WheelingZoom !== void 0 ? WheelingZoom : true);
}
return axisConfig;
};
var chartXYSetting = function chartXYSetting(chart, _ref2) {
var _cursor$mode;
var cursor = _ref2.cursor,
mouseInteractionPan = _ref2.mouseInteractionPan,
mouseInteractionRectangleFit = _ref2.mouseInteractionRectangleFit,
mouseInteractionRectangleZoom = _ref2.mouseInteractionRectangleZoom,
mouseInteractionWheelZoom = _ref2.mouseInteractionWheelZoom;
var cursorConfig = {
X: cursor === null || cursor === void 0 ? void 0 : cursor.x,
Y: cursor === null || cursor === void 0 ? void 0 : cursor.y
};
var _autoText$pointMarker = (0, _extends2["default"])({
autoText: false,
pointMarker: false
}, cursor === null || cursor === void 0 ? void 0 : cursor.resultTable),
align = _autoText$pointMarker.align,
backgroundColor = _autoText$pointMarker.backgroundColor,
fontColor = _autoText$pointMarker.fontColor,
autoText = _autoText$pointMarker.autoText,
pointMarker = _autoText$pointMarker.pointMarker;
chart.setAutoCursorMode(_lcjs.AutoCursorModes[(_cursor$mode = cursor === null || cursor === void 0 ? void 0 : cursor.mode) !== null && _cursor$mode !== void 0 ? _cursor$mode : 'snapToClosest']).setAutoCursor(function (autoCursor) {
Object.keys(cursorConfig).forEach(function (axis) {
var _cursorConfig$axis;
var _gridEmpty$cursorConf = (0, _extends2["default"])({
gridEmpty: false
}, cursorConfig[axis], {
tickMarker: (0, _extends2["default"])({
disabled: false,
autoText: false
}, (_cursorConfig$axis = cursorConfig[axis]) === null || _cursorConfig$axis === void 0 ? void 0 : _cursorConfig$axis.tickMarker)
}),
color = _gridEmpty$cursorConf.color,
thickness = _gridEmpty$cursorConf.thickness,
tickMarker = _gridEmpty$cursorConf.tickMarker,
gridEmpty = _gridEmpty$cursorConf.gridEmpty;
autoCursor["setGridStroke" + axis + "Style"]((0, _utils.toStrokeStyle)(thickness, color, autoCursor["getGridStroke" + axis + "Style"]()));
autoCursor["setTickMarker" + axis](function (tm) {
return tm.setTextFont(fontSetting(tickMarker)).setTextFillStyle((0, _utils.toStyle)(tm.getTextFillStyle().toJS(), tickMarker === null || tickMarker === void 0 ? void 0 : tickMarker.fontColor)).setBackground(function (background) {
return (0, _utils.toStyle)(background.getFillStyle().toJS(), tickMarker === null || tickMarker === void 0 ? void 0 : tickMarker.backgroundColor);
});
})["setTickMarker" + axis + "AutoTextStyle"](tickMarker === null || tickMarker === void 0 ? void 0 : tickMarker.autoText)[tickMarker !== null && tickMarker !== void 0 && tickMarker.disabled ? "disposeTickMarker" + axis : "restoreTickMarker" + axis]();
if (gridEmpty) autoCursor["setGridStroke" + axis + "Style"](_lcjs.emptyLine);
});
autoCursor.setResultTable(function (rt) {
return rt.setOrigin(align ? _lcjs.UIOrigins[align] : rt.getOrigin()).setTextFillStyle((0, _utils.toStyle)(rt.getTextFillStyle(), fontColor)).setBackground(function (background) {
return background.setFillStyle((0, _utils.toStyle)(background.getFillStyle(), backgroundColor));
}).setTextFont(fontSetting(cursor === null || cursor === void 0 ? void 0 : cursor.resultTable));
}).setResultTableAutoTextStyle(autoText)[pointMarker ? 'disposePointMarker' : 'restorePointMarker']();
}).setMouseInteractionPan(mouseInteractionPan !== null && mouseInteractionPan !== void 0 ? mouseInteractionPan : true).setMouseInteractionRectangleFit(mouseInteractionRectangleFit !== null && mouseInteractionRectangleFit !== void 0 ? mouseInteractionRectangleFit : true).setMouseInteractionRectangleZoom(mouseInteractionRectangleZoom !== null && mouseInteractionRectangleZoom !== void 0 ? mouseInteractionRectangleZoom : true).setMouseInteractionWheelZoom(mouseInteractionWheelZoom !== null && mouseInteractionWheelZoom !== void 0 ? mouseInteractionWheelZoom : true);
};
var chartSetting = function chartSetting(chart, chartConfig, chart3D) {
var boundingBox = chartConfig.boundingBox,
titleColor = chartConfig.titleColor,
emptyFill = chartConfig.emptyFill,
backgroundColor = chartConfig.backgroundColor,
seriesBackgroundColor = chartConfig.seriesBackgroundColor,
border = chartConfig.border,
title = chartConfig.title,
seriesBorder = chartConfig.seriesBorder,
boundingBoxStroke = chartConfig.boundingBoxStroke;
chart.setTitle(title ? title : chart.getTitle()).setTitleFillStyle(titleColor || emptyFill ? titleFillStyle({
titleColor: titleColor,
emptyFill: emptyFill
}) : chart.getTitleFillStyle()).setBackgroundFillStyle((0, _utils.toStyle)(chart.getBackgroundFillStyle().toJS(), backgroundColor)).setBackgroundStrokeStyle((0, _utils.toStrokeStyle)(border === null || border === void 0 ? void 0 : border.width, border === null || border === void 0 ? void 0 : border.color, chart.getBackgroundStrokeStyle())).setSeriesBackgroundFillStyle((0, _utils.toStyle)(chart.getBackgroundFillStyle().toJS(), seriesBackgroundColor)).setSeriesBackgroundStrokeStyle((0, _utils.toStrokeStyle)(seriesBorder === null || seriesBorder === void 0 ? void 0 : seriesBorder.width, seriesBorder === null || seriesBorder === void 0 ? void 0 : seriesBorder.color, chart.getSeriesBackgroundStrokeStyle()));
if (chart3D) {
chart.setBoundingBox(boundingBox ? boundingBox : chart.getBoundingBox()).setBoundingBoxStrokeStyle((0, _utils.toStrokeStyle)(boundingBoxStroke === null || boundingBoxStroke === void 0 ? void 0 : boundingBoxStroke.thickness, boundingBoxStroke === null || boundingBoxStroke === void 0 ? void 0 : boundingBoxStroke.color, chart.getBoundingBoxStrokeStyle()));
} else {
chartXYSetting(chart, chartConfig);
}
};
var useRely = function useRely(val) {
return Object.values(val).map(function (item) {
switch (typeof item) {
case 'string':
case 'boolean':
case 'number':
case 'undefined':
default:
return item;
case 'function':
return (0, _react.useCallback)(item, []);
case 'object':
if (Array.isArray(item)) {
return JSON.stringify(item);
} else if (item === null) {
return item;
} else {
return (0, _react.useMemo)(function () {
return item;
}, [].concat(useRely(item)));
}
}
});
};
function Base(_ref3) {
var _ref3$dataSource = _ref3.dataSource,
dataSource = _ref3$dataSource === void 0 ? [] : _ref3$dataSource,
card = _ref3.card,
_ref3$legend = _ref3.legend,
legend = _ref3$legend === void 0 ? {} : _ref3$legend,
_ref3$init = _ref3.init,
init = _ref3$init === void 0 ? {} : _ref3$init,
_ref3$chartConfig = _ref3.chartConfig,
chartConfig = _ref3$chartConfig === void 0 ? {} : _ref3$chartConfig,
_ref3$xAxis = _ref3.xAxis,
xAxis = _ref3$xAxis === void 0 ? {} : _ref3$xAxis,
_ref3$yAxis = _ref3.yAxis,
yAxis = _ref3$yAxis === void 0 ? {} : _ref3$yAxis,
_ref3$chart3D = _ref3.chart3D,
chart3D = _ref3$chart3D === void 0 ? false : _ref3$chart3D,
setChart = _ref3.setChart,
chart = _ref3.chart,
refSeries = _ref3.refSeries,
chartRender = _ref3.chartRender;
var refBox = (0, _react.useRef)();
var refLegendBox = (0, _react.useRef)();
(0, _react.useEffect)(function () {
var _init$theme;
var createChart = (0, _lcjs.lightningChart)()[chart3D ? 'Chart3D' : 'ChartXY']((0, _extends2["default"])({
height: 400
}, init, {
container: refBox.current,
theme: _lcjs.Themes[(_init$theme = init === null || init === void 0 ? void 0 : init.theme) !== null && _init$theme !== void 0 ? _init$theme : 'light']
}));
setChart(createChart); // Required for chart looking initially correct in React context.
createChart.engine.layout(); // Return function that will destroy the chart completely.
return function () {
if (refSeries.current) {
refSeries.current.forEach(function (line) {
return line.dispose();
});
refSeries.current = null;
}
createChart.dispose();
setChart(null);
};
}, [].concat(useRely(init), [chart3D]));
(0, _react.useEffect)(function () {
if (!chart) return;
chartSetting(chart, chartConfig, chart3D);
}, [chart].concat(useRely(chartConfig)));
(0, _react.useEffect)(function () {
if (!chart) return;
chartRender && chartRender(axisSetting);
}, [chart, chart3D].concat(dataSource.map(function (_ref4) {
var data = _ref4.data;
return useRely({
data: data
});
}).flat()));
(0, _react.useEffect)(function () {
if (!chart) return;
var _show$entries$directi = (0, _extends2["default"])({
show: true,
entries: function entries() {
return undefined;
},
direction: 'vertical',
position: {
disabled: false,
point: {
x: 0,
y: 0
}
},
titleFont: {}
}, legend),
show = _show$entries$directi.show,
entries = _show$entries$directi.entries,
title = _show$entries$directi.title,
titleFont = _show$entries$directi.titleFont,
direction = _show$entries$directi.direction,
_show$entries$directi2 = _show$entries$directi.position,
point = _show$entries$directi2.point,
disabled = _show$entries$directi2.disabled;
if (show) {
var _vertical$horizontal$;
var legendBox = chart.addLegendBox(_lcjs.LegendBoxBuilders[(_vertical$horizontal$ = {
vertical: 'VerticalLegendBox',
horizontal: 'HorizontalLegendBox'
}[direction]) !== null && _vertical$horizontal$ !== void 0 ? _vertical$horizontal$ : 'VerticalLegendBox']).add(chart);
var color = legendBox === null || legendBox === void 0 ? void 0 : legendBox.getTitleFillStyle().getColor();
legendBox.setTitle(title ? title : legendBox.getTitle()).setEntries(entries).setTitleFillStyle(function () {
return titleFillStyle(legend !== null && legend !== void 0 && legend.emptyFill || legend !== null && legend !== void 0 && legend.titleColor ? legend : {
titleColor: "rgba(" + color.getR() + "," + color.getG() + "," + color.getB() + "," + color.getA() / 255 + ")"
});
}).setTitleFont(fontSetting(titleFont));
disabled && legendBox.setPosition(point !== null && point !== void 0 ? point : {
x: 0,
y: 0
});
refLegendBox.current = legendBox;
}
return function () {
if (refLegendBox.current) {
refLegendBox.current.dispose();
refLegendBox.current = null;
}
};
}, [chart].concat(useRely(legend), dataSource.map(function (_ref5) {
var color = _ref5.color,
pointColor = _ref5.pointColor,
data = _ref5.data;
return useRely({
color: color,
pointColor: pointColor,
data: data
});
}).flat()));
(0, _react.useEffect)(function () {
if (!chart) return;
var axisConfig = {
getDefaultAxisX: (0, _extends2["default"])({
title: '',
tickStrategy: 'DateTime',
scrollStrategy: 'progressive'
}, xAxis),
getDefaultAxisY: (0, _extends2["default"])({
title: '',
tickStrategy: 'Numeric',
scrollStrategy: 'fitting'
}, yAxis)
};
Object.keys(axisConfig).forEach(function (key) {
return axisSetting(chart[key](), axisConfig[key], chart3D);
});
}, [chart].concat(useRely(xAxis), useRely(yAxis)));
return /*#__PURE__*/_react["default"].createElement(_card["default"], card, /*#__PURE__*/_react["default"].createElement("div", {
ref: refBox
}));
}