q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

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

@@ -0,0 +1,622 @@
+import { h } from '@stencil/core';
+import * as echarts from 'echarts/core';
+import { TitleComponent, AriaComponent, GridComponent, } from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import { loc, overrideFocus } from 'src/utils';
+import { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';
+echarts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);
+export class Q2ChartArea {
+  constructor() {
+    this.data = [];
+    this.alignChartName = undefined;
+    this.chartName = undefined;
+    this.lineColor = undefined;
+    this.pointerLineColor = undefined;
+    this.pointerLineStyle = undefined;
+    this.areaColor = undefined;
+    this.dataNamesOverflow = undefined;
+    this.dataNamesWidth = undefined;
+    this.format = undefined;
+    this.formatModifier = undefined;
+    this.hideNameAxisLabels = false;
+    this.hideValueAxisLabels = false;
+    this.offsetDataNames = false;
+    this.offsetDataValues = false;
+    this.showChartName = false;
+    this.showDatapointLabels = false;
+    this.showGradient = false;
+    this.gridLines = undefined;
+  }
+  componentDidLoad() {
+    const chart = echarts.init(this.chartContainer);
+    this.chart = chart;
+    this.resizeEventListener = () => this.resizeChart();
+    window.addEventListener('resize', this.resizeEventListener);
+    this.cacheComputedStyles();
+    this.updateChart(chart);
+    overrideFocus(this.hostElement);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.resizeEventListener);
+  }
+  cacheComputedStyles() {
+    this.chartContainerStyles = getComputedStyle(this.chartContainer);
+    this.hostElementStyles = getComputedStyle(this.hostElement);
+  }
+  getAreaFill() {
+    if (this.showGradient) {
+      return {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: this.getColor(this.areaColor),
+          },
+          {
+            offset: 1,
+            color: 'white',
+          },
+        ],
+        global: false,
+      };
+    }
+    return this.getColor(this.areaColor);
+  }
+  getColor(color) {
+    const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);
+    const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);
+    if (cssColorProp)
+      return cssColorProp;
+    if (isValidColor(color))
+      return color;
+    return primaryColor;
+  }
+  updateChart(chart) {
+    var _a;
+    const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+    const valueAxis = {
+      type: 'value',
+      axisLabel: {
+        formatter: (value) => formatValue(value, {
+          type: this.format,
+          decimals,
+        }),
+        rotate: this.offsetDataValues ? 45 : 0,
+        margin: this.offsetDataValues ? 15 : 8,
+        show: !this.hideValueAxisLabels,
+      },
+      splitLine: {
+        show: this.gridLines === 'horizontal' || !this.gridLines,
+      },
+    };
+    const categoryAxis = {
+      type: 'category',
+      boundaryGap: false,
+      data: this.data.map(datum => loc(datum.name) || ''),
+      axisLabel: {
+        rotate: this.offsetDataNames ? 45 : 0,
+        margin: this.offsetDataNames ? 15 : 8,
+        width: this.dataNamesWidth || 50,
+        overflow: this.dataNamesOverflow || 'none',
+        truncate: 'ellipsis',
+        show: !this.hideNameAxisLabels,
+      },
+      axisLine: {
+        show: !this.hideNameAxisLabels,
+      },
+      axisTick: {
+        show: !this.hideNameAxisLabels,
+      },
+      axisPointer: {
+        show: true,
+        type: 'line',
+        label: {
+          show: false,
+          formatter: (params) => {
+            const dataIndex = params.seriesData[0].dataIndex;
+            this.change.emit({
+              index: dataIndex,
+              data: this.data[dataIndex],
+            });
+          },
+        },
+        lineStyle: {
+          color: this.getColor(this.pointerLineColor || 'var(--t-gray-10)'),
+          type: this.pointerLineStyle || 'solid',
+          width: 1.5,
+        },
+        z: 1,
+      },
+      splitLine: {
+        show: this.gridLines === 'vertical',
+      },
+    };
+    return chart.setOption({
+      aria: {
+        enabled: true,
+      },
+      title: {
+        text: this.chartName,
+        show: this.showChartName,
+        left: this.alignChartName,
+      },
+      grid: {
+        containLabel: true,
+      },
+      xAxis: categoryAxis,
+      yAxis: valueAxis,
+      series: [
+        {
+          data: this.data.map(datum => datum.value || 0),
+          id: 'area',
+          type: 'line',
+          lineStyle: {
+            color: this.getColor(this.lineColor),
+          },
+          itemStyle: {
+            color: this.getColor(this.lineColor),
+          },
+          areaStyle: {
+            color: this.getAreaFill(),
+          },
+          symbolSize: 10,
+          showSymbol: false,
+          label: {
+            show: this.showDatapointLabels,
+            position: 'right',
+            formatter: (params) => {
+              return formatValue(params.value, {
+                type: this.format,
+                decimals,
+              });
+            },
+          },
+        },
+      ],
+    });
+  }
+  resizeChart() {
+    this.chart.resize();
+  }
+  propsUpdates() {
+    this.updateChart(this.chart);
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
+  }
+  static get is() { return "q2-chart-area"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IChartData[]",
+          "resolved": "IChartData[]",
+          "references": {
+            "IChartData": {
+              "location": "import",
+              "path": "src/utils/charting"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "alignChartName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right' | 'center'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "align-chart-name",
+        "reflect": true
+      },
+      "chartName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "chart-name",
+        "reflect": true
+      },
+      "lineColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "line-color",
+        "reflect": true
+      },
+      "pointerLineColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pointer-line-color",
+        "reflect": true
+      },
+      "pointerLineStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'solid' | 'dashed'",
+          "resolved": "\"dashed\" | \"solid\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pointer-line-style",
+        "reflect": true
+      },
+      "areaColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "area-color",
+        "reflect": true
+      },
+      "dataNamesOverflow": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'break' | 'truncate'",
+          "resolved": "\"break\" | \"truncate\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-names-overflow",
+        "reflect": true
+      },
+      "dataNamesWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-names-width",
+        "reflect": true
+      },
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'currency' | 'default'",
+          "resolved": "\"currency\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "format",
+        "reflect": true
+      },
+      "formatModifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "format-modifier",
+        "reflect": true
+      },
+      "hideNameAxisLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-name-axis-labels",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hideValueAxisLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-value-axis-labels",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "offsetDataNames": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "offset-data-names",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "offsetDataValues": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "offset-data-values",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showChartName": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-chart-name",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showDatapointLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-datapoint-labels",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showGradient": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-gradient",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "gridLines": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'horizontal' | 'vertical' | 'off'",
+          "resolved": "\"horizontal\" | \"off\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "grid-lines",
+        "reflect": true
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "alignChartName",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "chartName",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "lineColor",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "pointerLineColor",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "pointerLineStyle",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "areaColor",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "dataNamesOverflow",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "dataNamesWidth",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "format",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "formatModifier",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "hideNameAxisLabels",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "hideValueAxisLabels",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "offsetDataNames",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "offsetDataValues",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "showChartName",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "showDatapointLabels",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "showGradient",
+        "methodName": "propsUpdates"
+      }, {
+        "propName": "gridLines",
+        "methodName": "propsUpdates"
+      }];
+  }
+}

package/dist/collection/components/q2-chart-area/styles.css

@@ -0,0 +1,82 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  font-stretch: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+:host {
+  width: var(--tct-area-chart-width, 100%);
+  height: var(--tct-area-chart-height, 100%);
+  display: block;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}