Merge pull request #118 from palantir/dev

Merge 0.1.4 into master

Author: Daniel W Mane

README.md

@@ -1,10 +1,16 @@
 Plottable.js
 ============
 
-Plottable.js is a library for easily creating beautiful, flexible, interactive, and performant charts for the web. It is built on top of d3 and provides a higher level of abstraction: the developer does not need to worry about d3's low-level components and can easily access many chart renderers, interaction patterns, and a flexible layout engine. Plottable.js is being developed by Palantir Technologies, and is written in TypeScript.
+Plottable.js is a library for easily creating flexible, interactive, and performant charts for the web. It is built on top of d3 and provides a higher level of abstraction.
 
-Plottable.js is currently in early alpha and does not yet have a stable API.
+Plottable consists of three main pieces:
+- A grid-based layout engine which handles positioning, sizing, and alignment of components
+- "Components", such as LineRenderer or Axis, which process data and can be connected to d3 Scales
+- "Interactions", such as PanZoomInteraction or AreaInteraction, which easily allow for custom logic to be bound to common interaction patterns
 
+By virtue of being higher-level than D3, it is often much easier to create charts in Plottable.js, with less of a learning curve. Stylistic changes that would be a pain in D3 (e.g. changing font sizes) are trivially easy in Plottable.js (change the CSS and everything updates). On the other hand, if you want the full power and expressivity of D3, you can just write a new Component plugin in D3, and still get all of the benefits of Plottable's layout engine and other components.
+
+Plottable.js is being developed by Palantir Technologies. It's developed in Typescript, and released in Javascript. Plottable is currently in alpha and the API is not yet stable.
 
 =========
 Setup Instructions:

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "plottable.js",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "dependencies": {
     "d3": "3.4.1"
   },

examples/demo.ts

@@ -53,7 +53,6 @@ module Demo {
     var yScale = new LinearScale();
     var rightAxes = [new YAxis(yScale, "right"), new YAxis(yScale, "right")];
     var rightAxesTable = new Table([rightAxes]);
-    rightAxesTable.colWeight(0);
     var xAxis = new XAxis(xScale, "bottom");
     var data = makeRandomData(30);
     var renderArea = new LineRenderer(data, xScale, yScale);
@@ -75,10 +74,8 @@ module Demo {
     var yScale1 = new LinearScale();
     var leftAxes = [new YAxis(yScale1, "left"), new YAxis(yScale1, "left")];
     var leftAxesTable = new Table([leftAxes]);
-    leftAxesTable.colWeight(0);
     var rightAxes = [new YAxis(yScale1, "right"), new YAxis(yScale1, "right")];
     var rightAxesTable = new Table([rightAxes]);
-    rightAxesTable.colWeight(0);
     var data1 = makeRandomData(30, .0005);
     var renderer1 = new LineRenderer(data1, xScale1, yScale1);
     var row1: Component[] = [leftAxesTable, renderer1, rightAxesTable];
@@ -131,12 +128,10 @@ module Demo {
   var yAxisRight = new YAxis(yScale, "right");
   var yAxisRightLabel = new AxisLabel("bp y right qd", "vertical-right");
   var yAxisRightTable = new Table([[yAxisRight, yAxisRightLabel]]);
-  yAxisRightTable.colWeight(0);
 
   var yAxisLeft = new YAxis(yScale, "left");
   var yAxisLeftLabel = new AxisLabel("bp y left qd", "vertical-left");
   var yAxisLeftTable = new Table([[yAxisLeftLabel, yAxisLeft]]);
-  yAxisLeftTable.colWeight(0);
 
   var data = makeRandomData(30);
   var renderArea = new LineRenderer(data, xScale, yScale);

examples/demoDay.ts

@@ -8,10 +8,8 @@ module DemoDay {
     s.yScale = new LinearScale();
     s.leftAxis = new YAxis(s.yScale, "left");
     var leftAxisTable = new Table([[new AxisLabel("y", "vertical-left"), s.leftAxis]]);
-    leftAxisTable.colWeight(0);
     s.xAxis = new XAxis(s.xScale, "bottom");
     var xAxisTable = new Table([[s.xAxis], [new AxisLabel("x")]]);
-    xAxisTable.rowWeight(0);
 
     s.renderer = new CircleRenderer(data, s.xScale, s.yScale, null, null, 1.5);
     s.xSpark = new LinearScale();
@@ -37,9 +35,7 @@ module DemoDay {
     h.xAxis1 = new XAxis(h.xScale1, "bottom");
     h.yAxis1 = new YAxis(h.yScale1, "right");
     var labelX1Table = new Table([[h.xAxis1], [new AxisLabel("X values")]]);
-    labelX1Table.rowWeight(0);
     var labelY1Table = new Table([[h.yAxis1, new AxisLabel("Counts", "vertical-right")]]);
-    labelY1Table.colWeight(0);
     var table1 = new Table([[h.renderer1, labelY1Table], [labelX1Table, null]]);
 
     var yExtent = d3.extent(data, (d) => d.y);
@@ -52,9 +48,7 @@ module DemoDay {
     h.xAxis2 = new XAxis(h.xScale2, "bottom");
     h.yAxis2 = new YAxis(h.yScale2, "right");
     var labelX2Table = new Table([[h.xAxis2], [new AxisLabel("Y values")]]);
-    labelX2Table.rowWeight(0);
     var labelY2Table = new Table([[h.yAxis2, new AxisLabel("Counts", "vertical-right")]]);
-    labelY2Table.colWeight(0);
     var table2 = new Table([[h.renderer2, labelY2Table], [labelX2Table, null]]);
 
     h.table = new Table([[table1], [table2]]);

examples/simpleChart/demo.css

@@ -0,0 +1,5 @@
+
+.demo-title { font-size: 24pt; }
+.quadratic-series circle {
+    fill: red;
+}

examples/simpleChart/demo.details

@@ -0,0 +1,7 @@
+---
+name: Plottable.js Simple Chart Demo
+description: Creates a chart with an x-axis, y-axis, and circle renderer
+authors:
+  - Justin Lan
+normalize_css: no
+...

examples/simpleChart/demo.html

@@ -0,0 +1,7 @@
+<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://palantir.github.io/plottable/plottable.js"></script>
+<link rel="stylesheet" type="text/css" href="http://palantir.github.io/plottable/style.css">
+
+<div class="demo-title">Simple Chart</div>
+<br>
+<svg id="simple-chart"></svg>

examples/simpleChart/demo.js

@@ -0,0 +1,22 @@
+window.onload = function() {
+  function makeQuadraticSeries(numPoints) {
+      var data = [];
+      for (var i = 0; i< numPoints; i++) {
+          data.push({x: i, y: i*i});
+      }
+      return {data: data, seriesName: "quadratic-series"};
+  }
+
+  var dataseries = makeQuadraticSeries(20);
+
+  var svg = d3.select("#simple-chart");
+  svg.attr("width", 480).attr("height", 320);
+  var xScale = new LinearScale();
+  var yScale = new LinearScale();
+  var xAxis = new XAxis(xScale, "bottom");
+  var yAxis = new YAxis(yScale, "left");
+  var renderAreaD1 = new CircleRenderer(dataseries, xScale, yScale);
+  var basicTable = new Table([[yAxis, renderAreaD1],
+                              [null, xAxis]]);
+  basicTable.anchor(svg).computeLayout().render();
+};

license_header.txt

@@ -1,5 +1,5 @@
 /*!
-Plottable v0.1.3 (https://github.com/palantir/plottable)
+Plottable v0.1.4 (https://github.com/palantir/plottable)
 Copyright 2014 Palantir Technologies
 Licensed under MIT (https://github.com/palantir/plottable/blob/master/LICENSE)
 */

package.json

@@ -1,7 +1,7 @@
 {
   "name": "plottable.js",
-  "version": "0.1.3",
-  "description": "A library for easily creating charts within a grid layout.",
+  "version": "0.1.4",
+  "description": "Build flexible, performant, interactive charts using D3",
   "repository": {
     "type": "git",
     "url": "https://github.com/palantir/plottable.git"

src/component.ts

@@ -84,11 +84,11 @@ class Component {
     }
     if (this.rowWeight() === 0 && this.rowMinimum() !== 0) {
       yOffset += (availableHeight - this.rowMinimum()) * this.yAlignProportion;
-      availableHeight = this.rowMinimum();
+      availableHeight = availableHeight > this.rowMinimum() ? this.rowMinimum() : availableHeight;
     }
     if (this.colWeight() === 0 && this.colMinimum() !== 0) {
       xOffset += (availableWidth - this.colMinimum()) * this.xAlignProportion;
-      availableWidth = this.colMinimum();
+      availableWidth = availableWidth > this.colMinimum() ? this.colMinimum() : availableWidth;
     }
     this.xOffset = xOffset;
     this.yOffset = yOffset;

src/table.ts

@@ -18,7 +18,10 @@ class Table extends Component {
   private rowWeightSum: number;
   private colWeightSum: number;
 
-  constructor(rows: Component[][], rowWeightVal=1, colWeightVal=1) {
+  private guessRowWeight = true;
+  private guessColWeight = true;
+
+  constructor(rows: Component[][]) {
     super();
     this.classed(Table.CSS_CLASS, true);
     // Clean out any null components and replace them with base Components
@@ -28,7 +31,6 @@ class Table extends Component {
     this.cols = d3.transpose(rows);
     this.nRows = this.rows.length;
     this.nCols = this.cols.length;
-    super.rowWeight(rowWeightVal).colWeight(colWeightVal);
   }
 
   public anchor(element: D3.Selection) {
@@ -49,7 +51,7 @@ class Table extends Component {
     var freeWidth = this.availableWidth - this.colMinimum();
     var freeHeight = this.availableHeight - this.rowMinimum();
     if (freeWidth < 0 || freeHeight < 0) {
-      throw new Error("InsufficientSpaceError");
+      throw new Error("Insufficient Space");
     }
 
     // distribute remaining height to rows
@@ -101,6 +103,33 @@ class Table extends Component {
   }
 
   /* Getters */
+
+  public rowWeight(): number;
+  public rowWeight(newVal: number): Table;
+  public rowWeight(newVal?: number): any {
+    if (newVal != null || !this.guessRowWeight) {
+      this.guessRowWeight = false;
+      return super.rowWeight(newVal);
+    } else {
+      var componentWeights: number[][] = this.rows.map((r) => r.map((c) => c.rowWeight()));
+      var biggestWeight = d3.max(componentWeights.map((ws) => d3.max(ws)));
+      return biggestWeight > 0 ? 1 : 0;
+    }
+  }
+
+  public colWeight(): number;
+  public colWeight(newVal: number): Table;
+  public colWeight(newVal?: number): any {
+    if (newVal != null || !this.guessColWeight) {
+      this.guessColWeight = false;
+      return super.colWeight(newVal);
+    } else {
+      var componentWeights: number[][] = this.rows.map((r) => r.map((c) => c.colWeight()));
+      var biggestWeight = d3.max(componentWeights.map((ws) => d3.max(ws)));
+      return biggestWeight > 0 ? 1 : 0;
+    }
+  }
+
   public rowMinimum(): number;
   public rowMinimum(newVal: number): Component;
   public rowMinimum(newVal?: number): any {

test/tableTests.ts

@@ -5,13 +5,12 @@ var assert = chai.assert;
 function generateBasicTable(nRows, nCols) {
   // makes a table with exactly nRows * nCols children in a regular grid, with each
   // child being a basic component
-  var emptyDataset: IDataset = {data: [], seriesName: "blah"};
   var rows: Component[][] = [];
   var components: Component[] = [];
   for(var i=0; i<nRows; i++) {
     var cols = [];
     for(var j=0; j<nCols; j++) {
-      var r = new Component();
+      var r = new Component().rowWeight(1).colWeight(1);
       cols.push(r);
       components.push(r);
     }
@@ -34,13 +33,12 @@ describe("Tables", () => {
     assert.equal(component.constructor.name, "Component", "the component is a base Component");
   });
 
-  it("tables with insufficient space throw InsufficientSpaceError", () => {
+  it("tables with insufficient space throw Insufficient Space", () => {
     var svg = generateSVG(200, 200);
-    var c = new Component();
-    c.rowMinimum(300).colMinimum(300);
+    var c = new Component().rowMinimum(300).colMinimum(300);
     var t = new Table([[c]]);
     t.anchor(svg);
-    assert.throws(() => t.computeLayout(), Error, "InsufficientSpaceError");
+    assert.throws(() => t.computeLayout(), Error, "Insufficient Space");
     svg.remove();
   });
 
@@ -133,4 +131,21 @@ describe("Tables", () => {
     assert.throws(() => table.rowMinimum(3), Error, "cannot be directly set");
     assert.throws(() => table.colMinimum(3), Error, "cannot be directly set");
   });
+
+  it("tables guess weights intelligently", () => {
+    var c1 = new Component().rowWeight(0).colWeight(0);
+    var c2 = new Component().rowWeight(0).colWeight(0);
+    var table = new Table([[c1], [c2]]);
+    assert.equal(table.rowWeight(), 0, "the first table guessed 0 for rowWeight");
+    assert.equal(table.colWeight(), 0, "the first table guessed 0 for rowWeight");
+
+    c1.rowWeight(0);
+    c2.rowWeight(3);
+
+    assert.equal(table.rowWeight(), 1, "the table now guesses 1 for rowWeight");
+    assert.equal(table.colWeight(), 0, "the table still guesses 0 for colWeight");
+
+    assert.equal(table.rowWeight(2), table, "rowWeight returned the table");
+    assert.equal(table.rowWeight(), 2, "the rowWeight was overridden explicitly");
+  });
 });