Added Table and chart view component to record view

Author: ronitjadhav

apps/geoadmin-demo/src/index.html

@@ -103,6 +103,8 @@
             recordView.setAttribute('primary-color', '#0f4395')
             recordView.setAttribute('secondary-color', '#8bc832')
             recordView.setAttribute('record-id', uuid)
+            recordView.style.height = '100%'
+
 
             container.appendChild(closeButton)
             container.appendChild(recordView)

apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html

@@ -22,6 +22,37 @@
           [metadata]="record"
         ></gn-ui-metadata-contact>
       </div>
+      <div class="w-full h-full flex flex-col">
+        <div class="font-title text-lg mt-4 mb-2">
+          <span translate>record.metadata.preview</span>
+        </div>
+        <mat-tab-group>
+          <mat-tab label="Table View">
+            <div class="relative h-full" style="height: 500px;">
+              <wc-gn-dataset-view-table
+                class="overflow-auto grow h-full"
+                [apiUrl]="apiUrl"
+                [searchId]="searchId"
+                [datasetId]="record.uniqueIdentifier"
+              ></wc-gn-dataset-view-table>
+            </div>
+          </mat-tab>
+          <mat-tab label="Chart View">
+            <div class="relative h-full" style="height: 500px;">
+              <wc-gn-dataset-view-chart
+                class="overflow-auto grow h-full"
+                [apiUrl]="apiUrl"
+                [searchId]="searchId"
+                [datasetId]="record.uniqueIdentifier"
+                [aggregation]="'average'"
+                [xProperty]="'adresse'"
+                [chartType]="'line'"
+              ></wc-gn-dataset-view-chart>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+
       <div *ngIf="getDownloads(record?.onlineResources)?.length > 0">
         <div
           class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"

apps/webcomponents/src/app/webcomponents.module.ts

@@ -64,6 +64,8 @@ import {
   BlockListComponent,
   PreviousNextButtonsComponent,
 } from '@geonetwork-ui/ui/layout'
+import {ChartViewComponent, TableViewComponent} from "@geonetwork-ui/feature/dataviz";
+import {MatTabsModule} from "@angular/material/tabs";
 
 const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
   [GnFacetsComponent, 'gn-facets'],
@@ -132,6 +134,9 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
     DownloadItemComponent,
     PreviousNextButtonsComponent,
     ErrorComponent,
+    TableViewComponent,
+    ChartViewComponent,
+    MatTabsModule,
   ],
   providers: [
     provideGn4(),