New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Setup linter for HTML #5195
Setup linter for HTML #5195
Changes from 29 commits
3ff10ac
13cd5b0
fddb06f
6f821d7
83822eb
fd5232a
7cfcf5a
1b591b1
9f130a2
c640e69
098c133
71792f1
70822cf
f8f119a
8183537
0171194
f588414
599fd09
c3c0bea
066b3ae
31d6571
0940fdd
8378328
adbfb4d
27fa1a7
6f96837
9d2d092
8ac4864
ccd9cab
1fc07d2
8e4c315
4675e85
9b59b55
9bb89f4
3746bad
261085f
1474880
57fc01c
4a2ff8c
03321b0
58db09d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,3 +3,5 @@ extends: chartjs | |
env: | ||
browser: true | ||
node: true | ||
|
||
plugins: ['html'] |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
{ | ||
"indent-style": "tabs", | ||
"attr-quote-style": "double", | ||
"spec-char-escape": false, | ||
"attr-bans": [ | ||
"align", | ||
"background", | ||
"bgcolor", | ||
"border", | ||
"frameborder", | ||
"longdesc", | ||
"marginwidth", | ||
"marginheight", | ||
"scrolling" | ||
], | ||
"tag-bans": [ "b", "i" ], | ||
"id-class-style": false | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,7 +3,6 @@ var concat = require('gulp-concat'); | |
var connect = require('gulp-connect'); | ||
var eslint = require('gulp-eslint'); | ||
var file = require('gulp-file'); | ||
var htmlv = require('gulp-html-validator'); | ||
var insert = require('gulp-insert'); | ||
var replace = require('gulp-replace'); | ||
var size = require('gulp-size'); | ||
|
@@ -20,6 +19,7 @@ var collapse = require('bundle-collapser/plugin'); | |
var yargs = require('yargs'); | ||
var path = require('path'); | ||
var fs = require('fs'); | ||
var htmllint = require('gulp-htmllint'); | ||
var package = require('./package.json'); | ||
|
||
var argv = yargs | ||
|
@@ -49,9 +49,11 @@ gulp.task('bower', bowerTask); | |
gulp.task('build', buildTask); | ||
gulp.task('package', packageTask); | ||
gulp.task('watch', watchTask); | ||
gulp.task('lint', lintTask); | ||
gulp.task('lint', ['lint-html', 'lint-js']); | ||
gulp.task('lint-html', lintHtmlTask); | ||
gulp.task('lint-js', lintJsTask); | ||
gulp.task('docs', docsTask); | ||
gulp.task('test', ['lint', 'validHTML', 'unittest']); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should also remove the |
||
gulp.task('test', ['lint', 'unittest']); | ||
gulp.task('size', ['library-size', 'module-sizes']); | ||
gulp.task('server', serverTask); | ||
gulp.task('validHTML', validHTMLTask); | ||
|
@@ -153,11 +155,12 @@ function packageTask() { | |
.pipe(gulp.dest(outDir)); | ||
} | ||
|
||
function lintTask() { | ||
function lintJsTask() { | ||
var files = [ | ||
'samples/**/*.html', | ||
'samples/**/*.js', | ||
'src/**/*.js', | ||
'test/**/*.js' | ||
'test/**/*.js', | ||
]; | ||
|
||
// NOTE(SB) codeclimate has 'complexity' and 'max-statements' eslint rules way too strict | ||
|
@@ -166,8 +169,8 @@ function lintTask() { | |
var options = { | ||
rules: { | ||
'complexity': [1, 10], | ||
'max-statements': [1, 30] | ||
} | ||
'max-statements': [1, 30], | ||
}, | ||
}; | ||
|
||
return gulp.src(files) | ||
|
@@ -176,6 +179,13 @@ function lintTask() { | |
.pipe(eslint.failAfterError()); | ||
} | ||
|
||
function lintHtmlTask() { | ||
return gulp.src('samples/**/*.html') | ||
.pipe(htmllint({ | ||
failOnError: true, | ||
})); | ||
} | ||
|
||
function docsTask(done) { | ||
const script = require.resolve('gitbook-cli/bin/gitbook.js'); | ||
const cmd = process.execPath; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,13 +17,14 @@ | |
"coveralls": "^3.0.0", | ||
"eslint": "^4.9.0", | ||
"eslint-config-chartjs": "^0.1.0", | ||
"eslint-plugin-html": "^4.0.2", | ||
"gitbook-cli": "^2.3.2", | ||
"gulp": "3.9.x", | ||
"gulp-concat": "~2.6.x", | ||
"gulp-connect": "~5.0.0", | ||
"gulp-eslint": "^4.0.0", | ||
"gulp-file": "^0.3.0", | ||
"gulp-html-validator": "^0.0.5", | ||
"gulp-htmllint": "0.0.15", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
"gulp-insert": "~0.5.0", | ||
"gulp-replace": "^0.6.1", | ||
"gulp-size": "~2.1.0", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
globals: | ||
$: true | ||
Chart: true | ||
Samples: true | ||
moment: true | ||
randomScalingFactor: true | ||
|
||
rules: | ||
no-new: 0 |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,130 +3,130 @@ | |
<html> | ||
|
||
<head> | ||
<title>Labelling Data Points</title> | ||
<script src="../../dist/Chart.bundle.js"></script> | ||
<script src="../utils.js"></script> | ||
<style> | ||
canvas { | ||
-moz-user-select: none; | ||
-webkit-user-select: none; | ||
-ms-user-select: none; | ||
} | ||
</style> | ||
<title>Labelling Data Points</title> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
<script src="../../dist/Chart.bundle.js"></script> | ||
<script src="../utils.js"></script> | ||
<style> | ||
canvas { | ||
-moz-user-select: none; | ||
-webkit-user-select: none; | ||
-ms-user-select: none; | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<div style="width: 75%"> | ||
<canvas id="canvas"></canvas> | ||
</div> | ||
<button id="randomizeData">Randomize Data</button> | ||
<script> | ||
var color = Chart.helpers.color; | ||
var barChartData = { | ||
labels: ["January", "February", "March", "April", "May", "June", "July"], | ||
datasets: [{ | ||
type: 'bar', | ||
label: 'Dataset 1', | ||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(), | ||
borderColor: window.chartColors.red, | ||
data: [ | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor() | ||
] | ||
}, { | ||
type: 'line', | ||
label: 'Dataset 2', | ||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(), | ||
borderColor: window.chartColors.blue, | ||
data: [ | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor() | ||
] | ||
}, { | ||
type: 'bar', | ||
label: 'Dataset 3', | ||
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(), | ||
borderColor: window.chartColors.green, | ||
data: [ | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor() | ||
] | ||
}] | ||
}; | ||
<div style="width: 75%"> | ||
<canvas id="canvas"></canvas> | ||
</div> | ||
<button id="randomizeData">Randomize Data</button> | ||
<script> | ||
var color = Chart.helpers.color; | ||
var barChartData = { | ||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], | ||
datasets: [{ | ||
type: 'bar', | ||
label: 'Dataset 1', | ||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(), | ||
borderColor: window.chartColors.red, | ||
data: [ | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor() | ||
] | ||
}, { | ||
type: 'line', | ||
label: 'Dataset 2', | ||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(), | ||
borderColor: window.chartColors.blue, | ||
data: [ | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor() | ||
] | ||
}, { | ||
type: 'bar', | ||
label: 'Dataset 3', | ||
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(), | ||
borderColor: window.chartColors.green, | ||
data: [ | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor(), | ||
randomScalingFactor() | ||
] | ||
}] | ||
}; | ||
|
||
// Define a plugin to provide data labels | ||
Chart.plugins.register({ | ||
afterDatasetsDraw: function(chart, easing) { | ||
// To only draw at the end of animation, check for easing === 1 | ||
var ctx = chart.ctx; | ||
// Define a plugin to provide data labels | ||
Chart.plugins.register({ | ||
afterDatasetsDraw: function(chart/* , easing */) { // TODO : remove easing ? | ||
// To only draw at the end of animation, check for easing === 1 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. comment and code would be out of sync There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would remove both the variable and the comment |
||
var ctx = chart.ctx; | ||
|
||
chart.data.datasets.forEach(function (dataset, i) { | ||
var meta = chart.getDatasetMeta(i); | ||
if (!meta.hidden) { | ||
meta.data.forEach(function(element, index) { | ||
// Draw the text in black, with the specified font | ||
ctx.fillStyle = 'rgb(0, 0, 0)'; | ||
chart.data.datasets.forEach(function(dataset, i) { | ||
var meta = chart.getDatasetMeta(i); | ||
if (!meta.hidden) { | ||
meta.data.forEach(function(element, index) { | ||
// Draw the text in black, with the specified font | ||
ctx.fillStyle = 'rgb(0, 0, 0)'; | ||
|
||
var fontSize = 16; | ||
var fontStyle = 'normal'; | ||
var fontFamily = 'Helvetica Neue'; | ||
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); | ||
var fontSize = 16; | ||
var fontStyle = 'normal'; | ||
var fontFamily = 'Helvetica Neue'; | ||
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); | ||
|
||
// Just naively convert to string for now | ||
var dataString = dataset.data[index].toString(); | ||
// Just naively convert to string for now | ||
var dataString = dataset.data[index].toString(); | ||
|
||
// Make sure alignment settings are correct | ||
ctx.textAlign = 'center'; | ||
ctx.textBaseline = 'middle'; | ||
// Make sure alignment settings are correct | ||
ctx.textAlign = 'center'; | ||
ctx.textBaseline = 'middle'; | ||
|
||
var padding = 5; | ||
var position = element.tooltipPosition(); | ||
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding); | ||
}); | ||
} | ||
}); | ||
} | ||
}); | ||
var padding = 5; | ||
var position = element.tooltipPosition(); | ||
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding); | ||
}); | ||
} | ||
}); | ||
} | ||
}); | ||
|
||
window.onload = function() { | ||
var ctx = document.getElementById("canvas").getContext("2d"); | ||
window.myBar = new Chart(ctx, { | ||
type: 'bar', | ||
data: barChartData, | ||
options: { | ||
responsive: true, | ||
title: { | ||
display: true, | ||
text: 'Chart.js Combo Bar Line Chart' | ||
}, | ||
} | ||
}); | ||
}; | ||
window.onload = function() { | ||
var ctx = document.getElementById('canvas').getContext('2d'); | ||
window.myBar = new Chart(ctx, { | ||
type: 'bar', | ||
data: barChartData, | ||
options: { | ||
responsive: true, | ||
title: { | ||
display: true, | ||
text: 'Chart.js Combo Bar Line Chart' | ||
}, | ||
} | ||
}); | ||
}; | ||
|
||
document.getElementById('randomizeData').addEventListener('click', function() { | ||
barChartData.datasets.forEach(function(dataset) { | ||
dataset.data = dataset.data.map(function() { | ||
return randomScalingFactor(); | ||
}) | ||
}); | ||
window.myBar.update(); | ||
}); | ||
</script> | ||
document.getElementById('randomizeData').addEventListener('click', function() { | ||
barChartData.datasets.forEach(function(dataset) { | ||
dataset.data = dataset.data.map(function() { | ||
return randomScalingFactor(); | ||
}); | ||
}); | ||
window.myBar.update(); | ||
}); | ||
</script> | ||
</body> | ||
|
||
</html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This task should be ran as a dependency of the
lint
task, nottest