genesys-spark-chart-components 4.12.1-beta.1

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

@@ -0,0 +1,19 @@
+:host {
+  height: fit-content;
+}
+
+text {
+  fill: #2e394c;
+}
+
+.role-axis-domain {
+  fill: #2e394c;
+}
+
+.role-axis-label text {
+  fill: #596373;
+}
+
+.mark-rule.role-axis-domain line {
+  stroke: #2e394c;
+}

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

@@ -0,0 +1,143 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { h } from "@stencil/core";
+import embed from "vega-embed";
+import { getDesiredLocale } from "../../../i18n";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { timeFormatLocale } from "./gux-visualization.locale";
+export class GuxVisualization {
+  constructor() {
+    this.defaultVisualizationSpec = {};
+    this.defaultEmbedOptions = {
+      actions: false,
+      renderer: 'svg'
+    };
+    this.visualizationSpec = undefined;
+    this.embedOptions = undefined;
+  }
+  componentWillLoad() {
+    trackComponent(this.root);
+  }
+  handleChartClick(_name, value) {
+    this.chartClicked.emit(value);
+  }
+  async componentDidRender() {
+    const locale = getDesiredLocale(this.root);
+    const patchOption = {
+      patch: (visSpec) => {
+        if (!(visSpec === null || visSpec === void 0 ? void 0 : visSpec.signals)) {
+          visSpec.signals = [];
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        visSpec.signals.push({
+          name: 'chartClick',
+          value: 0,
+          on: [{ events: 'rect:mousedown', update: 'datum' }]
+        });
+        return visSpec;
+      }
+    };
+    await embed(this.chartContainer, Object.assign({}, this.defaultVisualizationSpec, this.visualizationSpec), Object.assign({
+      timeFormatLocale: timeFormatLocale[locale]
+    }, this.defaultEmbedOptions, this.embedOptions, patchOption)).then(result => {
+      result.view.addSignalListener('chartClick', (name, value) => this.handleChartClick(name, value));
+    });
+  }
+  componentDidLoad() {
+    this.chartComponentReady.emit();
+  }
+  render() {
+    return (h("div", { ref: el => (this.chartContainer = el) }));
+  }
+  static get is() { return "gux-visualization-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-visualization.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-visualization.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "visualizationSpec": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VisualizationSpec",
+          "resolved": "GenericConcatSpec<NonNormalizedSpec> & TopLevelProperties<ExprRef | SignalRef> & { $schema?: string; config?: Config<ExprRef | SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } | GenericFacetSpec<UnitSpecWithFrame<Field>, LayerSpec<Field>, Field> & TopLevelProperties<ExprRef | SignalRef> & { $schema?: string; config?: Config<ExprRef | SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } & DataMixins | GenericHConcatSpec<NonNormalizedSpec> & TopLevelProperties<ExprRef | SignalRef> & { $schema?: string; config?: Config<ExprRef | SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } | GenericUnitSpec<FacetedCompositeEncoding<Field>, AnyMark, TopLevelParameter> & ResolveMixins & GenericCompositionLayout & FrameMixins<ExprRef | SignalRef> & TopLevelProperties<ExprRef | SignalRef> & { $schema?: string; config?: Config<ExprRef | SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } & DataMixins | GenericVConcatSpec<NonNormalizedSpec> & TopLevelProperties<ExprRef | SignalRef> & { $schema?: string; config?: Config<ExprRef | SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } | LayerRepeatSpec & TopLevelProperties<ExprRef | SignalRef> & { $schema?: string; config?: Config<ExprRef | SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } | LayerSpec<Field> & TopLevelProperties<ExprRef | SignalRef> & { $schema?: string; config?: Config<ExprRef | SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } | NonLayerRepeatSpec & TopLevelProperties<ExprRef | SignalRef> & { $schema?: string; config?: Config<ExprRef | SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } | Spec",
+          "references": {
+            "VisualizationSpec": {
+              "location": "import",
+              "path": "vega-embed",
+              "id": "../../node_modules/vega-embed/build/vega-embed.module.d.ts::VisualizationSpec"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "embedOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EmbedOptions",
+          "resolved": "EmbedOptions<string, Renderers>",
+          "references": {
+            "EmbedOptions": {
+              "location": "import",
+              "path": "vega-embed",
+              "id": "../../node_modules/vega-embed/build/vega-embed.module.d.ts::EmbedOptions"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "chartComponentReady",
+        "name": "chartComponentReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "chartClicked",
+        "name": "chartClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "root"; }
+}

package/dist/collection/components/beta/gux-visualization/gux-visualization.locale.js

@@ -0,0 +1,92 @@
+// https://github.com/d3/d3-time-format/tree/master/locale
+// This is just a POC I would structure the files differently when implementing for production.
+export const timeFormatLocale = {
+  en: {
+    dateTime: '%x, %X',
+    date: '%-m/%-d/%Y',
+    time: '%-I:%M:%S %p',
+    periods: ['AM', 'PM'],
+    days: [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday'
+    ],
+    shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    months: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December'
+    ],
+    shortMonths: [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec'
+    ]
+  },
+  de: {
+    dateTime: '%A, der %e. %B %Y, %X',
+    date: '%d.%m.%Y',
+    time: '%H:%M:%S',
+    periods: ['AM', 'PM'],
+    days: [
+      'Sonntag',
+      'Montag',
+      'Dienstag',
+      'Mittwoch',
+      'Donnerstag',
+      'Freitag',
+      'Samstag'
+    ],
+    shortDays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    months: [
+      'Januar',
+      'Februar',
+      'März',
+      'April',
+      'Mai',
+      'Juni',
+      'Juli',
+      'August',
+      'September',
+      'Oktober',
+      'November',
+      'Dezember'
+    ],
+    shortMonths: [
+      'Jan',
+      'Feb',
+      'Mrz',
+      'Apr',
+      'Mai',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Okt',
+      'Nov',
+      'Dez'
+    ]
+  }
+};

package/dist/collection/components/beta/gux-visualization/tests/gux-visualization.e2e.js

@@ -0,0 +1,31 @@
+import { newE2EPage } from "@stencil/core/testing";
+const visualizationSpecLine = {
+  $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+  data: { url: 'https://vega.github.io/editor/data/seattle-weather.csv' },
+  mark: {
+    type: 'line',
+    interpolate: 'monotone'
+  },
+  encoding: {
+    x: { timeUnit: 'month', field: 'date', bandPosition: 0.5 },
+    y: { aggregate: 'mean', field: 'temp_max' }
+  }
+};
+describe('gux-visualization-beta', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render default button',
+        html: '<gux-visualization-beta lang="en" id="visualization-1"></gux-visualization-beta>'
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newE2EPage({ html });
+        const element = (await page.find('gux-visualization-beta'));
+        element.visualizationSpec = visualizationSpecLine;
+        await page.waitForChanges();
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/beta/gux-visualization/tests/gux-visualization.spec.js

@@ -0,0 +1,35 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxVisualization } from "../gux-visualization";
+const components = [GuxVisualization];
+const language = 'en';
+const visualizationSpecLine = {
+  $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+  data: { url: 'https://vega.github.io/editor/data/seattle-weather.csv' },
+  mark: {
+    type: 'line',
+    interpolate: 'monotone'
+  },
+  encoding: {
+    x: { timeUnit: 'month', field: 'date', bandPosition: 0.5 },
+    y: { aggregate: 'mean', field: 'temp_max' }
+  }
+};
+describe.skip('gux-visualization-beta', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render default button',
+        html: '<gux-visualization-beta></gux-visualization-beta>'
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        const element = page.root;
+        element.visualizationSpec = visualizationSpecLine;
+        await page.waitForChanges();
+        expect(page.rootInstance).toBeInstanceOf(GuxVisualization);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/i18n/fetchResources.js

@@ -0,0 +1,12 @@
+import { getAssetPath } from "@stencil/core";
+const resourceCache = {};
+export const determineFetchUrl = (locale = 'en') => getAssetPath(`i18n/genesys-webcomponents.i18n.${locale}.json`);
+export const fetchResources = async (componentName, locale) => {
+  if (!resourceCache[locale]) {
+    const url = determineFetchUrl(locale);
+    const response = await fetch(url);
+    const resources = await response.json();
+    resourceCache[locale] = resources;
+  }
+  return resourceCache[locale][componentName];
+};

package/dist/collection/i18n/index.js

@@ -0,0 +1,73 @@
+import IntlMessageFormat from "intl-messageformat";
+import { fetchResources } from "./fetchResources";
+// If this import is failing, you should run the i18n script to generate the list of locales
+import locales from "./locales.json";
+import { getClosestElement } from "../utils/dom/get-closest-element";
+const DEFAULT_LOCALE = 'en';
+export async function buildI18nForComponent(component, defaultResources, parentComponent) {
+  let resources = defaultResources;
+  let locale = 'en';
+  if (component !== undefined) {
+    locale = getDesiredLocale(component);
+    resources = await getComponentI18nResources(component, defaultResources, locale, parentComponent);
+  }
+  const intlFormats = Object.entries(resources).reduce((map, [key, val]) => {
+    map.set(key, new IntlMessageFormat(val, locale));
+    return map;
+  }, new Map());
+  const defaultFormats = Object.entries(defaultResources).reduce((map, [key, val]) => {
+    map.set(key, new IntlMessageFormat(val, DEFAULT_LOCALE));
+    return map;
+  }, new Map());
+  return (resourceKey, context) => {
+    var _a, _b;
+    let i18nString = (_a = intlFormats.get(resourceKey)) === null || _a === void 0 ? void 0 : _a.format(context);
+    if (!i18nString) {
+      i18nString = (_b = defaultFormats.get(resourceKey)) === null || _b === void 0 ? void 0 : _b.format(context);
+      console.warn(`No localized string available for "${resourceKey}-${i18nString}" for "${locale}" locale. Falling back to English translation.`);
+    }
+    return i18nString;
+  };
+}
+export async function getComponentI18nResources(component, defaultResources, locale, parentComponent) {
+  const componentName = parentComponent ||
+    component.tagName.toLocaleLowerCase().replace(/-beta$/, '');
+  let resources;
+  if (component['i18n-resources']) {
+    resources = component['i18n-resources'];
+  }
+  else if (locale !== DEFAULT_LOCALE) {
+    try {
+      resources = await fetchResources(componentName, locale);
+    }
+    catch (_) {
+      resources = null;
+    }
+  }
+  if (!resources) {
+    resources = defaultResources;
+  }
+  return resources;
+}
+export function getDesiredLocale(element) {
+  const locale = findLocaleInDom(element);
+  const lang = locale.split(/[_-]/)[0];
+  if (locales.indexOf(locale) >= 0) {
+    return locale;
+  }
+  else if (locales.indexOf(lang) >= 0) {
+    return lang;
+  }
+  else {
+    return DEFAULT_LOCALE;
+  }
+}
+function findLocaleInDom(element) {
+  const closestElement = getClosestElement('[lang]', element);
+  if (closestElement && closestElement.lang) {
+    return closestElement.lang.toLowerCase();
+  }
+  else {
+    return DEFAULT_LOCALE;
+  }
+}

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+export * from '../scripts/stencil-wrapper';
+export * from '../i18n/DateTimeFormatter';

package/dist/collection/test/axeConfig.js

@@ -0,0 +1,7 @@
+// config for axe-core automated testing in e2e tests
+export const axeConfig = {
+  runOnly: {
+    type: 'tags',
+    values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']
+  }
+};

package/dist/collection/test/e2eTestUtils.js

@@ -0,0 +1,20 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { axeConfig } from "./axeConfig";
+export async function a11yCheck(page, axeExclusions = [], axeScanContext = '') {
+  const axeScanDetails = {
+    axeExclusions,
+    axeScanContext
+  };
+  const axeResults = await page.evaluate(`window.axe.run('body > *', ${JSON.stringify(axeConfig)})`);
+  // eslint-disable-next-line
+  expect(axeResults.violations).toHaveNoViolations(axeScanDetails);
+}
+export async function newSparkE2EPage({ html }, lang = 'en') {
+  const page = await newE2EPage();
+  await page.setContent(`<div lang=${lang}>${html}</div>`);
+  await page.addScriptTag({
+    path: '../../node_modules/axe-core/axe.min.js'
+  });
+  await page.waitForChanges();
+  return page;
+}

package/dist/collection/test/jestMatcherUtils.js

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

package/dist/collection/test/setupAxeTests.js

@@ -0,0 +1,75 @@
+/* eslint-env jest, node */
+
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/typedef */
+
+global.beforeEach(() => {
+  expect.extend({
+    toHaveNoViolations(axeViolations, axeScanDetails) {
+      return toHaveNoViolations(axeViolations, axeScanDetails);
+    }
+  });
+});
+
+function toHaveNoViolations(axeViolations, axeScanDetails) {
+  let violations = [];
+
+  axeViolations.forEach(violation => {
+    let violationTargets = [];
+    violation.nodes.forEach(violationInstance => {
+      let excludedElement = false;
+      axeScanDetails.axeExclusions.forEach(exclusion => {
+        if (
+          exclusion.issueId === violation.id &&
+          (!exclusion.target ||
+            exclusion.target === violationInstance.target[0].toString())
+        ) {
+          excludedElement = true;
+        }
+      });
+      if (excludedElement === false) {
+        violationTargets.push(violationInstance);
+        violation.violationInstance = violationTargets;
+      }
+    });
+    if (violation.violationInstance) {
+      violations.push(violation);
+    }
+  });
+  const violationMessage = createViolationMessage(violations, axeScanDetails);
+  return returnPassOrFail(violations, violationMessage);
+}
+
+function createViolationMessage(violations, axeScanDetails) {
+  let violationMessage = '';
+  let elementMessage = '';
+  let axeContextMessage = axeScanDetails.axeScanContext
+    ? `Axe scan context:\n${axeScanDetails.axeScanContext}\n`
+    : '';
+  violations.forEach(violation => {
+    violation.violationInstance.forEach(element => {
+      elementMessage += `\n${element.target}\n${element.failureSummary}`;
+    });
+    violationMessage += `${axeContextMessage}Violation id:\n${violation.id}\nViolation description:\n${violation.description}
+    \nAffected Elements (${violation.violationInstance.length}):${elementMessage}\n
+    `;
+  });
+  return violationMessage;
+}
+
+function returnPassOrFail(violations, violationMessage) {
+  if (violations.length === 0) {
+    return {
+      message: () => `No violations found`,
+      pass: true
+    };
+  } else {
+    return {
+      message: () => violationMessage,
+      pass: false
+    };
+  }
+}

package/dist/collection/test/setupTests.js

@@ -0,0 +1,9 @@
+/* eslint-env jest, node */
+
+global.beforeEach(() => {
+  jest.spyOn(global.Math, 'random').mockReturnValue(0.5);
+});
+
+global.afterEach(() => {
+  jest.spyOn(global.Math, 'random').mockRestore();
+});

package/dist/collection/test/specTestUtils.js

@@ -0,0 +1,10 @@
+import { newSpecPage as stencilSpecPage } from "@stencil/core/testing";
+import MutationObserver from "mutation-observer";
+import ResizeObserver from "resize-observer-polyfill";
+export async function newSpecPage(opts) {
+  global.MutationObserver = MutationObserver;
+  global.ResizeObserver = ResizeObserver;
+  global.InputEvent = Event;
+  const page = await stencilSpecPage(opts);
+  return page;
+}

package/dist/collection/utils/dom/get-closest-element.js

@@ -0,0 +1,15 @@
+export function getClosestElement(selector, baseElement = this) {
+  function closest(element) {
+    if (!element || element === document || element === window) {
+      return null;
+    }
+    if (element.assignedSlot) {
+      element = element.assignedSlot;
+    }
+    const found = element.closest(selector);
+    return found
+      ? found
+      : closest(element.getRootNode().host);
+  }
+  return closest(baseElement);
+}

package/dist/collection/utils/error/log-error.js

@@ -0,0 +1,6 @@
+export function logError(component, message) {
+  console.error(`[${component.tagName.toLowerCase()}] ${message}`, component);
+}
+export function logWarn(component, message) {
+  console.warn(`[${component.tagName.toLowerCase()}] ${message}`, component);
+}

package/dist/collection/utils/theme/color-palette.js

@@ -0,0 +1,12 @@
+export const VISUALIZATION_COLORS = [
+  '#203B73',
+  '#1DA8B3',
+  '#75A8FF',
+  '#8452CF',
+  '#B5B5EB',
+  '#CC3EBE',
+  '#5E5782',
+  '#FF8FDD',
+  '#868C1E',
+  '#DDD933'
+];

package/dist/collection/utils/tracking/usage.js

@@ -0,0 +1,81 @@
+import packageInfo from "../../../package.json";
+// The number of actions to process every interval
+const ACTION_BATCH_SIZE = 20;
+const NR_LIMIT_INTERVAL = 30000; // 30s
+/**
+ * A queue of events that should be tracked by NewRelic.
+ * We initialize it with the library version to make sure that's always reported.
+ */
+const actionQueue = [
+  getVersionEvent(packageInfo.version)
+];
+/**
+ * Process the next batch items in the queue, set a timeout to recur.
+ * We use a recurring timeout instead of an interval because it guarantees
+ * a minimum of NR_LMIT_INTERVAL between batches, even if the browser is
+ * held up by processing elsewhere.
+ */
+function processActionQueue() {
+  const newrelic = window.newrelic;
+  if (!newrelic) {
+    return;
+  }
+  for (let i = 0; i < ACTION_BATCH_SIZE; i++) {
+    if (actionQueue.length == 0) {
+      setTimeout(processActionQueue, NR_LIMIT_INTERVAL);
+      return;
+    }
+    const action = actionQueue.shift();
+    newrelic.addPageAction(action.name, Object.assign(Object.assign({}, action.metadata), { queueDepth: actionQueue.length }));
+  }
+  setTimeout(processActionQueue, NR_LIMIT_INTERVAL);
+}
+let trackingStarted = false;
+/**
+ * Begin action processing loop if it hasn't started.
+ */
+function ensureTracking() {
+  if (!trackingStarted) {
+    trackingStarted = true;
+    processActionQueue();
+  }
+}
+/**
+ * Submits a component for tracking by NewRelic.
+ */
+export function trackComponent(element, metadata) {
+  if (!window.newrelic) {
+    return;
+  }
+  ensureTracking();
+  // Ignore components in the shadow DOM of another component
+  // e.g. Only track components used directly by the app
+  if (!document.contains(element)) {
+    return;
+  }
+  actionQueue.push({
+    name: 'spark-component',
+    metadata: Object.assign(Object.assign({}, metadata), { component: element.tagName.toLowerCase(), version: packageInfo.version })
+  });
+}
+export function trackAction(element, action, actionMetadata) {
+  if (!window.newrelic) {
+    return;
+  }
+  ensureTracking();
+  actionQueue.push({
+    name: 'spark-action',
+    metadata: Object.assign(Object.assign({}, actionMetadata), { action, component: element.tagName.toLowerCase() })
+  });
+}
+export function getVersionEvent(packageInfoVersion) {
+  const [major, minor, ...patch] = packageInfoVersion.split('.');
+  return {
+    name: 'spark-library',
+    metadata: {
+      fullVersion: `${major}.${minor}.${patch.join('.')}`,
+      majorVersion: major,
+      minorVersion: `${major}.${minor}`
+    }
+  };
+}