From dcacdc57150a1c0324d674e4d54b7d526f195cc1 Mon Sep 17 00:00:00 2001 From: Jose Date: Tue, 18 Jun 2019 10:26:26 +0200 Subject: [PATCH 01/11] added --declaration flag to generate d.ts files --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 10429ed1..b4c5b1ac 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "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", From 88d6a97fd607d18cba8bb9fa1b2879de3f5481bf Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 8 Aug 2019 14:49:12 +0200 Subject: [PATCH 02/11] Added resize detector and flights-responsive example --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 7ef76f94..932bf398 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "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", @@ -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": { From eaeaa3bfb850a46c6789cdf6d025ba0a8001de00 Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 8 Aug 2019 14:50:21 +0200 Subject: [PATCH 03/11] Added responsive example --- flights-responsive/app.scss | 3 + flights-responsive/index.html | 21 +++++++ flights-responsive/index.ts | 104 ++++++++++++++++++++++++++++++++++ flights-responsive/utils.ts | 14 +++++ 4 files changed, 142 insertions(+) create mode 100644 flights-responsive/app.scss create mode 100644 flights-responsive/index.html create mode 100644 flights-responsive/index.ts create mode 100644 flights-responsive/utils.ts diff --git a/flights-responsive/app.scss b/flights-responsive/app.scss new file mode 100644 index 00000000..51ba1417 --- /dev/null +++ b/flights-responsive/app.scss @@ -0,0 +1,3 @@ +#app { + height: 100vh; +} diff --git a/flights-responsive/index.html b/flights-responsive/index.html new file mode 100644 index 00000000..2b057e7d --- /dev/null +++ b/flights-responsive/index.html @@ -0,0 +1,21 @@ + + + + + + + + + Explore Flights in Falcon + + + + + +
Loading data. Please wait...
+
+
+ + + + diff --git a/flights-responsive/index.ts b/flights-responsive/index.ts new file mode 100644 index 00000000..ec90f70d --- /dev/null +++ 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 = 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(url); + +let logger: Logger | undefined; + +//============= +// timeline vis logger + +// logger = new TimelineLogger(createElement("logs"), views); + +//============= +// simple logger as demo + +// logger = new SimpleLogger(); + +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 new file mode 100644 index 00000000..dad1438a --- /dev/null +++ b/flights-responsive/utils.ts @@ -0,0 +1,14 @@ +import { version } from "../src"; + +document.getElementById( + "version" +)!.innerHTML = `Powered by Falcon ${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; +} From 5329887400e59c7df7da18b17c001faadbb49359 Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 8 Aug 2019 14:50:44 +0200 Subject: [PATCH 04/11] Added responsive detector --- src/app.ts | 103 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 59 insertions(+), 44 deletions(-) diff --git a/src/app.ts b/src/app.ts index 7c22e0b9..4e9ed896 100644 --- 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 { 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 { 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 { 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 { } 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 { ) { 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 { ) { 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 { ) { 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 { 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 { ) { 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 { 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 { 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() { From 95ec7c1cab8a078dde756cb0927db7765847266e Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 8 Aug 2019 14:51:00 +0200 Subject: [PATCH 05/11] Added new configuration properties --- src/config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/config.ts b/src/config.ts index 4aa3404f..aca4f74e 100644 --- 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 From 23f54d3d75a80a60b32b41a0b40f98b3598d8a58 Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 8 Aug 2019 14:51:37 +0200 Subject: [PATCH 06/11] Remove default color in order to set up with a config variable --- src/views/hbar.ts | 4 +-- src/views/heatmap.ts | 66 +++++++++++++++++++++--------------------- src/views/histogram.ts | 60 ++++++++++++++++++++++---------------- src/views/vbar.ts | 4 +-- 4 files changed, 72 insertions(+), 62 deletions(-) diff --git a/src/views/hbar.ts b/src/views/hbar.ts index e73da6fb..a9a23392 100644 --- 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, diff --git a/src/views/heatmap.ts b/src/views/heatmap.ts index 91d7f22e..6db88346 100644 --- a/src/views/heatmap.ts +++ b/src/views/heatmap.ts @@ -1,7 +1,7 @@ import { parse, Spec, View, Mark, Warn } from "vega"; import { View2D } from "../api"; import { Config } from "../config"; -import { darkerBlue, loadingMarks } from "./histogram"; +import { loadingMarks } from "./histogram"; export function createHeatmapView( el: Element, @@ -46,13 +46,13 @@ export function createHeatmapView( text: { signal: `dataBrush ? 'X: [' + ${ dimensionX.time ? "timeFormat" : "format" - }(dataBrush[0][0], '${dimensionX.format}') + ',' + ${ + }(dataBrush[0][0], '${dimensionX.format}') + ',' + ${ dimensionX.time ? "timeFormat" : "format" - }(dataBrush[0][1], '${dimensionX.format}') + '] Y: [' + ${ + }(dataBrush[0][1], '${dimensionX.format}') + '] Y: [' + ${ dimensionY.time ? "timeFormat" : "format" - }(dataBrush[1][0], '${dimensionY.format}') + ',' + ${ + }(dataBrush[1][0], '${dimensionY.format}') + ',' + ${ dimensionY.time ? "timeFormat" : "format" - }(dataBrush[1][1], '${dimensionY.format}') + ']' : ''` + }(dataBrush[1][1], '${dimensionY.format}') + ']' : ''` } } } @@ -116,7 +116,7 @@ export function createHeatmapView( encode: { enter: { shape: { value: "circle" }, - fill: { value: darkerBlue } + fill: { value: config.fillColor } }, update: { x: { @@ -457,11 +457,11 @@ export function createHeatmapView( dimensionX.time ? "[time(invert('x', brushX[0])), time(invert('x', brushX[1]))]" : "invert('x', brushX)" - }, ${ + }, ${ dimensionY.time ? "[time(invert('y', brushY[0])), time(invert('y', brushY[1]))]" : "invert('y', brushY)" - }] : 0` + }] : 0` }, { name: "binBrush", @@ -525,24 +525,24 @@ export function createHeatmapView( }, config.circleHeatmap ? { - name: "size", - type: "linear", - range: [0, config.maxCircleSize], - domain: { - fields: [ - { data: "base", field: "value" }, - { data: "table", field: "value" } - ] - }, - nice: true - } + name: "size", + type: "linear", + range: [0, config.maxCircleSize], + domain: { + fields: [ + { data: "base", field: "value" }, + { data: "table", field: "value" } + ] + }, + nice: true + } : { - name: "color", - type: "sequential", - range: { scheme: "greenblue" }, - domain: { data: "table", field: "value" }, - nice: true - } + name: "color", + type: "sequential", + range: { scheme: "greenblue" }, + domain: { data: "table", field: "value" }, + nice: true + } ], axes: [ { @@ -569,15 +569,15 @@ export function createHeatmapView( ...(config.circleHeatmap ? { - size: "size", - symbolFillColor: darkerBlue, - symbolStrokeWidth: 0 - } + size: "size", + symbolFillColor: config.fillColor, + symbolStrokeWidth: 0 + } : { - fill: "color", - type: "gradient", - gradientLength: { signal: "height - 16" } - }), + fill: "color", + type: "gradient", + gradientLength: { signal: "height - 16" } + }), encode: { legend: { enter: { diff --git a/src/views/histogram.ts b/src/views/histogram.ts index 9f851d0a..178820c5 100644 --- a/src/views/histogram.ts +++ b/src/views/histogram.ts @@ -15,8 +15,6 @@ import { View1D } from "../api"; import { Config } from "../config"; import { extent, repeatInvisible } from "../util"; -export const darkerBlue = "#4c78a8"; - export function loadingMarks(heightSignal: string, rotate = false) { return [ { @@ -113,10 +111,10 @@ export function createHistogramView( enter: { x: config.toggleUnfiltered ? { - signal: "width", - mult: 0.5, - offset: 5 - } + signal: "width", + mult: 0.5, + offset: 5 + } : { signal: "width" }, y: { value: -8 }, align: config.toggleUnfiltered @@ -146,11 +144,11 @@ export function createHistogramView( text: { signal: `span(brush) ? '[' + ${ dimension.time ? "timeFormat" : "format" - }(brush[reverseBrush ? 1 : 0], '${dimension.format}') + ',' + ${ + }(brush[reverseBrush ? 1 : 0], '${dimension.format}') + ',' + ${ dimension.time ? "timeFormat" : "format" - }(brush[reverseBrush ? 0 : 1], '${ + }(brush[reverseBrush ? 0 : 1], '${ dimension.format - }') + ']' : ''` + }') + ']' : ''` } } } @@ -213,7 +211,7 @@ export function createHistogramView( from: { data: "table" }, encode: { enter: { - fill: { value: darkerBlue } + fill: { value: config.fillColor } }, update: { opacity: { signal: "approximate ? 0.7 : 1" }, @@ -364,14 +362,14 @@ export function createHistogramView( labelOverlap: true, ...(dimension.time ? { - tickCount: dimension.bins - } + tickCount: dimension.bins + } : { - values: { - signal: "sequence(bin.start, bin.stop + bin.step, bin.step)" - }, - tickCount: { signal: "ceil(width/20)" } - }) + values: { + signal: "sequence(bin.start, bin.stop + bin.step, bin.step)" + }, + tickCount: { signal: "ceil(width/20)" } + }) } ] } @@ -415,7 +413,8 @@ export function createHistogramView( ]; const signals: Signal[] = [ - { name: "histHeight", value: config.histogramHeight }, + // { name: "width", value: "", on: [{ events: { source: "window", type: "resize" }, update: "containerSize()[0]" }] }, + { name: "height", value: config.histogramHeight, on: [{ events: { source: "window", type: "resize" }, update: "containerSize()[1]" }] }, { name: "pending", value: false }, { name: "approximate", value: false }, { name: "bin", value: dimension.binConfig }, @@ -529,16 +528,26 @@ export function createHistogramView( value: [dimension.binConfig!.start, dimension.binConfig!.stop], on: config.zoom ? [ - { - events: { signal: "zoom" }, - update: - "keepWithin([zoomAnchor + (domain[0] - zoomAnchor) * zoom, zoomAnchor + (domain[1] - zoomAnchor) * zoom], brush)" - } - ] + { + events: { signal: "zoom" }, + update: + "keepWithin([zoomAnchor + (domain[0] - zoomAnchor) * zoom, zoomAnchor + (domain[1] - zoomAnchor) * zoom], brush)" + } + ] : [] } ]; + if (config.responsive) { + signals.push( + { name: "histHeight", value: config.histogramHeight, update: "height - 20" } + ); + } else { + signals.push( + { name: "histHeight", value: config.histogramHeight } + ); + } + if (config.zoom) { signals.push( ...([ @@ -646,8 +655,9 @@ export function createHistogramView( const vgSpec: Spec = { $schema: "https://vega.github.io/schema/vega/v4.0.json", - autosize: "pad", + autosize: "fit", width: config.histogramWidth, + height: config.histogramHeight, padding: 5, data: data, signals: signals, diff --git a/src/views/vbar.ts b/src/views/vbar.ts index aaf93b6d..80fe65fe 100644 --- a/src/views/vbar.ts +++ b/src/views/vbar.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 createVerticalBarView( el: Element, @@ -85,7 +85,7 @@ export function createVerticalBarView( name: "bar", encode: { enter: { - fill: { value: darkerBlue } + fill: { value: config.fillColor } }, update: { ...barEncodeBase, From 0e863d30484345ebeb23a32c6a68bbf5143d5629 Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 8 Aug 2019 14:53:18 +0200 Subject: [PATCH 07/11] Added flights-responsive to build demos --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 932bf398..2d6f3547 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "start": "yarn start:flights", "clean": "rm -rf dist && rm -rf .cache && rm -rf build", "build": "tsc --declaration && rollup -c", - "build:demos": "parcel build --public-url '/falcon/' flights/index.html flights-mapd/index.html weather/index.html --detailed-report", + "build:demos": "parcel build --public-url '/falcon/' flights/index.html flights-responsive/index.html flights-mapd/index.html weather/index.html --detailed-report", "deploy:demos": "yarn clean && yarn build:demos && gh-pages -d dist", "test": "jest", "prettierbase": "prettier '{src,test}/**/*.{ts,html,scss}'", From 9298a422defb11f8ffb1e9d0a94503be22e9962a Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 8 Aug 2019 15:16:30 +0200 Subject: [PATCH 08/11] fixed error --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2d6f3547..932bf398 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "start": "yarn start:flights", "clean": "rm -rf dist && rm -rf .cache && rm -rf build", "build": "tsc --declaration && rollup -c", - "build:demos": "parcel build --public-url '/falcon/' flights/index.html flights-responsive/index.html flights-mapd/index.html weather/index.html --detailed-report", + "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", "prettierbase": "prettier '{src,test}/**/*.{ts,html,scss}'", From 6f82e9eddb2ca50e054ba0437f4ec37d0e2d31e1 Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 8 Aug 2019 15:28:15 +0200 Subject: [PATCH 09/11] prettier format --- package.json | 2 +- src/app.ts | 90 +++++++++++++++++++++--------------------- src/config.ts | 2 +- src/views/heatmap.ts | 62 ++++++++++++++--------------- src/views/histogram.ts | 63 ++++++++++++++++------------- 5 files changed, 114 insertions(+), 105 deletions(-) diff --git a/package.json b/package.json index 932bf398..9e320795 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "start": "yarn start:flights", "clean": "rm -rf dist && rm -rf .cache && rm -rf build", "build": "tsc --declaration && rollup -c", - "build:demos": "parcel build --public-url '/falcon/' flights/index.html flights-mapd/index.html weather/index.html --detailed-report", + "build:demos": "parcel build --public-url '/falcon/' flights/index.html flights-responsive/index.html flights-mapd/index.html weather/index.html --detailed-report", "deploy:demos": "yarn clean && yarn build:demos && gh-pages -d dist", "test": "jest", "prettierbase": "prettier '{src,test}/**/*.{ts,html,scss}'", diff --git a/src/app.ts b/src/app.ts index 4e9ed896..ef228bf8 100644 --- a/src/app.ts +++ b/src/app.ts @@ -29,7 +29,7 @@ import { createVerticalBarView } from "./views"; // import imshow from "ndarray-imshow"; -import * as resizeDetector from 'resize-detector'; +import * as resizeDetector from "resize-detector"; const interp2d = interpolate.d2; @@ -284,8 +284,8 @@ export class App { 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); @@ -298,7 +298,7 @@ export class App { 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; @@ -458,9 +458,9 @@ export class App { } 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."); @@ -839,9 +839,9 @@ export class App { ) { 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]); } @@ -853,13 +853,13 @@ export class App { ) { 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)); } @@ -871,13 +871,13 @@ export class App { ) { 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)); } @@ -941,11 +941,11 @@ export class App { 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); @@ -973,13 +973,13 @@ export class App { ) { 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( @@ -990,11 +990,11 @@ export class App { 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( @@ -1005,11 +1005,11 @@ export class App { 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 index aca4f74e..fd214f06 100644 --- a/src/config.ts +++ b/src/config.ts @@ -44,7 +44,7 @@ export const DEFAULT_CONFIG = { heatmapHeight: null, maxCircleSize: 700, yAxisExtent: 50, - fillColor: '#4c78a8', + fillColor: "#4c78a8", responsive: false, //---------- diff --git a/src/views/heatmap.ts b/src/views/heatmap.ts index 6db88346..9fa79f13 100644 --- a/src/views/heatmap.ts +++ b/src/views/heatmap.ts @@ -46,13 +46,13 @@ export function createHeatmapView( text: { signal: `dataBrush ? 'X: [' + ${ dimensionX.time ? "timeFormat" : "format" - }(dataBrush[0][0], '${dimensionX.format}') + ',' + ${ + }(dataBrush[0][0], '${dimensionX.format}') + ',' + ${ dimensionX.time ? "timeFormat" : "format" - }(dataBrush[0][1], '${dimensionX.format}') + '] Y: [' + ${ + }(dataBrush[0][1], '${dimensionX.format}') + '] Y: [' + ${ dimensionY.time ? "timeFormat" : "format" - }(dataBrush[1][0], '${dimensionY.format}') + ',' + ${ + }(dataBrush[1][0], '${dimensionY.format}') + ',' + ${ dimensionY.time ? "timeFormat" : "format" - }(dataBrush[1][1], '${dimensionY.format}') + ']' : ''` + }(dataBrush[1][1], '${dimensionY.format}') + ']' : ''` } } } @@ -457,11 +457,11 @@ export function createHeatmapView( dimensionX.time ? "[time(invert('x', brushX[0])), time(invert('x', brushX[1]))]" : "invert('x', brushX)" - }, ${ + }, ${ dimensionY.time ? "[time(invert('y', brushY[0])), time(invert('y', brushY[1]))]" : "invert('y', brushY)" - }] : 0` + }] : 0` }, { name: "binBrush", @@ -525,24 +525,24 @@ export function createHeatmapView( }, config.circleHeatmap ? { - name: "size", - type: "linear", - range: [0, config.maxCircleSize], - domain: { - fields: [ - { data: "base", field: "value" }, - { data: "table", field: "value" } - ] - }, - nice: true - } + name: "size", + type: "linear", + range: [0, config.maxCircleSize], + domain: { + fields: [ + { data: "base", field: "value" }, + { data: "table", field: "value" } + ] + }, + nice: true + } : { - name: "color", - type: "sequential", - range: { scheme: "greenblue" }, - domain: { data: "table", field: "value" }, - nice: true - } + name: "color", + type: "sequential", + range: { scheme: "greenblue" }, + domain: { data: "table", field: "value" }, + nice: true + } ], axes: [ { @@ -569,15 +569,15 @@ export function createHeatmapView( ...(config.circleHeatmap ? { - size: "size", - symbolFillColor: config.fillColor, - symbolStrokeWidth: 0 - } + size: "size", + symbolFillColor: config.fillColor, + symbolStrokeWidth: 0 + } : { - fill: "color", - type: "gradient", - gradientLength: { signal: "height - 16" } - }), + fill: "color", + type: "gradient", + gradientLength: { signal: "height - 16" } + }), encode: { legend: { enter: { diff --git a/src/views/histogram.ts b/src/views/histogram.ts index 178820c5..61f89c24 100644 --- a/src/views/histogram.ts +++ b/src/views/histogram.ts @@ -111,10 +111,10 @@ export function createHistogramView( enter: { x: config.toggleUnfiltered ? { - signal: "width", - mult: 0.5, - offset: 5 - } + signal: "width", + mult: 0.5, + offset: 5 + } : { signal: "width" }, y: { value: -8 }, align: config.toggleUnfiltered @@ -144,11 +144,11 @@ export function createHistogramView( text: { signal: `span(brush) ? '[' + ${ dimension.time ? "timeFormat" : "format" - }(brush[reverseBrush ? 1 : 0], '${dimension.format}') + ',' + ${ + }(brush[reverseBrush ? 1 : 0], '${dimension.format}') + ',' + ${ dimension.time ? "timeFormat" : "format" - }(brush[reverseBrush ? 0 : 1], '${ + }(brush[reverseBrush ? 0 : 1], '${ dimension.format - }') + ']' : ''` + }') + ']' : ''` } } } @@ -362,14 +362,14 @@ export function createHistogramView( labelOverlap: true, ...(dimension.time ? { - tickCount: dimension.bins - } + tickCount: dimension.bins + } : { - values: { - signal: "sequence(bin.start, bin.stop + bin.step, bin.step)" - }, - tickCount: { signal: "ceil(width/20)" } - }) + values: { + signal: "sequence(bin.start, bin.stop + bin.step, bin.step)" + }, + tickCount: { signal: "ceil(width/20)" } + }) } ] } @@ -414,7 +414,16 @@ export function createHistogramView( const signals: Signal[] = [ // { name: "width", value: "", on: [{ events: { source: "window", type: "resize" }, update: "containerSize()[0]" }] }, - { name: "height", value: config.histogramHeight, on: [{ events: { source: "window", type: "resize" }, update: "containerSize()[1]" }] }, + { + name: "height", + value: config.histogramHeight, + on: [ + { + events: { source: "window", type: "resize" }, + update: "containerSize()[1]" + } + ] + }, { name: "pending", value: false }, { name: "approximate", value: false }, { name: "bin", value: dimension.binConfig }, @@ -528,24 +537,24 @@ export function createHistogramView( value: [dimension.binConfig!.start, dimension.binConfig!.stop], on: config.zoom ? [ - { - events: { signal: "zoom" }, - update: - "keepWithin([zoomAnchor + (domain[0] - zoomAnchor) * zoom, zoomAnchor + (domain[1] - zoomAnchor) * zoom], brush)" - } - ] + { + events: { signal: "zoom" }, + update: + "keepWithin([zoomAnchor + (domain[0] - zoomAnchor) * zoom, zoomAnchor + (domain[1] - zoomAnchor) * zoom], brush)" + } + ] : [] } ]; if (config.responsive) { - signals.push( - { name: "histHeight", value: config.histogramHeight, update: "height - 20" } - ); + signals.push({ + name: "histHeight", + value: config.histogramHeight, + update: "height - 20" + }); } else { - signals.push( - { name: "histHeight", value: config.histogramHeight } - ); + signals.push({ name: "histHeight", value: config.histogramHeight }); } if (config.zoom) { From c8ea26219fb4295e7ee7c38ce3358efdf69192dc Mon Sep 17 00:00:00 2001 From: Jose Date: Fri, 9 Aug 2019 08:31:41 +0200 Subject: [PATCH 10/11] added new readme --- README.md | 6 ++++-- package.json | 14 +++++++------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ee4daf12..7f93ea16 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,11 @@

-# Falcon: Interactive Visual Analysis for Big Data +### Shapelets falcon fork -[![npm version](https://img.shields.io/npm/v/falcon-vis.svg)](https://www.npmjs.com/package/falcon-vis) [![Build Status](https://travis-ci.com/uwdata/falcon.svg?branch=master)](https://travis-ci.com/uwdata/falcon) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=rounded)](https://github.com/prettier/prettier) [![Greenkeeper badge](https://badges.greenkeeper.io/uwdata/falcon.svg)](https://greenkeeper.io/) +This fork allows you to use falcon responsive and change fill color of the bar. Thanks to Dominik Moritz for his support from the original falcon repository. + +[![npm version](https://img.shields.io/npm/v/shapelets-falcon.svg)](https://www.npmjs.com/package/shapelets-falcon) Crossfilter millions of records without latencies. This project is work in progress and not documented yet. Please get in touch if you have questions. diff --git a/package.json b/package.json index 9e320795..56e1e0a6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "falcon-vis", - "version": "0.14.3", - "description": "Big data crossfilter", + "name": "shapelets-falcon", + "version": "0.14.4", + "description": "Big data crossfilter fork from falcon", "main": "build/falcon.js", "module": "build/src/index", "types": "build/src/index.d.ts", @@ -24,14 +24,14 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/uwdata/falcon.git" + "url": "git+https://github.com/shapelets/falcon" }, - "author": "Dominik Moritz", + "author": "José Sánchez Aranda", "license": "BSD-3-Clause", "bugs": { - "url": "https://github.com/uwdata/falcon/issues" + "url": "https://github.com/shapelets/falcon/issues" }, - "homepage": "https://github.com/uwdata/falcon#readme", + "homepage": "https://github.com/shapelets/falcon#readme", "dependencies": { "@apache-arrow/es2015-esm": "^0.14.1", "@mapd/connector": "^4.7.2", From 5b0a5e082c81e37f33f9a19ac54122732ad4420c Mon Sep 17 00:00:00 2001 From: Jose Date: Fri, 9 Aug 2019 08:32:25 +0200 Subject: [PATCH 11/11] fixed version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 56e1e0a6..c66a34e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "shapelets-falcon", - "version": "0.14.4", + "version": "0.14.5", "description": "Big data crossfilter fork from falcon", "main": "build/falcon.js", "module": "build/src/index",