Heads-up display additions to charts

The priority of a Hud element or transformation, lower value means higher priority.

Lower priority (higher values) huds will tend to be placed on the outside of a chart.

Hud elements are rendered in order from high to low priority and the positioning of hud elements can depend on the positioning of elements that have already been included. Equal priority values will be placed in the same process step.

The first example below, based in lineExample but with the legend placed on the right and coloured frames to help accentuate effects, includes (in order of priority):

• an inner frame, representing the core data area of the chart (Priority 1)
• the axes (5)
• the titles (Priority 12)
• the legend (Priority 50)
• an outer frame which is transparent and used to pad out the chart (Priority 100).

priorityv1Example = lineExample & (#hudOptions % #frames) .~ [(1, FrameOptions (Just defaultRectStyle) 0), (100, FrameOptions (Just (defaultRectStyle & #color .~ (palette1 4 & opac' .~ 0.05) & #borderColor .~ palette1 4)) 0.1)] & over (#hudOptions % #legends) (fmap (first (const (Priority 50)))) & #hudOptions % #legends %~ fmap (second (set #place PlaceRight))

The second variation below drops the title priorities to below the legend:

priorityv2Example = priorityv1Example & #hudOptions % #titles %~ fmap (first (const (Priority 51)))

A type for Rect to represent the bounding box of a chart.

A type for Rect to represent the bounding box of the data.

Named pair type to track the split of Chart elements into Hud and Canvas

• charts: charts that form the canvas or data elements of the chart; the rectangular dimension which is considered to be the data representation space.
• hud: charts that form the Hud.

A section of a HudChart

The Rect of a particular HudChartSection of a HudChart

Typical, configurable hud elements. Anything else can be hand-coded as a Hud.

The official hud options.

• A fixed chart aspect (width:height) of 1.5
• An x axis at the bottom and y axis at the left.
• The default tick style for each axis of an axis bar, tick glyphs (or marks), automated tick labels, and tick (or grid) lines.
• A high Priority (and thus inner), low-opacity frame, representing the data area of the chart.
• A low priority (outer), transparent frame, providing some padding around the chart.

alter a colour with a function

Make Huds and potential data box extension; from a HudOption and an initial data box.

Append a ChartTree to the hud section of a HudChart.

Add huds to the hud section of a HudChart, given a list of hud makers.

Convert a HudChart to a ChartTree labelling the hud and chart sections.

Combine huds and charts to form a new Chart using the supplied initial canvas and data dimensions. Note that chart data is transformed by this computation (a linear type might be useful here).

Add HudOptions to a ChartTree and scale to the ChartAspect.

Decorate a ChartTree with HudOptions

Compute a Rect representing the initial chart canvas from a ChartAspect and maybe a ChartTree, before the addition of style and hud elements.

>>> initialCanvas (FixedAspect 1.5) (Just $ unnamed [RectChart defaultRectStyle [one]])
Rect (-0.75) 0.75 (-0.5) 0.5

Compute a Rect representing the final chart canvas from a ChartAspect and maybe a ChartTree. The difference between initialCanvas and finalCanvas is using the actual chart canvas for CanvasAspect.

>>> finalCanvas (CanvasAspect 1.5) (Just $ unnamed [RectChart defaultRectStyle [one]])
Rect (-0.5) 0.5 (-0.5) 0.5

axis options

The official X-axis

The official Y-axis

Options for hud frames

>>> defaultFrameOptions
FrameOptions {frame = Just (Style {size = 6.0e-2, borderSize = 0.0, color = Colour 1.00 1.00 1.00 0.02, borderColor = Colour 0.00 0.00 0.00 0.00, scaleP = NoScaleP, anchor = AnchorMiddle, rotation = Nothing, translate = Nothing, escapeText = EscapeText, frame = Nothing, lineCap = Nothing, lineJoin = Nothing, dasharray = Nothing, dashoffset = Nothing, hsize = 0.6, vsize = 1.1, vshift = -0.25, glyphShape = SquareGlyph}), anchorTo = HudStyleSection, buffer = 0.0}

The official hud frame

Placement of elements around (what is implicity but maybe shouldn't just be) a rectangular canvas

Flip Place to the opposite side, or unchanged if PlaceAbsolute.

>>> flipPlace PlaceLeft
PlaceRight

The bar on an axis representing the x or y plane.

>>> defaultAxisBar
AxisBar {style = Style {size = 6.0e-2, borderSize = 0.0, color = Colour 0.05 0.05 0.05 0.40, borderColor = Colour 0.00 0.00 0.00 0.00, scaleP = NoScaleP, anchor = AnchorMiddle, rotation = Nothing, translate = Nothing, escapeText = EscapeText, frame = Nothing, lineCap = Nothing, lineJoin = Nothing, dasharray = Nothing, dashoffset = Nothing, hsize = 0.6, vsize = 1.1, vshift = -0.25, glyphShape = SquareGlyph}, size = 4.0e-3, buffer = 1.0e-2, overhang = 2.0e-3, anchorTo = CanvasSection}

The official axis bar

Options for titles. Defaults to center aligned, and placed at Top of the hud

>>> defaultTitleOptions "title"
TitleOptions {text = "title", style = Style {size = 0.12, borderSize = 1.0e-2, color = Colour 0.05 0.05 0.05 1.00, borderColor = Colour 0.02 0.29 0.48 1.00, scaleP = NoScaleP, anchor = AnchorMiddle, rotation = Nothing, translate = Nothing, escapeText = EscapeText, frame = Nothing, lineCap = Nothing, lineJoin = Nothing, dasharray = Nothing, dashoffset = Nothing, hsize = 0.6, vsize = 1.1, vshift = -0.25, glyphShape = SquareGlyph}, place = PlaceTop, anchor = AnchorMiddle, buffer = 4.0e-2}

The official hud title

axis tick markings

>>> defaultXTicks
Ticks {tick = TickRound (FormatN {fstyle = FSCommaPrec, sigFigs = Just 1, maxDistinguishIterations = 4, addLPad = True, cutRightZeros = True}) 5 TickExtend, glyphTick = Just (TickStyle {style = Style {size = 3.0e-2, borderSize = 4.0e-3, color = Colour 0.05 0.05 0.05 0.40, borderColor = Colour 0.05 0.05 0.05 0.40, scaleP = ScalePY, anchor = AnchorMiddle, rotation = Nothing, translate = Nothing, escapeText = EscapeText, frame = Nothing, lineCap = Nothing, lineJoin = Nothing, dasharray = Nothing, dashoffset = Nothing, hsize = 0.6, vsize = 1.1, vshift = -0.25, glyphShape = VLineGlyph}, anchorTo = CanvasSection, buffer = 1.0e-2}), textTick = Just (TickStyle {style = Style {size = 4.0e-2, borderSize = 1.0e-2, color = Colour 0.05 0.05 0.05 1.00, borderColor = Colour 0.02 0.29 0.48 1.00, scaleP = NoScaleP, anchor = AnchorMiddle, rotation = Nothing, translate = Nothing, escapeText = EscapeText, frame = Nothing, lineCap = Nothing, lineJoin = Nothing, dasharray = Nothing, dashoffset = Nothing, hsize = 0.6, vsize = 1.1, vshift = -0.25, glyphShape = SquareGlyph}, anchorTo = HudStyleSection, buffer = 1.0e-2}), lineTick = Just (TickStyle {style = Style {size = 5.0e-3, borderSize = 1.0e-2, color = Colour 0.05 0.05 0.05 0.05, borderColor = Colour 0.02 0.29 0.48 1.00, scaleP = NoScaleP, anchor = AnchorMiddle, rotation = Nothing, translate = Nothing, escapeText = EscapeText, frame = Nothing, lineCap = Nothing, lineJoin = Nothing, dasharray = Nothing, dashoffset = Nothing, hsize = 0.6, vsize = 1.1, vshift = -0.25, glyphShape = SquareGlyph}, anchorTo = CanvasSection, buffer = 0.0})}

Common elements across all tick types.

The official glyph tick

The official glyph tick

The official text tick

The official line tick

The official X-axis tick

The official Y-axis tick

Style of tick marks on an axis.

The official tick style

>>> defaultTick
TickRound (FormatN {fstyle = FSCommaPrec, sigFigs = Just 1, maxDistinguishIterations = 4, addLPad = True, cutRightZeros = True}) 5 TickExtend

Whether Ticks are allowed to extend the data range

Lens between a FormatN and a Tick.

Lens between number of ticks and a Tick.

Only for TickRound and TickExact

Lens between a FormatN and a Tick.

adjust Tick for sane font sizes etc

options for prettifying axis decorations

>>> defaultAdjustments
Adjustments {maxXRatio = 8.0e-2, maxYRatio = 6.0e-2, angledRatio = 0.12, allowDiagonal = True}

The official hud adjustments.

Legend options

>>> defaultLegendOptions
LegendOptions {legendSize = 0.3, buffer = 0.1, vgap = 0.2, hgap = 0.1, textStyle = Style {size = 0.16, borderSize = 1.0e-2, color = Colour 0.05 0.05 0.05 1.00, borderColor = Colour 0.02 0.29 0.48 1.00, scaleP = NoScaleP, anchor = AnchorMiddle, rotation = Nothing, translate = Nothing, escapeText = EscapeText, frame = Nothing, lineCap = Nothing, lineJoin = Nothing, dasharray = Nothing, dashoffset = Nothing, hsize = 0.6, vsize = 1.1, vshift = -0.25, glyphShape = SquareGlyph}, innerPad = 0.1, outerPad = 2.0e-2, frame = Just (Style {size = 6.0e-2, borderSize = 5.0e-3, color = Colour 0.05 0.05 0.05 0.00, borderColor = Colour 0.05 0.05 0.05 1.00, scaleP = NoScaleP, anchor = AnchorMiddle, rotation = Nothing, translate = Nothing, escapeText = EscapeText, frame = Nothing, lineCap = Nothing, lineJoin = Nothing, dasharray = Nothing, dashoffset = Nothing, hsize = 0.6, vsize = 1.1, vshift = -0.25, glyphShape = SquareGlyph}), place = PlaceRight, scaleChartsBy = 0.25, scaleP = ScalePX, legendCharts = []}

The official legend options

Create an axis.

title append transformation.

Make a frame hud transformation.

Make a legend from LegendOptions given an existing HudChart