Grid layout

Atom Detail views are a collection of metrics. By default, these are laid out in the order they are defined in the detail_metrics (AtomList view) or metrics (AtomDetail view) array.

Depending on the screen size, Sightglass will lay out the metrics as tiles in a grid. The number of columns in the grid is determined by the screen size, and roughly maps to the following-

• 1 column: mobile devices
• 2 columns: tablets
• 3 columns: laptops
• 4 columns: desktops

You are able to specify the layout for each size. For each size layout, you will create an array that holds the rows. Each row must be an array of metric layout objects.

A metric layout object can be one of:

• a string, which refers to the metric id of the metric you want to place
• an object, with format {id: "metric_id", width: 1}, where the id is the metric id you want to place, and the width is the minimum number of columns the metric should fill.

The metrics in each row will expand to take up the width of the screen. Metrics that are not specified in the grid_layout will be added to new rows after the ones that are specified.

Example, given metrics with the following ids, in the following order: A, B, C, D, E, F:

    grid_layout: {
      "1": [
        ["E"], ["D"], ["B", "A"]
      ],
      "2": [
        ["A", "B"], [{id: "C", width: 1}], [{id: "D", width: 2}, "E"]
      ],
      "4": [
        ["A", "B", {id: "C", width: 2}], ["D", {id: "F", width: 2}, "E"]
      ]
    }

In the following examples, repeated letters are to show relative width, not repeating metrics.

The 1 column (mobile) display will be:

    E
    D
    B
    A
    C
    F

• Note that B and A are in separate lines- since they don’t fit on the same line, it moves A to the next line.
• Since C and F are not specified in the 1 column layout, they are added to new rows below the others, in the order they are defined in the detail_metrics (AtomList view) or metrics (AtomDetail view) array.

The 2 column (tablet) display will be:

    AB
    CC
    DD
    EE
    FF

• C takes up the entire row, despite having a width of 1. Metrics expand to fill the available space.
• Note that D and E are on separate lines- even though they are in the same row array, D takes up both columns, so E is moved to the next row.
• Even though E could fit on the same line as F, since F is not defined, it is automatically put in the next row, so E takes up the entire row.

The 3 column (laptop) display will be:

    AAABBB
    CCCCCC
    DDDDEE
    FFFFFF

• Since no 3 column layout is defined, the 2 column layout is used.
• A and B will both be 50% of the width.
• D takes up 2/3rds of the width, and E takes up 1/3rd

The 4 column display will be:

    ABCC
    DFFE