Skip to content

Commit

Permalink
add labels to bat chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmeshi
mmeshi committed May 10, 2019
1 parent 6ef9fbe commit b04cfbf
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 3 deletions.
14 changes: 13 additions & 1 deletion src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,19 @@
</div>
</div>

<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="showLabels"
i18n-id="kbnVislibVisTypes.editors.pointSeries.showLabels"
i18n-default-message="Show Labels"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.labels.show">
</div>
</div>

<vislib-grid></vislib-grid>
</div>

</div>
</div>
3 changes: 3 additions & 0 deletions src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,9 @@ export default function PointSeriesVisType(Private, i18n) {
legendPosition: 'right',
times: [],
addTimeMarker: false,
labels: {
show: false,
}
},
},
editorConfig: {
Expand Down
6 changes: 4 additions & 2 deletions src/legacy/ui/public/vislib/lib/axis/axis_scale.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,10 +157,12 @@ export function VislibAxisScaleProvider() {
}

getRange(length) {
const padX = 40;
const padY = 15;
if (this.axisConfig.isHorizontal()) {
return !this.axisConfig.get('scale.inverted') ? [0, length] : [length, 0];
return !this.axisConfig.get('scale.inverted') ? [0, length - padX] : [length - padX, 0];
} else {
return this.axisConfig.get('scale.inverted') ? [0, length] : [length, 0];
return this.axisConfig.get('scale.inverted') ? [0 + padY, length] : [length, 0 + padY];
}
}

Expand Down
115 changes: 115 additions & 0 deletions src/legacy/ui/public/vislib/visualizations/point_series/column_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
*/

import _ from 'lodash';
import d3 from 'd3';
import { VislibVisualizationsPointSeriesProvider } from './_point_series';

export function VislibVisualizationsColumnChartProvider(Private) {
Expand All @@ -29,8 +30,18 @@ export function VislibVisualizationsColumnChartProvider(Private) {
showTooltip: true,
color: undefined,
fillColor: undefined,
showLabel: true
};

function invertColor(hex) {
const d3rgb = d3.rgb(hex);
const r = d3rgb.r;
const g = d3rgb.g;
const b = d3rgb.b;
const a = 1.0 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return a < 0.5 ? d3rgb.darker(1) : d3rgb.brighter(3);
}

/**
* Histogram intervals are not always equal widths, e.g, monthly time intervals.
* It is more visually appealing to vary bar width so that gutter width is constant.
Expand Down Expand Up @@ -61,6 +72,7 @@ export function VislibVisualizationsColumnChartProvider(Private) {
constructor(handler, chartEl, chartData, seriesConfigArgs) {
super(handler, chartEl, chartData, seriesConfigArgs);
this.seriesConfig = _.defaults(seriesConfigArgs || {}, defaults);
this.labelOptions = _.defaults(handler.visConfig.get('labels', {}), defaults.showLabel);
}

addBars(svg, data) {
Expand Down Expand Up @@ -127,8 +139,10 @@ export function VislibVisualizationsColumnChartProvider(Private) {
const yScale = this.getValueAxis().getScale();
const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
const isTimeScale = this.getCategoryAxis().axisConfig.isTimeDomain();
const isLabels = this.labelOptions.show;
const yMin = yScale.domain()[0];
const gutterSpacingPercentage = 0.15;
const chartData = this.chartData;
const groupCount = this.getGroupedCount();
const groupNum = this.getGroupedNum(this.chartData);
let barWidth;
Expand Down Expand Up @@ -174,13 +188,64 @@ export function VislibVisualizationsColumnChartProvider(Private) {
return Math.abs(yScale(d.y0) - yScale(d.y0 + d.y));
}

function hideText(d, i, selector) {
if (isHorizontal && selector.getBBox().width > widthFunc(d, i)) return true;
if (!isHorizontal && selector.getBBox().width > heightFunc(d)) return true;
if (isHorizontal && selector.getBBox().height > heightFunc(d)) return true;
if (!isHorizontal && selector.getBBox().height > widthFunc(d, i)) return true;
return false;
}

function formatValue(d) {
return chartData.yAxisFormatter(d.y);
}

// update
bars
.attr('x', isHorizontal ? x : y)
.attr('width', isHorizontal ? widthFunc : heightFunc)
.attr('y', isHorizontal ? y : x)
.attr('height', isHorizontal ? heightFunc : widthFunc);

const data = this.chartData;
const color = this.handler.data.getColorFunc();
const layer = d3.select(bars[0].parentNode);
const barLabels = layer.selectAll('text').data(data.values.filter(function (d) {
return !_.isNull(d.y);
}));

barLabels
.exit()
.remove();

if (isLabels) {
if (isHorizontal) {
barLabels
.enter()
.append('text')
.text(formatValue)
.attr('x', (d, i) => x(d, i) + widthFunc(d, i) / 2)
.attr('y', (d) => y(d) + heightFunc(d) / 2)
.attr('dominant-baseline', 'central')
.attr('text-anchor', 'middle')
.attr('font-size', '8pt')
.attr('fill', () => invertColor(color(data.label)))
.attr('display', function (d, i) { return hideText(d, i, this) ? 'none' : 'block'; });
} else {
barLabels
.enter()
.append('text')
.text(formatValue)
.attr('x', (d) => y(d) + heightFunc(d) / 2)
.attr('y', (d, i) => x(d, i) + widthFunc(d, i) / 2)
.attr('dominant-baseline', 'central')
.attr('text-anchor', 'middle')
.attr('font-size', '8pt')
.attr('fill', () => invertColor(color(data.label)))
.attr('display', function (d, i) { return hideText(d, i, this) ? 'none' : 'block'; });
}
}

return bars;
}

Expand All @@ -194,12 +259,14 @@ export function VislibVisualizationsColumnChartProvider(Private) {
addGroupedBars(bars) {
const xScale = this.getCategoryAxis().getScale();
const yScale = this.getValueAxis().getScale();
const chartData = this.chartData;
const groupCount = this.getGroupedCount();
const groupNum = this.getGroupedNum(this.chartData);
const gutterSpacingPercentage = 0.15;
const isTimeScale = this.getCategoryAxis().axisConfig.isTimeDomain();
const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
const isLogScale = this.getValueAxis().axisConfig.isLogScale();
const isLabels = this.labelOptions.show;
let barWidth;
let gutterWidth;

Expand Down Expand Up @@ -239,13 +306,61 @@ export function VislibVisualizationsColumnChartProvider(Private) {
return Math.abs(yScale(baseValue) - yScale(d.y));
}

function hideText(d, i, selector) {
if (isHorizontal && selector.getBBox().width > widthFunc(d, i)) return true;
if (!isHorizontal && selector.getBBox().height > widthFunc(d)) return true;
return false;
}

function formatValue(d) {
return chartData.yAxisFormatter(d.y);
}

// update
bars
.attr('x', isHorizontal ? x : y)
.attr('width', isHorizontal ? widthFunc : heightFunc)
.attr('y', isHorizontal ? y : x)
.attr('height', isHorizontal ? heightFunc : widthFunc);

const data = this.chartData;
const color = this.handler.data.getColorFunc();
const layer = d3.select(bars[0].parentNode);
const barLabels = layer.selectAll('text').data(data.values.filter(function (d) {
return !_.isNull(d.y);
}));

barLabels
.exit()
.remove();

if (isLabels) {
if (isHorizontal) {
barLabels
.enter()
.append('text')
.text(formatValue)
.attr('x', (d, i) => x(d, i) + widthFunc(d, i) / 2)
.attr('y', (d, i) => y(d, i) - 4)
.attr('dominant-baseline', 'auto')
.attr('text-anchor', 'middle')
.attr('font-size', '8pt')
.attr('fill', () => color(data.label))
.attr('display', function (d, i) { return hideText(d, i, this) ? 'none' : 'block'; });
} else {
barLabels
.enter()
.append('text')
.text(formatValue)
.attr('x', (d) => y(d) + heightFunc(d) + 4)
.attr('y', (d, i) => x(d, i) + widthFunc(d, i) / 2)
.attr('dominant-baseline', 'central')
.attr('text-anchor', 'start')
.attr('font-size', '8pt')
.attr('fill', () => color(data.label))
.attr('display', function (d, i) { return hideText(d, i, this) ? 'none' : 'block'; });
}
}
return bars;
}

Expand Down

0 comments on commit b04cfbf

Please sign in to comment.