-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: refactoring Usage Insights (#2267)
* refactor: refactoring usage insights * refactor: refactorimg Usage Insights in www * refactor: refactoring structure * refactor: refactoring gatsby node * refactor: added paragon type of usage
- Loading branch information
1 parent
f7cb706
commit 2b8a1f3
Showing
23 changed files
with
690 additions
and
570 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { DataTable } from '~paragon-react'; | ||
import ComponentUsageExamples, { IComponentUsageExamples } from './ComponentUsageExamples'; | ||
|
||
import { IComponentUsage } from '../../types/types'; | ||
|
||
function ComponentUsage({ name, componentUsageInProjects }: IComponentUsage) { | ||
return ( | ||
<div className="mb-5"> | ||
<h3 className="mb-4">{name}</h3> | ||
<DataTable | ||
isExpandable | ||
isSortable | ||
itemCount={componentUsageInProjects.length} // eslint-disable-line | ||
data={componentUsageInProjects} | ||
renderRowSubComponent={({ row }: IComponentUsageExamples) => ( | ||
<ComponentUsageExamples row={row} componentName={name} /> | ||
)} | ||
columns={[ | ||
{ | ||
id: 'expander', | ||
Header: DataTable.ExpandAll, | ||
Cell: DataTable.ExpandRow, | ||
}, | ||
{ | ||
Header: 'Project Name', | ||
accessor: 'folderName', | ||
}, | ||
{ Header: 'Paragon Version', accessor: 'version' }, | ||
{ Header: 'Instance Count', accessor: 'componentUsageCount' }, | ||
]} | ||
> | ||
<DataTable.Table /> | ||
<DataTable.EmptyTable content="No usages" /> | ||
</DataTable> | ||
</div> | ||
); | ||
} | ||
|
||
ComponentUsage.propTypes = { | ||
name: PropTypes.string.isRequired, | ||
componentUsageInProjects: PropTypes.arrayOf(PropTypes.shape({ | ||
name: PropTypes.string, | ||
folderName: PropTypes.string, | ||
version: PropTypes.string, | ||
repositoryUrl: PropTypes.string, | ||
componentUsageCount: PropTypes.number, | ||
usages: PropTypes.arrayOf(PropTypes.shape({ | ||
column: PropTypes.number, | ||
filePath: PropTypes.string, | ||
line: PropTypes.number, | ||
version: PropTypes.string, | ||
})), | ||
})).isRequired, | ||
}; | ||
|
||
export default ComponentUsage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
import ComponentUsage from './ComponentUsage'; | ||
|
||
import componentsUsage from '../../utils/componentsUsage'; | ||
import getEmptyMessage from '../../utils/getEmptyMessage'; | ||
import usagePropTypes from '../../utils/usagePropTypes'; | ||
import removeDotsFromKeys from '../../utils/removeDotsFromKey'; | ||
|
||
function ComponentsUsage({ data }: { data: string[] }) { | ||
const filteredComponentsUsage = removeDotsFromKeys(componentsUsage); | ||
|
||
return ( | ||
<div className="pt-5 mb-5"> | ||
{data.length ? data.sort().map(name => { | ||
if (filteredComponentsUsage[name]) { | ||
return ( | ||
<ComponentUsage | ||
key={name} | ||
name={name} | ||
componentUsageInProjects={filteredComponentsUsage[name]} | ||
/> | ||
); | ||
} | ||
return null; | ||
}) : getEmptyMessage('components')} | ||
</div> | ||
); | ||
} | ||
|
||
ComponentsUsage.propTypes = usagePropTypes; | ||
|
||
export default ComponentsUsage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React from 'react'; | ||
import ComponentUsage from './ComponentUsage'; | ||
|
||
import componentsUsage from '../../utils/componentsUsage'; | ||
import getEmptyMessage from '../../utils/getEmptyMessage'; | ||
import usagePropTypes from '../../utils/usagePropTypes'; | ||
|
||
function HooksUsage({ data }: { data: string[] }) { | ||
return ( | ||
<div className="pt-5 mb-5"> | ||
{data.length ? data.sort().map(name => ( | ||
<ComponentUsage | ||
key={name} | ||
name={name} | ||
componentUsageInProjects={componentsUsage[name]} | ||
/> | ||
)) : getEmptyMessage('hooks')} | ||
</div> | ||
); | ||
} | ||
|
||
HooksUsage.propTypes = usagePropTypes; | ||
|
||
export default HooksUsage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React from 'react'; | ||
import ComponentUsage from './ComponentUsage'; | ||
|
||
import componentsUsage from '../../utils/componentsUsage'; | ||
import getEmptyMessage from '../../utils/getEmptyMessage'; | ||
import usagePropTypes from '../../utils/usagePropTypes'; | ||
|
||
function IconsUsage({ data }: { data: string[] }) { | ||
return ( | ||
<div className="pt-5 mb-5"> | ||
{data.length ? data.sort().map(name => ( | ||
<ComponentUsage | ||
key={name} | ||
name={name} | ||
componentUsageInProjects={componentsUsage[name]} | ||
/> | ||
)) : getEmptyMessage('utils')} | ||
</div> | ||
); | ||
} | ||
|
||
IconsUsage.propTypes = usagePropTypes; | ||
|
||
export default IconsUsage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import React from 'react'; | ||
import { DataTable } from '~paragon-react'; | ||
import ProjectUsageExamples, { IProjectUsageExamples } from './ProjectUsageExamples'; | ||
|
||
import getDependentProjectsUsages from '../../utils/getDependentProjectsUsages'; | ||
|
||
function ProjectsUsage() { | ||
const dependentProjects = getDependentProjectsUsages(); | ||
|
||
return ( | ||
<div className="pt-5 mb-5"> | ||
<h3 className="mb-4">Projects in Open edX consuming Paragon</h3> | ||
<DataTable | ||
isExpandable | ||
isSortable | ||
itemCount={dependentProjects.length} | ||
data={dependentProjects} | ||
renderRowSubComponent={({ row }: IProjectUsageExamples) => <ProjectUsageExamples row={row} />} | ||
columns={[ | ||
{ | ||
id: 'expander', | ||
Header: DataTable.ExpandAll, | ||
Cell: DataTable.ExpandRow, | ||
}, | ||
{ | ||
Header: 'Project Name', | ||
accessor: 'folderName', | ||
}, | ||
{ Header: 'Paragon Version', accessor: 'version' }, | ||
{ Header: 'Import Count', accessor: 'count' }, | ||
]} | ||
> | ||
<DataTable.TableControlBar /> | ||
<DataTable.Table /> | ||
<DataTable.EmptyTable content="No projects" /> | ||
<DataTable.TableFooter /> | ||
</DataTable> | ||
</div> | ||
); | ||
} | ||
|
||
export default ProjectsUsage; |
Oops, something went wrong.