vega · josesaranda · Jun 18, 2019 · Aug 8, 2019 · Aug 8, 2019 · Aug 8, 2019
diff --git a/flights-responsive/app.scss b/flights-responsive/app.scss
@@ -0,0 +1,3 @@
+#app {
+  height: 100vh;
+}
diff --git a/flights-responsive/index.html b/flights-responsive/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="icon" type="image/png" href="../logo/favicon.png" />
+  <title>Explore Flights in Falcon</title>
+
+  <link href="./app.scss" rel="stylesheet">
+</head>
+
+<body>
+  <div id="loading">Loading data. Please wait...</div>
+  <div id="app"></div>
+  <div id="version"></div>
+  <script src="./index.ts"></script>
+</body>
+
+</html>
diff --git a/flights-responsive/index.ts b/flights-responsive/index.ts
@@ -0,0 +1,104 @@
+import { App, ArrowDB, Logger, Views } from "../src";
+import { createElement } from "./utils";
+
+document.getElementById("app")!.innerText = "";
+
+type ViewName =
+  | "DEP_TIME"
+  | "ARR_TIME";
+
+type DimensionName =
+  | "ARR_TIME"
+  | "DEP_TIME";
+
+const views: Views<ViewName, DimensionName> = new Map();
+
+views.set("ARR_TIME", {
+  title: "Arrival Time",
+  type: "1D",
+  el: createElement("arrival", 2),
+  dimension: {
+    name: "ARR_TIME",
+    bins: 24,
+    extent: [0, 24],
+    format: ".1f"
+  }
+});
+views.set("DEP_TIME", {
+  title: "Departure Time",
+  type: "1D",
+  el: createElement("departure", 2),
+  dimension: {
+    name: "DEP_TIME",
+    bins: 24,
+    extent: [0, 24],
+    format: ".1f"
+  }
+});
+
+const url = require("../data/flights-10k.arrow");
+// const url =
+//   "https://media.githubusercontent.com/media/uwdata/flights-arrow/master/flights-10m.arrow";
+const db = new ArrowDB<ViewName, DimensionName>(url);
+
+let logger: Logger<ViewName> | undefined;
+
+//=============
+// timeline vis logger
+
+// logger = new TimelineLogger(createElement("logs"), views);
+
+//=============
+// simple logger as demo
+
+// logger = new SimpleLogger<ViewName>();
+
+const iPad = !!navigator.userAgent.match(/iPad/i);
+
+new App(views, db, {
+  config: {
+    barWidth: 600,
+    fillColor: '#00f0ff',
+    responsive: true,
+    ...(iPad
+      ? {
+        barWidth: 450,
+        histogramWidth: 450,
+        histogramHeight: 120,
+        heatmapWidth: 300,
+        prefetchOn: "mousedown"
+      }
+      : {})
+  },
+  logger: logger,
+  cb: _app => {
+    document.getElementById("loading")!.style.display = "none";
+
+    //=============
+    // benchmark
+
+    // function animationframe() {
+    //   return new Promise(resolve => requestAnimationFrame(resolve));
+    // }
+
+    // async function benchmark() {
+    //   _app.prefetchView("AIR_TIME", false);
+
+    //   console.time("Brushes");
+    //   const step = 25;
+    //   for (let start = 0; start < 500; start += step) {
+    //     for (let end = start + step; end < 500 + step; end += step) {
+    //       _app
+    //         .getVegaView("AIR_TIME")
+    //         .signal("brush", [start, end])
+    //         .run();
+
+    //       await animationframe();
+    //     }
+    //   }
+    //   console.timeEnd("Brushes");
+    // }
+
+    // window.setTimeout(benchmark, 1000);
+  }
+});
diff --git a/flights-responsive/utils.ts b/flights-responsive/utils.ts
@@ -0,0 +1,14 @@
+import { version } from "../src";
+
+document.getElementById(
+  "version"
+)!.innerHTML = `Powered by <a href="https://github.com/uwdata/falcon">Falcon</a> ${version}`;
+
+export function createElement(id: string, numOfElements: number) {
+  const el = document.createElement("div");
+  el.setAttribute("id", id);
+  el.style.height = `calc(100% / ${numOfElements})`;
+  el.style.width = '100%';
+  document.getElementById("app")!.appendChild(el);
+  return el;
+}
diff --git a/package.json b/package.json
@@ -6,13 +6,14 @@
   "module": "build/src/index",
   "types": "build/src/index.d.ts",
   "scripts": {
+    "start:flights-responsive": "parcel flights-responsive/index.html",
     "start:flights": "parcel flights/index.html",
     "start:flights-mapd": "parcel flights-mapd/index.html",
     "start:weather": "parcel weather/index.html",
     "start:gaia-mapd": "parcel gaia-mapd/index.html",
     "start": "yarn start:flights",
     "clean": "rm -rf dist && rm -rf .cache && rm -rf build",
-    "build": "tsc && rollup -c",
+    "build": "tsc --declaration && rollup -c",
     "build:demos": "parcel build --public-url '/falcon/' flights/index.html flights-mapd/index.html weather/index.html --detailed-report",
     "deploy:demos": "yarn clean && yarn build:demos && gh-pages -d dist",
     "test": "jest",
@@ -42,6 +43,7 @@
     "ndarray-linear-interpolate": "^1.0.0",
     "ndarray-ops": "^1.2.2",
     "ndarray-prefix-sum": "^1.0.0",
+    "resize-detector": "^0.2.0",
     "vega": "^5.4.0"
   },
   "devDependencies": {

diff --git a/src/app.ts b/src/app.ts
@@ -29,6 +29,7 @@ import {
   createVerticalBarView
 } from "./views";
 // import imshow from "ndarray-imshow";
+import * as resizeDetector from 'resize-detector';
 
 const interp2d = interpolate.d2;
 
@@ -271,13 +272,23 @@ export class App<V extends string, D extends string> {
     const el = view.el!;
     let vegaView: VgView;
 
+    if (this.config.responsive) {
+      resizeDetector.addListener(el, () => {
+        vegaView.width(el.offsetWidth - 10);
+        vegaView.height(el.offsetHeight - 20);
+        vegaView.runAsync();
+      });
+    }
+
     if (view.type === "0D") {
       vegaView = (this.config.zeroD === "text"
         ? createTextView
         : this.config.zeroD === "hbar"
-        ? createHorizontalBarView
-        : createVerticalBarView)(el, view, this.config);
+          ? createHorizontalBarView
+          : createVerticalBarView)(el, view, this.config);
 
+      vegaView.width(el.offsetWidth - 10);
+      vegaView.height(el.offsetHeight - 20);
       await vegaView.runAsync();
       this.vegaViews.set(name, vegaView);
 
@@ -287,12 +298,14 @@ export class App<V extends string, D extends string> {
       const binConfig = (view.dimension.time ? binTime : bin)(
         view.dimension.bins,
         view.dimension.extent ||
-          (await this.db.getDimensionExtent(view.dimension))
+        (await this.db.getDimensionExtent(view.dimension))
       );
       view.dimension.binConfig = binConfig;
 
       vegaView = createHistogramView(el, view, this.config, !!this.logger);
 
+      vegaView.width(el.offsetWidth - 10);
+      vegaView.height(el.offsetHeight - 20);
       await vegaView.runAsync();
       this.vegaViews.set(name, vegaView);
 
@@ -343,6 +356,8 @@ export class App<V extends string, D extends string> {
 
       vegaView = createHeatmapView(el, view, this.config);
 
+      vegaView.width(el.offsetWidth - 10);
+      vegaView.height(el.offsetHeight - 20);
       await vegaView.runAsync();
       this.vegaViews.set(name, vegaView);
 
@@ -443,9 +458,9 @@ export class App<V extends string, D extends string> {
     } else if (view.type === "2D") {
       return progressive
         ? [
-            numBins(view.dimensions[0].binConfig!),
-            numBins(view.dimensions[1].binConfig!)
-          ]
+          numBins(view.dimensions[0].binConfig!),
+          numBins(view.dimensions[1].binConfig!)
+        ]
         : [this.highRes2D, this.highRes2D];
     }
     throw new Error("0D cannot be an active view.");
@@ -824,9 +839,9 @@ export class App<V extends string, D extends string> {
   ) {
     return this.config.interpolate
       ? (1 - fraction[1]) * hists.get(floor[1]) +
-          fraction[1] * hists.get(ceil[1]) -
-          ((1 - fraction[0]) * hists.get(floor[0]) +
-            fraction[0] * hists.get(ceil[0]))
+      fraction[1] * hists.get(ceil[1]) -
+      ((1 - fraction[0]) * hists.get(floor[0]) +
+        fraction[0] * hists.get(ceil[0]))
       : hists.get(floor[1]) - hists.get(floor[0]);
   }
 
@@ -838,13 +853,13 @@ export class App<V extends string, D extends string> {
   ) {
     return this.config.interpolate
       ? subInterpolated(
-          hists.pick(floor[0], null),
-          hists.pick(ceil[0], null),
-          hists.pick(floor[1], null),
-          hists.pick(ceil[1], null),
-          fraction[0],
-          fraction[1]
-        )
+        hists.pick(floor[0], null),
+        hists.pick(ceil[0], null),
+        hists.pick(floor[1], null),
+        hists.pick(ceil[1], null),
+        fraction[0],
+        fraction[1]
+      )
       : sub(hists.pick(floor[0], null), hists.pick(floor[1], null));
   }
 
@@ -856,13 +871,13 @@ export class App<V extends string, D extends string> {
   ) {
     return this.config.interpolate
       ? subInterpolated(
-          hists.pick(floor[0], null, null),
-          hists.pick(ceil[0], null, null),
-          hists.pick(floor[1], null, null),
-          hists.pick(ceil[1], null, null),
-          fraction[0],
-          fraction[1]
-        )
+        hists.pick(floor[0], null, null),
+        hists.pick(ceil[0], null, null),
+        hists.pick(floor[1], null, null),
+        hists.pick(ceil[1], null, null),
+        fraction[0],
+        fraction[1]
+      )
       : sub(hists.pick(floor[0], null, null), hists.pick(floor[1], null, null));
   }
 
@@ -926,11 +941,11 @@ export class App<V extends string, D extends string> {
         if (view.type === "0D") {
           const value = activeBrushFloat
             ? this.valueFor1D(
-                hists,
-                activeBrushFloor,
-                activeBrushCeil,
-                fraction
-              )
+              hists,
+              activeBrushFloor,
+              activeBrushCeil,
+              fraction
+            )
             : data.noBrush.data[0];
 
           this.update0DView(name, value);
@@ -958,13 +973,13 @@ export class App<V extends string, D extends string> {
   ) {
     return this.config.interpolate
       ? interp2d(hists, float[0][1], float[1][1]) -
-          interp2d(hists, float[0][1], float[1][0]) -
-          interp2d(hists, float[0][0], float[1][1]) +
-          interp2d(hists, float[0][0], float[1][0])
+      interp2d(hists, float[0][1], float[1][0]) -
+      interp2d(hists, float[0][0], float[1][1]) +
+      interp2d(hists, float[0][0], float[1][0])
       : hists.get(floor[0][1], floor[1][1]) -
-          hists.get(floor[0][1], floor[1][0]) -
-          hists.get(floor[0][0], floor[1][1]) +
-          hists.get(floor[0][0], floor[1][0]);
+      hists.get(floor[0][1], floor[1][0]) -
+      hists.get(floor[0][0], floor[1][1]) +
+      hists.get(floor[0][0], floor[1][0]);
   }
 
   private histFor2D(
@@ -975,11 +990,11 @@ export class App<V extends string, D extends string> {
     return this.config.interpolate
       ? summedAreaTableLookupInterpolateSlow(hists, float)
       : summedAreaTableLookup(
-          hists.pick(floor[0][1], floor[1][1], null),
-          hists.pick(floor[0][1], floor[1][0], null),
-          hists.pick(floor[0][0], floor[1][1], null),
-          hists.pick(floor[0][0], floor[1][0], null)
-        );
+        hists.pick(floor[0][1], floor[1][1], null),
+        hists.pick(floor[0][1], floor[1][0], null),
+        hists.pick(floor[0][0], floor[1][1], null),
+        hists.pick(floor[0][0], floor[1][0], null)
+      );
   }
 
   private heatFor2D(
@@ -990,11 +1005,11 @@ export class App<V extends string, D extends string> {
     return this.config.interpolate
       ? summedAreaTableLookupInterpolateSlow2D(hists, float)
       : summedAreaTableLookup(
-          hists.pick(floor[0][1], floor[1][1], null, null),
-          hists.pick(floor[0][1], floor[1][0], null, null),
-          hists.pick(floor[0][0], floor[1][1], null, null),
-          hists.pick(floor[0][0], floor[1][0], null, null)
-        );
+        hists.pick(floor[0][1], floor[1][1], null, null),
+        hists.pick(floor[0][1], floor[1][0], null, null),
+        hists.pick(floor[0][0], floor[1][1], null, null),
+        hists.pick(floor[0][0], floor[1][0], null, null)
+      );
   }
 
   private async update2DActiveView() {

diff --git a/src/config.ts b/src/config.ts
@@ -44,6 +44,8 @@ export const DEFAULT_CONFIG = {
   heatmapHeight: null,
   maxCircleSize: 700,
   yAxisExtent: 50,
+  fillColor: '#4c78a8',
+  responsive: false,
 
   //----------
   // debugging

diff --git a/src/views/hbar.ts b/src/views/hbar.ts
@@ -1,7 +1,7 @@
 import { Config } from "./../config";
 import { EncodeEntry, parse, Spec, View, Warn } from "vega";
 import { View0D } from "../api";
-import { darkerBlue, loadingMarks } from "./histogram";
+import { loadingMarks } from "./histogram";
 
 export function createHorizontalBarView(
   el: Element,
@@ -91,7 +91,7 @@ export function createHorizontalBarView(
         encode: {
           enter: {
             ...barEnterEncodeBase,
-            fill: { value: darkerBlue }
+            fill: { value: config.fillColor }
           },
           update: {
             ...barUpdateEncodeBase,