chart-component-base.ts

@Component({
   // ...
})
export class ChartComponent implements AfterViewInit {
   private currentWorker: Worker;
   private get size() {
      return {
         width: (3 * window.innerWidth) / 4,
         height: (3 * window.innerHeight) / 4,
      };
   }
   // ...
   
   private renderWithWorker(data: ChartData) {
      const payload = { type: 'bar', data };
      if (!this.currentWorker) {
         this.initWorker();
         this.firstDraw(payload);
      } else {
         this.redraw(payload);
      }
   }
   
   private initWorker(): void {
      this.currentWorker = new Worker(
         new URL('./chart.worker', import.meta.url)
      );
      this.currentWorker.onmessage = () => {
         this.isLoading = false;
      };
   }
   
   private firstDraw(chartData: ChartConfiguration): void {
      const offscreen = this.createCanvas();
      this.currentWorker.postMessage({
         type: 'firstDraw',
         canvas: offscreen,
         ...this.size,
         chartData
      }, [offscreen]);
   }
   
   private createCanvas() {
      const currentCanvas = document.createElement('canvas');
      document.getElementById('chartCanvas').append(currentCanvas);
      return (currentCanvas as any).transferControlToOffscreen();
   }
   
   private redraw(chartData: ChartConfiguration): void {
      this.currentWorker.postMessage({
         type: 'redraw',
         ...this.size,
         chartData
      });
   }
}