Начало работы с информационными панелями

Информационные панели особенно распространены в отчетах в деловом стиле. Их можно использовать для выделения сводки и основного содержания отчета. Макет панели инструментов обычно основан на сетке с компонентами, расположенными в «коробках» разных размеров.

использоватьflexdashboardпакет, можно

Публикуйте набор связанных визуализаций данных в виде информационных панелей с помощью R Markdown.
Внедряйте широкий спектр компонентов, включая виджеты HTML, графику R, табличные данные и текстовые аннотации.
Можно указать макет строки или столбца (компоненты автоматически изменяют размер, чтобы заполнить браузер, а также отлично подходят для мобильных устройств).
Раскадровки могут быть созданы для представления визуализаций и связанных аннотаций.
Используйте Shiny для управления динамической визуализацией (необязательно).

Для создания дашборда вы можете использовать выходной форматflexdashboard::flex_dashboardдля создания документа R Markdown. Конечно, проще использоватьFile -> New File -> R MarkdownДиалоговое окно создает документ в RStudio и выбирает шаблон «Flex Dashboard».

Примечание: Если вы не используете RStudio, вы также можете создать новый из консоли R.flexdashboardR Markdown, конкретные операции заключаются в следующем:

rmarkdown::draft(
  "dashboard.Rmd", template = "flex_dashboard",
  package = "flexdashboard"
)

flexdashboardПолная документация выглядит следующим образом:Премьера Markdown.R studio.com/flex сегодня.... В этой главе представлены только некоторые основные функции и способы их использования. Информационные панели имеют многие из тех же функций, что и HTML-документы (раздел @ref(html-document)), например, графические параметры.

(Раздел @ref(figure-options)), Внешний вид и стиль @ref(appearance-and-style)), уравнения MathJax @ref(mathjax-equations)), заголовок и содержимое тела (Раздел @ref(includes)) и Pandoc аргументы (раздел @ref(pandoc-arguments)) и т. д. Поэтому, если у вас есть время, я предлагаю вам также взглянуть на главы, упомянутые ранее. Кроме того, мы рекомендуем вам заглянуть на страницу справки R.?flexdashboard::flex_dashboardУзнать большеflexdashboardособенности и опции.

набор текста

Общие правила оформления дашбордов таковы:

Первый уровень: сгенерировать страницу;
Второй уровень: генерировать столбцы (или строки);
Уровень 3: Build Box (содержит один или несколько компонентов Dashboard).

Простой пример приведен ниже:

---
title: "Get Started"
output: flexdashboard::flex_dashboard
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column 1
--------------------------------------------------

### Chart A

```{r}
```

Column 2
--------------------------------------------------

### Chart B

```{r}
```

### Chart C

```{r}
```

Обратите внимание, что ряд тире под первой строкой текста (столбец) — это еще одна форма синтаксиса Markdown для заголовков второго уровня, а именно:

Column 1
--------------------------------------------------

Эквивалентно

## Column 1

Мы использовали серию дефисов, чтобы сделать второй раздел более заметным в исходном документе.

По умолчанию второй раздел создает столбцы на информационной панели, а третий раздел размещается вертикально в столбцах. Таким образом, вам не нужно настраивать столбцы на панели инструментов, поскольку по умолчанию столбцы представляют собой вертикальный набор столбцов.

Текст второго раздела не будет отображаться в выводе. Заголовок второго раздела используется только для макета (например, столбец 1 в примере), поэтому фактическое содержимое заголовка не имеет никакого значения. Напротив, заголовки первого и третьего уровня более важны.

На изображении ниже показан результат приведенного выше примера с двумя столбцами, первый содержит «Диаграмму A», а второй содержит «Диаграмму B» и «Диаграмму C».

Примечание: мы не помещали код R в блок кода, поэтому все поля пусты. В этих блоках кода вы можете написать произвольный код R для создания графиков R, виджетов HTML и@ref(dashboard-components) Различные другие компоненты, описанные в разделе.

макет на основе строк

Вы можете передать параметры ориентации (orientation), чтобы изменить макет, ориентированный на столбцы, на макет, ориентированный на строки, например:

output:
  flexdashboard::flex_dashboard:
    orientation: rows

Затем второй уровень будет упорядочен по строке, а третий уровень будет упорядочен по столбцу в строке.

Свойства раздела

Заголовок второго раздела содержит некоторые свойства, например: установить ширину столбца на 350:

A narrow column {data-width=350}
--------------------------------

Для макетов, ориентированных на строки, вы можете установить строкуdata-heightАтрибуты.{.tabset}Можно применить к столбцам, чтобы третий раздел был с вкладками, например:

Two tabs {.tabset}
------------------

### Tab A

### Tab B

Полученный результат выглядит следующим образом:

Несколько страниц

Если в документе содержится более одного содержимого первого уровня, они будут отображаться в виде отдельных страниц на информационной панели. Пример приведен ниже, как показано на рисунке ниже.

---
title: "Multiple Pages"
output: flexdashboard::flex_dashboard
---

Visualizations {data-icon="fa-signal"}
===================================== 
    
### Chart 1
    
```{r}
```
    
### Chart 2

```{r}
```
   
Tables {data-icon="fa-table"}
=====================================     

### Table 1
    
```{r}
```
    
### Table 2

```{r}
```

Примечание: ряд знаков равенства — это еще один синтаксис Markdown для заголовков разделов первого уровня (можно также использовать один знак фунта).#).

Название страницы отображается в меню навигации в верхней части панели инструментов. В этом примере мы передаемdata-iconсвойство, чтобы применить значок к заголовку страницы. Конечно, вы можете получить его по этому URL-адресу.fontawesome.comНайдите другие доступные значки.

Раскадровка

В дополнение к макету на основе столбцов или строк вы также можете представить серию визуализаций или связанных комментариев с помощью макета «раскадровки». использоватьstoryboardвозможность включить его.

Ниже приведен пример, как показано ниже, левая и правая кнопки навигации вверху помогают вам перемещаться по всему содержимому раскадровки.

---
title: "Storyboard Commentary"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

### A nice scatterplot here

```{r}
plot(cars, pch = 20)
grid()
```

---

Some commentary about Frame 1.

### A beautiful histogram on this board

```{r}
hist(faithful$eruptions, col = 'gray', border = 'white', main = '')
```

---

Some commentary about Frame 2.`r xfun::file_string('examples/dashboard/03-storyboard.Rmd')`

Результат выглядит следующим образом:

Компоненты {#dashboard-components}

В компоновку информационной панели могут быть включены различные компоненты, в том числе:

Интерактивная визуализация данных JavaScript на основе виджетов HTML.
Вывод графики R, включая базовую, решетчатую и сетчатую графику.
Таблицы (дополнительные параметры, такие как сортировка, фильтрация и нумерация страниц).
Поле значений для выделения важных сводных данных.
Датчик, используемый для отображения значений на датчике в пределах указанного диапазона.
Различные текстовые аннотации.
Панель навигации, которая предоставляет больше ссылок, связанных с приборной панелью.

Примечание: первые три компонента доступны в большинстве документов R Markdown независимо от выходного формата. Последние четыре компонента зависят от инструмента, и мы кратко опишем их в этом разделе.

Поле значений

Если вы хотите включить одно или несколько значений в панель инструментов. можно использоватьflexdashboardв упаковкеvalueBox()Функция для отображения одного значения вместе с заголовком и необязательным значком. Например, вот три смежных раздела, каждый из которых отображает одно значение (см. вывод ниже):

---
title: "Dashboard Value Boxes"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

```{r setup, include=FALSE}
library(flexdashboard)
# these computing functions are only toy examples
computeArticles = function(...) return(45)
computeComments = function(...) return(126)
computeSpam = function(...) return(15)
```

### Articles per Day

```{r}
articles = computeArticles()
valueBox(articles, icon = "fa-pencil")
```

### Comments per Day

```{r}
comments = computeComments()
valueBox(comments, icon = "fa-comments")
```

### Spam per Day

```{r}
spam = computeSpam()
valueBox(
  spam, icon = "fa-trash",
  color = ifelse(spam > 10, "warning", "primary")
)
```

Результат выглядит следующим образом:

Здесь мы сосредоточимся на объяснении третьего блока кода (### Spam per Day). здесьvalueBox()Функция определяет значение (spam) и указывает значок (icon = "fa-trash"). и использоватьcolorЦвет поля параметра, используяifelse()заявление, чтобы разные цвета отображались в зависимости от значения. Конечно, есть и другие цвета:"info", "success"и"danger"(По умолчанию:"primary"). Вы также можете указать любой допустимый цвет CSS (например:"#ffffff","rgb(100, 100, 100)"Ждать).

метр

Измеритель отображает значение на измерителе в пределах указанного диапазона. Например, ниже показан набор из трех датчиков (см. @ref(fig:dashboard-gauges))

---
title: "Dashboard Gauges"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

```{r setup, include=FALSE}
library(flexdashboard)
```

### Contact Rate

```{r}
gauge(91, min = 0, max = 100, symbol = '%', gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)
))
```

### Average Rating 

```{r}
gauge(37.4, min = 0, max = 50, gaugeSectors(
  success = c(41, 50), warning = c(21, 40), danger = c(0, 20)
))
```

### Cancellations

```{r}
gauge(7, min = 0, max = 10, gaugeSectors(
  success = c(0, 2), warning = c(3, 6), danger = c(7, 10)
))
```

Результат выглядит следующим образом:

В этом примере необходимо пояснить следующие моменты:

gauge()Функция выводит информационную панель. Он имеет три обязательных параметра:value,minиmax(можно любое количество).
Можно указать необязательный символ (symbol) вместе со значением (в примере "%"используется для обозначения процента).
можно использоватьgaugeSectors()Функция задает пользовательский набор цветовых секторов, цвет по умолчанию — зеленый. варианты секторов (sectors) можно указать диапазон из трех значений (success, warningиdanger) изменяет цвет приборной панели в соответствии с его значением.

текстовая аннотация

Если вам нужно включить дополнительные описательные описания в информационную панель, вы можете сделать это следующим образом:

Перед отображением информационной панели вы можете добавить соответствующий текстовый контент вверху страницы.
Вы можете определить информационные панели, которые не содержат диаграмм, а содержат произвольное содержимое (текст, изображения, уравнения и т. д.).

Например, следующее изображение содержит некоторые описания контента вверху и информационную панель только для контента в правом нижнем углу (см. @ref(fig:dashboard-text)):

---
title: "Text Annotations"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

Monthly deaths from bronchitis, emphysema and asthma in the
UK, 1974–1979 (Source: P. J. Diggle, 1990, Time Series: A
Biostatistical Introduction. Oxford, table A.3)

```{r setup, include=FALSE}
library(dygraphs)
```

Row {data-height=600}
-------------------------------------

### All Lung Deaths

```{r}
dygraph(ldeaths)
```

Row {data-height=400}
-------------------------------------

### Male Deaths

```{r}
dygraph(mdeaths)
```

> Monthly deaths from lung disease in the UK, 1974–1979

### About dygraphs

This example makes use of the dygraphs R package. The dygraphs
package provides rich facilities for charting time-series data 
in R. You can use dygraphs at the R console, within R Markdown
documents, and within Shiny applications.

Результат выглядит следующим образом:

Примечание: каждый компонент на информационной панели может включать в себя заголовок и раздел примечаний. Заголовок - третий слой (###) текст после заголовка раздела. Комментарии начинаются с блока кода, который производит вывод компонента.>любой текст, начинающийся с .

Панель навигации

По умолчанию панель навигации панели включает: заголовок документа (title),автор(author) и дату (date). Если панель управления содержит несколько страниц (раздел @ref(multiple-pages)), левая часть панели навигации также содержит ссылки на отдельные страницы. Вы также можете добавить социальные ссылки на панель инструментов.

Кроме того, вы также можете использоватьnavbarВозможность добавления пользовательских ссылок на панель навигации. Например, следующий параметр добавляет ссылку «О программе» на панель навигации:

---
title: "Navigation Bar"
output:
  flexdashboard::flex_dashboard:
    navbar:
      - { title: "About", href: "https://example.com/about" }
---

Интерфейс, полученный на данный момент, выглядит следующим образом:

Элементы панели навигации должны включать поле заголовка или значка (или и то, и другое). Вы также должны включитьhrefкак навигационная цель,alignТакже можно установить (по умолчанию вправо).

Конечно, вы также можетеsocialВозможность добавления ссылок на службы обмена в социальных сетях. Например, на панели внизу есть ссылки на Twitter и Facebook, а также выпадающее меню с более полным списком сервисов:

---
title: "Social Links"
output:
  flexdashboard::flex_dashboard:
    social: [ "twitter", "facebook", "menu" ]
---

Интерфейс, полученный на данный момент, выглядит следующим образом:

Социальные опции также включают следующее:"facebook", "twitter", "google-plus", "linkedin"и"pinterest". Вы также можете указать"menu"предоставить общее раскрывающееся меню для всех сервисов.