Merge pull request #54 from palantir/dev

Merge version 0.1.0 into master - the demo day release
palantir · Feb 4, 2014 · 6851aba · 6851aba
2 parents ab292cf + 86dfac7
commit 6851aba
Show file tree

Hide file tree

Showing 30 changed files with 1,233 additions and 105 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,5 @@ plottable.js
 plottable.js.map
 tests.js
 tests.js.map
+examples/*.js
+examples/*.js.map
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -23,7 +23,8 @@ module.exports = function(grunt) {
         },
         files: [
           { src: ["src/*.ts"], dest: "plottable.js" },
-          { src: ["test/*.ts"], dest: "test/tests.js" }
+          { src: ["test/*.ts"], dest: "test/tests.js" },
+          { src: ["examples/*.ts"], dest: "examples/examples.js"}
         ]
       }
     },
@@ -35,7 +36,8 @@ module.exports = function(grunt) {
         "files": [
           "Gruntfile.js",
           "src/*.ts",
-          "test/*.ts"
+          "test/*.ts",
+          "examples/*.ts"
         ]
       }
     }

diff --git a/examples/demo-day-crazy.css b/examples/demo-day-crazy.css
@@ -0,0 +1,34 @@
+.demo-table-title text {
+  text-decoration: line-through;
+  fill: yellow;
+  font-family: Times;
+}
+
+.scatterplot-title text {
+  font-size: 24pt;
+  fill: magenta;
+  font-family: monospace;
+}
+
+.histogram-title text {
+  font-size: 24pt;
+  fill: cyan;
+  font-family: cursive;
+}
+
+rect {
+  fill: green;
+}
+
+circle {
+  fill: orange;
+}
+
+.selected-point {
+  fill: black;
+}
+
+.drag-box {
+  fill: red;
+  opacity: 0.5;
+}
diff --git a/examples/demo-day-crazy.html b/examples/demo-day-crazy.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<head>
+  <link href="../style.css" type="text/css" rel="stylesheet" />
+  <link href="demo-day-crazy.css" type="text/css" rel="stylesheet" />
+</head>
+<body>
+<br><hr><br>
+<svg id="table" width="800px" height="600px"></svg>
+<br><hr><br>
+
+
+<script type="text/javascript"> window.demoName = "demo-day"; //HACK HACK </script>
+<script src="../Lib/chai/chai.js"></script>
+<script src="../Lib/lodash.js"></script>
+<script src="../Lib/d3.ascii.js"></script>
+<script src="../plottable.js"></script>
+<script src="examples.js"></script>
+
+</body>
diff --git a/examples/demo-day.css b/examples/demo-day.css
@@ -0,0 +1,14 @@
+.demo-table-title text {
+  text-decoration: underline;
+}
+
+.scatterplot-title text {
+  font-size: 24pt;
+}
+
+.histogram-title text {
+  font-size: 24pt;
+
+.axis-label text {
+  font-size: 12pt;
+}
diff --git a/examples/demo-day.html b/examples/demo-day.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<head>
+  <link href="../style.css" type="text/css" rel="stylesheet" />
+  <link href="demo-day.css" type="text/css" rel="stylesheet" />
+</head>
+<body>
+<br><hr><br>
+<svg id="table" width="800px" height="600px"></svg>
+<br><hr><br>
+
+
+<script type="text/javascript"> window.demoName = "demo-day"; //HACK HACK </script>
+<script src="../Lib/chai/chai.js"></script>
+<script src="../Lib/lodash.js"></script>
+<script src="../Lib/d3.ascii.js"></script>
+<script src="../plottable.js"></script>
+<script src="examples.js"></script>
+
+</body>
diff --git a/src/demo.ts → examples/demo.ts b/src/demo.ts → examples/demo.ts
@@ -1,22 +1,17 @@
 ///<reference path="../lib/d3.d.ts" />
 ///<reference path="../lib/chai/chai.d.ts" />
+///<reference path="../src/interfaces.d.ts" />
+
+///<reference path="../src/table.ts" />
+///<reference path="../src/renderer.ts" />
+///<reference path="../src/interaction.ts" />
+///<reference path="../src/labelComponent.ts" />
+///<reference path="../src/axis.ts" />
+///<reference path="exampleUtil.ts" />
 
-///<reference path="table.ts" />
-///<reference path="renderer.ts" />
-///<reference path="interaction.ts" />
-
-function makeRandomData(numPoints, scaleFactor=1): IDataset {
-  var data = [];
-  for (var i = 0; i < numPoints; i++) {
-    var x = Math.random();
-    var r = {x: x, y: (x + x * Math.random()) * scaleFactor}
-    data.push(r);
-  }
-  data = _.sortBy(data, (d) => d.x);
-  return {"data": data, "seriesName": "random-data"};
-}
 
 
+if ((<any> window).demoName == "demo1") {
 // make a regular table with 1 axis on bottom, 1 axis on left, renderer in center
 
 var svg1 = d3.select("#svg1");
@@ -31,7 +26,7 @@ var basicTable = new Table([[renderArea, yAxis], [xAxis, null]])
 basicTable.anchor(svg1);
 basicTable.computeLayout();
 basicTable.render();
-new DragZoomInteraction(renderArea.hitBox, [xAxis, yAxis, renderArea], xScale, yScale);
+new PanZoomInteraction(renderArea, [xAxis, yAxis, renderArea], xScale, yScale);
 
 
 
@@ -55,6 +50,8 @@ var t3 = makeBasicChartTable();
 var t4 = makeBasicChartTable();
 
 var metaTable = new Table([[t1, t2], [t3, t4]]);
+metaTable.rowPadding = 5;
+metaTable.colPadding = 5;
 metaTable.anchor(svg2);
 svg2.attr("width", 800).attr("height", 600);
 metaTable.computeLayout();
@@ -72,7 +69,6 @@ function makeMultiAxisChart() {
   var data = makeRandomData(30);
   var renderArea = new LineRenderer(data, xScale, yScale);
   var rootTable = new Table([[renderArea, rightAxesTable], [xAxis, null]])
-  console.log(rootTable);
   return rootTable;
 
 }
@@ -99,20 +95,22 @@ function makeSparklineMultichart() {
   var row1: Component[] = [leftAxesTable, renderer1, rightAxesTable];
   var yScale2 = new LinearScale();
   var leftAxis = new YAxis(yScale2, "left");
-  var data2 = makeRandomData(100, 100000);
+  leftAxis.xAlignment = "RIGHT";
+  var data2 = makeRandomData(1000, 100000);
   var renderer2 = new CircleRenderer(data2, xScale1, yScale2);
+  var toggleClass = function() {return !d3.select(this).classed("selected-point")};
+  var cb = (s) => s.classed("selected-point", toggleClass);
+  var areaInteraction = new AreaInteraction(renderer2, null, cb);
   var row2: Component[] = [leftAxis, renderer2, null];
   var bottomAxis = new XAxis(xScale1, "bottom");
   var row3: Component[] = [null, bottomAxis, null];
+  var xScaleSpark = new LinearScale();
   var yScaleSpark = new LinearScale();
-  var sparkline = new LineRenderer(data2, xScale1, yScaleSpark);
+  var sparkline = new LineRenderer(data2, xScaleSpark, yScaleSpark);
   sparkline.rowWeight(0.25);
   var row4 = [null, sparkline, null];
+  var zoomInteraction = new BrushZoomInteraction(sparkline, xScale1, yScale2);
   var multiChart = new Table([row1, row2, row3, row4]);
-  // multiChart.xMargin = 0;
-  // multiChart.yMargin = 0;
-  // multiChart.xPadding = 0;
-  // multiChart.yPadding = 0;
   return multiChart;
 }
 
@@ -134,10 +132,47 @@ multichart.render();
 //   var bottomAxes = iterate(bottom, () => new xAxis(yScale, "bottom"))
 // }
 
-function iterate(n: number, fn: () => any) {
-  var out = [];
-  for (var i=0; i<n; i++) {
-    out.push(fn())
-  }
-  return out;
-}
+var svg5 = d3.select("#svg5");
+svg5.attr("width", 500).attr("height", 500);
+var xScale = new LinearScale();
+var yScale = new LinearScale();
+var xAxis = new XAxis(xScale, "bottom");
+
+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);
+var basicTable = new Table([[yAxisLeftTable, renderArea, yAxisRightTable], [null, xAxis, null]]);
+var title = new TitleLabel("bpIqd");
+var outerTable = new Table([[title], [basicTable]]);
+outerTable.anchor(svg5);
+outerTable.computeLayout();
+outerTable.render();
+
+
+// bar renderer test
+var svg6 = d3.select("#svg6");
+svg6.attr("width", 500).attr("height", 500);
+var xScale = new LinearScale();
+var yScale = new LinearScale();
+var xAxis = new XAxis(xScale, "bottom");
+var yAxis = new YAxis(yScale, "left");
+
+var bucketData = makeRandomBucketData(10, 10, 80);
+
+var replacementData = makeRandomBucketData(5, 20, 80);
+
+var BarRenderArea = new BarRenderer(bucketData, xScale, yScale);
+var basicTable = new Table([[yAxis, BarRenderArea], [null, xAxis]])
+basicTable.anchor(svg6);
+basicTable.computeLayout();
+basicTable.render();
+} // hackhack
diff --git a/examples/demo1.html b/examples/demo1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<head>
+  <link href="../style.css" type="text/css" rel="stylesheet" />
+</head>
+<body>
+
+<h1> Bar Renderer </h1>
+<svg id="svg6"></svg><br><hr><br>
+
+
+<h1> Basic TSC </h1>
+<svg id="svg1"></svg><br><hr><br>
+<h1> Chartbag of timeseriescharts </h1>
+<svg id="svg2"></svg><br><hr><br>
+<h1> TSC with 2 axes </h1>
+<svg id="svg3"></svg><br><hr><br>
+<h1> TSC with subplots, varying # of axes, and sparkline </h1>
+<svg id="svg4"></svg><br><hr><br>
+<svg id="svg5"></svg><br><hr><br>
+
+
+<script src="../Lib/d3.ascii.js"></script>
+<script src="../Lib/lodash.js"></script>
+<script src="../Lib/chai/chai.js"></script>
+<script type="text/javascript"> window.demoName = "demo1"; //HACK HACK </script>
+<script src="../plottable.js"></script>
+<script src="examples.js"></script>
+
+</body>