add prettier formatter to all file
This commit is contained in:
Ehsan
+75
-64
@@ -1,70 +1,81 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { LineChart, lineElementClasses } from "@mui/x-charts"
|
||||
import { LineChart, lineElementClasses } from "@mui/x-charts";
|
||||
|
||||
function Chart({ data, loading }) {
|
||||
return (
|
||||
<LineChart
|
||||
loading={loading}
|
||||
xAxis={[{
|
||||
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
|
||||
disableLine: true,
|
||||
disableTicks: true,
|
||||
}]}
|
||||
series={[
|
||||
{
|
||||
id: 'income',
|
||||
data: data.chart_amount_income,
|
||||
area: true,
|
||||
showMark: false,
|
||||
},
|
||||
]}
|
||||
yAxis={[{
|
||||
disableLine: true,
|
||||
disableTicks: true
|
||||
}]}
|
||||
margin={{
|
||||
left: 60,
|
||||
right: 50,
|
||||
top: 10,
|
||||
bottom: 60,
|
||||
}}
|
||||
sx={{
|
||||
[`& .${lineElementClasses.root}`]: {
|
||||
strokeWidth: 3,
|
||||
stroke: loading ? '#E6E6E6' : '#5559CE'
|
||||
},
|
||||
'& .MuiAreaElement-series-income': {
|
||||
fill: "url('#myGradient') !important",
|
||||
},
|
||||
'& .MuiChartsAxis-directionY .MuiChartsAxis-tickLabel': {
|
||||
fontSize: '14px !important',
|
||||
fontWeight: '400 !important',
|
||||
fill: '#858D9D'
|
||||
},
|
||||
'& .MuiChartsAxis-directionX .MuiChartsAxis-tickLabel': {
|
||||
fontSize: '10px !important',
|
||||
fontWeight: '400 !important',
|
||||
fill: '#7E7E7E'
|
||||
},
|
||||
'& .MuiChartsGrid-line': {
|
||||
strokeDasharray: 2
|
||||
},
|
||||
'& .MuiChartsAxis-directionY': {
|
||||
// transform: 'translateX(-50px) !important'
|
||||
}
|
||||
}}
|
||||
grid={{ horizontal: true }}
|
||||
className='!w-full !mt-[20px] !h-[250px]'
|
||||
return (
|
||||
<LineChart
|
||||
loading={loading}
|
||||
xAxis={[
|
||||
{
|
||||
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
|
||||
disableLine: true,
|
||||
disableTicks: true,
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
id: "income",
|
||||
data: data.chart_amount_income,
|
||||
area: true,
|
||||
showMark: false,
|
||||
},
|
||||
]}
|
||||
yAxis={[
|
||||
{
|
||||
disableLine: true,
|
||||
disableTicks: true,
|
||||
},
|
||||
]}
|
||||
margin={{
|
||||
left: 60,
|
||||
right: 50,
|
||||
top: 10,
|
||||
bottom: 60,
|
||||
}}
|
||||
sx={{
|
||||
[`& .${lineElementClasses.root}`]: {
|
||||
strokeWidth: 3,
|
||||
stroke: loading ? "#E6E6E6" : "#5559CE",
|
||||
},
|
||||
"& .MuiAreaElement-series-income": {
|
||||
fill: "url('#myGradient') !important",
|
||||
},
|
||||
"& .MuiChartsAxis-directionY .MuiChartsAxis-tickLabel": {
|
||||
fontSize: "14px !important",
|
||||
fontWeight: "400 !important",
|
||||
fill: "#858D9D",
|
||||
},
|
||||
"& .MuiChartsAxis-directionX .MuiChartsAxis-tickLabel": {
|
||||
fontSize: "10px !important",
|
||||
fontWeight: "400 !important",
|
||||
fill: "#7E7E7E",
|
||||
},
|
||||
"& .MuiChartsGrid-line": {
|
||||
strokeDasharray: 2,
|
||||
},
|
||||
"& .MuiChartsAxis-directionY": {
|
||||
// transform: 'translateX(-50px) !important'
|
||||
},
|
||||
}}
|
||||
grid={{ horizontal: true }}
|
||||
className="!w-full !mt-[20px] !h-[250px]"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="myGradient"
|
||||
x1="252.5"
|
||||
y1="0"
|
||||
x2="252.5"
|
||||
y2="145"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="myGradient" x1="252.5" y1="0" x2="252.5" y2="145" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#3A6FF8" stopOpacity="0.1" />
|
||||
<stop offset="1" stopColor="#3A6FF8" stopOpacity="0.02" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</LineChart>
|
||||
)
|
||||
<stop stopColor="#3A6FF8" stopOpacity="0.1" />
|
||||
<stop offset="1" stopColor="#3A6FF8" stopOpacity="0.02" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</LineChart>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chart
|
||||
export default Chart;
|
||||
|
||||
@@ -1,47 +1,50 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import ArrowDownP from "@/components/icons/ArrowDownP";
|
||||
import { MenuItem, Select } from "@mui/material";
|
||||
|
||||
function Head() {
|
||||
const list = [
|
||||
{ id: 1, text: "سال 1402" },
|
||||
{ id: 2, text: "سال 1403" },
|
||||
{ id: 3, text: "سال 1404" },
|
||||
{ id: 4, text: "سال 1405" },
|
||||
{ id: 5, text: "سال 1406" },
|
||||
{ id: 6, text: "سال 1407" },
|
||||
];
|
||||
|
||||
const list = [
|
||||
{ id: 1, text: 'سال 1402' },
|
||||
{ id: 2, text: 'سال 1403' },
|
||||
{ id: 3, text: 'سال 1404' },
|
||||
{ id: 4, text: 'سال 1405' },
|
||||
{ id: 5, text: 'سال 1406' },
|
||||
{ id: 6, text: 'سال 1407' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px] p-[16px]">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">میزان درآمد</p>
|
||||
<Select
|
||||
defaultValue={1}
|
||||
className="!text-[#7E7E7E] !text-[12px] !font-normal !rounded-[4px]"
|
||||
IconComponent={e => <ArrowDownP data={e} />}
|
||||
sx={{
|
||||
'& .MuiSelect-select': {
|
||||
padding: '8px 6px 8px 8px !important',
|
||||
},
|
||||
'&:hover': {
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #D7D7D7 !important'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#D7D7D7 !important',
|
||||
border: '1px solid #D7D7D7 !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{list.map((item, idx) => (
|
||||
<MenuItem value={item.id} key={idx}>{item.text}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px] p-[16px]">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
|
||||
میزان درآمد
|
||||
</p>
|
||||
<Select
|
||||
defaultValue={1}
|
||||
className="!text-[#7E7E7E] !text-[12px] !font-normal !rounded-[4px]"
|
||||
IconComponent={(e) => <ArrowDownP data={e} />}
|
||||
sx={{
|
||||
"& .MuiSelect-select": {
|
||||
padding: "8px 6px 8px 8px !important",
|
||||
},
|
||||
"&:hover": {
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "1px solid #D7D7D7 !important",
|
||||
},
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: "#D7D7D7 !important",
|
||||
border: "1px solid #D7D7D7 !important",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{list.map((item, idx) => (
|
||||
<MenuItem value={item.id} key={idx}>
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import Chart from "./Chart"
|
||||
import Head from "./Head"
|
||||
import Chart from "./Chart";
|
||||
import Head from "./Head";
|
||||
|
||||
function AmountOfIncome({ data, loading }) {
|
||||
return (
|
||||
<div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
|
||||
<Head />
|
||||
<div dir="ltr">
|
||||
<Chart data={data} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
|
||||
<Head />
|
||||
<div dir="ltr">
|
||||
<Chart data={data} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AmountOfIncome
|
||||
export default AmountOfIncome;
|
||||
|
||||
Reference in New Issue
Block a user