Skip to content
This repository has been archived by the owner on Nov 4, 2022. It is now read-only.

Commit

Permalink
removing linting errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@photodow
Jamie Skinner authored and photodow committed Feb 22, 2017
1 parent fa040b7 commit de21e2d
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 134 deletions.
44 changes: 22 additions & 22 deletions packages/charts-vanilla-radar/gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@
var gulp = require('gulp'),
babel = require('gulp-babel'),
browserSync = require('browser-sync')
sass = require('gulp-sass'),
plumber = require('gulp-plumber'),
sourcemaps = require('gulp-sourcemaps');
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');



gulp.task('serve', ['compile-js', 'compile-scss'], function(){
gulp.task('serve', ['compile-js', 'compile-scss'], function() {
browserSync.init({
server: {
baseDir:'./'
}
})
baseDir:'./',
},
});

gulp.watch(['src/scripts/*.js'], ['compile-js'])
gulp.watch(["src/styles/*.scss"], ['compile-scss']);
gulp.watch(['*.html','src/styles/*.scss','src/scripts/*.js']).on('change', browserSync.reload)
gulp.watch(['src/scripts/*.js'], ['compile-js']);
gulp.watch(['src/styles/*.scss'], ['compile-scss']);
gulp.watch(['*.html', 'src/styles/*.scss', 'src/scripts/*.js']).on('change', browserSync.reload);

})
});

gulp.task('compile-js', function(){
gulp.task('compile-js', function() {
return gulp.src('src/scripts/*.js')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel({
presets:['es2015']
presets:['es2015'],
}))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('lib'))
})
.pipe(gulp.dest('lib'));
});

gulp.task('compile-scss', function(){
gulp.task('compile-scss', function() {
return gulp.src('src/styles/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('lib'))
})
.pipe(gulp.dest('lib'));
});

gulp.task('default', ['serve'])
gulp.task('default', ['serve']);
4 changes: 2 additions & 2 deletions packages/charts-vanilla-radar/src/__tests__/Chart-test.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Chart from '../';
// import Chart from '../';

describe('Radar Component', () => {
it('should render', () => {
expect(true).toBe(true, 'This is a placeholder true')
expect(true).toBe(true, 'This is a placeholder true');
});
});
50 changes: 23 additions & 27 deletions packages/charts-vanilla-radar/src/scripts/data.js
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,26 @@
const data = [
[//iPhone
{axis:"Battery Life",value:0.22},
{axis:"Brand",value:0.28},
{axis:"Contract Cost",value:0.29},
{axis:"Design And Quality",value:0.17},
{axis:"Have Internet Connectivity",value:0.22},
{axis:"Large Screen",value:0.02},
{axis:"Price Of Device",value:0.21},
{axis:"To Be A Smartphone",value:0.50}
],[//Samsung
{axis:"Battery Life",value:0.27},
{axis:"Brand",value:0.16},
{axis:"Contract Cost",value:0.35},
{axis:"Design And Quality",value:0.13},
{axis:"Have Internet Connectivity",value:0.20},
{axis:"Large Screen",value:0.13},
{axis:"Price Of Device",value:0.35},
{axis:"To Be A Smartphone",value:0.38}
],[//Nokia Smartphone
{axis:"Battery Life",value:0.26},
{axis:"Brand",value:0.10},
{axis:"Contract Cost",value:0.30},
{axis:"Design And Quality",value:0.14},
{axis:"Have Internet Connectivity",value:0.22},
{axis:"Large Screen",value:0.04},
{axis:"Price Of Device",value:0.41},
{axis:"To Be A Smartphone",value:0.30}
]
{axis:'Apdex', value:0.80},
{axis:'Alerts', value:0.66},
{axis:'Request Volume', value:0.35},
{axis:'Memory', value:0.54},
{axis:'CPU', value:0.38},
{axis:'Disk', value:0.23},
],
[//Samsung
{axis:'Apdex', value:0.80},
{axis:'Alerts', value:0.66},
{axis:'Request Volume', value:0.35},
{axis:'Memory', value:0.23},
{axis:'CPU', value:0.36},
{axis:'Disk', value:0.13},
],
[//Nokia Smartphone
{axis:'Apdex', value:0.26},
{axis:'Alerts', value:0.10},
{axis:'Request Volume', value:0.30},
{axis:'Memory', value:0.14},
{axis:'CPU', value:0.22},
{axis:'Disk', value:0.04},
],
];
151 changes: 74 additions & 77 deletions packages/charts-vanilla-radar/src/scripts/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
'use strict'
'use strict';
class Radar {

constructor(graphNode, data, opts){
this.data = this.formatData(data)
this.target = d3.select(graphNode)
constructor(graphNode, data, opts) {
this.data = this.formatData(data);
this.target = d3.select(graphNode);

this.scale;
this.line;
this.color = d3.scaleOrdinal()
.range(opts.colors)
this.axis = {}
.range(opts.colors);
this.axis = {};

this.cfg = (()=>{
let w = opts.size || 500,
h = w,
numAxis = data[0].length,
margin = opts.margins,
r = w / 2 - d3.max([margin.top + margin.bottom, margin.right + margin.left]);
this.cfg = (() => {
let w = opts.size || 500;
let h = w;
let numAxis = data[0].length;
let margin = opts.margins;
let r = w / 2 - d3.max([margin.top + margin.bottom, margin.right + margin.left]);

return {
w: w,
Expand All @@ -37,144 +37,141 @@ class Radar {
axisStyle: {
'stroke': 'black',
'stroke-width': 1,
}
}
})()
},
};
})();
} // constructor


draw(){
draw() {
//setup
this.scalesAndLinesFunctions()
this.wrapper = this.setupRadar()
this.scalesAndLinesFunctions();
this.wrapper = this.setupRadar();

//draw blobs & dots
var blobs = this.wrapper.append('g').attr('class','blobs')
for(let i = 0; i < data.length; i++){
let blobs = this.wrapper.append('g').attr('class', 'blobs');
for (let i = 0; i < data.length; i++) {
//blob
let g = blobs.append('g').attr('class','blob-'+i)
g.append('path').datum(data[i]).attrs({
'stroke-width': 1.5,
'd' : a.line,
'fill': () => { return this.color(i)}
})
//dots
g.selectAll('.dot').data(data[i]).enter().append('circle').attrs({
'stroke-width': 1.5,
'cx': (d,i) => { return this.scale( d.value) * Math.sin(this.cfg.angleSlice * i + Math.PI/2)},
'cy': (d,i) => { return this.scale( d.value) * Math.cos(this.cfg.angleSlice * i + Math.PI/2)},
'r': this.cfg.dotSize,
'fill': () => { return this.color(i)},
'opacity': 0.4,
'class': 'dot',
})
let g = blobs.append('g').attr('class', 'blob-' + i);
g.append('path').datum(data[i]).attrs({
'stroke-width': 1.5,
'd' : a.line,
'fill': () => { return this.color(i); },
});
//dots
g.selectAll('.dot').data(data[i]).enter().append('circle').attrs({
'stroke-width': 1.5,
'cx': (d, i) => { return this.scale( d.value) * Math.sin(this.cfg.angleSlice * i + Math.PI / 2);},
'cy': (d, i) => { return this.scale( d.value) * Math.cos(this.cfg.angleSlice * i + Math.PI / 2);},
'r': this.cfg.dotSize,
'fill': () => { return this.color(i);},
'opacity': 0.4,
'class': 'dot',
});
}


}//draw

scalesAndLinesFunctions(){
let that = this
this.cfg.max = d3.max(d3.merge(this.data), d => d.value)
scalesAndLinesFunctions() {
let that = this;
this.cfg.max = d3.max(d3.merge(this.data), d => d.value);
this.scale = d3.scaleLinear()
.domain([0, this.cfg.max])
.range([0, this.cfg.r])
.range([0, this.cfg.r]);

this.line = d3.radialLine()
.angle((d, i)=>{ return -(i * that.cfg.angleSlice) + Math.PI / 2;})
.radius((d)=>{ return that.scale(d.value)})
.angle((d, i) => { return -(i * that.cfg.angleSlice) + Math.PI / 2;})
.radius((d) => { return that.scale(d.value);});

}//scalesAndLinesFunctions

setupRadar(){
setupRadar() {
this.target.styles({
width: this.cfg.w,
height: this.cfg.h,
})
});
let globalGroup = this.target.append('g').attrs({
'class': 'chart',
'transform': `translate(${this.cfg.w/2} ${this.cfg.h/2})`
})
'transform': `translate(${this.cfg.w / 2} ${this.cfg.h / 2})`,
});

this.axis.names = data[0].map( el => el.axis)
this.axis.length = this.axis.names.length
this.axis.names = data[0].map( el => el.axis);
this.axis.length = this.axis.names.length;


//puts 0,0 in the center of the svg


// draws the axis
if(this.cfg.axisStyle){
this.axisGroup = globalGroup.append('g').attr('class','axis-lines')
if (this.cfg.axisStyle) {
this.axisGroup = globalGroup.append('g').attr('class','axis-lines');
this.axisGroup.selectAll('.axis-line').data(this.axis.names).enter().append('line')
.attrs({
'x1': 0,
'y1': 0,
// `+ Math.PI/2 to make the Axis line up with the correct Data`
'x2': (d,i)=>{ return this.scale(this.cfg.max * 1.05) * Math.sin( this.cfg.angleSlice*i + Math.PI/2)},
'y2': (d,i)=>{ return this.scale(this.cfg.max * 1.05) * Math.cos( this.cfg.angleSlice*i + Math.PI/2)},
'x2': (d, i) => { return this.scale(this.cfg.max * 1.05) * Math.sin( this.cfg.angleSlice*i + Math.PI/2);},
'y2': (d, i)=>{ return this.scale(this.cfg.max * 1.05) * Math.cos( this.cfg.angleSlice*i + Math.PI/2);},
'opacity': 0.3,
'class': 'axis-line',
}).styles(this.cfg.axisStyle)
}).styles(this.cfg.axisStyle);
}

if(this.cfg.shape == 'circle'){
if (this.cfg.shape == 'circle') {
//draw rings
let ringInterval = this.cfg.max / this.cfg.levels
var ringRadiusValues = d3.range(ringInterval, this.cfg.max+1, ringInterval).reverse() //add 1 so you include the MAX
let ringInterval = this.cfg.max / this.cfg.levels;
var ringRadiusValues = d3.range(ringInterval, this.cfg.max + 1, ringInterval).reverse() //add 1 so you include the MAX

let g = globalGroup.append('g').attr('class', 'grid-circle')
let g = globalGroup.append('g').attr('class', 'grid-circle');
g.append('g').attr('class', 'rings')
.selectAll('.ring').data(ringRadiusValues)
.enter().append('circle').attrs({
'fill': 'none',
'cx': 0,
'cy': 0,
'class': 'label',
'r': (d) => {return this.scale(d)},
'r': (d) => { return this.scale(d); },
'stroke': 'black',
'stroke-width': 1,
'stroke-dasharray': '1 3',
'opacity': 0.5,
'class': 'ring'
})
'stroke-dasharray': '5 5',
'opacity': 0.2,
'class': 'ring',
});

//add the unit labels on the rings
g.append('g').attr('class', 'rings-labels')
.selectAll('.ring-label').data(ringRadiusValues)
.enter().append('text').attrs({
'class': 'ring-label',
'x': '0',
'y': (d) => {return -this.scale(d)},
'y': (d) => {return -this.scale(d);},
'dy': '-0.3em',
'dx': '0.5em',
'font-size': '0.8em',
'fill': 'grey',
'opacity': 0.4
'opacity': 0.4,
})
.text((d) => {return d + this.cfg.units})
.text((d) => {return d + this.cfg.units;});
g.append('g').attr('class', 'legend')
.selectAll('.axis-label').data(data[0]).enter().append('text').attrs({
'class': 'axis-label',
'x': (d,i) => { return (this.scale(this.cfg.max) * 1.05 + this.cfg.labelFactor ) * Math.sin(this.cfg.angleSlice * i + Math.PI/2)},
'y': (d,i) => { return (this.scale(this.cfg.max) * 1.05 + this.cfg.labelFactor ) * Math.cos(this.cfg.angleSlice * i + Math.PI/2)},
'x': (d, i) => { return (this.scale(this.cfg.max) * 1.05 + this.cfg.labelFactor ) * Math.sin(this.cfg.angleSlice * i + Math.PI / 2);},
'y': (d, i) => { return (this.scale(this.cfg.max) * 1.05 + this.cfg.labelFactor ) * Math.cos(this.cfg.angleSlice * i + Math.PI / 2);},
'font-size': '0.8em',
'fill': 'grey',
'opacity': 0.4,
'text-anchor': 'middle',
})
.text((d)=>{return d.axis})
.call(this.wrap, this.cfg.wrapWidth)
.text((d) => {return d.axis;})
.call(this.wrap, this.cfg.wrapWidth);




} else if(this.cfg.shape == 'polygon'){
} else if (this.cfg.shape == 'polygon') {
//TODO
} else if(this.cfg.shape =='square'){
} else if (this.cfg.shape == 'square') {
//TODO
}
return globalGroup
return globalGroup;
}//setupRadar

//customize this function to fit data model you want
Expand All @@ -188,7 +185,7 @@ class Radar {
} // formatData


//Taken from http://bl.ocks.org/mbostock/7555321
//Adapted from http://bl.ocks.org/mbostock/7555321
//Wraps SVG text
wrap(text, width) {
text.each(function() {
Expand Down Expand Up @@ -227,7 +224,7 @@ function test(data){
units: '%',
levels: 5,
opacityArea: 0.4,
labelFactor: 50,
labelFactor: 30,
shape: 'circle',
wrapWidth: 60
})
Expand Down
Loading

0 comments on commit de21e2d

Please sign in to comment.