mirror of
https://github.com/heavyai/heavyai-charting.git
synced 2026-01-25 14:57:45 +00:00
Fix Pointmap Selection Tool Example 5 (#12)
* [EXAMPLES] fix selection tool example * [TRAVIS] fixed file path for after success
This commit is contained in:
Jonathan Huang
Marc Balaban
parent
904ead78fe
commit
fc7911a2e0
@ -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
|
||||
|
||||
@ -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
|
||||
```
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
<div class="main-container">
|
||||
<div class="col-xs-12">
|
||||
<div class="title">Point Map with Lasso Tool</div>
|
||||
<div class="title">Pointmap with Selection Tool</div>
|
||||
<div id="chart1-example"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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();
|
||||
@ -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 @@
|
||||
<hr>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td scope="row"><a href="./example1.html">Bar Chart, Scatterplot, and Time Chart</a></td>
|
||||
@ -93,6 +93,9 @@
|
||||
<tr>
|
||||
<td scope="row"><a href="./example4.html">Backend-rendered Scatter Plot</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row"><a href="./example5.html">Selection Tool With Raster Chart</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row"><a href="./exampleMultiLayerMap.html">Backend-rendered Multi-Layer Map</a></td>
|
||||
</tr>
|
||||
|
||||
@ -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).
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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", []}}
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
Application.ensure_all_started :hound
|
||||
ExUnit.start()
|
||||
ExUnit.start(max_cases: 3)
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user