drawing basics of radar chart

IBM-Design · Feb 22, 2017 · ad971e1 · ad971e1
1 parent 9a1ced4
commit ad971e1
Show file tree

Hide file tree

Showing 9 changed files with 280 additions and 0 deletions.
diff --git a/packages/charts-vanilla-radar/LICENSE.md b/packages/charts-vanilla-radar/LICENSE.md
@@ -0,0 +1,12 @@
+Copyright 2017 IBM
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/packages/charts-vanilla-radar/README.md b/packages/charts-vanilla-radar/README.md
@@ -0,0 +1,7 @@
+# `@ibm-design/charts-vanilla-radar`
+
+## Usage
+
+```bash
+yarn add @ibm-design/charts-vanilla-radar
+```
diff --git a/packages/charts-vanilla-radar/gulpfile.js b/packages/charts-vanilla-radar/gulpfile.js
@@ -0,0 +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');
+
+
+
+gulp.task('serve', ['compile-js', 'compile-scss'], function(){
+  browserSync.init({
+    server: {
+      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.task('compile-js', function(){
+  return gulp.src('src/scripts/*.js')
+              .pipe(plumber())
+              .pipe(sourcemaps.init())
+              .pipe(babel({
+                presets:['es2015']
+              }))
+              .pipe(sourcemaps.write('maps'))
+              .pipe(gulp.dest('lib'))
+})
+
+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'))
+})
+
+gulp.task('default', ['serve'])
diff --git a/packages/charts-vanilla-radar/index.html b/packages/charts-vanilla-radar/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Radar Chart</title>
+  <script src="https://d3js.org/d3.v4.min.js"></script>
+  <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
+  <link rel="stylesheet" href="lib/styles.css">
+</head>
+<body>
+<svg class="radar">
+
+</svg>
+<script src="lib/data.js"></script>
+<script src="lib/index.js"></script>
+</body>
+</html>
diff --git a/packages/charts-vanilla-radar/package.json b/packages/charts-vanilla-radar/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ibm-design/charts-vanilla-radar",
+  "version": "0.0.0",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "npm run clean && babel -d lib src",
+    "clean": "rimraf lib"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-preset-es2015": "^6.22.0",
+    "browser-sync": "^2.18.7",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^6.1.2",
+    "gulp-plumber": "^1.1.0",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.4.1",
+    "rimraf": "^2.5.4"
+  }
+}
diff --git a/packages/charts-vanilla-radar/src/__tests__/Chart-test.js b/packages/charts-vanilla-radar/src/__tests__/Chart-test.js
@@ -0,0 +1,7 @@
+import Chart from '../';
+
+describe('Radar Component', () => {
+  it('should render', () => {
+    expect(true).toBe(true, 'This is a placeholder true')
+  });
+});
diff --git a/packages/charts-vanilla-radar/src/scripts/data.js b/packages/charts-vanilla-radar/src/scripts/data.js
@@ -0,0 +1,39 @@
+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}
+  ],[//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}
+  ]
+];
diff --git a/packages/charts-vanilla-radar/src/scripts/index.js b/packages/charts-vanilla-radar/src/scripts/index.js
@@ -0,0 +1,124 @@
+'use strict'
+class Radar {
+
+  constructor(graphNode, data){
+    this.data = this.formatData(data)
+    this.target = d3.select(graphNode)
+
+    this.scale;
+    this.line;
+
+    this.cfg = (()=>{
+      let w = 600,
+          h = 600,
+          numAxis = data[0].length;
+
+      return {
+        w: w,
+        h: h,
+        r: w / 2,
+        margin: {top: 20, right: 20, bottom: 20, left: 20},
+        levels: 5,
+        max: null, // will be determined by data
+        labelFactor: 60,  // how much further outside the radius does the label appears
+        wrapWidth: null, // word wrap after this number of pixels
+        opacityArea: 0.4,
+        strokeWidth: 2,
+        color: 'blue',
+        numAxis: numAxis,
+        angleSlice: Math.PI * 2 / numAxis, // angle of slice in radians
+        shape: 'circle', //circle, polygon, square
+      }
+    })()
+  }
+
+
+
+
+
+
+  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])
+    this.line =  d3.radialLine()
+                     .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,
+  //   })
+
+  //   if(cfg.shape == 'circle'){
+  //     //draw rings
+  //     for(var i = 0; i < cfg.levels; i++){
+
+  //     }
+
+  //   } else if(cfg.shape == 'polygon'){
+  //     //TODO
+  //   } else if(cfg.shape =='square'){
+  //     //TODO
+  //   }
+  // }
+
+  //customize this function to fit data model you want
+  formatData(data){
+    data.map((d)=>{
+      d.map((v)=>{
+        v.value  = Math.round(v.value*100)
+      })
+    })
+    return data
+  }
+}
+
+
+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
+                      })
+
+}
+
+
+test(data)
diff --git a/packages/charts-vanilla-radar/src/styles/styles.scss b/packages/charts-vanilla-radar/src/styles/styles.scss
@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Helvetica";
+}
+
+.radar {
+  border: 1px solid black;
+}