shinyMobile (version 0.7.0)

f7Gauge: Create a Framework7 gauge

Description

Build a Framework7 gauge

Usage

f7Gauge(
  id,
  type = "circle",
  value,
  size = 200,
  bgColor = "transparent",
  borderBgColor = "#eeeeee",
  borderColor = "#000000",
  borderWidth = "10",
  valueTextColor = "#000000",
  valueFontSize = "31",
  valueFontWeight = "500",
  labelText = NULL,
  labelTextColor = "#888888",
  labelFontSize = "14",
  labelFontWeight = "400"
)

Arguments

id

Gauge ID.

type

Gauge type. Can be "circle" or "semicircle". Default is "circle."

value

Gauge value/percentage. Must be a number between 0 and 100.

size

Generated SVG image size (in px). Default is 200.

bgColor

Gauge background color. Can be any valid color string, e.g. #ff00ff, rgb(0,0,255), etc. Default is "transparent".

borderBgColor

Main border/stroke background color.

borderColor

Main border/stroke color.

borderWidth

Main border/stroke width.

valueTextColor

Value text color.

valueFontSize

Value text font size.

valueFontWeight

Value text font weight.

labelText

Gauge additional label text.

labelTextColor

Label text color.

labelFontSize

Label text font size.

labelFontWeight

Label text font weight.

Examples

# NOT RUN {
if(interactive()){
 library(shiny)
 library(shinyMobile)

 shiny::shinyApp(
  ui = f7Page(
    title = "Gauges",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Gauge"),
     f7Block(
      f7Gauge(
       id = "mygauge",
       type  = "semicircle",
       value = 50,
       borderColor = "#2196f3",
       borderWidth = 10,
       valueFontSize = 41,
       valueTextColor = "#2196f3",
       labelText = "amount of something"
      )
     )
    )
  ),
  server = function(input, output) {}
 )
}

# }