Skip to content

Commit

Permalink
fix yaxis attributes on jquery2
Browse files Browse the repository at this point in the history 
`data-graph-yaxis-X-*` attributes doesn't work
on jQuery 2 (but `data-graph-yaxisX-*` work).
`data-graph-yaxis-X-*` works on the master branch
of jQuery.

In order to have a version that work on all
jQury versions we have to support the `data-graph-yaxisX-*`
version that will be the new norm.

To avoid a Backward compatibility break, we need to
support both versions of the attribute.

* Now all `data-graph-yaxis` attributes could be written
with or without a dash before the axis number.
* There is tests on all the attributes, in both versions
* tests are executed on both jQuery 2 and jQuery 1

see issue highchartTable#60
  • Loading branch information
@agallou
agallou committed Nov 15, 2015
1 parent 8f92897 commit e640b5e
Show file tree
Hide file tree
Showing 4 changed files with 200 additions and 15 deletions.
2 changes: 1 addition & 1 deletion .travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ node_js:
- '0.11'
env:
- JQUERY_VERSION=1.11.3 HIGHCHARTS_VERSION=2.2.4
- JQUERY_VERSION=1.11.1 HIGHCHARTS_VERSION=2.2.4
- JQUERY_VERSION=2.1.4 HIGHCHARTS_VERSION=2.2.4
36 changes: 25 additions & 11 deletions jquery.highchartTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,30 +265,44 @@

});

var getYaxisAttr = function($table, yAxisNum, name) {
var oldConvention = $table.data('graph-yaxis-' + yAxisNum + '-' + name);
if (typeof oldConvention != 'undefined') {
return oldConvention;
}

return $table.data('graph-yaxis' + yAxisNum + '-' + name);
};

var yAxisConfig = [];
var yAxisNum;
for (yAxisNum=1 ; yAxisNum <= nbYaxis ; yAxisNum++) {
var yAxisConfigCurrentAxis = {
title: {
text: typeof $table.data('graph-yaxis-'+yAxisNum+'-title-text') != 'undefined' ? $table.data('graph-yaxis-'+yAxisNum+'-title-text') : null
text: typeof getYaxisAttr($table, yAxisNum, 'title-text') != 'undefined' ? getYaxisAttr($table, yAxisNum, 'title-text') : null
},
max: typeof $table.data('graph-yaxis-'+yAxisNum+'-max') != 'undefined' ? $table.data('graph-yaxis-'+yAxisNum+'-max') : null,
min: typeof $table.data('graph-yaxis-'+yAxisNum+'-min') != 'undefined' ? $table.data('graph-yaxis-'+yAxisNum+'-min') : null,
reversed: $table.data('graph-yaxis-'+yAxisNum+'-reversed') == '1',
opposite: $table.data('graph-yaxis-'+yAxisNum+'-opposite') == '1',
tickInterval: $table.data('graph-yaxis-'+yAxisNum+'-tick-interval') || null,
max: typeof getYaxisAttr($table, yAxisNum, 'max') != 'undefined' ? getYaxisAttr($table, yAxisNum, 'max') : null,
min: typeof getYaxisAttr($table, yAxisNum, 'min') != 'undefined' ? getYaxisAttr($table, yAxisNum, 'min') : null,
reversed: getYaxisAttr($table, yAxisNum, 'reversed') == '1',
opposite: getYaxisAttr($table, yAxisNum, 'opposite') == '1',
tickInterval: getYaxisAttr($table, yAxisNum, 'tick-interval') || null,
labels: {
rotation: $table.data('graph-yaxis-'+yAxisNum+'-rotation') || 0
rotation: getYaxisAttr($table, yAxisNum, 'rotation') || 0
},
startOnTick: $table.data('graph-yaxis-'+yAxisNum+'-start-on-tick') !== "0",
endOnTick: $table.data('graph-yaxis-'+yAxisNum+'-end-on-tick') !== "0",
startOnTick: getYaxisAttr($table, yAxisNum, 'start-on-tick') != "0",
endOnTick: getYaxisAttr($table, yAxisNum, 'end-on-tick') != "0",
stackLabels : {
enabled: $table.data('graph-yaxis-'+yAxisNum+'-stacklabels-enabled') == '1'
enabled: getYaxisAttr($table, yAxisNum, 'stacklabels-enabled') == '1'
},
gridLineInterpolation: $table.data('graph-yaxis-'+yAxisNum+'-grid-line-interpolation') || null
gridLineInterpolation: getYaxisAttr($table, yAxisNum, 'grid-line-interpolation') || null
};

var callableYAxisFormatter = getCallable(table, 'graph-yaxis-'+yAxisNum+'-formatter-callback');

if (!callableYAxisFormatter) {
callableYAxisFormatter = getCallable(table, 'graph-yaxis'+yAxisNum+'-formatter-callback');
}

if (callableYAxisFormatter) {
yAxisConfigCurrentAxis.labels.formatter = function () {
return callableYAxisFormatter(this.value);
Expand Down
22 changes: 19 additions & 3 deletions tests/baseSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,10 @@ describe("Base test", function() {
' </tbody>' +
' </table>';

$('#fixture').remove();
$('body').append(htmlContent);
$('body')
.empty()
.append(htmlContent)
;
});


Expand All @@ -48,7 +50,21 @@ describe("Base test", function() {
expect(highChartConfig.series[0].data[1].name).toBe('12000');
expect(highChartConfig.series[0].data[1].y).toBe(12000);
expect(highChartConfig.series[0].data[2].name).toBe('18000');
expect(highChartConfig.series[0].data[2].y).toBe(18000);
expect(highChartConfig.series[0].data[2].y).toBe(18000)
expect(highChartConfig.yAxis[0].reversed).toBe(false);

expect(highChartConfig.yAxis[0].reversed).toBe(false);
expect(highChartConfig.yAxis[0].stackLabels.enabled).toBe(false);
expect(highChartConfig.yAxis[0].min).toBeNull();
expect(highChartConfig.yAxis[0].max).toBeNull();
expect(highChartConfig.yAxis[0].title.text).toBeNull();
expect(highChartConfig.yAxis[0].opposite).toBe(false);
expect(highChartConfig.yAxis[0].tickInterval).toBe(null);
expect(highChartConfig.yAxis[0].labels.rotation).toBe(0);
expect(highChartConfig.yAxis[0].gridLineInterpolation).toBeNull();
expect(highChartConfig.yAxis[0].startOnTick).toBe(true);
expect(highChartConfig.yAxis[0].endOnTick).toBe(true);
expect(highChartConfig.yAxis[0].labels.formatter).toBeUndefined();
})
.highchartTable()
;
Expand Down
155 changes: 155 additions & 0 deletions tests/yaxisAttributesSpec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@

describe("Test yaxis ttributes", function() {

var fixture;

it("With numeric", function() {

if ($.fn.jquery.substr(0, 1) == 2) {
return;
}

graph_absInvertedFormatter = function (value) {
return Math.abs(value) * -1;
};

var htmlContent = ' <table class="highchart" data-graph-container-before="1" data-graph-type="column" style="display:block"' +
' data-graph-yaxis-1-reversed="1" data-graph-yaxis-1-stacklabels-enabled="1" ' +
' data-graph-yaxis-1-min="1000" data-graph-yaxis-1-max="25000" ' +
' data-graph-yaxis-1-title-text="title example" ' +
' data-graph-yaxis-1-opposite="1" ' +
' data-graph-yaxis-1-tick-interval="1000" ' +
' data-graph-yaxis-1-rotation="90" ' +
' data-graph-yaxis-1-grid-line-interpolation="circle" ' +
' data-graph-yaxis-1-start-on-tick="0" ' +
' data-graph-yaxis-1-end-on-tick="0" ' +
' data-graph-yaxis-1-formatter-callback="graph_absInvertedFormatter" ' +
'>' +
'<caption>Example of title</caption>' +
'<thead>' +
' <tr>' +
' <th>Month</th>' +
' <th>Sales</th>' +
' </tr>' +
' </thead>' +
' <tbody>' +
' <tr>' +
' <td>January</td>' +
' <td>8000</td>' +
' </tr>' +
' <tr>' +
' <td>February</td>' +
' <td>12000</td>' +
' </tr>' +
' <tr>' +
' <td>March</td>' +
' <td>18000</td>' +
' </tr>' +
' </tbody>' +
' </table>';

$('body')
.empty()
.append(htmlContent)
;

var beforeRenderCalled = false;

$('table')
.bind('highchartTable.beforeRender', function(event, highChartConfig) {
beforeRenderCalled = true;
expect(highChartConfig.yAxis[0].reversed).toBe(true);
expect(highChartConfig.yAxis[0].stackLabels.enabled).toBe(true);
expect(highChartConfig.yAxis[0].min).toBe(1000);
expect(highChartConfig.yAxis[0].max).toBe(25000);
expect(highChartConfig.yAxis[0].title.text).toBe("title example");
expect(highChartConfig.yAxis[0].opposite).toBe(true);
expect(highChartConfig.yAxis[0].tickInterval).toBe(1000);
expect(highChartConfig.yAxis[0].labels.rotation).toBe(90);
expect(highChartConfig.yAxis[0].gridLineInterpolation).toBe("circle");
expect(highChartConfig.yAxis[0].startOnTick).toBe(false);
expect(highChartConfig.yAxis[0].endOnTick).toBe(false);
expect(highChartConfig.yAxis[0].labels.formatter).toBeDefined();

})
.highchartTable()
;

expect(beforeRenderCalled).toBe(true);
});


it("Without numeric", function() {

graph_absInvertedFormatter = function (value) {
return Math.abs(value) * -1;
};

var htmlContent = ' <table class="highchart" data-graph-container-before="1" data-graph-type="column" style="display:block"' +
' data-graph-yaxis1-reversed="1" data-graph-yaxis1-stacklabels-enabled="1" ' +
' data-graph-yaxis1-min="1000" data-graph-yaxis1-max="25000" ' +
' data-graph-yaxis1-title-text="title example" ' +
' data-graph-yaxis1-opposite="1" ' +
' data-graph-yaxis1-tick-interval="1000" ' +
' data-graph-yaxis1-rotation="90" ' +
' data-graph-yaxis1-grid-line-interpolation="circle" ' +
' data-graph-yaxis1-start-on-tick="0" ' +
' data-graph-yaxis1-end-on-tick="0" ' +
' data-graph-yaxis1-formatter-callback="graph_absInvertedFormatter" ' +
'>' +
'<caption>Example of title</caption>' +
'<thead>' +
' <tr>' +
' <th>Month</th>' +
' <th>Sales</th>' +
' </tr>' +
' </thead>' +
' <tbody>' +
' <tr>' +
' <td>January</td>' +
' <td>8000</td>' +
' </tr>' +
' <tr>' +
' <td>February</td>' +
' <td>12000</td>' +
' </tr>' +
' <tr>' +
' <td>March</td>' +
' <td>18000</td>' +
' </tr>' +
' </tbody>' +
' </table>';

$('body')
.empty()
.append(htmlContent)
;



var beforeRenderCalled = false;

$('table')
.bind('highchartTable.beforeRender', function(event, highChartConfig) {
beforeRenderCalled = true;
expect(highChartConfig.yAxis[0].reversed).toBe(true);
expect(highChartConfig.yAxis[0].stackLabels.enabled).toBe(true);
expect(highChartConfig.yAxis[0].min).toBe(1000);
expect(highChartConfig.yAxis[0].max).toBe(25000);
expect(highChartConfig.yAxis[0].title.text).toBe("title example");
expect(highChartConfig.yAxis[0].opposite).toBe(true);
expect(highChartConfig.yAxis[0].tickInterval).toBe(1000);
expect(highChartConfig.yAxis[0].labels.rotation).toBe(90);
expect(highChartConfig.yAxis[0].gridLineInterpolation).toBe("circle");
expect(highChartConfig.yAxis[0].startOnTick).toBe(false);
expect(highChartConfig.yAxis[0].endOnTick).toBe(false);
expect(highChartConfig.yAxis[0].labels.formatter).toBeDefined();
})
.highchartTable()
;

expect(beforeRenderCalled).toBe(true);
});
});


0 comments on commit e640b5e

Please sign in to comment.