@c8y/tutorial 1021.25.5 → 1021.26.2

package/cumulocity.config.ts

@@ -632,6 +632,13 @@ export default {
         description: 'An introduction to alarm event selector example.',
         scope: 'self'
       },
+      {
+        name: 'Introduction to data points export selector',
+        module: 'DatapointsExportSelectorExampleModule',
+        path: './src/selector/data-points-export-selector-example/datapoints-export-selector.module.ts',
+        description: 'An introduction to data points export selector example.',
+        scope: 'self'
+      },
       {
         name: 'Introduction to asset selector device child',
         module: 'AssetSingleSelectModule',

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1021.25.5",
+  "version": "1021.26.2",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1021.25.5",
-    "@c8y/ngx-components": "1021.25.5",
-    "@c8y/client": "1021.25.5",
-    "@c8y/bootstrap": "1021.25.5",
+    "@c8y/style": "1021.26.2",
+    "@c8y/ngx-components": "1021.26.2",
+    "@c8y/client": "1021.26.2",
+    "@c8y/bootstrap": "1021.26.2",
     "@angular/cdk": "^18.2.10",
     "ngx-bootstrap": "18.0.0",
     "leaflet": "1.9.4",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@c8y/options": "1021.25.5",
-    "@c8y/devkit": "1021.25.5"
+    "@c8y/options": "1021.26.2",
+    "@c8y/devkit": "1021.26.2"
   },
   "peerDependencies": {
     "@angular/common": ">=18 <19"

package/src/__mocks/mock.module.ts

@@ -20,6 +20,7 @@ import { ServerSideDataGridInterceptor } from './scoped-mocks/server-side-data-g
 import { ServiceDashboardInterceptor } from './scoped-mocks/service-dashboard';
 import { TypeaheadInterceptor } from './scoped-mocks/typeahead';
 // import { BoilerplateInterceptor } from './scoped-mocks/boilerplate';
+import { MeasurementsSeriesInterceptor } from './scoped-mocks/measurement-series';
 @NgModule({
   imports: [CoreModule, CommonModule],
   providers: [
@@ -34,6 +35,16 @@ import { TypeaheadInterceptor } from './scoped-mocks/typeahead';
     //   } as ApiMockConfig,
     //   multi: true
     // },
+    {
+      provide: API_MOCK_CONFIG,
+      useValue: {
+        id: 'a-datapoints-export-selector-interceptor',
+        path: 'datapoints-export-selector-example',
+        mockService: MeasurementsSeriesInterceptor,
+        debug: true
+      } as ApiMockConfig,
+      multi: true
+    },
     {
       provide: API_MOCK_CONFIG,
       useValue: {

package/src/__mocks/scoped-mocks/measurement-series.ts

@@ -0,0 +1,112 @@
+import { IFetchResponse, IMeasurement } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { Observable } from 'rxjs';
+import { generateResponse, handleRequest } from '../utils/common';
+import { getFakeMeasurement } from '../utils/generators/measurement';
+import { generateFakeSeriesValues as getFakeSeriesData } from '../utils/generators/series';
+
+export class MeasurementsSeriesInterceptor implements HttpInterceptor {
+  private headers: string;
+
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    this.headers = req.options.headers;
+
+    return handleRequest(req, next, 'measurement/measurements', {
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  private mockPOST(_requestDescriptor) {
+    return null;
+  }
+
+  private mockPUT(_requestDescriptor) {
+    return null;
+  }
+
+  private async mockGET(
+    requestDescriptor: string
+  ): Promise<Response | { measurements: IMeasurement[] }> {
+    if (requestDescriptor.includes('series')) {
+      return this.generateSeriesResponse();
+    }
+
+    if (requestDescriptor.includes('c8y_Battery') && requestDescriptor.includes('Battery')) {
+      const sourceValue = this.getSourceValue(requestDescriptor);
+
+      return this.handleMeasurementRequest(sourceValue);
+    }
+  }
+
+  private generateSeriesResponse(): Response {
+    return generateResponse(() => getFakeSeriesData('%', 'Battery', 'c8y_Battery'));
+  }
+
+  private handleMeasurementRequest(sourceValue: string): Response {
+    const contentType = this.headers['accept'];
+
+    if (contentType === 'text/csv' || contentType === 'application/vnd.ms-excel') {
+      // in case of excel, a simplified version of a file will be generated (csv with excel extension)
+      return this.generateFakeFileResponse(contentType, sourceValue);
+    }
+
+    return generateResponse(() => this.getFakedMeasurementData('Battery', 'c8y_Battery'));
+  }
+
+  private generateFakeFileResponse(contentType: string, sourceValue: string): Response {
+    return this.generateResponseWithFakeFile(
+      () =>
+        this.getFakeRawFile(
+          sourceValue ? sourceValue : '123',
+          'Some_fake_device_name',
+          'c8y_Battery.Battery',
+          Math.random() * 100,
+          '%'
+        ),
+      contentType
+    );
+  }
+
+  private getFakeRawFile(
+    source: string,
+    deviceName: string,
+    fragmentSeries: string,
+    value: number,
+    unit: string
+  ): string {
+    const currentDate = new Date().toISOString();
+    return `time,source,device_name,fragment.series,value,unit
+  ${currentDate},${source},${deviceName},${fragmentSeries},${value},${unit}`;
+  }
+
+  private generateResponseWithFakeFile(bodyGenerator: () => string, contentType: string): Response {
+    const response = bodyGenerator();
+
+    return new Response(response, {
+      status: 200,
+      headers: {
+        'Content-Type': contentType
+      }
+    });
+  }
+
+  private getFakedMeasurementData(
+    fragment: string,
+    type: string
+  ): { measurements: IMeasurement[] } {
+    return {
+      measurements: [getFakeMeasurement(fragment, type)]
+    };
+  }
+
+  private getSourceValue(params: string) {
+    const match = params.match(/"source":"(\d+)"/);
+    if (match) {
+      return match[1];
+    } else {
+      return null;
+    }
+  }
+}

package/src/__mocks/utils/generators/measurement.ts

@@ -1,22 +1,27 @@
 import { IMeasurement, IMeasurementValue } from '@c8y/client';
 import { generateId, getFakeSource } from '../common';
 
-export function getFakeMeasurement(): IMeasurement {
+const MEASUREMENT_UNITS: Record<string, string> = {
+  c8y_Temperature: 'ºC',
+  c8y_Battery: '%'
+};
+
+export function getFakeMeasurement(fragment = 'T', type = 'c8y_Temperature'): IMeasurement {
   return {
     id: generateId(),
-    type: 'c8y_Temperature',
+    type: type,
     time: new Date().toISOString(),
     self: 'https://example.com/measurement/measurements/...',
     source: getFakeSource(),
-    c8y_Temperature: {
-      T: getFakeMeasurementValue()
+    [type]: {
+      [fragment]: getFakeMeasurementValue(type)
     }
   };
 }
 
-function getFakeMeasurementValue(): IMeasurementValue {
+function getFakeMeasurementValue(type: string): IMeasurementValue {
   return {
     value: Math.random() * 100,
-    unit: `ºC`
+    unit: MEASUREMENT_UNITS[type] || ''
   };
 }

package/src/__mocks/utils/generators/series.ts

@@ -0,0 +1,41 @@
+import { ISeries } from '@c8y/client';
+
+function createSeriesObject(
+  timestamp: string,
+  minValue: number,
+  maxValue: number,
+  unit: string,
+  name: string,
+  type: string
+): ISeries {
+  return {
+    values: {
+      [timestamp]: [
+        {
+          min: minValue,
+          max: maxValue
+        }
+      ]
+    },
+    series: [
+      {
+        unit: unit,
+        name: name,
+        type: type
+      }
+    ],
+    truncated: false
+  };
+}
+
+export function generateFakeSeriesValues(
+  unit = '\u00baC',
+  name = 'T',
+  type = 'c8y_Temperature'
+): ISeries {
+  const fakeTimestamp = new Date().toISOString();
+  const fakeMinValue = parseFloat((Math.random() * 10).toFixed(10));
+  const fakeMaxValue = fakeMinValue + parseFloat((Math.random() * 5).toFixed(10));
+
+  return createSeriesObject(fakeTimestamp, fakeMinValue, fakeMaxValue, unit, name, type);
+}

package/src/selector/data-points-export-selector-example/datapoints-export-selector.component.ts

@@ -0,0 +1,73 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+import { DatapointSelectorModule, KPIDetails } from '@c8y/ngx-components/datapoint-selector';
+import {
+  DatapointDetails,
+  DatapointsExportSelectorComponent,
+  ExportConfig
+} from '@c8y/ngx-components/datapoints-export-selector';
+
+@Component({
+  selector: 'tut-datapoints-export-selector-example',
+  template: `
+    <c8y-title>Data points export selector</c8y-title>
+    <div class="container-fluid p-t-24">
+      <div class="row">
+        <c8y-datapoints-export-selector [exportConfig]="config"></c8y-datapoints-export-selector>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-md-9">
+          <div class="card">
+            <div class="card-block d-flex d-col p-0" style="height: 300px">
+              <c8y-datapoint-selector
+                class="d-contents"
+                [allowDatapointsFromMultipleAssets]="false"
+                [(ngModel)]="datapoints"
+                (ngModelChange)="updateExportConfig()"
+              >
+              </c8y-datapoint-selector>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [CommonModule, CoreModule, DatapointsExportSelectorComponent, DatapointSelectorModule]
+})
+export class DatapointsExportSelectorExampleComponent {
+  config: ExportConfig;
+  datapoint: DatapointDetails;
+  datapointDetails: DatapointDetails[];
+  datapoints: KPIDetails[] = [];
+
+  updateExportConfig(): void {
+    if (this.datapoints.length === 0) {
+      return;
+    }
+
+    this.datapointDetails = this.datapoints.map(datapoint => ({
+      deviceName: datapoint.__target.name,
+      source: datapoint.__target.id,
+      valueFragmentSeries: datapoint.series,
+      valueFragmentType: datapoint.fragment
+    }));
+
+    const { dateFrom, dateTo } = this.getDateRange();
+
+    this.config = {
+      datapointDetails: this.datapointDetails,
+      dateFrom,
+      dateTo
+    };
+  }
+
+  private getDateRange(): { dateFrom: string; dateTo: string } {
+    const baseDate = Date.now();
+    const dateFrom = new Date(baseDate).toISOString();
+    const dateTo = new Date(baseDate + 1).toISOString();
+
+    return { dateFrom, dateTo };
+  }
+}

package/src/selector/data-points-export-selector-example/datapoints-export-selector.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoints-export-selector-example',
+      loadComponent: () =>
+        import('./datapoints-export-selector.component').then(
+          m => m.DatapointsExportSelectorExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Data points export selector example',
+        path: '/selector/datapoints-export-selector-example',
+        icon: 'th-list',
+        priority: 15
+      })
+    )
+  ]
+})
+export class DatapointsExportSelectorExampleModule {}