style: cycle sidebar, fix: cycle card bug fix (#383)
* style: new cycle sidebar * style: other information section * style: progress bar bg fix * fix: cycle card bug fix * style: progress chart * style: chart tooltip
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
64978969a0
commit
0246e0585b
6 changed files with 395 additions and 280 deletions
|
|
@ -1,17 +1,10 @@
|
|||
import React from "react";
|
||||
|
||||
import {
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
AreaChart,
|
||||
Area,
|
||||
ReferenceLine,
|
||||
} from "recharts";
|
||||
import { XAxis, YAxis, Tooltip, AreaChart, Area, ReferenceLine, TooltipProps} from "recharts";
|
||||
|
||||
//types
|
||||
import { IIssue } from "types";
|
||||
import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
|
||||
// helper
|
||||
import { getDatesInRange, renderShortNumericDateFormat } from "helpers/date-time.helper";
|
||||
|
||||
|
|
@ -43,53 +36,69 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
|
|||
});
|
||||
return dateWiseData;
|
||||
};
|
||||
|
||||
const CustomTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
|
||||
if (active && payload && payload.length) {
|
||||
console.log(payload[0].payload.currentDate);
|
||||
return (
|
||||
<div className="rounded-sm bg-gray-300 p-1 text-xs text-gray-800">
|
||||
<p>{payload[0].payload.currentDate}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const ChartData = getChartData();
|
||||
return (
|
||||
<div className="relative h-[200px] w-full ">
|
||||
<div className="flex justify-start items-start gap-4 text-xs">
|
||||
<div className="flex justify-center items-center gap-1">
|
||||
<span className="h-2 w-2 bg-green-600 rounded-full" />
|
||||
<span>Ideal</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center gap-1">
|
||||
<span className="h-2 w-2 bg-[#8884d8] rounded-full" />
|
||||
<span>Current</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center h-full w-full absolute -left-8 py-3 text-xs">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
width={300}
|
||||
height={200}
|
||||
data={ChartData}
|
||||
margin={{
|
||||
top: 0,
|
||||
right: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="currentDate" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="pending"
|
||||
stroke="#8884d8"
|
||||
fill="#98d1fb"
|
||||
activeDot={{ r: 8 }}
|
||||
/>
|
||||
<ReferenceLine
|
||||
stroke="#16a34a"
|
||||
strokeDasharray="3 3"
|
||||
segment={[
|
||||
{ x: `${renderShortNumericDateFormat(endDate)}`, y: 0 },
|
||||
{ x: `${renderShortNumericDateFormat(startDate)}`, y: issues.length },
|
||||
]}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="absolute -left-12 flex h-full w-full items-center justify-center text-xs">
|
||||
<AreaChart
|
||||
width={360}
|
||||
height={160}
|
||||
data={ChartData}
|
||||
margin={{
|
||||
top: 12,
|
||||
right: 12,
|
||||
left: 0,
|
||||
bottom: 12,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="linearblue" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#3F76FF" stopOpacity={0.7} />
|
||||
<stop offset="50%" stopColor="#3F76FF" stopOpacity={0.1} />
|
||||
<stop offset="100%" stopColor="#3F76FF" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<XAxis
|
||||
dataKey="currentDate"
|
||||
stroke="#9ca3af"
|
||||
tick={{ fontSize: "12px", fill: "#1f2937" }}
|
||||
tickSize={10}
|
||||
minTickGap={10}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="#9ca3af"
|
||||
tick={{ fontSize: "12px", fill: "#1f2937" }}
|
||||
tickSize={10}
|
||||
minTickGap={10}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="pending"
|
||||
stroke="#8884d8"
|
||||
fill="url(#linearblue)"
|
||||
activeDot={{ r: 8 }}
|
||||
/>
|
||||
<ReferenceLine
|
||||
stroke="#16a34a"
|
||||
strokeDasharray="3 3"
|
||||
segment={[
|
||||
{ x: `${renderShortNumericDateFormat(endDate)}`, y: 0 },
|
||||
{ x: `${renderShortNumericDateFormat(startDate)}`, y: issues.length },
|
||||
]}
|
||||
/>
|
||||
</AreaChart>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -89,32 +89,44 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
|
|||
>
|
||||
<Tab.List
|
||||
as="div"
|
||||
className="flex items-center justify-between w-full rounded bg-gray-100 text-xs"
|
||||
className="flex items-center justify-between px-1 py-1.5 w-full rounded-md bg-gray-100 text-xs"
|
||||
>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/2 rounded py-1 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
|
||||
}
|
||||
className={({ selected }) =>
|
||||
`rounded w-1/3 p-1 text-sm text-gray-900 ${
|
||||
selected
|
||||
? " bg-theme text-white"
|
||||
: " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Assignees
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/2 rounded py-1 ${selected ? "bg-gray-300 font-semibold" : "hover:bg-gray-200 "}`
|
||||
}
|
||||
className={({ selected }) =>
|
||||
`rounded w-1/3 p-1 text-sm text-gray-900 ${
|
||||
selected
|
||||
? " bg-theme text-white"
|
||||
: " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Labels
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/2 rounded py-1 ${selected ? "bg-gray-300 font-semibold" : "hover:bg-gray-200 "}`
|
||||
}
|
||||
`rounded w-1/3 p-1 text-sm text-gray-900 ${
|
||||
selected
|
||||
? " bg-theme text-white"
|
||||
: " hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
States
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels className="flex items-center justify-between w-full">
|
||||
<Tab.Panel as="div" className="w-full flex flex-col ">
|
||||
<Tab.Panels className="flex items-center justify-between p-1 w-full">
|
||||
<Tab.Panel as="div" className="w-full flex flex-col text-xs ">
|
||||
{members?.map((member, index) => {
|
||||
const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
|
||||
const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
|
||||
|
|
@ -170,15 +182,15 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
|
|||
<SingleProgressStats
|
||||
key={index}
|
||||
title={
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="block h-2 w-2 rounded-full "
|
||||
className="block h-3 w-3 rounded-full "
|
||||
style={{
|
||||
backgroundColor: issue.color,
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs capitalize">{issue.name}</span>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
completed={completeArray.length}
|
||||
total={totalArray.length}
|
||||
|
|
@ -192,15 +204,15 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
|
|||
<SingleProgressStats
|
||||
key={index}
|
||||
title={
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="block h-2 w-2 rounded-full "
|
||||
className="block h-3 w-3 rounded-full "
|
||||
style={{
|
||||
backgroundColor: stateGroupColours[group],
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs capitalize">{group}</span>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
completed={groupedIssues[group].length}
|
||||
total={issues.length}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
|
|||
completed,
|
||||
total,
|
||||
}) => (
|
||||
<div className="flex w-full items-center justify-between border-b-[1px] py-3 text-xs">
|
||||
<div className="flex w-full items-center justify-between py-3 text-xs">
|
||||
<div className="flex w-1/2 items-center justify-start gap-2">{title}</div>
|
||||
<div className="flex w-1/2 items-center justify-end gap-1 px-2">
|
||||
<div className="flex h-5 items-center justify-center gap-1 ">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue