Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/stock-tools-update-perfo #21204

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Conversation

bm64
Copy link
Member

@bm64 bm64 commented May 22, 2024

Enhance stock tools with optimized update and redraw functionality.

  • - optional benchmark

@highsoft-bot
Copy link
Collaborator

File size comparison

No differences found

@highsoft-bot
Copy link
Collaborator

Visual test results - No difference found

@highsoft-bot
Copy link
Collaborator

highsoft-bot commented May 22, 2024

Benchmark report - Stock

benchmarks/Stock/Stock-Base.bench.ts

Sample size This PR avg (ms) master avg (ms) Diff Percent diff
1000000 6448.48 6400.69 47.79 1%
See all
Sample size This PR avg (ms) master avg (ms) Diff Percent diff
1000 255.18 262.09 -6.91 -3%
10000 344.56 349.04 -4.48 -1%
100000 925.43 911 14.43 2%
1000000 6448.48 6400.69 47.79 1%

@bm64 bm64 changed the title Stock tools improved update and redraw. feature/stock-tools-update-perfo May 27, 2024
@bm64 bm64 marked this pull request as ready for review May 27, 2024 09:42
@bm64 bm64 self-assigned this May 27, 2024
Copy link
Member

@pawellysy pawellysy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job!
Apart from the comment below, please try fixing the failing test.
Also, could you add some tests? :)

Comment on lines 751 to 785
if (this.options.className !== this.guiClassName) {
if (this.guiClassName) {
this.wrapper.classList.remove(this.guiClassName);
}
if (this.options.className) {
this.wrapper.classList.add(this.options.className);
}
this.guiClassName = this.options.className;
}

if (this.options.toolbarClassName !== this.toolbarClassName) {
if (this.toolbarClassName) {
this.toolbar.classList.remove(this.toolbarClassName);
}
if (this.options.toolbarClassName) {
this.toolbar.classList.add(this.options.toolbarClassName);
}
this.toolbarClassName = this.options.toolbarClassName;
}

if (
!shallowArraysEqual(this.options.buttons, this.buttonList) ||
this.isDirty
) {
this.toolbar.innerHTML = AST.emptyHTML;
this.createButtons();
}

if (this.options.enabled === false) {
this.destroy();
}

if (defined(this.options.visible)) {
this.visible = this.options.visible;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a lot of if statements here. Would you mind splitting that into separate methods to improve code readability?

@bm64 bm64 requested a review from pawellysy June 5, 2024 13:19
Copy link
Member

@pawellysy pawellysy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! Just one small comment.

Comment on lines 515 to 522
chart.update({
stockTools: {
gui: {
visible: !self.visible,
placed: true
}
}
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

StockTools has it's update method. Maybe we could use that to avoid some unnecessary logic?

PS: there is no placed property in the API. Should it be there?

Copy link
Contributor

@kamil-musialowski kamil-musialowski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a few comments, nothing major tbh. Great job overall! 👏

container.appendChild(wrapper);

this.showhideBtn = createElement('div', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it showhideBtn on purpose, or should it be showHideBtn?

@@ -144,20 +143,29 @@ function onChartAfterGetContainer(
function onChartBeforeRedraw(
this: Chart
): void {
if (this.stockTools) {
onChartRedraw.call(this);
if (this.stockTools && this.stockTools.guiEnabled) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we change it to optional chaining?

Suggested change
if (this.stockTools && this.stockTools.guiEnabled) {
if (this.stockTools?.guiEnabled) {

const chart = this.chart,
guiOptions = this.options,
container = chart.container,
navigation = chart.options.navigation,
bindingsClassName = navigation && navigation.bindingsClassName;
bindingsClassName = navigation && navigation.bindingsClassName,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
bindingsClassName = navigation && navigation.bindingsClassName,
bindingsClassName = navigation?.bindingsClassName,

* Remove highcharts-active class from button.
* @private
*/
public removeButtonActiveClass(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm afraid that 4fd095a removed the usage of this method, and we just have a function, but it's not used anywhere.

So we either need to remove this function, or revert the changes from the commit that removed the usage.

Copy link
Contributor

@pawelfus pawelfus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! See my suggestions below

ts/Stock/StockTools/StockToolsDefaults.ts Outdated Show resolved Hide resolved
ts/Stock/StockTools/StockToolsDefaults.ts Outdated Show resolved Hide resolved
ts/Stock/StockTools/StockToolsGui.ts Outdated Show resolved Hide resolved
ts/Stock/StockTools/StockToolbar.ts Show resolved Hide resolved
ts/Stock/StockTools/StockToolbar.ts Show resolved Hide resolved
ts/Stock/StockTools/StockToolbar.ts Show resolved Hide resolved
samples/unit-tests/stock-tools/gui/demo.js Show resolved Hide resolved
ts/Stock/StockTools/StockToolbar.ts Outdated Show resolved Hide resolved
Copy link
Member

@DJTechnoo DJTechnoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing work!

Copy link
Contributor

@pawelfus pawelfus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merge with master to get rid of failing tests. Other than that it looks good, nice! 🎉

offsetWidth = listWrapper && (
this.stockTools.redraw();

if (this.stockTools.guiEnabled) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Q: What do you think about extracting the whole code below to a function, eg setOffset() or calculateOffset()?

Copy link
Contributor

@kamil-musialowski kamil-musialowski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All good imo! Please verify that one little comment 👍

*
* @type {boolean}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing that @type was on purpose? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants