genesys-spark-components 3.2.0 → 3.3.0

package/dist/collection/components/beta/gux-chart-scatter-plot/gux-chart-scatter-plot.js

@@ -0,0 +1,344 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+import { VISUALIZATION_COLORS } from '../../../utils/theme/color-palette';
+import { logError } from '../../../utils/error/log-error';
+const DEFAULT_COLOR_FIELD_NAME = 'category';
+export class GuxScatterPlotChart {
+  constructor() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.baseChartSpec = {
+      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+      params: [
+        {
+          name: 'onHover',
+          select: { type: 'point', on: 'mouseover' }
+        }
+      ],
+      config: {
+        axis: {
+          ticks: false,
+          titlePadding: 8,
+          gridColor: '#F6F7F9'
+        },
+        axisX: {
+          labelAngle: 0,
+          grid: true
+        },
+        legend: {
+          symbolType: 'circle'
+        }
+      },
+      width: { step: 40 },
+      encoding: {
+        x: { type: 'nominal' },
+        y: { type: 'quantitative' },
+        color: {
+          field: DEFAULT_COLOR_FIELD_NAME,
+          type: 'nominal',
+          scale: { range: VISUALIZATION_COLORS },
+          legend: null
+        },
+        size: {
+          condition: [
+            {
+              param: 'onHover',
+              empty: false,
+              value: 100
+            }
+          ],
+          value: 40
+        }
+      }
+    };
+    this.legendPosition = 'right';
+  }
+  parseData() {
+    if (!this.xFieldName || !this.yFieldName) {
+      logError('gux-chart-scatter-plot', '[gux-chart-scatter-plot] requires x-field-name and y-field-name');
+    }
+    let chartData = {};
+    if (this.chartData) {
+      chartData = { data: this.chartData };
+    }
+    if (this.xTickLabelSlant) {
+      this.baseChartSpec.config.axisX.labelAngle = -45;
+    }
+    if (this.legendPosition) {
+      this.baseChartSpec.config.legend.orient = this.legendPosition;
+    }
+    const xFieldName = this.xFieldName;
+    const xAxisTitle = this.xAxisTitle;
+    const yFieldName = this.yFieldName;
+    const yAxisTitle = this.yAxisTitle;
+    const legendTitle = this.legendTitle;
+    const useShape = this.useShape || 'circle';
+    const colorFieldName = this.colorFieldName || DEFAULT_COLOR_FIELD_NAME;
+    if (this.includeLegend) {
+      this.baseChartSpec.encoding.color.legend = true;
+    }
+    if (xFieldName) {
+      this.baseChartSpec.encoding.x.field = xFieldName;
+    }
+    if (xAxisTitle) {
+      this.baseChartSpec.encoding.x.title = xAxisTitle;
+    }
+    if (yFieldName) {
+      this.baseChartSpec.encoding.y.field = yFieldName;
+    }
+    if (yAxisTitle) {
+      this.baseChartSpec.encoding.y.title = yAxisTitle;
+    }
+    if (colorFieldName) {
+      this.baseChartSpec.encoding.color.field = colorFieldName;
+    }
+    if (legendTitle) {
+      this.baseChartSpec.encoding.color.title = legendTitle;
+    }
+    this.baseChartSpec.mark = { type: useShape, filled: true };
+    this.baseChartSpec.config.legend.symbolType = useShape;
+    this.baseChartSpec.encoding.shape = {
+      field: colorFieldName,
+      type: 'nominal'
+    };
+    this.baseChartSpec.encoding.tooltip = [
+      { field: xFieldName, type: 'nominal', title: xAxisTitle },
+      { field: yFieldName, type: 'quantitative', title: yAxisTitle },
+      { field: colorFieldName, type: 'nominal', title: legendTitle }
+    ];
+    const spec = Object.assign(this.baseChartSpec, chartData);
+    this.visualizationSpec = spec;
+  }
+  componentWillLoad() {
+    trackComponent(this.root);
+    this.parseData();
+  }
+  render() {
+    return (h("gux-visualization-beta", { visualizationSpec: this.visualizationSpec }));
+  }
+  static get is() { return "gux-chart-scatter-plot-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-chart-scatter-plot.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-chart-scatter-plot.css"]
+  }; }
+  static get properties() { return {
+    "chartData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, any>",
+        "resolved": "{ [x: string]: any; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Data to be rendered in the chart.\nData field names must match the values you set in xFieldName and yFieldName"
+      }
+    },
+    "xTickLabelSlant": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If true, then make Axis tick label 45 degrees"
+      },
+      "attribute": "x-tick-label-slant",
+      "reflect": false
+    },
+    "includeLegend": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "include-legend",
+      "reflect": false
+    },
+    "legendPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'left'\n    | 'right'\n    | 'top'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'none'",
+        "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"none\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "legend-position",
+      "reflect": false,
+      "defaultValue": "'right'"
+    },
+    "xFieldName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name for the data field to use to populate the chart's x-axis\ne.g. xFieldName of \"category\" will map any \"category\" fields in chartData to the x-axis"
+      },
+      "attribute": "x-field-name",
+      "reflect": false
+    },
+    "xAxisTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title to display along the x-axis"
+      },
+      "attribute": "x-axis-title",
+      "reflect": false
+    },
+    "yFieldName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name for the data field to use to populate the chart's x-axis\ne.g. yFieldName of \"value\" will map any \"value\" fields in chartData to the y-axis"
+      },
+      "attribute": "y-field-name",
+      "reflect": false
+    },
+    "yAxisTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title to display along the y-axis"
+      },
+      "attribute": "y-axis-title",
+      "reflect": false
+    },
+    "legendTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title to display above the optional legend"
+      },
+      "attribute": "legend-title",
+      "reflect": false
+    },
+    "colorFieldName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Type of category to plot in the chart"
+      },
+      "attribute": "color-field-name",
+      "reflect": false
+    },
+    "useShape": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The shape of the plotting in the chart - Square, Circle and Point"
+      },
+      "attribute": "use-shape",
+      "reflect": false
+    },
+    "embedOptions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "EmbedOptions",
+        "resolved": "EmbedOptions<string, Renderers>",
+        "references": {
+          "EmbedOptions": {
+            "location": "import",
+            "path": "vega-embed"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "chartData",
+      "methodName": "parseData"
+    }]; }
+}

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-beta.css

@@ -0,0 +1,39 @@
+:host {
+  display: block;
+  border-top: 1px solid #e2e6ee;
+}
+.gux-pagination-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  margin: 12px 12px 0 12px;
+}
+.gux-pagination-container .gux-pagination-info {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  align-self: auto;
+  justify-content: flex-start;
+  order: 0;
+}
+.gux-pagination-container .gux-pagination-info > * {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+.gux-pagination-container .gux-pagination-change {
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 0;
+  margin-left: 24px;
+}
+.gux-pagination-container .gux-pagination-change:first-child {
+  margin-left: 0;
+}

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-beta.js

@@ -0,0 +1,225 @@
+import { Component, Element, Event, h, readTask, Prop, State } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+/**
+ * The minimum size in px at which the advanced layout will display.
+ * Below this size we switch to the simple layout.
+ * This was chosen based on the width required for 3-digit page numbers, so
+ * page counts that go into 4 digits could overflow at small sizes.
+ */
+const MIN_ADVANCED_SIZE = 810;
+export class GuxPaginationBeta {
+  constructor() {
+    /**
+     * The pagination component can have different layouts to suit the available space
+     */
+    this.layout = 'advanced';
+    /**
+     * The currently select page. Changes are watched by the component.
+     */
+    this.currentPage = 1;
+    /**
+     * The total number of items in the data set. Used to calculate total page count
+     */
+    this.totalItems = 0;
+    /**
+     * The max number of items on a page. Used to calculate total page count
+     */
+    this.itemsPerPage = 25;
+  }
+  setPage(page) {
+    if (page < 0) {
+      if (this.totalPages > 0) {
+        this.setPage(1);
+      }
+      else {
+        this.setPage(0);
+      }
+      return;
+    }
+    const totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
+    if (page > totalPages) {
+      this.setPage(totalPages);
+      return;
+    }
+    this.currentPage = page;
+    this.guxpaginationchange.emit({
+      currentPage: this.currentPage,
+      itemsPerPage: this.itemsPerPage
+    });
+  }
+  handleInternalitemsperpagechange(event) {
+    this.itemsPerPage = event.detail;
+    this.setPage(1);
+  }
+  handleInternalcurrentpagechange(event) {
+    this.setPage(event.detail);
+  }
+  calculateTotalPages(totalItems, itemsPerPage) {
+    return Math.ceil(totalItems / itemsPerPage);
+  }
+  calculateCurrentPage(totalPages, currentPage) {
+    const minCurrentPage = totalPages > 0 ? 1 : 0;
+    return Math.max(minCurrentPage, Math.min(currentPage, totalPages));
+  }
+  checkPaginationContainerWidthForLayout() {
+    readTask(() => {
+      const el = this.root.shadowRoot.querySelector('.gux-pagination-container');
+      const paginationContainerWidth = el.clientWidth;
+      if (paginationContainerWidth < MIN_ADVANCED_SIZE) {
+        this.displayedLayout = 'simple';
+      }
+      else {
+        this.displayedLayout = this.layout;
+      }
+    });
+  }
+  componentWillLoad() {
+    trackComponent(this.root, { variant: this.layout });
+  }
+  componentWillRender() {
+    this.totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
+    this.currentPage = this.calculateCurrentPage(this.totalPages, this.currentPage);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.root.shadowRoot.querySelector('.gux-pagination-container'));
+    }
+  }
+  componentDidLoad() {
+    if (!this.resizeObserver && window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => this.checkPaginationContainerWidthForLayout());
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.observe(this.root.shadowRoot.querySelector('.gux-pagination-container'));
+    }
+    setTimeout(() => {
+      this.checkPaginationContainerWidthForLayout();
+    }, 500);
+  }
+  render() {
+    return (h("div", { class: "gux-pagination-container" },
+      h("div", { class: "gux-pagination-info" },
+        h("gux-pagination-item-counts-beta", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }),
+        this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page-beta", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))),
+      h("div", { class: "gux-pagination-change" },
+        h("gux-pagination-buttons-beta", { layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+  }
+  static get is() { return "gux-pagination-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-pagination-beta.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-pagination-beta.css"]
+  }; }
+  static get properties() { return {
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "GuxPaginationLayoutBeta",
+        "resolved": "\"advanced\" | \"simple\"",
+        "references": {
+          "GuxPaginationLayoutBeta": {
+            "location": "import",
+            "path": "./gux-pagination-beta.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The pagination component can have different layouts to suit the available space"
+      },
+      "attribute": "layout",
+      "reflect": false,
+      "defaultValue": "'advanced'"
+    },
+    "currentPage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The currently select page. Changes are watched by the component."
+      },
+      "attribute": "current-page",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "totalItems": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The total number of items in the data set. Used to calculate total page count"
+      },
+      "attribute": "total-items",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "itemsPerPage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "GuxItemsPerPage",
+        "resolved": "100 | 25 | 50 | 75",
+        "references": {
+          "GuxItemsPerPage": {
+            "location": "import",
+            "path": "../../stable/gux-pagination/gux-pagination.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The max number of items on a page. Used to calculate total page count"
+      },
+      "attribute": "items-per-page",
+      "reflect": false,
+      "defaultValue": "25"
+    }
+  }; }
+  static get states() { return {
+    "totalPages": {},
+    "displayedLayout": {}
+  }; }
+  static get events() { return [{
+      "method": "guxpaginationchange",
+      "name": "guxpaginationchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "GuxPaginationState",
+        "resolved": "{ currentPage: number; itemsPerPage: number; }",
+        "references": {
+          "GuxPaginationState": {
+            "location": "import",
+            "path": "../../stable/gux-pagination/gux-pagination.types"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "root"; }
+}

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-beta.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-buttons-beta/gux-pagination-button-beta.service.js

@@ -0,0 +1,91 @@
+export class GuxPaginationButtonsService {
+  static getPageList(currentPage, totalPages) {
+    if (totalPages <= 10) {
+      return [...Array(totalPages).keys()].map(index => {
+        const pageNumber = index + 1;
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+    }
+    if (currentPage <= 5) {
+      const startPageList = [...Array(6).keys()].map(index => {
+        const pageNumber = index + 1;
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+      return [
+        ...startPageList,
+        {
+          pageNumber: 7,
+          display: '...',
+          current: false
+        },
+        {
+          pageNumber: totalPages,
+          display: String(totalPages),
+          current: false
+        }
+      ];
+    }
+    if (currentPage > totalPages - 5) {
+      const endPageList = [...Array(6).keys()].map(index => {
+        const pageNumber = index + totalPages - 5;
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+      return [
+        {
+          pageNumber: 1,
+          display: '1',
+          current: false
+        },
+        {
+          pageNumber: totalPages - 6,
+          display: '...',
+          current: false
+        },
+        ...endPageList
+      ];
+    }
+    const middlePageList = [...Array(5).keys()].map(index => {
+      const pageNumber = index + currentPage - 2;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+    return [
+      {
+        pageNumber: 1,
+        display: '1',
+        current: false
+      },
+      {
+        pageNumber: currentPage - 3,
+        display: '...',
+        current: false
+      },
+      ...middlePageList,
+      {
+        pageNumber: currentPage + 3,
+        display: '...',
+        current: false
+      },
+      {
+        pageNumber: totalPages,
+        display: String(totalPages),
+        current: false
+      }
+    ];
+  }
+}