I have a screen with 10 charts (using recharts.org) -- when clicking on a chart I want to switch the route from http://localhost:3000/charts to http://localhost:3000/charts/first and simply have the first chart shown full screen, but without it being re-rendered since no data will change whatsoever.
Any advice on how I may achieve this?
The only way to do that (at least in my previous experiences) would be to have the chart on the same level as the Route (with some conditionals...), if you don't need it on top you can change the route place ... the thing is that it doesn't give much flexibility for grid/flex but it works :P (in my case I had the selected graph always on top so it was perfect fit, you may try some conditional styling based on the location but I am afraid it would rerender)
<Route path="/charts" >
{history.pathname === '/charts/first' && <Chart data ..../>}
{history.pathname === '/charts/second' && <Chart data ..../>}
<Route path="/charts/first" >
<h1> Up you have the unRendered graph </h1>
</Route>
</Route>
*
Chart is a wrapper of any rechart graph(bar, pie ...) and has the REACT MEMO IMPLEMENTED
*
I spent days with this issue if you need more help just comment here
Related
I have two components like this.
<ComponentA />
<ComponentB />
Where component A will be horizontally scrollable but i want to show its scrollbar in component B.
<ComponentA >
some content over here which is wide enough to get horizontal scroll
</ComponentA>
<ComponentB>
some content
//scrollbar of ComponentA
more content
</ComponentB>
Hope i made the problem clear :)
I guess i can use useRef but don't know how in this scenario
I am newbie i hope i understand your question and i try my best.
use overflow-x/overflow-y: scroll;
so you can easily get a scrollbar in component A, but this will always visible.
Hi, I am currently a beginner to React.js, and I want to know if I could divide the a page's body with different background color without adding multiple components.
I have implemented the header and the footer, but I do not have any ideas to divide a body area into three parts. For example,
function App() {
return (
<div className="App">
<Navbar />
<AreaOne/>
<AreaTwo/>
<AreaThree/>
<Footer />
</div>
);
}
I was thinking about to use this kind of method, but I think it might be a better / more commonly used method. Any ideas would be appreciated
I'm trying to implement an application using highcharts/highstock and I'm facing a problem trying to use the full screen function.
I need to set a fixed hight to my charts and be able to view each chart from my page as a full screen one, but since the height is fixed it stays the same when full screen loads, I've tried the approach from this post but it's not working, if I set height to 100% the chart overflows the page and gets crooped depending on the aspect ratio of the screen.
I´ve also found this working demo, I can't replicate this one. I'm not sure how he's calling the component, also I don't know how the export module (hamburguer menu) is showing up if it's never called.
render() {
return <div className="chart" ref={ref => this.container = ref} />
}
on my application I'm calling the component this way
render() {
return (
<HighchartsReact
highcharts={Highcharts}
constructorType="stockChart"
options={options}
allowChartUpdate
callback={this.afterChartCreated}
/>
)
}
I tried passing an ID to this element to try to set height via CSS but it doesn't work.
I was trying to replicate my application with a working example, I could only do it on a codesandbox because of import structure, but for some reason full screen is not working there, it prompts this message
Full screen is not supported inside a frame.
This demo creates the chart without using Highcharts React wrapper - it's a combination of pure Highcharts JS and React - that's why export menu shows without called it. The Highcharts React wrappers work similarly, but more in 'React way' and gives other opportunities to manage the component.
Back to your issue - I think that a better approach will be defining the height of the Highcharts component as inline React styling. You can achieve by setting it in containerProps object.
<CardContent style={{ padding: 0 }}>
<HighchartsReact
highcharts={Highcharts}
containerProps={{ style: { height: "400px" } }}
options={options}
allowChartUpdate
/>
</CardContent>
Demo: https://codesandbox.io/s/fix-full-screen-253sq?file=/src/CustomGUIChart.js
To test it use the open in new window codesandbox option (button just above the exporting menu hamburger).
The title says it all.
Is it possible to add the Semantic UI Reveal effect to Images in Cards?
This would be a very nice feature when designing ecommerce websites with Semantic UI + React, for example for having two images for each product, when hovering.
Moreover, when using Semantic UI without React, it is totally possible.
It seems like the React component has a bug where its not specifying the width of the "visible" element in the Reveal. The "hidden" element does have a width of "100%" specified.
See that offset?
So, when we add that in, the positioning of the "visible" component correctly overlays the "hidden" as demo'd in this codesandbox:
https://codesandbox.io/s/v8mylv1p3
Alternatively, if you had the images formatted to take up full-width to begin with, then it probably works fine.
I answer myself because I have found a (not very smart, I admit it) workaround for this problem. Currently, it is working with the following versions of Semantic UI + Semantic UI React.
Last update in March 2018:
"semantic-ui": "^2.3.1",
"semantic-ui-react": "^0.79.0"
In my component, I simply get rid of the direct <Image> or <Reveal> components and use a plain <div> JSX component (containing two Images to emulate the Reveal behaviour):
...
<Card>
<div className={'ui slide masked reveal image'}>
<Image src='/img/products/1.jpg' className={'visible content'} />
<Image src='/img/products/2.jpg' className={'hidden content'} />
</div>
<Card.Content>
<Card.Header textAlign={'center'}>
Product name
</Card.Header>
...
This results in a minimum impact with the desired funcionality :)
I am fairly new to React and struggling with implementing a sidebar that is dynamic to each page and has animations that shouldn't stop the navigation of the app's core content.
Below is the root of the app.
<Router>
<div className="app-container">
<LeftSidebar sidebarState={ this.state.sidebar.left } />
<RightSidebar sidebarState={ this.state.sidebar.right } />
<div
style={{
marginLeft: (this.state.sidebar.left.open ? this.state.sidebar.left.width : 0),
marginRight: (this.state.sidebar.right.open ? this.state.sidebar.right.width : 0)
}}
className='app-content'>
<Toolbar toggleSidebar={ this.toggleSidebar } />
<Switch>
<Route exact path="/" component={ Dashboard } />
<Redirect from="/dashboard" to="/" />
<Route path="/gear" render={ (props) => <Gear {...props} toggleSidebar={ this.toggleSidebar } /> } />
<Route component={ PageNotFound } />
</Switch>
</div>
</div>
</Router>
Sidebars at the top, absolute positioned left and right. (These are set to translate -100% and 100% to animate in and out, with an app-content moving margin with the same transition)
The app-content div contains the main content, which is the active component.
I'm working on the /gear component and I'm adding a sidebar to edit an item, though I'd like to have the sidebar available since I will more than likely use it in the other views.
To try and solve this problem I made a new component for gear sidebar (and would make other sidebar components as needed) and moved it into the gear component which then used a portal to move it to the body so it would style correctly. Then I'd toggle it by passing a toggleSidebar function which just flips a boolean in the state for the given side. This kinda worked but when navigating between pages I tried to have a ReactCSSTransitionGroup but I don't want to main content to wait for the timeout since it can happen as the new component is loaded.
So since I need the sidebar to be loaded and animating closing if open while the component it's connected to is unmounting, it'd only make sense to move it to the parent.
The only problem is, how do I load a dynamically passed component in the sidebar, then easier to solve wait for a timeout before its loaded so the animation can occur.
I was thinking of passing a function to the component that is being navigated to which can be executed to pass a component to render in the sidebar. It'd need to be a component since it will need still need to have methods etc. attached to it.
Otherwise, I thought using a router might work, but I'm not sure if you can timeout (if open) when they are unmounted to prevent it being moved to the other route.
Finally, the only way I get it to work at the moment is if I verbosely define sidebars and mount them dependent on the route, basically making a custom react-router.
Really struggling with this, any helps appreciated.