diff --git a/gulpfile.js b/gulpfile.js index d5b7c25..8a0ca3a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,15 +1,60 @@ var gulp = require('gulp') + , pkg = require('./package.json') , gutil = require('gulp-util') , gkarma = require('gulp-karma') + , sass = require('gulp-sass') + , concat = require('gulp-concat') + , uglify = require('gulp-uglify') + , clean = require('gulp-clean') + , header = require('gulp-header') , files; + +banner = [ + '/**', + ' * <%= pkg.name %> + ' * @version v<%= pkg.version %>', + ' */', + '' +].join('\n'); + files = { LIB: 'bower_components/d3/*.min.js', NS: 'src/namespaces.js', SOURCE: 'src/**/*.js', - SPEC: 'test/**/*-spec.js' + SPEC: 'test/**/*-spec.js', + STYLESHEETS: 'src/stylesheets/**/*.scss' }; +gulp.task('sass', function () { + gulp.src(files.STYLESHEETS) + .pipe(sass()) + .pipe(gulp.dest('./dist/')); +}); + +gulp.task('concat', function () { + gulp.src([files.NS, files.SOURCE]) + .pipe(concat('tech-radar.js')) + .pipe(header(banner, { pkg: pkg })) + .pipe(gulp.dest('./dist/')); +}); +var clean = require('gulp-clean'); + +gulp.task('clean', function() { + gulp.src('./dist/', {read: false}) + .pipe(clean({force: true})); +}); + +gulp.task('compress', function() { + gulp.src([files.NS, files.SOURCE]) + .pipe(concat('tech-radar.min.js')) + .pipe(uglify({outSourceMap: true})) + .pipe(header(banner, { pkg: pkg })) + .pipe(gulp.dest('./dist/')) +}); + +gulp.task('dist', ['clean', 'concat', 'compress', 'sass']); + gulp.task('test', function (){ var karma; diff --git a/package.json b/package.json index 5678e6b..f40f180 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,12 @@ "karma-requirejs": "~0.2.1", "karma-phantomjs-launcher": "~0.1.2", "karma": "~0.10.9", - "gulp-karma": "0.0.2" + "gulp-karma": "0.0.2", + "gulp-sass": "~0.7.1", + "gulp-concat": "~2.2.0", + "gulp-uglify": "~0.2.1", + "gulp-clean": "~0.2.4", + "gulp-header": "~1.0.2" }, "dependencies": { "gulp-util": "~2.2.14", diff --git a/src/graphing/radar.js b/src/graphing/radar.js index 1b6081c..4265b2a 100644 --- a/src/graphing/radar.js +++ b/src/graphing/radar.js @@ -94,7 +94,7 @@ tr.graphing.Radar = function (size, radar) { .attr('r', 10); } - function plotBlips(cycles, quadrant, adjustX, adjustY) { + function plotBlips(cycles, quadrant, adjustX, adjustY, cssClass) { var blips; blips = quadrant.blips(); cycles.forEach(function (cycle, i) { @@ -121,9 +121,9 @@ tr.graphing.Radar = function (size, radar) { var y = center() + radius * Math.sin(angleInRad) * adjustY; if (blip.isNew()) { - triangle(x, y, cssClassFor(quadrant.name())); + triangle(x, y, cssClass); } else { - circle(x, y, cssClassFor(quadrant.name())); + circle(x, y, cssClass); } svg.append('text') @@ -136,24 +136,20 @@ tr.graphing.Radar = function (size, radar) { }); }; - function cssClassFor(string) { - return string.toLowerCase().replace(/\s\&/g, '').replace(/\s/g, '-'); - } - function plotQuadrantNames(quadrants) { - function plotName(name, anchor, x, y) { + function plotName(name, anchor, x, y, cssClass) { svg.append('text') .attr('x', x) .attr('y', y) - .attr('class', cssClassFor(name)) + .attr('class', cssClass) .attr('text-anchor', anchor) .text(name); } - plotName(quadrants.I.name(), 'end', size - 10, 10) - plotName(quadrants.II.name(), 'start', 10, 10) - plotName(quadrants.III.name(), 'start', 10, size - 10) - plotName(quadrants.IV.name(), 'end', size -10, size - 10) + plotName(quadrants.I.name(), 'end', size - 10, 10, 'first') + plotName(quadrants.II.name(), 'start', 10, 10, 'second') + plotName(quadrants.III.name(), 'start', 10, size - 10, 'third') + plotName(quadrants.IV.name(), 'end', size -10, size - 10, 'fourth') } self.init = function (selector) { @@ -175,10 +171,10 @@ tr.graphing.Radar = function (size, radar) { if (radar.hasQuadrants()) { plotQuadrantNames(quadrants); - plotBlips(cycles, quadrants.I, 1, -1); - plotBlips(cycles, quadrants.II, -1, -1); - plotBlips(cycles, quadrants.III, -1, 1); - plotBlips(cycles, quadrants.IV, 1, 1); + plotBlips(cycles, quadrants.I, 1, -1, 'first'); + plotBlips(cycles, quadrants.II, -1, -1, 'second'); + plotBlips(cycles, quadrants.III, -1, 1, 'third'); + plotBlips(cycles, quadrants.IV, 1, 1, 'fourth'); } }; diff --git a/src/stylesheets/base.scss b/src/stylesheets/base.scss index 4a59d22..b68ca02 100644 --- a/src/stylesheets/base.scss +++ b/src/stylesheets/base.scss @@ -1,7 +1,7 @@ @import 'colors'; body { - font: 9px 'Open Sans'; + font: 11px 'Open Sans'; } svg { @@ -28,13 +28,18 @@ svg { } text { - .blip-text { + &.first, &.second, &.third, &.fourth { + font-size: 16px; + font-weight: bold; + } + + &.blip-text { + font-size: 9px; font-style: italic; fill: $white; } - .line-text { - font-size: 16px; + &.line-text { font-weight: bold; text-transform: uppercase; fill: $black;