OliverKeyes has submitted this change and it was merged.
Change subject: Changed the visual design of the geo dygraph
......................................................................
Changed the visual design of the geo dygraph
- The new geo graph has a light-on-dark design that (hopefully) makes
it easier to see/differentiate the colors.
- It also adds the “Weekday (Month/Day)” x-axis label formatter.
Bug: T123959
Change-Id: I27a80445cd904a74b8fca7805bef563dc33d5197
---
M server.R
M tab_documentation/geography.md
M ui.R
A www/inverse.css
4 files changed, 25 insertions(+), 9 deletions(-)
Approvals:
OliverKeyes: Verified; Looks good to me, approved
diff --git a/server.R b/server.R
index 6d1fbab..9173799 100644
--- a/server.R
+++ b/server.R
@@ -16,6 +16,7 @@
polloi::make_dygraph(
data = clickthrough_rate,
xlab = "Date", ylab = "Clickthrough rate (%)", title = "Wikipedia portal
clickthrough rate") %>%
+ dyAxis("x", axisLabelFormatter = polloi::custom_axis_formatter,
axisLabelWidth = 70) %>%
dyAnnotation(as.Date("2015-12-07"), text = "A",
tooltip = "Sampling change - see below",
width = 12, height = 20, attachAtBottom = FALSE)
@@ -25,6 +26,8 @@
polloi::make_dygraph(
data = action_breakdown,
xlab = "Date", ylab = "Actions (%)", title = "Actions on the Wikipedia
portal") %>%
+ dyAxis("x", axisLabelFormatter = polloi::custom_axis_formatter,
axisLabelWidth = 70) %>%
+ dyLegend(labelsDiv = "action_breakdown_legend", show = "always", width =
400) %>%
dyAnnotation(as.Date("2015-12-07"), text = "A",
tooltip = "Sampling change - see below",
width = 12, height = 20, attachAtBottom = FALSE)
@@ -34,17 +37,17 @@
polloi::make_dygraph(
data = dwelltime_data,
xlab = "Date", ylab = "Dwell Time (Seconds)", title = "Time spent on the
Wikipedia portal") %>%
+ dyAxis("x", axisLabelFormatter = polloi::custom_axis_formatter,
axisLabelWidth = 70) %>%
dyAnnotation(as.Date("2015-12-07"), text = "A",
tooltip = "Sampling change - see below",
width = 12, height = 20, attachAtBottom = FALSE)
})
output$country_breakdown_dygraph <- renderDygraph({
- polloi::make_dygraph(
- data = country_data,
- xlab = "Date",
- ylab = "Users (%)",
- title = "Geographic breakdown of portal visitors"
- )
+ country_data %>%
+ polloi::make_dygraph(xlab = "", ylab = "Users (%)", title = "Geographic
breakdown of portal visitors") %>%
+ dyAxis("x", axisLabelFormatter = polloi::custom_axis_formatter,
axisLabelWidth = 70) %>%
+ dyLegend(labelsDiv = "country_breakdown_legend", show = "always", width
= 400) %>%
+ dyCSS(css = "www/inverse.css")
})
})
diff --git a/tab_documentation/geography.md b/tab_documentation/geography.md
index f6515fe..2399d40 100644
--- a/tab_documentation/geography.md
+++ b/tab_documentation/geography.md
@@ -1,4 +1,4 @@
-Dwell-time on the Wikipedia portal
+Where users come from to the Wikipedia portal
=======
This measures where portal users come from each day, displaying the proportion
of users from each top-10 country and the proportion from other countries, as a
percentage.
diff --git a/ui.R b/ui.R
index d426891..fa50e58 100644
--- a/ui.R
+++ b/ui.R
@@ -27,7 +27,9 @@
includeMarkdown("./tab_documentation/clickthrough_rate.md")
),
tabItem(tabName = "action_breakdown",
- dygraphOutput("action_breakdown_dygraph"),
+ div(dygraphOutput("action_breakdown_dygraph"),
+ div(id = "action_breakdown_legend",
+ style = "height: 60px; padding-top: 30px; padding-left:
20px;")),
includeMarkdown("./tab_documentation/breakdown.md")
),
tabItem(tabName = "dwell_data",
@@ -35,7 +37,10 @@
includeMarkdown("./tab_documentation/dwelltime.md")
),
tabItem(tabName = "country_breakdown",
- dygraphOutput("country_breakdown_dygraph"),
+ div(dygraphOutput("country_breakdown_dygraph"),
+ div(id = "country_breakdown_legend",
+ style = "height: 60px; padding-top: 30px; padding-left:
20px;"),
+ style = "width: 100%; background-color: #222D32; color:
#ECF0F5; padding-top: 10px;"),
includeMarkdown("./tab_documentation/geography.md")
)
)
diff --git a/www/inverse.css b/www/inverse.css
new file mode 100644
index 0000000..a30f078
--- /dev/null
+++ b/www/inverse.css
@@ -0,0 +1,8 @@
+#country_breakdown .dygraph-legend, #country_breakdown .dygraph-label {
+ background-color: #222D32 !important;
+ color: #ECF0F5;
+}
+
+#country_breakdown_dygraph .dygraph-axis-label {
+ color: #ECF0F5;
+}
--
To view, visit https://gerrit.wikimedia.org/r/265559
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I27a80445cd904a74b8fca7805bef563dc33d5197
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/discovery/prince
Gerrit-Branch: master
Gerrit-Owner: Bearloga <mpo...@wikimedia.org>
Gerrit-Reviewer: OliverKeyes <oke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
