As i was trying to add link in my custom tooltip of recharts, i can not able to hover on tooltip content it will be hidden automatically, is there any props that i need to override for of recharts to make it clickable?.
Below is my tooltip
<Tooltip content={(value)=>renderTooltip(value)} />
Below is my renderTooltip which i am using it
const renderTooltip = (props) => {
if (props.active) {
return (
<div >
<div className="tool-tip">
<span className="tool-tip-footer">
{' '}
Google
</span>
</div>
</div>
);
}
I got this working by doing adding trigger='click' prop and adding a style pointer-events: auto to the parts of the tooltip I wanted to be clickable.
The recharts tooltip wrapper has pointer-events: none which prevented clicking it even after changing the trigger.
The Tooltip component calculates internally if the content has to be shown or not, so you don't have to. This might be causing some issues beyond your control.
Related
I am working on a web app, and I am trying to make it responsive, but I am running into a few problems. I am using media queries to detect if the screen width is > than a certain amount or < than a certain amount. Based on that, I would want to change the layout of my component, so that it does not cram and move everything out of alignment. However, it seems like if my goal is to reorder the child components within my component using conditional rendering based on the media query result, then my code would be repeated multiple times. Hence, I am checking to see if there are any other ways to accomplish this.
Below is a screenshot of the browser when the screen size gets smaller, the contents get too cramped up, and hence it messes up the alignment.
Below is a snippet of my code (this code represents the right side of the image -> Revenue and Revenue KPI)
<Row justify="space-around">
<Col span={11}>
<Statistic
title="Revenue"
value={data[metric].revenue}
valueStyle={{ color: '#3f8600' }}
/>
</Col>
<Divider type="vertical" />
<Col span={11}>
Revenue KPI
<Button shape='circle' size='small' onClick={() => handleClick('rev', metric, 'post')} style={{ marginLeft: '5%' }}>
<PlusOutlined />
</Button>
<Statistic
value={data[metric].rev_kpi}
valueStyle={{ color: '#3f8600' }}
/>
</Col>
</Row>
What I would want to do, is to change the grid layout once the screen width is smaller than a certain amount, and instead of the components above being in the same Row, I would want each to be in their Row (stacking on top of each other). However, if I were to do this using conditional rendering, it seems like I would have to repeat the code quite a fair bit, which seems tedious and messy. Hence, I am hoping if there are any more efficient methods to achieve what I would want to make.
The UI package I am using is AntD (where I got the components for Row, Col, Statistic, Button)
https://ant.design/components/grid/
this is my media query function (I use this function to return a boolean based on the query I pass in)
import { useEffect, useState } from "react";
function useMediaQuery(
query,
defaultMatches = window.matchMedia(query).matches
) {
const [matches, setMatches] = useState(defaultMatches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) setMatches(media.matches);
const listener = () => setMatches(media.matches);
media.addListener(listener);
return () => media.removeListener(listener);
}, [query, matches]);
return matches;
}
export default useMediaQuery;
All help is appreciated, thanks all! Do guide me along as I am new to React and especially new to implementing responsive websites!
Since Row and Col in ant design seems to be based on flex you should try to use the CSS order property to re-arrange your elements
https://developer.mozilla.org/en-US/docs/Web/CSS/order
It is also available as a prop on the Col component:
https://ant.design/components/grid/#Col
CSS order demo (use media query to change order value for various screen sizes):
div {
display: flex;
flex-direction: column;
}
#reverse:checked ~ div>p:first-child {
order: 2;
}
<input type="checkbox" id="reverse"/>
<label for="reverse">reverse</label>
<div>
<p>First text element in HTML</p>
<p>Second text element in HTML</p>
<div>
For even more complex rearrangement of your elements you could use CSS Grid:
grid-template-areas: give custom names to areas in your grid
grid-area: place element in the grid using one of your custom names
use media-queries to change grid-template-areas and it should work nicely
https://css-tricks.com/snippets/css/complete-guide-grid/
I am currently trying to integrated a virtualized table in react using react–virtualized, however the table does not seem to render correctly and I am trying to understand as to why. I also have a few other problems that I cant find documentation on how to do as I have pointed out below.
It would be great if anyone has something or could help.
Below is the code I am using and my goal with this is to be able to:
1- Scroll with the page the table
2- Height of rows be automatic and widths
3- The numbers shown in the row need to be formatted some depending on condition and same for wealth depending on condition may show red or green using css.
Now I have been able to get scroll to partially work however at the top of the scroll it shows massive white space when I scroll down while the table is still in view.
<WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<Table
width={1000}
autoHeight
height={height}
headerHeight={30}
rowHeight={40}
scrollTop={scrollTop}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={this.setData.length}
rowGetter={({index}) => this.setData[index]}>
<Column label="Country" dataKey="country" />
<Column label="Flag" dataKey="flag" />
<Column label="Population" dataKey="population" />
<Column label="Wealth" dataKey="wealth" />
</Table>
)}
</WindowScroller>
Also just out of curiosity is there any library or way that you can just render content on scrolling eg infinite loading on scrolling down the screen that way it renders everything out of the screen as it comes in or as its about 200px from coming into view ?
You can use Material-UI tables for a customizable table, it's very easy and flexible.
If you prefer to use a specific table please share code.
I am rendering an <AppBar> with a large z-index value (using withStyles, it has a value of theme.zIndex.modal + 2 which computes to 1202).
The reason for this is to ensure my <Drawer> component remains hidden behind the <AppBar> when it's opened (i.e. a clipped drawer).
However when I render a <Select> component within my appbar, the 'dropdown' div does not have a large enough z-index value to be displayed, and so it ends up being hidden behind the appbar.
A basic example is as follows:
let Test = ({classes}) => (
<AppBar className={classes.appbar} elevation={2} position='relative'>
<Toolbar>
<Select>
<MenuItem>{"Item 1"}</MenuItem>
<MenuItem>{"Item 2"}</MenuItem>
</Select>
</Toolbar>
</AppBar>
)
const styles = theme => ({
appbar: {
zIndex: theme.zIndex.modal + 2,
margin: 0
}
})
Test = withStyles(styles)(Test);
Overriding the z-index on any of <Select>'s exposed classes does not seem to fix my problem. How can I ensure <Select> appears in front of <AppBar>?
You can use the style attribute on all components in Material-UI
<Select style={{zIndex: X}}>
...
</Select>
Cf: https://v0.material-ui.com/#/components/select-field
For details about all the available styles attributes.
You can use PaperProps on Drawer component to adjust zindex instead of changing Select component's zindex.
Using this example: https://ant.design/components/layout/#components-layout-demo-side
How can I add a custom image or icon instead of the default icons.
I tried:
<Menu.Item to="/" key="2">
<img className="ant-menu-item" src={require('image.png')} />
<span>Shopify</span>
<Link to="/shopify">Home</Link>
</Menu.Item>
But that does not look good or does not respect the collapsed behaviour
I tried several different ways of creating custom icons, and the one that was easiest and worked best was to use the component property of the antd Icon component. Just give it a functional component that returns whatever image you want to use:
<Icon component={() => (<img src="/image.svg" />)} />
This seems to work well within menu items and submenus, except that the icons don't line up perfectly with the menu text like the built-in icons do. I ended up adding transform: translateY(-3px) to the CSS to compensate for this (might depend on the image you use).
On the other hand, the official solution (for SVG images only) is to use the #svgr/webpack plugin to turn the SVG file into a component. This may have some advantages as far as layout and coloring (antd icons seem to prefer actual <svg> elements over <img> elements with SVG image files). But I'm not sure because I didn't go to the trouble of setting it up.
<Menu.Item to="/" key="2">
<img className="ant-menu-item" src=="{{ "image.png" | asset_url }}"/>
<span>Shopify</span>
<Link to="/shopify">Home</Link>
</Menu.Item>
I hope this might be work.
you need handle separate css file and put it this code
.ant-menu-item{background-image: url("theme5.jpg");}
icon:<img src="/static/icons/BH_tainan.svg" height={20} style={{margin:"0 12px 0 0" ,paddingTop:10 ,float:"left"}}/>,
need float:"left" in your style
A bit of an old question, but I thought I'd post another solution here for those not wanting to go the webpack route like the docs recommend. You can simply create your own SVG component and then pass it to the antd icon component.
Something like this
// Icons.tsx
export const MyIcon = () => {
return (
<svg>
// svg path data
</svg>
);
};
Then
// app.tsx
import Icon from "#ant-design/icons";
import { MyIcon } from "./Icons";
const App = () => {
return (
<Icon component={MyIcon} />
)
}
I fiddled with this a little bit in a sandbox, and it seems to work just fine. I was using antd 4.23.3 for reference. Didn't test it a huge amount so there might be some style adjusting needed, not sure.
Im using Semantic UI-React. My question is how to position a label or text under an icon? There are only two default options which is left and right of the icon. However I want to position the label below the icon.
Im using Semantic-React library.
For example:
<Button icon labelPosition='left'>
<Icon name='pause' />
Pause
</Button>
In the above snippet the label 'Pause' is added on the left side of the icon in the button.
My requirement is, I want to add the label 'Pause below the icon in the button'. I tried setting the:
labelPosition='down' or 'bottom'
However it does not work. Is there any way to do this?
I came across the same problem.
I believe that this could be done only by overriding the CSS properties of the Button element.
Please try providing !important to the CSS values, since semantic UI takes the highest priority when it comes to priority of the properties.
You can either use a class and define the style there, or else use a specific selector like this: div.ui.stackable.two.column.grid.button{.
Please let me know if this fixes, otherwise I have another solution to it.
Put a line break between the icon and the text.
<Button icon>
<Icon name='pause' />
<br />
Pause
</Button>
To change the amount of space between the icon and the text, you can add margin to the line break.
<Button icon>
<Icon name='pause' />
<br style={{marginBottom: '8px'}} />
Pause
</Button>