diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
index 48ca008155..fa483f18e8 100644
--- a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
+++ b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
@@ -17,8 +17,6 @@ import {
Title,
Tooltip,
Legend,
- type Chart,
- type Tick,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
@@ -32,43 +30,14 @@ import {
type ChartDatasetType,
useTrafficDataEstimation,
} from 'hooks/useTrafficData';
+import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin';
+import { formatTickValue } from 'component/common/Chart/formatTickValue';
const StyledBox = styled(Box)(({ theme }) => ({
display: 'grid',
gap: theme.spacing(5),
}));
-const customHighlightPlugin = {
- id: 'customLine',
- beforeDraw: (chart: Chart) => {
- const width = 46;
- if (chart.tooltip?.opacity && chart.tooltip.x) {
- const x = chart.tooltip.caretX;
- const yAxis = chart.scales.y;
- const ctx = chart.ctx;
- ctx.save();
- const gradient = ctx.createLinearGradient(
- x,
- yAxis.top,
- x,
- yAxis.bottom + 34,
- );
- gradient.addColorStop(0, 'rgba(129, 122, 254, 0)');
- gradient.addColorStop(1, 'rgba(129, 122, 254, 0.12)');
- ctx.fillStyle = gradient;
- ctx.roundRect(
- x - width / 2,
- yAxis.top,
- width,
- yAxis.bottom - yAxis.top + 34,
- 5,
- );
- ctx.fill();
- ctx.restore();
- }
- },
-};
-
const createBarChartOptions = (
theme: Theme,
tooltipTitleCallback: (tooltipItems: any) => string,
@@ -150,20 +119,7 @@ const createBarChartOptions = (
ticks: {
color: theme.palette.text.secondary,
maxTicksLimit: 5,
- callback: (
- tickValue: string | number,
- index: number,
- ticks: Tick[],
- ) => {
- if (typeof tickValue === 'string') {
- return tickValue;
- }
- const value = Number.parseInt(tickValue.toString());
- if (value > 999999) {
- return `${value / 1000000}M`;
- }
- return value > 999 ? `${value / 1000}k` : value;
- },
+ callback: formatTickValue,
},
grid: {
drawBorder: false,
diff --git a/frontend/src/component/common/Chart/customHighlightPlugin.ts b/frontend/src/component/common/Chart/customHighlightPlugin.ts
new file mode 100644
index 0000000000..d742b8fb6d
--- /dev/null
+++ b/frontend/src/component/common/Chart/customHighlightPlugin.ts
@@ -0,0 +1,32 @@
+import type { Chart } from 'chart.js';
+
+export const customHighlightPlugin = {
+ id: 'customLine',
+ beforeDraw: (chart: Chart) => {
+ const width = 46;
+ if (chart.tooltip?.opacity && chart.tooltip.x) {
+ const x = chart.tooltip.caretX;
+ const yAxis = chart.scales.y;
+ const ctx = chart.ctx;
+ ctx.save();
+ const gradient = ctx.createLinearGradient(
+ x,
+ yAxis.top,
+ x,
+ yAxis.bottom + 34,
+ );
+ gradient.addColorStop(0, 'rgba(129, 122, 254, 0)');
+ gradient.addColorStop(1, 'rgba(129, 122, 254, 0.12)');
+ ctx.fillStyle = gradient;
+ ctx.roundRect(
+ x - width / 2,
+ yAxis.top,
+ width,
+ yAxis.bottom - yAxis.top + 34,
+ 5,
+ );
+ ctx.fill();
+ ctx.restore();
+ }
+ },
+};
diff --git a/frontend/src/component/common/Chart/formatTickValue.ts b/frontend/src/component/common/Chart/formatTickValue.ts
new file mode 100644
index 0000000000..702dbc9dff
--- /dev/null
+++ b/frontend/src/component/common/Chart/formatTickValue.ts
@@ -0,0 +1,16 @@
+import type { Tick } from 'chart.js';
+
+export const formatTickValue = (
+ tickValue: string | number,
+ index: number,
+ ticks: Tick[],
+) => {
+ if (typeof tickValue === 'string') {
+ return tickValue;
+ }
+ const value = Number.parseInt(tickValue.toString());
+ if (value > 999999) {
+ return `${value / 1000000}M`;
+ }
+ return value > 999 ? `${value / 1000}k` : value;
+};
diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
new file mode 100644
index 0000000000..6135a137e6
--- /dev/null
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -0,0 +1,126 @@
+import {
+ BarElement,
+ CategoryScale,
+ Chart as ChartJS,
+ type ChartOptions,
+ Legend,
+ LinearScale,
+ Title,
+ Tooltip,
+} from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import { Bar } from 'react-chartjs-2';
+import type { Theme } from '@mui/material/styles/createTheme';
+import useTheme from '@mui/material/styles/useTheme';
+import { useMemo } from 'react';
+import { formatTickValue } from 'component/common/Chart/formatTickValue';
+
+const defaultYes = [
+ 45_000_000, 28_000_000, 28_000_000, 25_000_000, 50_000_000, 27_000_000,
+ 26_000_000, 50_000_000, 32_000_000, 12_000_000, 13_000_000, 31_000_000,
+ 12_000_000, 47_000_000, 29_000_000, 46_000_000, 45_000_000, 28_000_000,
+ 28_000_000, 25_000_000, 50_000_000, 27_000_000, 26_000_000, 50_000_000,
+ 32_000_000, 12_000_000, 13_000_000, 31_000_000, 12_000_000, 47_000_000,
+];
+const defaultNo = [
+ 5_000_000, 8_000_000, 3_000_000, 2_000_000, 2_000_000, 5_000_000, 9_000_000,
+ 3_000_000, 7_000_000, 2_000_000, 5_000_000, 8_000_000, 3_000_000, 2_000_000,
+ 2_000_000, 5_000_000, 1_000_000, 3_000_000, 12_000_000, 2_000_000,
+ 1_000_000, 1_000_000, 3_000_000, 2_000_000, 2_000_000, 5_000_000, 1_000_000,
+ 3_000_000, 8_000_000, 2_000_000,
+];
+
+const data = {
+ labels: Array.from({ length: 30 }, (_, i) => i + 1),
+ datasets: [
+ {
+ data: defaultYes,
+ label: 'yes',
+ backgroundColor: '#BEBEBE',
+ hoverBackgroundColor: '#BEBEBE',
+ },
+ {
+ data: defaultNo,
+ label: 'no',
+ backgroundColor: '#9A9A9A',
+ hoverBackgroundColor: '#9A9A9A',
+ },
+ ],
+};
+
+const createBarChartOptions = (theme: Theme): ChartOptions<'bar'> => ({
+ plugins: {
+ legend: {
+ position: 'bottom',
+ labels: {
+ color: theme.palette.text.primary,
+ pointStyle: 'circle',
+ usePointStyle: true,
+ boxHeight: 6,
+ padding: 15,
+ boxPadding: 5,
+ },
+ },
+ tooltip: {
+ enabled: false,
+ },
+ },
+ responsive: true,
+ scales: {
+ x: {
+ stacked: true,
+ ticks: {
+ color: theme.palette.text.secondary,
+ },
+ grid: {
+ display: false,
+ },
+ },
+ y: {
+ stacked: true,
+ ticks: {
+ color: theme.palette.text.secondary,
+ maxTicksLimit: 5,
+ callback: formatTickValue,
+ },
+ grid: {
+ drawBorder: false,
+ },
+ },
+ },
+ elements: {
+ bar: {
+ borderRadius: 5,
+ },
+ },
+ interaction: {
+ mode: 'index',
+ intersect: false,
+ },
+});
+
+export const PlaceholderFlagMetricsChart = () => {
+ const theme = useTheme();
+
+ const options = useMemo(() => {
+ return createBarChartOptions(theme);
+ }, [theme]);
+
+ return (
+
+ );
+};
+
+ChartJS.register(
+ annotationPlugin,
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ Title,
+ Tooltip,
+ Legend,
+);
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 5267d9afe1..e6a76c6078 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -1,6 +1,7 @@
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
import {
Box,
+ Grid,
IconButton,
Link,
List,
@@ -8,7 +9,6 @@ import {
ListItemButton,
styled,
Typography,
- Grid,
} from '@mui/material';
import type { Theme } from '@mui/material/styles/createTheme';
import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
@@ -17,6 +17,7 @@ import { useProfile } from 'hooks/api/getters/useProfile/useProfile';
import LinkIcon from '@mui/icons-material/Link';
import { Badge } from '../common/Badge/Badge';
import { ConnectSDK, CreateFlag } from './ConnectSDK';
+import { PlaceholderFlagMetricsChart } from './FlagMetricsChart';
const ScreenExplanation = styled(Typography)(({ theme }) => ({
marginTop: theme.spacing(1),
@@ -30,7 +31,7 @@ const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
marginBottom: theme.spacing(2),
}));
-const ProjectsGrid = styled(Grid)(({ theme }) => ({
+const ContentGrid = styled(Grid)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
borderRadius: `${theme.shape.borderRadiusLarge}px`,
}));
@@ -104,7 +105,7 @@ const ActiveProjectDetails: FC<{
);
};
-const SpacedGrid = styled(Grid)(({ theme }) => ({
+const SpacedGridItem = styled(Grid)(({ theme }) => ({
padding: theme.spacing(4),
border: `0.5px solid ${theme.palette.divider}`,
}));
@@ -148,19 +149,19 @@ export const PersonalDashboard = () => {
most of Unleash
Your resources
-
-
+
+
My projects
-
-
+
Setup incomplete
-
-
+
+
{
);
})}
-
-
+
+
{activeProject ? (
) : null}
-
-
+
+
{activeProject ? (
) : null}
-
-
-
+
+ {
Your roles in this project:{' '}
Member{' '}
Another
-
-
+
+
+
+
+ My feature flags
+
+
+
+
+ You have not created or favorited any feature flags.
+ Once you do, the will show up here.
+
+
+
+ Feature flag metrics
+
+
+
);
};