mirror of
https://github.com/qlik-oss/nebula.js.git
synced 2025-12-25 01:04:14 -05:00
chore: add chart conversion example (#681)
* feat: add types to nebula serve * chore: add docs * chore: add chart conversion example * chore(desp): bump parcel version in example code Co-authored-by: caele <tsm@qlik.com>
This commit is contained in:
Li Kang
1
examples/chart-conversion/.gitignore
vendored
Normal file
1
examples/chart-conversion/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
yarn.lock
|
||||
32
examples/chart-conversion/README.md
Normal file
32
examples/chart-conversion/README.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# Nebula Development Mashup example
|
||||
|
||||
Example mashup for nebula development
|
||||
|
||||
## Install
|
||||
|
||||
To use a local nebula version, run this in the stardust folder to allow linking your local version.
|
||||
|
||||
```sh
|
||||
yarn link
|
||||
```
|
||||
|
||||
Update dependencies and link nebula
|
||||
|
||||
```sh
|
||||
yarn
|
||||
yarn link "@nebula.js/stardust"
|
||||
```
|
||||
|
||||
## Run
|
||||
|
||||
Run parcel server
|
||||
|
||||
```sh
|
||||
yarn start
|
||||
```
|
||||
|
||||
Open you browser to http://localhost:1234
|
||||
|
||||
## Making local changes
|
||||
|
||||
The gitignore is setup to exclude a folder named `local-dev` in the root of this repository. So to make local changes to the mashup you can create that folder and copy all files into it.
|
||||
54
examples/chart-conversion/connect.js
Normal file
54
examples/chart-conversion/connect.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import enigma from 'enigma.js';
|
||||
|
||||
export default function connect() {
|
||||
const loadSchema = () =>
|
||||
fetch('https://unpkg.com/enigma.js/schemas/12.612.0.json').then((response) => response.json());
|
||||
|
||||
const createConnection = () =>
|
||||
loadSchema().then((schema) =>
|
||||
enigma
|
||||
.create({
|
||||
schema,
|
||||
url: `ws://${window.location.hostname || 'localhost'}:9076/app/${Date.now()}`,
|
||||
})
|
||||
.open()
|
||||
.then((qix) => qix.createSessionApp())
|
||||
);
|
||||
|
||||
return createConnection().then((app) =>
|
||||
app
|
||||
.setScript(
|
||||
`
|
||||
Characters:
|
||||
Load Chr(RecNo()+Ord('A')-1) as Alpha, RecNo() as Num autogenerate 26;
|
||||
|
||||
ASCII:
|
||||
Load
|
||||
if(RecNo()>=65 and RecNo()<=90,RecNo()-64) as Num,
|
||||
Chr(RecNo()) as AsciiAlpha,
|
||||
RecNo() as AsciiNum
|
||||
autogenerate 255
|
||||
Where (RecNo()>=32 and RecNo()<=126) or RecNo()>=160 ;
|
||||
|
||||
Transactions:
|
||||
Load
|
||||
TransLineID,
|
||||
TransID,
|
||||
mod(TransID,26)+1 as Num,
|
||||
Pick(Ceil(3*Rand1),'A','B','C') as Dim1,
|
||||
Pick(Ceil(6*Rand1),'a','b','c','d','e','f') as Dim2,
|
||||
Pick(Ceil(3*Rand()),'X','Y','Z') as Dim3,
|
||||
Round(1000*Rand()*Rand()*Rand1) as Expression1,
|
||||
Round( 10*Rand()*Rand()*Rand1) as Expression2,
|
||||
Round(Rand()*Rand1,0.00001) as Expression3;
|
||||
Load
|
||||
Rand() as Rand1,
|
||||
IterNo() as TransLineID,
|
||||
RecNo() as TransID
|
||||
Autogenerate 1000
|
||||
While Rand()<=0.5 or IterNo()=1;
|
||||
`
|
||||
)
|
||||
.then(() => app.doReload().then(() => app))
|
||||
);
|
||||
}
|
||||
74
examples/chart-conversion/index.html
Normal file
74
examples/chart-conversion/index.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Nebula local mashup</title>
|
||||
<style>
|
||||
body {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
max-width: 1200px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.column {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.object {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background-color: white;
|
||||
margin: 12px 0px;
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.listbox {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
width: 30%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
width: 30%;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="toolbar"></div>
|
||||
<div class="content">
|
||||
<div class="column">
|
||||
<div class="object" id="pie"></div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<br />
|
||||
<div class="d-grid gap-2 col-11 mx-auto">
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="convertToPieChart">Convert to Pie Chart</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="convertToBarChart">Convert to Bar Chart</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="convertToLineChart">Convert to Line Chart</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="convertToComboChart">
|
||||
Convert to Combo Chart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
53
examples/chart-conversion/index.js
Executable file
53
examples/chart-conversion/index.js
Executable file
@@ -0,0 +1,53 @@
|
||||
import { embed } from '@nebula.js/stardust';
|
||||
import pie from '@nebula.js/sn-pie-chart';
|
||||
import bar from '@nebula.js/sn-bar-chart';
|
||||
import line from '@nebula.js/sn-line-chart';
|
||||
import combo from '@nebula.js/sn-combo-chart';
|
||||
import connect from './connect';
|
||||
|
||||
let viz;
|
||||
let nebbie;
|
||||
|
||||
async function init() {
|
||||
await connect().then((app) => {
|
||||
nebbie = embed(app, {
|
||||
types: [
|
||||
{
|
||||
name: 'pie',
|
||||
load: () => Promise.resolve(pie),
|
||||
},
|
||||
{
|
||||
name: 'bar',
|
||||
load: () => Promise.resolve(bar),
|
||||
},
|
||||
{
|
||||
name: 'line',
|
||||
load: () => Promise.resolve(line),
|
||||
},
|
||||
{
|
||||
name: 'combo',
|
||||
load: () => Promise.resolve(combo),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
nebbie.selections().then((s) => s.mount(document.querySelector('.toolbar')));
|
||||
});
|
||||
|
||||
viz = await nebbie.render({
|
||||
type: 'pie',
|
||||
element: document.querySelector('#pie'),
|
||||
fields: ['Alpha', '=Sum(Expression1)'],
|
||||
});
|
||||
}
|
||||
|
||||
const barChart = document.getElementById('convertToBarChart');
|
||||
const lineChart = document.getElementById('convertToLineChart');
|
||||
const pieChart = document.getElementById('convertToPieChart');
|
||||
const comboChart = document.getElementById('convertToComboChart');
|
||||
barChart.onclick = () => viz.convertTo('bar');
|
||||
lineChart.onclick = () => viz.convertTo('line');
|
||||
pieChart.onclick = () => viz.convertTo('pie');
|
||||
comboChart.onclick = () => viz.convertTo('combo');
|
||||
|
||||
init();
|
||||
22
examples/chart-conversion/package.json
Executable file
22
examples/chart-conversion/package.json
Executable file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "local-mashup",
|
||||
"version": "1.0.0",
|
||||
"description": "Simple local mashup",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
"start": "parcel index.html --open",
|
||||
"build": "parcel build index.html"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nebula.js/sn-bar-chart": "latest",
|
||||
"@nebula.js/sn-combo-chart": "latest",
|
||||
"@nebula.js/sn-line-chart": "latest",
|
||||
"@nebula.js/sn-pie-chart": "latest",
|
||||
"@nebula.js/stardust": "latest",
|
||||
"enigma.js": "2.7.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.12.3",
|
||||
"parcel": "^2.0.0-rc.0"
|
||||
}
|
||||
}
|
||||
@@ -15,6 +15,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.12.3",
|
||||
"parcel-bundler": "^1.12.4"
|
||||
"parcel": "^2.0.0-rc.0"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user