thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: add tooltip to line graphs (#1392)

Browse Source 
* chore: workspace dashboard line graph tooltip

* chore: burndown chart and analytics line graph tooltip added
This commit is contained in:
Aaryan Khandelwal 2023-06-26 14:26:38 +05:30 committed by GitHub
parent c70fe91886
commit c89592d587
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
View File

@ -41,6 +41,14 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
colors={(datum) => datum.color} colors={(datum) => datum.color}
curve="monotoneX" curve="monotoneX"
margin={{ top: 20 }} margin={{ top: 20 }}
enableSlices="x"
sliceTooltip={(datum) => (
<div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
{datum.slice.points[0].data.yFormatted}
<span className="text-brand-secondary"> issues closed in </span>
{datum.slice.points[0].data.xFormatted}
</div>
)}
theme={{ theme={{
background: "rgb(var(--color-bg-base))", background: "rgb(var(--color-bg-base))",
}} }}

8
apps/app/components/core/sidebar/progress-chart.tsx
View File

@ -117,6 +117,14 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
colors={(datum) => datum.color ?? "#3F76FF"} colors={(datum) => datum.color ?? "#3F76FF"}
customYAxisTickValues={[0, totalIssues]} customYAxisTickValues={[0, totalIssues]}
gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))} gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
enableSlices="x"
sliceTooltip={(datum) => (
<div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
{datum.slice.points[0].data.yFormatted}
<span className="text-brand-secondary"> issues pending on </span>
{datum.slice.points[0].data.xFormatted}
</div>
)}
theme={{ theme={{
background: "transparent", background: "transparent",
axis: { axis: {

8
apps/app/components/workspace/completed-issues-graph.tsx
View File

@ -60,6 +60,14 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
margin={{ top: 20, right: 20, bottom: 20, left: 20 }} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
customYAxisTickValues={data.map((item) => item.completed_count)} customYAxisTickValues={data.map((item) => item.completed_count)}
colors={(datum) => datum.color} colors={(datum) => datum.color}
enableSlices="x"
sliceTooltip={(datum) => (
<div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
{datum.slice.points[0].data.yFormatted}
<span className="text-brand-secondary"> issues closed in </span>
{datum.slice.points[0].data.xFormatted}
</div>
)}
theme={{ theme={{
background: "rgb(var(--color-bg-base))", background: "rgb(var(--color-bg-base))",
}} }}