diff --git a/.travis.yml b/.travis.yml index de1bb1e0..162c517b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -15,4 +15,4 @@ notifications: slack: secure: WK6Zk2lSqGLB6Hf4J2MOMjPWtDjQwXFJoSapX7mZfRq8ya2wISbmtnjO2pg9g1yKKM9CYgVzJ63NIBk2h9Jhv8EwrNrRGcRyxihTImhQJkCKMjIiYlTD4mR2FAIL7OAyeZgIvdYp7Js4pHUO9T9mRRop04rRq04KOBxywCshUViUcw2r4hQNELB3T/TlZ7hhIXZnosZ4QKPq2vQ0F+K8aZuWca+Zvq5GcRaKdoU+OjOy3ZpLjT9US7JuOB5XtDtHbWgS22QQ0DFg0fBhf2KJrcZ6oyH7gC8ZiRvH2MVyqjUORKw+8Pk0rtjDPeRypspR++mLZsOIA5qzXPEZpsNyitvwLCd6o+YVT0VoONiIXWxKPoCIwE1o0TVdG4ClD/Td8qOVmj4uvM0Jh8U7xNsDAq0xy/Eosr+gWXMVrRGPrWUs87BtL66mtY54MbKyJrLVtkTn4TS5Q5FgHrNzaRsY2qo+IRg1noV8MaVsaRpwTgu2vTeqEdkm2bwWGXPVmRPB9Jm5QM/R5S7flF0IDWrN+m8ZM8GuJS3EFxYuRstPgT8u3dWPYna2vFcnAlW/WTl9LTDJWlBgvj62Hrd9vudKWfO6ZCintqpJfPvLjpvw1/EYpeylVseG/4nIY3CqCx/e2kQWyWu8zwlDSdchGdAcli6PG+jNFUPtivtGSt8rEGI= after_success: - - sh ./scripts/publish-docs.sh + - sh ./scripts/publish-docs-and-examples.sh diff --git a/example/README.md b/example/README.md index 148a542e..9fc2eddd 100644 --- a/example/README.md +++ b/example/README.md @@ -1,23 +1,36 @@ -# mapd-frontend-boilterplate -Boilerplate code for mapd frontend functionality +# Charting Examples -## Installation - -Install the example-specific npm packages. +To run the examples locally, go to the root directory and run: ```bash -cd example/ -npm install -``` - -## Running the example - -Run the example from the top-level directory. - -```bash -cd ../ -npm install npm start ``` -When the browser opens, click the **example** directory to view the examples. +## Running Integration Tests + +The integrations tests for the charting examples are written in [Elixir](http://elixir-lang.org/) using the [Hound](https://github.com/HashNuke/hound) library. + +To run the tests, first install the selenium server by running from the root directory: + +```bash +npm run selenium:install +``` + +Then start the selenium server: + +```bash +npm run selenium:start + +``` + +Next, go into the `example/test` directory and run: + +```bash +mix deps.get +``` + +Once that is done, you can run the tests with: + +```bash +mix test +``` diff --git a/example/example5-deprecated.html b/example/example5.html similarity index 83% rename from example/example5-deprecated.html rename to example/example5.html index 05ed1ebe..7746407c 100644 --- a/example/example5-deprecated.html +++ b/example/example5.html @@ -49,7 +49,7 @@
-
Point Map with Lasso Tool
+
Pointmap with Selection Tool
@@ -69,7 +69,7 @@ function createCharts(crossFilter, con, tableName) { var w = document.documentElement.clientWidth - 30; - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 200; + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 100; var countGroup = crossFilter.groupAll(); var dataCount = dc.countWidget(".data-count") .dimension(crossFilter) @@ -86,34 +86,38 @@ var rScale = d3.scale.linear().domain([0,5000]).range([2,12]); mapLangColors(40); - var pointMapChart = dc.bubbleRasterChart(parent, true) + var pointMapChart = dc.rasterChart(parent, true, null, mapboxgl) .con(con) - .height(h/1.5) + .height(h) .width(w) - .dimension(pointMapDim) - .group(pointMapDim) - .tableName(tableName) .mapUpdateInterval(750) - .cap(500000) - .sampling(true) - .dynamicR(d3.scale.sqrt().domain([20000,0]).range([1.0,7.0]).clamp(true)) - .othersGrouper(false) - .xDim(xDim) - .yDim(yDim) - .colorBy({type: 'STR', value: 'lang', domain: langDomain}) - .r(rScale) - .defaultColor("#80DEEA") - .colors(d3.scale.ordinal().domain(langDomain).range(langColors)) .mapStyle('json/dark-v8.json') .popupSearchRadius(2) - .popupColumns(['tweet_text', 'sender_name', 'tweet_time', 'lang', 'origin', 'followers']) - pointMapChart.init().then((chart) => { + var pointLayer = dc.rasterLayer("points") + .dimension(pointMapDim) + .group(pointMapDim) + .cap(500000) + .sampling(true) + .dynamicSize(d3.scale.sqrt().domain([20000,0]).range([1.0,7.0]).clamp(true)) + .xDim(xDim) + .yDim(yDim) + .sizeScale(rScale) + .xAttr("x") + .yAttr("y") + .sizeAttr("size") + .fillColorAttr("color") + .defaultFillColor("#80DEEA") + .fillColorScale(d3.scale.ordinal().domain(langDomain).range(langColors)) + .popupColumns(['tweet_text', 'sender_name', 'tweet_time', 'lang', 'origin', 'followers']) + + pointMapChart.pushLayer("points", pointLayer).init().then((chart) => { /*--------------------------LASSO TOOL DRAW CONTROL------------------------------*/ /* Here enable the lasso tool draw control and pass in a coordinate filter */ pointMapChart .addDrawControl() .coordFilter(crossFilter.filter()) + dc.renderAllAsync() }) @@ -130,7 +134,7 @@ pointMapChart.isNodeAnimate = false; pointMapChart .width(w) - .height(h/1.5) + .height(h) .render(); dc.redrawAllAsync(); diff --git a/example/index.html b/example/index.html index 8d069c1e..61b3b717 100644 --- a/example/index.html +++ b/example/index.html @@ -10,7 +10,7 @@ border: 0; border-top: 1px solid #ccc; margin: 0px 200px 0px 200px; - padding: 0; + padding: 0; } body { font-family: "Open Sans", sans-serif; @@ -79,7 +79,7 @@
- + @@ -93,6 +93,9 @@ + + + diff --git a/example/test/README.md b/example/test/README.md deleted file mode 100644 index c30f6b78..00000000 --- a/example/test/README.md +++ /dev/null @@ -1,19 +0,0 @@ -# Test - -**TODO: Add description** - -## Installation - -If [available in Hex](https://hex.pm/docs/publish), the package can be installed -by adding `test` to your list of dependencies in `mix.exs`: - -```elixir -def deps do - [{:test, "~> 0.1.0"}] -end -``` - -Documentation can be generated with [ExDoc](https://github.com/elixir-lang/ex_doc) -and published on [HexDocs](https://hexdocs.pm). Once published, the docs can -be found at [https://hexdocs.pm/test](https://hexdocs.pm/test). - diff --git a/example/test/mix.exs b/example/test/mix.exs index 40b94e0a..fb029358 100644 --- a/example/test/mix.exs +++ b/example/test/mix.exs @@ -10,28 +10,15 @@ defmodule Test.Mixfile do deps: deps()] end - # Configuration for the OTP application - # - # Type "mix help compile.app" for more information def application do - # Specify extra applications you'll use from Erlang/Elixir [extra_applications: [:logger]] end - # Dependencies can be Hex packages: - # - # {:my_dep, "~> 0.3.0"} - # - # Or git/path repositories: - # - # {:my_dep, git: "https://github.com/elixir-lang/my_dep.git", tag: "0.1.0"} - # - # Type "mix help deps" for more examples and options defp deps do [ {:hound, "~> 1.0"}, {:beagle, "~> 0.1.0"}, - {:whippet, "~> 0.1.0"} + {:whippet, github: "mrblueblue/whippet"} ] end end diff --git a/example/test/mix.lock b/example/test/mix.lock index 2431cd67..d1da346c 100644 --- a/example/test/mix.lock +++ b/example/test/mix.lock @@ -7,4 +7,4 @@ "mimerl": {:hex, :mimerl, "1.0.2", "993f9b0e084083405ed8252b99460c4f0563e41729ab42d9074fd5e52439be88", [:rebar3], []}, "poison": {:hex, :poison, "3.1.0", "d9eb636610e096f86f25d9a46f35a9facac35609a7591b3be3326e99a0484665", [:mix], []}, "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.1", "28a4d65b7f59893bc2c7de786dec1e1555bd742d336043fe644ae956c3497fbe", [:make, :rebar], []}, - "whippet": {:hex, :whippet, "0.1.0", "15e5b7acd90592e7ca8942b536599c0d2b54487cccbb7834ca366f2804b90f58", [:mix], [{:beagle, "~> 0.1.0", [hex: :beagle, optional: false]}, {:hound, "~> 1.0", [hex: :hound, optional: false]}]}} + "whippet": {:git, "https://github.com/mrblueblue/whippet.git", "4fc0b71d74d2f684a536d8857d99c99bc8db2a62", []}} diff --git a/example/test/test/test_helper.exs b/example/test/test/test_helper.exs index b6a2ccc8..b296e7ab 100644 --- a/example/test/test/test_helper.exs +++ b/example/test/test/test_helper.exs @@ -1,2 +1,2 @@ Application.ensure_all_started :hound -ExUnit.start() +ExUnit.start(max_cases: 3) diff --git a/package.json b/package.json index 7583df8b..65673c73 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,8 @@ "lint": "eslint $(find src -name \"*.js\" ! -name '*.spec.js')", "lint:errors": "npm run lint -- --quiet", "nyc": "nyc", + "selenium:install": "selenium-standalone install --version=3.0.0-beta4", + "selenium:start": "selenium-standalone start --version=3.0.0-beta4", "start": "npm run build:example && http-server -p 8081 -o -c-1", "test": "npm run lint && npm run test:unit", "test:unit": "find ./src -name '*.spec.js' | NODE_PATH=./src xargs nyc mocha --opts ./test/mocha.unit.opts" @@ -79,6 +81,7 @@ "nyc": "^10.3.0", "proxyquire": "1.7.4", "sass-loader": "3.1.2", + "selenium-standalone": "^6.4.1", "style-loader": "0.13.0", "webpack": "^1.13.1" },
Bar Chart, Scatterplot, and Time Chart
Backend-rendered Scatter Plot
Selection Tool With Raster Chart
Backend-rendered Multi-Layer Map