projects / tech-radar.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 39e4c82)
added tasks to minify and to generate css from scss files
authorBruno Trecenti <btrecent@thoughtworks.com>
Tue, 18 Mar 2014 22:02:15 +0000 (19:02 -0300)
committerBruno Trecenti <btrecent@thoughtworks.com>
Tue, 18 Mar 2014 22:02:15 +0000 (19:02 -0300)
.gitignore patch | blob | history
examples/default.html patch | blob | history
gulpfile.js patch | blob | history
package.json patch | blob | history
src/graphing/radar.js patch | blob | history
src/stylesheets/base.scss patch | blob | history

diff --git a/.gitignore b/.gitignore
index d425a4c..1f344fc 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 node_modules
 bower_components
+dist
 *.swa
 *.swp
 *.swo
diff --git a/examples/default.html b/examples/default.html
index 4bb27ec..4a278cb 100644 (file)
--- a/examples/default.html
+++ b/examples/default.html
@@ -6,15 +6,8 @@
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
   <script src="../bower_components/chance/chance.js"></script>
   <script src="../bower_components/d3/d3.min.js"></script>
-  <script src="../src/namespaces.js"></script>
-  <script src="../src/util/fib.js"></script>
-  <script src="../src/models/cycle.js"></script>
-  <script src="../src/models/blip.js"></script>
-  <script src="../src/models/quadrant.js"></script>
-  <script src="../src/models/radar.js"></script>
-  <script src="../src/graphing/radar.js"></script>
-  <style>
-  </style>
+  <script src="../dist/tech-radar.min.js"></script>
+  <link href="../dist/base.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <div id="radar">
diff --git a/gulpfile.js b/gulpfile.js
index d5b7c25..8a0ca3a 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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;
A fork of https://github.com/trecenti/tech-radar with CSV input support