computeLayout method

void computeLayout ()

Computes the plot layout: Sets up the graphics containers and their relative coordinates and sizes.

Implementation

void computeLayout() {
  // get divs from 'example.html'
//    plotDiv = (querySelector("#plot_div") as DivElement);

  // the plot takes all available space
//    plotDiv.style
//      ..width = "${appDiv.clientWidth}px"
//      ..height = "${appDiv.clientHeight}px";

  // Reserve space in pixels for the axes labels and a border around everthing.
  int xaxAreaHeight = 70, yaxAreaWidth = 80, borderAreaSize = 15;

  // will contain the entire plot
  plotAreaRect = math.Rectangle<int>(
      borderAreaSize,
      borderAreaSize,
      plotDiv.clientWidth - 2 * borderAreaSize,
      plotDiv.clientHeight - 2 * borderAreaSize);

  // all coordinates in the following rectangles are are relative to plotRect
  dataInsets = math.Rectangle<int>(borderAreaSize, borderAreaSize, 0, 0);

  // will contain the polylines and the legend
  dataAreaRect = math.Rectangle<int>(
      yaxAreaWidth,
      dataInsets.top,
      plotAreaRect.width - yaxAreaWidth - dataInsets.left,
      plotAreaRect.height - xaxAreaHeight);

  // will contain the x axis tic marks and text labels
  xaxisRect = math.Rectangle<int>(
      dataAreaRect.left,
      dataAreaRect.top + dataAreaRect.height,
      dataAreaRect.width,
      xaxAreaHeight);

  // will contain the y axis tic marks and text labels
  yaxisRect = math.Rectangle<int>(dataAreaRect.left - yaxAreaWidth,
      dataAreaRect.top, yaxAreaWidth, dataAreaRect.height);

  // will contain all axes and the data area (polylines and legend)
  plotArea = SvgSvgElement();
  SVG.setAttr(plotArea, {
    SVG.WIDTH: "${plotAreaRect.width}",
    SVG.HEIGHT: "${plotAreaRect.height}",
  });

  // will contain polylines and legend
  dataArea = SvgSvgElement();
  SVG.setAttr(dataArea, {
    SVG.X: "${dataAreaRect.left}",
    SVG.Y: "${dataAreaRect.top}",
    SVG.WIDTH: "${dataAreaRect.width}",
    SVG.HEIGHT: "${dataAreaRect.height}",
  });

  // a border around the data area
  dataAreaBorder = RectElement();
  SVG.setAttr(dataAreaBorder, {
    SVG.X: "${dataAreaRect.left}",
    SVG.Y: "${dataAreaRect.top}",
    SVG.WIDTH: "${dataAreaRect.width}",
    SVG.HEIGHT: "${dataAreaRect.height}",
    SVG.FILL: "none",
    SVG.STROKE: "darkgreen",
    SVG.STROKE_WIDTH: "2"
  });

  // now stack the plot containers.
  plotDiv.append(plotArea);
  plotArea.append(dataArea);
  plotArea.append(dataAreaBorder); // draw above dataArea
}