दृश्य सुधार

केस स्टडीज़: R में Shiny के साथ वेब एप्लिकेशन बनाना

Dean Attali

Shiny Consultant

Shiny टेबल्स

tableOutput("table")

output$table <- renderTable({ gapminder })

chapter3_4_visual_enhancements.003.png

DT से बेहतर टेबल बनाएँ

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.004.png

DT से बेहतर टेबल बनाएँ

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.005.png

DT से बेहतर टेबल बनाएँ

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.006.png

DT से बेहतर टेबल बनाएँ

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.007.png

DT से बेहतर टेबल बनाएँ

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.008.png

UI को टैब्स में बाँटें

chapter3_4_visual_enhancements.009.png

UI को टैब्स में बाँटें

chapter3_4_visual_enhancements.010.png

UI को टैब्स में बाँटें

tabPanel(title = "tab 1", "content goes here")

tabPanel(title = "tab 2", "second tab", plotOutput("plot"))

fluidPage(

  tabsetPanel(

    tabPanel(title = "tab 1", "first tab content goes here"),
    tabPanel(title = "tab 2", "second tab", plotOutput("plot")),
    tabPanel(title = "tab 3", textInput("text", "Name", ""))

  )

)

chapter3_4_visual_enhancements.016.png

CSS: अपने ऐप का लुक फाइन-ट्यून करें

Cascading Style Sheets
वेबपेज के किसी भी एलिमेंट का लुक कस्टमाइज़ करने की मार्कअप लैंग्वेज
- Shiny UI एक वेबपेज है
बैकग्राउंड रंग, टेक्स्ट रंग, टेक्स्ट साइज, व्हाइटस्पेस, फॉन्ट्स, ...

CSS सिंटैक्स

CSS रूल्स का सिंटैक्स

#ID {
  property: value;
  property: value;
  ...
}

ID वह एलिमेंट ID है जिस पर स्टाइल लगानी है
Shiny में CSS जोड़ने के लिए tags$style() का उपयोग करें
```
ui <- fluidPage(
  tags$style("
    #ID {
      property: value;
    }
  ")
)
```

CSS उदाहरण

ui <- fluidPage(
  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

chapter3_4_visual_enhancements.029.png

CSS उदाहरण

ui <- fluidPage(
  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

chapter3_4_visual_enhancements.030.png

CSS उदाहरण

ui <- fluidPage(
  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

chapter3_4_visual_enhancements.031.png

CSS उदाहरण

ui <- fluidPage(
  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

chapter3_4_visual_enhancements.032.png

CSS उदाहरण

css <- "

  #name {
    color: red;
  }

  #table {
    background: yellow;
    font-size: 24px;
  }

"

ui <- fluidPage(

  tags$style(css),

  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

अभ्यास करते हैं!

केस स्टडीज़: R में Shiny के साथ वेब एप्लिकेशन बनाना