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.
Related
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
I'm struggling to make uPlot work with svelte. I can't find any minimal working example, so I'm crafting one myself and it does not render. Repro goes as follows:
npm create svelte repro
# y
# skeleton
# yes TypeScript
# yes ESLing
# yes Prettier
# yes Playwright
npm install
npm i uplot
npm run dev -- --open
And then I modify index.svelte to contain the following (best I could come up with, thanks to this answer In SvelteKit, how do you conditionally include a `<script>` block in `app.html`?)
<script lang="ts">
import { browser } from '$app/env';
import { onMount } from 'svelte';
import "uplot/dist/uPlot.min.css"
let uPlot;
function redraw(uPlot) {
if(!uPlot) return;
let data = [new Float32Array([1, 2, 3, 4, 5]), new Float32Array([1, 3, 2, 5, 4])];
const opts = {
width: 600,
height: 300,
scales: {x: {time: false}},
series: [{label: "x"}, {label: "y", stroke: "red"}],
};
new uPlot(opts, data, document.getElementById("uPlot"));
}
onMount(async () => {
if (browser) {
const uplotModule = await import('uplot');
uPlot = uplotModule.default;
console.log("uplot loaded", uplotModule, uPlot);
}
})
$: redraw(uPlot)
</script>
<h1>Welcome to SvelteKit</h1>
<div id="uPlot"></div>
It does not render the plot :( What am I missing?
There are several things to fix or improve:
uPlot does not take typed arrays as data
The reactive statement is a bit pointless, as it only triggers in a meaningful once after uPlot has been loaded
One should not query the DOM in Svelte but use bind:this or events instead
onMount already executes only in the browser
<script lang="ts">
import { onMount } from 'svelte';
import 'uplot/dist/uPlot.min.css';
let plotContainer;
function redraw(uPlot) {
let data = [[1, 2, 3, 4, 5], [1, 3, 2, 5, 4]];
const opts = {
width: 600,
height: 300,
scales: {x: {time: false}},
series: [{label: "x"}, {label: "y", stroke: "red"}],
};
new uPlot(opts, data, plotContainer);
}
onMount(async () => {
const uplotModule = await import('uplot');
const uPlot = uplotModule.default;
redraw(uPlot);
})
</script>
<div bind:this={plotContainer}></div>
REPL equivalent
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
})
]
});
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:
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.