Updated Chart and DataGrid examples to use FDC3 standard

examples/js-chart/chart.js

@@ -1,93 +1,66 @@
 import Chart from 'highcharts/es-modules/Core/Chart/Chart.js';
 import ColumnSeries from 'highcharts/es-modules/Series/Column/ColumnSeries.js';
-import { createMessageRouter } from "@morgan-stanley/composeui-messaging-client";
+import * as Highcharts from 'highcharts';
 
 let chart;
-let client;
+let currentChannel;
 
-window.addEventListener('load', function () {
-  chart = new Chart({
-    chart: {
-      renderTo: 'container',
-      defaultSeriesType: 'column',
-      events: {
-        load: requestData
-      }
-    },
-    title: {
-      text: 'Monthly Sales Data'
-    },
-    xAxis: {
-      categories: [
-        'Jan',
-        'Feb',
-        'March',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec'
-      ],
-    },
-    yAxis: {
-      minPadding: 0.2,
-      maxPadding: 0.2,
+window.addEventListener('load', function() {
+  chart = Highcharts.chart('container', {
+      chart: {
+        type: 'column',
+        events: {
+          load: requestData
+        }
+      },
       title: {
-        text: 'Value',
-        margin: 80
-      }
-    },
-    series: [{
-      name: 'Buy'
-    }, {
-      name: 'Sell'
-    }
-    ]
+        text: 'Monthly Sales Data'
+      },
+      yAxis: {
+        minPadding: 0.2,
+        maxPadding: 0.2,
+        title: {
+          text: 'Value',
+          margin: 80,
+        }
+      },
+      xAxis: {
+        categories: ['Jan','Feb','March','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+      },
+      series: [{
+        name: 'Buy',
+        data: [] 
+      }, {
+        name: 'Sell',
+        data: []
+      }]
   });
-
-  window.document.getElementById("close-button").onclick =
-    async ev => {
-      if (!client) return;
-      const tmpClient = client;
-      client = undefined;
-      tmpClient.close();
-    };
-
 });
 
 async function requestData() {
-
   (async () => {
-    client = createMessageRouter();
-
-    window.client = client;
-
-    await client.connect();
-
-    client.subscribe('proto_select_monthlySales', (message) => {
-
-      const payload = JSON.parse(message.payload);
-      const symbol = payload.symbol;
-      const buyData = payload.buy;
-      const sellData = payload.sell;
-
-      chart.setTitle({ text: "Monthly sales for " + symbol });
-      chart.series[0].setData([]);
-      chart.series[1].setData([]);
+    currentChannel = await window.fdc3.getCurrentChannel();
+
+    if(!currentChannel) {
+      await window.fdc3.joinUserChannel("default");
+    }
 
-      buyData.forEach(function (p) {
-        chart.series[0].addPoint(p, false);
-      });
+    await window.fdc3.addContextListener('fdc3.instrument', (context, metadata) => {
+      if(context.id) {
+        chart.setTitle({ text: "Monthly sales for " + context.id.ticker });
+        chart.series[0].setData([]);
+        chart.series[1].setData([]);
 
-      sellData.forEach(function (p) {
-        chart.series[1].addPoint(p, false);
-      });
+        context.id.buyData.forEach(function (p) {
+          chart.series[0].addPoint(p, false);
+        });
+
+        context.id.sellData.forEach(function (p) {
+          chart.series[1].addPoint(p, false);
+        });
 
-      chart.redraw();
+        chart.redraw();
+      }
     });
   })();
 }

examples/js-chart/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0-alpha.1",
   "private": true,
   "description": "Example Web Application",
-  "main": "chat.js",
+  "main": "chart.js",
   "type": "module",
   "scripts": {
     "clean": "rimraf dist",
@@ -12,9 +12,9 @@
     "start": "http-server"
   },
   "dependencies": {
-    "@morgan-stanley/composeui-messaging-client": "*",
+    "@finos/fdc3": "^2.0.3",
     "bootstrap": "5.2.3",
-    "highcharts": "11.0.1",
+    "highcharts": "11.1.0",
     "jquery": "3.6.3",
     "tslib": "2.5.0"
   },

examples/js-datagrid/package.json

@@ -21,8 +21,8 @@
     "@angular/platform-browser": "^15.1.0",
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
+    "@finos/fdc3": "2.0.3",
     "material-icons": "1.13.1",
-    "@morgan-stanley/composeui-messaging-client": "*",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

examples/js-datagrid/src/app/app.module.ts

@@ -1,18 +1,10 @@
 /* Morgan Stanley makes this available to you under the Apache License, Version 2.0 (the "License"). You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */
 
-import { NgModule, InjectionToken } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MessageRouter, createMessageRouter } from '@morgan-stanley/composeui-messaging-client';
-
-export const MESSAGE_ROUTER = new InjectionToken<MessageRouter>("@morgan-stanley/composeui-messaging-client/MessageRouter");
-
-const MessageRouterProvider = {
-  provide: MESSAGE_ROUTER,
-  useFactory: () => createMessageRouter()
-}
 
 @NgModule({
   declarations: [
@@ -23,7 +15,6 @@ const MessageRouterProvider = {
     AppRoutingModule,
     BrowserAnimationsModule
   ],
-  providers: [MessageRouterProvider],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

examples/js-datagrid/src/app/main-view/datagrid/datagrid.component.spec.ts

@@ -4,8 +4,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MessageRouter } from '@morgan-stanley/composeui-messaging-client';
-import { MESSAGE_ROUTER } from 'src/app/app.module';
 
 import { DatagridComponent } from './datagrid.component';
 
@@ -14,29 +12,9 @@ describe('DatagridComponent', () => {
   let fixture: ComponentFixture<DatagridComponent>;
 
   beforeEach(async () => {
-
-    const messageRouterMock = jasmine.createSpyObj<MessageRouter>(
-      "MessageRouter",
-      [
-        "connect",
-        "subscribe",
-        "publish",
-        "invoke",
-        "registerService",
-        "unregisterService",
-        "registerEndpoint",
-        "unregisterEndpoint"
-      ]
-    );
-
     await TestBed.configureTestingModule({
       declarations: [ DatagridComponent ],
-      providers: [
-        {
-          provide: MESSAGE_ROUTER,
-          useValue: messageRouterMock
-        }
-      ],
+      providers: [  ],
       imports: [
         MatTableModule,
         MatPaginatorModule,

examples/js-datagrid/src/app/main-view/services/mock-data.service.spec.ts

@@ -1,43 +1,40 @@
 /* Morgan Stanley makes this available to you under the Apache License, Version 2.0 (the "License"). You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */
-
-import { TestBed } from '@angular/core/testing';
-import { MESSAGE_ROUTER } from 'src/app/app.module';
+import { DesktopAgent } from '@finos/fdc3';
 import { MockDataService } from './mock-data.service';
-import { MessageRouter } from '@morgan-stanley/composeui-messaging-client';
+
+const dummyDesktopAgent = jasmine.createSpyObj<DesktopAgent>(
+  'DesktopAgent',
+  [
+    'joinChannel',
+    'getSystemChannels',
+    'getAppMetadata',
+    'getInfo',
+    'leaveCurrentChannel',
+    'getCurrentChannel',
+    'createPrivateChannel',
+    'getOrCreateChannel',
+    'joinUserChannel',
+    'getUserChannels',
+    'addContextListener',
+    'addIntentListener',
+    'raiseIntentForContext',
+    'raiseIntent',
+    'broadcast',
+    'findInstances',
+    'findIntentsByContext',
+    'findIntent',
+    'open',
+  ]
+)
 
 describe('MockDataService', () => {
-  let service: MockDataService;
 
   beforeEach(() => {
-
-    const messageRouterMock = jasmine.createSpyObj<MessageRouter>(
-      "MessageRouter",
-      [
-        "connect",
-        "subscribe",
-        "publish",
-        "invoke",
-        "registerService",
-        "unregisterService",
-        "registerEndpoint",
-        "unregisterEndpoint"
-      ]
-    );
-
-    TestBed.configureTestingModule({
-      providers: [
-        MockDataService,
-        {
-          provide: MESSAGE_ROUTER,
-          useValue: messageRouterMock
-        }
-      ]
-    });
-
-    service = TestBed.inject(MockDataService);
+    window.fdc3 = dummyDesktopAgent;
   });
 
   it('should be created', () => {
-    expect(service).toBeTruthy();
+    const mockDataService = new MockDataService();
+    expect(mockDataService).toBeTruthy();
   });
 });