Merge pull request #454 from Kitware/fix-sizing

Fix sizing of Geo, GeoDots, LineUp

python/pycandela/pycandela/__init__.py

@@ -15,6 +15,12 @@
         require.config({
             paths: {
                 candela: 'https://unpkg.com/candela/dist/candela'
+
+                // To test unreleased candela: comment above, uncomment below,
+                // start jupyter-notebook from base of candela checkout,
+                // and navigate to python/pycandela before creating notebook.
+
+                // candela: '/files/build/candela/candela'
             },
             urlArgs: null
         });

src/candela/components/Geo/index.js

@@ -2,9 +2,15 @@ import geojs from 'geojs/geo.js';
 import VisComponent from '../../VisComponent';
 
 export default class Geo extends VisComponent {
-  constructor (el, {map = {}, layers = []}) {
+  constructor (el, {map = {}, layers = [], width, height}) {
     super(el);
 
+    width = width || map.width || 600;
+    height = height || map.height || 600;
+
+    el.style.width = width + 'px';
+    el.style.height = height + 'px';
+
     // Construct a GeoJS map object based on the requested options.
     this.plot = geojs.map(Object.assign({
       node: el

src/candela/components/GeoDots/index.js

@@ -59,6 +59,12 @@ export default class GeoDots extends VisComponent {
   constructor (el, options) {
     super(el);
 
+    let width = options.width || 600;
+    let height = options.height || 600;
+
+    el.style.width = width + 'px';
+    el.style.height = height + 'px';
+
     let sizeTransform = 5;
     if (options.size) {
       const range = minmax(options.data.map(d => d[options.size]));

src/candela/components/LineUp/index.js

@@ -49,6 +49,13 @@ export default class LineUp extends VisComponent {
 
   constructor (el, options) {
     super(el);
+
+    let width = options.width || 800;
+    let height = options.height || 600;
+
+    el.style.width = width + 'px';
+    el.style.height = height + 'px';
+
     this.options = options;
     this.lineUpConfig = {
       interaction: {

src/candela/components/LineUp/test/lineup.js

@@ -11,7 +11,7 @@ test('LineUp component', t => {
   $('body').append($('<div/>').attr({id: 'elem'}).css({width: 800, height: 600}));
   t.ok(LineUp, 'LineUp exists');
   t.ok(LineUp.options, 'LineUp options exists');
-  let lu = new LineUp('#elem', {
+  let lu = new LineUp(document.getElementById('elem'), {
     data: [
       {a: 1, b: 2, c: 'a', d: true},
       {a: 3, b: 4, c: 'b', d: false},