Merge pull request #118 from Kitware/release-0.3

Release 0.3

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.gitignore

@@ -1,3 +1,6 @@
-*.swp
+*.sw*
+*.pyc
 node_modules
 build
+coverage
+.ipynb_checkpoints

.npmignore

@@ -1,4 +1,2 @@
 app
 build
-src
-webpack.config.js

README.md

@@ -1,2 +1,22 @@
-# candela
+# Candela
 Visualization components for the web
+
+# [Documentation](src/candela#readme)
+
+# Installation from source
+
+## Prerequisites
+
+* npm
+* cairo (`brew install cairo` on Mac OSX).
+
+## Build
+
+```bash
+git clone https://github.com/Kitware/candela.git
+cd candela
+npm install
+npm run build
+```
+
+# [Reference application](https://github.com/Kitware/candela/blob/master/app/resonant-reference-app/README.md)

app/examples/custom/dynamic-linechart/index.jade

@@ -0,0 +1,2 @@
+#vcharts-line.content.border
+div #[span#counter 0] updates

app/examples/custom/dynamic-linechart/index.js

@@ -0,0 +1,32 @@
+import LineChart from './../../../../src/candela/components/LineChart';
+import $ from 'jquery';
+import './index.styl';
+
+let el = document.getElementById('vcharts-line');
+
+let data = [];
+
+for (let i = 0; i < 20; i++) {
+  data.push([i, Math.random() * 10]);
+}
+
+let vis = new LineChart(el, data);
+vis.render();
+
+// Every second, add a random data point to the chart, and remove the oldest
+// data point.
+let counter = data.length;
+window.setInterval(function () {
+  data.push([counter, Math.random() * 10]);
+  data = data.slice(1);
+
+  counter++;
+
+  vis.data(data);
+  vis.render();
+}, 1000);
+
+// Whenever the component renders, change the number of updates in the DOM.
+vis.on('render', function () {
+  $('#counter').text(counter - data.length);
+});

app/examples/custom/resize-full/index.jade

@@ -0,0 +1,4 @@
+.page
+  #vis-element.vis-full
+  p.overlay This vis should have 100% width and height and should
+    | resize with the window.

app/examples/custom/resize-full/index.js

@@ -0,0 +1,22 @@
+import candela from './../../../../src/candela';
+import AutoResize from './../../../../src/candela/VisComponent/mixin/AutoResize';
+import InitSize from './../../../../src/candela/VisComponent/mixin/InitSize';
+import './index.styl';
+
+let data = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({x: Math.random(), y: Math.random()});
+}
+
+let el = document.getElementById('vis-element');
+let vis = new (AutoResize(InitSize(candela.components.Scatter)))(el, {
+  data,
+  x: 'x',
+  y: 'y'
+});
+console.log(`initial size: ${vis.width}, ${vis.height}`);
+vis.render();
+
+vis.on('resize', () => {
+  console.log(`resize event: ${vis.width}, ${vis.height}`);
+});

app/examples/custom/resize-full/index.styl

@@ -0,0 +1,38 @@
+html, body, .page
+    width: 100%
+    height: 100%
+    margin: 0
+
+.test-list
+    margin: 15px
+
+.vis-table
+    height: 300px
+
+.vis-full
+    width: 100%
+    height: 100%
+
+.containing-matrix
+    width: 100%
+
+#containing-table
+    width: 500px
+
+td
+    max-width: 0
+
+canvas
+    display: block
+
+.overlay
+    position: fixed
+    bottom: 15px
+    right: 15px
+    width: 200px
+    padding: 20px
+    background-color: #ffeeaabb
+
+.hidden
+    display: none
+    visibility: hidden

app/examples/custom/resize-matrix/index.jade

@@ -0,0 +1,12 @@
+.page#matrix
+  table.containing-matrix
+    tr
+      td.vis-element.vis-table
+      td.vis-element.vis-table
+    tr
+      td.vis-element.vis-table
+      td.vis-element.vis-table
+  p.overlay These vis should fit in the table and the width should resize with it
+    | as you change the window size.
+    | Note that the table cell max-width is set to zero for the columns to
+    | maintain even distribution.

app/examples/custom/resize-matrix/index.js

@@ -0,0 +1,23 @@
+import candela from './../../../../src/candela';
+import AutoResize from './../../../../src/candela/VisComponent/mixin/AutoResize';
+import InitSize from './../../../../src/candela/VisComponent/mixin/InitSize';
+import './index.styl';
+
+let data = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({x: Math.random(), y: Math.random()});
+}
+
+[...document.getElementsByClassName('vis-element')].forEach(el => {
+  let vis = new (AutoResize(InitSize(candela.components.Scatter)))(el, {
+    data,
+    x: 'x',
+    y: 'y'
+  });
+  console.log(`initial size: ${vis.width}, ${vis.height}`);
+  vis.render();
+
+  vis.on('resize', () => {
+    console.log(`resize event: ${vis.width}, ${vis.height}`);
+  });
+});

app/examples/custom/resize-matrix/index.styl

@@ -0,0 +1,38 @@
+html, body, .page
+    width: 100%
+    height: 100%
+    margin: 0
+
+.test-list
+    margin: 15px
+
+.vis-table
+    height: 300px
+
+.vis-full
+    width: 100%
+    height: 100%
+
+.containing-matrix
+    width: 100%
+
+#containing-table
+    width: 500px
+
+td
+    max-width: 0
+
+canvas
+    display: block
+
+.overlay
+    position: fixed
+    bottom: 15px
+    right: 15px
+    width: 200px
+    padding: 20px
+    background-color: #ffeeaabb
+
+.hidden
+    display: none
+    visibility: hidden

app/examples/custom/resize-table/index.jade

@@ -0,0 +1,18 @@
+.page#table
+  table#containing-table
+    tr
+      td#vis-element.vis-table
+      td Hello
+      td There
+      td This
+      td Is
+    tr
+      td Table
+      td That
+      td I
+      td Made
+      td !!!
+  p.overlay This vis should fit in the table and the width should resize with it
+    | as the table width is updated each second.
+    | Note that the table cell max-width is set to zero for the columns to
+    | maintain even distribution.

app/examples/custom/resize-table/index.js

@@ -0,0 +1,32 @@
+import candela from './../../../../src/candela';
+import AutoResize from './../../../../src/candela/VisComponent/mixin/AutoResize';
+import InitSize from './../../../../src/candela/VisComponent/mixin/InitSize';
+import './index.styl';
+
+let data = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({x: Math.random(), y: Math.random()});
+}
+
+let el = document.getElementById('vis-element');
+let vis = new (AutoResize(InitSize(candela.components.Scatter)))(el, {
+  data,
+  x: 'x',
+  y: 'y'
+});
+console.log(`initial size: ${vis.width}, ${vis.height}`);
+vis.render();
+
+vis.on('resize', () => {
+  console.log(`resize event: ${vis.width}, ${vis.height}`);
+});
+
+let callback = () => {
+  let table = document.getElementById('containing-table');
+  if (table) {
+    table.style.width = (500 + Math.floor(Math.random() * 500)) + 'px';
+    window.setTimeout(callback, 1000);
+  }
+};
+
+callback();