I am creating a Shiny dashboard application where for a menu item I have created two tab panels as shown in the below output.
Code:
library(shinydashboard)
library(shiny)
library(rAmCharts)
library(rCharts)
data(data_funnel)
body <- dashboardBody(
#tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"),
tabItems(
tabItem(tabName = "summary",
tabsetPanel(
tabPanel("tab1",
fluidRow(
box(
title = "Box title", width = 5, status = "primary",
amChartsOutput(outputId = "amfunnel",width = "100%",height = "350px")
),
box(
status = "warning", width = 5,
showOutput("stacked","nvd3")
),
box(
status = "warning", width = 2,
"Box Content"
)
)
),
tabPanel("tab2",
fluidRow(
box(
title = "Box title", width = 7, status = "primary",
amChartsOutput(outputId = "ambarplot",width = "100%",height = "350px")
),
box(
status = "warning", width = 3,
showOutput("piechart","nvd3")
),
box(
status = "warning", width = 2,
"Box Content"
)
)
)
)
)
)
)
server <- function(input, output) {
output$amfunnel <- renderAmCharts({
amFunnel(data = data_funnel, inverse = FALSE,margin_right = 0, margin_left = 190, label_side = "left")
})
output$stacked <- renderChart2({
hair_eye_male <- subset(as.data.frame(HairEyeColor), Sex == "Male")
n1 <- nPlot(Freq ~ Hair, group = "Eye", data = hair_eye_male, type = "multiBarHorizontalChart")
n1$params$height = 390
n1$params$width = 450
n1
})
output$ambarplot <- renderAmCharts({
dataset <- data.frame(get(x = "USArrests", pos = "package:datasets"))
amBarplot(y = c("Murder", "Assault", "UrbanPop", "Rape"), data = dataset, stack_type = "regular",horiz = TRUE,legend=TRUE)
})
output$piechart <- renderChart2({
p1 <- nPlot(~ cyl, data = mtcars, type = 'pieChart')
p1$params$height = 390
p1$params$width = 300
p1
})
}
# We'll save it in a variable `ui` so that we can preview it in the console
ui <- dashboardPage(
dashboardHeader(title = "Mixed layout"),
dashboardSidebar(
sidebarMenu(
menuItem("Summary",tabName = "summary")
)
),
body
)
# Preview the UI in the console
shinyApp(ui = ui, server = server)
The output is as follows :
The problem I am facing is when I navigate from tab1 -> tab2 and again from tab2 -> tab1 , the box2 properties of tab1 are getting overlayed by the box2 properties of tab2.
Please let me know your thoughts on how to fix this issue.
