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

axis labels to plain class (#37844) (#37872)

Browse source
This commit is contained in:
Matthew Kime 2019-06-03 12:02:40 -05:00 • committed by GitHub
parent 631ea17ee1
commit 2ff12cfde6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 116 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/legacy/ui/public/vislib/lib/axis/axis.js
View file

@ -22,7 +22,7 @@ import _ from 'lodash';
import $ from 'jquery';
import { VislibLibErrorHandlerProvider } from '../_error_handler';
import { VislibLibAxisTitleProvider } from './axis_title';
import { VislibAxisLabelsProvider } from './axis_labels';
import { AxisLabels } from './axis_labels';
import { VislibAxisScaleProvider } from './axis_scale';
import { VislibLibAxisConfigProvider } from './axis_config';
import { VislibError } from '../../../errors';
@ -30,7 +30,6 @@ import { VislibError } from '../../../errors';
export function VislibLibAxisProvider(Private) {
const ErrorHandler = Private(VislibLibErrorHandlerProvider);
const AxisTitle = Private(VislibLibAxisTitleProvider);
const AxisLabels = Private(VislibAxisLabelsProvider);
const AxisScale = Private(VislibAxisScaleProvider);
const AxisConfig = Private(VislibLibAxisConfigProvider);

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

@ -21,125 +21,121 @@ import d3 from 'd3';
import $ from 'jquery';
import { truncateLabel } from '../../components/labels/truncate_labels';
export function VislibAxisLabelsProvider() {
class AxisLabels {
constructor(axisConfig, scale) {
this.axisConfig = axisConfig;
this.axisScale = scale;
}
render(selection) {
selection.call(this.draw());
}
rotateAxisLabels() {
const config = this.axisConfig;
return function (selection) {
const text = selection.selectAll('.tick text');
if (config.get('labels.rotate')) {
text
.style('text-anchor', function () {
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 () {
return config.isHorizontal() ? '0.3em' : '0';
})
.attr('transform', function rotate(d, j) {
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 {
const transX = this.attributes.x.nodeValue;
const transY = this.attributes.y.nodeValue;
return `rotate(${rotateDeg}, ${transX}, ${transY})`;
}
});
}
};
}
truncateLabels() {
const config = this.axisConfig;
return function (selection) {
if (!config.get('labels.truncate')) return;
selection.selectAll('.tick text')
.text(function () {
return truncateLabel(this, config.get('labels.truncate'));
});
};
}
filterAxisLabels() {
const self = this;
const config = this.axisConfig;
let startPos = 0;
const padding = 1.1;
return function (selection) {
if (!config.get('labels.filter')) return;
const el = $(config.get('rootEl')).find(config.get('elSelector'));
const maxSize = config.isHorizontal() ? el.width() : el.height();
const scaleRange = self.axisScale.scale.range();
const scaleWidth = Math.abs(scaleRange[scaleRange.length - 1] - scaleRange[0]);
const scaleStartPad = .5 * (maxSize - scaleWidth);
selection.selectAll('.tick text')
.text(function (d) {
const par = d3.select(this.parentNode).node();
const myPos = scaleStartPad + self.axisScale.scale(d);
const mySize = (config.isHorizontal() ? par.getBBox().width : par.getBBox().height) * padding;
const halfSize = mySize / 2;
if ((startPos + halfSize) < myPos && maxSize > (myPos + halfSize)) {
startPos = myPos + halfSize;
return this.textContent;
} else {
d3.select(this.parentNode).remove();
}
});
};
}
draw() {
const self = this;
const config = this.axisConfig;
return function (selection) {
selection.each(function () {
selection.selectAll('text')
.attr('style', function () {
const currentStyle = d3.select(this).attr('style');
return `${currentStyle} font-size: ${config.get('labels.fontSize')};`;
});
if (!config.get('labels.show')) selection.selectAll('text').attr('style', 'display: none;');
selection.call(self.truncateLabels());
selection.call(self.rotateAxisLabels());
selection.call(self.filterAxisLabels());
});
};
}
export class AxisLabels {
constructor(axisConfig, scale) {
this.axisConfig = axisConfig;
this.axisScale = scale;
}
return AxisLabels;
render(selection) {
selection.call(this.draw());
}
rotateAxisLabels() {
const config = this.axisConfig;
return function (selection) {
const text = selection.selectAll('.tick text');
if (config.get('labels.rotate')) {
text
.style('text-anchor', function () {
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 () {
return config.isHorizontal() ? '0.3em' : '0';
})
.attr('transform', function rotate(d, j) {
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 {
const transX = this.attributes.x.nodeValue;
const transY = this.attributes.y.nodeValue;
return `rotate(${rotateDeg}, ${transX}, ${transY})`;
}
});
}
};
}
truncateLabels() {
const config = this.axisConfig;
return function (selection) {
if (!config.get('labels.truncate')) return;
selection.selectAll('.tick text')
.text(function () {
return truncateLabel(this, config.get('labels.truncate'));
});
};
}
filterAxisLabels() {
const self = this;
const config = this.axisConfig;
let startPos = 0;
const padding = 1.1;
return function (selection) {
if (!config.get('labels.filter')) return;
const el = $(config.get('rootEl')).find(config.get('elSelector'));
const maxSize = config.isHorizontal() ? el.width() : el.height();
const scaleRange = self.axisScale.scale.range();
const scaleWidth = Math.abs(scaleRange[scaleRange.length - 1] - scaleRange[0]);
const scaleStartPad = .5 * (maxSize - scaleWidth);
selection.selectAll('.tick text')
.text(function (d) {
const par = d3.select(this.parentNode).node();
const myPos = scaleStartPad + self.axisScale.scale(d);
const mySize = (config.isHorizontal() ? par.getBBox().width : par.getBBox().height) * padding;
const halfSize = mySize / 2;
if ((startPos + halfSize) < myPos && maxSize > (myPos + halfSize)) {
startPos = myPos + halfSize;
return this.textContent;
} else {
d3.select(this.parentNode).remove();
}
});
};
}
draw() {
const self = this;
const config = this.axisConfig;
return function (selection) {
selection.each(function () {
selection.selectAll('text')
.attr('style', function () {
const currentStyle = d3.select(this).attr('style');
return `${currentStyle} font-size: ${config.get('labels.fontSize')};`;
});
if (!config.get('labels.show')) selection.selectAll('text').attr('style', 'display: none;');
selection.call(self.truncateLabels());
selection.call(self.rotateAxisLabels());
selection.call(self.filterAxisLabels());
});
};
}
}