Layout

Edit the layout file that you have specified in apps.graphsrv.layout_config_file to add new layouts or edit existing ones. Graphsrv will automatically reload changes to the file while it's running, and they should be visible after a page reload.

layouts:

  # all layouts go here, indexed by their name

  index:
    # the name 'index' is reserved and will be the layout 
    # rendered at /
    # 
    # it is required to be an 'index' type layout 
    #
    # ... layout config ...

  layout_one:
    # other layouts can by of type 'index' or 'custom' 
    # ... layout config ...

  layout_two:
    # ... layout config ..

Layouts are indexed by their name, names can be whatever you want them to be, but there are two required ones that should exist in any layout config.

• index - the index layout rendered at /
• detail - the layout used to render a graph group after clicking through from the index page

Layout types

index

Index layout types allow you to quickly generate a grid to render multiple graph groups

layouts:

  # this is the layout that will be rendered to /, it is required to be of type 'index'

  index:

    # layout type: 'index'
    type: index

    # allows place for 9 graphs
    grid: 3x3

    # graph configuration
    graph:

      # we use the 'multitarget' graph we configured in config.yml (see Getting Started)
      config: multitarget
      fit: 'yes'
      targets: all

If you wish, however, you may normally define the index layout as well

layouts:

  # this is the layout that will be rendered to /, it is required to be of type 'index'

  index:
    # layout type: 'index'
    type: index

    layout:
    - cols:
      # col 1, graph 1
      - graph:
        config: multitarget
        fit: 'yes'
        targets: all
        # since index layouts are loaded without specified source, we need to 
        # tell the graph where it is geting it's data from
        source: source_a.first
        id: multitarget-source_a.first
        width: 6
      # col 1, graph 2
      - graph:
        config: multitarget
        fit: 'yes'
        targets: all
        # since index layouts are loaded without specified source, we need to 
        # tell the graph where it is geting it's data from
        source: source_a.second
        id: multitarget-source_a.second
        width: 6
    height: 100

custom

Custom layouts are completely customizable using bootstrap to render a responsive grid

layouts:

  # the detail layout is used to render graph group details after
  # clicking through from the index page

  detail:

    # layout type: 'custom'
    type: custom

    # grid
    layout:
    # row 1
    - cols:
      # col 1, render a graph
      - graph:

          # we use the 'multitarget' graph we configured in config.yml (see Getting Started)
          config: multitarget

          # fit to column
          fit: 'yes'

          # render all targets of the graph group to this graph
          targets: all

          # custom graph id - needs to be unique to this layout
          id: multitarget-1

        # use maximum width
        width: 12

      # use maximum height
      height: 100

Custom Layout Example

In this example we make a layout that evenly distributes all plots of a graph group

The layout will render two rows of full width graphs

layouts:
  test:
    type: custom
    layout:
    # row 1
    - cols:
      # col 1, render a graph
      - graph:
          config: multitarget
          fit: 'yes'
          targets: all
          id: multitarget-1
        width: 12
      height: 50
    # row 2 
    - cols:
      # col 1, render a graph
      - graph:
          config: multitarget
          fit: 'yes'
          targets: all
          id: multitarget-2
        width: 12
      height: 50

In order to view this layout specify the layout paramter and a graph group as source in this URL paremeters

/?layout=test&source=source_a.first