|
318 | 318 | """ |
319 | 319 |
|
320 | 320 |
|
| 321 | +graphs_app = """ |
| 322 | +library(dash) |
| 323 | +library(dashHtmlComponents) |
| 324 | +library(dashCoreComponents) |
| 325 | +library(plotly) |
| 326 | +
|
| 327 | +df <- read.csv( |
| 328 | + file = "https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv", |
| 329 | + stringsAsFactor=FALSE, |
| 330 | + check.names=FALSE |
| 331 | +) |
| 332 | +
|
| 333 | +app <- Dash$new() |
| 334 | +
|
| 335 | +app$layout( |
| 336 | + htmlDiv( |
| 337 | + list( |
| 338 | + htmlDiv( |
| 339 | + list( |
| 340 | + dccDropdown(options = lapply(unique(df[,"country"]), function(x) { |
| 341 | + list(label = x, value = x) |
| 342 | + }), |
| 343 | + value = "Canada", |
| 344 | + id = "country", |
| 345 | + style = list(display = "inline-block", |
| 346 | + width = 200) |
| 347 | + ), |
| 348 | + htmlButton( |
| 349 | + "add Chart", |
| 350 | + id = "add-chart", |
| 351 | + n_clicks = 0, |
| 352 | + style = list(display = "inline-block") |
| 353 | + ) |
| 354 | + ) |
| 355 | + ), |
| 356 | + htmlDiv(id = "container", children=list()), |
| 357 | + htmlDiv(id = "output-delay") |
| 358 | + ) |
| 359 | + ) |
| 360 | +) |
| 361 | +
|
| 362 | +create_figure <- function(df, column_x, column_y, country) { |
| 363 | + df <- df[which(df[, "country"] == country),] |
| 364 | + if (column_x == "year") { |
| 365 | + fig <- plot_ly(df, x = df[,column_x], y = df[,column_y], name = column_x, type = "scatter", mode = "lines") |
| 366 | + } else { |
| 367 | + fig <- plot_ly(df, x = df[,column_x], y = df[,column_y], name = column_x, type = "scatter", mode = "markers") |
| 368 | + } |
| 369 | + fig <- plotly::layout(fig, plot_bgcolor="lightblue", xaxis = list(title=""), |
| 370 | + yaxis = list(title=""), title=list(text=paste(country, column_y, "vs", column_x), |
| 371 | + xanchor="right", margin_l=10, margin_r=0, margin_b=30)) |
| 372 | + return(fig) |
| 373 | +} |
| 374 | +
|
| 375 | +app$callback( |
| 376 | + output = list( |
| 377 | + output(id = "container", property = "children"), |
| 378 | + output(id = "output-delay", property = "children") |
| 379 | + ), |
| 380 | + params = list( |
| 381 | + input(id = "add-chart", property = "n_clicks"), |
| 382 | + state(id = "country", property = "value"), |
| 383 | + state(id = "container", property = "children") |
| 384 | + ), |
| 385 | + function(n_clicks, country, children) { |
| 386 | + default_column_x <- "year" |
| 387 | + default_column_y <- "gdpPercap" |
| 388 | +
|
| 389 | + new_element <- htmlDiv( |
| 390 | + style = list(width = "23%", display = "inline-block", outline = "thin lightgrey solid", padding = 10), |
| 391 | + children = list( |
| 392 | + dccGraph( |
| 393 | + id = list(type = "dynamic-output", index = n_clicks), |
| 394 | + style = list(height = 300), |
| 395 | + figure = create_figure(df, default_column_x, default_column_y, country) |
| 396 | + ), |
| 397 | + dccDropdown( |
| 398 | + id = list(type = "dynamic-dropdown-x", index = n_clicks), |
| 399 | + options = lapply(colnames(df), function(x) { |
| 400 | + list(label = x, value = x) |
| 401 | + }), |
| 402 | + value = default_column_x |
| 403 | + ), |
| 404 | + dccDropdown( |
| 405 | + id = list(type = "dynamic-dropdown-y", index = n_clicks), |
| 406 | + options = lapply(colnames(df), function(x) { |
| 407 | + list(label = x, value = x) |
| 408 | + }), |
| 409 | + value = default_column_y |
| 410 | + ) |
| 411 | + ) |
| 412 | + ) |
| 413 | +
|
| 414 | + children <- c(children, list(new_element)) |
| 415 | + return(list(children, n_clicks)) |
| 416 | + } |
| 417 | +) |
| 418 | +
|
| 419 | +app$callback( |
| 420 | + output(id = list("index" = MATCH, "type" = "dynamic-output"), property = "figure"), |
| 421 | + params = list( |
| 422 | + input(id = list("index" = MATCH, "type" = "dynamic-dropdown-x"), property = "value"), |
| 423 | + input(id = list("index" = MATCH, "type" = "dynamic-dropdown-y"), property = "value"), |
| 424 | + input(id = "country", property = "value") |
| 425 | + ), |
| 426 | + function(column_x, column_y, country) { |
| 427 | + return(create_figure(df, column_x, column_y, country)) |
| 428 | + } |
| 429 | +) |
| 430 | +
|
| 431 | +app$run_server() |
| 432 | +""" |
| 433 | + |
| 434 | + |
321 | 435 | def test_rpmc001_pattern_matching_all(dashr): |
322 | 436 | dashr.start_server(all_app) |
323 | 437 | dashr.find_element("#add-filter").click() |
@@ -370,3 +484,16 @@ def test_rpmc004_pattern_matching_todo(dashr): |
370 | 484 | dashr.find_element("#add").click() |
371 | 485 | dashr.find_element('#\\{\\"index\\"\\:1\\,\\"type\\"\\:\\"done\\"\\}').click() |
372 | 486 | assert dashr.wait_for_text_to_equal("#totals", "1 of 1 items completed - 100%") |
| 487 | + |
| 488 | + |
| 489 | +def test_rpmc005_pattern_matching_graphs(dashr): |
| 490 | + dashr.start_server(graphs_app) |
| 491 | + dashr.select_dcc_dropdown("#country", "Cameroon") |
| 492 | + dashr.wait_for_text_to_equal("#output-delay", "0") |
| 493 | + dashr.find_element("#add-chart").click() |
| 494 | + dashr.wait_for_text_to_equal("#output-delay", "1") |
| 495 | + dashr.find_element('#\\{\\"index\\"\\:1\\,\\"type\\"\\:\\"dynamic-output\\"\\}') |
| 496 | + dashr.select_dcc_dropdown('#\\{\\"index\\"\\:1\\,\\"type\\"\\:\\"dynamic-dropdown-x\\"\\}', "year") |
| 497 | + dashr.select_dcc_dropdown('#\\{\\"index\\"\\:1\\,\\"type\\"\\:\\"dynamic-dropdown-y\\"\\}', "pop") |
| 498 | + dashr.percy_snapshot("r-pmc-graphs") |
| 499 | + dashr.wait_for_element('#\\{\\"index\\"\\:1\\,\\"type\\"\\:\\"dynamic-output\\"\\}') |
0 commit comments