issues with funnel of highcharts - javascript

I'm trying to create a funnel chart using highcharts-react-official but I get an error that says:
**Uncaught TypeError: Cannot read property 'noop' of undefined
it occurs in funnel.js inside highchart's modules. and makes browers stuck in debugger mode. Any help would be appreciated.
thanks in advance
this is my code:
import React from 'react';
import { Grid, Typography } from '#material-ui/core';
import TextCountComp from '../../../../shared/components/textCount/TextCountComp';
import useStyles from './ChartAnalyticsCompStyle';
import Highcharts from "highcharts/highstock";
import funnel from "highcharts/modules/funnel.js";
import HighchartsReact from "highcharts-react-official";
funnel(Highcharts);
const options = {
series: [
{
type: "funnel",
data: [1, 2, 3]
}
]
}
const ChartAnalyticsComp = () => {
const classes = useStyles();
return (
<Grid container className={classes.root}>
<Grid item xs={2} className={classes.grid}>
<TextCountComp className={classes.box} align="center" headText="Total" value="$0" />
</Grid>
<Grid item xs>
{/* chart goes here */}
Chart
<HighchartsReact highcharts={Highcharts} options={options} />
</Grid>
<Grid container item xs direction="column">
{/* texts goes here just use <Typography> component for each line of text */}
<Typography>Text 1</Typography>
<Typography>Text 2</Typography>
....
</Grid>
</Grid>
);
};
export default ChartAnalyticsComp;
this is the TextCountComp that is used above.
import React from 'react';
import { Box, Typography, TypographyTypeMap } from '#material-ui/core';
interface PropType {
headText: string;
value: string | number;
color?: TypographyTypeMap['props']['color'];
align?: TypographyTypeMap['props']['align'];
border?: boolean;
className?: string;
}
const TextCountComp = (
{
headText, value, color, border, align, className,
}: PropType,
) => (
<Box border={+border!} className={className}>
<Typography variant="body1" color={color}>{headText}</Typography>
<Typography align={align} variant="body1" color="secondary">{value}</Typography>
</Box>
);
TextCountComp.defaultProps = {
color: 'primary',
border: true,
align: 'center',
className: undefined,
};
export default TextCountComp;

Related

How to display a message instead of an empty array

My app has two buttons, one that displays information and another that hides it. This works as intended, however, some of the images loaded in from the API don't have any data available, and when the button to display the info is pressed, it returns a []
How would I target those that load with an empty array, and add in a string. For example "no information for this breed is available?"
App.js
import './App.css';
import './Dog.js';
import './index.css';
import "./Grid.js";
import NestedGrid from './Grid.js';
import Album from './Grid.js';
import AppLayout from './Grid.js';
function DogApp() {
return (
<div className="dogApp">
<AppLayout />
</div>
);
}
export default DogApp;
Grid.js
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Button from '#mui/material/Button';
import Card from '#mui/material/Card';
import CardActions from '#mui/material/CardActions';
import CardContent from '#mui/material/CardContent';
import CardMedia from '#mui/material/CardMedia';
import CssBaseline from '#mui/material/CssBaseline';
import Grid from '#mui/material/Grid';
import Stack from '#mui/material/Stack';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import Container from '#mui/material/Container';
import Link from '#mui/material/Link';
import { createTheme, ThemeProvider } from '#mui/material/styles';
import FetchAPI from './FetchAPI';
const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const theme = createTheme();
export default function AppLayout() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<AppBar position="relative">
</AppBar>
<main>
{/* Hero unit */}
<Box
sx={{
bgcolor: 'background.paper',
pt: 8,
pb: 6,
}}
>
<Container maxWidth="sm">
<Stack
sx={{ pt: 4 }}
direction="row"
spacing={2}
justifyContent="center"
>
</Stack>
</Container>
</Box>
<Container sx={{ py: 8 }} maxWidth="md">
{/* End hero unit */}
<Grid container spacing={4}>
{cards.map((card) => (
<Grid item key={card} xs={12} sm={6} md={4}>
<Card
sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
>
<FetchAPI />
<CardContent sx={{ flexGrow: 1 }}>
</CardContent>
</Card>
</Grid>
))}
</Grid>
</Container>
</main>
</ThemeProvider>
);
}
FetchAPI.js
import React, { useState, useEffect } from 'react'
const FetchAPI = () => {
const [show, setShow] = useState({});
const [data, setData] = useState([]);
const apiGet = () => {
const API_KEY = "";
fetch(`https://api.thedogapi.com/v1/images/search?limit=2&page=10&order=Desc?API_KEY=${API_KEY}`)
.then((response) => response.json())
.then((json) => {
console.log(json);
setData([...data, ...json]);
});
};
useEffect(() => { //call data when pagee refreshes/initially loads
apiGet();
}, []);
return (
<div>
{data.map((item, id) => (
<div>
<img alt="dog photos" className="dogImg" src={item.url}></img>
{show[id] === false ? <p>{JSON.stringify(item.breeds, null, '\t')}</p> : null}
<button onClick={() => setShow((prev) => ({ ...prev, [id]: false }))}>Learn more about this dog!</button>
<button onClick={() => setShow((prev) => ({ ...prev, [id]: true }))}>Hide information</button>
</div>
))}
</div>
)
}
export default FetchAPI;
You can compare the length of array like:
if(arr.length===0){
return "no information for this breed is available"
}
The above condition is just for understanding you can change the logic as well either you want to return or save in some state.

How to map data to react component?

I have data returned from the backend now i am trying to map it to react component which is throwing an error Cannot read property of null what is correct way to print keys in the div or card , i have also attached the data
index.js
import React, { Component } from 'react';
import './app.css';
import ReactImage from './react.png';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import IconButton from '#mui/material/IconButton';
import MenuIcon from '#mui/icons-material/Menu';
import Paper from '#mui/material/Paper';
import Grid from '#mui/material/Grid';
import { styled } from '#mui/material/styles';
export default class JOB_DESC extends Component {
state = { data: null };
async componentDidMount() {
try {
const response = await fetch('/api/getUsername');
const data = await response.json();
this.setState({ data: data });
} catch (e) {
if (e.name != "AbortError") this.setState({ error: e.message });
}
}
render() {
const data = this.state.data;
console.log("DATA", data);
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }} >
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Job.com
</Typography>
</Toolbar>
</AppBar>
<div style={{ padding: 20 }}>
<Grid container spacing={4}>
<Grid item xs={12}>
<p>`{data["User Account"]}`</p>
<p>`{data["User Location"]}`</p>
<p> `{data["Company Name"]}`</p>
</Grid>
</Grid>
</div>
</Box>
);
}
}
data
{ ‘User Account': Admin’,
‘User Location': ': New York, NY',
'Company Name': ': Millennium’ }
It looks like by the time your component gets rendered, data will still be null as you've set it to null. So attempting to index null will give you Cannot read property of null.
What you'd want to do is wrap your component with a condition to check if data exists by the time it renders.
{ data && (
<div style={{ padding: 20 }}>
<Grid container spacing={4}>
<Grid item xs={12}>
<p>`{data["User Account"]}`</p>
<p>`{data["User Location"]}`</p>
<p> `{data["Company Name"]}`</p>
</Grid>
</Grid>
</div>
)}

How to create a dashboard grid with material-ui for react?

I have the following react code and the thing that I want is to create a dashboard, but before I need to create a Grid for it.
I have the following code (using the material-ui grid system "https://material-ui.com/components/grid/")
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
function App() {
const classes = useStyles();
return (
<div>
<Grid container spacing={2}>
<Grid alignItems='baseline' item xs={3}>
<Paper className={`${classes.paper}`}>xs=3</Paper>
</Grid>
<Grid item xs={9}>
<Paper className={classes.paper}>xs=6</Paper>
<Paper className={`${classes.paper} ${styles.content}`} height="100%">xs=6</Paper>
</Grid>
</Grid>
</div>
);
}
export default App;
The result I want is the one from the 1 image, however the result that I have so far is the one from the second image, I am pretty sure that something is wrong with my code, I am not react expert.
Any help here will be aprecciated

Encountered comments is undefined error in react

I'm trying to learn react I keep encountering this error while rendering the post dialog box in the website.
comments.js file:
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import withStyles from '#material-ui/core/styles/withStyles';
import { Link } from 'react-router-dom';
import dayjs from 'dayjs';
// MUI
import Grid from '#material-ui/core/Grid';
import Typography from '#material-ui/core/Typography';
const styles = (theme) => ({
...theme,
commentImage: {
maxWidth: '100%',
height: 100,
objectFit: 'cover',
borderRadius: '50%'
},
commentData: {
marginLeft: 20
}
});
class Comments extends Component {
render() {
const { comments, classes } = this.props;
return (
//Here is the error
<Grid container>
{comments.map((comment, index) => {
const { body, createdAt, userImage, userHandle } = comment;
return (
<Fragment key={createdAt}>
<Grid item sm={12}>
<Grid container>
<Grid item sm={2}>
<img
src={userImage}
alt="comment"
className={classes.commentImage}
/>
</Grid>
<Grid item sm={9}>
<div className={classes.commentData}>
<Typography
variant="h5"
component={Link}
to={`/users/${userHandle}'}
color="primary"
>
{userHandle}
</Typography>
<Typography variant="body2" color="textSecondary">
{dayjs(createdAt).format('h:mm a, MMMM DD YYYY')}
</Typography>
<hr className={classes.invisibleSeparator} />
<Typography variabnt="body1">{body}</Typography>
</div>
</Grid>
</Grid>
</Grid>
{index !== comments.length - 1 && (
<hr className={classes.visibleSeparator} />
)}
</Fragment>
);
})}
</Grid>
);
}
}
Comments.propTypes = {
comments: PropTypes.array.isRequired
};
export default withStyles(styles)(Comments);

Passing Parameter from Child to Parent trough Input React

I try to pass some information from an input field in the child to the parent.
What i have so far is this:
Parent
import React from "react";
import PropTypes from "prop-types";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
import Typography from "#material-ui/core/Typography";
import { withStyles } from "#material-ui/core/styles";
import TimelineWidget from "./timeline-widget/timeline-widget.component";
import ContainerTable from "./container-table/container-table.component";
import HistoryTable from "./history-table/history-table.component";
import ShippingOverview from "./shipping-overview/shipping-overview.component";
import MapWidget from "./map-widget/map-widget.component";
import styles from "./shippingInformation.style";
class shippingInformation extends React.Component {
constructor() {
super();
this.inputChange = this.inputChange.bind(this);
}
state = {
searchString: null
};
inputChange(input){
this.setState({ searchString: input });
};
render() {
const { classes } = this.props;
return (
<div className={classes.DashboardPageWrapper}>
<Grid item xs={12}>
<Grid container justify="center" spacing={16}>
<Grid
key={1}
item
xs={12}
sm={12}
md={9}
className={classes.Widget}
>
<Typography
variant="subheading"
className={classes.WidgetHeading}
>
Timeline of Container #
</Typography>
<Paper className={classes.WidgetContent}>
<TimelineWidget />
</Paper>
</Grid>
<Grid
key={2}
item
xs={12}
sm={12}
md={3}
className={classes.Widget}
>
<Typography
variant="subheading"
className={classes.WidgetHeading}
>
Shipping Overview
</Typography>
<Paper className={classes.WidgetContent}>
<ShippingOverview />
</Paper>
</Grid>
</Grid>
<Grid container justify="center" spacing={16}>
<Grid item xs={12} sm={12} md={9}>
<Grid container justify="center" spacing={16}>
<Grid key={3} item xs={12} className={classes.Widget}>
<Typography
variant="subheading"
className={classes.WidgetHeading}
>
Containers
</Typography>
<Paper className={classes.WidgetContent}>
<ContainerTable />
</Paper>
</Grid>
<Grid key={4} item xs={12} className={classes.Widget}>
<Typography
variant="subheading"
className={classes.WidgetHeading}
>
Status History
</Typography>
<Paper className={classes.WidgetContent}>
<HistoryTable />
</Paper>
</Grid>
</Grid>
</Grid>
<Grid
key={5}
item
xs={12}
sm={12}
md={3}
className={classes.Widget}
>
<Typography
variant="subheading"
className={classes.WidgetHeading}
>
Latest Position
</Typography>
<Paper className={classes.WidgetContent}>
<MapWidget onShippingOverview={this.inputChange.bind(this)} />
</Paper>
</Grid>
</Grid>
</Grid>
</div>
);
}
}
shippingInformation.propTypes = {
classes: PropTypes.shape({}).isRequired
};
export default withStyles(styles, { withTheme: true })(shippingInformation);
Child
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import Typography from "#material-ui/core/Typography";
import TextField from "#material-ui/core/TextField";
import { Bar } from "react-chartjs-2";
import CountUp from "react-countup";
import classNames from "classnames";
import themeStyles from "./shipping-overview.theme.style";
const styles = theme => ({
container: {
display: "flex",
flexWrap: "wrap"
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
width: 200
},
menu: {
width: 200
}
});
export class ShippingOverview extends React.Component {
state = {
searchString: null
};
handleChange(event){
this.setState ({ searchString: event.target.value}, () => {
this.props.onShippingOverview(this.state.searchString);
})
// this.props.onShippingOverview(input);
};
render() {
const { classes } = this.props;
return (
<div className={classes["shipping-overview-widget"]}>
<div>
<form className={classes.container} noValidate autoComplete="off">
<TextField
ref="result"
id="full-width"
label="Tracking ID"
InputLabelProps={{
shrink: true
}}
placeholder="Placeholder"
fullWidth
margin="normal"
onChange={this.handleChange.bind(this)}
value={this.state.input}
/>
</form>
</div>
</div>
);
}
}
ShippingOverview.propTypes = {
theme: PropTypes.shape({
palette: PropTypes.shape({
primary: PropTypes.shape({
dark: PropTypes.string,
main: PropTypes.string,
light: PropTypes.string,
contrastText: PropTypes.string
}),
secondary: PropTypes.shape({
main: PropTypes.string
}),
common: PropTypes.shape({
white: PropTypes.string
})
})
}).isRequired,
classes: PropTypes.shape({}).isRequired
};
export default withStyles(themeStyles, { withTheme: true })(ShippingOverview);
When i now check in the child file only to check the state of searchString it (with console.log()) it seems to work. But as soon as i let it run trough the handleChange function in the child it gives me this error:
> > TypeError: _this2.props.onChild is not a function
33 | handleChange(event){
34 | this.setState ({ searchString: event.target.value}, () => {
> 35 | this.props.onChild(this.state.searchString);
hope someone can help. btw im a noob...
You are using the wrong component in your parent component. Your child component is imported as ShippingOverview but you are using MapWidget. Change to ShippingOverview and it will work.
<ShippingOverview onShippingOverview={this.inputChange} />

Categories

Resources