Gauge / Gauge Panels / The Gauge Layout
In This Topic
    The Gauge Layout
    In This Topic

    Nevron Gauge for SharePoint supports multiple gauge areas and titles. In order to take full advantage of this feature you must understand how the gauge layout system works.

     Panels and the Box Model

    Nevron Gauge for SharePoint treats gauge areas and titles as panels. Panels use a box model, which is summarized by the following drawing: 

    Each panel has margins and padding. The margins define a white space around each panel. The padding defines the space with which the panel content is padded (inflated). The margins and padding settings can be inherited from the gauge default margins and padding settings, if the respective Automatic property is set to true.

    By default the Automatic property for the margins and padding of all panels is set to true and the actual margins and padding are obtained from the gauge control default margins and padding. You can modify the default margins and padding from the Gauge > Layout tab. The margins and padding of each panel are accessible from the Layout tab for that panel.

    In general the layout algorithm described below uses a combination of docking and absolute positioning. When a panel is docked both it margins and padding are taken into account to display the content at its best size. When a panel is manually positioned the margins are ignored, since they are not needed (margins define a white space, which only automatic layouts should consider).

     The Layout Algorithm

    The following image illustrates the layout areas in the Nevron Gauge for SharePoint product: 

    The layout algorithm performs the following steps:

    1. Layout the Outer Titles

      Outer titles are such titles for which the Position property is set to Dock To Gauge.

      The Dock Position property in this case determines the side at which the title must be docked in the outer titles area and the alignment of the title in this side area. For example:

      Dock Position = Top Center means dock the title to the top side and align it in the center.

      Dock Position = Right Top means dock the title to the right side and align it to the top.

    2. Position the Gauge Areas Host Panel

      The gauge areas host panel is an invisible panel, which fills the space which remains after step 1 has been performed.

    3. Layout the Gauge Area Host Panels

      The gauge areas host panels are invisible panels, which are created for each gauge area. These panels are split into two sets - the ones that use automatic positioning and the ones that use manual positioning.

      A gauge area uses automatic positioning, if its Automatic position property is set to true (go to Gauge Area - Layout tab and set to true the Automatic property in the Position group). Automatically positioned gauge areas are placed in the cells of an imaginary grid, the sizing of which is determined by the Gauge - LayoutGauge Areas Layout property group.

      A gauge area uses manual positioning, if its Automatic position property is set to false. In this case you can choose from one of the following manual position options:

      Manual Position Mode Description
      Root Box In this mode the gauge position is determined in percentages of the Gauge Areas Host Panel.
      Parent Box In this mode the gauge position is determined in percentages of the Gauge Area specified by the Parent Area combo.
      Parent Radial In this mode the gauge center is determined in polar coordinates (Offset, Angle) from the Gauge Area specified by the Parent Area combo. The size of the gauge is specified by the Width and Height settings.

      The Z order of the gauge areas is always determined by the order in which they appear in the Gauge Areas Collection.

    4. Layout the Inner Titles (for each gauge area host panel)

      Inner titles are such titles for which the Position property is set to Dock To Gauge Area. You must pick a gauge area to which to dock from the Gauge Area property. The Dock Position property in this case determines the side at which the title must be docked in the inner titles area of the gauge area host panel and the alignment of the title in this side area.

    5. Position the gauge areas (for each gauge area host panel)/

      The gauge area fills the space, which remains after steps 3 and 4 have been performed.

    6. Layout the Plot Titles (for each gauge area)

      Plot titles are such titles for which the Position property is set to Dock To Gauge Plot Area. You must pick a gauge area to which to dock from the Gauge Area property. The Dock Position property in this case determines the side at which the title must be docked in the gauge plot area and the alignment of the title in this side area.

    7. Layout the Floating Titles

      Floating titles are such titles for which the Position property is set to Manual. A floating title is positioned relatively to a pin point. The pin point coordinates are specified in percents of the area, which remained after the control border was applied (by the Pin X Percent and Pin Y Percent properties). The title is aligned to the pin point via the Pin Alignment property. For example:

      Pin X Percent = 0, Pin Y Percent = 0, Pin Alignment = Bottom Right - means position the pin point at the 0, 0 percents and align the title so that it is located at the bottom right side of the pin point.