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

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e13a15f.js');
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  return index.bootstrapLazy([["gux-visualization-beta.cjs",[[1,"gux-visualization-beta",{"visualizationSpec":[16],"embedOptions":[16]}]]],["gux-chart-column-beta.cjs",[[1,"gux-chart-column-beta",{"chartData":[16],"xTickLabelSlant":[4,"x-tick-label-slant"],"includeLegend":[4,"include-legend"],"xFieldName":[1,"x-field-name"],"yFieldName":[1,"y-field-name"],"xAxisTitle":[1,"x-axis-title"],"yAxisTitle":[1,"y-axis-title"],"legendTitle":[1,"legend-title"],"legendPosition":[1,"legend-position"],"chartLayers":[16],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-donut-beta.cjs",[[1,"gux-chart-donut-beta",{"chartData":[16],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"outerRadius":[2,"outer-radius"],"innerRadius":[2,"inner-radius"],"labelRadius":[2,"label-radius"],"labelField":[1,"label-field"],"gauge":[4],"centerText":[1,"center-text"],"centerSubText":[1,"center-sub-text"],"showTooltip":[4,"show-tooltip"],"tooltipOptions":[16],"legendX":[2,"legend-x"],"legendY":[2,"legend-y"],"legendFontSize":[2,"legend-font-size"],"legendSymbolSize":[2,"legend-symbol-size"],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-line-beta.cjs",[[1,"gux-chart-line-beta",{"chartData":[16],"xTickLabelSlant":[4,"x-tick-label-slant"],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"includeDataPointMarkers":[4,"include-data-point-markers"],"xFieldName":[1,"x-field-name"],"xAxisTitle":[1,"x-axis-title"],"yFieldName":[1,"y-field-name"],"yAxisTitle":[1,"y-axis-title"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"strokeDash":[4,"stroke-dash"],"interpolation":[1],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-pie-beta.cjs",[[1,"gux-chart-pie-beta",{"chartData":[16],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"outerRadius":[2,"outer-radius"],"labelRadius":[2,"label-radius"],"labelField":[1,"label-field"],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-scatter-plot-beta.cjs",[[1,"gux-chart-scatter-plot-beta",{"chartData":[16],"xTickLabelSlant":[4,"x-tick-label-slant"],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"xFieldName":[1,"x-field-name"],"xAxisTitle":[1,"x-axis-title"],"yFieldName":[1,"y-field-name"],"yAxisTitle":[1,"y-axis-title"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"useShape":[1,"use-shape"],"embedOptions":[16]},null,{"chartData":["parseData"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/log-error-c46b4b4c.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const VISUALIZATION_COLORS = [
+  '#203B73',
+  '#1DA8B3',
+  '#75A8FF',
+  '#8452CF',
+  '#B5B5EB',
+  '#CC3EBE',
+  '#5E5782',
+  '#FF8FDD',
+  '#868C1E',
+  '#DDD933'
+];
+
+function logError(component, message) {
+  console.error(`[${component.tagName.toLowerCase()}] ${message}`, component);
+}
+
+exports.VISUALIZATION_COLORS = VISUALIZATION_COLORS;
+exports.logError = logError;

package/dist/cjs/usage-30f04ec3.js

@@ -0,0 +1,208 @@
+'use strict';
+
+const name = "genesys-spark-chart-components";
+const version = "4.12.1-beta.1";
+const description = "Common chart webcomponents";
+const license = "MIT";
+const main = "dist/stencil-wrapper.js";
+const files = [
+	"dist/"
+];
+const scripts = {
+	build: "npm run clean && npm run i18n && npm run stencil && npm run build-wrapper",
+	"build-i18n": "./scripts/build-i18n.js",
+	"build-wrapper": "./scripts/wrap-stencil.js",
+	"check-a11y": "node ./scripts/check-a11y.mjs",
+	"check-readmes": "./scripts/check-readmes.sh",
+	clean: "rm -r ./dist ./build || true",
+	predev: "npm run i18n",
+	dev: "npm run stencil.dev",
+	eslint: "eslint --fix .",
+	i18n: "npm run update-en-i18n && npm run build-i18n",
+	"lint-all": "npm-run-all \"stylelint\" \"eslint\" \"prettier\" \"prettier-package-json\"",
+	"lint-staged": "lint-staged",
+	"list-checked-a11y-components": "node scripts/list-checked-a11y-components.js",
+	"list-component-tracking": "./scripts/list-component-tracking.js",
+	"list-i18n-files": "./scripts/list-i18n-files.js",
+	"predev.public": "npm run predev",
+	prepare: "npm run i18n",
+	prettier: "prettier --log-level silent --ignore-unknown --write .",
+	"prettier-package-json": "prettier-package-json --write ./package.json",
+	stencil: "stencil build --prod",
+	"stencil.dev": "stencil build --dev --watch --serve --no-open",
+	stylelint: "stylelint --fix \"**/*.{css,html,scss}\"",
+	test: "TZ=UTC stencil test --spec --e2e",
+	"test.ci": "TZ=UTC npm run test.ci.spec",
+	"test.ci.e2e": "TZ=UTC stencil test --e2e --max-workers=1",
+	"test.ci.spec": "TZ=UTC stencil test --spec --max-workers=1",
+	"test.e2e": "TZ=UTC stencil test --e2e",
+	"test.e2e.update-snapshot": "TZ=UTC stencil test --e2e --updateSnapshot",
+	"test.screenshot": "TZ=UTC stencil test --e2e --screenshot",
+	"test.unit": "TZ=UTC stencil build dev && stencil test --spec",
+	"test.unit.update-snapshot": "TZ=UTC stencil test --spec --updateSnapshot",
+	"test.update-snapshot": "TZ=UTC stencil test --spec --e2e --updateSnapshot",
+	"test.watch": "TZ=UTC stencil test --spec --e2e --watch",
+	"update-en-i18n": "./scripts/update-en-i18n.js",
+	"version-sync": "npm version --no-git-tag-version --allow-same-version"
+};
+const config = {
+	commitizen: {
+		path: "./node_modules/cz-conventional-changelog"
+	}
+};
+const types = "dist/types/index.d.ts";
+const dependencies = {
+	vega: "*",
+	"vega-embed": "*",
+	"vega-lite": "*"
+};
+const devDependencies = {
+	"@babel/core": "^7.23.2",
+	"@babel/preset-env": "^7.23.2",
+	"@stencil/core": "4.5.0",
+	"@stencil/react-output-target": "^0.5.3",
+	"@stencil/sass": "^3.0.7",
+	"@stencil/utils": "0.0.5",
+	"@types/jest": "^27.5.2",
+	"@types/new-relic-browser": "^0.1118.2",
+	"@types/puppeteer": "^5.4.7",
+	"@typescript-eslint/eslint-plugin": "^6.9.1",
+	"@typescript-eslint/parser": "^6.9.1",
+	"axe-core": "^4.8.2",
+	"axe-live": "^1.0.1",
+	eslint: "^8.52.0",
+	"eslint-config-genesys-spark-components": "file:../../shared-configs/eslint-config-genesys-spark-components",
+	"eslint-config-prettier": "^8.10.0",
+	"file-loader": "^6.2.0",
+	"genesys-spark-tokens": "file:../genesys-spark-tokens",
+	glob: "^10.3.0",
+	handlebars: "^4.7.8",
+	inquirer: "^9.2.7",
+	jest: "^27.5.1",
+	"jest-cli": "^27.5.1",
+	"jest-config": "^27.5.1",
+	"jest-environment-node": "^27.5.1",
+	"jest-junit": "^13.2.0",
+	"jest-silent-reporter": "^0.5.0",
+	jsdom: "^22.1.0",
+	"lint-staged": "^13.3.0",
+	marked: "^4.3.0",
+	"node-fetch": "^3.3.2",
+	"npm-run-all": "^4.1.5",
+	"postcss-html": "^1.5.0",
+	"postcss-less": "^6.0.0",
+	"postcss-scss": "^4.0.9",
+	prettier: "^3.0.3",
+	"prettier-config-genesys-spark-components": "file:../../shared-configs/prettier-config-genesys-spark-components",
+	"prettier-package-json": "^2.8.0",
+	puppeteer: "^14.4.1",
+	"rollup-plugin-copy": "^3.5.0",
+	"semver-sort": "^1.0.0",
+	stylelint: "^15.11.0",
+	"stylelint-config-genesys-spark-components": "file:../../shared-configs/stylelint-config-genesys-spark-components",
+	"stylelint-config-html": "^1.1.0",
+	"stylelint-config-recess-order": "^4.3.0",
+	"stylelint-config-standard": "^34.0.0",
+	"stylelint-scss": "^5.3.0",
+	"ts-loader": "^9.5.0",
+	typescript: "^4.9.5",
+	xmldom: "^0.6.0"
+};
+const publishConfig = {
+	registry: "https://registry.npmjs.org/"
+};
+const collection = "dist/collection/collection-manifest.json";
+const prettier = "prettier-config-genesys-spark-components";
+const volta = {
+	node: "18.16.1"
+};
+const packageInfo = {
+	name: name,
+	version: version,
+	description: description,
+	license: license,
+	main: main,
+	files: files,
+	scripts: scripts,
+	config: config,
+	types: types,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	publishConfig: publishConfig,
+	collection: collection,
+	prettier: prettier,
+	volta: volta
+};
+
+// 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.
+ */
+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 })
+  });
+}
+function getVersionEvent(packageInfoVersion) {
+  const [major, minor, ...patch] = packageInfoVersion.split('.');
+  return {
+    name: 'spark-library',
+    metadata: {
+      fullVersion: `${major}.${minor}.${patch.join('.')}`,
+      majorVersion: major,
+      minorVersion: `${major}.${minor}`
+    }
+  };
+}
+
+exports.trackComponent = trackComponent;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,17 @@
+{
+  "entries": [
+    "components/beta/gux-chart-column/gux-chart-column.js",
+    "components/beta/gux-chart-donut/gux-chart-donut.js",
+    "components/beta/gux-chart-line/gux-chart-line.js",
+    "components/beta/gux-chart-pie/gux-chart-pie.js",
+    "components/beta/gux-chart-scatter-plot/gux-chart-scatter-plot.js",
+    "components/beta/gux-visualization/gux-visualization.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.5.0",
+    "typescriptVersion": "5.2.2"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/beta/gux-chart-column/gux-chart-column.css

@@ -0,0 +1,13 @@
+gux-visualization-beta {
+  height: fit-content;
+  color: #2e394c;
+  /* stylelint-disable-next-line selector-class-pattern */
+  /* stylelint-disable-next-line selector-class-pattern */
+}
+gux-visualization-beta .mark-rect.layer_0_marks path {
+  /* stylelint-disable-next-line function-url-quotes */
+  fill: url(#diagonalHatch0);
+}
+gux-visualization-beta .mark-rect.layer_1_marks path {
+  fill: #1da8b3;
+}

package/dist/collection/components/beta/gux-chart-column/gux-chart-column.js

@@ -0,0 +1,343 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { VISUALIZATION_COLORS } from "../../../utils/theme/color-palette";
+import { logError } from "../../../utils/error/log-error";
+export class GuxColumnChart {
+  constructor() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.baseChartSpec = {
+      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+      mark: { type: 'bar' },
+      config: {
+        axis: {
+          ticks: false,
+          titlePadding: 8
+        },
+        axisX: {
+          labelAngle: 0
+        },
+        scale: {
+          bandPaddingInner: 0.4,
+          bandPaddingOuter: 0.4 // padding between leftmost/rightmost column/bar from axes
+        },
+        legend: {
+          symbolType: 'circle'
+        },
+        bar: {
+          color: VISUALIZATION_COLORS[0]
+        }
+      },
+      encoding: {
+        x: { type: 'nominal' },
+        y: { type: 'quantitative' },
+        tooltip: { aggregate: 'count', type: 'quantitative' }
+      }
+    };
+    this.chartData = undefined;
+    this.xTickLabelSlant = undefined;
+    this.includeLegend = undefined;
+    this.xFieldName = undefined;
+    this.yFieldName = undefined;
+    this.xAxisTitle = undefined;
+    this.yAxisTitle = undefined;
+    this.legendTitle = undefined;
+    this.legendPosition = 'right';
+    this.chartLayers = undefined;
+    this.embedOptions = undefined;
+  }
+  parseData() {
+    if (!this.xFieldName || !this.yFieldName) {
+      logError(this.root, '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.includeLegend) {
+      this.baseChartSpec.encoding.color = { field: 'category' };
+    }
+    if (this.legendPosition) {
+      this.baseChartSpec.config.legend.orient = this.legendPosition;
+    }
+    const xFieldName = this.xFieldName;
+    const yFieldName = this.yFieldName;
+    const xAxisTitle = this.xAxisTitle;
+    const yAxisTitle = this.yAxisTitle;
+    const legendTitle = this.legendTitle;
+    if (this.chartLayers) {
+      const layers = this.chartLayers.map(layerName => {
+        return {
+          mark: 'bar',
+          transform: [
+            {
+              filter: { field: 'series', equal: layerName }
+            }
+          ],
+          encoding: {
+            x: {
+              field: xFieldName,
+              type: 'nominal'
+            },
+            y: {
+              field: yFieldName,
+              type: 'quantitative'
+            }
+          }
+        };
+      });
+      this.baseChartSpec.layer = layers;
+    }
+    else {
+      if (xFieldName) {
+        this.baseChartSpec.encoding.x.field = xFieldName;
+      }
+      if (yFieldName) {
+        this.baseChartSpec.encoding.y.field = yFieldName;
+      }
+      if (xAxisTitle) {
+        this.baseChartSpec.encoding.x.title = xAxisTitle;
+      }
+      if (yAxisTitle) {
+        this.baseChartSpec.encoding.y.title = yAxisTitle;
+      }
+      if (legendTitle) {
+        this.baseChartSpec.encoding.color.title = legendTitle;
+      }
+    }
+    // Set up colors for legend and bars
+    const rangeField = xFieldName;
+    const rangeConfig = {
+      [rangeField]: VISUALIZATION_COLORS
+    };
+    this.baseChartSpec.config.range = rangeConfig;
+    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-column-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-chart-column.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-chart-column.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "chartData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Record<string, any>",
+          "resolved": "{ [x: string]: any; }",
+          "references": {
+            "Record": {
+              "location": "global",
+              "id": "global::Record"
+            }
+          }
+        },
+        "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
+      },
+      "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
+      },
+      "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
+      },
+      "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
+      },
+      "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
+      },
+      "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'"
+      },
+      "chartLayers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List specifying the order of optional chart layers.\nFor correct chart layering, each chartData entry must also include a \"series\" field with a value indicating which layer the entry belongs to, e.g 'series': 'group1'"
+        }
+      },
+      "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 elementRef() { return "root"; }
+  static get watchers() {
+    return [{
+        "propName": "chartData",
+        "methodName": "parseData"
+      }];
+  }
+}