diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js index 11a25fc..b697c66 100644 --- a/src/js/charts/AxisChart.js +++ b/src/js/charts/AxisChart.js @@ -429,7 +429,8 @@ export default class AxisChart extends BaseChart { '0', barWidth, this.colors[i], - d.name); + d.name, + this.config.truncateLegends); this.legendArea.appendChild(rect); }); } diff --git a/src/js/charts/BaseChart.js b/src/js/charts/BaseChart.js index e7f6d3f..ebe12fe 100644 --- a/src/js/charts/BaseChart.js +++ b/src/js/charts/BaseChart.js @@ -34,7 +34,8 @@ export default class BaseChart { showTooltip: 1, // calculate showLegend: 1, // calculate isNavigable: options.isNavigable || 0, - animate: 1 + animate: 1, + truncateLegends: options.truncateLegends || 0 }; this.measures = JSON.parse(JSON.stringify(BASE_MEASURES)); diff --git a/src/js/utils/draw-utils.js b/src/js/utils/draw-utils.js index a8242cc..5898e33 100644 --- a/src/js/utils/draw-utils.js +++ b/src/js/utils/draw-utils.js @@ -24,3 +24,14 @@ export function equilizeNoOfElements(array1, array2, } return [array1, array2]; } + +export function truncateString(txt, len) { + if (!txt) { + return; + } + if (txt.length > len) { + return txt.slice(0, len-3) + '...'; + } else { + return txt; + } +} \ No newline at end of file diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index a03e34e..e5174af 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -1,10 +1,11 @@ -import { getBarHeightAndYAttr } from './draw-utils'; +import { getBarHeightAndYAttr, truncateString } from './draw-utils'; import { getStringWidth } from './helpers'; import { DOT_OVERLAY_SIZE_INCR, PERCENTAGE_BAR_DEFAULT_DEPTH } from './constants'; import { lightenDarkenColor } from './colors'; export const AXIS_TICK_LENGTH = 6; const LABEL_MARGIN = 4; +const LABEL_MAX_CHARS = 15; export const FONT_SIZE = 10; const BASE_LINE_COLOR = '#dadada'; const FONT_FILL = '#555b51'; @@ -182,7 +183,9 @@ export function heatSquare(className, x, y, size, fill='none', data={}) { return createSVG("rect", args); } -export function legendBar(x, y, size, fill='none', label) { +export function legendBar(x, y, size, fill='none', label, truncate=false) { + label = truncate ? truncateString(label, LABEL_MAX_CHARS) : label; + let args = { className: 'legend-bar', x: 0,