Merge pull request #72 from Mikhus/v2.0.8

Merge release 2.0.8 branch into master

Author: Mikhus

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "canvas-gauges",
-    "version": "2.0.7",
+    "version": "2.0.8",
     "homepage": "https://github.com/Mikhus/canvas-gauges",
     "authors": [
         "Mykhailo Stadnyk <mikhus@gmail.com>"

docs-coverage.svg

@@ -16,19 +16,21 @@
         data-width="160"
         data-height="600"
         data-border-radius="20"
-        data-borders="0"
+        data-borders="true"
         data-bar-stroke-width="20"
         data-minor-ticks="10"
         data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
         data-color-numbers="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
         data-color-major-ticks="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
+        data-color-bar-stroke="#444"
         data-value="22.3"
         data-units="°C"
         data-color-value-box-shadow="false"
         data-tick-side="left"
         data-number-side="left"
         data-needle-side="left"
         data-animate-on-init="true"
+        data-color-plate="transparent"
 ></canvas>
 
 <canvas data-type="linear-gauge"

examples/linear-component.html

@@ -33,7 +33,7 @@
             { "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
             { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
         ]'
-        data-color-plate="#222"
+        data-color-plate="transparent"
         data-color-major-ticks="#f5f5f5"
         data-color-minor-ticks="#ddd"
         data-color-title="#fff"
@@ -46,6 +46,9 @@
         data-animation-duration="500"
         data-font-value="Led"
         data-font-numbers="Led"
+        data-border-outer-width="3"
+        data-border-middle-width="3"
+        data-border-inner-width="3"
 ></canvas>
 
 <canvas data-type="radial-gauge"
@@ -85,6 +88,7 @@
         data-ticks-angle="250"
         data-start-angle="55"
         data-color-needle-shadow-down="#333"
+        data-value-box-width="45"
 ></canvas>
 
 <canvas data-type="radial-gauge"

examples/radial-component.html

@@ -30,6 +30,7 @@ const babel = require('gulp-babel');
 const fsc = require('fs-cli');
 const semver = require('semver');
 const inject = require('gulp-inject-string');
+const version = require('./package.json').version;
 
 /**
  * @typedef {{argv: object}} yargs
@@ -70,7 +71,50 @@ function es6concat(type = 'all') {
         .pipe(concat('gauge.es6.js'))
         .pipe(replace(/((var|const|let)\s+.*?=\s*)?require\(.*?\);?/g, ''))
         .pipe(replace(/(module\.)?exports(.default)?\s+=\s*.*?\r?\n/g, ''))
-        .pipe(replace(/export\s+(default\s+)?(GenericOptions;)?/g, ''));
+        .pipe(replace(/export\s+(default\s+)?(GenericOptions;)?/g, ''))
+        .pipe(replace(/%VERSION%/g, version));
+}
+
+function es5transpile(type = 'all', withSourceMaps = true, resolve = () => {}) {
+    let stream = es6concat(type)
+        .pipe(rename('gauge.es5.js'))
+        .pipe(babel({
+            presets: ['es2015'],
+            compact: false
+        }))
+        .on('error', function(err) {
+            gutil.log(err);
+            this.emit('end');
+            resolve();
+        })
+        .pipe(rename('gauge.min.js'))
+        .pipe(replace(/^/, license() + '(function(ns) {'))
+        .pipe(replace(/$/,
+            ';typeof module !== "undefined" && Object.assign(ns, {' +
+                'Collection: Collection,' +
+                'GenericOptions: GenericOptions,' +
+                'Animation: Animation,' +
+                'BaseGauge: BaseGauge,' +
+                'drawings: drawings,' +
+                'SmartCanvas: SmartCanvas,' +
+                'vendorize: vendorize' +
+            '});' +
+            '}(typeof module !== "undefined" ? ' +
+            'module.exports : window));'));
+
+    if (withSourceMaps) {
+        stream = stream.pipe(sourcemaps.init({ loadMaps: true }));
+    }
+
+    stream = stream.pipe(uglify({
+        preserveComments: (node, comment) => comment.line === 1
+    }));
+
+    if (withSourceMaps) {
+        stream = stream.pipe(sourcemaps.write('.'));
+    }
+
+    return stream;
 }
 
 function license() {
@@ -80,7 +124,8 @@ function license() {
 
     src.pop();
 
-    return '/*!\n * ' + src.join('\n * ') + '\n */\n';
+    return '/*!\n * ' + src.join('\n * ') + '\n *\n * @version ' +
+        version + '\n */\n';
 }
 
 /**
@@ -99,34 +144,7 @@ gulp.task('build:prod', done => {
     rimraf('dist', () => {
         Promise.all(types.map(type => {
             return new Promise(resolve => {
-                es6concat(type)
-                    .pipe(rename('gauge.es5.js'))
-                    .pipe(babel({
-                        presets: ['es2015'],
-                        compact: false
-                    }))
-                    .on('error', function(err) {
-                        gutil.log(err);
-                        this.emit('end');
-                        resolve();
-                    })
-                    .pipe(rename('gauge.min.js'))
-                    .pipe(replace(/^/, license() + '(function(ns) {'))
-                    .pipe(replace(/$/,
-                        ';typeof module !== "undefined" && Object.assign(ns, {' +
-                        'Collection: Collection,' +
-                        'GenericOptions: GenericOptions,' +
-                        'Animation: Animation,' +
-                        'BaseGauge: BaseGauge,' +
-                        'drawings: drawings,' +
-                        'SmartCanvas: SmartCanvas,' +
-                        'vendorize: vendorize' +
-                        '});' +
-                        '}(typeof module !== "undefined" ? ' +
-                            'module.exports : window));'))
-                    .pipe(uglify({
-                        preserveComments: (node, comment) => comment.line === 1
-                    }))
+                es5transpile(type, false, resolve)
                     .pipe(gulp.dest('dist/' + type))
                     .on('end', () => {
                         let pkg = JSON.parse(fs.readFileSync('./package.json'));
@@ -159,7 +177,6 @@ gulp.task('build:prod', done => {
                     });
             });
         })).then(() => {
-            let version = require('./package.json').version;
             let cmd = '';
 
             console.log(chalk.bold.green('Production packages are now ready!'));
@@ -253,36 +270,8 @@ gulp.task('build:es6', ['clean'], () => {
  * @task {build:es5}
  * @arg {type} build type: 'radial' - Gauge object only, 'linear' - LinearGauge object only, 'all' - everything (default)
  */
-gulp.task('build:es5', ['clean'], () => {
-    es6concat(yargs.argv.type || 'all')
-        .pipe(rename('gauge.es5.js'))
-        .pipe(babel({
-            presets: ['es2015'],
-            compact: false
-        }))
-        .on('error', function(err) {
-            gutil.log(err);
-            this.emit('end');
-        })
-        //.pipe(gulp.dest('.'))
-        .pipe(rename('gauge.min.js'))
-        .pipe(replace(/^/, license() + '(function(ns) {'))
-        .pipe(replace(/$/,
-            ';typeof module !== "undefined" && Object.assign(ns, {' +
-                'Collection: Collection,' +
-                'GenericOptions: GenericOptions,' +
-                'Animation: Animation,' +
-                'BaseGauge: BaseGauge,' +
-                'drawings: drawings,' +
-                'SmartCanvas: SmartCanvas,' +
-                'vendorize: vendorize' +
-            '});' +
-            '}(typeof module !== "undefined" ?  module.exports : window));'))
-        .pipe(sourcemaps.init({ loadMaps: true }))
-        .pipe(uglify({
-            preserveComments: (node, comment) => comment.line === 1
-        }))
-        .pipe(sourcemaps.write('.'))
+gulp.task('build:es5', ['clean'], done => {
+    es5transpile(yargs.argv.type || 'all')
         .pipe(gulp.dest('.'))
         .on('end', () => {
             if (!process.env.TRVIS) {
@@ -297,6 +286,8 @@ gulp.task('build:es5', ['clean'], () => {
                     fs.readFileSync('gauge.min.js.map')
                 );
             }
+
+            done();
         });
 });
 
@@ -366,7 +357,6 @@ gulp.task('doc', ['clean:docs'], done => {
 
             //move to pages
 
-            let version = require('./package.json').version;
             let target = '../canvas-gauges-pages/docs/' + version;
 
             rimraf(target, () => fs.rename('docs', target, done));

gauge.min.js

@@ -28,11 +28,15 @@ const Animation = require('./Animation');
 const Collection = require('./Collection');
 const DomObserver = require('./DomObserver');
 
+const version = '%VERSION%';
+
 const round = Math.round;
 const abs = Math.abs;
 
 let gauges = new Collection();
 
+gauges.version = version;
+
 /**
  * Basic abstract BaseGauge class implementing common functionality
  * for different type of gauges.
@@ -75,6 +79,13 @@ export default class BaseGauge {
 
         gauges.push(this);
 
+        /**
+         * Gauges version string
+         *
+         * @type {string}
+         */
+        this.version = version;
+
         /**
          * Gauge type class
          *
@@ -239,6 +250,15 @@ export default class BaseGauge {
         this.animation = null;
     }
 
+    /**
+     * Returns gauges version string
+     *
+     * @return {string}
+     */
+    static get version() {
+        return version;
+    }
+
     /**
      * Triggering gauge render on a canvas.
      *

gauge.min.js.map

@@ -40,7 +40,7 @@
 /**
  * Shared generic gauges options
  *
- * @type {{renderTo: RenderTarget, width: number, height: number, minValue: number, maxValue: number, value: number, units: string|boolean, majorTicks: number[]|string[], minorTicks: number, strokeTicks: boolean, animatedValue: boolean, animateOnInit: boolean, title: string|boolean, borders: boolean, valueInt: number, valueDec: number, majorTicksInt: number, majorTicksDec: number, animation: boolean, animationDuration: number, animationRule: string|AnimationRule, colorPlate: string, colorPlateEnd: string, colorMajorTicks: string, colorMinorTicks: string, colorTitle: string, colorUnits: string, colorNumbers: string, colorNeedle: string, colorNeedleEnd: string, colorValueText: string, colorValueTextShadow: string, colorBorderShadow: string, colorBorderOuter: string, colorBorderOuterEnd: string, colorBorderMiddle: string, colorBorderMiddleEnd: string, colorBorderInner: string, colorBorderInnerEnd: string, colorValueBoxRect: string, colorValueBoxRectEnd: string, colorValueBoxBackground: string, colorValueBoxShadow: string, colorNeedleShadowUp: string, colorNeedleShadowDown: string, needle: boolean, needleShadow: boolean, needleType: string, needleStart: number, needleEnd: number, needleWidth: number, borderOuterWidth: number, borderMiddleWidth: number, borderInnerWidth: number, borderShadowWidth: number, valueBox: boolean, valueBoxStroke: number, valueText: string, valueTextShadow: boolean, valueBoxBorderRadius: number, highlights: Highlight[], fontNumbers: string, fontTitle: string, fontUnits: string, fontValue: string, fontTitleSize: number, fontValueSize: number, fontUnitsSize: number, fontNumbersSize: number, fontNumbersStyle: string, fontTitleStyle: string, fontUnitsStyle: string, fontValueStyle: string, fontNumbersWeight: string, fontTitleWeight: string, fontUnitsWeight: string, fontValueWeight: string}} GenericOptions
+ * @type {{renderTo: RenderTarget, width: number, height: number, minValue: number, maxValue: number, value: number, units: string|boolean, majorTicks: number[]|string[], minorTicks: number, strokeTicks: boolean, animatedValue: boolean, animateOnInit: boolean, title: string|boolean, borders: boolean, valueInt: number, valueDec: number, majorTicksInt: number, majorTicksDec: number, animation: boolean, animationDuration: number, animationRule: string|AnimationRule, colorPlate: string, colorPlateEnd: string, colorMajorTicks: string, colorMinorTicks: string, colorTitle: string, colorUnits: string, colorNumbers: string, colorNeedle: string, colorNeedleEnd: string, colorValueText: string, colorValueTextShadow: string, colorBorderShadow: string, colorBorderOuter: string, colorBorderOuterEnd: string, colorBorderMiddle: string, colorBorderMiddleEnd: string, colorBorderInner: string, colorBorderInnerEnd: string, colorValueBoxRect: string, colorValueBoxRectEnd: string, colorValueBoxBackground: string, colorValueBoxShadow: string, colorNeedleShadowUp: string, colorNeedleShadowDown: string, needle: boolean, needleShadow: boolean, needleType: string, needleStart: number, needleEnd: number, needleWidth: number, borderOuterWidth: number, borderMiddleWidth: number, borderInnerWidth: number, borderShadowWidth: number, valueBox: boolean, valueBoxWidth: number, valueBoxStroke: number, valueText: string, valueTextShadow: boolean, valueBoxBorderRadius: number, highlights: Highlight[], highlightsWidth: number, fontNumbers: string, fontTitle: string, fontUnits: string, fontValue: string, fontTitleSize: number, fontValueSize: number, fontUnitsSize: number, fontNumbersSize: number, fontNumbersStyle: string, fontTitleStyle: string, fontUnitsStyle: string, fontValueStyle: string, fontNumbersWeight: string, fontTitleWeight: string, fontUnitsWeight: string, fontValueWeight: string}} GenericOptions
  */
 const GenericOptions = {
     // basic options
@@ -133,13 +133,17 @@ const GenericOptions = {
     // value and highlights
     valueBox: true,
     valueBoxStroke: 5,
+    valueBoxWidth: 0,
     valueText: '',
     valueTextShadow: true,
     valueBoxBorderRadius: 2.5,
+
+    // highlights
     highlights: [
         { from: 20, to: 60, color: '#eee' },
         { from: 60, to: 80, color: '#ccc' },
-        { from: 80, to: 100, color: '#999' }]
+        { from: 80, to: 100, color: '#999' }],
+    highlightsWidth: 15
 };
 
 export default GenericOptions;