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

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

@@ -0,0 +1,4 @@
+gux-visualization-beta {
+  height: fit-content;
+  color: #2e394c;
+}

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

@@ -0,0 +1,391 @@
+/* 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";
+const DEFAULT_COLOR_FIELD_NAME = 'category';
+export class GuxLineChart {
+  constructor() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.baseChartSpec = {
+      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+      mark: {
+        type: 'line',
+        interpolate: 'linear',
+        point: false
+      },
+      config: {
+        axis: {
+          ticks: false,
+          titlePadding: 8
+        },
+        axisX: {
+          labelAngle: 0
+        },
+        legend: {
+          symbolType: 'circle'
+        }
+      },
+      encoding: {
+        x: { type: 'nominal' },
+        y: { type: 'quantitative' },
+        color: {
+          field: DEFAULT_COLOR_FIELD_NAME,
+          type: 'nominal',
+          scale: { range: VISUALIZATION_COLORS },
+          legend: null
+        },
+        tooltip: { aggregate: 'count', type: 'quantitative' }
+      }
+    };
+    this.chartData = undefined;
+    this.xTickLabelSlant = undefined;
+    this.includeLegend = undefined;
+    this.legendPosition = 'right';
+    this.includeDataPointMarkers = undefined;
+    this.xFieldName = undefined;
+    this.xAxisTitle = undefined;
+    this.yFieldName = undefined;
+    this.yAxisTitle = undefined;
+    this.legendTitle = undefined;
+    this.colorFieldName = undefined;
+    this.strokeDash = undefined;
+    this.interpolation = 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.legend = true;
+    }
+    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 colorFieldName = this.colorFieldName || DEFAULT_COLOR_FIELD_NAME;
+    const interpolation = this.interpolation;
+    const strokeDash = this.strokeDash;
+    const includeDataPointMarkers = this.includeDataPointMarkers;
+    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;
+    }
+    if (strokeDash) {
+      this.baseChartSpec.encoding.strokeDash = {
+        field: colorFieldName,
+        type: 'nominal'
+      };
+    }
+    if (interpolation) {
+      this.baseChartSpec.mark.interpolate = interpolation;
+    }
+    if (includeDataPointMarkers) {
+      this.baseChartSpec.mark.point = includeDataPointMarkers;
+    }
+    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-line-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-chart-line.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-chart-line.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
+      },
+      "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'"
+      },
+      "includeDataPointMarkers": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "include-data-point-markers",
+        "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
+      },
+      "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": ""
+        },
+        "attribute": "color-field-name",
+        "reflect": false
+      },
+      "strokeDash": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "stroke-dash",
+        "reflect": false
+      },
+      "interpolation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "interpolation",
+        "reflect": false
+      },
+      "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"
+      }];
+  }
+}

package/dist/collection/components/beta/gux-chart-line/gux-chart-line.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-chart-line/tests/gux-chart-line.e2e.js

@@ -0,0 +1,17 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('gux-chart-line-beta', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render chart',
+        html: '<gux-chart-line-beta x-field-name="date" y-field-name="value"></gux-chart-line-beta>'
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newE2EPage({ html });
+        const element = await page.find('gux-chart-line-beta');
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,22 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxLineChart } from "../gux-chart-line";
+const components = [GuxLineChart];
+const language = 'en';
+describe('gux-chart-line-beta', () => {
+  it('should build', async () => {
+    const html = '<gux-chart-line-beta x-field-name="date" y-field-name="value"></gux-chart-line-beta>';
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxLineChart);
+  });
+  it('should reflect user option to make slant x axis tick labels', async () => {
+    let html = '<gux-chart-line-beta x-field-name="date" y-field-name="value"></gux-chart-line-beta>';
+    let page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance.xTickLabelSlant).toBeUndefined();
+    expect(page.rootInstance.baseChartSpec.config.axisX.labelAngle).toBe(0);
+    html =
+      '<gux-chart-line-beta x-field-name="date" y-field-name="value" x-tick-label-slant="true"></gux-chart-line-beta>';
+    page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance.xTickLabelSlant).toBeTruthy();
+    expect(page.rootInstance.baseChartSpec.config.axisX.labelAngle).toBe(45);
+  });
+});

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

@@ -0,0 +1,4 @@
+gux-visualization-beta {
+  height: fit-content;
+  color: #2e394c;
+}