@devexperts/dxcharts-lite
Version:
122 lines (121 loc) • 4.5 kB
JavaScript
/*
* Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
* If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import ChartBootstrap from './bootstrap';
/**
* New shiny chart wrapper
*/
export class Chart extends ChartBootstrap {
constructor(element, config = {}) {
super(element, config);
this.yAxis = this.yAxisComponent;
this.xAxis = this.xAxisComponent;
this.watermark = this.watermarkComponent;
this.highlights = this.highlightsComponent;
this.events = this.eventsComponent;
this.snapshot = this.snapshotComponent;
this.crosshair = this.crossToolComponent;
this.navigationMap = this.navigationMapComponent;
this.volumes = this.volumesComponent;
this.cursors = this.cursorHandler;
this.data = this.chartComponent;
this.scale = this.scaleModel;
this.panning = this.chartPanComponent;
this.bounds = this.canvasBoundsContainer;
this.hover = this.hoverProducer;
}
/**
* Registers number formatters for pane
* @param uuid - pane's id
* @param formatters - object, that contains 3 fileds: 'regular', 'percent', 'logarithmic'.
* Each filed must have it's own formatter.
* If 'percent' and 'logarithmic' formatters did not provided, 'regular' will be applied.
*/
registerPaneFormatters(uuid, formatters) {
var _a;
(_a = this.paneManager.panes[uuid]) === null || _a === void 0 ? void 0 : _a.setPaneValueFormatters(formatters);
}
/**
* Contains tear-down logic for chart
* Use when you want to unmount the chart from the host app
*/
destroy() {
this.bus.setMuted(true);
this.chartComponents.forEach(c => c.disable());
this.parentElement.childNodes.forEach(n => n.remove());
this.parentElement.style.width = '';
this.parentElement.style.height = '';
}
/**
* Sets the visibility of the volumes separately and updates the yAxis width.
* @param {boolean} separate - A boolean value indicating whether to show the volumes separately or not. Default value is false.
*/
showSeparateVolumes(separate = false) {
if (this.volumes) {
this.volumes.setShowVolumesSeparatly(separate);
this.bounds.updateYAxisWidths();
}
}
setData(data) {
if (Array.isArray(data)) {
if (data.length === 0) {
return;
}
const [mainSeries, ...restSeries] = data;
this.chartComponent.setAllSeries(mainSeries, restSeries);
}
else {
this.chartComponent.setMainSeries(data);
}
}
updateData(data) {
if (Array.isArray(data)) {
if (data.length === 0) {
return;
}
const [mainSeries, ...restSeries] = data;
this.chartComponent.updateAllSeries(mainSeries, restSeries);
}
else {
this.chartComponent.updateAllSeries(data);
}
}
/**
* Sets the auto scale property of the scale model.
* @param {boolean} auto - A boolean value indicating whether the auto scale is enabled or not. Default value is true.
*/
setAutoScale(auto = true) {
this.scale.autoScale(auto);
}
/**
* Sets the right-to-left (RTL) configuration of the component.
*
* @param {boolean} rtl - A boolean value indicating whether the component should be displayed in RTL mode.
* @returns {void}
*/
setRtl(rtl) {
this.config.rtl = rtl;
this.bus.fireDraw();
}
setChartType(type) {
this.data.setChartType(type);
this.yAxis.updateOrderedLabels();
}
/**
* Sets if regular or logarithmic price types should apply treasury format
*/
setTreasuryFormat(treasuryFormat) {
this.config.components.yAxis.treasuryFormat = treasuryFormat;
this.paneManager.yExtents.forEach(ext => {
ext.yAxis.model.labelsGenerator.updateTreasuryFormat(treasuryFormat);
ext.yAxis.model.labelsGenerator.doGenerateLabels();
ext.yAxis.model.fancyLabelsModel.updateLabels(true);
ext.yAxis.model.baseLabelsModel.updateLabels();
});
}
createPane() {
return this.paneManager.createPane();
}
}