widget-common-container 0.0.0

package/projects/widget-common/src/assets/warning.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="#44f" fill-rule="nonzero">
+        <circle cx="12" cy="12" r="10" stroke="#666" stroke-width="1" fill="#fa6" />
+    </g>
+    <text style="font:  4px sans-serif; color: #000" x="4.5" y="13.5" class="small">Warning</text>
+</svg>

package/projects/widget-common/src/lib/common.ts

@@ -0,0 +1,23 @@
+import {IWidgetClass} from "./widget.interface";
+
+class Common {
+
+  serviceUrl = '';
+
+  getWidgetPath(widget: IWidgetClass): string {
+    return `/assets/widgets/${widget.storeId}/`;
+  }
+
+  transformChartUrlConfig(param: any, isCalc = null, isSignal = null): string {
+    return '';
+  }
+
+  override(serviceUrl: string, transformChartUrlConfig: any, getWidgetPath: any) {
+    this.serviceUrl = serviceUrl;
+    this.transformChartUrlConfig = transformChartUrlConfig;
+    this.getWidgetPath = getWidgetPath;
+  }
+
+}
+
+export const common = new Common();

package/projects/widget-common/src/lib/communication.service.ts

@@ -0,0 +1,59 @@
+import {Injectable} from '@angular/core';
+import {Subject} from 'rxjs';
+
+export enum CommunicationCommand {
+  'values' = 'values',
+  'params' = 'params',
+  'locale' = 'locale',
+  'theme' = 'theme',
+  'widget' = 'widget',
+  'resize' = 'resize',
+  'paramData' = 'paramData',
+}
+
+export interface CommunicationValue {
+  command?: CommunicationCommand;
+
+  [k: string]: any;
+}
+
+@Injectable()
+export class CommunicationService {
+
+  private messageSource: Record<string, Subject<CommunicationValue>> = {};
+  message$/*: Record<number, Observable<CommunicationValue>>*/ = {};
+
+  cache: Record<string, Partial<Record<CommunicationCommand, CommunicationValue>>> = {};
+
+  create(id: number | string) {
+    const _id = `${id}`.trim();
+    if (!this.messageSource[_id]) {
+      this.messageSource[_id] = new Subject<CommunicationValue>();
+      this.message$[_id] = this.messageSource[_id].asObservable() as any;
+      this.cache[_id] = {};
+    }
+  }
+
+  next(widgetId: number | string, value: CommunicationValue) {
+    const _id = `${widgetId}`.trim();
+    this.create(_id);
+    this.messageSource[_id].next(value);
+    if (value.command) {
+      this.cache[_id][value.command] = value;
+    }
+  }
+
+  subscribe(widgetId: number | string, callback: (data: CommunicationValue) => {}) {
+    const _id = `${widgetId}`.trim();
+    this.create(_id);
+    if (this.cache[_id][CommunicationCommand.params]) {
+      callback((this.cache[_id][CommunicationCommand.params]));
+    }
+    for (const k in this.cache[_id]) {
+      if (this.cache[_id].hasOwnProperty(k)) {
+        callback((this.cache[_id][k]));
+      }
+    }
+    return this.message$[_id].subscribe(callback);
+  }
+}

package/projects/widget-common/src/lib/echart/echart.component.html

@@ -0,0 +1,2 @@
+<div echarts [options]="options" *ngIf="display" [initOpts]="initOpts" style="width:100%; height: 100%" [theme]="theme" (chartInit)="onChartInit($event)"></div>
+<div class="no-data-message" *ngIf="!values && !simpleData">{{noDataMessage}}</div>

package/projects/widget-common/src/lib/echart/echart.component.scss

@@ -0,0 +1,40 @@
+.no-data-message {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: .7;
+}
+
+::ng-deep .label-formatter {
+
+  .title {
+    padding-bottom: 8px;
+  }
+
+  table {
+    color: #333;
+
+    .label {
+      padding-right: 8px;
+    }
+
+    .value {
+      text-align: right;
+      //font-weight: bold;
+      color: #555;
+      min-width: 100px;
+      display: flex;
+
+      & > div {
+        margin-right: 4px;
+
+        span {
+          opacity: .5;
+          font-size: 11px;
+        }
+      }
+    }
+  }
+
+}