index issue

RinteRface · Sep 26, 2024 · 6e351c9 · 6e351c9
1 parent 586d697
commit 6e351c9
Show file tree

Hide file tree

Showing 2 changed files with 243 additions and 3 deletions.
diff --git a/R/utils.R b/R/utils.R
@@ -91,7 +91,7 @@ code_chunk <- function(output, language = "r") {
 }
 
 print_r_code <- function(name) {
-  path <- system.file(sprintf("examples/shinylive/%s/app.R", name), package = "shiny386")
+  path <- system.file(sprintf("examples/shinylive/%s/app.R", name), package = "tablerDash")
   lines <- readLines(path)
   to_remove <- grep("webr::", lines)
   code_chunk(cat(paste(lines[-to_remove], collapse = "\n")))

diff --git a/index.md b/index.md
@@ -29,9 +29,9 @@ install.packages("tablerDash")
 
 ## Demo
 
-<div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-full-screen="false" data-require-bs-caller="card()" data-require-bs-version="5" id="bslib-card-2175" style="margin: 0 auto; float: none;">
+<div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-full-screen="false" data-require-bs-caller="card()" data-require-bs-version="5" id="bslib-card-5440" style="margin: 0 auto; float: none;">
 <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">
-<iframe class="html-fill-item" src="https://shinylive.io/r/app/#code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAdzgCMAnRRASwgGdSoAbbgCgA6YLnW5wGAESjsAFkNwACBnFRF2CgLwKCgsDNKlU7RAHoTDNuQYAzKATgYA5i1IyArnQwsi5y+Nv2ALTU0jCBBAxQECbyCkL6hsZmyqoYDMGhGEQMjkIAlHkCEEXcLIxQDACefLJslYUQpeVVfCJiktIyDU2RLXAEMhWk7AAsDN1lvdW1EJUA6iwAJo5wwxPN1TBQjhYG40UHEADECotQXOrW3ETUAOLcRQBu-aTZ6gA8gQpwAB6oUYsnBZFnwfpoFIEAMyISGKSrgqEwhowNwKT4KACMTxebwAJOwwejngRXgx2LjKtiSXj2PD0SiFAAqBR8DEQhTE0nkn4APQATHkmRycWSKezOXiflSubjiNcGGivtdHBiAAx8BhuCAsax8CAMG58CVkvKKDFm1UFQ4nAg8ChnBWoa6kIpncgfL7sOAARwwUnIfGkfvOcF0fNVGIAHIEIzGsWBTQog-7Q0Jw1HAhi+VD44m6PCtEIzpSE08eG44B6lBBsjA+GIII5XHw3ZXE+HFAA2BpFSpwCqK07nKAYayReAtkPg1vsRSPcuV8Hz7gV9g947aCqLdhFK43ADCW8HbXEh4YIKKCgUpBcYnBQgAYtc7twFPvBgwXXhL9pruwoKIcDgg+ACCAAyADKACiuA-gAXkQRBbIBwHgdBsEQFeRCoDeJDqFoXCOGBLCcIImFXteAHtCB85cAwNRcKQbj4XEYClPAsRuAwr6FnoBhGKYJioMojwsHA1AYCeDBeD4nDnCwBAmFAtEVOwJiqhpMAYAAVqguQJhhFGUYBDAACrbHqsBAbxdBuCw3CLLEUCLIsJD3mA-zsOwbD6YozmuRA+5EPK7nsG4BD2F5+Q-qaP7UEsrjglmhnfAMQyjAwADybiGDluh7i+0UQOuwlENY9lwGeizHlR4gAAoGuVYhVWRV7xYsiVaMlP43qQd68XVqziAoWAKR+27yD+YV0L1-WsQAQiwjgKHQcC8PCmqLEBdBEJUigwPZpQkD+RmubwA7uJw7QYAoACqEBwDATq7XAgKTeRdB2AA1jsRBatVvEJAJZjCXAoniZJtXSd4JhbTAPioDIRCvGp9kQFxgRfTwLAorwbCBHyUYAJxE52gQAKwaTpenvVe7AMAQ7lA0kQkiWJElSTJsOPT4ASViYWxiCYGKdtTvk9VDEFEAQLA8MREBfewrUUVJUsy3LbBfcrRnQPA7l8ztRBfbTRkKDIyjWEz-Es9QtujnY9CIV9GDEDAJtGQpbm8QbTtCCdCixeRV6q9LsvcPLWv+1euvWaxpDxQY4juxR5twJbgPW4JtscwnVgu0hydXp7mG8fHLhWH7QcBzFRTrkUtoNg6VU1SZ83Ki1P5IxYCFkDw4KmVgt0wXFCUyElfIpf0H7DGM2W5aQugN-aFRFXXG5oKgRQzJUzDbyB6DK3Z4JSVIsh1dsqZV9AjyfQqBFQ6fMgAHLKdrFFLO5MCVPA6OFwo9OMwzokQSoNwYcyhlzOGPhygQEWCYTm7BHjiyrtHZSABZCgqJ74mRfo8DB6M35GSkrg-BbgACS5A6xR1NiIF+eteIAAkkJwD-h7YgJdWJIw4t+FBpshBMO4dQq8gdTYqyhiQzBFDHqEJoQBOhschCmUrF+FKoii7sPcjtKUPC1EUUUcoyuuiGiiJEbIkyEgDSoFctQCAMjg4P0sdYiAUiqG8KIbeBRYAXGYmvB41hKcLZW0MIJRwiFHBiHzm7HRuiFBcR4pwzOZgcYX1HNweS7DIkmGLmpRBjhhaQgjPkiMkZVQjAwLk-xdNGLMXcmcRsSdom6NbO5Gs1BKmsVMjIEiChumuCAuVMkpBTiOJuJhFwj1DFqNMaIk+IybEuLsRROJQTgZZK2CsVJ6SSCZOySYXJRSMQHJKUTcpSD2lySYixIQIQGDakbO0xRXT1C9JkEBL07DqqLDmWMyh7Tmm8T7JwcQxZJkmNUWY9oFjsJOIWUIlWHj3LeMhL4vqLDGlqMed0l5QFXAsHPMM6Foyem-LAHC4xptyXCPBdYRCVhj4P06A+Wl4gZFSTIewyy9DWJbGUQaWITR3L-G-hQL80yxEmXZSQTlnithAoZluflZRBVQGFWQfI4KrzEFQJUCwjh9BXLAAAASkKJaqtxIgQG0iQRQ6YiagoDuC2aniT6dGTjtRYBZjKQs6PNIgHqyLUIGIhL0EFShbQYBBL6bBdBoL9eIYoBlqFSXMnQFxSs4XJoArCtx4r5HuQEWijVpsrh2UWFgQ0cKjJyjcDAWxlbTbtU6goWE9ajKlSapVLcRbdGq0Yh3HNujlwVnBCMFtA61FOvcky3gNxxA7nRTElWyhYEIjVN2mJjax5dT5K2iilKYlit0dW2tizRGbvBJ2ddoiCpVV3YetRx663jqMuerQY7F1EKhv2j9DbR7jyvROqGpkcZrTYJfH9MygMgdKA9bNEGJ0It4t4+MAHF0XJqbxHYcAKDtMXf81irT7XwfvT+5N0GwNwfgzQxDrFvE7oXVR9DLEn63TAmBVDMT8NCEBVYEFDH4NCDAtkR6PSjA1tOMFbI-8XBJngKQDjVa8IvFWFxJMiwWCoBIgpHy3xSikAwERiD+6f3GYPQpr14gyEQBpd+qjQ7PEYkhHyf+dp53maqecDDrE6krAYLh02xdanBTSekbyjgE3udOJWCIGncIcKEFmBQIQXA6aFT-YY-mX1-u3buqluWFDo3gBYAgVnUB5Xy0XCAZXSBkIBnHZGPAIKkgvpliiaTVrxKEFBMgw1ODZAvpuf4MtSAlki-ZpKGlLTmbsnParug2A0qKiZ+tpm8s5szamyhp7jJ5t4kozg7SS1LHLdQbbmrgo1qffB19ChL35akrZ+Dk6BrOjcxVhQCEkK1VQpBYez7TYED-N9rQoFfuRewnFlihFiKkXe3TBOAxSvlf+7otg1XavuQoLVAA+upzgdVnStdEe1ta7kCfIwAPxE9NuNrQA8h6RaMiQJrnmDVhQipWN7KO1FlWsCzy5tSoi+cM8t7na2qMKGeqQWb5WwB49IOT0VkWmPuQW0QanTGIJLE8WIawKj3s3e6mLhQNLkbDXvkREiC84faAuyem3bVsuYgng7pMpRwvuXsD1vz-GIPsDDZZqryOJeiKEEQOgXOQ98LAE-Gtq0FRlQUOHr0DBaLeA4IganoiDocNVIz02WwwRdUm-noytOFCU1VK71bH6a9GPy3XvdHHH1nYojdu73OHtblb+41F7kU1iEj1RgY-QvpaPNX9VASPrfG6vEIecFhapZ9YgANQqLLQC6hXj-yRtQTPvvF06CEPuSoMHw3zs96f5fc+wCmQtewA6Xl09CHcrAa-rFbj9jJC-zDX+Re1-zzYBg1jnpygnexIxiRPBl2tzl2HHVQNydyNwlyIGeBsGfH7kHjAO5wgOvRXGOwrWNxbxt3b3zynnSlnhyjmyEEcCgDcBWFiFeSWn0HcgKVVFQG0UbzBXeyINnySydw7yj3921wYGnx7wxTABoLoLgDXweAPw-SEFuFoJWAUBkIrH31LwUBz3BDz1d0Lwmx0N4KvHL0pht04IpQbzvRWwAyOzLUNCXlgQqCqhr1M33XJVMRT1QPBGsC1BJHTz4DRxykUD+nnkFBAH9mCOq1xHl0V0HGXXDUVz4DCN4R1BZACNIFxCx0Alxyt0V0FCeQXluVrH8KD3SOTytCrgAF990IicoojhxYj7RxAB9Qwkjs9SBbQyRgBFAj8wAnpfIekSjcQF8N8xBEwvlsIftoIABdf2CoxQA0GxKyFiUA9cJnSg2ogqe4Bo2BcQKCNKT8DKRI6hY0dQAAUgAD5Ti4U4Bsd9jhhQRBQLiric0biCpsdwk+A9p-4fhFBaRujJNxgFAnjrjsdRIwoeBscthUBtstCtA89NCoAi9MRFAThlRMQq9x11Mf5vIvYFARgUSFAkT4TPVzRvjwRYR-5PURh61ZAbhJiYIFATguktp602AsAhdY5ShYd-s5QpMtAdAAByI4SERzTsImcmAUxQIUkYcmAAdnJjoBGElIUCFNlJGH8gxGVKFIAkWCJjgCJi1KODgFVGsEhGsEjElNdyvCFOsFtOsDoGsENOsGw1VCJlVCdLODgE7E1KlKOGsBGE7EWFHUNMWFlIKT5FlMNKgErz5E7AFMb2cKBMuJBJ+Gx0RJIm23YCdBcHlk5KtxqF33pMTOBJeOx0qDTJ+AzJpOzNIFzPBC5IXlpOoCLLJVmLXjWPnlxDV22PDVujISON4TZWsyIEe1-Q6i3Wd3XXL08nIHVDSNxFeC4G4Ca36xWEUAUPmngJzRV14nZ0iiH1EUC14jdAAmkELThS2nYBixwnT37wa1fBXMiGUMPCGxcBLGoX3SqMOHCPWPSPsIdB7N2LuMONaNNj7AHBLN0RuOAsnHIEeOTNLP-IqA1A5PcnTEjHyCTOeKgux1eXOChKNAXFnFt2yEWGx1pCBRgE9ztAcJ93guwrURuLBLcAhIIr0LfUtDbO-KrhqPSMkOUPRDiKAunhAuoWgpEr4HopBP4tDCDEK3EAUmKMiJkpkMTCECuNLEqNWIUAqNriKDAAqKmKAA&amp;h=0" height="700" width="100%" style="border: 1px solid rgba(0,0,0,0.175); border-radius: .375rem;" allowfullscreen="" allow="autoplay" data-external="1"></iframe>
+<iframe class="html-fill-item" src="https://shinylive.io/r/app/#code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAdzgCMAnRRASwgGdSoAbbgCgA6YLnW5wGAESjsAFkNwACBnFRF2CgLwKCgsDNKlU7RAHoTDNuQYAzKATgYA5i1IyArnQwsi5y+Nv2ALTU0jCBBAxQECbyCkL6hsZmyqoYDMGhGEQMjkIAlHkCEEXcLIxQDACefLJslYUQpeVVfCJiktIyDU2RLXAEMhWk7AAsDN1lvdW1EJUA6iwAJo5wwxPN1TBQjhYG4yWTFdWoPPAMqBSObmzsDUVFAMQKi1Bc6tbcRNQA4txFAG79UjZdQAHkCCjgAA8ThBFk4LIs+FDNApAgBmRDoxSVVEYrENGBuBTghQARgBQJBABJ2CjSYCCMCGOxqZVKUyaexcaSiQoAFQKPhktEKRnM1lQgB6ACY8gKxVSWWzReKaVCORLqcRPgwSRDPo4yQAGPgMNwQFjWPgQBhfPhqll5RRkl3Ggr3CBPAgVRbsIofL4AYV9+oUbXEIYYSKKCnDLjEqKEADFPj9uAog4MGKR5LHtJ92FBRHBUcmAIIAGQAygBRXD5gBeRCIWxLqIAKlgAKr1-NEVCkbwcVFcRyVlicQQQONxiMMcv-V4VGpcUhudRaISleCxNwMDNbvQGIymEyoZT-FhwagYedeHycV4sAgmKBLrgskzGn8wDAAK1QXIwAaONnXzagllcVEyRlBsZ0hAYhlGBgAHk3EMDDdEDdN8nguNrBbKxR2LdoO22G1YFLI86GubhFliKBFkWEgkzAE52HYNhgMUJiWIgIMiF1Nj2DcAh7E4-IijuCALyIawWDEKNFjDecAAU7QUpTfWnONIMWaCtFg-D41IRMjwkSoohnWt2B9bgoDzBDRLoIczOouIwAAWX6QZLXshRq0qTg4BgdRawgZwIDgcQnLjdgGAINiElPMwLzgK8bzvUjxAfEwnyHV9UBkIhgXYEwFOgCAJMCDdAhY3gKnYQIokWQI6BcYgbnCfdlGqypAhgEg4EqACgLi8McoYasiAIFgeAnCAAGt2F02d5xmuaFrYJa1tnBRoHgNiAnoFslom-aZGUaxkpPJITGoR6MBOugzowYgYAu2cX1Yo8XrOoR8zAky5ymzb5u4RbdqB2dDo8oRSEggxYrwGG4yuuAbqPFL7se29EZcKx3tbL64x+mcjwJ5GGEBhCwPzBoZKeNBUCKGZKmYdny3QNbrhIksOlkNTtjgPaDvfOgKn59opFkAA5d8xbJlSjxgSp4AgNxSYUBKkuxu6z0iW9nFcDwN3EYgyAoUhiZgEx53tqaTEWDL8sS-K1xfExDSIDB2H+Hi0fF-4fM16XxAVkOKDcJX1qmyPQ7cABJcgYFj-aRAVo6jwACVbOBtf28nkvzwvZyEPPdzAIPgZryaBYT6OU9C9O47oLP4bADs4E4MuycttjXo1VG6f28uu573Nq9H-bQLH8CZ-rmW7VQFjqAgVv5wkFe14gZu07rucE07-fyVMsQ+4UDGsc8lKz0cFtHDEW3L4Kjc2JeSKUZBse4xecg2IQC+JfIQHYZCTgUBA1wpYFIslIM8HeXwZwuFCrTX+tdF6gwFtvAcu996t3imud+R4QgMEtJFEBXdwHqCgTIUs7B+gkBUosRB69IGp0vv-TulRJ7iBeOyae6CFALyEVvVhe9U4EPPifVOCh0TSMoWAiBtDSyuBYNGBBuCkHsNQYI9Bc9Z4wxEbOQipVxDh0FjIZMRFxCx3nEnS2lFs6eS2JPO0sQmhsROOra2eEg72McXDNiWwQqJV9B4soXioA+LIH4xexBUCVAsI4fQm5PIAAEpBXhUt8SIEB-wkEUDKY0MoRhoNnMYo+7k2Jb06F9V6ixcRaFqbIAAQkQRp04g4DBbAw6spQXbTSWmwXQXkOniGKCBH+WCyLFn3qtOu85yJ0HwYfeuHc2KVwLiPIRBFuDXEWFge0ay4w6jcDADeJzZz6UMgoEY0zdlyS0nAZSDyhGazOC+JOsksJXKLj80gScVaeWBFwbg1ZmQi0vr-BydA4CHk8hFYinBsgi20GgOwLgBFvN2UufZHkTQ-kqbsuM1x0KYVILoNghEpKYPnji-aZyLlSP2jcmQqIAAcDKx44WUlcgx+juUfAOUc6gLLtBCXOZculv82Wcu5RnKaylxX7TfmkoQF4WBbCqNCsearqxLE7sCVmOySVjzlUZOCfy25kS1fCtgotrWKoFh2O1pRoqrJlWaty5lPKnwpKas16C1VsR2DFSZCrdlcMAcAvRQbZ6Rt-kst1DrPXxvQT6mRoUFAyl1UIkNWg5bdkrJWRN6Do1Hh4aE-heb0FCErNkbNLAjDnOeEJbIOsXAKCoqQMtpySAMKZKsfc3bFjNsnC+bikJSg23Kem+mXrf4CpJcuwVVymXSvTRau5ZaNprmVU6sUPA3AeRGNiQ9ma2LWN4F8cQ-pA3xtIH1YFgQTR9oUNu2C1rV1LrWT+4ROKllzMkWszOVE2Ld17g+pNSqdJXMvUeNSnxhi6tQMh8lqBflgDHZwJDpU4lBoLZ5alRBdX6sNWxMQ1gp6Rs-VaxdChTHEWadsCcU5rUbpVdcqC7LLXvp4CwRwFNPL2CtjTaDZr2ADPEN8zDlLD1xiEEQOg9732KbAHLc5cK9TyQUMphhDAPzDmMLW-aMA2ComNGphQWwURGR-FZhTR78WogAKw-kPf+39DGvMAdA7B6M4qEOeWWWIVTVyGFiCZLJ35DH1NLgsDlWtQgABqFR5olnUMCHWJVqCIFrT0l8PdUQ6jhqtC4kVrgcGJSSyLQI4DAtK1Rcrlwqu3DLUSbgQ40MeS7L2flkaIwYaw--RyUyrl0cjUQQENg0ydh7LWP93L5wHoY5Nq5vlkJjGG-JsAjgoBuBWLEOhgn9BsXRD+VAw8avBukwwGL8m4ueX24duAaW-gSaEUIb4B2VgKHeye-Ln30HmeE45p7tmYI-jLXik9bnjT8r-XXVdAq57GIMzN1E1gLRMmHHwNgcnFBEAwnJ+UIAYbE4pdSHDpA8PwNJM+8QdO+Dk8XtQylZDshpwJxhak+mPSjwAL4Csp3J6ny4wyM4YKF0WrPf4VauDcYAigeekGpAljLYhFAsIHGWKsdYAC6MNBeKDtOvZr83ewyX2qL3nOFfiS4oIM2sSEcwoRZ0HR06gACkAA+b3dc4AAH1XfDGRPKP3Ae6XB5wkHp+fBKiKDpEnxPErdQR-94HoPV5RI8CD1sVAUjQeWcUJDoyigniGnJAjr1Y6NZcV+juhQTw7MKCswoJp5Ik+t+xDrTvZSvWyC+Hrms9Zm9X0NWstgWAoh-a0KUdjDGdQdq0DoAA5A8dEZJ0QADYACcrm1+KA3yMVzAB2VzdARhH4UBvs-Iw+Jkhvxv4siw99wD38-h4cBjTWHRNYDlI-JzfaDfawMA6wOgawL-awGKY0PfY0aAl4OAHfJ-Y-B4awEYHfRYM9L-RYM-C7GUM-L-KAdzEpHfNfXzf9DPKPIRYPKEIPKAKEScKRdgNDFwRaDyBfSlIfagEfOsKghQSPLPSoBgpghZQfNg0gDg1ELgmoXLPg2sKg43GSCnEnXnEjR3OEcQbsJOD3ReexCAQiVbIRdbOlWHDyDicgU0VXakUFHgCFVFFYRQb7VpAjYNIhdVMAUScSHucLOlYuI8UbSWBhMuF2OyCwQcYcCDUqHgQKSFP7EME4OaUgARIOAVYXT0G3NQtXF7P7BnJ3cQF3bMYYMYPQ3+YPUPVaagrPXI0WaQDAD5cQF8fHAFakWo97Z0TyAPECZQ-MQXaSIoMAQXA3IAA&amp;h=0" height="700" width="100%" style="border: 1px solid rgba(0,0,0,0.175); border-radius: .375rem;" allowfullscreen="" allow="autoplay" data-external="1"></iframe>
 </div>
 <bslib-tooltip placement="auto" bsOptions="[]" data-require-bs-version="5" data-require-bs-caller="tooltip()">
 <template>Expand</template>
@@ -52,6 +52,246 @@ aria-controls="demo-code"> Toggle code </a>
 <div id="demo-code" class="collapse">
 
 ``` r
+library(shiny)
+library(tablerDash)
+library(echarts4r)
+library(shinyWidgets)
+library(magrittr)
+library(palmerpenguins)
+
+
+# datas flowGl
+vectors <- expand.grid(x = -3:3, y = -3:3)
+mu <- 1
+vectors$sx <- vectors$y
+vectors$sy <- mu * (1 - vectors$x^2) * vectors$y - vectors$x
+vectors$color <- log10(runif(nrow(vectors), 1, 10))
+
+# cards
+flowCard <- tablerCard(
+  title = "FlowGl Chart",
+  closable = FALSE,
+  zoomable = TRUE,
+  options = tagList(
+    tablerAvatar(status = "lime", url = "https://preview.tabler.io/static/avatars/000m.jpg")
+  ),
+  width = 12,
+  echarts4rOutput("flowGl"),
+  footer = tablerTag(name = "build", addon = "passing", addonColor = "success")
+)
+
+profileCard <- tablerProfileCard(
+  width = 12,
+  title = "Dyann Escala",
+  subtitle = "Mechanical Systems Engineer",
+  src = "https://preview.tabler.io/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg",
+  tablerSocialLinks(
+    tablerSocialLink(
+      name = "facebook",
+      href = "https://www.facebook.com",
+      icon = "facebook"
+    ),
+    tablerSocialLink(
+      name = "twitter",
+      href = "https://www.twitter.com",
+      icon = "twitter"
+    )
+  )
+)
+
+# app
+shiny::shinyApp(
+  ui = tablerDashPage(
+    navbar = tablerDashNav(
+      id = "mymenu",
+      src = "https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg",
+      navMenu = tablerNavMenu(
+        tablerNavMenuItem(
+          tabName = "Home",
+          icon = "home",
+          "Home"
+        ),
+        tablerNavMenuItem(
+          tabName = "Test",
+          icon = "box",
+          "Test"
+        )
+      ),
+      tablerDropdown(
+        tablerDropdownItem(
+          title = "Item 1 title",
+          href = "http://google.com",
+          status = "danger",
+          date = "now",
+          "This is the first dropdown item"
+        ),
+        tablerDropdownItem(
+          status = "warning",
+          "This is the second dropdown item",
+          date = "yesterday"
+        ),
+        tablerDropdownItem(
+          title = "Item 3 title",
+          "This is the third dropdown item"
+        )
+      )
+    ),
+    footer = tablerDashFooter(
+      tablerIcon(name = "maestro", lib = "payment"),
+      tablerIcon(name = "mastercard", lib = "payment"),
+      copyrights = "@David Granjon, 2024"
+    ),
+    title = "tablerDash",
+    body = tablerDashBody(
+
+      chooseSliderSkin("Modern"),
+      tablerTabItems(
+        tablerTabItem(
+          tabName = "Home",
+          fluidRow(
+            column(
+              width = 4,
+              profileCard,
+              numericInput(
+                inputId = "totalStorage",
+                label = "Enter storage capacity",
+                value = 1000),
+              uiOutput("info")
+            ),
+            column(
+              width = 8,
+              flowCard
+            )
+          ),
+          fluidRow(
+            column(
+              width = 8,
+              tablerCard(
+                status = "primary",
+                statusSide = "top",
+                width = 12,
+                tablerTimeline(
+                  tablerTimelineItem(
+                    title = "Item 1",
+                    status = "green",
+                    date = "now"
+                  ),
+                  tablerTimelineItem(
+                    title = "Item 2",
+                    status = NULL,
+                    date = "yesterday",
+                    "Lorem ipsum dolor sit amet,
+                consectetur adipisicing elit."
+                  )
+                )
+              )
+            ),
+            column(
+              width = 4,
+              tablerStatCard(
+                value = 43,
+                title = "Followers",
+                trend = -10,
+                width = 12
+              )
+            )
+          )
+        ),
+        tablerTabItem(
+          tabName = "Test",
+          tablerCard(
+            title = "Plots",
+            plotOutput("distPlot"),
+            status = "info",
+            statusSide = "left",
+            width = 12,
+            footer = tagList(
+              column(
+                width = 12,
+                align = "center",
+                sliderInput(
+                  "obs",
+                  "Number of observations:",
+                  min = 0,
+                  max = 1000,
+                  value = 500
+                )
+              )
+            )
+          ),
+          tablerCard(
+            title = "Tables",
+            selectInput(
+              "variable",
+              "Variables to show:",
+              choices = colnames(penguins),
+              selected = colnames(penguins),
+              multiple = TRUE
+            ),
+            tableOutput("data"),
+            width = 12,
+            overflow = TRUE
+          ),
+          tablerCard(
+            width = 12,
+            echarts4rOutput("gauge", height = "300px"),
+            sliderInput(
+              "gaugeVal",
+              "Gauge Value:",
+              min = 0,
+              max = 100,
+              value = 50
+            )
+          )
+        )
+      )
+    )
+  ),
+  server = function(input, output) {
+    output$distPlot <- renderPlot({
+      hist(rnorm(input$obs))
+    })
+    output$data <- renderTable({
+      penguins[, input$variable, drop = FALSE]
+    }, rownames = TRUE)
+
+    output$flowGl <- renderEcharts4r({
+      vectors %>%
+        e_charts(x) %>%
+        e_flow_gl(y, sx, sy, color) %>%
+        e_visual_map(
+          min = 0, max = 1, # log 10
+          dimension = 4, # x = 0, y = 1, sx = 3, sy = 4
+          show = FALSE, # hide
+          inRange = list(
+            color = c('#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8',
+                      '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026')
+          )
+        ) %>%
+        e_x_axis(
+          splitLine = list(show = FALSE)
+        ) %>%
+        e_y_axis(
+          splitLine = list(show = FALSE)
+        )
+    })
+
+    output$info <- renderUI({
+      tablerInfoCard(
+        width = 12,
+        value = paste0(input$totalStorage, "GB"),
+        status = "success",
+        icon = "database",
+        description = "Total Storage Capacity"
+      )
+    })
+
+    output$gauge <- renderEcharts4r({
+      e_charts() %>%
+        e_gauge(as.numeric(input$gaugeVal), "%")
+    })
+  }
+)
 ```
 
 </div>