Commit 77540992 authored by Vasily Belolapotkov's avatar Vasily Belolapotkov

calculate plot dimensions based on the container size

parent 131a062a
......@@ -15,9 +15,9 @@ export function makeChart(chartData: IChartData): IRenderable<any> {
const chartState = makeChartState(chartData);
const chartStateController = makeChartStateController(chartState);
const plotHeight = 450;
const plotWidth = 600;
const previewHeight = 100;
let plotHeight: number;
let plotWidth: number;
let previewHeight: number;
return Object.freeze({
render,
......@@ -25,6 +25,9 @@ export function makeChart(chartData: IChartData): IRenderable<any> {
function render(container: HTMLElement): void {
const chartContainer = makeChartContainer();
container.appendChild(chartContainer);
initSizeProps(chartContainer);
const plotArea = makePlotArea(chartStateController);
plotArea.render(chartContainer, { plotWidth, plotHeight });
......@@ -36,7 +39,6 @@ export function makeChart(chartData: IChartData): IRenderable<any> {
const legend = makeLegend(chartStateController);
legend.render(chartContainer);
container.appendChild(chartContainer);
}
function makeChartContainer(): HTMLElement {
......@@ -44,4 +46,11 @@ export function makeChart(chartData: IChartData): IRenderable<any> {
classList: ['chart-container'],
});
}
function initSizeProps(chartContainer: HTMLElement): void {
plotWidth = chartContainer.offsetWidth;
console.log(plotWidth);
plotHeight = Math.round(0.75 * plotWidth);
previewHeight = Math.round(plotHeight / 5);
}
}
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