[ENG-5024] feature/insti-dash-improv

app/adapters/share-adapter.ts

@@ -5,7 +5,7 @@ const osfUrl = config.OSF.url;
 
 export default class ShareAdapter extends JSONAPIAdapter {
     host = config.OSF.shareBaseUrl.replace(/\/$/, ''); // Remove trailing slash to avoid // in URLs
-    namespace = 'api/v3';
+    namespace = 'trove';
 
     queryRecord(store: any, type: any, query: any) {
         // check if we aren't serving locally, otherwise add accessService query param to card/value searches

app/guid-node/registrations/styles.scss

@@ -1,4 +1,5 @@
 // stylelint-disable max-nesting-depth, selector-max-compound-selectors
+@import 'app/styles/components';
 
 .registration-container {
     margin: 30px;
@@ -19,41 +20,7 @@
 
             /* stylelint-disable selector-no-qualifying-type */
             ul.tab-list {
-                margin-bottom: 10px;
-                border-bottom: 1px solid #ddd;
-                box-sizing: border-box;
-                color: rgb(51, 51, 51);
-                display: block;
-                line-height: 20px;
-                list-style-image: none;
-                list-style-position: outside;
-                list-style-type: none;
-                height: 41px;
-                padding: 0;
-            }
-
-            /* stylelint-enable selector-no-qualifying-type */
-            .tab-list {
-                li {
-                    display: block;
-                    position: relative;
-                    margin-bottom: -1px;
-                    float: left;
-                    height: 41px;
-                    padding: 10px 15px;
-                }
-
-                li:global(.ember-tabs__tab--selected) {
-                    background-color: #f8f8f8;
-                    border-bottom: 2px solid #204762;
-                }
-
-                li:hover {
-                    border-color: transparent;
-                    text-decoration: none;
-                    background-color: #f8f8f8;
-                    color: var(--primary-color);
-                }
+                @include tab-list;
             }
         }
     }

app/institutions/dashboard/-components/chart-kpi-wrapper/chart-kpi/component-test.ts

@@ -0,0 +1,111 @@
+import { click, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import { setupIntl } from 'ember-intl/test-support';
+import { setupRenderingTest } from 'ember-qunit';
+import { TestContext } from 'ember-test-helpers';
+import { module, test } from 'qunit';
+
+module('Integration | institutions | dashboard | -components | chart-kpi', hooks => {
+    setupRenderingTest(hooks);
+    setupMirage(hooks);
+    setupIntl(hooks);
+
+    hooks.beforeEach(function(this: TestContext) {
+        const data = Object({
+            title: 'This is the title',
+            chartData: [
+                Object({
+                    label: 'a very long data set title that needs to be handled',
+                    total: 100000,
+                }),
+            ],
+            chartType: 'pie',
+        });
+
+        this.set('data', data);
+    });
+
+    test('it renders the data correctly', async assert => {
+
+        // Given the component is rendered
+        await render(hbs`
+<Institutions::Dashboard::-Components::ChartKpiWrapper::ChartKpi
+    @data={{this.data}}
+/>
+`);
+        // Then the chart is verified
+        assert.dom('[data-test-chart]')
+            .exists('The test chart exists');
+
+        // And the title is verified
+        assert.dom('[data-test-chart-title]')
+            .hasText('This is the title');
+
+        assert.dom('[data-test-toggle-icon]')
+            .hasAttribute('data-icon', 'caret-down');
+
+        // Finally the expanded data is not visible
+        assert.dom('[data-test-expansion-data]')
+            .hasStyle({display: 'none'});
+    });
+
+    test('it renders the expanded data correctly', async assert => {
+
+        // Given the component is rendered
+        await render(hbs`
+<Institutions::Dashboard::-Components::ChartKpiWrapper::ChartKpi
+    @data={{this.data}}
+/>
+`);
+        // When I click the expanded icon
+        await click('[data-test-expand-additional-data]');
+
+        // Then I verify the icon has changed
+        assert.dom('[data-test-toggle-icon]')
+            .hasAttribute('data-icon', 'caret-up');
+
+        // And the expanded data is visible
+        assert.dom('[data-test-expansion-data]')
+            .exists('The expansion data is visible');
+
+        // And the expanded data position 0 color is verified
+        assert.dom('[data-test-expanded-color="0"]')
+            .hasAttribute('style', 'background-color:#00D1FF');
+
+        // And the expanded data position 0 name is verified
+        assert.dom('[data-test-expanded-name="0"]')
+            .hasText('a very long data set title that needs to be handled');
+
+        // And the expanded data position 0 total is verified
+        assert.dom('[data-test-expanded-total="0"]')
+            .hasText('100000');
+    });
+
+    /**
+     * I need to determine if this is going to be a feature or not
+    test('it renders the without data correctly', async function(this: EnginesIntlTestContext, assert) {
+        const data = Object({
+            total: 0,
+            title: 'This is the title',
+            icon: 'building',
+        });
+
+        this.set('data', data);
+
+
+        await render(hbs`
+<Institutions::Dashboard::-Components::ChartKpiWrapper::ChartKpi
+    @data={{this.data}}
+/>
+`);
+
+        assert.dom('[data-test-kpi-title]')
+            .hasText('This is the title');
+        assert.dom('[data-test-kpi-data]')
+            .hasText('No data for institution found.');
+        assert.dom('[data-test-kpi-icon]')
+            .hasAttribute('data-icon', 'building');
+    });
+     */
+});

app/institutions/dashboard/-components/chart-kpi-wrapper/chart-kpi/component.ts

@@ -0,0 +1,118 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { ChartData, ChartOptions } from 'ember-cli-chart';
+import Intl from 'ember-intl/services/intl';
+// eslint-disable-next-line max-len
+import { ChartDataModel, KpiChartModel } from 'ember-osf-web/institutions/dashboard/-components/chart-kpi-wrapper/component';
+
+interface KPIChartWrapperArgs {
+    data: KpiChartModel;
+}
+
+interface DataModel {
+    name: string;
+    total: number;
+    color: string;
+}
+
+export default class ChartKpi extends Component<KPIChartWrapperArgs> {
+    @service intl!: Intl;
+
+    @tracked collapsed = true;
+    @tracked expandedData = [] as DataModel[];
+
+    /**
+     * chartOptions
+     *
+     * @description A getter for the chartjs options
+     *
+     * @returns a ChartOptions model which is custom to COS
+     */
+    get chartOptions(): ChartOptions {
+        const options = {
+            aspectRatio: 1,
+            legend: {
+                display: false,
+            },
+            scales: {
+                xAxes: [{
+                    display: false,
+                }],
+                yAxes: [{
+                    display: false,
+                    ticks: { min: 0 },
+                }],
+            },
+        };
+        if (this.args.data.chartType === 'bar') {
+            options.scales.yAxes[0].display = true;
+        }
+        return options;
+    }
+
+    /**
+     * getColor
+     *
+     * @description Gets a specific color using a modulus
+     *
+     * @param index The index to retrieve
+     *
+     * @returns the color
+     */
+    private getColor(index: number): string {
+        const backgroundColors = [
+            '#00D1FF',
+            '#009CEF',
+            '#0063EF',
+            '#00568D',
+            '#004673',
+            '#00375A',
+            '#263947',
+        ];
+
+        return backgroundColors[index % backgroundColors.length];
+    }
+
+    /**
+     * chartData
+     *
+     * @description Transforms the standard chart data into data the charts can display
+     *
+     * @returns void
+     */
+    get chartData(): ChartData {
+        const backgroundColors = [] as string[];
+        const data = [] as number[];
+        const labels = [] as string[];
+        const { taskInstance, chartData } = this.args.data;
+
+        const rawData = taskInstance?.value || chartData || [];
+
+        rawData.forEach((rawChartData: ChartDataModel, $index: number) => {
+            backgroundColors.push(this.getColor($index));
+
+            data.push(rawChartData.total);
+            labels.push(rawChartData.label);
+            this.expandedData.push({
+                name: rawChartData.label,
+                total: rawChartData.total,
+                color: this.getColor($index),
+            });
+        });
+        return {
+            labels,
+            datasets: [{
+                data,
+                fill: false,
+                backgroundColor: backgroundColors,
+            }],
+        };
+    }
+
+    @action
+    public toggleExpandedData() {
+        this.collapsed = !this.collapsed;
+    }
+}