Browse Source

Fixed #1017: Allow overriding of the minWidth of bars while zooming out. Fix the variable month width bug. Update documentation to better describe the current behavior.

codeClimate
Ludo Stellingwerff 8 years ago
parent
commit
b6b3807c51
3 changed files with 11 additions and 16 deletions
  1. +7
    -2
      docs/graph2d/index.html
  2. +2
    -14
      lib/timeline/component/graph2d_types/bar.js
  3. +2
    -0
      lib/timeline/optionsGraph2d.js

+ 7
- 2
docs/graph2d/index.html View File

@ -434,7 +434,7 @@ var options = {
<td class="greenField indent">barChart.sideBySide</td>
<td>Boolean</td>
<td>false</td>
<td>If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side.
<td>If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side, within the same width as a single bar..
See <a href="../../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
When using groups, see <a href="../../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
</td>
@ -445,7 +445,12 @@ var options = {
<td>50</td>
<td>The width of the bars.</td>
</tr>
<tr parent="barChart" class="hidden">
<td class="greenField indent">barChart.minWidth</td>
<td>Number</td>
<td></td>
<td>The minimum width of the bars in pixels: by default the bars get smaller while zooming out to prevent overlap, this value is the minimum width of the bar. Default behavior (when minWidth is not set) is 10% of the bar width.</td>
</tr>
<tr class='toggle collapsible' onclick="toggleTable('g2dOptions','dataAxis', this);">
<td><span parent="dataAxis" class="right-caret"></span> dataAxis</td>
<td>Object</td>

+ 2
- 14
lib/timeline/component/graph2d_types/bar.js View File

@ -94,7 +94,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
// plot barchart
for (i = 0; i < combinedData.length; i++) {
group = framework.groups[combinedData[i].groupId];
var minWidth = 0.1 * group.options.barChart.width;
var minWidth = group.options.barChart.minWidth != undefined ? group.options.barChart.minWidth : 0.1 * group.options.barChart.width;
key = combinedData[i].screen_x;
var heightOffset = 0;
@ -102,9 +102,6 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
if (i + 1 < combinedData.length) {
coreDistance = Math.abs(combinedData[i + 1].screen_x - key);
}
if (i > 0) {
coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].screen_x - key));
}
drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
}
else {
@ -113,9 +110,6 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
if (nextKey < combinedData.length) {
coreDistance = Math.abs(combinedData[nextKey].screen_x - key);
}
if (prevKey > 0) {
coreDistance = Math.min(coreDistance, Math.abs(combinedData[prevKey].screen_x - key));
}
drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
intersections[key].resolved += 1;
@ -132,12 +126,6 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
else if (group.options.barChart.sideBySide === true) {
drawData.width = drawData.width / intersections[key].amount;
drawData.offset += (intersections[key].resolved) * drawData.width - (0.5 * drawData.width * (intersections[key].amount + 1));
if (group.options.barChart.align === 'left') {
drawData.offset -= 0.5 * drawData.width;
}
else if (group.options.barChart.align === 'right') {
drawData.offset += 0.5 * drawData.width;
}
}
}
DOMutil.drawBar(combinedData[i].screen_x + drawData.offset, combinedData[i].screen_y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].screen_y, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style);
@ -201,7 +189,7 @@ Bargraph._getDataIntersections = function (intersections, combinedData) {
Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) {
var width, offset;
if (coreDistance < group.options.barChart.width && coreDistance > 0) {
width = coreDistance < minWidth ? minWidth : coreDistance;
width = coreDistance < minWidth ? minWidth : coreDistance
offset = 0; // recalculate offset with the new width;
if (group.options.barChart.align === 'left') {

+ 2
- 0
lib/timeline/optionsGraph2d.js View File

@ -40,6 +40,7 @@ let allOptions = {
style: {string:['line','bar','points']}, // line, bar
barChart: {
width: {number},
minWidth: {number},
sideBySide: {boolean},
align: {string:['left','center','right']},
__type__: {object}
@ -179,6 +180,7 @@ let configureOptions = {
style: ['line','bar','points'], // line, bar
barChart: {
width: [50,5,100,5],
minWidth: [50,5,100,5],
sideBySide: false,
align: ['left','center','right'] // left, center, right
},

Loading…
Cancel
Save