widget-common-container 0.0.0

package/projects/widget-common/src/lib/pie-chart/pie-chart.component.ts

@@ -0,0 +1,252 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit} from '@angular/core';
+import {ItemInterval, ItemSingle, ParamConfigSingle, SiteTheme, ChartTypes} from '../widget.interface';
+import {EChartsOption, SeriesOption} from 'echarts/types/dist/echarts';
+
+
+@Component({
+  selector: 'app-pie-chart',
+  templateUrl: './pie-chart.component.html',
+  styleUrls: ['./pie-chart.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PieChartComponent implements OnInit, OnChanges, OnDestroy {
+
+
+  @Input() values: ItemInterval | ItemSingle;
+  @Input() config: ParamConfigSingle;
+  @Input() locale = 'en';
+  @Input() noDataMessage = 'No data';
+  @Input() width = 250;
+  @Input() height = 250;
+  @Input() margin = {
+    top: 25,
+    right: 25,
+    bottom: 25,
+    left: 25
+  };
+
+  @Input() theme: SiteTheme;
+
+  options: EChartsOption = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      confine: true,
+      appendToBody: true,
+    },
+    toolbox: {
+      feature: {
+        // mark: {show: true},
+        // dataView: {show: true, readOnly: false},
+        // restore: {show: true},
+        saveAsImage: {show: true}
+      }
+    },
+    grid: {
+      left: `${this.margin.left}px`,
+      right: `${this.margin.right}px`,
+      bottom: `${this.margin.bottom}px`,
+      top: `${this.margin.top}px`,
+      containLabel: true
+    },
+    series: [],
+    legend: {
+      show: false,
+    },
+  };
+
+
+  uniqTitles = [];
+
+  initOpts: any = {
+    locale: this.locale.toLocaleUpperCase()
+  };
+
+  darkColor = [
+    {'color': '#00FF7F'},
+    {'color': '#00E0E0'},
+    {'color': '#FF00FF'},
+    {'color': '#B2CCE5'},
+    {'color': '#F1F227'},
+    {'color': '#FDE3A7'},
+    {'color': '#F64747'},
+    {'color': '#8BB82D'},
+    {'color': '#1E90FF'},
+    {'color': '#D2527F'},
+    {'color': '#91A6BA'}];
+
+    lightColor = [
+      {'color': '#007A4B'},
+      {'color': '#3477DB'},
+      {'color': '#D252B2'},
+      {'color': '#708090'},
+      {'color': '#AF851A'},
+      {'color': '#BB671C'},
+      {'color': '#E00000'},
+      {'color': '#005031'},
+      {'color': '#34415E'},
+      {'color': '#58007E'},
+      {'color': '#2E343B'}
+    ];
+
+
+    display = false;
+    echartsInstance: any;
+    constructor(private cdr: ChangeDetectorRef) {
+
+
+    }
+
+    ngOnChanges(changes) {
+      if (changes.locale) {
+        this.initOpts = {locale: this.locale};
+        this.display = false;
+        this.cdr.detectChanges();
+        setTimeout(() => {
+          this.display = true;
+          this.cdr.detectChanges();
+        });
+      }
+      if (this.echartsInstance && (changes.width || changes.height)) {
+        this.resizeChart();
+      }
+      if (changes.config || changes.values || changes.theme) {
+        if (this.config && this.values) {
+          this.updateData(this.config, this.values);
+        }
+      }
+    }
+
+    ngOnInit() {
+      this.initOpts = {locale: this.locale};
+    }
+
+    ngOnDestroy() {
+    }
+
+    onChartInit(ec) {
+      this.echartsInstance = ec;
+    }
+
+    resizeChart() {
+      if (this.echartsInstance) {
+        this.echartsInstance.resize();
+      }
+    }
+
+    updateData(config: ParamConfigSingle, values: ItemInterval | ItemSingle) {
+
+      const res: SeriesOption[] = [];
+
+      this.uniqTitles = [];
+      const customColors = [];
+
+      const data = (values.data as any).map((val, indexData) => {
+        customColors.push(val.color || this.getChartColor(indexData));
+        return {
+          value: val.value,
+          name: this.findUniqName(val.key)
+        };
+      });
+      if ((this.config as any).legend) {
+        this.options.legend = {show: true, bottom: '16px'};
+      }
+      if ((config as any).charttype === ChartTypes.intervalPieChart) {
+        this.options.tooltip = {show: false};
+        this.options.legend = {show: false};
+        this.options.grid = {show: false};
+
+
+        res.push({
+          name: 'Chart',
+          type: 'pie',
+          radius: '55%',
+          center: ['50%', '50%'],
+          data: data,
+          itemStyle: {
+            color: ({seriesIndex, dataIndex}) => customColors[dataIndex],
+          },
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+            // itemStyle: {
+            //   color: '#c23531',
+            //   shadowBlur: 200,
+            //   shadowColor: 'rgba(0, 0, 0, 0.5)'
+            // },
+            animationType: 'scale',
+            animationEasing: 'elasticOut',
+            animationDelay: function (idx) {
+              return Math.random() * 200;
+            }
+        });
+      } else {
+
+        res.push({
+          name: 'Chart',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['50%', '50%'],
+          data: data,
+          // roseType: 'radius',
+          // roseType: 'area',
+          label: {
+            color: this.theme === SiteTheme.dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'
+          },
+          labelLine: {
+            lineStyle: {
+              color: this.theme === SiteTheme.dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'
+            },
+            smooth: 0.2,
+            length: 10,
+            length2: 20
+          },
+          itemStyle: {
+            borderRadius: 4,
+            color: ({seriesIndex, dataIndex}) => this.getChartColor(dataIndex),
+          },
+            // itemStyle: {
+            //   color: '#c23531',
+            //   shadowBlur: 200,
+            //   shadowColor: 'rgba(0, 0, 0, 0.5)'
+            // },
+            animationType: 'scale',
+            animationEasing: 'elasticOut',
+            animationDelay: function (idx) {
+              return Math.random() * 200;
+            }
+        });
+      }
+      this.options = {...this.options, series: res};
+    }
+
+    findUniqName(title, ind = 0) {
+
+      if (ind === 0) {
+        if (this.uniqTitles.indexOf(title) !== -1) {
+          return this.findUniqName(title, ind + 1);
+        }
+        this.uniqTitles.push(title);
+        return title;
+      } else {
+        const newTitle = `${title} (${ind})`;
+        if (this.uniqTitles.indexOf(newTitle) !== -1) {
+          return this.findUniqName(title, ind + 1);
+        }
+        this.uniqTitles.push(newTitle);
+        return newTitle;
+      }
+    }
+
+    getChartColor(seed) {
+      if (this.theme === SiteTheme.dark) {
+        return this.lightColor[seed % this.darkColor.length].color;
+      } else {
+        return this.darkColor[seed % this.lightColor.length].color;
+      }
+
+    }
+}

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

@@ -0,0 +1,40 @@
+import {TranslateModule} from '@ngx-translate/core';
+import {NgModule} from '@angular/core';
+import {ArrayNumberPipe, ChartUrl, FilterIndexOfPipe, MakeChartUrl, MakeIconUrl, MakePictureUrl, PeriodFromDatePipe} from './widget.utils';
+import {InlineSVGModule} from 'ng-inline-svg';
+import {ForgeComponentModule} from './forge/forge.component';
+import {EChartComponentModule} from './echart/echart.component';
+
+@NgModule({
+  declarations: [
+    PeriodFromDatePipe,
+    FilterIndexOfPipe,
+    ArrayNumberPipe,
+    MakePictureUrl,
+    MakeIconUrl,
+    MakeChartUrl,
+    ChartUrl,
+  ],
+  imports: [
+    TranslateModule,
+    EChartComponentModule,
+    ForgeComponentModule,
+    InlineSVGModule.forRoot({ baseUrl: '' }),
+  ],
+  exports: [
+    TranslateModule,
+    PeriodFromDatePipe,
+    FilterIndexOfPipe,
+    ArrayNumberPipe,
+    MakePictureUrl,
+    MakeIconUrl,
+    MakeChartUrl,
+    ChartUrl,
+    EChartComponentModule,
+    ForgeComponentModule,
+    InlineSVGModule,
+  ]
+})
+export class DashboardSharedModule {
+}
+

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

@@ -0,0 +1,212 @@
+var re = {
+  not_string: /[^s]/,
+  not_bool: /[^t]/,
+  not_type: /[^T]/,
+  not_primitive: /[^v]/,
+  number: /[diefg]/,
+  numeric_arg: /[bcdiefguxX]/,
+  json: /[j]/,
+  not_json: /[^j]/,
+  text: /^[^\x25]+/,
+  modulo: /^\x25{2}/,
+  placeholder: /^\x25(?:([1-9]\d*)\$|\(([^\)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?((yyyy)|(hh)|(HH)|(mm)|(MM)|(ss)|(dd)|[b-gijostTuvxX])/,
+  key: /^([a-z_][a-z_\d]*)/i,
+  key_access: /^\.([a-z_][a-z_\d]*)/i,
+  index_access: /^\[(\d+)\]/,
+  sign: /^[\+\-]/
+}
+
+export function sprintf(key, ...args) {
+  // `arguments` is not an array, but should be fine for this call
+  return sprintf_format(sprintf_parse(key), args);
+}
+
+export function vsprintf(fmt, argv) {
+  return sprintf.apply(null, [fmt].concat(argv || []));
+}
+
+function tsToDate(arg) {
+  var n = typeof arg === 'string' ? parseFloat(arg) : +arg;
+  return new Date(n < 1e10 ? n * 1000 : n);
+}
+
+function sprintf_format(parse_tree, argv) {
+  var cursor = 0, tree_length = parse_tree.length, arg, output = '', i, k, match, pad, pad_character, pad_length,
+    is_positive, sign
+  for (i = 0; i < tree_length; i++) {
+    if (typeof parse_tree[i] === 'string') {
+      output += parse_tree[i]
+    } else if (Array.isArray(parse_tree[i])) {
+      match = parse_tree[i] // convenience purposes only
+      if (match[2]) { // keyword argument
+        arg = argv[cursor]
+        for (k = 0; k < match[2].length; k++) {
+          if (!arg.hasOwnProperty(match[2][k])) {
+            throw new Error(sprintf('[sprintf] property "%s" does not exist', match[2][k]))
+          }
+          arg = arg[match[2][k]];
+        }
+      } else if (match[1]) { // positional argument (explicit)
+        arg = argv[match[1]];
+      } else { // positional argument (implicit)
+        arg = argv[cursor++];
+      }
+
+      if (re.not_type.test(match[8]) && re.not_primitive.test(match[8]) && arg instanceof Function) {
+        arg = arg();
+      }
+
+      if (re.numeric_arg.test(match[8]) && (typeof arg !== 'number' && isNaN(arg))) {
+        throw new TypeError(sprintf('[sprintf] expecting number but found %T', arg));
+      }
+
+      if (re.number.test(match[8])) {
+        is_positive = arg >= 0;
+      }
+      switch (match[8]) {
+        case 'b':
+          arg = parseInt(arg, 10).toString(2);
+          break;
+        case 'c':
+          arg = String.fromCharCode(parseInt(arg, 10));
+          break;
+        case 'd':
+          arg = match[7] ? parseFloat(arg).toFixed(match[7]) : parseFloat(arg);
+          break;
+        case 'i':
+          arg = parseInt(arg, 10);
+          break;
+        case 'j':
+          arg = JSON.stringify(arg, null, match[6] ? parseInt(match[6]) : 0);
+          break
+        case 'e':
+          arg = match[7] ? parseFloat(arg).toExponential(match[7]) : parseFloat(arg).toExponential()
+          break
+        case 'f':
+          arg = match[7] ? parseFloat(arg).toFixed(match[7]) : parseFloat(arg)
+          break
+        case 'g':
+          arg = match[7] ? String(Number(arg.toPrecision(match[7]))) : parseFloat(arg)
+          break
+        case 'hh':
+          arg = (Math.floor(parseInt(arg) / 60));
+          break
+        case 'mm':
+          arg = parseFloat(arg) > 1e7
+            ? ('0' + tsToDate(arg).getMinutes()).slice(-2)
+            : ('0' + (parseInt(arg) % 60)).slice(-2);
+          break
+        case 'ss':
+          arg = parseFloat(arg) > 1e7
+            ? ('0' + tsToDate(arg).getSeconds()).slice(-2)
+            : ('0' + ((parseFloat(arg) - parseInt(arg)) * 60)).slice(-2);
+          break
+        case 'HH':
+          arg = ('0' + tsToDate(arg).getHours()).slice(-2);
+          break
+        case 'MM':
+          arg = ('0' + (tsToDate(arg).getMonth() + 1)).slice(-2);
+          break
+        case 'dd':
+          arg = ('0' + tsToDate(arg).getDate()).slice(-2);
+          break
+        case 'yyyy':
+          arg = tsToDate(arg).getFullYear().toString();
+          break
+        case 'n':
+          arg = match[7] ? parseFloat(arg).toFixed(match[7]) : parseFloat(arg)
+          break
+        case 'o':
+          arg = (parseInt(arg, 10) >>> 0).toString(8)
+          break
+        case 's':
+          arg = String(arg)
+          arg = (match[7] ? arg.substring(0, match[7]) : arg)
+          break
+        case 't':
+          arg = String(!!arg)
+          arg = (match[7] ? arg.substring(0, match[7]) : arg)
+          break
+        case 'T':
+          arg = Object.prototype.toString.call(arg).slice(8, -1).toLowerCase()
+          arg = (match[7] ? arg.substring(0, match[7]) : arg)
+          break
+        case 'u':
+          arg = parseInt(arg, 10) >>> 0
+          break
+        case 'v':
+          arg = arg.valueOf()
+          arg = (match[7] ? arg.substring(0, match[7]) : arg)
+          break
+        case 'x':
+          arg = (parseInt(arg, 10) >>> 0).toString(16)
+          break
+        case 'X':
+          arg = (parseInt(arg, 10) >>> 0).toString(16).toUpperCase()
+          break
+      }
+      if (re.json.test(match[8])) {
+        output += arg
+      } else {
+        if (re.number.test(match[8]) && (!is_positive || match[3])) {
+          sign = is_positive ? '+' : '-'
+          arg = arg.toString().replace(re.sign, '')
+        } else {
+          sign = ''
+        }
+        pad_character = match[4] ? match[4] === '0' ? '0' : match[4].charAt(1) : ' '
+        pad_length = match[6] - (sign + arg).length
+        pad = match[6] ? (pad_length > 0 ? pad_character.repeat(pad_length) : '') : ''
+        output += match[5] ? sign + arg + pad : (pad_character === '0' ? sign + pad + arg : pad + sign + arg)
+      }
+    }
+  }
+  return output
+}
+
+var sprintf_cache = Object.create(null)
+
+function sprintf_parse(fmt) {
+  if (sprintf_cache[fmt]) {
+    return sprintf_cache[fmt]
+  }
+
+  var _fmt = fmt, match, parse_tree = [], arg_names = 0
+  while (_fmt) {
+    if ((match = re.text.exec(_fmt)) !== null) {
+      parse_tree.push(match[0])
+    } else if ((match = re.modulo.exec(_fmt)) !== null) {
+      parse_tree.push('%')
+    } else if ((match = re.placeholder.exec(_fmt)) !== null) {
+      if (match[2]) {
+        arg_names |= 1
+        var field_list = [], replacement_field = match[2], field_match = []
+        if ((field_match = re.key.exec(replacement_field)) !== null) {
+          field_list.push(field_match[1])
+          while ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {
+            if ((field_match = re.key_access.exec(replacement_field)) !== null) {
+              field_list.push(field_match[1])
+            } else if ((field_match = re.index_access.exec(replacement_field)) !== null) {
+              field_list.push(field_match[1])
+            } else {
+              throw new SyntaxError('[sprintf] failed to parse named argument key')
+            }
+          }
+        } else {
+          throw new SyntaxError('[sprintf] failed to parse named argument key')
+        }
+        match[2] = field_list
+      } else {
+        arg_names |= 2
+      }
+      if (arg_names === 3) {
+        throw new Error('[sprintf] mixing positional and named placeholders is not (yet) supported')
+      }
+      parse_tree.push(match)
+    } else {
+      throw new SyntaxError('[sprintf] unexpected placeholder')
+    }
+    _fmt = _fmt.substring(match[0].length)
+  }
+  return sprintf_cache[fmt] = parse_tree
+}

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

@@ -0,0 +1,53 @@
+import {ItemSingle, IWidget, IWidgetClass, IWidgetParam, SiteTheme} from '../widget.interface';
+import {WidgetPackage} from '../widget.component';
+
+export interface WidgetContainerDevOptions {
+  widget: IWidget;
+  widgetPackage: WidgetPackage;
+  setManual: (param: ItemSingle, value: boolean) => {};
+  paramEdit: (param: ItemSingle, container?: HTMLElement) => {};
+  isDev: boolean;
+  theme: SiteTheme;
+  element: Element;
+  locale: string;
+}
+
+
+export interface WidgetContainerProduction {
+  widget: IWidget;
+  widgetClass: IWidgetClass;
+  id: string;
+  widgetPackage: WidgetPackage;
+  sendData: (param: ItemSingle) => {};
+  setManual: (param: ItemSingle, value: boolean) => {};
+  paramEdit: (param: ItemSingle, container?: HTMLElement) => {};
+  isDev: boolean;
+  theme: SiteTheme;
+  element: Element;
+  locale: string;
+}
+
+
+export class WidgetContainer {
+
+
+  /**
+   * @deprecated
+   * @param componentType
+   */
+  public createComponentModule(componentType: any): any {
+
+    throw new Error('You should implement this method');
+  }
+
+
+  /**
+   * @deprecated
+   * @param opts
+   */
+  public createNewComponent(opts: WidgetContainerDevOptions | WidgetContainerProduction): any {
+
+    throw new Error('You should implement this method');
+  }
+
+}

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

@@ -0,0 +1,24 @@
+import {ModalOptions, WidgetItem} from './widget.interface';
+import {ChangeDetectorRef, TemplateRef} from '@angular/core';
+import {WidgetDialog} from './widget.dialog';
+
+
+export interface WidgetApi {
+  cdRef: ChangeDetectorRef;
+
+  paramCancel(par: WidgetItem): void;
+
+  setManual(param: WidgetItem, value: boolean): void;
+
+  paramEdit(param: WidgetItem, container?: HTMLElement): void;
+
+  openModal(component: TemplateRef<any>, opts: ModalOptions): Promise<WidgetDialog>;
+
+  query<T = any, TOptions = any>(command: string, options?: TOptions): Promise<T>;
+
+  mutation<T = any, TOptions = any>(command: string, options?: TOptions): Promise<T>;
+
+  command<T = any, TOptions = any>(command: string, options?: TOptions): Promise<T>;
+
+}
+

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

@@ -0,0 +1,87 @@
+import {ChartTypes, SiteTheme, VALUE_TYPE, WidgetCustomField, WidgetItem, WidgetParams, WidgetSize} from './widget.interface';
+import {WidgetApi} from './widget.api';
+import {Type} from '@angular/core';
+
+export const _ = (str: string) => str;
+
+export class WidgetComponent {
+
+  API: WidgetApi;
+  media: any;
+  width: number;
+  height: number;
+
+  container: Element;
+
+  onInit(container: Element) {
+    this.container = container;
+  }
+
+  onDestroy() {
+  }
+
+  onResize(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+
+  onRender(values) {
+
+  }
+
+  onUpdate(values) {
+  }
+}
+
+
+export class WidgetComponentContainer {
+
+  values: any;
+  pictureId: number;
+  theme: SiteTheme;
+
+  readonly CHART_TYPES = ChartTypes;
+  readonly VALUE_TYPE = VALUE_TYPE;
+
+
+  urlExport(): string {
+    return '';
+  }
+
+  paramCancel(par: WidgetItem) {
+  }
+
+  paramEdit(par: WidgetItem) {
+  }
+
+  paramSave(par: WidgetItem) {
+  }
+
+  getIconUrl(par: WidgetItem): string {
+    return '';
+  }
+
+  setManual(par: WidgetItem, value) {
+
+  }
+}
+
+
+export interface WidgetPackage {
+  template: string;
+  component: WidgetComponent;
+  params: WidgetParams;
+  size: WidgetSize;
+  styles: string;
+  locales?: { code: string, file: string }[];
+  needPicture?: boolean;
+  needIcon?: boolean;
+  noFullscreen?: boolean;
+  fields?: WidgetCustomField[];
+  // Для мобильных дашей. Будет ли виджет учитывать высоту заданную в настройках или подстроит автоматически
+  autoAdjustHeight?: boolean;
+  // Будет ли фрейм вокруг виджета
+  showFrame?: boolean;
+  imports?: Array<Type<any>>;
+}
+

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

@@ -0,0 +1,14 @@
+export class WidgetDialog {
+
+  onClose;
+
+  constructor(opts: { close: Function }) {
+    this.onClose = opts.close;
+  }
+
+  close() {
+    if (this.onClose) {
+      this.onClose();
+    }
+  }
+}