github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

fixing horizontal bar chart labels

Browse source
This commit is contained in:
ppisljar 2017-02-13 12:30:08 +01:00
parent 7e742627f8
commit 3d437e5335
3 changed files with 27 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
View file

@ -55,7 +55,7 @@ export default function PointSeriesVisType(Private) {
labels: {
show: true,
rotate: 75,
filter: false,
filter: true,
truncate: 100
},
title: {}

6
src/ui/public/vislib/lib/axis/axis.js
View file

@ -169,6 +169,7 @@ export default function AxisFactory(Private) {
}
draw() {
let svg;
const self = this;
const config = this.axisConfig;
const style = config.get('style');
@ -190,7 +191,7 @@ export default function AxisFactory(Private) {
const axis = self.getAxis(length);
if (config.get('show')) {
const svg = div.append('svg')
svg = div.append('svg')
.attr('width', width)
.attr('height', height);
@ -211,13 +212,14 @@ export default function AxisFactory(Private) {
.style('stroke-opacity', style.opacity);
}
if (self.axisLabels) self.axisLabels.render(svg);
svg.call(self.adjustSize());
}
});
if (self.axisTitle && ['right', 'bottom'].includes(config.get('position'))) {
self.axisTitle.render(selection);
}
svg.call(self.adjustSize());
};
}
}

36
src/ui/public/vislib/lib/axis/axis_labels.js
View file

@ -19,29 +19,37 @@ export default function AxisLabelsFactory(Private) {
if (config.get('labels.rotate')) {
text
.style('text-anchor', function () {
return config.get('labels.rotateAnchor') === 'center' ? 'center' : 'end';
.style('text-anchor', function (d, i) {
const currentValue = $(this).css('text-anchor');
const rotateDeg = config.get('labels.rotate');
if (!rotateDeg) return currentValue;
else {
const position = config.get('position');
switch (position) {
case 'top': return 'end';
case 'bottom': return 'end';
default:
if (rotateDeg === 90 || rotateDeg === -90) return 'middle';
return currentValue;
}
}
})
.attr('dy', function () {
if (config.isHorizontal()) {
if (config.get('position') === 'top') return '-0.9em';
else return '0.3em';
}
return '0';
})
.attr('dx', function () {
return config.isHorizontal() ? '-0.9em' : '0';
return config.isHorizontal() ? '0.3em' : '0';
})
.attr('transform', function rotate(d, j) {
let rotateDeg = config.get('labels.rotate');
if (config.get('labels.rotateAnchor') === 'center') {
const position = config.get('position');
const rotateDeg = position === 'top' ? config.get('labels.rotate') : -config.get('labels.rotate');
if ($(this).css('text-anchor') === 'middle') {
const coord = text[0][j].getBBox();
const transX = ((coord.x) + (coord.width / 2));
const transY = ((coord.y) + (coord.height / 2));
return `rotate(${rotateDeg}, ${transX}, ${transY})`;
} else {
rotateDeg = config.get('position') === 'top' ? rotateDeg : -rotateDeg;
return `rotate(${rotateDeg})`;
const transX = this.attributes.x.nodeValue;
const transY = this.attributes.y.nodeValue;
return `rotate(${rotateDeg}, ${transX}, ${transY})`;
}
});
}