@sqlrooms/mosaic 0.6.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
This package is part of the SQLRooms framework. It provides React components and hooks for integrating [Mosaic](https://idl.uw.edu/mosaic/) - a visualization library for data exploration and analysis - into SQLRooms applications.
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
Mosaic is a JavaScript library for data visualization and analysis developed by the [Interactive Data Lab (IDL)](https://idl.uw.edu/) at the University of Washington. It combines the expressiveness of declarative visualization grammars with the power of reactive programming and SQL queries.
|
|
6
|
+
|
|
7
|
+
One of Mosaic's powerful features is its cross-filtering capability powered by DuckDB, allowing users to interactively filter and explore large datasets with millions of records directly in the browser. This enables creating interactive dashboards where selections in one chart automatically filter data in other charts. For an example of this functionality, see the [Cross-Filter Flights demo](https://idl.uw.edu/mosaic/examples/flights-200k.html) which demonstrates interactive filtering across multiple visualizations of a 200,000-record flight dataset.
|
|
8
|
+
|
|
9
|
+
This package provides:
|
|
10
|
+
|
|
11
|
+
- React components for rendering Vega-Lite charts using Mosaic
|
|
12
|
+
- Hooks for integrating Mosaic with DuckDB in SQLRooms applications
|
|
13
|
+
- Utilities for working with Mosaic specifications
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @sqlrooms/mosaic
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
### VgPlotChart Component
|
|
24
|
+
|
|
25
|
+
The `VgPlotChart` component renders a Vega-Lite chart using the Mosaic library:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import {VgPlotChart, Spec} from '@sqlrooms/mosaic';
|
|
29
|
+
|
|
30
|
+
const spec: Spec = {
|
|
31
|
+
// Your Vega-Lite specification
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
function MyChart() {
|
|
35
|
+
return <VgPlotChart spec={spec} />;
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### useMosaic Hook
|
|
40
|
+
|
|
41
|
+
The `useMosaic` hook provides access to the Mosaic connector for DuckDB:
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import {useMosaic} from '@sqlrooms/mosaic';
|
|
45
|
+
|
|
46
|
+
function MyComponent() {
|
|
47
|
+
const {isMosaicLoading, mosaicConnector} = useMosaic();
|
|
48
|
+
|
|
49
|
+
if (isMosaicLoading) {
|
|
50
|
+
return <div>Loading...</div>;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Use mosaicConnector to interact with DuckDB through Mosaic
|
|
54
|
+
return <div>Mosaic is ready!</div>;
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Resources
|
|
59
|
+
|
|
60
|
+
- [Mosaic Documentation](https://idl.uw.edu/mosaic/)
|
|
61
|
+
- [Cross-Filter Flights Demo](https://idl.uw.edu/mosaic/examples/flights-200k.html)
|
|
62
|
+
- [Vega-Lite Documentation](https://vega.github.io/vega-lite/)
|
|
63
|
+
- [DuckDB Documentation](https://duckdb.org/docs/)
|
|
64
|
+
|
|
65
|
+
## License
|
|
66
|
+
|
|
67
|
+
MIT
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAC,kBAAkB,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAC,kBAAkB,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\nexport {getMosaicConnector, useMosaic} from './use-mosaic';\nexport {VgPlotChart} from './VgPlotChart';\nexport type {Spec} from '@uwdata/mosaic-spec';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/mosaic",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@ai-sdk/provider": "^1.0.7",
|
|
23
|
-
"@sqlrooms/duckdb": "0.
|
|
23
|
+
"@sqlrooms/duckdb": "0.8.0",
|
|
24
24
|
"@uwdata/mosaic-core": "^0.12.2",
|
|
25
25
|
"@uwdata/mosaic-spec": "^0.12.2",
|
|
26
26
|
"@uwdata/vgplot": "^0.12.2"
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"lint": "eslint .",
|
|
36
36
|
"typedoc": "typedoc"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "99b46a96ab900e6b005bcd30cfbfe7b3c9d51f8d"
|
|
39
39
|
}
|