Skip to content

Commit 4cf6f0b

Browse files
melissaingmelissaing
committed
Latest update
1 parent 182a9dd commit 4cf6f0b

File tree

10 files changed

+2162
-71
lines changed

10 files changed

+2162
-71
lines changed

‎package-lock.json‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"@patternfly/react-core": "^6.0.0",
7777
"@patternfly/react-icons": "^6.0.0",
7878
"@patternfly/react-styles": "^6.0.0",
79+
"@patternfly/react-table": "^6.2.2",
7980
"csv": "^6.3.11",
8081
"csv-parser": "^3.2.0",
8182
"fs": "^0.0.1-security",

‎src/app/Component/Component.tsx‎

Lines changed: 494 additions & 0 deletions
Large diffs are not rendered by default.

‎src/app/Dashboard/Dashboard.tsx‎

Lines changed: 225 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,144 @@
11
import * as React from 'react';
2-
import { PageSection, Title, FileUpload, DropEvent } from '@patternfly/react-core';
2+
import { PageSection, Title, FileUpload,
3+
DropEvent, List, ListItem, Button,
4+
ToggleGroup, ToggleGroupItem, ToggleGroupItemProps,
5+
Card, CardTitle, CardBody, CardFooter, Gallery,
6+
GalleryItem, Content } from '@patternfly/react-core';
37
import '@patternfly/react-core/dist/styles/base.css';
4-
import { ChartPie } from '@patternfly/react-charts/victory';
58
import Papa from 'papaparse'
6-
import { useState } from 'react';
9+
import { useState, Fragment, useEffect } from 'react';
10+
import { Link } from 'react-router-dom';
11+
import { ArrowRightIcon, ChartLineIcon, CubesIcon, BoxIcon, SearchIcon } from '@patternfly/react-icons';
12+
import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
13+
import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
14+
15+
function Data() {
16+
const [data, setData] = useState([]);
17+
18+
React.useEffect(() => {
19+
fetch("https://api.github.com/users").
20+
then(res => res.json())
21+
.then(setData);
22+
}, []);
23+
24+
if(data) {
25+
return (
26+
<pre>{JSON.stringify(data)}</pre>
27+
)
28+
}
29+
return <p>No Data</p>
30+
}
31+
32+
const metricsPages = [
33+
{
34+
title: 'Component Metrics',
35+
description:
36+
'Track component usage, performance, and interaction patterns across your application.',
37+
icon: <CubesIcon />,
38+
path: '/component',
39+
features: [
40+
'Component Usage',
41+
'Render Performance',
42+
'Props Analysis',
43+
'Error Rates',
44+
],
45+
},
46+
{
47+
title: 'Product Metrics',
48+
description:
49+
'Analyze product performance, user adoption, and business key performance indicators.',
50+
icon: <BoxIcon />,
51+
path: '/product',
52+
features: [
53+
'User Adoption',
54+
'Feature Usage',
55+
'Revenue Metrics',
56+
'Customer Satisfaction',
57+
],
58+
},
59+
{
60+
title: 'Search Metrics',
61+
description:
62+
'Monitor search functionality, query performance, and user search behavior.',
63+
icon: <SearchIcon />,
64+
path: '/search',
65+
features: [
66+
'Top Searches',
67+
'Searches with No Results',
68+
'Searches without Clicks',
69+
'Top Results',
70+
],
71+
},
72+
{
73+
title: 'Web Metrics',
74+
description:
75+
'Monitor web application performance, user engagement, and traffic analytics.',
76+
icon: <ChartLineIcon />,
77+
path: '/web',
78+
features: [
79+
'Page Load Times',
80+
'User Sessions',
81+
'User Demographics',
82+
'Conversion Tracking',
83+
],
84+
}
85+
];
786

8-
// Papa.parse(csv, {
9-
// complete: function(results) {
10-
// console.log("Finished:", results.data);
11-
// }
12-
// });
1387

1488
const Dashboard: React.FunctionComponent = () => (
89+
<>
1590
<PageSection>
16-
<Title headingLevel="h1" size="lg">Google Analytics</Title>
17-
<BasicWithRightAlignedLegend></BasicWithRightAlignedLegend>
18-
<SimpleTextFileUpload></SimpleTextFileUpload>
91+
<Title headingLevel="h1">PatternFly Metrics Dashboard</Title>
92+
<p>This is a dashboard for PatternFly and other related metrics, developed by the PatternFly Enablement team. Data is collected from the PatternFly website and the PatternFly GitHub repositories.</p>
93+
<strong>This dashboard is a work in progress and will be updated over time.</strong>
1994
</PageSection>
20-
)
21-
22-
const BasicWithRightAlignedLegend: React.FunctionComponent = () => (
23-
<div style={{ height: '230px', width: '350px' }}>
24-
<ChartPie
25-
ariaDesc="Average number of pets"
26-
ariaTitle="Pie chart example"
27-
constrainToVisibleArea
28-
data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
29-
height={230}
30-
labels={({ datum }) => `${datum.x}: ${datum.y}`}
31-
legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
32-
legendOrientation="vertical"
33-
legendPosition="right"
34-
name="chart1"
35-
padding={{
36-
bottom: 20,
37-
left: 20,
38-
right: 140, // Adjusted to accommodate legend
39-
top: 20
40-
}}
41-
width={350}
42-
/>
43-
</div>
95+
<PageSection>
96+
<Title headingLevel="h2">Available Metrics</Title>
97+
<p>Currently, there are four categories of metrics available to view:</p>
98+
<PageSection hasBodyWrapper>
99+
<Gallery hasGutter minWidths={{ default: '300px' }}>
100+
{metricsPages.map((page) => (
101+
<GalleryItem key={page.path}>
102+
<Card isFullHeight isSelectable>
103+
<CardTitle>
104+
<div className="pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-mb-sm">
105+
<div className="pf-v6-u-mr-md pf-v6-u-color-blue-400">
106+
{page.icon}
107+
</div>
108+
{page.title}
109+
</div>
110+
</CardTitle>
111+
<CardBody>
112+
<Content component="p" className="pf-v6-u-mb-md">
113+
{page.description}
114+
</Content>
115+
<Content component="h4" className="pf-v6-u-mb-sm">
116+
Key Features:
117+
</Content>
118+
<List isPlain isBordered>
119+
{page.features.map((feature, index) => (
120+
<ListItem key={index}>{feature}</ListItem>
121+
))}
122+
</List>
123+
</CardBody>
124+
<CardFooter>
125+
<Link to={page.path}>
126+
<Button
127+
variant="primary"
128+
icon={<ArrowRightIcon />}
129+
iconPosition="end"
130+
>
131+
View {page.title}
132+
</Button>
133+
</Link>
134+
</CardFooter>
135+
</Card>
136+
</GalleryItem>
137+
))}
138+
</Gallery>
139+
</PageSection>
140+
</PageSection>
141+
</>
44142
)
45143

46144
const SimpleTextFileUpload: React.FunctionComponent = () => {
@@ -73,6 +171,11 @@ const SimpleTextFileUpload: React.FunctionComponent = () => {
73171
setIsLoading(false);
74172
};
75173

174+
let res = Papa.parse(value, {comments: "#"});
175+
console.log(res);
176+
177+
const dataContext = React.createContext(res)
178+
76179
return (
77180
<FileUpload
78181
id="text-file-simple"
@@ -93,4 +196,91 @@ const SimpleTextFileUpload: React.FunctionComponent = () => {
93196
);
94197
};
95198

199+
interface Repository {
200+
name: string;
201+
branches: string | null;
202+
}
203+
204+
type ExampleType = 'default' | 'compact' | 'compactBorderless';
205+
206+
const TableBasic: React.FunctionComponent = () => {
207+
// In real usage, this data would come from some external source like an API via props.
208+
const repositories: Repository[] = [
209+
{ name: 'one', branches: 'two' },
210+
{ name: 'one - 2', branches: null },
211+
{ name: 'one - 3', branches: 'two - 3' }
212+
];
213+
214+
const columnNames = {
215+
name: 'Repositories',
216+
branches: 'Branches',
217+
};
218+
219+
// This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
220+
const [exampleChoice, setExampleChoice] = useState<ExampleType>('default');
221+
const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
222+
const id = event.currentTarget.id;
223+
setExampleChoice(id as ExampleType);
224+
};
225+
226+
return (
227+
<Fragment>
228+
<ToggleGroup aria-label="Default with single selectable">
229+
<ToggleGroupItem
230+
text="Default"
231+
buttonId="default"
232+
isSelected={exampleChoice === 'default'}
233+
onChange={onExampleTypeChange}
234+
/>
235+
<ToggleGroupItem
236+
text="Compact"
237+
buttonId="compact"
238+
isSelected={exampleChoice === 'compact'}
239+
onChange={onExampleTypeChange}
240+
/>
241+
<ToggleGroupItem
242+
text="Compact borderless"
243+
buttonId="compactBorderless"
244+
isSelected={exampleChoice === 'compactBorderless'}
245+
onChange={onExampleTypeChange}
246+
/>
247+
</ToggleGroup>
248+
<Table
249+
aria-label="Simple table"
250+
variant={exampleChoice !== 'default' ? 'compact' : undefined}
251+
borders={exampleChoice !== 'compactBorderless'}
252+
>
253+
<Caption>Simple table using composable components</Caption>
254+
<Thead>
255+
<Tr>
256+
<Th>{columns[0]}</Th>
257+
<Th>{columns[1]}</Th>
258+
<Th>{columns[2]}</Th>
259+
<Th>{columns[3]}</Th>
260+
<Th>{columns[4]}</Th>
261+
<Th>{columns[5]}</Th>
262+
<Th>{columns[6]}</Th>
263+
<Th>{columns[7]}</Th>
264+
</Tr>
265+
</Thead>
266+
<Tbody>
267+
{rows.map((row) => (
268+
<Tr key={row.name}>
269+
<Td dataLabel={columns[0]}>{row.name}</Td>
270+
<Td dataLabel={columns[1]}>{row.threads}</Td>
271+
<Td dataLabel={columns[2]}>{row.applications}</Td>
272+
<Td dataLabel={columns[3]}>{row.workspaces}</Td>
273+
<Td dataLabel={columns[4]}>{row.status}</Td>
274+
<Td dataLabel={columns[5]}>{row.location}</Td>
275+
<Td dataLabel={columns[6]}>{row.lastModified}</Td>
276+
<Td dataLabel={columns[7]}>{row.url}</Td>
277+
</Tr>
278+
))}
279+
</Tbody>
280+
</Table>
281+
</Fragment>
282+
);
283+
};
284+
285+
96286
export { Dashboard };

‎src/app/Dashboard/Tech_overview.csv‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
# ----------------------------------------
2-
# Tech overview
3-
# Account: PatternFly
4-
# Property: www.patternfly.org - GA4
5-
# ----------------------------------------
6-
#
7-
# Start date: 20250509
8-
# End date: 20250605
91
Operating system,Active users
102
Windows,6088
113
Macintosh,4563

0 commit comments

Comments
 (0)