Skip to content

Commit 0b5e5cf

Browse files
committed
feat(dashboard-lib): Make stats and pie widget uses real data from the backend
1 parent 53af087 commit 0b5e5cf

35 files changed

+577
-530
lines changed

gravitee-apim-console-webui/src/management/analytics/analytics-viewer/analytics-viewer.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@
1515
limitations under the License.
1616
1717
-->
18-
<gd-dashboard [(widgets)]="widgets"></gd-dashboard>
18+
<gd-dashboard [(widgets)]="widgets" [baseURL]="baseURL"></gd-dashboard>

gravitee-apim-console-webui/src/management/analytics/analytics-viewer/analytics-viewer.component.spec.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
1919

2020
import { AnalyticsViewerComponent } from './analytics-viewer.component';
2121

22+
import { CONSTANTS_TESTING } from '../../../shared/testing';
23+
import { Constants } from '../../../entities/Constants';
24+
2225
// Mock ResizeObserver to avoid errors in tests using canvas (Chartjs)
2326
globalThis.ResizeObserver =
2427
globalThis.ResizeObserver ||
@@ -43,6 +46,10 @@ describe('AnalyticsViewerComponent', () => {
4346
provide: GraviteeDashboardService,
4447
useValue: mockGraviteeDashboardService,
4548
},
49+
{
50+
provide: Constants,
51+
useValue: CONSTANTS_TESTING,
52+
},
4653
],
4754
}).compileComponents();
4855

gravitee-apim-console-webui/src/management/analytics/analytics-viewer/analytics-viewer.component.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16-
import { GraviteeDashboardComponent, GraviteeDashboardService, Widget } from '@gravitee/gravitee-dashboard';
16+
import { GraviteeDashboardComponent, Widget, GraviteeDashboardService } from '@gravitee/gravitee-dashboard';
1717

1818
import { inject, Component } from '@angular/core';
1919

20+
import { Constants } from '../../../entities/Constants';
21+
2022
@Component({
2123
selector: 'analytics-viewer',
2224
imports: [GraviteeDashboardComponent],
@@ -25,4 +27,5 @@ import { inject, Component } from '@angular/core';
2527
})
2628
export class AnalyticsViewerComponent {
2729
widgets: Widget[] = inject(GraviteeDashboardService).getWidgets();
30+
readonly baseURL = inject(Constants).env.v2BaseURL;
2831
}

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/chart/pie-chart/converter/pie-converter.service.spec.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616
import { TestBed } from '@angular/core/testing';
1717

1818
import { PieConverterService } from './pie-converter.service';
19-
import { MeasureName } from '../../../widget/model/request/enum/measure-name';
20-
import { MetricName } from '../../../widget/model/request/enum/metric-name';
2119
import { FacetsResponse } from '../../../widget/model/response/facets-response';
2220

2321
describe('PieConverterService', () => {
@@ -35,18 +33,19 @@ describe('PieConverterService', () => {
3533
describe('convert', () => {
3634
it('should convert FacetsResponse to ChartData with labels and data', () => {
3735
const data: FacetsResponse = {
38-
type: 'facets',
3936
metrics: [
4037
{
41-
name: MetricName.HTTP_REQUESTS,
38+
name: 'HTTP_REQUESTS',
4239
buckets: [
4340
{
4441
key: 'bucket-1',
45-
measures: [{ name: MeasureName.COUNT, value: 100 }],
42+
name: 'bucket-1',
43+
measures: [{ name: 'COUNT', value: 100 }],
4644
},
4745
{
4846
key: 'bucket-2',
49-
measures: [{ name: MeasureName.COUNT, value: 200 }],
47+
name: 'bucket-2',
48+
measures: [{ name: 'COUNT', value: 200 }],
5049
},
5150
],
5251
},
@@ -61,7 +60,6 @@ describe('PieConverterService', () => {
6160

6261
it('should return empty arrays when metrics is empty', () => {
6362
const data: FacetsResponse = {
64-
type: 'facets',
6563
metrics: [],
6664
};
6765

@@ -73,22 +71,24 @@ describe('PieConverterService', () => {
7371

7472
it('should filter out buckets without measures', () => {
7573
const data: FacetsResponse = {
76-
type: 'facets',
7774
metrics: [
7875
{
79-
name: MetricName.HTTP_REQUESTS,
76+
name: 'HTTP_REQUESTS',
8077
buckets: [
8178
{
8279
key: 'bucket-1',
83-
measures: [{ name: MeasureName.COUNT, value: 100 }],
80+
name: 'bucket-1',
81+
measures: [{ name: 'COUNT', value: 100 }],
8482
},
8583
{
8684
key: 'bucket-2',
85+
name: 'bucket-2',
8786
measures: [],
8887
},
8988
{
9089
key: 'bucket-3',
91-
measures: [{ name: MeasureName.COUNT, value: 300 }],
90+
name: 'bucket-3',
91+
measures: [{ name: 'COUNT', value: 300 }],
9292
},
9393
],
9494
},

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/chart/pie-chart/converter/pie-converter.service.ts

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,16 @@ import { PieType } from '../pie-chart.component';
2525
})
2626
export class PieConverterService implements Converter {
2727
public convert(data: FacetsResponse): ChartData<PieType, number[]> {
28-
let labels: string[] = [];
29-
let dataValues: number[] = [];
28+
const labels: string[] = [];
29+
const dataValues: number[] = [];
3030

31-
if (data?.metrics) {
32-
const bucketsWithMeasures = data.metrics.flatMap(metric => metric.buckets ?? []).filter(bucket => bucket?.measures?.length);
33-
labels = bucketsWithMeasures.map(bucket => bucket.key);
34-
dataValues = bucketsWithMeasures.map(bucket => bucket.measures![0].value);
31+
if (data?.metrics?.length) {
32+
for (const bucket of data.metrics[0].buckets) {
33+
if (bucket.measures?.length) {
34+
labels.push(bucket.name);
35+
dataValues.push(bucket.measures[0].value);
36+
}
37+
}
3538
}
3639
return {
3740
labels: labels,

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/chart/pie-chart/pie-chart.component.spec.ts

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616
import { ComponentFixture, TestBed } from '@angular/core/testing';
1717

1818
import { PieChartComponent } from './pie-chart.component';
19-
import { MeasureName } from '../../widget/model/request/enum/measure-name';
20-
import { MetricName } from '../../widget/model/request/enum/metric-name';
2119
import { FacetsResponse } from '../../widget/model/response/facets-response';
2220

2321
describe('PieChartComponent', () => {
@@ -33,16 +31,16 @@ describe('PieChartComponent', () => {
3331
component = fixture.componentInstance;
3432

3533
const mockData: FacetsResponse = {
36-
type: 'facets',
3734
metrics: [
3835
{
39-
name: MetricName.HTTP_REQUESTS,
36+
name: 'HTTP_REQUESTS',
4037
buckets: [
4138
{
4239
key: 'test-key-1',
40+
name: 'test-key-1',
4341
measures: [
4442
{
45-
name: MeasureName.COUNT,
43+
name: 'COUNT',
4644
value: 100,
4745
},
4846
],
@@ -63,34 +61,36 @@ describe('PieChartComponent', () => {
6361

6462
it('should handle multiple buckets', () => {
6563
const mockData: FacetsResponse = {
66-
type: 'facets',
6764
metrics: [
6865
{
69-
name: MetricName.HTTP_REQUESTS,
66+
name: 'HTTP_REQUESTS',
7067
buckets: [
7168
{
7269
key: 'bucket-1',
70+
name: 'bucket-1',
7371
measures: [
7472
{
75-
name: MeasureName.COUNT,
73+
name: 'COUNT',
7674
value: 100,
7775
},
7876
],
7977
},
8078
{
8179
key: 'bucket-2',
80+
name: 'bucket-2',
8281
measures: [
8382
{
84-
name: MeasureName.COUNT,
83+
name: 'COUNT',
8584
value: 200,
8685
},
8786
],
8887
},
8988
{
9089
key: 'bucket-3',
90+
name: 'bucket-3',
9191
measures: [
9292
{
93-
name: MeasureName.COUNT,
93+
name: 'COUNT',
9494
value: 150,
9595
},
9696
],
@@ -110,7 +110,6 @@ describe('PieChartComponent', () => {
110110

111111
it('should handle empty metrics list', () => {
112112
const mockData: FacetsResponse = {
113-
type: 'facets',
114113
metrics: [],
115114
};
116115

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/chart/pie-chart/pie-chart.component.stories.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/an
1717
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
1818

1919
import { PieChartComponent, PieType } from './pie-chart.component';
20-
import { MeasureName } from '../../widget/model/request/enum/measure-name';
21-
import { MetricName } from '../../widget/model/request/enum/metric-name';
2220
import { FacetsResponse } from '../../widget/model/response/facets-response';
2321

2422
interface PieChartStoryArgs {
@@ -67,15 +65,15 @@ export default {
6765
},
6866
render: args => {
6967
const metricsData: FacetsResponse = {
70-
type: 'facets',
7168
metrics: [
7269
{
73-
name: MetricName.HTTP_REQUESTS,
70+
name: 'HTTP_REQUESTS',
7471
buckets: args.buckets.map(bucket => ({
7572
key: bucket.key,
73+
name: bucket.key,
7674
measures: [
7775
{
78-
name: MeasureName.COUNT,
76+
name: 'COUNT',
7977
value: bucket.value,
8078
},
8179
],

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/chart/pie-chart/pie-chart.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ export class PieChartComponent {
4747
legend: {
4848
display: true,
4949
position: 'bottom',
50+
labels: {
51+
usePointStyle: true,
52+
pointStyle: 'rectRounded',
53+
},
5054
},
5155
},
5256
} satisfies ChartConfiguration<PieType>['options'];

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/converter.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@ import { PieType } from './chart/pie-chart/pie-chart.component';
1919
import { Metric, MetricsResponse } from './widget/model/response/response';
2020

2121
export interface Converter {
22-
convert(data: MetricsResponse<Metric>): ChartData<PieType, number[]> | number[];
22+
convert(data: MetricsResponse<Metric>): ChartData<PieType, number[]> | number[] | string[];
2323
}

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/grid/grid.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,22 @@
2727
@if (item.response) {
2828
@switch (item.type) {
2929
@case ('pie') {
30-
@if (isFacetsResponse(item.response)) {
30+
@if (isFacetsWidget(item)) {
3131
<gd-pie-chart type="pie" [data]="item.response" />
3232
}
3333
}
3434
@case ('polarArea') {
35-
@if (isFacetsResponse(item.response)) {
35+
@if (isFacetsWidget(item)) {
3636
<gd-pie-chart type="polarArea" [data]="item.response" />
3737
}
3838
}
3939
@case ('doughnut') {
40-
@if (isFacetsResponse(item.response)) {
40+
@if (isFacetsWidget(item)) {
4141
<gd-pie-chart type="doughnut" [data]="item.response" />
4242
}
4343
}
4444
@case ('stats') {
45-
@if (isMeasuresResponse(item.response)) {
45+
@if (isMeasuresWidget(item)) {
4646
<gd-stats [data]="item.response" />
4747
}
4848
}

0 commit comments

Comments
 (0)