React - Highcharts Full Screen black bar - javascript

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).

Related

How to make react-window FixedSizeList scroll with the viewport instead of the component's scroll bar?

I am trying to integrate react-window's FixedSizeList and FixedSizeGrid components to increase the initial rendering speed of my page. Is there some way for me to let the user scroll down the react-window component using the viewport's scrolling area? I was also
wondering if there is some way to remove the scrollbar from the react-window component and only use the viewport's scrolling as I described above.
I tried integrating the documentation version of FixedSizeList into my page and as you can see, since the total height of all my rows is greater than the height I specified in the component so the vertical scrollbar beside the component appears, which I want to remove. I also cannot figure out how to let scrolling downwards on the viewport make the react-window component scroll down the rest of its rows.
From looking online, I think I might need to modify the CSS style of the FixedSizeList to have overflow:hidden to remove the scrollbar but how can I ensure that I keep the scrolling functionality and that the user can scroll down the component from anywhere in the viewport?
Current version with no react-window
FixedSizeList version
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
<FixedSizeList
height={500}
itemCount={38}
itemSize={35}
width={"100%"}
>
{Row}
</FixedSizeList>
One solution is to use a package linked from the react-window github page called react-virtualized-auto-sizer. It is also made by bvaughn and is a good solution to the problem.
This solves the issue by allowing you to set the height of your FixedSizedList to the height of its content, so it does not get a scrollbar. Here's how that would look:
<AutoSizer>
{({ height, width }) => (
<FixedSizeList
className="List"
height={height}
itemCount={1000}
itemSize={35}
width={width}
>
{Row}
</FixedSizeList>
)}
</AutoSizer>
Here's a full example on codesandbox:

In React Native, is there a way to make a deeply nested element a full-screen element?

I have a React Native Expo app in which I'd like to make an element full-screen with essentially the following styles:
{
bottom: 0,
left: 0,
position: 'absolute',
right: 0,
top: 0
}
The problem is, I want to do this for an element that is deeply nested within the structure of my screen. As a simplified example, the structure of my current screen is something like the following:
<View>
<View>
<View>
<ComponentA>
<ComponentB>
<ComponentC>
</ComponentC>
<ComponentC>
</ComponentC>
<ComponentC>
</ComponentC>
</ComponentB>
</ComponentA>
</View>
</View>
</View>
What I want to do is set up something in ComponentC so that when you tap a button in that component, it causes an element within that same component to display full-screen.
Apparently though, in React Native, all elements are position: relative by default. As such, when I apply the styles above to the element I want to be full-screen in ComponentC, it doesn't show up as full-screen, but rather as filling the entirety of that particular ComponentC only.
Is there any way to get around this? I was thinking about taking the part of ComponentC that I want to have full-screen and placing it outside of ComponentC and at the top of my screen structure, but then, it's completely separated from ComponentC itself, and then I'd have to also coordinate that separate element so that it works with all of the various ComponentCs on the screen. Also, when I tried doing that, I ran into a bunch of issues with trying to properly maintain state.
Maybe I'm just taking the wrong approach to begin with, but is there a way to get what I want with some simple styling so that a deeply nested element can still be displayed full-screen, or am I going to have to engineer some complex thing to do what I want, and if it's the latter, any recommendations on how to approach this? Thank you.
To show something full screen no matter where you are in the hierarchy, you can use the Modal component: https://reactnative.dev/docs/modal.
Note: this solution will not work out-of-the-box if you want the relatively positioned element to fluidly transition into full screen (so-called hero or shared-element transition) - not sure if that is what you are after.
If you want to split your component, you can communicate from ComponentC to the top component directly with DeviceEventEmitter
in ComponentC:
import {
DeviceEventEmitter
} from 'react-native'
In the function which handle the onPress action of your button you can call DeviceEventEmitter like that:
DeviceEventEmitter.emit('whateverName', { myData: {} })
Then in the top component
DeviceEventEmitter.addListener('whateverName', (myData) => );

React Native get available height for content

I have a custom component which needs its height to be set explicitely. I'm having trouble with calculating the available space on different devices.
The top bar is no problem cause I use the StatusBar height, but on the bottom, the iPhone X has some space for that "bar" and I don't know how to calculate this (I could match the device but maybe there are more devices with this space on the bottom).
Is there any way to calculate this? I'm using Expo btw.
I don't know what is your primary goal but here are my suggestions:
If you want to calculate the available height you can create a View with style {flex:1} then use onLayout built-in function of a View. Here how it works:
onLayout=({nativeEvent})=>{
// Here is height
console.warn(nativeEvent.layout.height)
}
<View style={styles.container}>
<YourComponents/>
{/*The part you want to calculate height*/}
<View style={{flex:1}} onLayout={onLayout}/>
</View>
If you want to just avoid the notch of the device you can use SafeAreaView. Here is the full documentation. PS. react-native's built in SafeAreaView component has been moved to react-native-safe-area-view

Making antd's Sider responsive

I am attempting to implement a responsive app with antd.
One of the things I have is a Sider menu as my main navigation. One of the things I would like to do is that on small screens this sider be collapsed (as the hamburguer icon preferrably). I have no idea how to even start this. My component with the sidebar looks something like this:
class App extends React.Component {
render() {
return (
<Layout>
<Sider width={200} collapsedWidth={500}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</Menu>
</Sider>
</Layout>
);
}
}
I should probably also point out that from the Layout docs, the following is said:
Note: You can get a responsive layout by setting breakpoint, the Sider will collapse to the width of collapsedWidth when window width is below the breakpoint. And a special trigger will appear if the collapsedWidth is set to 0.
However I could not get this to work. Perhaps I misunderstand it.
Unfortunately I am not able to embed my sample app in the editor here, so I here is my working sample app. All I would like to do is collapse my Sider navbar into a hamburguer icon or even an arrow like icon on small screens. Where do I go from here?
You have a collapsible sider official example.
From here you can choose whatever width \ icons you need based on state.
Also, you have a good example of antd components, especially a sidebar with the hamburger icon.

Semantic UI React - Adding Reveal Effect to Images in Cards

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 :)

Categories