I'm relatively new to React and I'm trying to create a sort of dashboard for Cryptocurrency prices.
I'm using react-financial-charts to generate an OHLCV chart within a ResponsiveReactGridLayout.
However, the svg always displays outside the grid. Can anyone help with how I could fix this:
Here is the code: https://github.com/astronights/market_analysis_tool_evaluation-ui/blob/master/src/components/Home/Home.tsx where I render my Component that contains the ChartCanvas.
<div key="candlestick" className="home-card">
<div ref={canvasRef} style={{ width: "100%", height: "100%" }}>
{canvasRef.current ? (
<Candlestick
coin={coin}
width={canvasRef.current.clientWidth}
height={canvasRef.current.offsetHeight}
/>
) : null}
</div>
</div>
and here is the code for the chartCanvas: https://github.com/astronights/market_analysis_tool_evaluation-ui/blob/master/src/components/Home/Candlestick.tsx
return (
<ChartCanvas
height={props.height}
ratio={1}
width={props.width}
margin={{ bottom: 50, top: 100, left: 50, right: 50 }}
padding={0}
seriesName={`OHLCV prices - ${props.coin.coin}`}
data={prices}
xScale={scaleTime()}
xAccessor={xAccessor}
xExtents={xExtents}
/>
As you can see in the image, the SVG chart generated seems to be going outside.
Fixed by adding these lines of CSS.
.react-financial-charts {
position: absolute !important;
top: 0;
left: 0;
}
canvas {
position: absolute !important;
top: 0;
left: 0;
}
I'm new to React Spring and I initially tried this
const strikeProps = useSpring({
textDecoration: "line-through",
from: { textDecoration: "none" },
});
But it's not working. I think there should be a way simulate the CSS solution for this.
The problem here is, that the original CSS solution is uses pseudo element for emulating the strike trough. We can only add react-spring properties for normal html elements. So the most compact way is to create a separate strike through component for this problem. For example:
const StrikeTroughtText = ({ children, weight = 1 }) => {
const props = useSpring({
from: { width: "0%" },
to: { width: "100%" }
});
return (
<div style={{ position: "relative", display: "inline-block" }}>
{children}
<animated.div
style={{
position: "absolute",
top: "50%",
left: 0,
width: props.width,
height: `${weight}px`,
background: "black"
}}
/>
</div>
);
};
We basically animate the width of the absolutely positioned div containing a black line over the text.
You can use it like a div component:
<StrikeTroughtText>text</StrikeTroughtText>
For bigger font size the default 1 px line weight is not enough, so I added a weight property also.
Here is my example: https://codesandbox.io/s/react-strike-trought-text-component-with-react-spring-animation-86cfd?file=/src/App.js
I created a simple card with react and I want to display an overlay.
But the overlay is not showing and I have no errors in the console.
I declare the map in the constructor
// Declaration of the map
this.olmap = new Map({
target: null,
layers: [this.osm],
view: new View({
center: this.state.center,
zoom: this.state.zoom
})
})
// Déclaration of the Marker
this.marker = new Overlay({
position: fromLonLat([1.3529599, 44.0221252]),
positioning: "center-center",
element: document.getElementById("marker"),
stopEvent: false
});
//console.log(this.marker);
// Adding to the Map Object
this.olmap.addOverlay(this.marker);
and here is the rendering
render() {
return (
<>
<div id="map15" style={{ width: "100%", height: "360px" }} />
<div style={{ display: "none" }}>
{/* Marker */}
<div
id="marker"
title="Marker"
style={{
width: "20px",
height: "20px",
border: "1px solid #088",
borderRadius: "10px",
backgroundColor: "#0FF",
opacity: "0.5"
}}
/>
</div>
</>
);
}
}
I finally found the solution, I moved the declaration of the Marker in componentDidMount
componentDidMount() {
this.olmap.setTarget("map15");
// Déclaration of the Marker
this.marker = new Overlay({
position: fromLonLat([-43.3307, -22.9201]),
positioning: "center-center",
element: document.getElementById("marker"),
stopEvent: false
});
//console.log(this.marker);
// Adding to the Map Object
this.olmap.addOverlay(this.marker);
console.log(this.olmap);
}
I'm new to React Virtualized, and sorry for my English.
This is my code pen link: http://codepen.io/anon/pen/xqGXwv?editors=0010,
when I scroll to the 4th div, it's flashing, could someone help me ?
You forgot to accept and set the style parameter. This parameter is very important for react-virtualized because it's what positioned the rows as you scroll down. Here's your render function, fixed:
renderPage({index, key, style}) {
const color = ['green', 'red', 'black', 'yellow'][index % 4]
return (
<div
style={{ ...style, width: 400, height: 200, backgroundColor: color }}
key={key}
>
No.{index + 1}
</div>
)
}
What is MobileTearSheet and where is it?
By all means copy the one from the docs site. (it's just an image.)
Take it:
https://raw.githubusercontent.com/callemall/material-ui/master/docs/src/app/components/MobileTearSheet.js
Here is my working version (in one file) you can drop into you project.
If you want to use this source, please up vote this answer
MobileTearSheet.js
import React, from 'react';
const MobileTearSheet = React.createClass({
getDefaultProps() {
return { height: "100%" }
},
render:function() {
const styles = {
root: {
marginBottom: 24,
marginRight: 24,
maxWidth: 360,
width: '100%',
},
container: {
border: 'solid 1px #d9d9d9',
borderBottom: 'none',
height: this.props.height,
overflow: 'hidden',
},
bottomTear: {
display: 'block',
position: 'relative',
marginTop: -10,
maxWidth: 360,
},
};
return (
<div style={Object.assign({},styles.root,this.props.style||{})}>
<div style={styles.container}>
{this.props.children}
</div>
<div style={styles.bottomTear}>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 360 10" enableBackground="new 0 0 360 10">
<polygon fill="#DAD9D9" points={`359,0 359,7.5 352.5,0.5 345,8.5 337.5,0.5 330,8.5 322.5,0.5 315,8.5 307.5,0.5 300,8.5 292.5,0.5
285,8.5 277.5,0.5 270,8.5 262.5,0.5 255,8.5 247.5,0.5 240,8.5 232.5,0.5 225,8.5 217.5,0.5 210,8.5 202.5,0.5 195,8.5 187.5,0.5
180,8.5 172.5,0.5 165,8.5 157.5,0.5 150,8.5 142.5,0.5 135,8.5 127.5,0.5 120,8.5 112.5,0.5 105,8.5 97.5,0.5 90,8.5 82.5,0.5
75,8.5 67.5,0.5 60,8.5 52.5,0.5 45,8.5 37.5,0.5 30,8.5 22.5,0.5 15,8.5 7.5,0.5 1,7.5 1,0 0,0 0,10 7.5,2 15,10 22.5,2 30,10
37.5,2 45,10 52.5,2 60,10 67.5,2 75,10 82.5,2 90,10 97.5,2 105,10 112.5,2 120,10 127.5,2 135,10 142.5,2 150,10 157.5,2 165,10
172.5,2 180,10 187.5,2 195,10 202.5,2 210,10 217.5,2 225,10 232.5,2 240,10 247.5,2 255,10 262.5,2 270,10 277.5,2 285,10
292.5,2 300,10 307.5,2 315,10 322.5,2 330,10 337.5,2 345,10 352.5,2 360,10 360,0 `}/>
</svg>
</div>
</div>
);
}
})
export default MobileTearSheet;
For usage see: material-ui list example
I found this question while debugging why the List example code wasn't compiling. Don't worry you can just replace the tags with a and it should work just fine!