@devexperts/dxcharts-lite
Version:
62 lines (61 loc) • 3.27 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 { merge } from 'rxjs';
import { filter, map, tap } from 'rxjs/operators';
import { CanvasElement } from '../../canvas/canvas-bounds-container';
import { ChartBaseElement } from '../../model/chart-base-element';
import { uuid } from '../../utils/uuid.utils';
import { animationFrameThrottledPrior } from '../../utils/performance/request-animation-frame-throttle.utils';
import { isDiffersBy } from '../../utils/math.utils';
// TODO rework, make this the source of Y labels for main chart
export class YAxisBaseLabelsModel extends ChartBaseElement {
constructor(scale, labelsGenerator, canvasBoundsContainer, paneUUID, extentIdx) {
super();
this.scale = scale;
this.labelsGenerator = labelsGenerator;
this.canvasBoundsContainer = canvasBoundsContainer;
this.paneUUID = paneUUID;
this.extentIdx = extentIdx;
this.labels = [];
this.prevYAxisHeight = 0;
this.animFrameId = `anim_cache_${uuid()}`;
}
/**
* This method is used to activate the component. It calls the parent's doActivate method and subscribes to the merge of two observables:
* - this.scale.yChanged
* - this.canvasBoundsContainer.observeBoundsChanged
* The merge of these two observables is used to update the labels of the component when either the y-axis scale model changes or the canvas bounds change.
* If the height of the canvas bounds changes by more than 1.5 times the previous height, the labels cache is invalidated and the previous y-axis height is updated.
*/
doActivate() {
super.doActivate();
this.addRxSubscription(merge(this.scale.yChanged, this.canvasBoundsContainer
.observeBoundsChanged(CanvasElement.PANE_UUID_Y_AXIS(this.paneUUID, this.extentIdx))
.pipe(map(bounds => bounds.height),
// do not recalculate height every time bounds is changed, recalculate only if it differs by 1.5 times
filter(height => isDiffersBy(height, this.prevYAxisHeight, 1.5)), tap(height => {
this.labelsGenerator.labelsCache.invalidate();
this.prevYAxisHeight = height;
}))).subscribe(() => this.updateLabels()));
}
/**
* Generates new labels with labelsGenerator
* Then, it calls the updateYAxisWidth method to update the width of the y-axis.
*/
recalculateLabels() {
const labels = this.labelsGenerator.doGenerateLabels();
this.labels = labels;
animationFrameThrottledPrior(this.animFrameId, () => this.canvasBoundsContainer.updateYAxisWidths());
}
/**
* Updates the labels of the chart's y-axis by generating new numeric labels using the yAxisLabelsGenerator object.
* Then, it calls the updateYAxisWidth method to update the width of the y-axis.
*/
updateLabels() {
this.labels = this.labelsGenerator.generateNumericLabels();
animationFrameThrottledPrior(this.animFrameId, () => this.canvasBoundsContainer.updateYAxisWidths());
}
}