responsive behavior: initial version

ioandr · drjova · commit a2d6617e7132 · 2017-08-03T15:31:40.000+02:00
Update the SVG holding the graph on window resize event. * Adds responsive behavior to the graphs. (closes #8) * Appends all circles as the upper layer of the graph. (closes #27) Signed-off by Ioannis Androulidakis <androulidakis.ioannis@gmail.com>
diff --git a/.eslintrc b/.eslintrc
@@ -13,6 +13,7 @@
     # TODO: Check for a fix
     "jsx-a11y/href-no-hash": "off",
     "jsx-a11y/anchor-is-valid": ["warn", { "aspects": ["invalidHref"] }],
-    "no-use-before-define": ["error", { "functions": false, "classes": true }]
+    "no-use-before-define": ["error", { "functions": false, "classes": true }],
+    "class-methods-use-this": "off"
   }
 }
diff --git a/examples/bar/config.js b/examples/bar/config.js
@@ -24,13 +24,11 @@
 // Export configuration object
 const config = {};
 config.pageviewsVideosPerCountry = {
-  width: 1000,
-  height: 450,
   margin: {
-    top: 30,
-    right: 80,
-    bottom: 80,
-    left: 80
+    top: 50,
+    right: 60,
+    bottom: 70,
+    left: 60
   },
   graph: {
     type: 'bar'
@@ -97,6 +95,11 @@ config.pageviewsVideosPerCountry = {
   legend: {
     visible: false,
     position: 'side'
+  },
+  resize: {
+    enabled: true,
+    breakPointX: 500,
+    breakPointY: 350
   }
 };
 
diff --git a/examples/bar/index.html b/examples/bar/index.html
@@ -27,6 +27,7 @@
     <title>Bar Chart</title>
 </head>
 <body>
+  <div class='pageviews_country' style='width: 100vw; height:80vh;'></div>
   <script src="../dist/bar.bundle.js"></script>
 </body>
 </html>
diff --git a/examples/bar/index.js b/examples/bar/index.js
@@ -26,11 +26,12 @@ import config from './config';
 import dataCDS from '../data/data';
 import { BarGraph } from '../../src/index';
 
-// BarGraph 1
 const cfg1 = config.pageviewsVideosPerCountry;
 const data1 = dataCDS.pageviewsVideosPerCountry;
 const data1Update = dataCDS.pageviewsVideosPerCountryUpdate;
-const class1 = 'pageviews';
+const class1 = 'pageviews_country';
 const g1 = new BarGraph(cfg1, data1, class1);
+
+// BarGraph 1
 g1.render();
 setTimeout(() => g1.update(data1Update), 3000);
diff --git a/examples/line/config.js b/examples/line/config.js
@@ -24,19 +24,21 @@
 // Export configuration object
 const config = {};
 config.downloadVideosInterval1day = {
-  width: 1000,
-  height: 450,
   margin: {
-    top: 30,
-    right: 80,
-    bottom: 80,
-    left: 80
+    top: 50,
+    right: 60,
+    bottom: 70,
+    left: 60
   },
   graph: {
     type: 'line',
     options: {
       curveType: 'curveLinear',
-      fillArea: true
+      fillArea: true,
+      circles: {
+        visible: true,
+        radius: 5.5
+      }
     }
   },
   axis: {
@@ -49,15 +51,15 @@ config.downloadVideosInterval1day = {
       options: {
         label: {
           value: 'Date',
-          visible: false
+          visible: true
         },
         line: {
           visible: false
         },
         ticks: {
           number: 5,
           format: '',
-          visible: true
+          visible: false
         },
         tickLabels: {
           visible: true,
@@ -75,18 +77,19 @@ config.downloadVideosInterval1day = {
       options: {
         label: {
           value: 'Downloads',
-          visible: false
+          visible: true
         },
         line: {
           visible: false
         },
         ticks: {
           number: 5,
           format: '',
-          visible: true
+          visible: false
         },
         tickLabels: {
-          visible: true
+          visible: true,
+          rotated: false
         },
         gridlines: false
       }
@@ -98,115 +101,33 @@ config.downloadVideosInterval1day = {
     visible: true,
     position: 'side'
   },
-  circles: {
-    visible: true,
-    radius: 5.5
-  },
   title: {
     visible: true,
     value: 'Video Downloads per day'
-  }
-};
-
-config.pageviewsVideosInterval1day = {
-  width: 1000,
-  height: 450,
-  margin: {
-    top: 30,
-    right: 30,
-    bottom: 60,
-    left: 85
-  },
-  graph: {
-    type: 'line',
-    options: {
-      curveType: 'curveMonotoneX',
-      fillArea: true
-    }
-  },
-  axis: {
-    x: {
-      mapTo: 'time',
-      scale: {
-        type: 'scaleTime',
-        format: '%d-%b-%y'
-      },
-      options: {
-        label: {
-          value: 'Date',
-          visible: false
-        },
-        line: {
-          visible: false
-        },
-        ticks: {
-          number: 5,
-          format: '',
-          visible: false
-        },
-        tickLabels: {
-          visible: true,
-          rotated: true
-        },
-        gridlines: true
-      }
-    },
-    y: {
-      mapTo: 'count',
-      scale: {
-        type: 'scaleLinear',
-        format: ''
-      },
-      options: {
-        label: {
-          value: 'Pageviews',
-          visible: false
-        },
-        line: {
-          visible: false
-        },
-        ticks: {
-          number: 5,
-          format: '',
-          visible: false
-        },
-        tickLabels: {
-          visible: true
-        },
-        gridlines: true
-      }
-    }
-  },
-  colorScale: 'schemeCategory10',
-  tooltip: false,
-  legend: {
-    visible: true,
-    position: 'side'
-  },
-  circles: {
-    visible: true,
-    radius: 5.5
   },
-  title: {
-    visible: true,
-    value: 'Pageviews per day'
+  resize: {
+    enabled: true,
+    breakPointX: 500,
+    breakPointY: 350
   }
 };
 
 config.pageviewsVideosInterval1month = {
-  width: 1000,
-  height: 450,
   margin: {
-    top: 30,
-    right: 30,
-    bottom: 60,
-    left: 85
+    top: 50,
+    right: 60,
+    bottom: 70,
+    left: 60
   },
   graph: {
     type: 'line',
     options: {
       curveType: 'curveMonotoneX',
-      fillArea: true
+      fillArea: true,
+      circles: {
+        visible: true,
+        radius: 5.5
+      }
     }
   },
   axis: {
@@ -256,7 +177,8 @@ config.pageviewsVideosInterval1month = {
           visible: false
         },
         tickLabels: {
-          visible: true
+          visible: true,
+          rotated: false
         },
         gridlines: true
       }
@@ -272,9 +194,10 @@ config.pageviewsVideosInterval1month = {
     visible: true,
     position: 'bottom'
   },
-  circles: {
-    visible: true,
-    radius: 5.5
+  resize: {
+    enabled: true,
+    breakPointX: 500,
+    breakPointY: 350
   }
 };
 
diff --git a/examples/line/index.html b/examples/line/index.html
@@ -27,7 +27,7 @@
     <title>Line Chart</title>
 </head>
 <body>
-  <div class='pageviews_month'></div>
+  <div class='pageviews_month' style='width: 100vw; height:80vh;'></div>
   <script src="../dist/line.bundle.js"></script>
 </body>
 </html>
diff --git a/examples/line/index.js b/examples/line/index.js
@@ -26,18 +26,19 @@ import config from './config';
 import dataCDS from '../data/data';
 import { LineGraph } from '../../src/index';
 
-// LineGraph 1
 const cfg1 = config.pageviewsVideosInterval1month;
 const data1 = dataCDS.pageviewsVideosInterval1month;
 const data1Update = dataCDS.pageviewsVideosInterval1monthUpdate;
 const class1 = 'pageviews_month';
+// const cfg2 = config.downloadVideosInterval1day;
+// const data2 = dataCDS.downloadVideosInterval1day;
+// const class2 = 'downloads_day';
+
+// LineGraph 1
 const g1 = new LineGraph(cfg1, data1, class1);
 g1.render();
 setTimeout(() => g1.update(data1Update), 3000);
 
 // LineGraph 2
-const cfg2 = config.downloadVideosInterval1day;
-const data2 = dataCDS.downloadVideosInterval1day;
-const class2 = 'downloads_day';
-const g2 = new LineGraph(cfg2, data2, class2);
-g2.render();
+// const g2 = new LineGraph(cfg2, data2, class2);
+// g2.render();
diff --git a/examples/line/styles.scss b/examples/line/styles.scss
@@ -41,14 +41,14 @@ $white: #fff;
 .igj-focus {
   circle {
     fill: none;
-    stroke-opacity: .75;
+    stroke-opacity: .85;
     stroke-width: 7px;
   }
   transition: transform 150ms;
 }
 
 svg {
-  margin: 30px;
+  margin: 12px;
   pointer-events: all;
 }
 
diff --git a/package.json b/package.json
@@ -29,8 +29,8 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.1.0",
     "istanbul": "^0.4.5",
-    "jasmine": "^2.6.0",
-    "jasmine-core": "^2.6.4",
+    "jasmine": "^2.7.0",
+    "jasmine-core": "^2.7.0",
     "jsdoc": "^3.5.3",
     "karma": "^1.7.0",
     "karma-coverage": "^1.1.1",
@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "d3": "^4.10.0",
+    "d3-extended": "^1.2.10",
     "d3-svg-legend": "^2.24.1",
     "d3-tip": "^0.7.1",
     "lodash": "^4.17.4"
diff --git a/src/bar/bar.js b/src/bar/bar.js
diff --git a/src/graph/graph.js b/src/graph/graph.js
diff --git a/src/line/line.js b/src/line/line.js

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@`
`13`	`13`	`# TODO: Check for a fix`
`14`	`14`	`"jsx-a11y/href-no-hash": "off",`
`15`	`15`	`"jsx-a11y/anchor-is-valid": ["warn", { "aspects": ["invalidHref"] }],`
`16`		`- "no-use-before-define": ["error", { "functions": false, "classes": true }]`
	`16`	`+ "no-use-before-define": ["error", { "functions": false, "classes": true }],`
	`17`	`+ "class-methods-use-this": "off"`
`17`	`18`	`}`
`18`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,14 +41,14 @@ $white: #fff;`
`41`	`41`	`.igj-focus {`
`42`	`42`	`circle {`
`43`	`43`	`fill: none;`
`44`		`- stroke-opacity: .75;`
	`44`	`+ stroke-opacity: .85;`
`45`	`45`	`stroke-width: 7px;`
`46`	`46`	`}`
`47`	`47`	`transition: transform 150ms;`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`svg {`
`51`		`- margin: 30px;`
	`51`	`+ margin: 12px;`
`52`	`52`	`pointer-events: all;`
`53`	`53`	`}`
`54`	`54`