Skip to content

Commit 902f3fa

Browse files
ammarioammario
committed
Split DAUChart into its own file
1 parent 37a04bc commit 902f3fa

File tree

2 files changed

+107
-106
lines changed

2 files changed

+107
-106
lines changed

‎site/src/pages/UsersPage/DAUCharts.tsx

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import useTheme from "@material-ui/styles/useTheme"
2+
3+
import { Theme } from "@material-ui/core/styles"
4+
import {
5+
CategoryScale,
6+
Chart as ChartJS,
7+
ChartOptions,
8+
defaults,
9+
Legend,
10+
LinearScale,
11+
LineElement,
12+
PointElement,
13+
Title,
14+
Tooltip,
15+
} from "chart.js"
16+
import { Stack } from "components/Stack/Stack"
17+
import { HelpTooltip, HelpTooltipText, HelpTooltipTitle } from "components/Tooltips/HelpTooltip"
18+
import { WorkspaceSection } from "components/WorkspaceSection/WorkspaceSection"
19+
import moment from "moment"
20+
import { FC } from "react"
21+
import { Line } from "react-chartjs-2"
22+
import * as TypesGen from "../../api/typesGenerated"
23+
24+
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
25+
26+
export interface DAUChartProps {
27+
userMetricsData: TypesGen.DAUsResponse
28+
}
29+
30+
export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
31+
const theme: Theme = useTheme()
32+
33+
if (userMetricsData.entries.length === 0) {
34+
return (
35+
<div style={{ marginTop: "-20px" }}>
36+
<p>DAU stats are loading. Check back later.</p>
37+
</div>
38+
)
39+
}
40+
41+
const labels = userMetricsData.entries.map((val) => {
42+
return moment(val.date).format("l")
43+
})
44+
45+
const data = userMetricsData.entries.map((val) => {
46+
return val.daus
47+
})
48+
49+
defaults.font.family = theme.typography.fontFamily
50+
51+
const options = {
52+
responsive: true,
53+
plugins: {
54+
legend: {
55+
display: false,
56+
},
57+
},
58+
scales: {
59+
y: {
60+
min: 0,
61+
ticks: {
62+
precision: 0,
63+
},
64+
},
65+
x: {
66+
ticks: {},
67+
},
68+
},
69+
aspectRatio: 6 / 1,
70+
} as ChartOptions
71+
72+
return (
73+
<>
74+
<WorkspaceSection>
75+
<Stack direction="row" spacing={1} alignItems="center">
76+
<h3>Daily Active Users</h3>
77+
<HelpTooltip size="small">
78+
<HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
79+
<HelpTooltipText>
80+
We use daily, unique workspace connection traffic to compute DAUs.
81+
</HelpTooltipText>
82+
</HelpTooltip>
83+
</Stack>
84+
<Line
85+
data={{
86+
labels: labels,
87+
datasets: [
88+
{
89+
label: "Daily Active Users",
90+
data: data,
91+
lineTension: 1 / 4,
92+
backgroundColor: theme.palette.secondary.dark,
93+
borderColor: theme.palette.secondary.dark,
94+
},
95+
// There are type bugs in chart.js that force us to use any.
96+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
97+
] as any,
98+
}}
99+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
100+
options={options as any}
101+
height={400}
102+
/>
103+
</WorkspaceSection>
104+
</>
105+
)
106+
}

‎site/src/pages/UsersPage/UsersPageView.tsx

+1-106
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,20 @@
11
import Button from "@material-ui/core/Button"
22
import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
3-
import moment from "moment"
43
import { FC } from "react"
5-
import { Line } from "react-chartjs-2"
64
import * as TypesGen from "../../api/typesGenerated"
75
import { Margins } from "../../components/Margins/Margins"
86
import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
97
import { SearchBarWithFilter } from "../../components/SearchBarWithFilter/SearchBarWithFilter"
108
import { UsersTable } from "../../components/UsersTable/UsersTable"
119
import { userFilterQuery } from "../../util/filters"
12-
13-
import useTheme from "@material-ui/styles/useTheme"
14-
15-
import { Theme } from "@material-ui/core/styles"
16-
import {
17-
CategoryScale,
18-
Chart as ChartJS,
19-
ChartOptions,
20-
defaults,
21-
Legend,
22-
LinearScale,
23-
LineElement,
24-
PointElement,
25-
Title,
26-
Tooltip,
27-
} from "chart.js"
28-
import { Stack } from "components/Stack/Stack"
29-
import { HelpTooltip, HelpTooltipText, HelpTooltipTitle } from "components/Tooltips/HelpTooltip"
30-
import { WorkspaceSection } from "components/WorkspaceSection/WorkspaceSection"
10+
import { DAUChart } from "./DAUCharts"
3111

3212
export const Language = {
3313
pageTitle: "Users",
3414
createButton: "New user",
3515
activeUsersFilterName: "Active users",
3616
allUsersFilterName: "All users",
3717
}
38-
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
39-
40-
export interface DAUChartProps {
41-
userMetricsData: TypesGen.DAUsResponse
42-
}
43-
44-
export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
45-
const theme: Theme = useTheme()
46-
47-
if (userMetricsData.entries.length === 0) {
48-
return (
49-
<div style={{ marginTop: "-20px" }}>
50-
<p>DAU stats are loading. Check back later.</p>
51-
</div>
52-
)
53-
}
54-
55-
const labels = userMetricsData.entries.map((val) => {
56-
return moment(val.date).format("l")
57-
})
58-
59-
const data = userMetricsData.entries.map((val) => {
60-
return val.daus
61-
})
62-
63-
defaults.font.family = theme.typography.fontFamily
64-
65-
const options = {
66-
responsive: true,
67-
plugins: {
68-
legend: {
69-
display: false,
70-
},
71-
},
72-
scales: {
73-
y: {
74-
min: 0,
75-
ticks: {
76-
precision: 0,
77-
},
78-
},
79-
x: {
80-
ticks: {},
81-
},
82-
},
83-
aspectRatio: 6 / 1,
84-
} as ChartOptions
85-
86-
return (
87-
<>
88-
{/* <WorkspaceSection title="Daily Active Users"> */}
89-
<WorkspaceSection>
90-
<Stack direction="row" spacing={1} alignItems="center">
91-
<h3>Daily Active Users</h3>
92-
<HelpTooltip size="small">
93-
<HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
94-
<HelpTooltipText>
95-
We use daily, unique workspace connection traffic to compute DAUs.
96-
</HelpTooltipText>
97-
</HelpTooltip>
98-
</Stack>
99-
<Line
100-
data={{
101-
labels: labels,
102-
datasets: [
103-
{
104-
label: "Daily Active Users",
105-
data: data,
106-
lineTension: 1 / 4,
107-
backgroundColor: theme.palette.secondary.dark,
108-
borderColor: theme.palette.secondary.dark,
109-
},
110-
// There are type bugs in chart.js that force us to use any.
111-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
112-
] as any,
113-
}}
114-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
115-
options={options as any}
116-
height={400}
117-
/>
118-
</WorkspaceSection>
119-
</>
120-
)
121-
}
122-
12318
export interface UsersPageViewProps {
12419
userMetricsData?: TypesGen.DAUsResponse
12520
users?: TypesGen.User[]

0 commit comments

Comments
 (0)