q2-tecton-elements 1.13.1 → 1.14.1

package/dist/collection/components/q2-chart-donut/index.js

@@ -0,0 +1,628 @@
+import { Component, State, Prop, h, Element, Event, Method, Watch, Listen, } from '@stencil/core';
+import * as echarts from 'echarts/core';
+import { TooltipComponent, LegendComponent, AriaComponent, } from 'echarts/components';
+import { PieChart } from 'echarts/charts';
+import { LabelLayout } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import { isEventFromElement, loc, overrideFocus } from 'src/utils';
+echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);
+export class Q2ChartDonut {
+  constructor() {
+    this.innerRadius = '70%';
+    this.outerRadius = '85%';
+    this.selectedOffset = 10;
+    this.hoverScaleSize = 5;
+    this.data = [];
+    this.defaultRecord = { id: null, value: null, name: null };
+    /// Event Handlers ///
+    this.onClickElsewhere = (event) => {
+      event.stopPropagation();
+      this.clearSelection();
+    };
+    this.onButtonKeyUp = (event) => {
+      const { selectedId, data } = this;
+      let selectedIndex = this.getIndexById(selectedId) || 0;
+      switch (event.key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          selectedIndex--;
+          if (selectedIndex < 0)
+            selectedIndex = data.length - 1;
+          this.chart.dispatchAction({
+            type: 'select',
+            seriesId: 'pie',
+            dataIndex: selectedIndex,
+          });
+          break;
+        case 'ArrowRight':
+        case 'ArrowDown':
+          selectedIndex++;
+          if (selectedIndex > data.length - 1)
+            selectedIndex = 0;
+          this.chart.dispatchAction({
+            type: 'select',
+            seriesId: 'pie',
+            dataIndex: selectedIndex,
+          });
+          break;
+        case 'Escape':
+          this.clearSelection();
+          break;
+        default:
+          return;
+      }
+    };
+    this.onButtonClick = (event) => {
+      event.stopPropagation();
+      const { selectedId } = this;
+      const data = selectedId ? this.getDataById(selectedId) : Object.assign({}, this.defaultRecord);
+      this.click.emit(data);
+    };
+    this.onContainerClick = (event) => {
+      if (this.isInChangeEvent)
+        return;
+      if (!(event.target instanceof HTMLElement))
+        return;
+      this.clearSelection();
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentDidLoad() {
+    const chart = echarts.init(this.chartContainer);
+    this.cacheComputedStyles();
+    this.colors = this.getColors();
+    this.resizeObserver = new ResizeObserver(() => this.resizeChart());
+    this.resizeObserver.observe(this.hostElement);
+    this.updateChart(chart);
+    this.setupChartEvents(chart);
+    this.chart = chart;
+    overrideFocus(this.hostElement);
+  }
+  willDestroyElement() {
+    this.resizeObserver = null;
+  }
+  /// Getters ///
+  get centerData() {
+    const { selectedId, hoveredId, data } = this;
+    const idToDisplay = hoveredId || selectedId;
+    const index = this.getIndexById(idToDisplay);
+    return idToDisplay
+      ? Object.assign(Object.assign({}, this.getDataById(idToDisplay)), { color: this.colors[index] }) : {
+      name: loc(this.summaryName || 'tecton.element.chartDonut.button.summaryName'),
+      icon: this.summaryIcon,
+      value: data.reduce((acc, cur) => acc + cur.value, 0),
+      color: null,
+    };
+  }
+  /// Helpers
+  cacheComputedStyles() {
+    this.chartContainerStyles = getComputedStyle(this.chartContainer);
+    this.hostElementStyles = getComputedStyle(this.hostElement);
+  }
+  displayValue(value) {
+    const valueAsFloat = parseFloat(value.toString());
+    if (isNaN(valueAsFloat))
+      return;
+    if (this.format === 'currency') {
+      return Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(valueAsFloat);
+    }
+    else {
+      return Intl.NumberFormat('en-US').format(valueAsFloat);
+    }
+  }
+  getCSSProperty(name) {
+    let fallback;
+    if (name.startsWith('var(') && name.endsWith(')')) {
+      const regExp = /var\((.*)\)/g;
+      const result = regExp.exec(name);
+      const split = result.length >= 2 ? result[1].split(',') : [];
+      name = split[0];
+      fallback = split[1];
+    }
+    let result = this.chartContainerStyles.getPropertyValue(name).trim();
+    if (!result)
+      result = this.hostElementStyles.getPropertyValue(name).trim();
+    return result || fallback;
+  }
+  getIndexById(id) {
+    return this.data.findIndex(item => item.id === id);
+  }
+  getDataByIndex(index) {
+    if (typeof index !== 'number')
+      return;
+    return this.data[index];
+  }
+  getDataById(id) {
+    if (!id)
+      return;
+    return this.data.find(item => item.id === id);
+  }
+  getColors() {
+    const defaultColors = [
+      '--comp-color-1',
+      '--comp-color-2',
+      '--comp-color-3',
+      '--comp-color-4',
+      '--comp-color-5',
+      '--comp-color-6',
+      '--comp-color-7',
+      '--comp-color-8',
+      '--comp-color-9',
+      '--comp-color-10',
+      '--comp-color-11',
+      '--comp-color-12',
+    ];
+    return this.data.reduce((acc, cur) => {
+      let color = defaultColors.shift();
+      if (cur.color)
+        color = cur.color;
+      acc.push(this.getCSSProperty(color) || color);
+      return acc;
+    }, []);
+  }
+  setupChartEvents(chart) {
+    chart.on('mouseover', (params) => {
+      this.hoveredId = params.data.id;
+    });
+    chart.on('mouseout', () => {
+      this.hoveredId = null;
+    });
+    chart.on('selectchanged', (params) => {
+      var _a, _b, _c, _d;
+      const selectedIndex = (_d = (_c = (_b = (_a = params.selected) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.dataIndex) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : null;
+      const data = typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : Object.assign({}, this.defaultRecord);
+      this.selectedId = data.id;
+      this.isInChangeEvent = true;
+      this.change.emit(data);
+      setTimeout(() => {
+        this.isInChangeEvent = false;
+      }, 0);
+    });
+  }
+  updateChart(chart) {
+    return chart.setOption({
+      tooltip: {
+        show: false,
+      },
+      legend: {
+        show: false,
+      },
+      aria: {
+        enabled: true,
+      },
+      series: [
+        {
+          name: this.chartName,
+          animationType: 'scale',
+          color: this.colors,
+          id: 'pie',
+          type: 'pie',
+          selectedOffset: this.selectedOffset,
+          selectedMode: 'single',
+          radius: [this.innerRadius, this.outerRadius],
+          label: {
+            show: false,
+          },
+          labelLine: {
+            show: false,
+          },
+          itemStyle: {
+            borderWidth: 5,
+            borderColor: this.getCSSProperty('--comp-background-color'),
+          },
+          emphasis: {
+            scaleSize: this.hoverScaleSize,
+            itemStyle: {
+              color: 'inherit',
+            },
+          },
+          data: this.data,
+        },
+      ],
+    });
+  }
+  resizeChart() {
+    this.chart.resize();
+  }
+  /// Watchers ///
+  propsUpdates() {
+    this.updateChart(this.chart);
+  }
+  dataUpdated() {
+    this.colors = this.getColors();
+  }
+  innerRadiusUpdated() {
+    const { innerRadius, outerRadius } = this;
+    const innerRadiusInt = parseFloat(innerRadius);
+    const outerRadiusInt = parseFloat(outerRadius);
+    if (innerRadiusInt >= outerRadiusInt) {
+      this.innerRadius = `${outerRadiusInt - 15}%`;
+    }
+  }
+  outerRadiusUpdated() {
+    const { innerRadius, outerRadius } = this;
+    const innerRadiusInt = parseFloat(innerRadius);
+    const outerRadiusInt = parseFloat(outerRadius);
+    if (outerRadiusInt <= innerRadiusInt) {
+      this.outerRadius = `${innerRadiusInt + 15}%`;
+    }
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    var _a;
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    if (!this.isClickable)
+      return;
+    (_a = this.centerButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /// Methods ///
+  async selectById(id) {
+    const dataIndex = this.getIndexById(id);
+    if (dataIndex === -1)
+      return;
+    this.chart.dispatchAction({
+      type: 'select',
+      seriesId: 'pie',
+      dataIndex,
+    });
+  }
+  async selectByIndex(index) {
+    const dataIndex = this.data[index] ? index : null;
+    if (!dataIndex)
+      return;
+    this.chart.dispatchAction({
+      type: 'select',
+      seriesId: 'pie',
+      dataIndex,
+    });
+  }
+  async clearSelection() {
+    const { selectedId } = this;
+    if (!selectedId)
+      return;
+    this.chart.dispatchAction({
+      type: 'unselect',
+      seriesId: 'pie',
+      dataIndex: this.getIndexById(selectedId),
+    });
+  }
+  /// DOM ///
+  renderCenterBlock() {
+    const { icon, name, value, color } = this.centerData;
+    const { isClickable } = this;
+    const TagName = isClickable ? 'button' : 'div';
+    const displayValue = this.displayValue(value);
+    const props = isClickable
+      ? {
+        onKeyUp: this.onButtonKeyUp,
+        onClick: this.onButtonClick,
+        ref: el => (this.centerButtonElement = el),
+        'aria-description': loc('tecton.element.chartDonut.button.description'),
+        'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
+      }
+      : null;
+    return (h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props),
+      icon && (h("q2-icon", { type: icon, style: color && { color } })),
+      name && h("div", { class: "name" }, name),
+      value && h("div", { class: "value" }, displayValue)));
+  }
+  render() {
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere },
+      h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }),
+      this.renderCenterBlock()));
+  }
+  static get is() { return "q2-chart-donut"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "chartName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "chart-name",
+      "reflect": true
+    },
+    "summaryIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "summary-icon",
+      "reflect": true
+    },
+    "summaryName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "summary-name",
+      "reflect": true
+    },
+    "innerRadius": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "inner-radius",
+      "reflect": false,
+      "defaultValue": "'70%'"
+    },
+    "outerRadius": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "outer-radius",
+      "reflect": false,
+      "defaultValue": "'85%'"
+    },
+    "selectedOffset": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-offset",
+      "reflect": false,
+      "defaultValue": "10"
+    },
+    "hoverScaleSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hover-scale-size",
+      "reflect": false,
+      "defaultValue": "5"
+    },
+    "format": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'currency'",
+        "resolved": "\"currency\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "format",
+      "reflect": true
+    },
+    "isClickable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-clickable",
+      "reflect": true
+    },
+    "data": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ id: string; value: number; name: string; icon?: string; color?: string }[]",
+        "resolved": "{ id: string; value: number; name: string; icon?: string; color?: string; }[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "selectedId": {},
+    "hoveredId": {}
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "selectById": {
+      "complexType": {
+        "signature": "(id: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "selectByIndex": {
+      "complexType": {
+        "signature": "(index: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "clearSelection": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "chartName",
+      "methodName": "propsUpdates"
+    }, {
+      "propName": "innerRadius",
+      "methodName": "propsUpdates"
+    }, {
+      "propName": "outerRadius",
+      "methodName": "propsUpdates"
+    }, {
+      "propName": "hoverScaleSize",
+      "methodName": "propsUpdates"
+    }, {
+      "propName": "selectedOffset",
+      "methodName": "propsUpdates"
+    }, {
+      "propName": "data",
+      "methodName": "propsUpdates"
+    }, {
+      "propName": "data",
+      "methodName": "dataUpdated"
+    }, {
+      "propName": "innerRadius",
+      "methodName": "innerRadiusUpdated"
+    }, {
+      "propName": "outerRadius",
+      "methodName": "outerRadiusUpdated"
+    }]; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}