63 lines
2.3 KiB
JavaScript
63 lines
2.3 KiB
JavaScript
import React, {useState} from 'react';
|
|
import GroupTable from "../table/GroupTable";
|
|
import GroupPie from "./GroupPie";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faBarChart, faChartColumn, faPieChart, faTable} from "@fortawesome/free-solid-svg-icons";
|
|
import {Col, Row} from "react-bootstrap";
|
|
import GroupBarGraph from "./GroupBarGraph";
|
|
|
|
const options = {
|
|
BAR: 'bar',
|
|
COLUMN: 'column',
|
|
PIE: 'pie',
|
|
TABLE: 'table'
|
|
}
|
|
|
|
const Visualizer = ({option, groups, colors, name}) => {
|
|
switch (option) {
|
|
case options.TABLE:
|
|
return <GroupTable groups={groups} colors={colors}/>
|
|
case options.PIE:
|
|
return <GroupPie id={'group-pie-' + new Date()} groups={groups} colors={colors} name={name}/>
|
|
case options.BAR:
|
|
return <GroupBarGraph id={'group-bar-' + new Date()} groups={groups} colors={colors} name={name}
|
|
horizontal/>;
|
|
case options.COLUMN:
|
|
default:
|
|
return <GroupBarGraph id={'group-bar-' + new Date()} groups={groups} colors={colors} name={name}/>;
|
|
}
|
|
}
|
|
|
|
const VisualizerSelector = ({onClick, icon}) => {
|
|
return (
|
|
<button className="btn float-end visualizer-button" onClick={onClick}>
|
|
<FontAwesomeIcon icon={icon} className="col-gray"/>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
const GroupVisualizer = ({groups, colors, name, horizontal}) => {
|
|
const [visualization, setVisualization] = useState(groups.length > 1 ? options.COLUMN : options.TABLE);
|
|
|
|
const selectorFloatStyle = {
|
|
height: "0",
|
|
zIndex: 100,
|
|
position: "absolute",
|
|
width: "100%",
|
|
right: "0",
|
|
top: "0.5rem"
|
|
};
|
|
return <Row>
|
|
<Col md={12} style={selectorFloatStyle}>
|
|
<VisualizerSelector icon={faPieChart} onClick={() => setVisualization(options.PIE)}/>
|
|
<VisualizerSelector icon={faTable} onClick={() => setVisualization(options.TABLE)}/>
|
|
<VisualizerSelector icon={horizontal ? faBarChart : faChartColumn}
|
|
onClick={() => setVisualization(horizontal ? options.BAR : options.COLUMN)}/>
|
|
</Col>
|
|
<Col md={12}>
|
|
<Visualizer option={visualization} groups={groups} colors={colors} name={name}/>
|
|
</Col>
|
|
</Row>
|
|
};
|
|
|
|
export default GroupVisualizer |