5 | 
10 | 
53 | Sorry, we were unable to process your query!
17 |{{error.type}}
18 |{{detail.msg}}
19 |
2 |
12 |
13 |
20 |
21 |
22 |
25 |
26 |
27 | About
28 |
29 |
72 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import {TestBed} from '@angular/core/testing';
2 | import {AppComponent} from './app.component';
3 | import {OshdbModule} from './oshdb/oshdb.module';
4 | import {OhsomeApiMetadataProviderService} from './oshdb/ohsome-api-metadata-provider.service';
5 | import OhsomeApiMetadataProviderServiceMock from './oshdb/ohsome-api-metadata-provider.service.mock';
6 | import {QueryPanelComponent} from './query-panel/query-panel.component';
7 | import {ResultPanelComponent} from './result-panel/result-panel.component';
8 | import {ResultListDirective} from './result-panel/result-list.directive';
9 | import {SharedModule} from './shared/shared.module';
10 | import {OqtModule} from './oqt/oqt.module';
11 | import {BrowserModule} from '@angular/platform-browser';
12 | import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
13 | import {OqtApiMetadataProviderService} from './oqt/oqt-api-metadata-provider.service';
14 | import OqtApiMetadataProviderServiceMock from './oqt/oqt-api-metadata-provider.service.mock';
15 |
16 | describe('AppComponent', () => {
17 |
18 | beforeEach(async () => {
19 | await TestBed.configureTestingModule({
20 | declarations: [
21 | AppComponent,
22 | QueryPanelComponent,
23 | ResultPanelComponent,
24 | ResultListDirective,
25 | ],
26 | imports: [BrowserModule,
27 | SharedModule,
28 | OshdbModule,
29 | OqtModule],
30 | providers: [
31 | { provide: OhsomeApiMetadataProviderService, useValue: OhsomeApiMetadataProviderServiceMock },
32 | { provide: OqtApiMetadataProviderService, useValue: OqtApiMetadataProviderServiceMock },
33 | provideHttpClient(withInterceptorsFromDi())
34 | ]
35 | }).compileComponents();
36 | });
37 |
38 | it('should create the app', () => {
39 | const fixture = TestBed.createComponent(AppComponent);
40 | const app = fixture.componentInstance;
41 | expect(app).toBeTruthy();
42 | });
43 |
44 | it(`should have as title 'ohsome dashboard'`, () => {
45 | const fixture = TestBed.createComponent(AppComponent);
46 | const app = fixture.componentInstance;
47 | expect(app.title).toEqual('ohsome dashboard');
48 | });
49 |
50 | // it('should render title', () => {
51 | // const fixture = TestBed.createComponent(AppComponent);
52 | // fixture.detectChanges();
53 | // const compiled = fixture.nativeElement as HTMLElement;
54 | // expect(compiled.querySelector('.content span')?.textContent).toContain('ng15-dashboard app is running!');
55 | // });
56 | });
57 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component} from '@angular/core';
2 | import {OhsomeApiMetadataProviderService} from './oshdb/ohsome-api-metadata-provider.service';
3 | declare let $;
4 |
5 | @Component({
6 | selector: 'app-root',
7 | templateUrl: './app.component.html',
8 | styleUrls: ['./app.component.css'],
9 | standalone: false
10 | })
11 | export class AppComponent implements AfterViewInit{
12 | title = 'ohsome dashboard';
13 | public hasAnnouncement: boolean;
14 | public announcement: string;
15 | public currentYear: string = new Date().getFullYear().toString();
16 | protected readonly window = window;
17 |
18 | constructor(ohsomeApiMetadataProviderService: OhsomeApiMetadataProviderService) {
19 | this.hasAnnouncement = ohsomeApiMetadataProviderService.hasOhsomeApiAnnouncement();
20 | this.announcement = ohsomeApiMetadataProviderService.getOhsomeApiAnnouncement();
21 | }
22 |
23 | ngAfterViewInit(): void {
24 | this.handleAnnouncementClose()
25 | }
26 |
27 | private handleAnnouncementClose() {
28 | $('#announcement .message .close')
29 | .on('click', function() {
30 | $('#announcement')
31 | .transition('fade')
32 | ;
33 | })
34 | ;
35 | }
36 |
37 | }
38 |
--------------------------------------------------------------------------------
/src/app/oqt/metadata-indicator.response.mock.ts:
--------------------------------------------------------------------------------
1 | export const oqtMetadataIndicatorsResponseMock = {
2 | 'api-version': '0.14.1',
3 | 'attribution': {
4 | 'url': 'https://github.com/GIScience/ohsome-quality-analyst/blob/main/data/COPYRIGHTS.md'
5 | },
6 | 'result': [
7 | {
8 | 'key': 'mapping-saturation',
9 | 'name': 'Mapping Saturation',
10 | 'description': 'Calculate if mapping has saturated.\nHigh saturation has been reached if the growth of the fitted curve is minimal.',
11 | 'quality-dimension': ['completeness'],
12 | 'label-description': {
13 | 'red': 'No saturation identified (Saturation ≤ 30%).',
14 | 'yellow': 'Saturation is in progress (30% < Saturation ≤ 97%).',
15 | 'green': 'High saturation has been reached (97% < Saturation ≤ 100%).',
16 | 'undefined': 'Saturation could not be calculated.'
17 | }
18 | },
19 | {
20 | 'key': 'currentness',
21 | 'name': 'Currentness',
22 | 'description': 'Calculate the currentness.',
23 | 'quality-dimension': ['currentness'],
24 | 'label-description': {
25 | 'red': 'No saturation identified (Saturation ≤ 30%).',
26 | 'yellow': 'Saturation is in progress (30% < Saturation ≤ 97%).',
27 | 'green': 'High saturation has been reached (97% < Saturation ≤ 100%).',
28 | 'undefined': 'Saturation could not be calculated.'
29 | }
30 | },
31 | {
32 | 'key': 'attribute-completeness',
33 | 'name': 'Attribute Completeness',
34 | 'description': 'Calculate the currentness.',
35 | 'quality-dimension': ['completeness'],
36 | 'label-description': {
37 | 'red': 'No saturation identified (Saturation ≤ 30%).',
38 | 'yellow': 'Saturation is in progress (30% < Saturation ≤ 97%).',
39 | 'green': 'High saturation has been reached (97% < Saturation ≤ 100%).',
40 | 'undefined': 'Saturation could not be calculated.'
41 | }
42 | },
43 | {
44 | 'key': 'poi-density',
45 | 'name': 'POI Density',
46 | 'description': 'Calculate the POI Density.',
47 | 'quality-dimension': ['completeness'],
48 | 'label-description': {
49 | 'red': 'No saturation identified (Saturation ≤ 30%).',
50 | 'yellow': 'Saturation is in progress (30% < Saturation ≤ 97%).',
51 | 'green': 'High saturation has been reached (97% < Saturation ≤ 100%).',
52 | 'undefined': 'Saturation could not be calculated.'
53 | }
54 | },
55 | ]
56 | };
57 |
--------------------------------------------------------------------------------
/src/app/oqt/oqt-api-metadata-provider.service.mock.ts:
--------------------------------------------------------------------------------
1 | import createSpyObj = jasmine.createSpyObj;
2 | import {of} from 'rxjs';
3 | import {oqtApiMetadataResponseMock, oqtAttributesResponseMock} from './oqt-api-metadata.response.mock';
4 | import {OqtApiMetadataProviderService} from './oqt-api-metadata-provider.service';
5 |
6 | const OqtApiMetadataProviderServiceMock: jasmine.SpyObj
30 |
71 |
31 |
66 |
67 |
32 |
39 | Data Sources
33 |
34 | Analyses OSM data © OpenStreetMap
35 | contributors.
36 | Base map from OpenStreetMap and OpenStreetMap Foundation.
37 |
40 |
55 | Technology
41 |42 | The “ohsome” OpenStreetMap History Analyzer Platform 43 | and ohsome quality analyst is based 44 | on technology developed by HeiGIT. 45 |
46 |47 | The source code for this dashboard is open source (GPL-3.0) and available on GitHub. 49 |
50 |OSM Quality Analyses are powered by:
51 | 54 |
56 |
65 | Contact
57 |
58 | HeiGIT gGmbH
59 | Heidelberg, Germany
60 | Email: ohsome@heigit.org
61 | Web: ohsome.org and
62 | oqt.ohsome.org
63 |
68 |
70 | © {{ currentYear }} HeiGIT gGmbH
69 |
2 |
4 |
10 |
11 | Select a specific land cover class to check. Leave empty for all classes:
2 | 3 |
4 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/app/oqt/query-form/oqt-api-query-form/thematical-accuracy-indicator/thematical-accuracy-indicator.component.spec.ts:
--------------------------------------------------------------------------------
1 | import {ComponentFixture, TestBed} from '@angular/core/testing';
2 | import {ThematicalAccuracyIndicatorComponent} from './thematical-accuracy-indicator.component';
3 | import {OqtModule} from '../../../oqt.module';
4 | import {OqtApiMetadataProviderService} from '../../../oqt-api-metadata-provider.service';
5 | import OqtApiMetadataProviderServiceMock from '../../../oqt-api-metadata-provider.service.mock';
6 | import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
7 | import {NgForm} from '@angular/forms';
8 | import { provideAppInitializer } from '@angular/core';
9 | import {preparePrismToRenderOhsomeFilterLangauge} from '../../../../app.module';
10 | import {PrismEditorComponent} from '../../../../shared/components/prism-editor/prism-editor.component';
11 |
12 |
13 | describe('ThematicalAccuracyIndicatorComponent', () => {
14 | let component: ThematicalAccuracyIndicatorComponent;
15 | let fixture: ComponentFixture
2 |
3 |
4 |
5 |
10 |
11 |
12 |
13 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/app/oqt/result/oqt-result.component.css:
--------------------------------------------------------------------------------
1 | #header #leftMenu {
2 | margin-left: 1rem;
3 | overflow: hidden;
4 | }
5 |
6 | #header #boundaryLabelsItem {
7 | min-width: 0;
8 | flex: 1 1 auto;
9 | align-items: baseline;
10 | line-height: inherit;
11 | }
12 |
13 | #header #boundaryLabelsText {
14 | text-overflow: ellipsis;
15 | overflow-x: hidden;
16 | white-space: nowrap;
17 | }
18 |
19 | .result {
20 | margin-bottom: 1rem !important;
21 | background-color: whitesmoke;
22 | }
23 |
24 | .ui.circular.label.topic {
25 | font-family: 'latin_modern_mono_prop10Rg', monospace;
26 | background-color: #E8E8E8 !important;
27 | color: rgba(0, 0, 0, 0.6) !important;
28 | margin: 0 0.5rem !important;
29 | text-transform: none !important;
30 | }
31 |
32 | app-indicator-result {
33 | display: flex;
34 | flex-grow: 1;
35 | }
36 |
37 | .indicator-container {
38 | display: flex !important;
39 | min-height: 100px;
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/oqt/result/oqt-result.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
35 |
36 |
37 | {{displayQualityLabel}}
6 | {{indicatorName}}
7 | 8 |
38 |
39 |
40 |
41 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/src/app/oqt/types/AttributionJSON.d.ts:
--------------------------------------------------------------------------------
1 | interface AttributionJSON {
2 | url: string;
3 | text?: string;
4 | }
5 |
6 | export {AttributionJSON};
7 |
--------------------------------------------------------------------------------
/src/app/oqt/types/BaseResponseJSON.d.ts:
--------------------------------------------------------------------------------
1 | import {AttributionJSON} from './AttributionJSON';
2 |
3 | interface BaseResponseJSON {
4 | apiVersion: string;
5 | attribution: AttributionJSON;
6 | }
7 |
8 | export {BaseResponseJSON};
9 |
--------------------------------------------------------------------------------
/src/app/oqt/types/ErrorResponseJSON.d.ts:
--------------------------------------------------------------------------------
1 | export interface ErrorResponseJSON {
2 | apiVersion: string;
3 | type: string;
4 | detail: { msg: string }[];
5 | }
6 |
--------------------------------------------------------------------------------
/src/app/oqt/types/MetadataResponseJSON.d.ts:
--------------------------------------------------------------------------------
1 | import {BaseResponseJSON} from './BaseResponseJSON';
2 | import {
3 | RawAttributeMetadata,
4 | RawIndicatorMetadata,
5 | RawProjectMetadata,
6 | RawQualityDimensionMetadata,
7 | RawReportMetadata,
8 | RawTopicMetadata
9 | } from './types';
10 |
11 | export interface MetadataResponseJSON extends BaseResponseJSON {
12 | result: MetadataResultJSON;
13 | }
14 |
15 | interface MetadataResultJSON {
16 | attributes: Record<[topicKey: string], Record<[attributeKey:string], RawAttributeMetadata>>,
17 | topics: { [topicKey: string]: RawTopicMetadata },
18 | indicators: { [indicatorKey: string]: RawIndicatorMetadata },
19 | reports?: {[reportKey:string]: RawReportMetadata},
20 | qualityDimensions: {[qualityDimensionKey: string]: RawQualityDimensionMetadata},
21 | projects: {[projectKey:string]: RawProjectMetadata}
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/oqt/types/types.d.ts:
--------------------------------------------------------------------------------
1 | import {Feature, MultiPolygon, Polygon} from 'geojson';
2 | import * as Plotly from 'plotly.js-dist-min';
3 | import BaseResponseJSON from './BaseResponseJSON';
4 | import {KeyValue} from '@angular/common';
5 |
6 | /**
7 | * topic as of oqt v0.14.2 /metadata
8 | */
9 | interface RawTopicMetadata {
10 | name: string;
11 | description: string;
12 | endpoint: string;
13 | aggregationType: string;
14 | projects: string[];
15 | filter: string;
16 | ratioFilter?: string | null;
17 | source: string | null;
18 | indicators: string[];
19 | }
20 |
21 | interface OqtAttribute {
22 | filter: string;
23 | name: string;
24 | description: string;
25 | }
26 |
27 | interface Topic extends RawTopicMetadata {
28 | key: string;
29 | qualityDimensions?: { [qualityDimensionKey: string]: Checkbox
42 |
49 |
43 |
48 |
45 |
47 | Time Interval
2 |
3 |
33 |
43 |
--------------------------------------------------------------------------------
/src/app/oshdb/result/result.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
60 |
61 |
4 |
5 |
14 |
6 |
11 |
12 |
13 |
7 |
8 |
9 |
10 |
15 |
16 |
26 |
17 |
22 |
23 |
24 |
25 |
18 |
19 |
20 |
21 |
27 |
28 |
31 |
32 |
62 |
63 |
78 |
--------------------------------------------------------------------------------
/src/app/oshdb/result/result.component.spec.ts:
--------------------------------------------------------------------------------
1 | import {ComponentFixture, TestBed} from '@angular/core/testing';
2 |
3 | import {ResultComponent} from './result.component';
4 | import {OshdbModule} from '../oshdb.module';
5 | import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
6 | import {OhsomeApiMetadataProviderService} from '../ohsome-api-metadata-provider.service';
7 | import OhsomeApiMetadataProviderServiceMock from '../ohsome-api-metadata-provider.service.mock';
8 |
9 | describe('ResultComponent', () => {
10 | let component: ResultComponent;
11 | let fixture: ComponentFixture
64 |
66 | {{error | json}}
65 |
67 |
69 |
70 |
71 | Empty result.
68 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/oshdb/result/simple-chart/simple-chart.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 |
3 | import {SimpleChartComponent} from './simple-chart.component';
4 |
5 | describe('SimpleChartComponent', () => {
6 | let component: SimpleChartComponent;
7 | let fixture: ComponentFixture
2 |
36 |
--------------------------------------------------------------------------------
/src/app/oshdb/result/simple-groupby-result/simple-groupby-result.component.spec.ts:
--------------------------------------------------------------------------------
1 | import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
2 |
3 | import {SimpleGroupbyResultComponent} from './simple-groupby-result.component';
4 | import {SimpleChartComponent} from '../simple-chart/simple-chart.component';
5 | import {simpleGroupbyResultMockInputs} from './simple-groupby-result.mockdata';
6 | import {OhsomeApi} from '@giscience/ohsome-js-utils';
7 | import GroupByResponse = OhsomeApi.v1.response.GroupByResponse;
8 |
9 | describe('SimpleGroupbyResultComponent', () => {
10 | let component: SimpleGroupbyResultComponent;
11 | let fixture: ComponentFixture
3 |
4 |
35 |
5 |
8 |
9 |
10 |
11 |
12 |
13 |
33 |
34 | | NAME | 15 |{{moment(chartJsDataStart[0].x).format('YYYY-MM-DD')}} | 16 |{{moment(chartJsDataEnd[0].x).format('YYYY-MM-DD')}} | 17 |GROWTH RATE | 18 |
|---|---|---|---|
| {{chartJsData.datasets[i].label}} | 24 |{{kFormatter(chartJsDataStart[i].y, unit)}} | 25 |{{kFormatter(chartJsDataEnd[i].y, unit)}} | 26 |28 | {{percentFormatter(growthRate(chartJsDataStart[i].y, chartJsDataEnd[i].y))}} 29 | | 30 |
2 |
33 |
--------------------------------------------------------------------------------
/src/app/oshdb/result/simple-result/simple-result.component.spec.ts:
--------------------------------------------------------------------------------
1 | import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
2 |
3 | import {SimpleResultComponent} from './simple-result.component';
4 | import {SimpleChartComponent} from '../simple-chart/simple-chart.component';
5 | import {ResultComponent} from '../result.component';
6 | import {simpleResultMockInputs} from './simple-result.mockdata';
7 |
8 | describe('SimpleResultComponent', () => {
9 | let component: SimpleResultComponent;
10 | let fixture: ComponentFixture
3 |
4 |
32 |
5 |
8 |
9 |
10 |
11 |
31 |
13 |
30 |
14 |
29 |
15 |
18 | {{kFormatter(chartJsDataStart[0].y, unit)}}
16 | {{moment(chartJsDataStart[0].x).format('YYYY-MM-DD')}}
17 |
19 |
22 | {{kFormatter(chartJsDataEnd[0].y, unit)}}
20 | {{moment(chartJsDataEnd[0].x).format('YYYY-MM-DD')}}
21 |
23 |
28 | {{percentFormatter(growthRate)}}
26 | growth rate
27 |
2 |
6 |
7 | Result Log
3 | 4 |
8 |
9 |
--------------------------------------------------------------------------------
/src/app/result-panel/result-panel.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 |
3 | import {ResultPanelComponent} from './result-panel.component';
4 | import {ResultListDirective} from './result-list.directive';
5 | import {DataService} from '../singelton-services/data.service';
6 |
7 | describe('ResultPanelComponent', () => {
8 | let component: ResultPanelComponent;
9 | let fixture: ComponentFixture
10 | Copy Permalink
11 |
12 |
13 |
14 |
15 |
16 |
17 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/app/shared/components/boundary-select-input/boundary-select-input.component.css:
--------------------------------------------------------------------------------
1 | :host {
2 | position: relative;
3 | min-height: 400px;
4 | }
5 |
6 | .field {
7 | height: 100%;
8 | display: flex;
9 | flex-direction: column;
10 | }
11 |
12 |
13 | #boundaryMap {
14 | z-index: 0;
15 | flex: 1;
16 |
17 | }
18 |
19 |
--------------------------------------------------------------------------------
/src/app/shared/components/boundary-select-input/boundary-select-input.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/app/shared/components/plotly-chart/plotly-chart.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GIScience/ohsome-dashboard/af9fe0280389325c709b5fb94c8dc262048702de/src/app/shared/components/plotly-chart/plotly-chart.component.css
--------------------------------------------------------------------------------
/src/app/shared/components/plotly-chart/plotly-chart.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/shared/components/plotly-chart/plotly-chart.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PlotlyChartComponent } from './plotly-chart.component';
4 |
5 | describe('PlotlyChartComponent', () => {
6 | let component: PlotlyChartComponent;
7 | let fixture: ComponentFixture
2 |
5 |
--------------------------------------------------------------------------------
/src/app/shared/components/prism-editor/prism-editor.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PrismEditorComponent } from './prism-editor.component';
4 |
5 | describe('PrismEditorComponent', () => {
6 | let component: PrismEditorComponent;
7 | let fixture: ComponentFixture
3 |
4 |