{"size": 5063, "ext": "js", "max_stars_repo_path": "src/views/Dashboard/Visualizer.js", "max_stars_repo_name": "talexie/his_soci", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/views/Dashboard/Visualizer.js", "max_issues_repo_name": "talexie/his_soci", "max_issues_repo_issues_event_min_datetime": "2019-11-05T12:09:40.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T19:12:43.000Z", "max_forks_repo_path": "src/views/Dashboard/Visualizer.js", "max_forks_repo_name": "talexie/his_soci", "max_forks_repo_forks_event_min_datetime": "2019-11-07T13:16:04.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-11T10:17:30.000Z"}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": 2, "avg_line_length": 31.4472049689, "max_line_length": 109, "alphanum_fraction": 0.4805451313}
import React, { useState, useEffect, useCallback } from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import {
  Card,
  CardHeader,
  CardContent,
  CardActions,
  Divider,
  Grid,
  Hidden
} from '@material-ui/core';

//import { UrlContext } from '../../App';

import {  Chart, UserButton, MultiFilter, changeChartType } from 'components';

const useStyles = makeStyles(() => ({
  root: {},
  chartContainer: {
    height: 400,
    position: 'relative'
  },
  chartDetailedContainer: {
    height: 600,
    position: 'relative'
  },
  actions: {
    justifyContent: 'flex-end'
  }
}));
const HSVisualizer = ({ hisDomains, hisComponents,hisSubComponents, className, ...rest }) => {
  //const urlContextValue = useContext(UrlContext);
  const classes = useStyles();
  const filters = ['line','column','area','polar'];
  const [type, setType]= useState('line');
  const description = "";
  const domainChartOptions = changeChartType(hisDomains,'polar');

  const getFilter =useCallback((ev)=>{
    if(ev !== undefined){
      if(ev.length > 0 && ev.isArray){
      
        if (type !== ev[0]) {
          // Row changed since last render. Update isScrollingDown.
          setType(ev[0] !== null && type > ev[0]);
        }
      }
      else{
        setType(ev);
      }
    }
  
  },[type]);

 
  /**
   * handleChange for chart re-drawing
   */
  const drawChart=useCallback(async(ev)=>{
    getFilter(ev);
  },[getFilter]);
  useEffect((ev)=>{
    drawChart(ev);    
  },[hisDomains,hisSubComponents,hisComponents,drawChart]);
  return (
    <div>
      <Grid container spacing={2} direction="column" justify="space-around" alignItems="center">
        <Grid item container spacing={2} direction="row" justify="space-around" alignItems="center">
          <Grid item lg={6} xs={12} md={6} xl={6}>
            <Card className={clsx(classes.root, className)}>
              <CardHeader
                action={
                  <Grid container>
                    <Grid item>
                      <MultiFilter label={'Chart Type' } data={ filters } getData={ getFilter} />
                    </Grid>
                    <Grid item>
                      <UserButton color="primary" variant="text" value="Update" getFormData={ drawChart }/>
                    </Grid>                 
                  </Grid>
                }
                title={ "HIS Domains" }
              />
              <Divider />
              <CardContent>
                <Chart options= { domainChartOptions } />
              </CardContent>
              <Divider />
              <CardActions>
                <div>{ description }</div>
              </CardActions>
            </Card>
          </Grid>
          <Grid item lg={6} xs={12} md={6} xl={6}>
            <Card className={clsx(classes.root, className)}>
              <CardHeader
                action={
                  <Grid container>
                    <Grid item>
                      <MultiFilter label={'Chart Type' } data={ filters } getData={ getFilter} />
                    </Grid>
                    <Grid item>
                      <UserButton color="primary" variant="text" value="Update" getFormData={ drawChart }/>
                    </Grid>                 
                  </Grid>
                }
                title={ "HIS Subcomponents" }
              />
              <Divider />
              <CardContent>
                <Chart  options= { hisComponents }/>
              </CardContent>
              <Divider />
              <CardActions>
                <div>{ description }</div>
              </CardActions>
            </Card>
          </Grid>
        </Grid>
        <Hidden xsUp={ true }>
          <Grid item container spacing={2} direction="row" justify="space-around" alignItems="center">
            <Grid item lg={12} xs={12} md={12} xl={12}>
              <Card className={clsx(classes.chartDetailedContainer, className)}>
                <CardHeader
                  action={
                    <Grid container>
                      <Grid item>
                        <MultiFilter label={'Chart Type' } data={ filters } getData={ getFilter} />
                      </Grid>
                      <Grid item>
                        <UserButton color="primary" variant="text" value="Update" getFormData={ drawChart }/>
                      </Grid>                 
                    </Grid>
                  }
                  title={ "HIS Current Status Breakdown" }
                />
                <Divider />
                <CardContent>
                  <Chart options= { hisSubComponents } />
                </CardContent>
                <Divider />
                <CardActions>
                  <div>{ description }</div>
                </CardActions>
              </Card>
            </Grid>
          </Grid>
        </Hidden>
      </Grid>
    </div>
  );
};

HSVisualizer.propTypes = {
  className: PropTypes.string
};

export default HSVisualizer;
