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

Jump to bottom

[ENG-6368] Share summary graphs #2361

Merged
merged 8 commits into from
Oct 23, 2024
Merged

[ENG-6368] Share summary graphs #2361

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2f4d64d
Update institution metric factory
futa-ikeda Oct 22, 2024
e8bcfdd
Get graph data from SHARE
futa-ikeda Oct 22, 2024
30b1286
Update tests; Remove faulty "other" category
futa-ikeda Oct 22, 2024
48939e3
Update comment
futa-ikeda Oct 22, 2024
57d4fb7
CR comment; fix object-type graph
futa-ikeda Oct 23, 2024
5c6be9b
CR comment: refactor charts getting data from SHARE
futa-ikeda Oct 23, 2024
904354d
Update test
futa-ikeda Oct 23, 2024
cf667ae
CR Feedback
futa-ikeda Oct 23, 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
7 changes: 6 additions & 1 deletion app/institutions/dashboard/-components/chart-kpi-wrapper/chart-kpi/component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default class ChartKpi extends Component<KPIChartWrapperArgs> {
* @returns a ChartOptions model which is custom to COS
*/
get chartOptions(): ChartOptions {
return {
const options = {
aspectRatio: 1,
legend: {
display: false,
Expand All @@ -42,9 +42,14 @@ export default class ChartKpi extends Component<KPIChartWrapperArgs> {
}],
yAxes: [{
display: false,
ticks: { min: 0 },
}],
},
};
if (this.args.data.chartType === 'bar') {
options.scales.yAxes[0].display = true;
}
return options;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion app/institutions/dashboard/-components/chart-kpi-wrapper/chart-kpi/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: center;
width: 290px;
min-height: 290px;
height: fit-content;
Expand Down
128 changes: 67 additions & 61 deletions app/institutions/dashboard/-components/chart-kpi-wrapper/chart-kpi/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,74 @@
local-class='chart-container {{if (is-mobile) 'mobile'}}'
...attributes
>
<div local-class='top-container'>
<div
data-test-chart
local-class='ember-chart'
>
<EmberChart
@type={{@data.chartType}}
@options={{this.chartOptions}}
@data={{this.chartData}}
/>
</div>
</div>
<div local-class='bottom-container'>
{{#let (unique-id 'expanded-data') as |expandedDataId|}}
<div local-class='title-container'>
<div data-test-chart-title local-class='title'>{{@data.title}}</div>
<div local-class='button-container'>
<Button
data-analytics-name='Expand additional data'
data-test-expand-additional-data
@layout='fake-link'
aria-controls={{expandedDataId}}
aria-expanded={{this.expanded}}
aria-label={{if this.expanded
(t 'institutions.dashboard.kpi-chart.close-expanded-data')
(t 'institutions.dashboard.kpi-chart.open-expanded-data')
}}
{{on 'click' this.toggleExpandedData}}
>
<FaIcon data-test-toggle-icon @icon={{if this.collapsed 'caret-down' 'caret-up'}} />
</Button>
</div>
</div>
<div
local-class='expanded-data-container {{if this.collapsed 'collapsed'}}'
data-test-expansion-data
id={{expandedDataId}}
{{#if @data.taskInstance.isRunning}}
<LoadingIndicator @dark={{true}} />
{{else if @data.taskInstance.isError}}
{{t 'institutions.dashboard.kpi-chart.error'}}
{{else}}
<div local-class='top-container'>
<div
data-test-chart
local-class='ember-chart'
>
<ul local-class='data-list'>
{{#each this.expandedData as |data index |}}
<li
local-class='data-container'
<EmberChart
@type={{@data.chartType}}
@options={{this.chartOptions}}
@data={{this.chartData}}
/>
</div>
</div>
<div local-class='bottom-container'>
{{#let (unique-id 'expanded-data') as |expandedDataId|}}
<div local-class='title-container'>
<div data-test-chart-title local-class='title'>{{@data.title}}</div>
<div local-class='button-container'>
<Button
data-analytics-name='Expand additional data'
data-test-expand-additional-data
@layout='fake-link'
aria-controls={{expandedDataId}}
aria-expanded={{this.expanded}}
aria-label={{if this.expanded
(t 'institutions.dashboard.kpi-chart.close-expanded-data')
(t 'institutions.dashboard.kpi-chart.open-expanded-data')
}}
{{on 'click' this.toggleExpandedData}}
>
<div
local-class='color'
data-test-expanded-color='{{index}}'
style={{html-safe (concat 'background-color:' data.color )}}>
</div>
<div local-class='name'
data-test-expanded-name='{{index}}'
>
{{data.name}}
</div>
<div local-class='total'
data-test-expanded-total='{{index}}'
<FaIcon data-test-toggle-icon @icon={{if this.collapsed 'caret-down' 'caret-up'}} />
</Button>
</div>
</div>
<div
local-class='expanded-data-container {{if this.collapsed 'collapsed'}}'
data-test-expansion-data
id={{expandedDataId}}
>
<ul local-class='data-list'>
{{#each this.expandedData as |data index |}}
<li
local-class='data-container'
>
{{data.total}}
</div>
</li>
{{/each}}
</ul>
</div>
{{/let}}
</div>
<div
local-class='color'
data-test-expanded-color='{{index}}'
style={{html-safe (concat 'background-color:' data.color )}}>
</div>
<div local-class='name'
data-test-expanded-name='{{index}}'
>
{{data.name}}
</div>
<div local-class='total'
data-test-expanded-total='{{index}}'
>
{{data.total}}
</div>
</li>
{{/each}}
</ul>
</div>
{{/let}}
</div>
{{/if}}
</div>
67 changes: 16 additions & 51 deletions app/institutions/dashboard/-components/chart-kpi-wrapper/component-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ module('Integration | institutions | dashboard | -components | kpi-chart-wrapper
numberOfUsers: 37,
},
],
institution: {
iris: ['bleh'],
},
});

this.set('model', model);
Expand Down Expand Up @@ -225,22 +228,21 @@ module('Integration | institutions | dashboard | -components | kpi-chart-wrapper

// And the expanded data position 0 name is verified
assert.dom(`${parentDom} [data-test-expanded-name="0"]`)
.hasText('Math');
.exists();

// And the expanded data position 0 total is verified
assert.dom(`${parentDom} [data-test-expanded-total="0"]`)
.hasText('25');
.hasText('3');

// And the expanded data position 1 name is verified
assert.dom(`${parentDom} [data-test-expanded-name="1"]`)
.hasText('Science');
.exists();

// And the expanded data position 1 total is verified
assert.dom(`${parentDom} [data-test-expanded-total="1"]`)
.hasText('37');
.hasText('2');

// Finally there are only 2 expanded data points
assert.dom(`${parentDom} [data-test-expanded-name="2"]`)
assert.dom(`${parentDom} [data-test-expanded-total="2"]`)
.doesNotExist();
});

Expand All @@ -261,19 +263,19 @@ module('Integration | institutions | dashboard | -components | kpi-chart-wrapper

// And the expanded data position 0 name is verified
assert.dom(`${parentDom} [data-test-expanded-name="0"]`)
.hasText('Math');
.exists();

// And the expanded data position 0 total is verified
assert.dom(`${parentDom} [data-test-expanded-total="0"]`)
.hasText('25');
.hasText('3');

// And the expanded data position 1 name is verified
assert.dom(`${parentDom} [data-test-expanded-name="1"]`)
.hasText('Science');
.exists();

// And the expanded data position 1 total is verified
assert.dom(`${parentDom} [data-test-expanded-total="1"]`)
.hasText('37');
.hasText('2');

// Finally there are only 2 expanded data points
assert.dom(`${parentDom} [data-test-expanded-name="2"]`)
Expand All @@ -297,56 +299,19 @@ module('Integration | institutions | dashboard | -components | kpi-chart-wrapper

// And the expanded data position 0 name is verified
assert.dom(`${parentDom} [data-test-expanded-name="0"]`)
.hasText('Math');

// And the expanded data position 0 total is verified
assert.dom(`${parentDom} [data-test-expanded-total="0"]`)
.hasText('25');

// And the expanded data position 1 name is verified
assert.dom(`${parentDom} [data-test-expanded-name="1"]`)
.hasText('Science');

// And the expanded data position 1 total is verified
assert.dom(`${parentDom} [data-test-expanded-total="1"]`)
.hasText('37');

// Finally there are only 2 expanded data points
assert.dom(`${parentDom} [data-test-expanded-name="2"]`)
.doesNotExist();
});

test('it calculates the Public vs Private Data Storage data correctly', async function(assert) {
// Given the component is rendered
await render(hbs`
<Institutions::Dashboard::-Components::ChartKpiWrapper
@model={{this.model}}
/>
`);
const parentDom = '[data-test-kpi-chart="7"]';

// When I click the expanded icon
await click(`${parentDom} [data-test-expand-additional-data]`);

// And the title is verified
assert.dom(`${parentDom} [data-test-chart-title]`)
.hasText('Public vs Private Data Storage');

// And the expanded data position 0 name is verified
assert.dom(`${parentDom} [data-test-expanded-name="0"]`)
.hasText('Public Data Storage');
.exists();

// And the expanded data position 0 total is verified
assert.dom(`${parentDom} [data-test-expanded-total="0"]`)
.hasText('2000');
.hasText('3');

// And the expanded data position 1 name is verified
assert.dom(`${parentDom} [data-test-expanded-name="1"]`)
.hasText('Private Data Storage');
.exists();

// And the expanded data position 1 total is verified
assert.dom(`${parentDom} [data-test-expanded-total="1"]`)
.hasText('2100');
.hasText('2');

// Finally there are only 2 expanded data points
assert.dom(`${parentDom} [data-test-expanded-name="2"]`)
Expand Down
Loading
Loading