Commit 94cc2964 authored by Vasily Belolapotkov's avatar Vasily Belolapotkov

refactor: cleanup chart component

parent ac2125c5
......@@ -7,10 +7,13 @@ import { makeLegend } from './legend';
import { makeHtmlElement } from '../utils/ui';
import { makeChartStateController } from './chart-state-controller';
export function makeChart(chartData: IChartData): IChartComponent<any> {
export function makeChart(chartData: IChartData): IChartComponent<null> {
const chartState = makeChartState(chartData);
const chartStateController = makeChartStateController(chartState);
const chartAspectRatio = 4 / 3;
const previewAspectRatio = 5;
let chartContainer: HTMLElement;
let plotHeight: number;
let plotWidth: number;
let previewHeight: number;
......@@ -20,21 +23,16 @@ export function makeChart(chartData: IChartData): IChartComponent<any> {
});
function render(container: HTMLElement): void {
const chartContainer = makeChartContainer();
renderChartContainer(container);
renderPlotArea();
renderPreview();
renderLegend();
}
function renderChartContainer(container: HTMLElement) {
chartContainer = makeChartContainer();
container.appendChild(chartContainer);
initSizeProps(chartContainer);
const plotArea = makePlotArea(chartStateController);
plotArea.render(chartContainer, { plotWidth, plotHeight });
const chartPreview = makeChartPreview(chartStateController);
chartPreview.render(chartContainer, {
width: plotWidth,
height: previewHeight,
});
const legend = makeLegend(chartStateController);
legend.render(chartContainer);
}
function makeChartContainer(): HTMLElement {
......@@ -45,7 +43,25 @@ export function makeChart(chartData: IChartData): IChartComponent<any> {
function initSizeProps(chartContainer: HTMLElement): void {
plotWidth = chartContainer.offsetWidth;
plotHeight = Math.round(0.75 * plotWidth);
previewHeight = Math.round(plotHeight / 5);
plotHeight = Math.round(plotWidth / chartAspectRatio);
previewHeight = Math.round(plotHeight / previewAspectRatio);
}
function renderPlotArea() {
const plotArea = makePlotArea(chartStateController);
plotArea.render(chartContainer, { plotWidth, plotHeight });
}
function renderPreview() {
const preview = makeChartPreview(chartStateController);
preview.render(chartContainer, {
width: plotWidth,
height: previewHeight,
});
}
function renderLegend() {
const legend = makeLegend(chartStateController);
legend.render(chartContainer);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment