Develop Reference

How to use sigma.js with svelte

I've been trying load sigma.js with Svelte / Sveltekit but there seems to be no component integration nor any guidance on how to do this. I tried loading it as client-only code in Sveltekit unsuccessfully but I have no idea if this a legit approach. Is there any working example of a simple graph in Sigma.js running with Sveltekit?

Example for parsing a gexf file:
<script lang="ts">
import Sigma from 'sigma';
import Graph from 'graphology';
import { onMount } from 'svelte';
let container: HTMLElement;
onMount(async () => {
const res = await fetch('/arctic.gexf');
const gexf = await res.text();
const { parse } = await import('graphology-gexf/browser');
const graph = parse(Graph, gexf);
const renderer = new Sigma(graph, container, {
minCameraRatio: 0.1,
maxCameraRatio: 10,
});
})
</script>
<div bind:this={container} class="container" />
<style>
.container {
width: 800px;
height: 600px;
}
</style>
Required packages:
sigma
graphology
graphology-gexf (for reading .gexf files)
graphology-gexf has two modes, one for Node, one for the Browser. To prevent errors in SSR, the browser part can be dynamically imported.
In Svelte you get access to the DOM elements via bind:this instead of querying the DOM, most other things are not that different. Elements bound this way are available in onMount.
arctic.gexf is placed in the static directory. Code is adapted from this example (without all the additional functionality).

I created a simple svelte-sigma app like this:
npm init vite svelte-sigma -- --template svelte
cd my-app
npm install
npm run dev
after I installed sigma.js:
npm install graphology sigma
Now I changed App.svelte like this:
App.svelte
<script>
import Sigma from 'sigma';
import Graph from 'graphology';
import { onMount } from 'svelte';
onMount(() => {
const container1 = document.getElementById("sigma-container");
const graph = new Graph();
graph.addNode("John", { x: 0, y: 10, size: 15, label: "John", color: "blue" });
graph.addNode("Mary", { x: 10, y: 0, size: 10, label: "Mary", color: "green" });
graph.addNode("Thomas", { x: 7, y: 9, size: 20, label: "Thomas", color: "red" });
graph.addNode("Hannah", { x: -7, y: -6, size: 25, label: "Hannah", color: "teal" });
graph.addEdge("John", "Mary");
graph.addEdge("John", "Thomas");
graph.addEdge("John", "Hannah");
graph.addEdge("Hannah", "Thomas");
graph.addEdge("Hannah", "Mary");
const renderer = new Sigma(graph, container1);
});
</script>
<h1> Sigma graph exemple</h1>
<div id="sigma-container" />
<style>
#sigma-container {
width: 550px;
height: 450px;
}
</style>
and I have this render on my localhost:
You can see this exemple

Dash Clientside Callbacks

I am struggling with Dash Clientside callbacks. I am looking to create a smooth animation, so I need the clientside callback to have the fast update rate. I have an example that seems to replicate the problem; I have a normal callback and that works as expected. When I convert the same callback to clientside, it no longer works. However, when I do a JSON.stringify to the clientside return, I see the data field updating. I do not understand the issue, though I expect it is an issue with my js. I do not know how to debug on the clientisde, so any advice for error recording would also be appreciated.
Here is the working 'normal' callback:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output,State
fig_test={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
app = dash.Dash(__name__)
app.layout = html.Div([
html.Button("Button 1", id="btn1"),
dcc.Graph(id="graph", figure=fig_test),
dcc.Slider(
id='interval-component',
min=0,
max=36,
step=1,
value=10,
),
html.Div(id="log"),
html.Pre(
id='structure',
style={
'border': 'thin lightgrey solid',
'overflowY': 'scroll',
'height': '275px'
}
)
])
#app.callback(
Output("graph", "figure"),
Input('interval-component','value'),Input("graph", "figure"),Input("btn1", "n_clicks"))
def display_structure(value, figure, btn1):
figure['data'][0]['y'][1] = value
return {'data': figure['data'], 'layout':figure['layout']}
app.run_server(debug=False)
Here is the same callback implemented through clientside:
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output,State
fig_test={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
app = dash.Dash(__name__)
app.layout = html.Div([
html.Button("Button 1", id="btn1"),
dcc.Graph(id="graph", figure=fig_test),
dcc.Slider(
id='interval-component',
min=0,
max=36,
step=1,
value=10,
),
html.Div(id="log"),
html.Pre(
id='structure',
style={
'border': 'thin lightgrey solid',
'overflowY': 'scroll',
'height': '275px'
}
)
])
app.clientside_callback(
"""
function(value, figure, btn1){
figure['data'][0]['y'][1] = value
return {'data': figure['data'], 'layout':figure['layout']};
}
""", Output("graph", "figure"), [Input('interval-component','value'),Input("graph", "figure"),Input("btn1", "n_clicks")])
app.run_server(debug=False)
If I implement the clientside to jsonify the output like this:
app.clientside_callback(
"""
function(value, figure, btn1){
figure['data'][0]['y'][1] = value
return JSON.stringify({'data': figure['data'], 'layout':figure['layout']});
}
""", Output("log", "children"), [Input('interval-component','value'),Input("graph", "figure"),Input("btn1", "n_clicks")])
I can see the value being updated, so I do not know what the issue is.

So I figured out the 'smooth animation' for layout updates, wherein 'extend data' is not possible and so the solution in this answer: Plotly/Dash display real time data in smooth animation
is not applicable. Further it allows smooth animations of live-updated data without being dependent on the 'animate' api. This is not an exact answer to the question I asked, but addresses the concept.
If you are unfamiliar with Frames, or otherwise unsure how to setup a figure, see plotly's example here: https://plotly.com/python/animations/
Psuedocode for setup:
## setup figure,
for data in some_data:
##do something
fig['frames'].append(frame)
fig1 = go.Figure(fig)
setup a store for your frames, and a store for the frames to be passed to a clientside callback. As I was setting up a process to simulate live data acquisition, I had a timer for 'polling' and a secondary one for the animation. If you don't want a timer to as a trigger, the main concept is still the same; have some 'animate' trigger, in this case 'interval-component', to kick off the quickly refreshing secondary timer.
app.layout = html.Div([
dcc.Store(id='frames-stored', data=fig1['frames']),
dcc.Store(id='frames'),
dcc.Interval(
id='interval-component',
interval=1*500, # in milliseconds
n_intervals=0
),
dcc.Interval(id='graph-refresher',
interval=1*25,
n_intervals=0,
max_intervals=50,
disabled=True),
dcc.Graph(id="graph", figure=fig1),
])
now a callback to catch your 'animation' trigger and pass frames to your clientside callback:
#app.callback(
Output("frames", "data"),Output("graph-refresher", "disabled"),
Output("graph-refresher", "max_intervals"),Output('graph-refresher','n_intervals'),
Input("interval-component", "n_intervals"),State("frames-stored", "data"))
def data_smoother(n_intervals,frames):
## can do whatever here as long as a list of frames are passed to the store
selected_frames = frames[n_intervals]
return selected_frames,False,'some_max',0
This callback turns on the timer for the clientside callback, and resets the max_intervals with 'some_max'. This is going to be dependent on whatever you are doing.
Now the clientside callback that handles the 'animation'.
app.clientside_callback(
"""
function(n_intervals, frames){
return {'data':frames[parseInt(n_intervals)]['data'], 'layout':frames[parseInt(n_intervals)]['layout']};
}
""",Output("graph", "figure"),Input('graph-refresher','n_intervals'), State("frames", "data"))
I hope this is useful for someone!

Convert JS script into React component

I have been trying to use this simple javascript script (https://seatchart.js.org/ or https://github.com/omarmahili/seatchart.js) in my react application. In a html project, one would only add the script and run it, but I struggle with the integration to the React framework. Any approach suggestion would be greatly appreciated.
I have tried some patch work without much success i.e.
Calling the JS function from the script in my react component, but "let sc = new Seatchart(options);", provokes a "'Seatchart' is not defined" error.
Adding "window" in "let sc = new window.Seatchart(options); " results in "Cannot read property 'appendChild' of null" error at "document.getElementById(options.map.id).appendChild(mapContainer)". (may be because the compiler cannot find "document" which is much realted to html and and not much related to React.)
Using UseRef() compiled, but returned a blank screen...
My failling code below omits the entire 1800 lines script which I copied pasted above the React function for "Seatchart()" to be accessed. The script is here
export default function Tickets () {
let options = {
map: {
id: 'map-container',
rows: 9,
columns: 9,
// e.g. Reserved Seat [Row: 1, Col: 2] = 7 * 1 + 2 = 9
reserved: {
seats: [1, 2, 3, 5, 6, 7, 9, 10, 11, 12, 14, 15, 16, 17, 18, 19, 20, 21],
},
disabled: {
seats: [0, 8],
rows: [4],
columns: [4]
}
},
types: [
{ type: "regular", backgroundColor: "#006c80", price: 10, selected: [23, 24] },
{ type: "reduced", backgroundColor: "#287233", price: 7.5, selected: [25, 26] }
],
cart: {
id: 'cart-container',
width: 280,
height: 250,
currency: '£',
},
legend: {
id: 'legend-container',
},
assets: {
path: "../../public",
}
};
let sc = new Seatchart(options);
return (
<div>
<div id="map-container">
</div>
<div id="legend-container">
</div>
<div id="shoppingCart-container">
</div>
</div>
);
}
};
Conceptually, how would I integrate a JS script to my React component?
UPDATE:
In public/index.html:
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="text/javascript" src="../src/containers/SeatChart.js" ></script>
<div id="root"></div>
In SeatChart:
// SeatChart.js script and Option arg. above, but too long to post...
let sc = new Seatchart(options);
localStorage.setItem("scObj", sc);
localStorage.setItem("test", "this is a test");
console.log("You would see this if SeatChart ran successfully);
In Ticket.js
export default function Ticket () {
const sc = localStorage.getItem("scObj");
console.log(sc);
const test = localStorage.getItem("test");
console.log(test)
return (
<div>
<div>Hello from here!</div>
<div id="map-container">
</div>
<div id="legend-container">
</div>
<div id="shoppingCart-container">
</div>
</div>
);
};

Follow below steps:
create a js file in your react application in root, say 'init.js', where you import the required script.
now init.js should have access to let sc = new Seatchart(options)
write your required logic, and return/save/dispatch the result to redux store or local storage. (store.dispatch() can be used.)
2.simply import the aboveenter code here script in your index.html file in your react application.
In your component, read the output from redux/ local-storage as processed by the script function.

Can't bind to 'datasets' since it isn't a known property of 'canvas'

this is my app.module.ts
I try with a tutorial this ng2-charts
import { ChartsModule } from 'ng2-charts';
imports: [
ChartsModule
],
this is my html code page.html, i copy and paste from the tutorial
< div >
< div style = "display: block" >
< canvas baseChart
[datasets] = "barChartData"
[labels] = "barChartLabels"
[options] = "barChartOptions"
[legend] = "barChartLegend"
[chartType] = "barChartType"
(chartHover) = "chartHovered($event)"
(chartClick) = "chartClicked($event)" >
< /canvas>
</ div >
< button (click) = "randomize()" > Update < /button>
</ div >
this is my typescript page also i copy and paste from tutorial. page.ts
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true};
public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[] = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
];
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
public randomize():void {
// Only Change 3 values
let data = [
Math.round(Math.random() * 100),
59,
80,
(Math.random() * 100),
56,
(Math.random() * 100),
40];
let clone = JSON.parse(JSON.stringify(this.barChartData));
clone[0].data = data;
this.barChartData = clone;
}
I try all tutorials and examples but i don't know what happen.
i get this error.
Error detail is:
**Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
<div style="display: block">
<canvas baseChart
[ERROR ->][datasets]="barChartData"
[labels]="barChartLabels"
[options]"): ng:///StatsPageModule/StatsPage.html#33:20
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
<canvas baseChart
[datasets]="barChartData"
[ERROR ->][labels]="barChartLabels"
[options]="barChartOptions"
[legend"): ng:///StatsPageModule/StatsPage.html#34:20
Can't bind to 'options' since it isn't a known property of 'canvas'. (" [datasets]="barChartData"
[labels]="barChartLabels"
[ERROR ->][options]="barChartOptions"
[legend]="barChartLegend"
[chartT"): ng:///StatsPageModule/StatsPage.html#35:20
Can't bind to 'legend' since it isn't a known property of 'canvas'. (" [labels]="barChartLabels"
[options]="barChartOptions"
[ERROR ->][legend]="barChartLegend"
[chartType]="barChartType"
(chartHo"): ng:///StatsPageModule/StatsPage.html#36:20
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" [options]="barChartOptions"
[legend]="barChartLegend"
[ERROR ->][chartType]="barChartType"
(chartHover)="chartHovered($event)"
"): ng:///StatsPageModule/StatsPage.html#37:20**
I just want to make a graph that says the number of users and number of posts created during a week, but every tutorial that I follow I get error, all without exception, sorry my English is not native in case you have some spelling error.

It's a clash between versions of Angular and ng2-charts
With Angular 7.2.0 , I uninstalled ng2-charts and installed ng2-charts#2.2.3
This is helped. for more info. see:
https://github.com/valor-software/ng2-charts/issues/1115

Setting up a chart in an Ionic App using Highcharts
Install Highcharts for ionic:
npm install highcharts –save
Open the file ./src/pages/home/home.html
and replace everything inside the ion-content tag with a div like this.
<div id="container" style="display: block;" ></div>
This div is a container to hold the chart. I write the code in home.ts file. The home.html and home.ts are the files in charge of creating the home page in the app.
In home.ts, on the top, import the highcharts module first.
import * as HighCharts from 'highcharts';
Next, create a function called ionViewDidLoad() inside the HomePage class, just after the constructor. The file should look like this:
import {
Component
} from '#angular/core';
import {
NavController
} from 'ionic-angular';
import * as HighCharts from 'highcharts';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {}
ionViewDidLoad() {}
}
The ionViewDidLoad is a special function which is executed after the View has been initialized and loaded; this makes sure to avoid any errors during the components’ access in the view. Create a new HighCharts.chart object in the ionViewDidLoad:
var myChart = HighCharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
Save the file, and in the terminal type ionic serve –l to run the app in the browser in the lab mode. The app should look like this:

Access external js files on vue instance

I am developing a simple app, where i set a list of consts that i want to use in my development. so i created a file like this:
consts.js
export default {
MAX_HEALTH: 100,
MAX_HEALTH_PERCENTAGE: '100%',
ATTACK_FLAG: 1,
HEALTH_FLAG: -1,
PERCENTAGE: '%',
ATTACK_MIN_RANGE: 1,
ATTACK_YOU_MAX_RANGE: 10,
ATTACK_MONSTER_MAX_RANGE: 7,
SPECIAL_ATTACK_MIN_RANGE: 5,
SPECIAL_ATTACK_YOU_MAX_RANGE:12,
HEAL_MIN_RANGE: 1,
HEAL_MAX_RANGE: 10
}
and i want to access the consts in a separate file on the vue instance:
window.onload = function () {
new Vue({
el: '#appMonster',
data: {
startClicked: false,
monsterLife: {
width: '100%',
life: 100
},
youLife: {
width: '100%',
life: 100
}
},
methods: {
...
for example inside methods, how can i do it?
I already tried to import the file at the top before and after onload, but i always get this error: unexpected identifier, any way to solve this?
I am not using webpack, I am just working with the vue instance accessing the vue script cdn with basic script import.
Thank you

I am not using webpack, I am just working with the vue instance accessing the vue script cdn with basic script import.
If that's the case, don't use import/export. Just:
consts.js:
const constants = {
MAX_HEALTH: 100,
MAX_HEALTH_PERCENTAGE: '100%',
ATTACK_FLAG: 1,
HEALTH_FLAG: -1,
PERCENTAGE: '%',
ATTACK_MIN_RANGE: 1,
ATTACK_YOU_MAX_RANGE: 10,
ATTACK_MONSTER_MAX_RANGE: 7,
SPECIAL_ATTACK_MIN_RANGE: 5,
SPECIAL_ATTACK_YOU_MAX_RANGE:12,
HEAL_MIN_RANGE: 1,
HEAL_MAX_RANGE: 10
}
Other file, provided you imported <script src="consts.js"></script> before, simply do:
// somewhere before: <script src="consts.js"></script>
<script>
window.onload = function () {
new Vue({
el: '#appMonster',
data: {
startClicked: false,
monsterLife: {
width: '100%',
life: constants.MAX_HEALTH // <==== use constants.PROPNAME
},
youLife: {
width: '100%',
life: 100
}
},
methods: {
See plunker demo here.