Merge branch 'vislib/refactor' of https://github.com/elasticsearch/kibana4 into vislib/refactor
This commit is contained in:
Juan Thomassie
commit
9b1dcd8c25
2
TODOS.md
2
TODOS.md
|
|
@ -12,6 +12,8 @@
|
|||
- we should probably display a message of some kind
|
||||
- **[src/kibana/components/index_patterns/_mapper.js](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/components/index_patterns/_mapper.js)**
|
||||
- Change index to be the resolved in some way, last three months, last hour, last year, whatever
|
||||
- **[src/kibana/components/vislib/vis.js](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/components/vislib/vis.js)**
|
||||
- need to come up with a solution for resizing when no data is available
|
||||
- **[src/kibana/components/visualize/visualize.js](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/components/visualize/visualize.js)**
|
||||
- we need to have some way to clean up result requests
|
||||
- **[src/kibana/directives/rows.js](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/directives/rows.js)**
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
/* vislib styles */
|
||||
@import (reference) "lesshat.less";
|
||||
|
||||
/* vislib styles */
|
||||
.arc path {
|
||||
stroke: #fff;
|
||||
/* stroke-width: 3px; */
|
||||
}
|
||||
|
||||
div.columns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 1 100%;
|
||||
.display(flex);
|
||||
.flex-direction(row);
|
||||
.flex(1 1 100%);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 100%;
|
||||
.display(flex);
|
||||
.flex-direction(column);
|
||||
.flex(1 1 100%);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -32,28 +33,28 @@ visualize {
|
|||
}
|
||||
|
||||
.visualize-chart {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
.display(flex);
|
||||
.flex(1 1 100%);
|
||||
}
|
||||
|
||||
.visualize-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.display(flex);
|
||||
.flex-direction(row);
|
||||
}
|
||||
|
||||
.y-axis-wrapper {
|
||||
display: flex;
|
||||
flex: 1 1;
|
||||
flex-direction: column;
|
||||
.display(flex);
|
||||
.flex(1 1);
|
||||
.flex-direction(column);
|
||||
}
|
||||
|
||||
.y-axis-div {
|
||||
flex: 4 1;
|
||||
.flex(4 1);
|
||||
min-width: 25px
|
||||
}
|
||||
|
||||
.y-axis-filler-div {
|
||||
flex: 1 1;
|
||||
.flex(1 1);
|
||||
}
|
||||
|
||||
div.x-axis-label {
|
||||
|
|
@ -80,7 +81,7 @@ div.y-axis-label {
|
|||
|
||||
/* legend */
|
||||
.legend-col-wrapper {
|
||||
flex: 0.3 1 auto;
|
||||
.flex(0.3 1 auto);
|
||||
z-index: 10;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
|
@ -104,8 +105,8 @@ div.y-axis-label {
|
|||
margin: 0 0 0 14px;
|
||||
padding: 0;
|
||||
visibility: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.display(flex);
|
||||
.flex-direction(column);
|
||||
}
|
||||
|
||||
.legend-ul.hidden {
|
||||
|
|
@ -113,8 +114,6 @@ div.y-axis-label {
|
|||
}
|
||||
|
||||
li.color {
|
||||
// display: block;
|
||||
// float: left;
|
||||
min-height: 22px;
|
||||
margin: 0 18px 0 18px;
|
||||
padding: 3px 0 3px 0;
|
||||
|
|
@ -124,7 +123,7 @@ li.color {
|
|||
color: #666;
|
||||
cursor: default;
|
||||
text-align: left;
|
||||
flex-grow: 2;
|
||||
.flex-grow(2);
|
||||
word-wrap: break-word;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
|
@ -210,7 +209,7 @@ path, line, .axis line, .axis path {
|
|||
}
|
||||
|
||||
.legend-box {
|
||||
fill: #ffffff;
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.brush .extent {
|
||||
|
|
@ -250,35 +249,35 @@ path, line, .axis line, .axis path {
|
|||
|
||||
/* Flex Box */
|
||||
.vis-wrapper {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
.display(flex);
|
||||
.flex(1 1 100%);
|
||||
.flex-direction(row);
|
||||
margin: 10px 0 0 6px;
|
||||
}
|
||||
|
||||
.error {
|
||||
flex: 1 1 100%;
|
||||
.flex(1 1 100%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error p {
|
||||
margin-top: 15%;
|
||||
font-size: 18px;
|
||||
text-wrap: wrap;
|
||||
p {
|
||||
margin-top: 15%;
|
||||
font-size: 18px;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* YAxis logic */
|
||||
.y-axis-col-wrapper {
|
||||
display: flex;
|
||||
flex: 0.1 1;
|
||||
flex-direction: column;
|
||||
.display(flex);
|
||||
.flex(0.1 1);
|
||||
.flex-direction(column);
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.y-axis-col {
|
||||
display: flex;
|
||||
flex: 35 1;
|
||||
flex-direction: row;
|
||||
.display(flex);
|
||||
.flex(35 1);
|
||||
.flex-direction(row);
|
||||
}
|
||||
|
||||
.y-axis-title {
|
||||
|
|
@ -292,14 +291,14 @@ path, line, .axis line, .axis path {
|
|||
}
|
||||
|
||||
.y-axis-chart-title {
|
||||
display: flex;
|
||||
.display(flex);
|
||||
// flex: 1 1;
|
||||
flex-direction: column;
|
||||
.flex-direction(column);
|
||||
width: 15px
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
flex: 1 1;
|
||||
.flex(1 1);
|
||||
}
|
||||
|
||||
.chart-title text {
|
||||
|
|
@ -308,82 +307,77 @@ path, line, .axis line, .axis path {
|
|||
}
|
||||
|
||||
.y-axis-div-wrapper {
|
||||
display: flex;
|
||||
.display(flex);
|
||||
//flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
.flex-direction(column);
|
||||
min-width: 20px
|
||||
}
|
||||
|
||||
.vis-col-wrapper {
|
||||
display: flex;
|
||||
flex: 35 1;
|
||||
flex-direction: column;
|
||||
.display(flex);
|
||||
.flex(35 1);
|
||||
.flex-direction(column);
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
display: flex;
|
||||
flex: 35 1;
|
||||
.display(flex);
|
||||
.flex(35 1);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.chart-wrapper-column {
|
||||
display: flex;
|
||||
flex: 35 1;
|
||||
flex-direction: row;
|
||||
.display(flex);
|
||||
.flex(35 1);
|
||||
.flex-direction(row);
|
||||
}
|
||||
|
||||
.chart-wrapper-row {
|
||||
display: flex;
|
||||
flex: 35 1;
|
||||
flex-direction: column;
|
||||
.display(flex);
|
||||
.flex(35 1);
|
||||
.flex-direction(column);
|
||||
}
|
||||
|
||||
.chart {
|
||||
flex: 1 1;
|
||||
.flex(1 1);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.chart-row {
|
||||
flex: 1 1;
|
||||
.flex(1 1);
|
||||
}
|
||||
|
||||
.chart-column {
|
||||
flex: 1 1;
|
||||
.flex(1 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.y-axis-spacer-block {
|
||||
flex: 8 1;
|
||||
.flex(8 1);
|
||||
}
|
||||
|
||||
.x-axis-wrapper {
|
||||
display: flex;
|
||||
flex: 8 1;
|
||||
flex-direction: column;
|
||||
.display(flex);
|
||||
.flex(8 1);
|
||||
.flex-direction(column);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.x-axis-div-wrapper {
|
||||
display: flex;
|
||||
flex: 8 1;
|
||||
flex-direction: row;
|
||||
// overflow: visible;
|
||||
.display(flex);
|
||||
.flex(8 1);
|
||||
.flex-direction(row);
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.x-axis-chart-title {
|
||||
display: flex;
|
||||
flex: 1 1;
|
||||
flex-direction: row;
|
||||
.display(flex);
|
||||
.flex(1 1);
|
||||
.flex-direction(row);
|
||||
min-height: 15px;
|
||||
max-height: 15px;
|
||||
}
|
||||
|
||||
.x-axis-title {
|
||||
flex: 1 1;
|
||||
.flex(1 1);
|
||||
min-height: 15px;
|
||||
max-height: 15px;
|
||||
}
|
||||
|
|
@ -393,7 +387,7 @@ path, line, .axis line, .axis path {
|
|||
}
|
||||
|
||||
.x-axis-div {
|
||||
flex: 8 1;
|
||||
.flex(8 1);
|
||||
overflow: visible;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,11 +40,13 @@ define(function (require) {
|
|||
this.handler.render();
|
||||
} catch (error) {
|
||||
// if involving height and width of the container, log error to screen
|
||||
if (error.message === 'The height and/or width of this container ' +
|
||||
'is too small for this chart.') {
|
||||
// Because we have to wait for the DOM element to initialize, we do not
|
||||
// want to throw an error when the DOM `el` is zero
|
||||
if ($(this.el).height() > 0 &&
|
||||
error.message === 'The height and/or width of this container is too small for this chart.') {
|
||||
this.handler.error(error.message);
|
||||
} else {
|
||||
throw (error);
|
||||
console.group(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +70,8 @@ define(function (require) {
|
|||
// Resize the chart
|
||||
Vis.prototype.resize = function () {
|
||||
if (!this.data) {
|
||||
throw new Error('No valid data');
|
||||
// TODO: need to come up with a solution for resizing when no data is available
|
||||
return;
|
||||
}
|
||||
this.render(this.data);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue