semantic.dashboard入门
仪表板（Dashboards）使您可以直观地组织报表，并将其分解为易于阅读的块。因此，与传统报告相比，最终用户可以更轻松地浏览数据。
R包shinydashboard 已经问世了很长时间，它是具有非常不错的功能。但是，使用它构建的应用程序看起来很相似，特别是如果您在多个项目中使用它。许多简单的仪表板应用可能给客户留下不好的印象。这就是semantic.dashboard发挥作用的地方。
semantic.dashboard 是Appsilon创建的Shinydashboard的替代方案，它可以将Fomantic UI组件包含到R Shiny应用程序中。
本文来自《数据黑客》，登录官网可阅读更多精彩资讯和文章。
让我们看一下两个相同的应用程序，第一个app使用shinydashboard ，第二个使用semantic.dashboard：
使用shinydashboard构建的仪表板app
使用semantic.dashboard构建的仪表板app
两个App的UI看起来都不错，但是使用semantic.dashboard的UI更有特色。本文中我们将使用semantic.dashboard创建一个简单的网页app。
此处下载本文的源代码：https://appsilon.com/wp-content/uploads/2020/12/semantic-dashboard-code.zip
安装semantic.dashboard
要安装semantic.dashboard，从R控制台执行以下命令：
install.packages("semantic.dashboard")
先创建一个空的仪表盘：
library(shiny)
library(semantic.dashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(sidebarMenu()),
dashboardBody()
)
server <- function(input, output) { }
shinyApp(ui, server)
输出如下：
应用程序界面由dashboardPage定义，页面进一步分为三个元素：
- 页眉 –
dashboardHeader - 侧边栏 –
dashboardSidebar - 主体 –
dashboardBody
UI结构与shinydashboard相同，这使得semantic.dashboard非常容易上手。
dashboardHeader有很多参数可以调整，例如，为color参数指定一个值来更改颜色，设置logo_path和logo_allign参数来包含logo，如果要删除标题，指定disabled = TRUE。
将页眉的背景颜色从白色更改为蓝色：
dashboardHeader(color = "blue", inverted = TRUE)
inverted参数将颜色设置为标题背景，而不是标题文本。
输出结果如下：
接下来，让我们看看如何将元素添加到dashboardSidebar。side参数（默认为左侧）指定边栏大小，设置disable = TRUE可以禁用侧边栏。
增加侧边栏的宽度：
dashboardSidebar(
size = "wide",
sidebarMenu(
menuItem(tabName = "panel1", text = "Panel 1"),
menuItem(tabName = "panel2", text = "Panel 2")
)
)
结果如下：
当单击选项卡时如何显示不同的内容？ 需要在dashboardBody中定义。
先添加tabItems和两个选项卡，它们对应于侧边栏中的两个选项。默认情况下，第一个选项是选中的，与selected参数指定的一样。在两个面板上应该只有一个文本框可见。
dashboardBody(
tabItems(
selected = 1,
tabItem(
tabName = "panel1",
textOutput(outputId = "text1")
),
tabItem(
tabName = "panel2",
textOutput(outputId = "text2")
)
)
)
为了在页面上显示文字，现在需要定义server函数：
server <- function(input, output) {
output$text1 <- renderText("This is Panel 1")
output$text2 <- renderText("This is Panel 2")
}
仪表板看起来如下：
现在您应该掌握了semantic.dashboard的基础知识，接下来让我们继续完善，在页面上显示交互式的地图。
构建一个交互式的仪表板
R有许多内置数据集， quakes是其中之一，它显示了自1964年以来在斐济附近发生的1000次地震事件的地理位置。
Quakes数据集的前几行：
使用以下选项卡开发仪表板：
- Interactive map – 显示斐济附近的地理区域，并带有代表地震事件强度的标记
- table – 用表格呈现源数据集
使用leaflet包创建交互式地图，确保已安装它：
install.packages(“leaflet”)
UI遵循第一部分介绍的模式：标题，侧边栏和主体。这次将标题设置为空，大多数差异都在dashboardBody 。结构看起来应该很熟悉，但是有两个新功能：
leafletOutput()– 用于显示交互式地图dataTableOutput()– 用于显示数据表
为了使地图尽可能大，可以设置CSS样式，下面的代码修改了高度，因此地图始终占据整个屏幕高度。
用户界面的代码：
library(shiny)
library(shiny.semantic)
library(shinydashboard)
library(leaflet)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
size = "wide",
sidebarMenu(
menuItem(tabName = "map", text = "Map", icon = icon("map")),
menuItem(tabName = "table", text = "Table", icon = icon("table"))
)
),
dashboardBody(
tabItems(
selected = 1,
tabItem(
tabName = "map",
tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"),
leafletOutput("map")
),
tabItem(
tabName = "table",
fluidRow(
h1("Quakes Table"),
semantic_DTOutput("quakesTable")
)
)
)
)
)
接下来修改server函数，创建用于渲染地图和表格的代码。地震活动的大小决定了标记的大小，点击标记可以显示震级，深度（千米）和报告地震活动的站台数量。
后端代码：
server <- function(input, output) {
output$map <- renderLeaflet({leaflet() %>%
setView(lng = 179.3355929, lat = -20.4428959, zoom = 6.5) %>%
addProviderTiles("Esri.WorldStreetMap") %>%
addCircles(
data = quakes,
radius = sqrt(10^quakes$mag) * 30,
color = "#000000",
fillColor = "#ffffff",
fillOpacity = 0.5,
popup = paste0(
"Magnitude: ", quakes$mag, "",
"Depth (km): ", quakes$depth, "",
"Num. stations reporting: ", quakes$stations
)
)})
output$quakesTable <- DT::renderDataTable(
semantic_DT(quakes)
)
}
最终仪表板：
结论
在这个简单的指南中，我们学习了如何开发简单且美观的Shiny dashboard。希望您已经了解了什么是semantic.dashboard，它提供什么价值，以及如何与其它工具集成。
来源：R-bloggers
作者： Dario Radečić
翻译校对：数据黑客
原文标题：How to Make Impressive Shiny Dashboards in Under 10 Minutes with semantic.dashboard
数据黑客：专注金融大数据，聚合全网最好的资讯和教程，提供开源数据接口。
我们聚合全网最优秀的资讯和教程：
- 金融大数据
- 机器学习/深度学习
- 量化交易
- 数据工程
- 编程语言，Python，R，Julia，Scala，SQL
我们提供开源数据接口：
- 下载国内和国外海量金融数据
- API接口，将数据整合到您的平台