This is my first post. My issue is the following, I have a vuejs app that uses vue-router and one of the components in the vue uses particle.js. I was successfully able to integrate particle.js into my component using $nextTick, however when I added nested routes to the parent component of this said component, particles.js stopped working with no error. The main app is layered as follows:
App.vue:
<template>
<div id="app">
<nav-bar />
<Title />
<router-view />
</div>
</template>
Particle.js is running in the 'title' component.
which is as follows:
<template>
<div id="particles-js"></div>
</template>
<script>
export default {
name: "Title",
mounted() {
require("particles.js");
this.$nextTick(() => {
this.initParticlesJS();
});
},
methods: {
initParticlesJS() {
/* eslint-disable */
particlesJS("particles-js", {
particles: {
number: {
value: 8,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#2d3bff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#2d3bff"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 10,
random: true,
anim: {
enable: false,
speed: 80,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 300,
color: "#2d3bff",
opacity: 0.8,
width: 2
},
move: {
enable: true,
speed: 12,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 800,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 800,
size: 80,
duration: 2,
opacity: 0.8,
speed: 3
},
repulse: {
distance: 400,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
}
}
};
</script>
<style scoped>
#particles-js {
position: absolute;
z-index: 0;
height: 100%;
width: 100%;
}
</style>
I think this might be an issue with the DOM or with the way components are rendered using nested routing because when I remove the from the main component the particles work fine and when I add it again it doesn't seem to be running. But I'm afraid that it's a little out of my depth for something that was supposed to be a simple project.
Update:
I still don't know how to diagnose this. However, I tried using different routes and when I go into a route that doesn't exist, for example: localhost:8080/#/route_that_doesnt_exist the particles will show up, meaning that it only doesn't work when the page is rendering one of the nested routes. I hope this helps.
Related
Hello :) I want to render particles from liblary text
Its totally basic example from this tutorial in link. But i Have this weird problem in console...
enter error image description here
I can Show you my packages and code from my component file
package.json (not all but show neccessaries :> )
"ts-node": "^10.9.1",
"tsparticles": "^2.8.0",
"typescript": "^4.9.4",
"vite": "^4.0.3",
"vue": "^3.2.33",
"vue-i18n": "^9.2.2",
"vue3-particles": "^2.8.0",
"yarn": "^1.22.19"
I tried do something like this:
Particles script in MagicParticles.vue
<script setup>
import styles from "./MagicParticles.module.scss";
import Particles from "vue3-particles";
import { loadFull } from "tsparticles";
const particlesInit = async (engine) => {
await loadFull(engine);
};
const particlesLoaded = async (container) => {
console.log("Particles container loaded", container);
};
const defaultParams = {
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
};
</script>
template
<template>
<div :class="styles.particlesBox">
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
:options="defaultParams"
/>
</div>
</template>
enter error image description here
You should use the component like this:
import { ParticlesComponent } from 'vue3-particles';
This is my code in Particle.js
import React from "react";
import Particles from "react-tsparticles";
function Particle() {
return (
<Particles
id="tsparticles"
params={{
particles: {
number: {
value: 160,
density: {
enable: true,
value_area: 1500,
},
},
line_linked: {
enable: false,
opacity: 0.03,
},
move: {
direction: "right",
speed: 0.05,
},
size: {
value: 1,
},
opacity: {
anim: {
enable: true,
speed: 1,
opacity_min: 0.05,
},
},
},
interactivity: {
events: {
onclick: {
enable: true,
mode: "push",
},
},
modes: {
push: {
particles_nb: 1,
},
},
},
retina_detect: true,
}}
/>
);
}
export default Particle;
and I call particle in Home.js
import Particle from "../Particle";
import Button from 'react-bootstrap/Button';
function Home() {
return (
<div className="mt-5">
<Particle/>
<Button href="" target="_blank" className="register-btn-inner" size="lg">
Register
</Button>
</div>
);
}
export default Home;
I checked a lot of same questions like particles.js not showing up in reactjs project and Particle.js not showing particles on ReactJS website
but solutions don't help me at all. I searched a lot but I don't understand my mistake. why Particle doesn't work?
I installed tsparticles and react-tsparticles libraries too.
You are missing the init attribute on the Particles component. It's visible in the documentation as well here
This is the documentation example:
import { useCallback } from "react";
import Particles from "react-particles";
import { loadFull } from "tsparticles";
const App = () => {
const particlesInit = useCallback(async engine => {
console.log(engine);
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async container => {
await console.log(container);
}, []);
return (
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
directions: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
}}
/>
);
};
I'm trying to use tsParticles as a background to a login page but the mouse event doesn't work when I'm on the login div.
How can I make it work?
Here's my configuration
tsParticles.load('tsparticles', {
background: {
color: '#000000'
},
particles: {
color: {
value: '#CF5C36'
},
opacity: {
value: 0.5
},
lineLinked: {
color: {
value: '#EFC88B'
},
consent: true
}
},
interactivity: {
events: {
onHover: {
mode: ['grab', 'bubble'],
enable: true
}
},
modes: {
grab: {
distance: 200
},
bubble: {
size: 10
}
}
},
preset: 'basic'
});
Here's a sample fiddle of the issue: https://jsfiddle.net/jmfhk0xb/
In the interactivity section, you need to add detect_on: 'window'.
interactivity: {
detect_on: 'window',
events: {
onHover: {
mode: ['grab', 'bubble'],
enable: true
}
},
modes: {
grab: {
distance: 200
},
bubble: {
size: 10
}
}
},
I am using the below package
https://www.npmjs.com/package/react-graph-vis
could you please tell me how to stop zoom in and zoom out of all nodes
https://stackblitz.com/edit/react-c9tnhw?file=index.js
here is my code
https://stackblitz.com/edit/react-c9tnhw?file=index.js
const options = {
layout: {
hierarchical: false
},
edges: {
color: "#F0E"
},
nodes: {
fixed: true
},
height: "600px"
};
Your options object should look like:
const options = {
layout: {
hierarchical: false
},
edges: {
color: "#F0E"
},
height: "600px",
interaction: {
zoomView: false
},
};
So just add:
interaction: {
zoomView: false
}
I'm using Syncfusion JS 12.1.0.43, trying to implement line chart with custom tooltip;
Here is my HTML;
<div id="div-overview-transaction-tooltip" style="display:none;">
<div id="div-transaction-tooltip-value">
<ul>
<li>#point.totalValue#</li>
<li>#point.dataSource.totalValue#</li>
<li>{{:totalValue}}</li>
<li>#series.dataSource.totalValue#</li>
</ul>
</div>
</div>
Here is my example JSON;
{"TotalValue":0,"Percentage":0,"AverageResponseTime":0,"DateTime":"\/Date(1402056000000)\/"}
And here is my JS;
$("#container").ejChart({
primaryXAxis: { labelFormat: "HH:00" },
primaryYAxis:
{
labelFormat: "{value}",
rangePadding: 'round',
range: { min: 0, max: 25, interval: 5 },
},
commonSeriesOptions: {
type: 'line', animation: true,
tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
border: { width: 1 }
},
series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
canResize: true,
load: "loadTheme",
size: { height: 300 },
legend: { visible: true }
});
Output:
#point.TotalValue#
#point.dataSource.TotalValue#
{{:TotalValue}}
#series.dataSource.TotalValue#
I want to show all of my property from JSON on custom tooltip. Except tooltip everything works fine.
Any help would be appriciated. Thanks already.
By default the Tool-tip template supports only point.x and point.y so there is no direct way to achieve this using Tool-tip template.
However the value "TotalValue" from JSON can be shown in the Tool-tip with the help of the following event "toolTipInitialize" as like in below code snippet.
$("#container").ejChart({
primaryXAxis: { labelFormat: "HH:00" },
primaryYAxis:
{
labelFormat: "{value}",
rangePadding: 'round',
range: { min: 0, max: 25, interval: 5 },
},
commonSeriesOptions: {
type: 'line', animation: true,
tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
border: { width: 1 }
},
series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
canResize: true,
load: "loadTheme",
size: { height: 300 },
toolTipInitialize:"rendertool"
legend: { visible: true }
});
And in the method "rendertool"
function rendertool(sender) {
sender.Data.currentText = "Total Value:"+sender.model.series[sender.Data.seriesIndex].dataSource.data[sender.Data.pointIndex].TotalValue.toString();
}
The sender of the event has the "model" properties of the chart where you can get the data source of the series and thus you can access any values in the JSON. Hope this works for you.
here is the sample link which I tried to achieve this.
Sample
Thanks