@vizabi/core
Advanced tools
Comparing version 1.17.1 to 1.17.2
@@ -1,2 +0,2 @@ | ||
// http://vizabi.org v1.17.1 Copyright 2021 Jasper Heeffer and others at Gapminder Foundation | ||
// http://vizabi.org v1.17.2 Copyright 2021 Jasper Heeffer and others at Gapminder Foundation | ||
(function (global, factory) { | ||
@@ -3,0 +3,0 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('mobx')) : |
{ | ||
"name": "@vizabi/core", | ||
"version": "1.17.1", | ||
"version": "1.17.2", | ||
"description": "Vizabi core (data layer)", | ||
@@ -5,0 +5,0 @@ "main": "dist/Vizabi.js", |
@@ -1,56 +0,1 @@ | ||
# Vizabi data-core | ||
Vizabi data core uses [data visualization language](#configure-with-data-visualization-concepts) to configure data queries and transformations of [multidimensional data](#multi-dimensional-data). Its output is an array of objects representing a data table for use in other visualization libraries, such as vizabi-charts, d3, vega and others. | ||
## Dependencies | ||
Vizabi-data is built using MobX 5 for state management and expects it as a peer dependency, i.e. you include it on the page. It is not built in because this setup allows you to interact reactively with Vizabi-data [[docs]](https://mobx.js.org/configuration.html#isolateglobalstate-boolean) [[gh issue]](https://github.com/mobxjs/mobx/issues/1082). | ||
## Basic example | ||
Let `data.csv` have content as follows: | ||
| country | year | income | life_expectancy | population | world_region | | ||
|---------|------|--------|-----------------|------------|--------------| | ||
| Sweden | 1991 | 24253 | 78 | 8616729 | Europe | | ||
| ... | ... | ... | ... | ... | ... | | ||
```html | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/5.15.7/mobx.umd.min.js"></script> | ||
<script src="Vizabi.js"></script> | ||
<script> | ||
const marker = Vizabi.marker({ | ||
data: { | ||
source: { | ||
path: 'data.csv' | ||
}, | ||
space: ['country', 'year'] | ||
}, | ||
encoding: { | ||
x: { data: { concept: 'income' } }, | ||
y: { data: { concept: 'life_expectancy' } }, | ||
size: { | ||
data: { concept: 'population' } | ||
scale: { | ||
range: [1, 50] | ||
} | ||
}, | ||
color: { | ||
data: { concept: 'world_region' } | ||
scale: { | ||
domain: ['Africa', 'Americas', 'Asia', 'Europe'], | ||
range: ['blue','green','red','yellow'] | ||
} | ||
} | ||
} | ||
}) | ||
// You can use both MobX or traditional listeners to consume the output... | ||
marker.on('dataArray', console.log) | ||
// ...but when using mobx, only access properties when marker state is fulfilled | ||
mobx.autorun(() => marker.state == 'fulfilled' && console.log(marker.dataArray)); | ||
</script> | ||
``` | ||
# Vizabi core | ||
@@ -57,0 +2,0 @@ A data layer for interactive animated charts. This version uses mobx for state and event mgmt |
@@ -10,3 +10,3 @@ import { fromPromise } from 'mobx-utils' | ||
import { createKeyStr, isDataFrame } from '../../dataframe/dfutils'; | ||
import { makeCache } from '../dataConfig/cache'; | ||
import { makeCache } from './cache'; | ||
@@ -180,5 +180,2 @@ let normalizingTime = 0; | ||
}, | ||
get identity() { | ||
return stableStringifyObject(this.config); | ||
}, | ||
getConcept(concept) { | ||
@@ -222,6 +219,2 @@ if (concept == "concept_type" || concept.indexOf('is--') === 0 || concept === "concept") | ||
query(query) { | ||
//return []; | ||
if (!query._id) { | ||
query._id = this.identity; | ||
} | ||
query = dotToJoin(query); | ||
@@ -233,5 +226,3 @@ query = addExplicitAnd(query); | ||
cache: makeCache(), | ||
get queue() { | ||
return new Map(); | ||
}, | ||
queue: new Map(), | ||
combineAndSendQueries(query) { | ||
@@ -285,7 +276,7 @@ if (this.cache.has(query)) | ||
config: observable.shallow, | ||
// queue should be mutable by computed methods | ||
// this is introducing state manipulation and makes these computed methods impure | ||
// other solutions are welcome : ) | ||
//queue: observable.ref, | ||
// queue should be mutable by computed methods | ||
// this is introducing state manipulation and makes these computed methods impure | ||
// other solutions are welcome : ) | ||
queue: observable.ref, | ||
cache: observable.ref | ||
} |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
1164420
12310
9