I'm new to Nivo, and I've been playing around with the docs to implement a scatter chart on a project. Everthing is working fine except that my node items in the chart overflows out of the chart area.
The Avatars go out of the chart area and I'm not sure how to prevent that...
Here is my current config
<div className="h-[400px]">
<ResponsiveScatterPlot
{node.serieId}</div>}
nodeSize={isMobile ? 25 : 35}
data={data}
margin={{ top: 60, right: 60, bottom: 70, left: 90 }}
xScale={{ type: "linear", min: 0, max: isMobile ? 7 : 35, reverse: true }}
yScale={{ type: "linear", min: 0, max: "auto" }}
blendMode="normal"
useMesh={false}
annotations={[]}
nodeComponent={CustomNode}
axisBottom={{
tickSize: 8,
tickPadding: 5,
tickRotation: 0,
format: (value) => (value === 0 ? "Today" : value >= 35 ? "35+ days ago" : `${value} days ago`)
}}
enableGridX={true}
theme={{
axis: {},
grid: {
line: {
strokeDasharray: "4 4",
strokeWidth: 1,
strokeOpacity: 0.7
}
}
}}
isInteractive={true}
axisLeft={{
tickSize: 2,
tickPadding: 5,
tickRotation: 0,
legend: "Lines Touched",
legendPosition: "middle",
legendOffset: -60,
format: (value: number) => {
return parseInt(`${value}`) >= 1000 ? humanizeNumber(value, "abbreviation") : `${value}`;
}
}}
/>
</div>
Any help will be appreciated 🙏🙏
I have data sets for recipes that I want to map onto cards that are on a carousel that I made.
I am trying to do this the most efficient way with least amount of code, I am already achieving it by just creating multiple sliders for each set of recipes. However I want to make it so I only need the one slider component, which already has the card component in it - in which I can then map my data into as I need. Rather than just having several of the same components where I have already mapped each dataset into previously.
Code below will show what I am trying to do.
Also here is a code sandbox if you go to the menu section and click on pasta option then the seafood button at top it will show the issue I have currently of my method of mapping is not working.
for reference this has been designed mobile first so UI will only look normal when in mobile dimensions.
recipeCard.js
import React from 'react'
import { MenuCard } from './menuCard'
import styled from 'styled-components'
import salad from '../assets/homePage/salad.jpg'
export const RecipeCard = ({image, title}) => {
return (
<div>
<div style={{height: "200px"}}>
<RecipeCardDiv>
<ImageHolder>
<img style={{height: "100%", width: "100%", borderRadius: "25px 25px 0px 0px",}} src={image}/>
</ImageHolder>
<RecipeTitleDiv>
{title}
</RecipeTitleDiv>
<RecipeButton>
Recipe
</RecipeButton>
</RecipeCardDiv>
</div>
</div>
)
}
export const RecipeCardDiv = styled.div`
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 132px;
height: 180px;
/* left: 47px;
top: 128px; */
z-index: 0;
background: #F6F6F6;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 25px;
`
const ImageHolder = styled.div`
position: absolute;
height: 95px;
width: 132px;
border-radius: 25px;
/* background-color: red; */
top: 0;
`
const RecipeTitleDiv = styled.span`
position: absolute;
height: 25px;
width: 100%;
top: 58%;
left: 5%;
font-family: 'Kaisei Opti', serif;
font-style: bold;
font-weight: 900;
font-size: 14px;
color: #000000;
`
const RecipeButton = styled.button`
position: absolute;
height: 22.5px;
width: 75px;
border-radius: 25px;
font-family: 'Kaisei Opti', serif;
font-style: bold;
border: none;
outline: none;
bottom: 6%;
/* right: 10%; */
color: white;
background: #30E3CA;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
`
menuCarousel.js
import React, { Component } from "react";
import Slider from "react-slick";
import { meatPastaRecipes, seafoodPastaRecipes, veggiePastaRecipes } from "../data/pastaRecipes";
import { veggieSaladsRecipeCards } from "../data/saladRecipes";
import { PastaCard, NoodlesCard } from "./menuCard";
import { RecipeCard } from "./recipeCard";
//below is how I have been mapping my data into the various sliders and then rendering these sliders where I need them in application
//However I want to be able to have the one slider component and map the data into the cards in the carousel at the point in the application where the slider is being rendered
export class VeggieSaladSlider extends Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
// variableWidth: true,
variableHeight: true,
centerMode: true,
centerPadding: "6px",
draggable: true
};
return (
<div style={{height: "220px", width: "300px", padding: "2rem", marginTop: "3.5rem", overflow: "hidden"}}>
<Slider {...settings}>
{veggieSaladsRecipeCards.map(salad =>
<div>
<RecipeCard
key={salad.id}
title={salad.title}
image={salad.image}
/>
</div>
)}
</Slider>
</div>
);
}
}
export class VeggiePastaSlider extends Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
// variableWidth: true,
variableHeight: true,
centerMode: true,
centerPadding: "6px",
draggable: true
};
return (
<div style={{height: "220px", width: "300px", padding: "2rem", marginTop: "3.5rem", overflow: "hidden"}}>
<Slider {...settings}>
{veggiePastaRecipes.map(pasta =>
<div>
<RecipeCard
key={pasta.id}
title={pasta.title}
image={pasta.image}
/>
</div>
)}
</Slider>
</div>
);
}
}
export class MeatPastaSlider extends Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
// variableWidth: true,
variableHeight: true,
centerMode: true,
centerPadding: "6px",
draggable: true
};
return (
<div style={{height: "220px", width: "300px", padding: "2rem", marginTop: "3.5rem", overflow: "hidden"}}>
<Slider {...settings}>
{meatPastaRecipes.map(pasta =>
<div>
<RecipeCard
key={pasta.id}
title={pasta.title}
image={pasta.image}
/>
</div>
)}
</Slider>
</div>
);
}
}
//This is the template for the slider that I am trying to be able to use multiple times with different data sets mapped into it
//see code file below (pastaMenuPage.js) where the <SeadfoodPastaSlider/> is being rendered and having data mapped into it
export class SeafoodPastaSlider extends Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
// variableWidth: true,
variableHeight: true,
centerMode: true,
centerPadding: "6px",
draggable: true
};
return (
<div style={{height: "220px", width: "300px", padding: "2rem", marginTop: "3.5rem", overflow: "hidden"}}>
<Slider {...settings}>
<div>
<RecipeCard/>
</div>
</Slider>
</div>
);
}
}
pastaMenuPage.js
import React, {useState} from 'react'
import { HeaderNav } from '../../components/header'
import styled from 'styled-components'
import { PopularCardo } from '../../components/popularCard'
import LazyLoad, { MeatPastaSlider, SeafoodPastaSlider, VeggiePastaSlider } from '../../components/menuCarousel'
import { MenuSection, OptionsButtonMeat, OptionsButtonSeafood, OptionsButtonVeggie, OptionsDiv, PopularCardDiv, PopularSection, TitleDiv } from './saladMenuPage'
import { veggiePastaRecipes, seafoodPastaRecipes } from '../../data/pastaRecipes'
export const PastaMenuPage = () => {
const [active, setActive] = useState("VeggieMenu");
return (
<div style={{height: "100vh", overflow: "hidden", display: "flex", justifyContent: "center", alignItems: "center"}}>
<HeaderNav/>
<TitleDiv>
Pasta
</TitleDiv>
<OptionsDiv>
<OptionsButtonMeat onClick={() => setActive("MeatMenu")}>
Meat
</OptionsButtonMeat>
<OptionsButtonSeafood style={{marginLeft: "52.5%"}} onClick={() => setActive("SeafoodMenu")}>
Seafood
</OptionsButtonSeafood>
<OptionsButtonVeggie style={{marginRight: "52.5%"}} onClick={() => setActive("VeggieMenu")}>
Veggie
</OptionsButtonVeggie>
</OptionsDiv>
<MenuSection>
{active === "VeggieMenu" && <VeggiePastaSlider/>}
{active === "MeatMenu" && <MeatPastaSlider/>}
{active === "SeafoodMenu" && seafoodPastaRecipes.map(pasta =>
<SeafoodPastaSlider
key={pasta.id}
title={pasta.title}
image={pasta.image}
/>
)}
</MenuSection>
<TitleDiv style={{top: "67.5%"}}>
Popular
</TitleDiv>
<PopularSection>
<PopularCardDiv>
{veggiePastaRecipes.slice(2,3).map(pasta =>
<PopularCardo
key={pasta.id}
title={pasta.title}
image={pasta.image}
/>
)}
</PopularCardDiv>
</PopularSection>
</div>
)
}
and the data file incase
pastaRecipes.js
export const veggiePastaRecipes = [
{
id: 1,
title: "Mushroom & Leek",
image: "https://cmx.weightwatchers.co.uk/assets-proxy/weight-watchers/image/upload/t_WINE_EXTRALARGE/ak6clrxuzruvrv3wweqj.jpg",
recipe: ""
},
{
id: 2,
title: "Cacio e Pepe",
image: "https://images.immediate.co.uk/production/volatile/sites/30/2020/08/cacio-e-pepe-with-runner-beans-e523207.jpg?quality=90&webp=true&resize=300,272",
recipe: ""
},
{
id: 3,
title: "Spaghetti Primavera",
image: "https://images.immediate.co.uk/production/volatile/sites/30/2020/08/healthy-pasta-primaver-35cbc26.jpg?quality=90&webp=true&resize=300,272",
recipe: ""
},
{
id: 4,
title: "Caponata",
image: "https://images.immediate.co.uk/production/volatile/sites/30/2020/08/caponata-pasta-a0027c4.jpg?quality=90&webp=true&resize=300,272",
recipe: ""
},
{
id: 5,
title: "Tomato & Avocado",
image: "https://images.immediate.co.uk/production/volatile/sites/30/2020/08/mexican-penne-5cd4efb.jpg?quality=90&webp=true&resize=300,272",
recipe: ""
},
{
id: 6,
title: "Mac n Cheese",
image: "https://images.immediate.co.uk/production/volatile/sites/30/2020/08/macaroni-cheese-251d55c.jpg?quality=90&webp=true&resize=300,272",
recipe: ""
},
]
export const meatPastaRecipes = [
{
id: 1,
title: "Spaghetti Bolognese",
image: "https://www.slimmingeats.com/blog/wp-content/uploads/2010/04/spaghetti-bolognese-36-720x720.jpg",
recipe: ""
},
{
id: 2,
title: "Tuna Pasta Bake",
image: "https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-51616_12-796faab.jpg?quality=90&webp=true&resize=300,272",
recipe: ""
},
{
id: 3,
title: "Classic Lasagne",
image: "https://cdn.bosh.tv/uploads/images/recipes/_full/Lasagne-Website.jpg?v=1601992601",
recipe: ""
},
{
id: 4,
title: "Broccoli & Salmon Bake",
image: "https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-227467_12-0d8623c.jpg?quality=90&webp=true&resize=300,272",
recipe: ""
},
{
id: 5,
title: "Beef Stroganoff",
image: "https://images.immediate.co.uk/production/volatile/sites/30/2020/08/beefstroganoff-d53f55e.jpg?quality=90&webp=true&resize=300,272",
recipe: ""
},
{
id: 6,
title: "Spaghetti Carbonara",
image: "https://easyweeknight.com/wp-content/uploads/2019/02/spaghetti-carbonara3.jpg",
recipe: ""
},
]
export const seafoodPastaRecipes = [
{
id: 1,
title: "Crab Ravioli",
image: "https://media-cdn.greatbritishchefs.com/media/oqobaojp/img27462.jpg?mode=crop&width=768&height=512",
recipe: ""
},
{
id: 2,
title: "Crab Linguine",
image: "https://media-cdn.greatbritishchefs.com/media/sxipor0k/img11530.jpg?mode=crop&width=768&height=512",
recipe: ""
},
{
id: 3,
title: "Conchiglie Frutti Di Mare",
image: "https://media-cdn.greatbritishchefs.com/media/eqypizew/img62005.jpg?mode=crop&width=768&height=512",
recipe: ""
},
{
id: 4,
title: "Fishghetti",
image: "https://media-cdn.greatbritishchefs.com/media/tv4foh5e/img26026.jpg?mode=crop&width=768&height=512",
recipe: ""
},
{
id: 5,
title: "Prawn Linguine",
image: "https://media-cdn.greatbritishchefs.com/media/al4icv5v/img52113.jpg?mode=crop&width=768&height=512",
recipe: ""
},
]
To summarise, I am looking for a more advanced and efficient way to map data into a component so I do not need several of the same components in one file.
The Problem you have here is , you are telling the Slider upfront that you are going to render a certain list of items. Due to this we are repeating the Slider logic in all the places where ever we want to achieve the carousel behaviour.
But what we need is for the slider to render it contents dynamically because slider doesn't care what it needs to render. All it needs to do is provide the carousel behaviour. This in react can be achieved using the children prop.
Create a new component for the Slider,
Solution 1
SliderContainer.js
import React from "react";
import Slider from "react-slick";
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
// variableWidth: true,
variableHeight: true,
centerMode: true,
centerPadding: "6px",
draggable: true
};
const SliderContainer = ({ children }) => (
<div
style={{
height: "220px",
width: "300px",
padding: "2rem",
marginTop: "3.5rem",
overflow: "hidden"
}}
>
<Slider {...settings}>{children}</Slider>
</div>
);
export default SliderContainer;
Now use this component in all the places where you want to achieve the carousel behaviour.
export class VeggieSaladSlider extends Component {
render() {
return (
<SliderContainer>
{veggieSaladsRecipeCards.map((salad) => (
<div>
<RecipeCard
key={salad.id}
title={salad.title}
image={salad.image}
/>
</div>
))}
</SliderContainer>
);
}
}
Solution 2
If it is guaranteed that all the carousel items will have the below shape
{
id: ...,
title: ...,
image: ...
}
we can further enhance the SliderContainer component to take a prop which is a list of items instead of the children prop.
import React from "react";
import Slider from "react-slick";
import { RecipeCard } from "./recipeCard";
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
// variableWidth: true,
variableHeight: true,
centerMode: true,
centerPadding: "6px",
draggable: true
};
const SliderContainer = ({ items }) => (
<div
style={{
height: "220px",
width: "300px",
padding: "2rem",
marginTop: "3.5rem",
overflow: "hidden"
}}
>
<Slider {...settings}>
{items.map(({ id, title, image }) => (
<div key={id}>
<RecipeCard key={id} title={title} image={image} />
</div>
))}
</Slider>
</div>
);
export default SliderContainer;
Now with this change , we can just render the different Sliders as
export class VeggieSaladSlider extends Component {
render() {
return <SliderContainer items={veggieSaladsRecipeCards} />;
}
}
You can pass custom props to your component, see my example below:
class PastaSlider extends React.Component{
render() {
// this "customProp" key was set as an attribute to PastaSlider component and can be accessed from this.props
return <div>{this.props.customProp}</div>
}
}
function App() {
// this is your import { veggieSaladsRecipeCards, etc } from "../data/saladRecipes";
const recipes =[
'veggie',
'pasta',
'meatz'
]
return (
<div className="App">
{recipes.map( (item,index) => <PastaSlider key={index} customProp={item} />)}
</div>
);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" ></div>
I'm trying to make a squeezing bubble animation on repeat, using framer motion & react, but I cant make the squeeze animation happen every time the movement animation is beginning.
instead only the first time the animations run it works but after that only the movement animation repeats itself, if I try to repeat the squeeze animation it just gets out of order
import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
const Bubble = () => {
const shapeVariants = {
hidden: {
height: 450,
width: 50,
},
visible: {
height: 250,
width: 250,
transition: {
type: "spring",
bounce: 1,
stiffness: 700,
ease: "easeIn",
},
},
};
const MoveVariants = {
hidden: {
y: 1300,
},
visible: {
y: -280,
transition: {
duration: 2,
ease: "easeIn",
repeat: Infinity,
},
},
};
return (
<motion.div variants={MoveVariants} initial={"hidden"} animate={"visible"}>
<RoundDiv
onAnimationComplete={(definition) => console.log(definition)}
variants={shapeVariants}
/>
</motion.div>
);
};
const RoundDiv = styled(motion.div)`
height: 250px;
width: 250px;
background-color: #05386b;
border-radius: 50%;
`;
export default Bubble;
You just needed to add to your shapeVariants transition to get them to sync up.
import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
const Bubble = () => {
const shapeVariants = {
hidden: {
height: 450,
width: 50,
},
visible: {
height: 250,
width: 250,
transition: {
type: "spring",
bounce: 1,
stiffness: 700,
ease: "easeIn",
duration: 2, /* new */
repeat: Infinity, /* new */
},
},
};
const MoveVariants = {
hidden: {
y: 1300,
},
visible: {
y: -280,
transition: {
duration: 2,
ease: "easeIn",
repeat: Infinity,
},
},
};
return (
<motion.div
variants={MoveVariants}
initial={"hidden"}
animate={"visible"}
>
<RoundDiv
onAnimationComplete={(definition) => console.log(definition)}
variants={shapeVariants}
/>
</motion.div>
);
};
const RoundDiv = styled(motion.div)`
height: 250px;
width: 250px;
background-color: #05386b;
border-radius: 50%;
`;
export default Bubble;
I would also recommend using originX and originY to manipulate the spring transition on the bubble otherwise it will animate the bounce based on the top left corner. I would use percentage values such as originX: "50%" but it depends on the effect you are looking for.
The cascading animation in framer-motion is powered by the variant being propagated through the children.
You are running into this setback because you are only animating to the `visible variant once. Thus the variant propagation only happens once.
Potential Solutions
Dumb solution: include a duration into the shapeVariant and make it also repeat then manually time your animation to where you need it. This isn't optimal because you probably want your bubble animation to be type spring?
const shapeVariants = {
hidden: {
height: 450,
width: 50,
},
visible: {
height: 250,
width: 250,
transition: {
type: "spring",
bounce: 1,
stiffness: 700,
ease: "easeIn",
duration: 2,
repeat: Infinity
},
},
};
Alternatively you could control your animation with an effect that would use setTimeout or something to change the variant of the parent over and over to get the cascading effect
I want the violin chart (I'm using plotlyjs library) to be responsive. But also don't want it to compress so much (it is compressing according to the div it is kept in).
I have tried to turn the autosize property of violin to be false and then set the height and width. In this case the chart does not compress (stays the way I want it to be), but it loses its responsiveness. Is there a way to make this chart responsive yet no so compressed?
Here is my code:
<Plot
config = {{ displayModeBar: false }}
data={[
{
type: 'violin',
y: this.props.data,
points: 'none',
box: {
visible: true
},
boxpoints: false,
line: {
color: 'red'
},
opacity: 0.6,
meanline: {
visible: true
},
x0: "OEE"
}
]}
layout={{
title: "Comparison",
yaxis: {
zeroline: false
},
// autosize: false,
// height: 300,
// width: 500,
// responsive: true
}}
useResizeHandler= {true}
style= {{width: "100%", height: "100%"}}
/>
The div inside which violin is kept:
<div className="chart-wrapper" style={{ height: "35vh" }}>
<ViolinChart data={this.state.violinChartData} />
</div>
I got the solution to the above question.
PlotlyJS also provides a "margin" property for its charts. So providing margins will let you adjust the chart the way you want it to be
var layout = {
margin: {
l: 25,
r: 25,
b: 25,
t: 25
}
};
This is what i added to my code. Setting automargin = true will automatically increase the margin size.
More about this can be found here.
When creating a path using dagre, the whole nodes accumulate in one position. How can we set default positions for nodes ( Cytoscape js without react works fine) instead of setting position separately using position attribute for nodes.
const layout = {
name: "dagre",
rankDir: "LR"
}
pageData = < CytoscapeComponent
elements = {
CytoscapeComponent.normalizeElements({
nodes: nodess,
edges: edgess,
layout: layout,
})
}
pan = {
{
x: 200,
y: 200
}
}
autounselectify = {
true
}
userZoomingEnabled = {
false
}
boxSelectionEnabled = {
false
}
style = {
{
width: "1200px",
height: "1000px"
}
}
/>
return (
< div
{
pageData
}
< /div>
);
Expected result:
Current result:
There is a way to force the calculation of node positions as they are added. This is also useful when the elements of the graph change dynamically with the state of the component and the graph has to be rendered again with updated node positions.
<CytoscapeComponent
cy={(cy) => {
this.cy = cy
cy.on('add', 'node', _evt => {
cy.layout(this.state.layout).run()
cy.fit()
})
}}
/>
Here is what worked for me:
cytoscape.use(fcose)
//..then in my render...
<CytoscapeComponent
elements={elements1}
layout={{
animate: true,
animationDuration: undefined,
animationEasing: undefined,
boundingBox: undefined,
componentSpacing: 40,
coolingFactor: 0.99,
fit: true,
gravity: 1,
initialTemp: 1000,
minTemp: 1.0,
name: 'fcose',
nestingFactor: 1.2,
nodeDimensionsIncludeLabels: false,
nodeOverlap: 4,
numIter: 1000,
padding: 30,
position(node) {
return { row: node.data('row'), col: node.data('col') }
},
randomize: true,
refresh: 20,
}}
style={{ width: '600px', height: '300px' }}
/>
You may try "Euler" layout instead of "Dagre" layout