Skip to content
Snippets Groups Projects
Commit f7604370 authored by BISSON REMI's avatar BISSON REMI
Browse files

removed unused components and pages

parent 1253cf18
No related branches found
No related tags found
2 merge requests!9Merge develop into master,!4Resolve "Clean JS code"
Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 621 deletions
src/components/PageTitle/PageTitle.js deleted 100644 → 0
+ 0
− 30
View file @ 1253cf18
import React from 'react';
import { Button } from '@material-ui/core';
// styles
import useStyles from './styles';
// components
import { Typography } from '../Wrappers';
export default function PageTitle(props) {
const classes = useStyles();
return (
<div className={classes.pageTitleContainer}>
<Typography className={classes.typo} variant="h1" size="sm">
{props.title}
</Typography>
{props.button && (
<Button
classes={{ root: classes.button }}
variant="contained"
size="large"
color="secondary"
>
{props.button}
</Button>
)}
</div>
);
}
src/components/PageTitle/package.json deleted 100644 → 0
+ 0
− 6
View file @ 1253cf18
{
"name": "PageTitle",
"version": "0.0.0",
"private": true,
"main": "PageTitle.js"
}
src/components/PageTitle/styles.js deleted 100644 → 0
+ 0
− 20
View file @ 1253cf18
import { makeStyles } from '@material-ui/styles';
export default makeStyles((theme) => ({
pageTitleContainer: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(4),
marginTop: theme.spacing(5),
},
typo: {
color: theme.palette.text.hint,
},
button: {
boxShadow: theme.customShadows.widget,
textTransform: 'none',
'&:active': {
boxShadow: theme.customShadows.widgetWide,
},
},
}));
src/components/UserAvatar/UserAvatar.js deleted 100644 → 0
+ 0
− 27
View file @ 1253cf18
import React from 'react';
import { useTheme } from '@material-ui/styles';
// styles
import useStyles from './styles';
// components
import { Typography } from '../Wrappers';
export default function UserAvatar({ color = 'primary', ...props }) {
const classes = useStyles();
const theme = useTheme();
const letters = props.name
.split(' ')
.map((word) => word[0])
.join('');
return (
<div
className={classes.avatar}
style={{ backgroundColor: theme.palette[color].main }}
>
<Typography className={classes.text}>{letters}</Typography>
</div>
);
}
src/components/UserAvatar/package.json deleted 100644 → 0
+ 0
− 6
View file @ 1253cf18
{
"name": "UserAvatar",
"version": "0.0.0",
"private": true,
"main": "UserAvatar.js"
}
src/components/UserAvatar/styles.js deleted 100644 → 0
+ 0
− 15
View file @ 1253cf18
import { makeStyles } from '@material-ui/styles';
export default makeStyles(() => ({
avatar: {
width: 30,
height: 30,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '50%',
},
text: {
color: 'white',
},
}));
src/components/Widget/WidgetView.js deleted 100644 → 0
+ 0
− 116
View file @ 1253cf18
import React from 'react';
import classnames from 'classnames';
import { Paper, IconButton, Menu, MenuItem, withStyles } from '@material-ui/core';
import { MoreVert as MoreIcon } from '@material-ui/icons';
import Typography from '@material-ui/core/es/Typography/Typography';
const Widget = ({
classes,
children,
title,
noBodyPadding,
bodyClass,
className,
disableWidgetMenu,
...props
}) => (
<div className={classes.widgetWrapper}>
<Paper className={classes.paper} classes={{ root: classes.widgetRoot }}>
<div className={classes.widgetHeader}>
{props.header ? (
props.header
) : (
<React.Fragment>
<Typography variant="h5" color="textSecondary">
{title}
</Typography>
{!disableWidgetMenu && (
<IconButton
color="primary"
classes={{ root: classes.moreButton }}
aria-owns="widget-menu"
aria-haspopup="true"
onClick={() => props.setMoreMenuOpen(true)}
ref={props.setMoreButtonRef}
>
<MoreIcon />
</IconButton>
)}
</React.Fragment>
)}
</div>
<div
className={classnames(classes.widgetBody, {
[classes.noPadding]: noBodyPadding,
[bodyClass]: bodyClass,
})}
>
{children}
</div>
</Paper>
<Menu
id="widget-menu"
open={props.isMoreMenuOpen}
anchorEl={props.moreButtonRef}
onClose={() => props.setMoreMenuOpen(false)}
disableAutoFocusItem
>
<MenuItem>
<Typography>Edit</Typography>
</MenuItem>
<MenuItem>
<Typography>Copy</Typography>
</MenuItem>
<MenuItem>
<Typography>Delete</Typography>
</MenuItem>
<MenuItem>
<Typography>Print</Typography>
</MenuItem>
</Menu>
</div>
);
const styles = (theme) => ({
widgetWrapper: {
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing.unit * 3,
paddingBottom: theme.spacing.unit,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
},
widgetBody: {
paddingBottom: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit * 3,
paddingLeft: theme.spacing.unit * 3,
},
noPadding: {
padding: 0,
},
paper: {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing.unit,
padding: 0,
width: 40,
height: 40,
color: theme.palette.text.hint,
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: 'rgba(255, 255, 255, 0.35)',
},
},
});
export default withStyles(styles, { withTheme: true })(Widget);
src/pages/charts/Charts.js deleted 100644 → 0
+ 0
− 218
View file @ 1253cf18
import React, { useState } from 'react';
import { Grid } from '@material-ui/core';
import { useTheme } from '@material-ui/styles';
import {
CartesianGrid,
Legend,
Line,
LineChart,
Pie,
PieChart,
ResponsiveContainer,
Sector,
Tooltip,
XAxis,
YAxis,
} from 'recharts';
import Widget from '../../components/Widget/Widget';
import ApexLineChart from './components/ApexLineChart';
import ApexHeatmap from './components/ApexHeatmap';
import PageTitle from '../../components/PageTitle/PageTitle';
const lineChartData = [
{
name: 'Page A',
uv: 4000,
pv: 2400,
amt: 2400,
},
{
name: 'Page B',
uv: 3000,
pv: 1398,
amt: 2210,
},
{
name: 'Page C',
uv: 2000,
pv: 9800,
amt: 2290,
},
{
name: 'Page D',
uv: 2780,
pv: 3908,
amt: 2000,
},
{
name: 'Page E',
uv: 1890,
pv: 4800,
amt: 2181,
},
{
name: 'Page F',
uv: 2390,
pv: 3800,
amt: 2500,
},
{
name: 'Page G',
uv: 3490,
pv: 4300,
amt: 2100,
},
];
const pieChartData = [
{ name: 'Group A', value: 400 },
{ name: 'Group B', value: 300 },
{ name: 'Group C', value: 300 },
{ name: 'Group D', value: 200 },
];
export default function Charts() {
const theme = useTheme();
let [activeIndex, setActiveIndexId] = useState(0);
return (
<>
<PageTitle title="Charts Page - Data Display" button="Latest Reports" />
<Grid container spacing={4}>
<Grid item xs={12} md={6}>
<Widget title="Apex Line Chart" upperTitle noBodyPadding>
<ApexLineChart />
</Widget>
</Grid>
<Grid item xs={12} md={6}>
<Widget title="Apex Heatmap" upperTitle noBodyPadding>
<ApexHeatmap />
</Widget>
</Grid>
<Grid item xs={12} md={8}>
<Widget title="Simple Line Chart" noBodyPadding upperTitle>
<ResponsiveContainer width="100%" height={350}>
<LineChart
width={500}
height={300}
data={lineChartData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="pv"
stroke={theme.palette.primary.main}
activeDot={{ r: 8 }}
/>
<Line
type="monotone"
dataKey="uv"
stroke={theme.palette.secondary.main}
/>
</LineChart>
</ResponsiveContainer>
</Widget>
</Grid>
<Grid item xs={12} md={4}>
<Widget title="Pie Chart with Tooltips" noBodyPadding upperTitle>
<ResponsiveContainer width="100%" height={300}>
<PieChart width={200} height={300}>
<Pie
activeIndex={activeIndex}
activeShape={renderActiveShape}
data={pieChartData}
cx={200}
cy={150}
innerRadius={60}
outerRadius={80}
fill={theme.palette.primary.main}
dataKey="value"
onMouseEnter={(e, id) => setActiveIndexId(id)}
/>
</PieChart>
</ResponsiveContainer>
</Widget>
</Grid>
</Grid>
</>
);
}
function renderActiveShape(props) {
const RADIAN = Math.PI / 180;
let {
cx,
cy,
midAngle,
innerRadius,
outerRadius,
startAngle,
endAngle,
fill,
payload,
percent,
value,
} = props;
const sin = Math.sin(-RADIAN * midAngle);
const cos = Math.cos(-RADIAN * midAngle);
const sx = cx + (outerRadius + 10) * cos;
const sy = cy + (outerRadius + 10) * sin;
const mx = cx + (outerRadius + 30) * cos;
const my = cy + (outerRadius + 30) * sin;
const ex = mx + (cos >= 0 ? 1 : -1) * 22;
const ey = my;
const textAnchor = cos >= 0 ? 'start' : 'end';
return (
<g>
<text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
{payload.name}
</text>
<Sector
cx={cx}
cy={cy}
innerRadius={innerRadius}
outerRadius={outerRadius}
startAngle={startAngle}
endAngle={endAngle}
fill={fill}
/>
<Sector
cx={cx}
cy={cy}
startAngle={startAngle}
endAngle={endAngle}
innerRadius={outerRadius + 6}
outerRadius={outerRadius + 10}
fill={fill}
/>
<path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
<circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
textAnchor={textAnchor}
fill="#333"
>{`PV ${value}`}</text>
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
dy={18}
textAnchor={textAnchor}
fill="#999"
>
{`(Rate ${(percent * 100).toFixed(2)}%)`}
</text>
</g>
);
}
src/pages/charts/components/ApexHeatmap.js deleted 100644 → 0
+ 0
− 114
View file @ 1253cf18
import React from 'react';
import { useTheme } from '@material-ui/styles';
import ApexCharts from 'react-apexcharts';
const series = [
{
name: 'Metric1',
data: generateData(18, {
min: 0,
max: 90,
}),
},
{
name: 'Metric2',
data: generateData(18, {
min: 0,
max: 90,
}),
},
{
name: 'Metric3',
data: generateData(18, {
min: 0,
max: 90,
}),
},
{
name: 'Metric4',
data: generateData(18, {
min: 0,
max: 90,
}),
},
{
name: 'Metric5',
data: generateData(18, {
min: 0,
max: 90,
}),
},
{
name: 'Metric6',
data: generateData(18, {
min: 0,
max: 90,
}),
},
{
name: 'Metric7',
data: generateData(18, {
min: 0,
max: 90,
}),
},
{
name: 'Metric8',
data: generateData(18, {
min: 0,
max: 90,
}),
},
{
name: 'Metric9',
data: generateData(18, {
min: 0,
max: 90,
}),
},
];
export default function ApexLineChart() {
const theme = useTheme();
return (
<ApexCharts
options={themeOptions(theme)}
series={series}
type="heatmap"
height={350}
/>
);
}
// ##################################################################
function generateData(count, yrange) {
let i = 0;
const series = [];
while (i < count) {
const x = 'w' + (i + 1).toString();
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y,
});
i++;
}
return series;
}
function themeOptions(theme) {
return {
chart: {
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
colors: [theme.palette.primary.main],
};
}
src/pages/charts/components/ApexLineChart.js deleted 100644 → 0
+ 0
− 63
View file @ 1253cf18
import React from 'react';
import ApexCharts from 'react-apexcharts';
import { useTheme } from '@material-ui/styles';
const series = [
{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100],
},
{
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41],
},
];
export default function ApexLineChart() {
const theme = useTheme();
return (
<ApexCharts options={themeOptions(theme)} series={series} type="area" height={350} />
);
}
// ############################################################
function themeOptions(theme) {
return {
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
},
xaxis: {
type: 'datetime',
categories: [
'2018-09-19T00:00:00',
'2018-09-19T01:30:00',
'2018-09-19T02:30:00',
'2018-09-19T03:30:00',
'2018-09-19T04:30:00',
'2018-09-19T05:30:00',
'2018-09-19T06:30:00',
],
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm',
},
},
fill: {
colors: [theme.palette.primary.light, theme.palette.success.light],
},
colors: [theme.palette.primary.main, theme.palette.success.main],
chart: {
toolbar: {
show: false,
},
},
legend: {
show: false,
},
};
}
src/pages/charts/package.json deleted 100644 → 0
+ 0
− 6
View file @ 1253cf18
{
"name": "Charts",
"version": "1.0.0",
"private": true,
"main": "Charts.js"
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment