diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..9b7de80 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,10 @@ +language: node_js +node_js: + - '0.11' +env: + global: + - secure: CvvR0KZBaTnVfo3ylWPc/qssKzkay5rejVoHWjR7DrIHaesj3O17puOAr+jYJJ220Q4mn2RwpdTIyYAjjSxblq5g+F/MJMwslRh7mEYfdn39LnF30JYp6BkMrcygsJS8xAQ18i17lVMqqeMyJ/+Hu7GvWu1r6ZaWkr2HZ/P26v4= + - secure: gT/SPMZhtp3dNjS9VIKez/+sKzihE/5ffNtKczhTi71CQkvptgd9xdcLigidIgwaWptd3t8HwNFaUutx78xTIb40oP0mZNo95LiwoI6W7vzLyJjst2BVKz+hqj4Jg1P8FHkD5/fop4E/pL4lXmMB1p1Zd5QEebX6hcXgFz/ha7U= + matrix: + - JQUERY_VERSION=1.11.3 HIGHCHARTS_VERSION=2.2.4 + - JQUERY_VERSION=2.1.4 HIGHCHARTS_VERSION=2.2.4 diff --git a/README.md b/README.md index ecd2023..2173dd8 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,5 @@ Welcome to jQuery HighchartTable plugin :) This plugin provides you a simple way to convert HTML data tables to Highcharts graphs. You will find more information here : http://highcharttable.org/ + +[![Sauce Test Status](https://saucelabs.com/browser-matrix/hIghcharttable.svg)](https://saucelabs.com/u/hIghcharttable) diff --git a/bower.json b/bower.json index cd63568..96670dd 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "highchartTable", - "version": "1.0.4", + "version": "1.1.0", "homepage": "https://github.com/highchartTable/jquery-highchartTable-plugin", "description": "This jQuery plugin provides a simple way to convert HTML data tables to Highcharts graphs.", "main": "jquery.highchartTable.js", diff --git a/highchartTable.jquery.json b/highchartTable.jquery.json index fefcc05..0990ecf 100644 --- a/highchartTable.jquery.json +++ b/highchartTable.jquery.json @@ -1,6 +1,6 @@ { "name": "highchartTable", - "version": "1.0.4", + "version": "1.1.0", "title": "highchartTable", "licenses": [ { diff --git a/jquery.highchartTable.js b/jquery.highchartTable.js index 40a0e81..8f0e7c2 100644 --- a/jquery.highchartTable.js +++ b/jquery.highchartTable.js @@ -222,7 +222,16 @@ } } else { var cleanedCellValue = rawCellValue.replace(/\s/g, '').replace(/,/, '.'); - cellValue = Math.round(parseFloat(cleanedCellValue) * column.scale * 100) / 100; + var eventOptions = { + value: cleanedCellValue, + rawValue: rawCellValue, + td: $td, + tr: $(row), + indexTd: indexTd, + indexTr: indexRow + } + $table.trigger('highchartTable.cleanValue', eventOptions); + cellValue = Math.round(parseFloat(eventOptions.value) * column.scale * 100) / 100; var dataGraphX = $td.data('graph-x'); @@ -265,30 +274,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); @@ -315,7 +338,8 @@ var lineShadow = $table.data('graph-line-shadow'); var lineWidth = $table.data('graph-line-width') || 2; - for(var i=0; i<9; i++) { + var nbOfColors = Math.max(defaultColors.length, themeColors.length); + for(var i=0; i < nbOfColors; i++) { var dataname = 'graph-color-' + (i+1); colors.push(typeof $table.data(dataname) != 'undefined' ? $table.data(dataname) : typeof themeColors[i] != 'undefined' ? themeColors[i] : defaultColors[i]); } @@ -380,8 +404,8 @@ }, labels: { - rotation: $table.data('graph-xaxis-rotation') || 0, - align: $table.data('graph-xaxis-align') || 'center', + rotation: $table.data('graph-xaxis-rotation') || undefined, + align: $table.data('graph-xaxis-align') || undefined, enabled: typeof xAxisLabelsEnabled != 'undefined' ? xAxisLabelsEnabled : true, style: xAxisLabelStyle }, diff --git a/karma.conf-ci.js b/karma.conf-ci.js new file mode 100644 index 0000000..64f93b3 --- /dev/null +++ b/karma.conf-ci.js @@ -0,0 +1,100 @@ +// Karma configuration +// Generated on Wed Nov 11 2015 19:12:34 GMT+0100 (CET) + +module.exports = function(config) { + + var jqueryVersion = process.env.JQUERY_VERSION; + var highchartsVersion = process.env.HIGHCHARTS_VERSION; + + // Browsers to run on Sauce Labs + var customLaunchers = { + 'SL_Chrome': { + base: 'SauceLabs', + browserName: 'chrome' + }, + 'SL_InternetExplorer': { + base: 'SauceLabs', + browserName: 'internet explorer', + version: '10' + }, + 'SL_FireFox': { + base: 'SauceLabs', + browserName: 'firefox', + version: '37' + } + }; + + config.set({ + + // base path that will be used to resolve all patterns (eg. files, exclude) + basePath: '', + + + // frameworks to use + // available frameworks: https://npmjs.org/browse/keyword/karma-adapter + frameworks: ['jasmine'], + + + // list of files / patterns to load in the browser + files: [ + 'http://code.jquery.com/jquery-' + jqueryVersion + '.min.js', + 'http://code.highcharts.com/' + highchartsVersion + '/highcharts.js', + 'jquery.highchartTable.js', + 'tests/*Spec.js' + ], + + + // list of files to exclude + exclude: [ + ], + + + // preprocess matching files before serving them to the browser + // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor + preprocessors: { + }, + + + // test results reporter to use + // possible values: 'dots', 'progress' + // available reporters: https://npmjs.org/browse/keyword/karma-reporter + reporters: ['progress', 'saucelabs'], + + + // web server port + port: 9876, + + + // enable / disable colors in the output (reporters and logs) + colors: true, + + + // level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_INFO, + + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: true, + + sauceLabs: { + testName: 'HighchartTable tests / jquery ' + jqueryVersion + ' / highcharts ' + highchartsVersion + }, + + captureTimeout: 120000, + customLaunchers: customLaunchers, + + // start these browsers + // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher + browsers: Object.keys(customLaunchers), + + + // Continuous Integration mode + // if true, Karma captures browsers, runs the tests and exits + singleRun: true, + + // Concurrency level + // how many browser should be started simultanous + concurrency: Infinity + }) +} diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..fb0d04d --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,72 @@ +// Karma configuration +// Generated on Wed Nov 11 2015 19:12:34 GMT+0100 (CET) + +module.exports = function(config) { + config.set({ + + // base path that will be used to resolve all patterns (eg. files, exclude) + basePath: '', + + + // frameworks to use + // available frameworks: https://npmjs.org/browse/keyword/karma-adapter + frameworks: ['jasmine'], + + + // list of files / patterns to load in the browser + files: [ + 'http://code.jquery.com/jquery-1.11.3.min.js', + 'http://code.highcharts.com/2.2.4/highcharts.js', + 'jquery.highchartTable.js', + 'tests/*Spec.js' + ], + + + // list of files to exclude + exclude: [ + ], + + + // preprocess matching files before serving them to the browser + // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor + preprocessors: { + }, + + + // test results reporter to use + // possible values: 'dots', 'progress' + // available reporters: https://npmjs.org/browse/keyword/karma-reporter + reporters: ['progress'], + + + // web server port + port: 9876, + + + // enable / disable colors in the output (reporters and logs) + colors: true, + + + // level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_INFO, + + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: false, + + + // start these browsers + // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher + browsers: ['Chrome'], + + + // Continuous Integration mode + // if true, Karma captures browsers, runs the tests and exits + singleRun: true, + + // Concurrency level + // how many browser should be started simultanous + concurrency: Infinity + }) +} diff --git a/package.json b/package.json index 8dd254e..f606897 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,31 @@ { "name": "highchartTable", - "version": "1.0.4", + "version": "1.1.0", + "description": "This jQuery plugin provides a simple way to convert HTML data tables to Highcharts graphs.", + "author": "highchartTable Development Team (https://github.com/highchartTable/jquery-highchartTable-plugin/graphs/contributors)", + "repository": { + "type": "git", + "url": "git@github.com:highchartTable/jquery-highchartTable-plugin.git" + }, + "keywords": [ + "highcharts", + "chart", + "table", + "ui", + "graphics", + "graphs" + ], + "homepage": "http://highcharttable.org", + "license": "MIT", + "scripts": { + "test": "./node_modules/karma/bin/karma start karma.conf-ci.js" + }, "devDependencies": { - "grunt-bump": "0.0.13" + "grunt-bump": "0.0.13", + "jasmine-core": "^2.3.4", + "karma": "^0.13.15", + "karma-chrome-launcher": "^0.2.1", + "karma-jasmine": "^0.3.6", + "karma-sauce-launcher": "^0.3.0" } } diff --git a/tests/baseSpec.js b/tests/baseSpec.js new file mode 100644 index 0000000..235be60 --- /dev/null +++ b/tests/baseSpec.js @@ -0,0 +1,76 @@ + +describe("Base test", function() { + + var fixture; + + + beforeEach(function() { + var htmlContent = ' ' + + '' + + '' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' '; + + $('body') + .empty() + .append(htmlContent) + ; + }); + + + it("Simple table", function() { + + var beforeRenderCalled = false; + + $('table') + .bind('highchartTable.beforeRender', function(event, highChartConfig) { + beforeRenderCalled = true; + expect(highChartConfig.title.text).toBe("Example of title"); + expect(highChartConfig.series[0].type).toBe("column"); + expect(highChartConfig.series[0].data[0].name).toBe('8000'); + expect(highChartConfig.series[0].data[0].y).toBe(8000); + 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.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() + ; + + expect(beforeRenderCalled).toBe(true); + }); +}); + + diff --git a/tests/yaxisAttributesSpec.js b/tests/yaxisAttributesSpec.js new file mode 100644 index 0000000..98e3035 --- /dev/null +++ b/tests/yaxisAttributesSpec.js @@ -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 = ' ' + + '' + + '' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + '
Example of title
MonthSales
January8000
February12000
March18000
'; + + $('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 = ' ' + + '' + + '' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + '
Example of title
MonthSales
January8000
February12000
March18000
'; + + $('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); + }); +}); + +