Skip to content

Commit c7bc274

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor label components
1 parent 2f3e52b commit c7bc274

File tree

2 files changed

+86
-71
lines changed

2 files changed

+86
-71
lines changed

‎site/src/pages/TemplatePage/TemplateInsightsPage/AppUsageChart.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import "chart.js/auto";
2+
import type { Interpolation, Theme } from "@emotion/react";
23
import type { FC } from "react";
34
import { Pie } from "react-chartjs-2";
45
import type { TemplateAppUsage } from "api/typesGenerated";
@@ -54,3 +55,86 @@ export const AppUsageChart: FC<AppUsageChartProps> = ({ usage, colors }) => {
5455
/>
5556
);
5657
};
58+
59+
type AppUsageLabelsProps = {
60+
usage: TemplateAppUsage[];
61+
colors: string[];
62+
};
63+
64+
export const AppUsageLabels: FC<AppUsageLabelsProps> = ({ usage, colors }) => {
65+
return (
66+
<ul css={styles.list}>
67+
{usage.map((usage, i) => (
68+
<li key={usage.slug} css={styles.item}>
69+
<div css={styles.label}>
70+
<div css={[styles.labelColor, { backgroundColor: colors[i] }]} />
71+
<div css={styles.labelIcon}>
72+
<img src={usage.icon} alt="" />
73+
</div>
74+
<span css={styles.labelText}>{usage.display_name}</span>
75+
</div>
76+
<div css={styles.info}>
77+
{formatTime(usage.seconds)}
78+
{usage.times_used > 0 && (
79+
<span css={styles.infoSecondary}>
80+
Opened {usage.times_used.toLocaleString()}{" "}
81+
{usage.times_used === 1 ? "time" : "times"}
82+
</span>
83+
)}
84+
</div>
85+
</li>
86+
))}
87+
</ul>
88+
);
89+
};
90+
91+
const styles = {
92+
list: {
93+
flex: 1,
94+
display: "grid",
95+
gridAutoRows: "1fr",
96+
gap: 8,
97+
margin: 0,
98+
padding: 0,
99+
},
100+
item: {
101+
display: "flex",
102+
alignItems: "center",
103+
justifyContent: "space-between",
104+
},
105+
label: { display: "flex", alignItems: "center" },
106+
labelColor: {
107+
width: 8,
108+
height: 8,
109+
borderRadius: 999,
110+
marginRight: 16,
111+
},
112+
labelIcon: {
113+
width: 20,
114+
height: 20,
115+
display: "flex",
116+
alignItems: "center",
117+
justifyContent: "center",
118+
marginRight: 8,
119+
120+
"& img": {
121+
objectFit: "contain",
122+
width: "100%",
123+
height: "100%",
124+
},
125+
},
126+
labelText: { fontSize: 13, fontWeight: 500, width: 200 },
127+
info: (theme) => ({
128+
fontSize: 13,
129+
color: theme.palette.text.secondary,
130+
width: 120,
131+
flexShrink: 0,
132+
lineHeight: "1.5",
133+
display: "flex",
134+
flexDirection: "column",
135+
}),
136+
infoSecondary: (theme) => ({
137+
fontSize: 12,
138+
color: theme.palette.text.disabled,
139+
}),
140+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

Lines changed: 2 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
5757
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
5858
import { getLatencyColor } from "utils/latency";
5959
import { getTemplatePageTitle } from "../utils";
60-
import { AppUsageChart } from "./AppUsageChart";
60+
import { AppUsageChart, AppUsageLabels } from "./AppUsageChart";
6161
import { DateRange as DailyPicker, type DateRangeValue } from "./DateRange";
6262
import { type InsightsInterval, IntervalMenu } from "./IntervalMenu";
6363
import { lastWeeks } from "./utils";
@@ -447,76 +447,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
447447
>
448448
<AppUsageChart usage={usage} colors={colors} />
449449
</div>
450-
<div
451-
css={{ flex: 1, display: "grid", gridAutoRows: "1fr", gap: 8 }}
452-
>
453-
{usage.map((usage, i) => (
454-
<Stack
455-
key={usage.slug}
456-
direction="row"
457-
alignItems="center"
458-
justifyContent="space-between"
459-
>
460-
<div css={{ display: "flex", alignItems: "center" }}>
461-
<div
462-
css={{
463-
width: 8,
464-
height: 8,
465-
borderRadius: 999,
466-
backgroundColor: colors[i],
467-
marginRight: 16,
468-
}}
469-
/>
470-
<div
471-
css={{
472-
width: 20,
473-
height: 20,
474-
display: "flex",
475-
alignItems: "center",
476-
justifyContent: "center",
477-
marginRight: 8,
478-
}}
479-
>
480-
<img
481-
src={usage.icon}
482-
alt=""
483-
style={{
484-
objectFit: "contain",
485-
width: "100%",
486-
height: "100%",
487-
}}
488-
/>
489-
</div>
490-
<div css={{ fontSize: 13, fontWeight: 500, width: 200 }}>
491-
{usage.display_name}
492-
</div>
493-
</div>
494-
<Stack
495-
spacing={0}
496-
css={{
497-
fontSize: 13,
498-
color: theme.palette.text.secondary,
499-
width: 120,
500-
flexShrink: 0,
501-
lineHeight: "1.5",
502-
}}
503-
>
504-
{formatTime(usage.seconds)}
505-
{usage.times_used > 0 && (
506-
<span
507-
css={{
508-
fontSize: 12,
509-
color: theme.palette.text.disabled,
510-
}}
511-
>
512-
Opened {usage.times_used.toLocaleString()}{" "}
513-
{usage.times_used === 1 ? "time" : "times"}
514-
</span>
515-
)}
516-
</Stack>
517-
</Stack>
518-
))}
519-
</div>
450+
<AppUsageLabels usage={usage} colors={colors} />
520451
</Stack>
521452
)}
522453
</PanelContent>

0 commit comments

Comments
 (0)