diff --git a/packages/charts-vanilla-radar/src/scripts/data.js b/packages/charts-vanilla-radar/src/scripts/data.js index a799755..4e05c5b 100644 --- a/packages/charts-vanilla-radar/src/scripts/data.js +++ b/packages/charts-vanilla-radar/src/scripts/data.js @@ -26,14 +26,5 @@ const data = [ {axis:"Large Screen",value:0.04}, {axis:"Price Of Device",value:0.41}, {axis:"To Be A Smartphone",value:0.30} - ],[//Nokia Smartphone - {axis:"Battery Life",value:0.1}, - {axis:"Brand",value:0.1}, - {axis:"Contract Cost",value:0.1}, - {axis:"Design And Quality",value:0.1}, - {axis:"Have Internet Connectivity",value:0.1}, - {axis:"Large Screen",value:0.1}, - {axis:"Price Of Device",value:0.1}, - {axis:"To Be A Smartphone",value:0.1} ] ]; \ No newline at end of file diff --git a/packages/charts-vanilla-radar/src/scripts/index.js b/packages/charts-vanilla-radar/src/scripts/index.js index e79fd5f..49e210a 100644 --- a/packages/charts-vanilla-radar/src/scripts/index.js +++ b/packages/charts-vanilla-radar/src/scripts/index.js @@ -7,17 +7,20 @@ class Radar { this.scale; this.line; + this.axis = {} this.cfg = (()=>{ - let w = 600, - h = 600, - numAxis = data[0].length; + let w = 500, + h = w, + numAxis = data[0].length, + margin = {top: 20, right: 20, bottom: 20, left: 20}, + r = w / 2 - margin.top - margin.bottom; return { w: w, h: h, - r: w / 2, - margin: {top: 20, right: 20, bottom: 20, left: 20}, + r: r, + margin: margin, levels: 5, max: null, // will be determined by data labelFactor: 60, // how much further outside the radius does the label appears @@ -27,46 +30,99 @@ class Radar { color: 'blue', numAxis: numAxis, angleSlice: Math.PI * 2 / numAxis, // angle of slice in radians - shape: 'circle', //circle, polygon, square + shape: 'circle', //circle, polygon, square, + dotSize: 4, //if not set, dots will not be drawn. + axisStyle: { + 'stroke': 'black', + 'stroke-width': 1, + } } })() } + draw(){ - - + } 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]) + .domain([0, this.cfg.max]) + .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)}) } - // setupRadar(){ - // this.target.style({ - // width: cfg.w + cfg.margin.left + cfg.margin.right, - // height: cfg.h + cfg.margin.top + cfg.margin.bottom, - // }) + setupRadar(){ + this.target.style({ + width: this.cfg.w, + height: this.cfg.h, + }) - // if(cfg.shape == 'circle'){ - // //draw rings - // for(var i = 0; i < cfg.levels; i++){ + this.axis.names = data[0].map( el => el.axis) + this.axis.length = this.axis.names.length - // } - // } else if(cfg.shape == 'polygon'){ - // //TODO - // } else if(cfg.shape =='square'){ - // //TODO - // } - // } + //puts 0,0 in the center of the svg + this.globalGroup = this.target.append('g').attrs({ + 'class': 'chart', + 'transform': `translate(${this.cfg.w/2} ${this.cfg.h/2})` + }) + + // draws the axis + if(this.cfg.axisStyle){ + this.axisGroup = this.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.1) * Math.cos( this.cfg.angleSlice*i + Math.PI/2)}, + 'y2': (d,i)=>{ return this.scale(this.cfg.max * 1.1) * Math.sin( this.cfg.angleSlice*i + Math.PI/2)}, + 'class': 'axis-line', + }).styles(this.cfg.axisStyle) + } + + 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 + console.log(ringRadiusValues) + let g = this.globalGroup.append('g').attr('class', 'grid-circle') + g.selectAll('.level').data(ringRadiusValues).enter().append('circle').attrs({ + 'fill': 'none', + 'cx': 0, + 'cy': 0, + 'class': 'label', + 'r': (d) => {return this.scale(d)}, + 'stroke': 'black', + 'stroke-width': 1, + 'stroke-dasharray': '1 3', + 'opacity': 0.5 + }) + + g.selectAll('.axis-label').data(ringRadiusValues).enter().append('text').attrs({ + 'class': 'axis-label', + 'x': '0', + 'y': (d) => {return -this.scale(d)}, + 'dy': '-0.3em', + 'dx': '0.5em', + 'font-size': '0.8em', + 'fill': 'grey', + }).text((d) => {return d+'%'}) + + //text indicating % for each level + } else if(this.cfg.shape == 'polygon'){ + //TODO + } else if(this.cfg.shape =='square'){ + //TODO + } + } //customize this function to fit data model you want formatData(data){ @@ -84,40 +140,39 @@ let a; function test(data){ a = new Radar('svg', data) a.scalesAndLinesFunctions() - console.log(a.cfg.max) - console.log(a.scale(34)) a.target.attrs({ width: a.cfg.w, height: a.cfg.h }) - a.target.append('g').attr('transform', `translate(${a.cfg.w/2} ${a.cfg.h/2})`) - .append('path') - .datum(data[0]) - .attrs({ - 'stroke-width': 1.5, - 'fill': 'red', - 'opacity': 0.4, - 'd' : a.line - }) - a.target.append('g').attr('transform', `translate(${a.cfg.w/2} ${a.cfg.h/2})`) - .append('path') - .datum(data[2]) - .attrs({ - 'stroke-width': 1.5, - 'fill': 'blue', - 'opacity': 0.4, - 'd' : a.line - }) - a.target.append('g').attr('transform', `translate(${a.cfg.w/2} ${a.cfg.h/2})`) - .append('path') - .datum(data[1]) - .attrs({ - 'stroke-width': 1.5, - 'fill': 'green', - 'opacity': 0.4, - 'd' : a.line - }) - + a.setupRadar() + + let g = a.globalGroup.append('g').attr('class', 'lines') + g.append('path') + .datum(data[1]) + .attrs({ + 'stroke-width': 1.5, + 'fill': 'red', + 'opacity': 1, + 'd' : a.line, + 'class': 'iphone' + }) + g.append('path') + .datum(data[2]) + .attrs({ + 'stroke-width': 1.5, + 'fill': 'blue', + 'opacity': 1, + 'd' : a.line + }) + g.append('path') + .datum(data[0]) + .attrs({ + 'stroke-width': 1.5, + 'fill': 'green', + 'opacity': 1, + 'd' : a.line, + 'class': 'iphone' + }) } diff --git a/packages/charts-vanilla-radar/src/styles/styles.scss b/packages/charts-vanilla-radar/src/styles/styles.scss index 7ad97c1..fdc82a6 100644 --- a/packages/charts-vanilla-radar/src/styles/styles.scss +++ b/packages/charts-vanilla-radar/src/styles/styles.scss @@ -7,4 +7,10 @@ body { .radar { border: 1px solid black; -} \ No newline at end of file + + path { + mix-blend-mode: multiply; + opacity: 0.3; + } +} +