zuericssstyle

zuericssstyle is an R-Package, which provides specific css files and styled shiny widgets according to the corporate design of the city of Zurich. The package contains widgets and styling that Statistik Stadt Zürich have used so far for creating shiny apps that conform to the corporate design.

Installation

The easiest way to get zuericssstyle is to install it from this repo:

# install.packages("devtools")
devtools::install_github("StatistikStadtZuerich/zuericssstyle")

Alternatively, download the files (by clicking 'Clone or download' / 'Download Zip'), extract it to any location on your computer, e.g. to your Desktop and then run:

remotes::install_local("<path_to_location>/zuericssstyle-main")

Version

To check your version of zuericssstyle, run:

packageVersion("zuericssstyle")

Usage

A number of functions wrap around the original shiny functions to provide styling. All functions allow additional parameters of the original shiny function to be used and passed along.

Styled shiny widgets

All widgets need the css to work. This is added as an html dependency when using the ssz_page or the add_zcss_deps functions. Use ssz_page as a styled drop-in replacement of shiny's fluidPage:

ui <- ssz_page(...)

Alternatively, if you are not using a fluid page, wrap your ui (e.g. fixedPage or whatever you fancy) in add_zcss_deps:

ui <- add_zcss_deps(fixedPage(...))

Numeric input

sszNumericInput("number", "Zahl", 4)

This is based on shiny's numericInput.

Select input

sszSelectInput("select", "Destination:", choices = c("HOU", "LAX", "JFK", "SEA"), selected = "LAX")

The function wraps around shiny's selectInput.

Radio buttons

sszRadioButtons(
   inputId = "ButtonGroupLabel",
   label = "Flughafen:",
   choices = c("EWR", "JFK", "LGA"),
   selected = "JFK"
   )

The function wraps around shiny's radioButtons. Use inline = TRUE for horizontal alignment.

Radio Group Buttons

sszRadioGroupButtons(
    inputId = "years",
    choices = 2022:2024,
    selected = 2022 # default value
  )

The function wraps around shinyWidgets::radioGroupButtons.

Text input

sszTextInput("suchfeld", "Name:")

The function wraps around shiny's textInput.

Autocomplete

sszAutocompleteInput(
            "street",
            "Geben Sie eine Strasse ein",
            unique(addresses$StrasseLang)
          )

This relies on the autocomplete_input() function from the dqshiny package.

Slider input (Styling could change)

sszSliderInput(inputId = "choose_number", label = "sliderInput:", value = 30, min = 0, max = 100)

The function wraps around shiny's sliderInput. Currently this is not officially part of the city's CI/CD. Therefore the styling for the sliderInput might vary slightly at a later point in time (as of 2024-10-16).

Action button

sszActionButton("ActionButtonId", "Abfrage starten")

The function wraps around shiny's actionButton.

Download buttons

A download button for downloading an excel/csv file can be called with

sszDownloadButton("csvDownload",
                        label = "csv",
                        image = img(icons_ssz("download"))
                        )

The image parameter is optional; it is based on shiny's downloadButton.

A button for a link to an external site, e.g. an Open Government Data portal, can be used with

sszOgdDownload(outputId = "ogdDown",
                         label = "OGD",
                         href = "https://data.stadt-zuerich.ch/",
                         image = img(icons_ssz("external-link"))
            )

Provide the appropriate link in the href parameter.

Date Range

sszDateRange("DateRange", "Datum:",
   start  = "2001-01-01",
   end    = "2010-12-31",
   min    = "2001-01-01",
   max    = "2012-12-21"
   )

By default, the language is German and the date format is dd.mm.yyyy. This and additional parameters to shiny's dateRangeInput can be passed as parameters.

Date selection with shinyWidgets::airDatepickerInput

In contrast to the standard dateRangeInput, the airDatepickerInput allows selection of only years, or years and months, rather than 'only' year-month-day as with the dateRangeInput

By default, the language is set to 'de', and the dateFormat to "dd.mm.yyyy". Both parameters can be overridden by supplying something else.

Additionally, there are options for adding a specific calendar icon. By default, it looks like this, no calendar icon is shown, and internally, addon is set to 'none'.

sszAirDatepickerInput(
          inputId = "airMonthStart",
          label = "Basis Datum",
          dateFormat = "MM-yyyy",
          view="years",
          minView="months",
          autoClose=TRUE
        )

Alternatively, a custom image can be passed to be used instead of the calendar icon, in the form of a htmltools::tags$img(...).

sszAirDatepickerInput(
          inputId = "airMonthStart2",
          label = "Basis Datum",
          dateFormat = "MM-yyyy",
          view = "years",
          minView = "months",
          autoClose = TRUE,
          ssz_icon = img(icons_ssz("calendar"))
        )

CSS file for html

If you need the css file to e.g. style a html report, use

get_generic_css()

to get the css file written to your local folder. Alternatively, you can provide a full filepath (something like "C:/temp/mystyling.css" as a parameter.)

Getting help

If you encounter a bug, please open an issue or contact [email protected].