Milimetric has uploaded a new change for review.
https://gerrit.wikimedia.org/r/196489
Change subject: [WIP] Do NOT Merge
......................................................................
[WIP] Do NOT Merge
This is the start of a series of patches that will implement a new
layout for the visual editor funnel analysis, in dashiki. It's
exploratory only, and a proper refactor of this and the wikimetrics
layout into separate repositories should be done.
Change-Id: Id732758508048e5b1d3126534ad145cb21bfa4f4
---
M bower.json
M src/app/startup.js
A src/components/button-group/button-group.html
A src/components/button-group/button-group.js
A src/components/dropdown/dropdown.html
A src/components/dropdown/dropdown.js
A src/components/funnel-layout/funnel-layout.html
A src/components/funnel-layout/funnel-layout.js
A src/css/062_header.min.css
A src/css/063_button.min.css
A src/css/064_dropdown.min.css
A src/css/065_divider.min.css
M src/css/070_styles.css
A src/css/071_wikimetrics_styles.css
M src/index.html
15 files changed, 363 insertions(+), 251 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/analytics/dashiki
refs/changes/89/196489/1
diff --git a/bower.json b/bower.json
index 7527324..f990f65 100644
--- a/bower.json
+++ b/bower.json
@@ -10,7 +10,6 @@
"topojson": "~1.6.18",
"jquery": "^2.1.1",
"moment": "^2.7.0",
- "knockout-projections": "~1.1.0-pre",
"URIjs": "~1.13.2",
"typeahead.js": "~0.10.5",
"semantic": "~0.19.0",
diff --git a/src/app/startup.js b/src/app/startup.js
index 049bc77..c42b824 100644
--- a/src/app/startup.js
+++ b/src/app/startup.js
@@ -16,6 +16,12 @@
ko.components.register('vega-timeseries', { require:
'components/visualizers/vega-timeseries/vega-timeseries' });
ko.components.register('annotation-list', { require:
'components/annotation-list/annotation-list' });
+
+ // separate layout, TODO: make multiple layouts coexist
+ ko.components.register('funnel-layout', { require:
'components/funnel-layout/funnel-layout' });
+ ko.components.register('dropdown', { require:
'components/dropdown/dropdown' });
+ ko.components.register('button-group', { require:
'components/button-group/button-group' });
+
// Start the application
ko.applyBindings();
});
diff --git a/src/components/button-group/button-group.html
b/src/components/button-group/button-group.html
new file mode 100644
index 0000000..d5626bc
--- /dev/null
+++ b/src/components/button-group/button-group.html
@@ -0,0 +1,7 @@
+<div class="ui small buttons" data-bind="foreach: selectOne.options">
+ <div class="ui button"
+ data-bind="
+ text: $data,
+ click: $parent.select,
+ css: {active: $data === $parent.selectOne.selected()}"></div>
+</div>
diff --git a/src/components/button-group/button-group.js
b/src/components/button-group/button-group.js
new file mode 100644
index 0000000..6772fa7
--- /dev/null
+++ b/src/components/button-group/button-group.js
@@ -0,0 +1,11 @@
+define(function (require) {
+ 'use strict';
+
+ var templateMarkup = require('text!./button-group.html'),
+ SingleSelect = require('components/dropdown/dropdown').viewModel;
+
+ return {
+ viewModel: SingleSelect,
+ template: templateMarkup
+ };
+});
diff --git a/src/components/dropdown/dropdown.html
b/src/components/dropdown/dropdown.html
new file mode 100644
index 0000000..e1cb9a1
--- /dev/null
+++ b/src/components/dropdown/dropdown.html
@@ -0,0 +1,9 @@
+<div class="ui compact small menu">
+ <div class="ui simple dropdown item">
+ <span data-bind="text: selectOne.selected"></span>
+ <i class="dropdown icon"></i>
+ <div class="menu" data-bind="foreach: selectOne.options">
+ <div class="item" data-bind="text: $data, click:
$parent.select"></div>
+ </div>
+ </div>
+</div>
diff --git a/src/components/dropdown/dropdown.js
b/src/components/dropdown/dropdown.js
new file mode 100644
index 0000000..529450a
--- /dev/null
+++ b/src/components/dropdown/dropdown.js
@@ -0,0 +1,18 @@
+define(function (require) {
+ 'use strict';
+
+ var templateMarkup = require('text!./dropdown.html');
+
+ // this is used in dropdown and button-group, could factor it out
+ function SingleSelect(params) {
+ this.selectOne = params.selectOne;
+ this.select = function (option) {
+ this.selectOne.selected(option);
+ }.bind(this);
+ }
+
+ return {
+ viewModel: SingleSelect,
+ template: templateMarkup
+ };
+});
diff --git a/src/components/funnel-layout/funnel-layout.html
b/src/components/funnel-layout/funnel-layout.html
new file mode 100644
index 0000000..7059cc3
--- /dev/null
+++ b/src/components/funnel-layout/funnel-layout.html
@@ -0,0 +1,19 @@
+<section>
+ <filters class="ui grid">
+ <div class="left aligned three wide column">
+ <dropdown params="selectOne: wiki"/>
+ </div>
+ <div class="eight wide column">
+ <label>from: <dropdown params="selectOne: fromDate"/></label>
+ <label>to: <dropdown params="selectOne: toDate"/></label>
+ </div>
+ <div class="right aligned five wide column">
+ <button-group params="selectOne: editor"/>
+ </div>
+ </filters>
+ <graphs class="ui attached segment">
+ <graph class="ui raised segment">graph goes here</graph>
+ <graph style="height: 499px" class="ui raised segment">graph goes
here</graph>
+ <graph class="ui raised segment">graph goes here</graph>
+ </graphs>
+</section>
diff --git a/src/components/funnel-layout/funnel-layout.js
b/src/components/funnel-layout/funnel-layout.js
new file mode 100644
index 0000000..4cf3d91
--- /dev/null
+++ b/src/components/funnel-layout/funnel-layout.js
@@ -0,0 +1,30 @@
+define(function (require) {
+ 'use strict';
+
+ var ko = require('knockout'),
+ templateMarkup = require('text!./funnel-layout.html');
+
+ function FunnelLayout() {
+ this.wiki = {
+ options: ko.observable(['enwiki', 'rowiki', 'All Wikis']),
+ selected: ko.observable('All Wikis'),
+ };
+ this.fromDate = {
+ options: ko.observable(['2014-01-01', '2014-02-01', '2014-03-01']),
+ selected: ko.observable('2014-01-01'),
+ };
+ this.toDate = {
+ options: ko.observable(['2014-01-01', '2014-02-01', '2014-03-01']),
+ selected: ko.observable('2014-02-01'),
+ };
+ this.editor = {
+ options: ko.observable(['VE', 'Both', 'WT']),
+ selected: ko.observable('VE'),
+ };
+ }
+
+ return {
+ viewModel: FunnelLayout,
+ template: templateMarkup
+ };
+});
diff --git a/src/css/062_header.min.css b/src/css/062_header.min.css
new file mode 120000
index 0000000..baff89c
--- /dev/null
+++ b/src/css/062_header.min.css
@@ -0,0 +1 @@
+../bower_modules/semantic/build/minified/elements/header.min.css
\ No newline at end of file
diff --git a/src/css/063_button.min.css b/src/css/063_button.min.css
new file mode 120000
index 0000000..3cb03c0
--- /dev/null
+++ b/src/css/063_button.min.css
@@ -0,0 +1 @@
+../bower_modules/semantic/build/minified/elements/button.min.css
\ No newline at end of file
diff --git a/src/css/064_dropdown.min.css b/src/css/064_dropdown.min.css
new file mode 120000
index 0000000..6d1fac3
--- /dev/null
+++ b/src/css/064_dropdown.min.css
@@ -0,0 +1 @@
+../bower_modules/semantic/build/minified/modules/dropdown.min.css
\ No newline at end of file
diff --git a/src/css/065_divider.min.css b/src/css/065_divider.min.css
new file mode 120000
index 0000000..8e60546
--- /dev/null
+++ b/src/css/065_divider.min.css
@@ -0,0 +1 @@
+../bower_modules/semantic/build/minified/elements/divider.min.css
\ No newline at end of file
diff --git a/src/css/070_styles.css b/src/css/070_styles.css
index 8f9bf25..e614b6f 100644
--- a/src/css/070_styles.css
+++ b/src/css/070_styles.css
@@ -1,250 +1,4 @@
-/* site-wide styles */
-body {
- padding: 0;
- margin: 0;
- height: 100vh;
- font-family: "Nimbus Sans L","Liberation Sans","Helvetica
Neue","Helvetica","Arial",sans-serif;
- }
+filters, graphs, graph { display: block; }
-/* patches to semantic */
-.delete.icon {
- cursor: pointer;
-}
-.ui.label.navy {
- background-color: #347BFE;
- color: white;
-}
-.ui.label {
- text-transform: none;
-}
-.ui.inverted.input input {
- background-color: #7C7C7C;
- color: #232323;
-}
-.ui.dropdown.label {
- height: 30.75px;
-}
-.separate.icon {
- margin: 0 -4px 0 4px;
-}
-.ui.pointing.offset.above.label:before {
- left: 11%!important;
- top: -0.41em;
-}
-.ui.label,
-.ui.input input {
- border-radius: 2px;
-}
-
-/* our styles */
-.ui.segment.metric {
- padding: 0.5em;
-}
-.ui.label.metric {
- margin: 0.25em;
-}
-.subtext {
- color: #929292;
- font-size: x-small;
- text-transform: uppercase;
- margin-left: 8px;
-}
-.icon.faded {
- opacity: 0.1;
-}
-.item:hover .icon.faded {
- opacity: 1;
-}
-.target {
- position: absolute!important;
- z-index: 100!important;
- display: none!important;
-}
-.target.open {
- display: block!important;
-}
-.categories.target.label {
- padding: 1px;
- margin-top: 7px!important;
-}
-.ui.pointing.white.label {
- background-color: white;
- border: 2px solid #E5E5E5;
-}
-.ui.pointing.white.label:before {
- background-color: white;
- border: 2px solid #E5E5E5;
- border-bottom: none;
- border-right: none;
-}
-.target.label .grid {
- margin: 0px;
-}
-.target.label .grid .column {
- padding: 0px;
- margin: 0px;
-}
-input.typeahead {
- color: white!important;
- width: 280px!important;
-}
-a.header {
- color: #112233;
- text-decoration: none;
-}
-a.header:hover {
- border-bottom: 2px solid #112233;
-}
-section.page.column {
- position: absolute;
- top: 0;
- bottom: 0;
- padding: 10px;
-}
-section.projects {
- background-color: #6D6D6D;
- width: 300px;
-}
-section.main {
- background-color: #EEEEEE;
- right: 0;
- left: 300px;
-}
-.graph {
- height: 87vh;
-}
-.graph .parent-of-resizable {
- height: 100%;
- min-height: 300px;
- min-width: 800px;
- max-height: 76vh;
-}
-.parent-of-resizable {
- width: 100%;
- height: 100%;
- padding: 0;
-}
-.colored i.swatch {
- vertical-align: bottom;
- display: inline-block;
- margin: 0 .35em 0 0;
- width: 20px;
- height: 20px;
- opacity: 1;
-}
-.destructive:hover {
- color: #D42E2A;
-}
-project-selector hr {
- margin-right: 20px;
-}
-project-selector .ui.vertical.menu.fluid {
- width: 94%!important;
-}
-
-breakdown-toggle {
- display: block;
- margin-top: 60px;
-}
-breakdown-toggle .ui.vertical.menu.fluid {
- width: 94%!important;
-}
-breakdown-toggle .ui.menu a.header.item {
- opacity: 1!important;
-}
-breakdown-toggle .ui.menu a.header.item,
-breakdown-toggle .ui.menu a.header.item:hover {
- background-color: #4D4D4D;
- color: #BDBDBD;
-}
-breakdown-toggle .ui.menu a.header.item.off,
-breakdown-toggle .ui.menu a.header.item.off:hover {
- background-color: #808080;
- color: #454545;
-}
-
-.annotation.label {
- cursor: pointer;
- margin: 5px 3px 3px 3px;
-}
-.annotation-list-title {
- margin-left: 10px;
- vertical-align: -2px;
- font-size: 14px;
-}
-
-/**
- * Twitter typeahead stuff
- */
-.tt-query,
-.tt-hint {
- width: 390px;
- height: 30px;
- padding: 8px 12px;
- font-size: 24px;
- line-height: 30px;
- border: 2px solid #ccc;
- border-radius: 2px;
- outline: none;
-}
-.tt-query {
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-.tt-hint {
- color: #999
-}
-.tt-dropdown-menu {
- width: 300px;
- margin: 1px 0 0 1px;
- padding: 8px 0;
- background-color: #fff;
- border: 1px solid #ccc;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 2px;
- box-shadow: 0 5px 10px rgba(0,0,0,.2);
- max-height: 24em;
- overflow-y: scroll;
- overflow-x: hidden;
-}
-.tt-suggestion {
- padding: 3px 20px;
- font-size: 16px;
- line-height: 30px;
- border-bottom: #ccc 1px solid;
-}
-.tt-suggestion .footnote {
- float: right;
- font-size:0.8em;
-}
-.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use
.tt-suggestion.tt-cursor */
- color: #fff;
- background-color: #0097cf;
-
-}
-.tt-suggestion:hover {
- font-weight: bold;
- cursor: pointer;
-}
-.tt-suggestion p {
- margin: 0;
-}
-.tt-back:hover{
- font-weight: bold;
-}
-.tt-dropdown-menu {
- display: none;
-}
-.tt-dropdown-menu .header {
- margin: 0 0 0 10px;
- font-size: 1.5em;
- color: #888;
-}
-.tt-dropdown-menu > * {
- margin: 0 0 14px 0;
-}
-.tt-dropdown-menu.open {
- display: block;
- position: absolute;
- z-index: 100;
-}
-/* End Twitter Typeahead stuff */
+filters.ui.segment { padding: 0.5em 0.2em 0.5em 1em; box-shadow: none; }
+graphs.ui.attached.segment { background-color: #f7f7f7; margin: 6px; }
diff --git a/src/css/071_wikimetrics_styles.css
b/src/css/071_wikimetrics_styles.css
new file mode 100644
index 0000000..8f9bf25
--- /dev/null
+++ b/src/css/071_wikimetrics_styles.css
@@ -0,0 +1,250 @@
+/* site-wide styles */
+body {
+ padding: 0;
+ margin: 0;
+ height: 100vh;
+ font-family: "Nimbus Sans L","Liberation Sans","Helvetica
Neue","Helvetica","Arial",sans-serif;
+ }
+
+/* patches to semantic */
+.delete.icon {
+ cursor: pointer;
+}
+.ui.label.navy {
+ background-color: #347BFE;
+ color: white;
+}
+.ui.label {
+ text-transform: none;
+}
+.ui.inverted.input input {
+ background-color: #7C7C7C;
+ color: #232323;
+}
+.ui.dropdown.label {
+ height: 30.75px;
+}
+.separate.icon {
+ margin: 0 -4px 0 4px;
+}
+.ui.pointing.offset.above.label:before {
+ left: 11%!important;
+ top: -0.41em;
+}
+.ui.label,
+.ui.input input {
+ border-radius: 2px;
+}
+
+/* our styles */
+.ui.segment.metric {
+ padding: 0.5em;
+}
+.ui.label.metric {
+ margin: 0.25em;
+}
+.subtext {
+ color: #929292;
+ font-size: x-small;
+ text-transform: uppercase;
+ margin-left: 8px;
+}
+.icon.faded {
+ opacity: 0.1;
+}
+.item:hover .icon.faded {
+ opacity: 1;
+}
+.target {
+ position: absolute!important;
+ z-index: 100!important;
+ display: none!important;
+}
+.target.open {
+ display: block!important;
+}
+.categories.target.label {
+ padding: 1px;
+ margin-top: 7px!important;
+}
+.ui.pointing.white.label {
+ background-color: white;
+ border: 2px solid #E5E5E5;
+}
+.ui.pointing.white.label:before {
+ background-color: white;
+ border: 2px solid #E5E5E5;
+ border-bottom: none;
+ border-right: none;
+}
+.target.label .grid {
+ margin: 0px;
+}
+.target.label .grid .column {
+ padding: 0px;
+ margin: 0px;
+}
+input.typeahead {
+ color: white!important;
+ width: 280px!important;
+}
+a.header {
+ color: #112233;
+ text-decoration: none;
+}
+a.header:hover {
+ border-bottom: 2px solid #112233;
+}
+section.page.column {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ padding: 10px;
+}
+section.projects {
+ background-color: #6D6D6D;
+ width: 300px;
+}
+section.main {
+ background-color: #EEEEEE;
+ right: 0;
+ left: 300px;
+}
+.graph {
+ height: 87vh;
+}
+.graph .parent-of-resizable {
+ height: 100%;
+ min-height: 300px;
+ min-width: 800px;
+ max-height: 76vh;
+}
+.parent-of-resizable {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+}
+.colored i.swatch {
+ vertical-align: bottom;
+ display: inline-block;
+ margin: 0 .35em 0 0;
+ width: 20px;
+ height: 20px;
+ opacity: 1;
+}
+.destructive:hover {
+ color: #D42E2A;
+}
+project-selector hr {
+ margin-right: 20px;
+}
+project-selector .ui.vertical.menu.fluid {
+ width: 94%!important;
+}
+
+breakdown-toggle {
+ display: block;
+ margin-top: 60px;
+}
+breakdown-toggle .ui.vertical.menu.fluid {
+ width: 94%!important;
+}
+breakdown-toggle .ui.menu a.header.item {
+ opacity: 1!important;
+}
+breakdown-toggle .ui.menu a.header.item,
+breakdown-toggle .ui.menu a.header.item:hover {
+ background-color: #4D4D4D;
+ color: #BDBDBD;
+}
+breakdown-toggle .ui.menu a.header.item.off,
+breakdown-toggle .ui.menu a.header.item.off:hover {
+ background-color: #808080;
+ color: #454545;
+}
+
+.annotation.label {
+ cursor: pointer;
+ margin: 5px 3px 3px 3px;
+}
+.annotation-list-title {
+ margin-left: 10px;
+ vertical-align: -2px;
+ font-size: 14px;
+}
+
+/**
+ * Twitter typeahead stuff
+ */
+.tt-query,
+.tt-hint {
+ width: 390px;
+ height: 30px;
+ padding: 8px 12px;
+ font-size: 24px;
+ line-height: 30px;
+ border: 2px solid #ccc;
+ border-radius: 2px;
+ outline: none;
+}
+.tt-query {
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.tt-hint {
+ color: #999
+}
+.tt-dropdown-menu {
+ width: 300px;
+ margin: 1px 0 0 1px;
+ padding: 8px 0;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 2px;
+ box-shadow: 0 5px 10px rgba(0,0,0,.2);
+ max-height: 24em;
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
+.tt-suggestion {
+ padding: 3px 20px;
+ font-size: 16px;
+ line-height: 30px;
+ border-bottom: #ccc 1px solid;
+}
+.tt-suggestion .footnote {
+ float: right;
+ font-size:0.8em;
+}
+.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use
.tt-suggestion.tt-cursor */
+ color: #fff;
+ background-color: #0097cf;
+
+}
+.tt-suggestion:hover {
+ font-weight: bold;
+ cursor: pointer;
+}
+.tt-suggestion p {
+ margin: 0;
+}
+.tt-back:hover{
+ font-weight: bold;
+}
+.tt-dropdown-menu {
+ display: none;
+}
+.tt-dropdown-menu .header {
+ margin: 0 0 0 10px;
+ font-size: 1.5em;
+ color: #888;
+}
+.tt-dropdown-menu > * {
+ margin: 0 0 14px 0;
+}
+.tt-dropdown-menu.open {
+ display: block;
+ position: absolute;
+ z-index: 100;
+}
+/* End Twitter Typeahead stuff */
diff --git a/src/index.html b/src/index.html
index f9d544f..8f330d4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,6 +8,7 @@
<!-- build:css -->
<!-- always pick and choose semantic ui components, full build
includes things like chatrooms! -->
<!-- we have symlinked the modules used from bower_modules into
style directory -->
+ <!-- NOTE: semantic < 1.0 docs available here for convenience:
http://legacy.semantic-ui.com/ (later versions of semantic have breaking
changes)-->
<link href="css/000_grid.min.css" rel="stylesheet">
<link href="css/010_menu.min.css" rel="stylesheet">
@@ -17,6 +18,10 @@
<link href="css/050_input.min.css" rel="stylesheet">
<link href="css/060_segment.min.css" rel="stylesheet">
<link href="css/061_popup.min.css" rel="stylesheet">
+ <link href="css/062_header.min.css" rel="stylesheet">
+ <link href="css/063_button.min.css" rel="stylesheet">
+ <link href="css/064_dropdown.min.css" rel="stylesheet">
+ <link href="css/065_divider.min.css" rel="stylesheet">
<!-- end semantic ui -->
<link href="css/070_styles.css" rel="stylesheet">
@@ -28,6 +33,6 @@
<!-- endbuild -->
</head>
<body>
- <wikimetrics-layout/>
+ <funnel-layout/>
</body>
</html>
--
To view, visit https://gerrit.wikimedia.org/r/196489
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id732758508048e5b1d3126534ad145cb21bfa4f4
Gerrit-PatchSet: 1
Gerrit-Project: analytics/dashiki
Gerrit-Branch: master
Gerrit-Owner: Milimetric <dandree...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
