Skip to content
This repository has been archived by the owner on Feb 6, 2024. It is now read-only.

Commit

Permalink
fix(#471): memory leak because of watch on mutable property
Browse files Browse the repository at this point in the history
  • Loading branch information
@peterpeterparker
peterpeterparker committed Nov 22, 2019
1 parent 0d778c8 commit 4632925
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 32 deletions.
2 changes: 1 addition & 1 deletion webcomponents/charts/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export namespace Components {
'prev': () => Promise<void>;
'separator': string;
'src': string;
'update': (values: DeckdeckgoBarChartDataValue[]) => Promise<void>;
'updateCurrentBar': (values: DeckdeckgoBarChartDataValue[]) => Promise<void>;
'width': number;
'yAxis': boolean;
}
Expand Down
38 changes: 20 additions & 18 deletions webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
private x1: any;
private y: any;

@Prop({mutable: true}) data: DeckdeckgoBarChartData[];
@Prop() data: DeckdeckgoBarChartData[];
private chartData: DeckdeckgoBarChartData[];

private barDataIndex: number = 0;

Expand All @@ -61,20 +62,20 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
}

@Method()
async update(values: DeckdeckgoBarChartDataValue[]) {
async updateCurrentBar(values: DeckdeckgoBarChartDataValue[]) {
if (!this.x0 || !this.x1 || !this.y) {
return;
}

if (!this.data || this.data.length <= 0) {
if (!this.chartData || this.chartData.length <= 0) {
return;
}

if (this.barDataIndex < 0 || this.barDataIndex >= this.data.length) {
if (this.barDataIndex < 0 || this.barDataIndex >= this.chartData.length) {
return;
}

this.data[this.barDataIndex].values = values;
this.chartData[this.barDataIndex].values = values;

await this.drawBars(this.barDataIndex, this.animationDuration);
}
Expand All @@ -95,16 +96,17 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
return;
}

this.barDataIndex = 0;

this.svg = DeckdeckgoChartUtils.initSvg(this.el, (this.width + this.marginLeft + this.marginRight), (this.height + this.marginTop + this.marginBottom));
this.svg = this.svg.append('g').attr('transform', 'translate(' + this.marginLeft + ',' + this.marginTop + ')');

this.barDataIndex = 0;
this.chartData = this.data;

if (this.src) {
this.data = await this.fetchData();
this.chartData = await this.fetchData();
}

if (!this.data || this.data === undefined || this.data.length <= 0) {
if (!this.chartData || this.chartData === undefined || this.chartData.length <= 0) {
resolve();
return;
}
Expand All @@ -113,7 +115,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {

await this.drawAxis();

this.randomColors = Array.from({ length: this.data[0].values.length }, (_v, _i) => (Math.floor(Math.random()*16777215).toString(16)));
this.randomColors = Array.from({ length: this.chartData[0].values.length }, (_v, _i) => (Math.floor(Math.random()*16777215).toString(16)));

await this.drawBars(0, 0);

Expand All @@ -134,7 +136,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {

private initAxisXDomain(): Promise<void> {
return new Promise<void>((resolve) => {
const xDomains = this.data[0].values.map((d) => {
const xDomains = this.chartData[0].values.map((d) => {
return d.label;
});

Expand All @@ -150,7 +152,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {

private initAxisYDomain(): Promise<void> {
return new Promise<void>((resolve) => {
this.y.domain([0, max(this.data, (category) => {
this.y.domain([0, max(this.chartData, (category) => {
return max(category.values, (d) => {
return d.value;
});
Expand All @@ -175,11 +177,11 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
return;
}

if (!this.data || this.data.length <= 0) {
if (!this.chartData || this.chartData.length <= 0) {
return;
}

if (next && this.barDataIndex + 1 < this.data.length) {
if (next && this.barDataIndex + 1 < this.chartData.length) {
this.barDataIndex++;
await this.drawBars(this.barDataIndex, this.animationDuration);
} else if (!next && this.barDataIndex > 0) {
Expand Down Expand Up @@ -208,7 +210,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
return;
}

resolve(this.barDataIndex === this.data.length - 1);
resolve(this.barDataIndex === this.chartData.length - 1);
});
}

Expand Down Expand Up @@ -258,7 +260,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
}

private initInstantAxisX(xDomains: string[]) {
const categoriesNames = this.data.map((d) => {
const categoriesNames = this.chartData.map((d) => {
return d.label;
});

Expand All @@ -270,7 +272,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
return new Promise<void>((resolve) => {
const t = transition();

const section: any = this.svg.selectAll('rect').data(this.data[index].values);
const section: any = this.svg.selectAll('rect').data(this.chartData[index].values);

section
.enter()
Expand Down Expand Up @@ -301,7 +303,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {

this.svg.append('g')
.selectAll('g')
.data(this.data)
.data(this.chartData)
.enter().append('g')
.attr('transform', (d) => {
return 'translate(' + this.x0(d.label) + ',0)';
Expand Down
30 changes: 17 additions & 13 deletions webcomponents/slides/poll/src/components/slide/deckdeckgo-slide-poll.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
const element: HTMLElement = this.el.shadowRoot.querySelector('deckgo-bar-chart');

if (element) {
await (element as any).update(this.chartData[0].values);
await (element as any).updateCurrentBar(this.chartData[0].values);
}
}
});
Expand Down Expand Up @@ -120,16 +120,26 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
}

private onResizeContent = async () => {
await this.init();
await this.initSize();

const element: HTMLElement = this.el.shadowRoot.querySelector('deckgo-qrcode');
const qrCodeElement: HTMLElement = this.el.shadowRoot.querySelector('deckgo-qrcode');

if (element) {
await (element as any).generate();
if (qrCodeElement) {
await (qrCodeElement as any).generate();
}

await this.drawChart();
};

private async init() {
private async drawChart() {
const chartElement: HTMLElement = this.el.shadowRoot.querySelector('deckgo-bar-chart');

if (chartElement) {
await (chartElement as any).draw(this.chartWidth, this.chartHeight);
}
}

private async initSize() {
await this.initQRCodeSize();
await this.initChartSize();
}
Expand Down Expand Up @@ -164,12 +174,6 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
if (container) {
this.chartWidth = container.clientWidth * 0.75;
this.chartHeight = this.chartWidth * 9 / 16;

const element: HTMLElement = this.el.shadowRoot.querySelector('deckgo-bar-chart');

if (element) {
await (element as any).draw(this.chartWidth, this.chartHeight);
}
}

resolve();
Expand Down Expand Up @@ -392,7 +396,7 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
return new Promise<void>(async (resolve) => {
const promises = [];
promises.push(lazyLoadContent(this.el));
promises.push(this.init());
promises.push(this.initSize());
promises.push(this.initDataAndPoll(true));

await Promise.all(promises);
Expand Down

0 comments on commit 4632925

Please sign in to comment.