Develop Reference

How to make particles js to disappear after banner section end in react

I built a banner section with particles js background. and I want start new section but the particles js background is fixed position important. I want to make the particles disappear after the banner end .
I opend the developer tools and this is the code of canvas:
<canvas data-generated="false" style="width: 100% !important; height: 100% !important; position: fixed !important; z-index: -1 !important; top: 0px !important; left: 0px !important; background-color: rgb(0, 0, 0); pointer-events: none;" aria-hidden="true" width="133" height="640"></canvas>
Banner.js code:
import { ParticlesBg } from "./ParticlesBg"
import './banner.css'
export default function Banner() {
return (
<section className="banner">
<ParticlesBg className="bg" />
<main>
<h1>Hello World</h1>
</main>
</section>
)
}
ParticlesBg.js code:
import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
export function ParticlesBg() {
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={{
fullScreen: {
"enable": true,
"zIndex": -1,
},
background: {
color: {
value: "#000000",
},
},
fpsLimit: 60,
interactivity: {
events: {
onClick: {
enable: false,
mode: "push",
},
onHover: {
enable: false,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
position: "absolute"
},
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: 1,
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,
}}
/>
);
}
CSS code:
.banner{
width: 100%;
height: 100vh;
}
.banner h1 {
font-size: 60px;
color: white;
}
#particles-canvas {
position: absolute !important;
}

In CSS code:
section:not(.banner) {
background-color: white;
}

AnimeJS animation takes config from initial click

I implemented a Staggered Grid in React using AnimeJS, with 2 variants, defined as
export const SimpleAnimationConfig: AnimeParams = {
backgroundColor: COLORS[Math.floor(Math.random() * COLORS.length)],
scale: [
{ value: 0.1, easing: "easeOutSine", duration: 500 },
{ value: 1, easing: "easeInOutQuad", duration: 1200 },
],
};
export const CoolerAnimationConfig: AnimeParams = {
scale: [
{ value: 0.1, easing: "easeOutSine", duration: 500 },
{ value: 1, easing: "easeInOutQuad", duration: 1200 },
],
};
(and some other properties defined in CSS)
and using them as
async function onClickTile(index: number) {
const animationConfig = getAnimationConfig(isCooler);
animation.current = anime({
targets: ".tile",
delay: anime.stagger(50, { grid: [columns, rows], from: index }),
...animationConfig,
});
}
where animation is
const animation = useRef<AnimeInstance>();
and getAnimationConfig is
export function getAnimationConfig(isCooler: boolean): AnimeParams {
if (isCooler) {
return CoolerAnimationConfig;
}
return SimpleAnimationConfig;
}
Problem
Let say I clicked on a tile with index 50, it will start a staggered animation from the div with index 50 , Every subsequent animation I trigger from any other div located at any other index will however start from 50.
I console logged index, it shows the right value ,
I console logged the whole object that I am passing inside anime , it shows the correct value for fromIndex in the scope of function delay.
I did resolve the issue with
function onClickTile(index: number) {
animation.current = anime({
targets: ".tile",
delay: anime.stagger(50, { grid: [columns, rows], from: index }),
scale: [
{ value: 0.1, easing: "easeOutSine", duration: 500 },
{ value: 1, easing: "easeInOutQuad", duration: 1200 },
],
...(!isCooler && {
backgroundColor: COLORS[Math.floor(Math.random() * COLORS.length)],
}),
});
}
but still curious what was happening with separate objects, since using separate constants and helpers seems a much cleaner way than this.
DEMO

react-particles-js: Can't set a background and width

I have this installed react-particles-js, everything works fine as I see, but now I have created some custom design, and assigned it to the Particle via it params, just like this:
<Particles
params={{
particles: {
number: { value: 35, density: { enable: true, value_area: 800 } },
color: {
value: [
'BB4D10',
'#820E42',
'#BD740F',
'#248592',
'#5F4DAF',
'#8BA00F',
],
},
shape: {
type: 'circle',
stroke: { width: 0, color: '#000000' },
polygon: { nb_sides: 3 },
image: { src: 'img/github.svg', width: 100, height: 100 },
},
opacity: {
value: 1.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 9,
random: true,
anim: {
enable: false,
speed: 43.15684315684316,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: true,
distance: 100.82952832645452,
color: '#ffffff',
opacity: 1.4,
width: 1,
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 },
},
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: { enable: true, mode: 'bubble' },
onclick: { enable: false, mode: 'push' },
resize: true,
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: {
distance: 109.63042366068159,
size: 13,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 },
},
},
retina_detect: true,
}}
style={styling}
/>
After that, I'm trying to add a background color to make it look correctly, but as I can see the styling which I try to pass to the particle it just doesn't work, at least the position applies.
const styling = {
backgroundColor: '#2a2e31',
position: 'absolute',
width: '10%',
};

There are several ways to control the styling:
You can provide a className prop for canvas wrapper, and width prop for the width of canvas:
<Particles
...
style={styling}
width="10%"
className="particles-wrapper"
/>
And, write the CSS:
.particles-wrapper {
background-color: #2a2e31;
height: 100%;
width: 10%; // You may need this or may not depending on your requirement
}
Or, you can add a new div which would wrap the <Particles .. /> and set styling for this div as by default canvas is transparent.
Or, you can use canvasClassName prop and set the style for this class.
Here is a snapshot after using the 1st method from above:
The reason that we need to pass width, height separately is, as seen in source code, those present in props.style is being overwritten like this:
style={{
...this.props.style,
width,
height
}}

The easiest way to set a background to the particles is using the background option.
<Particles params={{
background: {
color: "#000"
},
/* all other options you set */
}} />
This will set a background to the canvas. If you need a transparent one use #ajeet-shah answer.

Nivo bar chart calling label function hundreds of times

I'm using Nivo bar to represent a user's progress on a budget. I've normalized the data by dividing the category balance by the category goal. Example data.
[{
"category": "Gas",
"budget": 0.24,
"over_budget": 0.0
},
{
"category": "Groceries",
"budget": 1.0,
"over_budget": 0.26
}]
I don't want these values to be used as the label on the chart. I plan to use the actual balance value as the label. I have an endpoint that will return the balance for a category and have attempted the following to use that value:
<ResponsiveBar
...
label={d => this.getDollarAmount(d.value)}
...
>
With the function POC as:
getDollarAmount(value) {
console.log("hitting getDollarAmount")
return 1
};
The log message gets logged 500+ times. My expectation would be that the function would only be hit once for each bar in the chart.
I'm still learning react so this could be something obvious. Thanks in advance!
EDIT - Here's the entire BarChart component:
import axios from 'axios';
import React, { Component } from "react";
import { ResponsiveBar } from '#nivo/bar'
// Nivo theming
const theme = {
axis: {
ticks: {
line: {
stroke: "#e9ecee",
strokeWidth: 40
},
text: {
// fill: "#919eab",
fill: "black",
fontFamily: "BlinkMacSystemFont",
fontSize: 16
}
}
},
grid: {
line: {
stroke: "#e9ecee",
strokeWidth: 5
}
},
legends: {
text: {
fontFamily: "BlinkMacSystemFont"
}
}
};
let budgetStatusAPI = 'http://127.0.0.1:8000/api/budget_status/?auth_user=1&month=2020-02-01';
class BarChart extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
this.getDollarAmount = this.getDollarAmount.bind(this);
}
componentDidMount() {
console.log("component did mount")
axios.get(budgetStatusAPI).then(response => {
this.setState({
data: response.data
}, function () {
console.log(this.state.data);
})
});
}
componentDidUpdate() {
console.log("component did update")
}
getDollarAmount(value) {
console.log("hitting getDollarAmount")
console.log(value)
return 1
};
render() {
const hard_data = [
{
"category": "Groceries",
"budget_status": 1.0,
"over_budget": .26,
},
{
"category": "Gas",
"budget_status": .24,
"over_budget": 0.0,
}]
return(
<ResponsiveBar
maxValue={1.5}
markers={[
{
axis: 'x',
value: 1,
lineStyle: { stroke: 'rgba(0, 0, 0, .35)', strokeWidth: 2 },
legend: 'Goal',
legendOrientation: 'horizontal',
legendPosition: 'top'
},
]}
enableGridX={false}
gridXValues={[1]}
enableGridY={false}
data={this.state.data}
// data={hard_data}
keys={['budget_status', 'over_budget']}
indexBy="category"
margin={{ top: 25, right: 130, bottom: 50, left: 125 }}
padding={0.3}
layout="horizontal"
colors={{ scheme: 'set2' }}
theme={theme}
defs={[
{
id: 'dots',
type: 'patternDots',
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true
},
{
id: 'lines',
type: 'patternLines',
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10
}
]}
borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
axisBottom={null}
label={d => this.getDollarAmount(d.value)}
isInteractive={false}
animate={true}
motionStiffness={90}
motionDamping={15}
/>
)
}
}
export default BarChart;
Reproduced here: https://codesandbox.io/s/nivo-bar-label-issue-k4qek

The multiple calling is happening because the bar chart is calling label function for each animation tick/frame render. If we setup a counter, we'll see with animate prop set to true it will render from 450+ to 550+ times, but if we set the prop animate to false, we'll it renders 6 times which is exactly how many price values are > 0.0.
If you want to avoid all these renders, you'll have to disable animation using animate={false} prop like this:
getDollarAmount(value) {
// Remove every console.log inside this function
return `$${value}`
}
render() {
return (
<ResponsiveBar
animate={false}
label={d => this.getDollarAmount(d.value)}
...
);
}
You can check it running to your cloned CodeSandbox. I have set animate to false and the counter log inside getDollarAmount is calling 6 times. Try to change animate to true and you'll see the 500+- renders.
Also, you don't have to create a function for each label call, you can just pass the getDollarAmount function and let it handle the whole d parameter like this:
getDollarAmount(d) {
// Remove every console.log inside this function
return `$${d.value}`
}
render() {
return (
<ResponsiveBar
animate={false}
label={this.getDollarAmount}
...
);
}

How to import d3pie.js TypeScript definitions in Angular2

I would like to use the d3pie.js library in my Angular2 project but do not know how to import it with it's typescript definitions.
I installed d3, d3pie.js using these commands:
npm install --save d3 d3pie
npm install --save-dev #types/d3 #types/d3pie
However when I try to import the #types definition like I usually do.
import * as d3pie from 'd3pie';
I get the error:
File '~/foobar/node_modules/#types/d3pie/index.d.ts' in not a module.
And with a simple import like:
import 'd3pie';
I get this error in the dev console of my app:
ERROR Error: Uncaught (in promise): ReferenceError: d3pie is not defined
This is the content of my component.ts file, the template has the test div
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-pie-chart',
templateUrl: './pie-chart.component.html',
styleUrls: ['./pie-chart.component.scss']
})
export class PieChartComponent implements OnInit {
constructor() {
}
ngOnInit() {
declare var d3pie: any;
this.testDraw();
}
public testDraw() {
const chart = new d3pie('test',
{
header: {
title: {
text: '',
color: '#333333',
fontSize: 18,
font: 'arial'
},
subtitle: {
color: '#666666',
fontSize: 14,
font: 'arial'
},
location: 'top-center',
titleSubtitlePadding: 8
},
footer: {
text: '',
color: '#666666',
fontSize: 14,
font: 'arial',
location: 'left'
},
size: {
canvasHeight: 500,
canvasWidth: 500,
pieInnerRadius: 0,
pieOuterRadius: null
},
data: {
sortOrder: 'none',
smallSegmentGrouping: {
enabled: false,
value: 1,
valueType: 'percentage',
label: 'Other',
color: '#cccccc'
},
content: []
},
labels: {
outer: {
format: 'label',
hideWhenLessThanPercentage: null,
pieDistance: 30
},
inner: {
format: 'percentage',
hideWhenLessThanPercentage: null
},
mainLabel: {
color: '#333333',
font: 'arial',
fontSize: 10
},
percentage: {
color: '#dddddd',
font: 'arial',
fontSize: 10,
decimalPlaces: 0
},
value: {
color: '#cccc44',
font: 'arial',
fontSize: 10
},
lines: {
enabled: true,
style: 'curved',
color: 'segment' // 'segment' or a hex color
}
},
effects: {
load: {
effect: 'default', // none / default
speed: 1000
},
pullOutSegmentOnClick: {
effect: 'bounce', // none / linear / bounce / elastic / back
speed: 300,
size: 10
},
highlightSegmentOnMouseover: true,
highlightLuminosity: -0.2
},
tooltips: {
enabled: false,
type: 'placeholder', // caption|placeholder
string: '',
placeholderParser: null,
styles: {
fadeInSpeed: 250,
backgroundColor: '#000000',
backgroundOpacity: 0.5,
color: '#efefef',
borderRadius: 2,
font: 'arial',
fontSize: 10,
padding: 4
}
},
misc: {
colors: {
background: null, // transparent
segments: [
'#2484c1', '#65a620', '#7b6888', '#a05d56', '#961a1a',
'#d8d23a', '#e98125', '#d0743c', '#635222', '#6ada6a',
'#0c6197', '#7d9058', '#207f33', '#44b9b0', '#bca44a',
'#e4a14b', '#a3acb2', '#8cc3e9', '#69a6f9', '#5b388f',
'#546e91', '#8bde95', '#d2ab58', '#273c71', '#98bf6e',
'#4daa4b', '#98abc5', '#cc1010', '#31383b', '#006391',
'#c2643f', '#b0a474', '#a5a39c', '#a9c2bc', '#22af8c',
'#7fcecf', '#987ac6', '#3d3b87', '#b77b1c', '#c9c2b6',
'#807ece', '#8db27c', '#be66a2', '#9ed3c6', '#00644b',
'#005064', '#77979f', '#77e079', '#9c73ab', '#1f79a7'
],
segmentStroke: '#ffffff'
},
gradient: {
enabled: false,
percentage: 95,
color: '#000000'
},
canvasPadding: {
top: 5,
right: 5,
bottom: 5,
left: 5
},
pieCenterOffset: {
x: 0,
y: 0
},
cssPrefix: null
},
callbacks: {
onload: null,
onMouseoverSegment: null,
onMouseoutSegment: null,
onClickSegment: null
}
});
}
}
Thank you!

If you are using the angular CLI you can do the following:
add to the angular-cli.json
"scripts": ["./node_modules/d3pie/d3pie/d3pie.min.js",]
then add this to your typings.d.ts
declare var d3pie:any;

Install d3, d3pie.js using these commands:
npm install --save d3
npm install --save-dev #types/d3 #types/d3pie
Please not that d3pie package from npm is outdated (as it still uses d3 v3)
Prefer the latest version from
https://github.com/benkeen/d3pie/tree/master/d3pie
npm install --save benkeen/d3pie
Edit .angular-cli.json with
"scripts": [
"../node_modules/d3/build/d3.js",
"../node_modules/d3pie/d3pie/d3pie.js"
],
Inside your component import d3pie
import 'd3pie'
Profit!