@yoobic/yobi 8.7.4 → 8.7.6

package/dist/collection/feature-platform/insight/chart/chart.js

@@ -1,612 +0,0 @@
-import { dateFormat, dateIsValid, debounce, getCssColor, getMonths, getUUID, getWeekDays, isChromatic, isIonic, isRTL, resizeObserve, saveAs, translate } from '@shared/utils';
-import { h, Host } from '@stencil/core';
-import { isEqual, merge, set } from 'lodash-es';
-import { fixChartCategories } from './chart-helper';
-import { Highcharts, Highstock } from './highcharts';
-const CHART_ANIMATION_TIMEOUT = 500;
-export class YooChartComponent {
-  constructor() {
-    this.doubleClicker = { clickedOnce: false, timer: null, timeBetweenClicks: 400 };
-    this.definition = undefined;
-    this.isFullScreen = undefined;
-    this.hideIfEmpty = undefined;
-    this.animatedIllustrationHeight = undefined;
-    this.disableResize = undefined;
-    this.disableAnimation = undefined;
-    this.config = undefined;
-  }
-  async getSVG(width, height, x, y, margin = 0) {
-    var _a;
-    if ((_a = this.chart) === null || _a === void 0 ? void 0 : _a.getSVG) {
-      let svg = this.chart.getSVG({
-        chart: { width: width - margin, height: height - margin, borderWidth: 1, borderColor: '#ccc', marginTop: 50, backgroundColor: getCssColor('light'), spacingLeft: 80, spacingRight: 40 },
-        title: {
-          text: this.definition.title,
-          style: { color: '#000', fontSize: '13px' },
-          align: 'center',
-          y: this.definition.type === 'pie' || this.definition.type === 'doughnut' ? 50 : 20
-        }
-      });
-      if (svg && (x > 0 || y > 0)) {
-        svg = svg.replace('<svg', '<g transform="translate(' + (x + margin / 2) + ', ' + Math.round(y + margin / 2) + ')" ');
-        svg = svg.replace('</svg>', '</g>');
-      }
-      return Promise.resolve(svg);
-    }
-    return Promise.resolve('');
-  }
-  async export(filename, options) {
-    var _a, _b, _c;
-    if (this.chart) {
-      const chartOptions = {
-        chart: { backgroundColor: '#fff', height: (_a = this.host) === null || _a === void 0 ? void 0 : _a.clientHeight },
-        title: {
-          text: this.definition.title,
-          style: { color: '#000', fontSize: '13px' },
-          align: 'center',
-          y: this.definition.type === 'pie' || this.definition.type === 'doughnut' ? 50 : 20
-        }
-      };
-      if (((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.chart) === null || _c === void 0 ? void 0 : _c.type) === 'bar') {
-        chartOptions.chart.spacingLeft = 40;
-      }
-      this.chart.exportChart(merge(options, {
-        filename
-      }), chartOptions);
-    }
-  }
-  async exportCSV(filename) {
-    if (this.chart) {
-      const csv = this.chart.getCSV(true);
-      const type = 'data:application/csv;charset=ISO-8859-1;';
-      const blob = new Blob([csv], {
-        type
-      });
-      saveAs(blob, filename + '.csv');
-    }
-  }
-  async resize() {
-    var _a;
-    if ((_a = this.chart) === null || _a === void 0 ? void 0 : _a.reflow) {
-      try {
-        this.chart.reflow();
-      }
-      catch (err) {
-        //
-      }
-    }
-  }
-  onConfigChange() {
-    this.renderChart();
-  }
-  componentWillLoad() {
-    this.chartContainerId = 'chart-' + getUUID();
-  }
-  componentDidLoad() {
-    this.renderChart();
-    setTimeout(() => {
-      if (this.chartContainer && !this.disableResize) {
-        this.resizeObserver = resizeObserve(this.chartContainer, (entries) => {
-          for (const entry of entries) {
-            const { left, top, width, height } = entry.contentRect;
-            debounce(this.onChartResize.bind(this), CHART_ANIMATION_TIMEOUT)(entry.target, width, height, left, top, entry);
-          }
-        });
-      }
-    }, CHART_ANIMATION_TIMEOUT);
-  }
-  disconnectedCallback() {
-    this.disconnected = true;
-    if (this.chart) {
-      try {
-        this.chart.destroy();
-        delete this.previousConfig;
-      }
-      catch (err) {
-        // do nothing
-      }
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-  }
-  connectedCallback() {
-    if (this.disconnected) {
-      this.componentDidLoad();
-      this.disconnected = false;
-    }
-  }
-  onChartResize() {
-    this.resize();
-  }
-  isChartEmpty() {
-    if (!this.config ||
-      !this.config.series ||
-      this.config.series.length === 0 ||
-      (this.config.series.length === 1 && (!this.config.series[0].data || this.config.series[0].data.length === 0))) {
-      return true;
-    }
-    if (this.config && this.config.noData) {
-      return true;
-    }
-    return false;
-  }
-  renderChart() {
-    var _a, _b, _c;
-    let options = this.config || {};
-    options = fixChartCategories(options);
-    Highcharts.setOptions({
-      lang: {
-        months: getMonths(),
-        shortMonths: getMonths().map((m) => m.substring(0, 3)),
-        weekdays: getWeekDays(),
-        shortWeekdays: getWeekDays().map((d) => d.substring(0, 3))
-      },
-      time: {
-        timezoneOffset: new Date().getTimezoneOffset()
-      }
-    });
-    if (!this.isChartEmpty()) {
-      options.title = { text: null };
-      if (isRTL()) {
-        set(options, 'chart.style.direction', 'rtl');
-        options.xAxis.reversed = true;
-        options.yAxis.opposite = true;
-        options.legend.align = 'right';
-        options.legend.useHTML = true;
-        options.legend.rtl = true;
-      }
-      if (!isEqual(this.previousConfig, options)) {
-        this.previousConfig = options;
-        this.setupLegendListener(options);
-        if (this.chartContainer && ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.kpiFormValues) === null || _b === void 0 ? void 0 : _b.allowScroll)) {
-          this.chart = Highstock.chart(this.chartContainer, options, this.addMousewheelEvent);
-        }
-        else if (this.chartContainer) {
-          this.chart = Highcharts.chart(this.chartContainer, options);
-        }
-      }
-    }
-    else if (!this.hideIfEmpty && this.chartContainer) {
-      this.chartContainer.innerHTML = '';
-      this.chartContainer.classList.add('animated-illustration');
-      const animatedIllustration = document.createElement('yoo-animated-illustration');
-      animatedIllustration.type = 'chart';
-      animatedIllustration.style.height = this.animatedIllustrationHeight || (((_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpi) ? '4rem' : '6.25rem');
-      const textElement = document.createElement('div');
-      textElement.innerHTML = translate('LISTEMPTY');
-      this.chartContainer.appendChild(animatedIllustration);
-      this.chartContainer.appendChild(textElement);
-    }
-  }
-  addMousewheelEvent(chart) {
-    Highcharts.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function (e) {
-      const xAxis = chart.xAxis[0];
-      const range = xAxis.max - xAxis.min;
-      let newMin;
-      let newMax;
-      e = chart.pointer.normalize(e);
-      // Firefox uses e.detail, WebKit and IE uses wheelDelta
-      const delta = e.detail || -(e.wheelDelta / 120);
-      if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
-        newMin = xAxis.min + range * delta;
-        newMax = xAxis.max + range * delta;
-        if (newMin < xAxis.dataMin) {
-          newMin = xAxis.dataMin;
-          newMax = newMin + range;
-        }
-        if (newMax > xAxis.dataMax) {
-          newMax = xAxis.dataMax;
-          newMin = newMax - range;
-        }
-        xAxis.setExtremes(newMin, newMax, true, false);
-      }
-      e.preventDefault();
-    });
-  }
-  setupLegendListener(options) {
-    options.plotOptions = options.plotOptions || {};
-    options.plotOptions.series = options.plotOptions.series || {};
-    options.plotOptions.series.animation = !this.disableAnimation && !isChromatic();
-    options.chart = options.chart || {};
-    options.chart.animation = !this.disableAnimation && !isChromatic();
-    options.exporting = options.exporting || {};
-    options.exporting.enabled = false;
-    options.exporting.showTable = options.exporting.showTable !== false; // this.definition?.showTable !== false;
-    options.exporting.allowHTML = options.exporting.allowHTML !== false; // this.definition?.showTable !== false;
-    options.exporting.tableCaption = false;
-    const chartCmp = this;
-    if (isIonic(this.host)) {
-      options.plotOptions.series.point = {
-        cursor: 'pointer',
-        events: {
-          click() {
-            if (chartCmp.chartClick) {
-              chartCmp.chartClick.emit(this);
-            }
-          },
-          dblclick() {
-            if (chartCmp.chartDoubleClick) {
-              chartCmp.chartDoubleClick.emit(this.keys || []);
-            }
-          }
-        }
-      };
-    }
-    else {
-      options.plotOptions.series.point = {
-        cursor: 'pointer',
-        events: {
-          click() {
-            if (chartCmp.chartClick) {
-              chartCmp.chartClick.emit(this);
-              if (chartCmp.doubleClicker.clickedOnce === true && chartCmp.doubleClicker.timer) {
-                chartCmp.resetDoubleClick();
-                chartCmp.chartDoubleClick.emit(this.keys || []);
-              }
-              else {
-                chartCmp.doubleClicker.clickedOnce = true;
-                chartCmp.doubleClicker.timer = setTimeout(() => {
-                  chartCmp.resetDoubleClick();
-                }, chartCmp.doubleClicker.timeBetweenClicks);
-              }
-            }
-          }
-        }
-      };
-    }
-    if (options.chart.type !== 'pie' && options.chart.type !== 'doughnut') {
-      options.plotOptions.series.events = {
-        legendItemClick() {
-          if (chartCmp.chartLegendItemClick) {
-            chartCmp.chartLegendItemClick.emit({ [this.name]: !this.visible });
-          }
-        }
-      };
-    }
-    else {
-      options.plotOptions.pie = options.plotOptions.pie || { point: {} };
-      options.plotOptions.pie.point = options.plotOptions.pie.point || {};
-      options.plotOptions.pie.point.events = {
-        legendItemClick() {
-          if (chartCmp.chartLegendItemClick) {
-            chartCmp.chartLegendItemClick.emit({ [this.name]: !this.visible });
-          }
-        }
-      };
-    }
-    if (options.chart.type === 'scatter') {
-      options.plotOptions.series.turboThreshold = 0;
-    }
-    options.chart = options.chart || {};
-    options.chart.events = options.chart.events || {};
-    options.chart.events.exportData = (e) => {
-      if (e.type === 'exportData') {
-        e.dataRows.forEach((row, idx) => {
-          var _a;
-          if (idx > 1 && dateIsValid(row[0]) && ((_a = row[0]) === null || _a === void 0 ? void 0 : _a.length) >= 10) {
-            row[0] = dateFormat(row[0], 'L LT');
-          }
-        });
-      }
-    };
-    // const PERF_LIMIT = 300;
-    // if ((options?.xAxis as Highcharts.XAxisOptions)?.categories?.length > PERF_LIMIT) { // options?.xAxis as Highcharts.XAxisOptions)?.type !== 'datetime'
-    //   options.plotOptions.series.animation = false;
-    //   options.chart.animation = false;
-    //   options.caption = {
-    //     useHTML: true,
-    //     margin: 20,
-    //     align: 'center',
-    //     verticalAlign: 'bottom',
-    //     text: '<b>' + translate('GRAPHDATAISLIMITED', { count: PERF_LIMIT }) + '</b>',
-    //     style: { color: getCssColor('danger'), fontSize: '14px' }
-    //   };
-    //   const categories = (options.xAxis as Highcharts.XAxisOptions).categories.slice(0, PERF_LIMIT);
-    //   (options.xAxis as Highcharts.XAxisOptions).categories = categories;
-    //   options.series?.forEach((s: any) => {
-    //     s.data = s.data.slice(0, PERF_LIMIT); // .filter((d) => categories.indexOf(d.name) >= 0);
-    //   });
-    // }
-  }
-  resetDoubleClick() {
-    clearTimeout(this.doubleClicker.timer);
-    this.doubleClicker.timer = null;
-    this.doubleClicker.clickedOnce = false;
-  }
-  render() {
-    return (h(Host, { class: { 'full-screen': this.isFullScreen } }, h("div", { id: this.chartContainerId, ref: (el) => (this.chartContainer = el), class: { container: true } })));
-  }
-  static get is() { return "yoo-chart"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["chart.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["chart.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "definition": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IChartDefinition",
-          "resolved": "IChartDefinition",
-          "references": {
-            "IChartDefinition": {
-              "location": "import",
-              "path": "@shared/interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "isFullScreen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-full-screen",
-        "reflect": false
-      },
-      "hideIfEmpty": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-if-empty",
-        "reflect": false
-      },
-      "animatedIllustrationHeight": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "animated-illustration-height",
-        "reflect": false
-      },
-      "disableResize": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disable-resize",
-        "reflect": false
-      },
-      "disableAnimation": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disable-animation",
-        "reflect": false
-      },
-      "config": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Highcharts.Options",
-          "resolved": "Options",
-          "references": {
-            "Highcharts": {
-              "location": "import",
-              "path": "./highcharts"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "chartClick",
-        "name": "chartClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "chartDoubleClick",
-        "name": "chartDoubleClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        }
-      }, {
-        "method": "chartLegendItemClick",
-        "name": "chartLegendItemClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getSVG": {
-        "complexType": {
-          "signature": "(width: any, height: any, x: any, y: any, margin?: number) => Promise<string>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<string>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "export": {
-        "complexType": {
-          "signature": "(filename: string, options?: Highcharts.ExportingOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "Highcharts": {
-              "location": "import",
-              "path": "./highcharts"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "exportCSV": {
-        "complexType": {
-          "signature": "(filename: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "resize": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "config",
-        "methodName": "onConfigChange"
-      }];
-  }
-}

package/dist/collection/feature-platform/insight/chart/highcharts/index.js

@@ -1,52 +0,0 @@
-import Highcharts from 'highcharts';
-import * as highchartsMore from 'highcharts/highcharts-more';
-import * as Highstock from 'highcharts/highstock';
-import * as drilldown from 'highcharts/modules/drilldown';
-import * as exportData from 'highcharts/modules/export-data';
-import * as exporting from 'highcharts/modules/exporting';
-import * as heatmap from 'highcharts/modules/heatmap';
-import * as offline from 'highcharts/modules/offline-exporting';
-import * as solidgauge from 'highcharts/modules/solid-gauge';
-import * as treemap from 'highcharts/modules/treemap';
-import * as wordcloud from 'highcharts/modules/wordcloud';
-function hightChartsPlugins(highcharts) {
-  highcharts.wrap(highcharts.seriesTypes.pie.prototype, 'render', function (proceed) {
-    const chart = this.chart;
-    const center = this.center || (this.yAxis && this.yAxis.center);
-    const titleOption = this.options.title;
-    let box;
-    proceed.call(this);
-    if (center && titleOption) {
-      box = {
-        x: chart.plotLeft + center[0] - 0.5 * center[2],
-        y: chart.plotTop + center[1] - 0.5 * center[2],
-        width: center[2],
-        height: center[2]
-      };
-      if (!this.title) {
-        this.title = this.chart.renderer.label(titleOption.text).css(titleOption.style).add();
-      }
-      const labelBBox = this.title.getBBox();
-      if (titleOption.align === 'center') {
-        box.x -= labelBBox.width / 2;
-      }
-      else if (titleOption.align === 'right') {
-        box.x -= labelBBox.width;
-      }
-      this.title.align(titleOption, null, box);
-    }
-  });
-}
-if (typeof Highcharts === 'object') {
-  highchartsMore.default(Highcharts);
-  treemap.default(Highcharts);
-  heatmap.default(Highcharts);
-  wordcloud.default(Highcharts);
-  drilldown.default(Highcharts);
-  exporting.default(Highcharts);
-  offline.default(Highcharts);
-  solidgauge.default(Highcharts);
-  exportData.default(Highcharts);
-  hightChartsPlugins(Highcharts);
-}
-export { Highcharts, Highstock };