Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues/KUI 1196 show barchart labels #356

Merged
merged 3 commits into from
Jun 24, 2024
Merged

Issues/KUI 1196 show barchart labels #356

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6fed7ee
fix(KUI-1196): fix the problem of showing labels for barcharts
amirhossein-haerian Jun 19, 2024
a76706b
fix(KUI-1196): add school label and change the heading font-size for …
amirhossein-haerian Jun 20, 2024
9ac9a6c
fix(KUI-1196): change ternary conditional statement to normal conditi…
amirhossein-haerian Jun 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 19 additions & 7 deletions public/js/app/components/statistics/AnalysesSummary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,30 @@ function addAllSchoolsData({ totalCourses, totalUniqPublishedAnalyses }) {
return allSchools
}

function Captions({ year, seasons }) {
const { translation, languageIndex } = useLanguage()
function Captions({ school, year, seasons }) {
const {
languageIndex,
translation: {
statisticsLabels,
statisticsLabels: {
formLabels: { formSubHeaders },
},
},
} = useLanguage()

const seasonsStr = seasons.map(season => seasonLib.labelSeason(season, languageIndex)).join(', ')
return (
<Row>
<Col xs="4" style={{ flex: 'none', width: 'auto', paddingBottom: '20px' }}>
<label>{translation.statisticsLabels.formLabels.formSubHeaders.year}</label>
<label>{formSubHeaders.school}</label>
{`: ${school === 'allSchools' ? statisticsLabels[school] : school}`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I always have a hard time reading ternary operators inline like that. What do you think of extracting that part to something like getSchoolName or something like that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We liked the idea and we made the required changes 🚀

</Col>
<Col xs="4" style={{ flex: 'none', width: 'auto', paddingBottom: '20px' }}>
<label>{formSubHeaders.year}</label>
{`: ${year}`}
</Col>
<Col xs="4" style={{ flex: 'none', width: 'auto', paddingBottom: '20px' }}>
<label>{translation.statisticsLabels.formLabels.formSubHeaders.seasons}</label>
<label>{formSubHeaders.seasons}</label>
{`: ${seasonsStr}`}
</Col>
</Row>
Expand All @@ -46,12 +58,12 @@ function Captions({ year, seasons }) {
function AnalysesNumbersTable({ statisticsResult }) {
const { translation } = useLanguage()
const { analysesNumbersTable } = translation.statisticsLabels.summaryLabels
const { combinedAnalysesPerSchool, year, seasons } = statisticsResult
const { combinedAnalysesPerSchool, year, seasons, school } = statisticsResult
const cellNames = ['totalCourses', 'totalUniqPublishedAnalyses']

return (
<>
<Captions year={year} seasons={seasons} />
<Captions school={school} year={year} seasons={seasons} />

<TableSummary
docsPerSchool={combinedAnalysesPerSchool}
Expand All @@ -74,7 +86,7 @@ function AnalysesNumbersCharts({ statisticsResult }) {

return (
<>
<Captions year={year} seasons={seasons} />
<Captions school={school} year={year} seasons={seasons} />

<Charts chartNames={chartNames} schools={schools} />
</>
Expand Down
23 changes: 11 additions & 12 deletions public/js/app/components/statistics/Chart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,11 @@ function splitIntoLines(label) {
}

function getChartData(numberName, schools, allSchoolsLabels) {
const schoolCodes = Object.keys(schools)
const orderedSchools = schoolsLib.orderedSchoolsFormOptions()

let schoolCodes = Object.keys(schools)

schoolCodes = schoolCodes.sort((a, b) => orderedSchools.indexOf(a) - orderedSchools.indexOf(b))

return schoolCodes.map(school => {
const schoolNumbers = schools[school]
Expand Down Expand Up @@ -62,21 +66,16 @@ function Charts({ chartNames = [], schools = {} }) {

function Chart({ data = [], label = '' }) {
const styles = {
font: { fontFamily: 'Open Sans', fontSize: '16px' },
font: { fontFamily: 'Open Sans', fontSize: 'font-heading-xs' },
}
return (
<VictoryChart height={405} width={405} theme={VictoryTheme.material} domainPadding={20} style={styles.font}>
<VictoryLabel x={4} y={24} text={label} style={styles.font} />
{data.length > 1 ? (
<VictoryAxis
tickValues={schoolsLib.orderedSchoolsFormOptions}
style={{
tickLabels: styles.font,
}}
/>
) : (
<VictoryAxis />
)}
<VictoryAxis
style={{
tickLabels: styles.font,
}}
/>
<VictoryAxis
dependentAxis
tickValues={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
Expand Down
23 changes: 15 additions & 8 deletions public/js/app/components/statistics/MemosSummary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,13 @@ function addAllSchoolsData({
return allSchools
}

function Captions({ year, periods }) {
function Captions({ school, year, periods }) {
const {
translation: {
statisticsLabels: { formLabels },
statisticsLabels,
statisticsLabels: {
formLabels: { formSubHeaders },
},
},
languageIndex,
} = useLanguage()
Expand All @@ -71,12 +74,16 @@ function Captions({ year, periods }) {
const periodsStr = uniqquePeriodsLabels.join(', ')
return (
<Row>
<Col xs="2" style={{ flex: 'none', width: 'auto', paddingBottom: '20px' }}>
<label>{formLabels.formSubHeaders.year}</label>
<Col xs="4" style={{ flex: 'none', width: 'auto', paddingBottom: '20px' }}>
<label>{formSubHeaders.school}</label>
{`: ${school === 'allSchools' ? statisticsLabels[school] : school}`}
</Col>
<Col xs="4" style={{ flex: 'none', width: 'auto', paddingBottom: '20px' }}>
<label>{formSubHeaders.year}</label>
{`: ${year}`}
</Col>
<Col xs="4" style={{ flex: 'none', width: 'auto', paddingBottom: '20px' }}>
<label>{formLabels.formSubHeaders.periods}</label>
<label>{formSubHeaders.periods}</label>
{`: ${periodsStr}`}
</Col>
</Row>
Expand All @@ -90,12 +97,12 @@ function MemosNumbersTable({ statisticsResult }) {
},
} = useLanguage()
const { memosNumbersTable } = summaryLabels
const { combinedMemosPerSchool, year, periods } = statisticsResult
const { combinedMemosPerSchool, year, periods, school } = statisticsResult
const cellNames = getCellNames()

return (
<>
<Captions year={year} periods={periods} />
<Captions school={school} year={year} periods={periods} />

<TableSummary
docsPerSchool={combinedMemosPerSchool}
Expand Down Expand Up @@ -123,7 +130,7 @@ function MemosNumbersCharts({ statisticsResult }) {

return (
<>
<Captions year={year} periods={periods} languageIndex={languageIndex} />
<Captions school={school} year={year} periods={periods} languageIndex={languageIndex} />

<Charts chartNames={chartNames} schools={schools} languageIndex={languageIndex} />
</>
Expand Down
Loading