refactor: cleanup chart component

src/chart-components/chart.ts

@@ -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);
   }
 }