diff --git a/css/layout.css b/css/layout.css
index 1d6c752f5..1ae3fac38 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -1,27 +1,200 @@
-.graphical-report_layout {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ font-size: 100%;
+ vertical-align: baseline;
+}
+html {
+ line-height: 1;
+}
+html,
+body {
+ height: 100%;
+}
+ol,
+ul {
+ list-style: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+caption,
+th,
+td {
+ text-align: left;
+ font-weight: normal;
+ vertical-align: middle;
+}
+q,
+blockquote {
+ quotes: none;
+}
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+ content: "";
+ content: none;
+}
+a img {
+ border: none;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+/* BASIC */
+/* Fonts */
+body {
+ font: normal 13px "Open Sans", sans-serif;
+}
+text {
+ font: normal 13px "Open Sans", sans-serif;
+}
+.graphical-report__layout {
+ display: -webkit-box;
+ display: -webkit-flexbox;
+ display: -ms-flexbox;
display: flex;
- flex-direction: column;
+ -ms-flex-align: stretch;
+ -webkit-align-items: stretch;
align-items: stretch;
+ -ms-flex-direction: column;
+ -webkit-box-orient: vertical;
+ flex-direction: column;
+ height: 100%;
+ overflow: auto;
}
-.graphical-report_container__top {
- order: 1;
+.graphical-report__layout__header {
+ -ms-flex: 0 1 auto;
+ -webkit-box-flex: 0 1 auto;
+ flex: 0 1 auto;
+ padding: 20px;
}
-.graphical-report_container__center {
- order: 2;
- flex-grow: 1;
- display: inline-flex;
- flex-direction: row;
+.graphical-report__layout__container {
+ display: -webkit-box;
+ display: -webkit-flexbox;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex: 1 1 auto;
+ -webkit-box-flex: 1 1 auto;
+ flex: 1 1 auto;
+ padding: 20px;
}
-.graphical-report_container__center-left {
- order: 1;
+.graphical-report__layout__footer {
+ -ms-flex: 0 1 auto;
+ -webkit-box-flex: 0 1 auto;
+ flex: 0 1 auto;
+ padding: 20px;
}
-.graphical-report_container__center-center {
- order: 2;
- flex-grow: 1;
+.graphical-report__layout__sidebar {
+ -ms-flex: 0 1 auto;
+ -webkit-box-flex: 0 1 auto;
+ flex: 0 1 auto;
+ padding: 20px;
}
-.graphical-report_container__center-right {
- order: 3;
+.graphical-report__layout__content {
+ -ms-flex: 1 1 auto;
+ -webkit-box-flex: 1 1 auto;
+ flex: 1 1 auto;
+ padding: 20px;
}
-.graphical-report_container__bottom {
- order: 3;
+.graphical-report__layout__sidebar-right {
+ -ms-flex: 0 1 300px;
+ -webkit-box-flex: 0 1 300px;
+ flex: 0 1 300px;
+ padding: 20px 25px;
}
diff --git a/css/default.css b/less/base.less
similarity index 60%
rename from css/default.css
rename to less/base.less
index 59df7dead..cb631cd7b 100644
--- a/css/default.css
+++ b/less/base.less
@@ -11,56 +11,61 @@ article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font: inherit;
- font-size: 100%;
- vertical-align: baseline;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ font-size: 100%;
+ vertical-align: baseline;
}
html {
- line-height: 1;
+ line-height: 1;
+}
+
+html,
+body {
+ height: 100%;
}
ol, ul {
- list-style: none;
+ list-style: none;
}
table {
- border-collapse: collapse;
- border-spacing: 0;
+ border-collapse: collapse;
+ border-spacing: 0;
}
caption, th, td {
- text-align: left;
- font-weight: normal;
- vertical-align: middle;
+ text-align: left;
+ font-weight: normal;
+ vertical-align: middle;
}
q, blockquote {
- quotes: none;
+ quotes: none;
}
+
q:before, q:after, blockquote:before, blockquote:after {
- content: "";
- content: none;
+ content: "";
+ content: none;
}
a img {
- border: none;
+ border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
- display: block;
+ display: block;
}
/* BASIC */
/* Fonts */
body {
- font: normal 13px "Open Sans", sans-serif;
+ font: normal 13px "Open Sans", sans-serif;
}
text {
- font: normal 13px "Open Sans", sans-serif;
+ font: normal 13px "Open Sans", sans-serif;
}
-
diff --git a/less/graphic-elements.less b/less/graphic-elements.less
index e47064ce0..05c25d631 100644
--- a/less/graphic-elements.less
+++ b/less/graphic-elements.less
@@ -11,32 +11,33 @@
.generate-colors(@n; @i: 1) when (@i =< @n) {
- .graphical-report__svg .color@{n}-@{i} {
- stroke: extract(@category-colors, @i);
- fill: extract(@category-colors, @i);
- }
+ .graphical-report__svg .color@{n}-@{i} {
+ stroke: extract(@category-colors, @i);
+ fill: extract(@category-colors, @i);
+ }
- .generate-colors(@n; (@i + 1));
+ .generate-colors(@n; (@i + 1));
}
.generate-colors(@list_category-colors);
.graphical-report__svg {
- .color-default {
- stroke: #377eb8;
- fill: #377eb8;
- }
+ .color-default {
+ stroke: #377eb8;
+ fill: #377eb8;
+ }
}
+
/* endregion */
/* region Generate .line-params-@{n} function */
.generate-line-params(@params; @default-size; @step; @n; @i: 1) when (@i =< @n) {
- .graphical-report__line-@{params}-@{i} {
- stroke-@{params}: @default-size;
- }
+ .graphical-report__line-@{params}-@{i} {
+ stroke-@{params}: @default-size;
+ }
- .generate-line-params(@default-size: (@default-size + @step); @params; @step; @n; (@i + 1));
+ .generate-line-params(@default-size: (@default-size + @step); @params; @step; @n; (@i + 1));
}
/* Generate .line-size-@{n} */
@@ -50,122 +51,122 @@
/* endregion */
.graphical-report {
- /* Links */
- a {
- color: @link-color;
- border-bottom: 1px solid fade(@link-color, 30%);
- text-decoration: none;
-
- &:hover {
- color: @link-hover-color;
- border-bottom: 1px solid fade(@link-hover-color, 30%);
+ /* Links */
+ a {
+ color: @link-color;
+ border-bottom: 1px solid fade(@link-color, 30%);
+ text-decoration: none;
+
+ &:hover {
+ color: @link-hover-color;
+ border-bottom: 1px solid fade(@link-hover-color, 30%);
+ }
}
- }
-
- /* Charts */
- &__chart {
- position: absolute;
- height: 100%;
- width: 100%;
- overflow: auto;
- }
-
- /* Axises and Grid */
- &__svg {
- display: block;
- .axis {
- line,
- path {
- stroke-width: 1;
- fill: none;
- stroke: @axis-color;
- shape-rendering: crispEdges;
- }
+
+ /* Charts */
+ &__chart {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ overflow: auto;
}
- .axis.facet-axis {
- .tick {
- line {
- opacity: 0;
- }
- text {
- font-weight: bold;
+ /* Axises and Grid */
+ &__svg {
+ display: block;
+ .axis {
+ line,
+ path {
+ stroke-width: 1;
+ fill: none;
+ stroke: @axis-color;
+ shape-rendering: crispEdges;
+ }
+ }
+ .axis.facet-axis {
+ .tick {
+ line {
+ opacity: 0;
+ }
+
+ text {
+ font-weight: bold;
+ }
+ }
+ path.domain {
+ opacity: 0;
+ }
+ }
+ .tick text {
+ font-size: 11px;
+ }
+ .grid {
+ path {
+ fill: none;
+ shape-rendering: crispEdges;
+ }
+ line {
+ fill: none;
+ stroke: fade(@axis-color, 50%);
+ stroke-width: 1px;
+ shape-rendering: crispEdges;
+ }
+ .line path {
+ shape-rendering: auto;
+ }
+ }
+ .label {
+ font-size: 11px;
+ font-weight: bold;
+
+ .label-token {
+ font-size: 11px;
+ font-weight: bold;
+ letter-spacing: 1px;
+ }
+
+ .label-token-1,
+ .label-token-2 {
+ font-weight: normal;
+ }
+
+ .label-token-2 {
+ fill: gray;
+ }
+
+ .label-token-delimiter {
+ font-weight: normal;
+ fill: gray;
+ }
}
- }
- path.domain {
- opacity: 0;
- }
}
- .tick text {
- font-size: 11px;
+
+ /* Scatterplot */
+ &__dot {
+ opacity: 0.6;
+ transition: stroke-width 0.1s ease, opacity 0.1s ease;
+ stroke-width: 0;
+ cursor: pointer;
}
- .grid {
- path {
- fill: none;
- shape-rendering: crispEdges;
- }
- line {
+
+ /* Linechart */
+ &__line {
fill: none;
- stroke: fade(@axis-color, 50%);
- stroke-width: 1px;
- shape-rendering: crispEdges;
- }
- .line path {
- shape-rendering: auto;
- }
}
- .label {
- font-size: 11px;
- font-weight: bold;
-
- .label-token {
- font-size: 11px;
- font-weight: bold;
- letter-spacing: 1px;
- }
-
- .label-token-1,
- .label-token-2 {
- font-weight: normal;
- }
-
- .label-token-2 {
- fill: gray;
- }
-
- .label-token-delimiter {
- font-weight: normal;
- fill: gray;
- }
+ &__dot-line {
+ opacity: 1;
+ }
+ /* Bar */
+ &__bar {
+ //fill: steelblue;
+ }
+
+ /* PLUGINS */
+
+ /* Highlighter */
+ &__dot.highlighted {
+ stroke-width: 6;
+ stroke-opacity: 0.4;
+ opacity: 1;
}
- }
-
- /* Scatterplot */
- &__dot {
- opacity: 0.6;
- transition: stroke-width 0.1s ease, opacity 0.1s ease;
- stroke-width: 0;
- cursor: pointer;
- }
-
- /* Linechart */
- &__line {
- fill: none;
- }
- &__dot-line {
- opacity: 1;
- }
- /* Bar */
- &__bar {
- //fill: steelblue;
- }
-
- /* PLUGINS */
-
- /* Highlighter */
- &__dot.highlighted {
- stroke-width: 6;
- stroke-opacity: 0.4;
- opacity: 1;
- }
}
diff --git a/less/layout.less b/less/layout.less
index 75b54ed20..02cba446d 100644
--- a/less/layout.less
+++ b/less/layout.less
@@ -1,30 +1,49 @@
-.graphical-report_layout {
- display: flex;
- flex-direction: column;
- align-items: stretch;
-}
+@import "variable";
+@import "mixins";
+@import "base";
-.graphical-report_container__top {
- order: 1;
-}
+.graphical-report {
+
+ &__layout {
+ .flexbox;
+ .flex-align(@params:stretch);
+ .flex-direction-column;
+ height: 100%;
+ overflow: auto;
+
+ &__header {
+ .flex;
+ padding: 20px;
+ }
+
+ &__container {
+ .flexbox;
+ .flex(@flex-grow: 1);
+ padding: 20px;
+ }
+
+ &__footer {
+ .flex;
+ padding: 20px;
+ }
-.graphical-report_container__center {
- order: 2;
- flex-grow: 1;
- display: inline-flex;
- flex-direction: row;
- &-left {
- order: 1;
- }
- &-center {
- order: 2;
- flex-grow: 1;
- }
- &-right {
- order: 3;
- }
+ &__sidebar {
+ .flex;
+ padding: 20px;
+ }
+
+ &__content {
+ .flex(@flex-grow: 1);
+ padding: 20px;
+ }
+
+ &__sidebar-right {
+ .flex(@flex-basis: 300px);
+ padding: 20px 25px;
+ }
+ }
}
-.graphical-report_container__bottom {
- order: 3;
-}
\ No newline at end of file
+
+
+
diff --git a/less/legend.less b/less/legend.less
new file mode 100644
index 000000000..e2ffa25b0
--- /dev/null
+++ b/less/legend.less
@@ -0,0 +1,40 @@
+@import "variable";
+
+.graphical-report {
+ &__legend {
+
+ &__title,
+ &__item {
+ margin: 0 0 10px 0;
+ }
+
+ &__title {
+ text-transform: uppercase;
+ font-weight: 600;
+ font-size: 13px;
+ }
+
+ &__item {
+ padding-left: 25px;
+ position: relative;
+ font-size: 13px;
+
+ &:disabled,
+ &.disabled {
+ color: @font-gray;
+ }
+ }
+
+ &__example {
+ width: 15px;
+ height: 15px;
+ box-sizing: border-box;
+ border: 1px solid transparent;
+ border-radius: 50%;
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
new file mode 100644
index 000000000..6c2c4fb63
--- /dev/null
+++ b/less/mixins.less
@@ -0,0 +1,24 @@
+.flexbox() {
+ display: -webkit-box;
+ display: -webkit-flexbox;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.flex-align(@params) {
+ -ms-flex-align: @params;
+ -webkit-align-items: @params;
+ align-items: @params;
+}
+
+.flex-direction-column() {
+ -ms-flex-direction: column;
+ -webkit-box-orient: vertical;
+ flex-direction: column;
+}
+
+.flex(@flex-grow:0, @flex-shrink:1, @flex-basis:auto) {
+ -ms-flex: @flex-grow @flex-shrink @flex-basis;
+ -webkit-box-flex: @flex-grow @flex-shrink @flex-basis;
+ flex: @flex-grow @flex-shrink @flex-basis;
+}
\ No newline at end of file
diff --git a/less/tooltip.less b/less/tooltip.less
index f02a20cb0..ec9138cd8 100644
--- a/less/tooltip.less
+++ b/less/tooltip.less
@@ -2,66 +2,66 @@
@bgColor: rgba(255, 255, 255, 0.9);
@fontFamily: OpenSans, 'Helvetica Neue', Helvetica, Arial, sans-serif;
.graphical-report {
- &__tooltip {
- position: absolute;
- top: 0;
- left: 0;
- max-width: 300px;
- z-index: 900;
- font-family: @fontFamily;
- font-size: 11px;
- background: @bgColor;
- box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
+ &__tooltip {
+ position: absolute;
+ top: 0;
+ left: 0;
+ max-width: 300px;
+ z-index: 900;
+ font-family: @fontFamily;
+ font-size: 11px;
+ background: @bgColor;
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
- &__content {
- padding: 15px 15px 10px 15px;
- }
+ &__content {
+ padding: 15px 15px 10px 15px;
+ }
- &__exclude {
- padding: 0 15px;
- line-height: 26px;
- border-top: 1px solid #dde2e7;
- color: #65717f;
- cursor: pointer;
+ &__exclude {
+ padding: 0 15px;
+ line-height: 26px;
+ border-top: 1px solid #dde2e7;
+ color: #65717f;
+ cursor: pointer;
- &:hover {
- background: linear-gradient(to bottom, rgba(235, 238, 241, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
- }
+ &:hover {
+ background: linear-gradient(to bottom, rgba(235, 238, 241, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
+ }
- .tau-icon-close-gray {
- display: inline-block;
- width: 12px;
- height: 12px;
- position: relative;
- top: 3px;
- margin-right: 5px;
- background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGlkPSJTaGFwZV8zNV8iIGZpbGw9IiM4NDk2QTciIGQ9Ik0xMCwwLjcxNUw5LjI4NSwwTDUsNC4yODVMMC43MTUsMEwwLDAuNzE1TDQuMjg1LDVMMCw5LjI4NUwwLjcxNSwxMEw1LDUuNzE1TDkuMjg1LDEwTDEwLDkuMjg1TDUuNzE1LDVMMTAsMC43MTV6Ii8+PC9zdmc+);
+ .tau-icon-close-gray {
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ position: relative;
+ top: 3px;
+ margin-right: 5px;
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGlkPSJTaGFwZV8zNV8iIGZpbGw9IiM4NDk2QTciIGQ9Ik0xMCwwLjcxNUw5LjI4NSwwTDUsNC4yODVMMC43MTUsMEwwLDAuNzE1TDQuMjg1LDVMMCw5LjI4NUwwLjcxNSwxMEw1LDUuNzE1TDkuMjg1LDEwTDEwLDkuMjg1TDUuNzE1LDVMMTAsMC43MTV6Ii8+PC9zdmc+);
- }
- }
- &__list {
- display: table;
+ }
+ }
+ &__list {
+ display: table;
- &__item {
- display: table-row;
- }
+ &__item {
+ display: table-row;
+ }
- &__elem {
- display: table-cell;
- padding-bottom: 4px;
- line-height: 1.3;
+ &__elem {
+ display: table-cell;
+ padding-bottom: 4px;
+ line-height: 1.3;
- &:not(:first-child) {
- padding-left: 15px;
- }
+ &:not(:first-child) {
+ padding-left: 15px;
+ }
- &:first-child {
- color: @grayTextColor;
+ &:first-child {
+ color: @grayTextColor;
+ }
+ }
+ }
+ &__gray-text {
+ color: @grayTextColor;
}
- }
- }
- &__gray-text {
- color: @grayTextColor;
}
- }
}
diff --git a/less/variable.less b/less/variable.less
new file mode 100644
index 000000000..0a504d733
--- /dev/null
+++ b/less/variable.less
@@ -0,0 +1 @@
+@font-gray: #ccc;
\ No newline at end of file
diff --git a/prototype/index.html b/prototype/index.html
index f2f23c0b2..663da8a08 100644
--- a/prototype/index.html
+++ b/prototype/index.html
@@ -4,23 +4,36 @@
+
-
-
-
top
-
-
left
-
center
-
right
+
+
<%=name%>