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;
}
Related
I had this problem with making responsive image map when I made some map on than in media queries the position of areas was changing so it make me crazy than I found this way
what is the way?
I was searching for long day that how I should write a code that links should not change when the position of an image changed in media queries so I found this way the best.
first go to this https://zaneray.com/responsive-image-map/ website and add your local image address from the webpage that you are working than add links in every place of your image that you want
add a div before your image and make it position relative
add the img tag and copy all the urls from that site
<div className="Afghan-map">
<img src={map} className="Afg-map" />
<a
href="your url"
title="Balkh"
className="balkh province"
/>
<a
href="hyour url"
title="Jallab abbad"
className="jallal-abbad province"
/>
<a
href="your url"
title="Badghis"
className="badghis province"
/>
<a
href="your url"
title="Kabul"
className="kabul province"
/>
<a
href="your url"
title="Herat"
className="herat province"
/>
</div>
than add your style like this.
.Afghan-map {
position: relative;
.province {
position: absolute;
z-index: 2;
}
.balkh {
left: 44.83%;
top: 21.83%;
width: 7.48%;
height: 12.1%;
}
.jallal-abbad {
left: 63.27%;
top: 43.55%;
width: 5.71%;
height: 6.25%;
}
.badghis {
left: 25.39%;
top: 34.82%;
width: 10.42%;
height: 10.22%;
}
.kabul {
left: 57.41%;
top: 41.57%;
width: 4.48%;
height: 5.56%;
}
.herat {
left: 12.81%;
top: 39.88%;
width: 12.04%;
height: 17.36%;
}
}
I found a simple application with React and draw2D.
The dashbox is the div and the canvas.
The circle is a
draw2d.shape.basic.Circle({
x: 40,
y: 10,
stroke: 3
})
How to change the code to draw the circle inside the box dashed (the canvas)?
https://codesandbox.io/s/exciting-cray-97g6r?file=/src/App.js
thanks.
The first solution
<span>
<p>Avec canvas2</p>
<div ref={inputRef} id="canvas"
style={{ height: 200, width: 300, border: "dashed brown",position:"relative" }}/>
</span>
Only add position:"relative", to the div.
I improve this solution again.
componentDidMount() {
this.canvas = new draw2d.Canvas("canvas", 9000, 9000));
this.canvas.add(
new draw2d.shape.basic.Circle({
x: 40,
y: 10,
stroke: 3
})
);
}
render() {
return (
<span>
<p>Avec canvas2</p>
<div
id="canvas"
style={{ height: 600, width: 600, border: "dashed brown" }}
/>
</span>
);
}
Now, we have a big picture inside a window ..
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 have problem with Image component in react native. I would like to display specific part of image in some square. F.e:
Let's say, I have image in resolution: 1280x720
private someImage = require('../Assets/someImage.jpg');
I would like to display this image in square component (with constant size)
<View style={{width: 64, height: 64}}>
<Image source={this.someImage}
style={{position: 'absolute', top: 0, left: 0 }} />
</View>
Here comes the first problem: Image goes beyond the square. How can I show only part of my image (but with original resolution).
The second question is:
Is there a way to showing specific fragment of my image? That's men if I set top: -64, left: -64 I would like to see original image move about 64 pixels diagonally.
Jroslaw. this may helpful for you.
const someImage = require('../Assets/someImage.jpg');
class ImageClip extends Components {
...
render() {
return (
...
<View style={{ width: 64, height: 64, overflow: 'hidden' }}> // width and height of image you want display.
<Image
source={someImage}
style={{
top: 24,
left: 32,
}} //position of image you want display.
/>
</View>
...
);
}
}
To show your image with full resolution but with only the section you choose, you will need to display the image within a fixed sized container. This image will also need to be a background-image in the style attribute.
<View style={{background-image: this.someImage, background-position-x: -64px, background-position-y: -64px}}>
Giving " overflow:'hidden' " to the parent view also works for me.
Resize-mode:contain will NOT work, as it will resize your image to fit entirely within the 64x64 container, not what you want in this case.
<View style={{width: 64, height: 64, overflow: 'hidden'}}>
<Image
source={{uri: 'https://picsum.photos/200/300'}}
style={{
height: 200,
width: 200,
top: -50,
left: -70,
}}
/>
</View>
I am using react-cropper plugin for resizing the images. I need to provide minimum width and height below which the image cannot be resized. Also minimum width and height must be relative to the actual image size and not according to the viewport image size.
<Cropper
style={{
height: 422,
width: "90%",
margin: "0 auto",
marginTop: 25
}}
preview=".img-preview"
guides={false}
aspectRatio={16 / 9}
src={this.state.imageSrc}
ref="cropper"
viewMode={1}
className={classes.CropperCustomize}
zoomable={false}
/>
<Cropper
style={{
height: 422,
width: "90%",
margin: "0 auto",
marginTop: 25
}}
crop={this.crop}
draggable={false}
preview=".img-preview"
guides={false}
aspectRatio={16 / 9}
src={this.state.imageSrc}
ref="cropper"
viewMode={1}
className={classes.CropperCustomize}
zoomable={false}
/>
crop = e => {
if (
e.detail.width < this.props.cropWidth ||
e.detail.height < this.props.cropHeight
) {
this.refs.cropper.cropper.setData(
Object.assign({}, e.detail, {
width:
e.detail.width < this.props.cropWidth
? this.props.cropWidth
: e.detail.width,
height:
e.detail.height < this.props.cropHeight
? this.props.cropHeight
: e.detail.height
})
);
}
return;
};