@castianta/chart-lc
Version:
313 lines (282 loc) • 14.2 kB
JavaScript
import _Card from "antd/es/card";
import _extends from "@babel/runtime/helpers/extends";
import React, { useEffect, useRef, useMemo, useCallback } from 'react';
import { lightningChart, emptyFill, AxisTickStrategies, AxisScrollStrategies, Themes, SolidFill, FontSettings, LegendBoxBuilders, AutoCursorModes, UIOrigins, emptyLine } from '@arction/lcjs';
import { colorType, toStyle, toStrokeStyle } from '../utils';
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 emptyFill;
} else {
return new SolidFill({
color: 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 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(toStyle(axis.getTitleFillStyle(), titleColor)).setScrollStrategy(AxisScrollStrategies[scrollStrategy]).setTickStrategy(AxisTickStrategies[tickStrategy], tickStrategyStyler).setAnimationScroll(animationScroll).setStrokeStyle(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 = _extends({
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(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 = _extends({
gridEmpty: false
}, cursorConfig[axis], {
tickMarker: _extends({
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"](toStrokeStyle(thickness, color, autoCursor["getGridStroke" + axis + "Style"]()));
autoCursor["setTickMarker" + axis](function (tm) {
return tm.setTextFont(fontSetting(tickMarker)).setTextFillStyle(toStyle(tm.getTextFillStyle().toJS(), tickMarker === null || tickMarker === void 0 ? void 0 : tickMarker.fontColor)).setBackground(function (background) {
return 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"](emptyLine);
});
autoCursor.setResultTable(function (rt) {
return rt.setOrigin(align ? UIOrigins[align] : rt.getOrigin()).setTextFillStyle(toStyle(rt.getTextFillStyle(), fontColor)).setBackground(function (background) {
return background.setFillStyle(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(toStyle(chart.getBackgroundFillStyle().toJS(), backgroundColor)).setBackgroundStrokeStyle(toStrokeStyle(border === null || border === void 0 ? void 0 : border.width, border === null || border === void 0 ? void 0 : border.color, chart.getBackgroundStrokeStyle())).setSeriesBackgroundFillStyle(toStyle(chart.getBackgroundFillStyle().toJS(), seriesBackgroundColor)).setSeriesBackgroundStrokeStyle(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(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 useCallback(item, []);
case 'object':
if (Array.isArray(item)) {
return JSON.stringify(item);
} else if (item === null) {
return item;
} else {
return useMemo(function () {
return item;
}, [].concat(useRely(item)));
}
}
});
};
export default 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 = useRef();
var refLegendBox = useRef();
useEffect(function () {
var _init$theme;
var createChart = lightningChart()[chart3D ? 'Chart3D' : 'ChartXY'](_extends({
height: 400
}, init, {
container: refBox.current,
theme: 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]));
useEffect(function () {
if (!chart) return;
chartSetting(chart, chartConfig, chart3D);
}, [chart].concat(useRely(chartConfig)));
useEffect(function () {
if (!chart) return;
chartRender && chartRender(axisSetting);
}, [chart, chart3D].concat(dataSource.map(function (_ref4) {
var data = _ref4.data;
return useRely({
data: data
});
}).flat()));
useEffect(function () {
if (!chart) return;
var _show$entries$directi = _extends({
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(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()));
useEffect(function () {
if (!chart) return;
var axisConfig = {
getDefaultAxisX: _extends({
title: '',
tickStrategy: 'DateTime',
scrollStrategy: 'progressive'
}, xAxis),
getDefaultAxisY: _extends({
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.createElement(_Card, card, /*#__PURE__*/React.createElement("div", {
ref: refBox
}));
}