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

How to show self-hosted tiles using deck.gl MVtLayer?

This may be in the series of dumb questions, but when I look at https://deck.gl/docs/api-reference/geo-layers/mvt-layer, I do not understand how to make a MVTLayer that fetches self-hosted tiles without React pieces. Can someone help? This would feel to be even large interest now that buildless is also becoming a thing in web programming.
What I would like to achieve is a simple HTML (e.g. index.html) file that uses a script tag like <script src="https://unpkg.com/deck.gl#8.4.5/dist.min.js"></script> and the example from the aforementioned Deck.gl that looks like (I changed the URL)
import DeckGL from '#deck.gl/react';
import {MVTLayer} from '#deck.gl/geo-layers';
function App({viewState}) {
const layer = new MVTLayer({
data: `https://<selfhostedurl>/{z}/{x}/{y}.pbf`,
minZoom: 0,
maxZoom: 23,
getLineColor: [192, 192, 192],
getFillColor: [140, 170, 180],
getLineWidth: f => {
switch (f.properties.class) {
case 'street':
return 6;
case 'motorway':
return 10;
default:
return 1;
}
},
lineWidthMinPixels: 1
});
return <DeckGL viewState={viewState} layers={[layer]} />;
}
but instead make this a without React. I see it requires a bit more code on how to define a canvas HTML element and use it. Maplibre example would be OK too. :) There is one Maplibre example at https://codepen.io/snickell/pen/dypOWzj.

You can use the Scripting API for more 'simple' examples, here you have an example of using MVTLayer.
Deck.gl offers a standalone bundled version of the library - a native JavaScript scripting interface like that of d3.js.
As simple as
const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://maps-api-v2.us.carto.com/user/public/carto/sql/{z}/{x}/{y}?source=SELECT * FROM ne_10m_railroads_public&api_key=default_public&format=mvt',
initialViewState: {
latitude: 41.4,
longitude: 2.18,
zoom: 5,
},
controller: true,
layers: [
new deck.MVTLayer({
data: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt',
getLineColor: [192, 192, 192],
lineWidthMinPixels: 1
})
]
});

Angular: Typescript: Uncaught TypeError: Cannot set property 'autoTable' of undefined

I am trying to import a simple table using angular with jspdf-autotable. But I cant, Here is error
jspdf.plugin.autotable.js:1023 Uncaught TypeError: Cannot set property 'autoTable' of undefined
at Object.<anonymous> (jspdf.plugin.autotable.js:1023)
at __webpack_require__ (jspdf.plugin.autotable.js:39)
at jspdf.plugin.autotable.js:103
at jspdf.plugin.autotable.js:106
at webpackUniversalModuleDefinition (jspdf.plugin.autotable.js:12)
at Object../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js (jspdf.plugin.autotable.js:19)
at __webpack_require__ (bootstrap:84)
at Module../src/app/components/zone-list/zone-list.component.ts (zone-list.component.ts:12)
at __webpack_require__ (bootstrap:84)
at Module../src/app/app-routing.module.ts (app-routing.module.ts:3)
For package.json :
"jspdf": "^2.1.0",
"jspdf-autotable": "^2.3.5",
For .ts :
here is import :
import jsPDF from 'jspdf';
var autoTable = require('jspdf-autotable');
here is download function :
var head = [['ID', 'Country', 'Rank', 'Capital']]
var data = [
[1, 'Denmark', 7.526, 'Copenhagen'],
[2, 'Switzerland', 7.509, 'Bern'],
[3, 'Iceland', 7.501, 'Reykjavík'],
[4, 'Norway', 7.498, 'Oslo'],
[5, 'Finland', 7.413, 'Helsinki'],
]
const doc = new jsPDF()
autoTable(doc, {
head: head,
body: data,
didDrawCell: (data) => {
console.log(data.column.index)
},
})
doc.save('table.pdf')
Tell me what went wrong?

what happens if you replace
var autoTable = require('jspdf-autotable') with this: import autoTable from 'jspdf-autotable'?

Solution : Do not use jspdf, use pdfmake [https://www.npmjs.com/package/pdfmake]
(Why should you use a buggy tool when there is a far better tool out there with better features and has a easier way to code
Of course, I get it - no library is 100% perfect. But some library is more buggier than others when we talk about a special feature or purpose. Such as : My case was html table to PDF in typescript. I tried jspdf-autotable also but no luck)
My work is now more simple, I don't need another screenshot tool like html2canvas to get all my tables screenshot, I no longer need to worry about my screenshot anymore, image resizing. Furthermore, I have an actual table that is in PDF, which means I can copy data from my PDF, its not only an image anymore.
So lets begin.
Install pdfmake:
(my case was install for Angular)
npm i pdfmake --save
typescript code:
Import it:
import pdfMake from "../../../../node_modules/pdfmake/build/pdfmake";
import pdfFonts from "../../../../node_modules/pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
Write function:
Now just write a function for download PDF that you want to trigger by you PDF download button
peopleExportToPdf() {
let docDefinition = {
content: [
{
table: {
body: [
[{ text: 'SL#', bold: true }, { text: 'Name', bold: true }, { text: 'Age', bold: true }],
[{ text: 'Bold value', bold: true }, 'Val 2', 'Val 3'],
]
}
}]
}
docDefinition.content[0].table.body.pop(); //remove the unnecessary 2nd row
let slno: number = 1;
for (let p of this.people) {
docDefinition.content[0].table.body.push([{ text: slno.toString(), bold: true }, p.name, p.age.toString()]);
slno = slno +1;
}
pdfMake.createPdf(docDefinition).download('Report.pdf');
}
3 heads up:
I have a table that has 3 columns slno, name, age. Design your table
according to your need.
If you have a non-string item, convert it to string (I had to
convert my age to string, if you don't you might have an error - I
had to face it)
You see I had to give an unnecessary row then removed it. you might
have to do it also (I had to because I faced error, if you have
found a better solution please post it)
Courtesy:
I got help from the two links below:
How to convert html table to pdf using pdfmake
this github link

Unable to add any module without WebPack

I'm using a basical Vue Routing
const routes = [
{ path: "/home", component: Home }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
const app = new Vue({
router
}).$mount("#app");
Took from this green exemple :
Can we make vue.js application without .vue extension component and webpack?
Everything is working flawless . I 'm not using webpack.
Now, I'm adding the APEXCHARTS library inside of index.html
<script src="https://cdn.jsdelivr.net/npm/apexcharts" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts" type="module"></script>
This is one my component , using literals
const Home = {
data: function() {
return {
options: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
}
},
series: [{
name: 'series-1',
data: [30, 40, 45, 50, 49, 60, 70, 91]
}]
}
},
template:
'<div><apexchart width="500" type="bar" :options="options" :series="series"></apexchart></div>'
};
and this is the error
[Vue warn]: Unknown custom element: <apexchart> - did you register the component correctly? For recursive components, make sure to provide the "name" option
My question is : how can I import this module, or any other module, without using WEBPACK, and using the vue 2 router ? I can't use 'IMPORT', it is not working, is there any way to mention the module name inside of the vue instantiation new Vue ?
Back in the days, ANGULARJS needed the modules names , but there, i dont know where to add the module name , I can not use the IMPORT syntax, please help.
Thank you
EDIT :
I've done a FIDDLE :
https://jsfiddle.net/nicolas1000/rke9xadq/

Try this:
Where you need the <apexchart> tag, you can do the following:
Vue.component('apexchart', VueApexCharts)

How to use HighChart.getOption() with react-native-highchart

I am using highchart on react-native with this library. I have created simple activity gauge component from high chart official site. Here is the code of component.
import ChartView from 'react-native-highcharts';
import React, { Component } from 'react';
export default class Speedometer extends Component {
render() {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'solidgauge',
height: '110%',
},
....
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
y: 50
}]
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<ChartView style={{height:300}} more guage config={conf} options={options}></ChartView>
);
}
}
When i render this component on my screen i get the error
TypeError: TypeError: TypeError: TypeError: undefined is not a function (evaluating 'Highcharts.getOptions()')
How can i use getOptions or colors or theme or other variable with highchart inside react-native component.

You need to understand a few things here:
react-native-highcharts library create a dynamic html content and then inject into webview. Whatever is passed in the config props of ChartView is converted in to string content after flattenObject function inside the library.
If you look at the starting code of html content inside the library you would see that some javascript dependencies has been included and one of them is highcharts. This highcharts library will make the variable Highcharts in the local scope of javascript inside webview.
You are getting this error because React thinks that Highchart must be define somewhere in the component and define Highchart as a string, so if you access string.function it will throw error.
(Solution) you have two option here either to tweak the code inside the library and make it to accept flat string as props and pass this string directly to the ChartView, or you can create dummy Highchart object inside your root component to make the React stop complaining about the Highchart object. Once this object is passed through CharView highchart would be available in javascript scope inside webview and BOOM you Charts are loading.
Now you know the problem you can come up with more solutions. Hope this helps!