mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
added word-wrpa to main.less for legend and tooltip, added comments to code in x_axis, y_axis, tooltip, legend
This commit is contained in:
Juan Thomassie
parent
794a0fd1d2
commit
0ff2284756
5 changed files with 49 additions and 46 deletions
|
|
@ -87,7 +87,7 @@ div.y-axis-label {
|
|||
min-width: 40px
|
||||
}
|
||||
|
||||
.header {
|
||||
.legend {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
margin: 0 0 14px 0;
|
||||
|
|
@ -113,16 +113,15 @@ li.color {
|
|||
margin: 0 18px 0 18px;
|
||||
padding: 3px 0 3px 0;
|
||||
text-align: left;
|
||||
// word-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
max-width: 150px;
|
||||
font-size: 12px;
|
||||
line-height: 13px;
|
||||
color: #666;
|
||||
// list-style: none;
|
||||
cursor: default;
|
||||
|
||||
text-align: left;
|
||||
flex-grow: 2;
|
||||
|
||||
//flex-grow: 2;
|
||||
}
|
||||
|
||||
.dots {
|
||||
|
|
@ -226,6 +225,8 @@ path, line, .axis line, .axis path {
|
|||
position: fixed;
|
||||
z-index: 20;
|
||||
visibility: hidden;
|
||||
word-wrap: break-word;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.rect {
|
||||
|
|
|
|||
|
|
@ -30,13 +30,19 @@ define(function (require) {
|
|||
|
||||
// Add legend header
|
||||
// Need to change the header icon
|
||||
Legend.prototype.header = function (el) {
|
||||
Legend.prototype.header = function (el, args) {
|
||||
return el.append('div')
|
||||
.attr('class', 'header')
|
||||
.append('div')
|
||||
.attr('class', 'column-labels')
|
||||
.html('<span class="btn btn-xs btn-default legend-toggle">' +
|
||||
'<i class="fa fa-list-ul"></i></span>');
|
||||
.html(function (d) {
|
||||
if (args._attr.isOpen) {
|
||||
return '<span class="btn btn-xs btn-default legend-toggle">' +
|
||||
'<i class="fa fa-chevron-right"></i></span>';
|
||||
}
|
||||
return '<span class="btn btn-xs btn-default legend-toggle">' +
|
||||
'<i class="fa fa-chevron-left"></i></span>';
|
||||
});
|
||||
};
|
||||
|
||||
// Add legend list
|
||||
|
|
@ -74,7 +80,7 @@ define(function (require) {
|
|||
var visEl = d3.select(this.el);
|
||||
var legendDiv = visEl.select('.' + this._attr.legendClass);
|
||||
var items = this.labels;
|
||||
var header = this.header(legendDiv);
|
||||
var header = this.header(legendDiv, this);
|
||||
var headerIcon = visEl.select('.legend-toggle');
|
||||
var list = this.list(legendDiv, items, this);
|
||||
|
||||
|
|
@ -93,6 +99,7 @@ define(function (require) {
|
|||
visEl.select('ul.legend-ul')
|
||||
.classed('hidden', false);
|
||||
self._attr.isOpen = true;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -48,6 +48,8 @@ define(function (require) {
|
|||
var offsetX = d3.event.offsetX;
|
||||
var tipWidth = tooltipDiv[0][0].clientWidth;
|
||||
var xOffset = 10;
|
||||
// check position of tooltip relative to chart width
|
||||
// to apply offset if tooltip should flip 'west'
|
||||
if ((chartWidth - offsetX) < tipWidth) {
|
||||
xOffset = -10 - tipWidth;
|
||||
}
|
||||
|
|
@ -56,10 +58,12 @@ define(function (require) {
|
|||
var offsetY = d3.event.offsetY;
|
||||
var tipHeight = tooltipDiv[0][0].clientHeight;
|
||||
var yOffset = 5;
|
||||
// apply y offset to keep tooltip within bottom of chart
|
||||
if ((chartHeight - offsetY + 10) < (tipHeight)) {
|
||||
yOffset = tipHeight - (chartHeight - offsetY + 5);
|
||||
}
|
||||
|
||||
// return text and position for tooltip
|
||||
return tooltipDiv.datum(d)
|
||||
.text(self.tooltipFormatter)
|
||||
.style('visibility', 'visible')
|
||||
|
|
|
|||
|
|
@ -159,6 +159,7 @@ define(function (require) {
|
|||
};
|
||||
};
|
||||
|
||||
// Eval tick label widths to apply rotate and or filter
|
||||
XAxis.prototype.checkTickLabels = function () {
|
||||
var self = this;
|
||||
var margin = this._attr.margin;
|
||||
|
|
@ -198,19 +199,19 @@ define(function (require) {
|
|||
widthArr.push(subtotalW);
|
||||
heightArr.push(subtotalH);
|
||||
|
||||
// should rotate if any chart subtotal > width
|
||||
// rotate if any chart subtotal > width
|
||||
if (subtotalW > width) {
|
||||
rotate = true;
|
||||
}
|
||||
});
|
||||
|
||||
// apply rotate if not discover view
|
||||
// do not rotate labels for discover view
|
||||
if (!self._attr.isDiscover && rotate) {
|
||||
self.rotateAxisLabels(selection);
|
||||
self._attr.isRotated = true;
|
||||
}
|
||||
|
||||
// filter labels to prevent overlap of text
|
||||
// Filter labels to prevent overlap of text
|
||||
if (self._attr.isRotated) {
|
||||
// if rotated, use label heights
|
||||
maxHeight = _.max(heightArr);
|
||||
|
|
@ -232,6 +233,7 @@ define(function (require) {
|
|||
};
|
||||
};
|
||||
|
||||
// Rotate the axis tick labels within selection
|
||||
XAxis.prototype.rotateAxisLabels = function (selection) {
|
||||
return selection.selectAll('.tick text')
|
||||
.style('text-anchor', 'end')
|
||||
|
|
@ -242,6 +244,7 @@ define(function (require) {
|
|||
});
|
||||
};
|
||||
|
||||
// Filter out every nth text label
|
||||
XAxis.prototype.filterAxisLabels = function (selection, nth) {
|
||||
var self = this;
|
||||
return selection.selectAll('text')
|
||||
|
|
@ -250,6 +253,7 @@ define(function (require) {
|
|||
});
|
||||
};
|
||||
|
||||
// Resize layout divs and flexbox values to fit axis labels
|
||||
XAxis.prototype.resizeAxisLayoutForLabels = function () {
|
||||
var self = this;
|
||||
var visEl = $(self.el);
|
||||
|
|
@ -279,6 +283,8 @@ define(function (require) {
|
|||
xdivwrapper = visEl.find('.x-axis-div-wrapper');
|
||||
yspacerblock = visEl.find('.y-axis-spacer-block');
|
||||
|
||||
// define chartwrap and titlespace, for chart title
|
||||
// and axis title based on data type
|
||||
if (dataType === 'series') {
|
||||
chartwrap = visEl.find('.chart-wrapper');
|
||||
titlespace = 15;
|
||||
|
|
@ -290,6 +296,7 @@ define(function (require) {
|
|||
titlespace = 30;
|
||||
}
|
||||
|
||||
// should have a tick node
|
||||
if (!tick.node()) {
|
||||
throw new Error('x-axis tick.node() is undefined');
|
||||
}
|
||||
|
|
@ -303,6 +310,7 @@ define(function (require) {
|
|||
};
|
||||
};
|
||||
|
||||
// Return flexbox css value using linear scales
|
||||
XAxis.prototype.getFlexVal = function (isRotated, titleSpace, tickHt, chartHt) {
|
||||
var ratio;
|
||||
var rotScale = d3.scale.linear()
|
||||
|
|
@ -319,7 +327,6 @@ define(function (require) {
|
|||
// rotated labels
|
||||
ratio = rotScale((titleSpace + tickHt) / chartHt);
|
||||
}
|
||||
|
||||
return ratio.toFixed(1);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -162,6 +162,7 @@ define(function (require) {
|
|||
};
|
||||
};
|
||||
|
||||
// Returns max tick label length
|
||||
YAxis.prototype.getMaxLabelLength = function (labels) {
|
||||
var arr = [];
|
||||
|
||||
|
|
@ -173,13 +174,14 @@ define(function (require) {
|
|||
return _.max(arr);
|
||||
};
|
||||
|
||||
// Set width of svg and trnasform axis to fit labels
|
||||
YAxis.prototype.updateLayoutForRotatedLabels = function (svg, length) {
|
||||
var margin = this._attr.margin;
|
||||
var tickspace = 14;
|
||||
|
||||
length += tickspace;
|
||||
|
||||
// set widths of svg, x-axis-div and x-axis-div-wrapper to fit ticklabels
|
||||
// set width of svg, x-axis-div and x-axis-div-wrapper to fit ticklabels
|
||||
svg.attr('width', length + 6);
|
||||
d3.selectAll('.y.axis').attr('transform', 'translate(' + (length + 2) + ',' + margin.top + ')');
|
||||
};
|
||||
|
|
@ -190,15 +192,8 @@ define(function (require) {
|
|||
var div;
|
||||
var svg;
|
||||
var tick;
|
||||
//var chartwrap;
|
||||
var titlespace;
|
||||
//var xwrapper;
|
||||
//var xdiv;
|
||||
//var xdivwrapper;
|
||||
//var yspacerblock;
|
||||
//var ratio;
|
||||
var flex;
|
||||
//var chartToXaxis;
|
||||
var dataType;
|
||||
|
||||
var visWrap = visEl.find('.vis-col-wrapper');
|
||||
|
|
@ -211,11 +206,7 @@ define(function (require) {
|
|||
var labelWidths = [];
|
||||
var maxWidth;
|
||||
var labels;
|
||||
//console.log('visWrap', visWrap);
|
||||
//console.log('yAxisColWrap', yAxisColWrap);
|
||||
//console.log('yAxisDivWrap', yAxisDivWrap);
|
||||
//console.log('legendColWrap', legendColWrap);
|
||||
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
div = d3.select(this);
|
||||
|
|
@ -223,12 +214,7 @@ define(function (require) {
|
|||
tick = svg.select('.tick');
|
||||
dataType = this.parentNode.__data__.series ? 'series' : this.parentNode.__data__.rows ? 'rows' : 'columns';
|
||||
labels = selection.selectAll('.tick text');
|
||||
//console.log('div', div);
|
||||
//console.log('svg', svg, svg[0]);
|
||||
//console.log('tick', tick);
|
||||
//console.log('dataType', dataType);
|
||||
//console.log('labels', labels);
|
||||
|
||||
|
||||
if (dataType === 'series') {
|
||||
titlespace = 15;
|
||||
} else if (dataType === 'rows') {
|
||||
|
|
@ -242,20 +228,20 @@ define(function (require) {
|
|||
labelWidths.push(n.getBBox().height);
|
||||
});
|
||||
maxWidth = Math.ceil(_.max(labelWidths)) + 20;
|
||||
flex = self.getFlexVal(dataType, titlespace, tick.node().getBBox().width, legendColWrap.width(), visWrap.width());
|
||||
//console.log('maxWidth', maxWidth);
|
||||
//console.log('flex', flex);
|
||||
//console.log('bbox', tick.node().getBBox());
|
||||
|
||||
//yAxisTitle.css('flex', 1 + ' 0 15px');
|
||||
//yAxisChartTitle.css('flex', 1 + ' 0 15px');
|
||||
//yAxisDiv.css('flex', 4 + ' 0 15px');
|
||||
yAxisColWrap.css('flex', flex + ' 1');
|
||||
//yAxisDivWrap.css('flex', flex + ' 1');
|
||||
// should have a tick node
|
||||
if (!tick.node()) {
|
||||
throw new Error('y-axis tick.node() is undefined');
|
||||
}
|
||||
|
||||
flex = self.getFlexVal(dataType, titlespace, tick.node().getBBox().width, legendColWrap.width(), visWrap.width());
|
||||
|
||||
// set flex values
|
||||
yAxisColWrap.css('flex', flex + ' 1');
|
||||
yAxisDiv.css('width', maxWidth + 'px');
|
||||
//yAxisColWrap.css('width', (maxWidth + 12) + 'px');
|
||||
yAxisDivWrap.css('width', (maxWidth + 12) + 'px');
|
||||
|
||||
// set width of svg, trnasform to fit axis labels
|
||||
svg.attr('width', maxWidth);
|
||||
svg.attr('transform', 'translate(0,0)');
|
||||
svg.select('g').attr('transform', 'translate(' + (maxWidth - 1) + ',10)');
|
||||
|
|
@ -263,6 +249,7 @@ define(function (require) {
|
|||
};
|
||||
};
|
||||
|
||||
// Return flexbox css value using linear scales
|
||||
YAxis.prototype.getFlexVal = function (dataType, titleSpace, tickWidth, legendWidth, visWidth) {
|
||||
var ratio;
|
||||
var seriesScale = d3.scale.linear()
|
||||
|
|
@ -274,17 +261,14 @@ define(function (require) {
|
|||
var colsScale = d3.scale.linear()
|
||||
.domain([0.8, 2])
|
||||
.range([0.9, 2.2]);
|
||||
// console.log(35 * (titleSpace + tickWidth) / visWidth);
|
||||
|
||||
// define ratio based on datatype
|
||||
if (dataType === 'rows') {
|
||||
ratio = rowsScale(35 * (titleSpace + tickWidth) / visWidth);
|
||||
//console.log('rows', ratio.toFixed(1));
|
||||
} else if (dataType === 'columns') {
|
||||
ratio = colsScale(35 * (titleSpace + tickWidth) / visWidth);
|
||||
//console.log('columns', ratio.toFixed(1));
|
||||
} else {
|
||||
ratio = seriesScale(35 * (titleSpace + tickWidth) / visWidth);
|
||||
//console.log('series', ratio.toFixed(1));
|
||||
}
|
||||
return ratio.toFixed(1);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue