Разработка системы меню для ресторанов

Использование дополнительных библиотек для построения графиков

В разрабатываемом приложении пользователю предоставляется статистика по его торговым точкам, категориям, продуктам и сети в целом. Основной показатель – выручка. Чтобы наглядно отобразить динамику изменения выручки, необходимо воспользоваться библиотекой для визуализации данных.
Одной из самых популярных библиотек для JavaScript является plotly.js. plotly.js – это библиотека, разработанная для приложений JavaScript, которые используют графики и диаграммы. Есть несколько причин использовать библиотеку для проекта визуализации данных:

• 
  plotly.js использует d3.js (SVG) и WebGL для рендеринга графики;
  
• 
  plotly.js – это «полный пакет» с d3.js и stack.gl модулями;
  
• 
  Он работает со схемой JSON;
  
• 
  plotly.js поддерживает базовые, статистические, научные, финансовые и картографические диаграммы [20].
  

Для удобного использования библиотеки в Angular был реализован shared-компонент chart-plotly, который является оберткой на TypeScript для библиотеки. Код компонента приведен ниже.
import { Component, OnInit, OnDestroy, ViewChild, ElementRef, EventEmitter, Output, Input } from '@angular/core';
import * as Plotly from 'plotly.js-dist';

@Component({

selector: 'app-chart-plotly',
templateUrl: './chart-plotly.component.html'
})
export class ChartPlotlyComponent implements OnInit, OnDestroy { @ViewChild('chart') el: ElementRef;
@Output() create = new EventEmitter(); @Input() layout: any;
@Input() options: any; element: HTMLElement;

constructor() { } private _data: any;

get data() {
return this._data;
}

@Input() set data(data: any) { this._data = data;

if (this.element) {
Plotly.react(this.element, this.data, this.layout, this.options);
}
}
ngOnInit(): void {
this.element = this.el.nativeElement;
}

ngOnDestroy(): void { Plotly.purge(this.element);

}

resize() {

const e = window.getComputedStyle(this.element).display;
if (!e || 'none' === e) { return;
}
Plotly.Plots.resize(this.element);
}

relayout(layout: any) { Plotly.relayout(this.element, layout);

}
}

Данная библиотека используется для визуализации данных о выручке за полгода (рисунок 16).

Рисунок 16 – Виджет графика выручки за полгода

3.