genesys-spark-chart-components 4.262.5 → 4.262.6

package/dist/cjs/{color-palette-CwSB4jG_.js → color-palette-CIfKETRv.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const version = "4.262.5";
+const version = "4.262.6";
 var packageInfo = {
 	version: version};
 

package/dist/cjs/gux-chart-column-beta.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BU_h9-dW.js');
-var colorPalette = require('./color-palette-CwSB4jG_.js');
+var colorPalette = require('./color-palette-CIfKETRv.js');
 var logError = require('./log-error-BMPVm36Q.js');
 
 const guxChartColumnCss = () => `gux-visualization-beta{height:fit-content;color:#2e394c;}gux-visualization-beta .mark-rect.layer_0_marks path{fill:url(#diagonalHatch0)}gux-visualization-beta{}gux-visualization-beta .mark-rect.layer_1_marks path{fill:#1da8b3}`;
@@ -54,10 +54,6 @@ const GuxColumnChart = class {
         if (!this.xFieldName || !this.yFieldName) {
             logError.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;
         }
@@ -116,15 +112,17 @@ const GuxColumnChart = class {
             [rangeField]: colorPalette.VISUALIZATION_COLORS
         };
         this.baseChartSpec.config.range = rangeConfig;
-        const spec = Object.assign(this.baseChartSpec, chartData);
-        this.visualizationSpec = spec;
+        if (this.chartData) {
+            this.baseChartSpec.data = this.chartData;
+        }
+        this.visualizationSpec = JSON.parse(JSON.stringify(this.baseChartSpec));
     }
     componentWillLoad() {
         colorPalette.trackComponent(this.root);
         this.parseData();
     }
     render() {
-        return (index.h("gux-visualization-beta", { key: '3747bc873408091885951d9b093bcb386a85b545', visualizationSpec: this.visualizationSpec }));
+        return (index.h("gux-visualization-beta", { key: 'bd2bf20b792ced36ea252d1332b3049c3ff5a652', visualizationSpec: this.visualizationSpec }));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gux-chart-donut-beta.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BU_h9-dW.js');
-var colorPalette = require('./color-palette-CwSB4jG_.js');
+var colorPalette = require('./color-palette-CIfKETRv.js');
 var logError = require('./log-error-BMPVm36Q.js');
 
 const guxChartDonutCss = () => `gux-visualization-beta{height:fit-content;color:#2e394c}`;
@@ -49,10 +49,6 @@ const GuxDonutChart = class {
         if (!this.outerRadius && !this.innerRadius) {
             logError.logError(this.root, 'requires at least one of outer-radius or inner-radius');
         }
-        let chartData = {};
-        if (this.chartData) {
-            chartData = { data: this.chartData };
-        }
         this.baseChartSpec.config.legend.orient = this.legendPosition;
         if (this.includeLegend) {
             this.baseChartSpec.encoding.color.legend = {};
@@ -186,15 +182,17 @@ const GuxDonutChart = class {
                 };
             }
         }
-        const spec = Object.assign(this.baseChartSpec, chartData);
-        this.visualizationSpec = spec;
+        if (this.chartData) {
+            this.baseChartSpec.data = this.chartData;
+        }
+        this.visualizationSpec = JSON.parse(JSON.stringify(this.baseChartSpec));
     }
     componentWillLoad() {
         colorPalette.trackComponent(this.root);
         this.parseData();
     }
     render() {
-        return (index.h("gux-visualization-beta", { key: '9c6ad7f05c2f788bd677dca62fd91505cba0b525', visualizationSpec: this.visualizationSpec, embedOptions: this.tooltipSpec }));
+        return (index.h("gux-visualization-beta", { key: 'd8fd27820d40a737e614891b68c579d03422399e', visualizationSpec: this.visualizationSpec, embedOptions: this.tooltipSpec }));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gux-chart-line-beta.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BU_h9-dW.js');
-var colorPalette = require('./color-palette-CwSB4jG_.js');
+var colorPalette = require('./color-palette-CIfKETRv.js');
 var logError = require('./log-error-BMPVm36Q.js');
 
 const guxChartLineCss = () => `gux-visualization-beta{height:fit-content;color:#2e394c}`;

package/dist/cjs/gux-chart-pie-beta.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BU_h9-dW.js');
-var colorPalette = require('./color-palette-CwSB4jG_.js');
+var colorPalette = require('./color-palette-CIfKETRv.js');
 var logError = require('./log-error-BMPVm36Q.js');
 
 const guxChartPieCss = () => `gux-visualization-beta{height:fit-content;color:#2e394c}`;
@@ -48,10 +48,6 @@ const GuxPieChart = class {
         if (!this.outerRadius) {
             logError.logError(this.root, 'requires outer-radius');
         }
-        let chartData = {};
-        if (this.chartData) {
-            chartData = { data: this.chartData };
-        }
         if (this.includeLegend) {
             this.baseChartSpec.encoding.color.legend = true;
         }
@@ -79,15 +75,17 @@ const GuxPieChart = class {
                 }
             });
         }
-        const spec = Object.assign(this.baseChartSpec, chartData);
-        this.visualizationSpec = spec;
+        if (this.chartData) {
+            this.baseChartSpec.data = this.chartData;
+        }
+        this.visualizationSpec = JSON.parse(JSON.stringify(this.baseChartSpec));
     }
     componentWillLoad() {
         colorPalette.trackComponent(this.root);
         this.parseData();
     }
     render() {
-        return (index.h("gux-visualization-beta", { key: 'bda28ea5f2fbd01ee1a91287f2c30446db02d910', visualizationSpec: this.visualizationSpec }));
+        return (index.h("gux-visualization-beta", { key: '14ea025a649390ac62820a42990bbbf4f7b8f4f5', visualizationSpec: this.visualizationSpec }));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gux-chart-scatter-plot-beta.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BU_h9-dW.js');
-var colorPalette = require('./color-palette-CwSB4jG_.js');
+var colorPalette = require('./color-palette-CIfKETRv.js');
 var logError = require('./log-error-BMPVm36Q.js');
 
 const guxChartScatterPlotCss = () => `gux-visualization-beta{height:fit-content;color:#2e394c}`;

package/dist/cjs/gux-visualization-beta.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index$4 = require('./index-BU_h9-dW.js');
-var colorPalette = require('./color-palette-CwSB4jG_.js');
+var colorPalette = require('./color-palette-CIfKETRv.js');
 
 // Note: This regex matches even invalid JSON strings, but since we’re
 // working on the output of `JSON.stringify` we know that only valid strings

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

@@ -50,10 +50,6 @@ export class GuxColumnChart {
         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;
         }
@@ -112,15 +108,17 @@ export class GuxColumnChart {
             [rangeField]: VisualizationColorUtil.VISUALIZATION_COLORS
         };
         this.baseChartSpec.config.range = rangeConfig;
-        const spec = Object.assign(this.baseChartSpec, chartData);
-        this.visualizationSpec = spec;
+        if (this.chartData) {
+            this.baseChartSpec.data = this.chartData;
+        }
+        this.visualizationSpec = JSON.parse(JSON.stringify(this.baseChartSpec));
     }
     componentWillLoad() {
         trackComponent(this.root);
         this.parseData();
     }
     render() {
-        return (h("gux-visualization-beta", { key: '3747bc873408091885951d9b093bcb386a85b545', visualizationSpec: this.visualizationSpec }));
+        return (h("gux-visualization-beta", { key: 'bd2bf20b792ced36ea252d1332b3049c3ff5a652', visualizationSpec: this.visualizationSpec }));
     }
     static get is() { return "gux-chart-column-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,63 @@
+import { hoverFirstShadowMark } from "../../../../test/playwrightTestUtils";
+const chartData = {
+    values: [
+        { category: 'a', value: 4 },
+        { category: 'b', value: 6 },
+        { category: 'c', value: 10 },
+        { category: 'd', value: 3 },
+        { category: 'e', value: 10 },
+        { category: 'f', value: 20 }
+    ]
+};
+const layeredData = {
+    values: [
+        { category: 'a', value: 3, series: 'group1' },
+        { category: 'a', value: 4, series: 'group2' },
+        { category: 'b', value: 1, series: 'group1' },
+        { category: 'b', value: 6, series: 'group2' },
+        { category: 'c', value: 10, series: 'group2' },
+        { category: 'c', value: 7, series: 'group1' }
+    ]
+};
+async function setChartData(page, data, layers) {
+    await page.evaluate(({ data, layers }) => {
+        const el = document.querySelector('gux-chart-column-beta');
+        if (el) {
+            el.chartData = data;
+            if (layers) {
+                el.chartLayers = layers;
+            }
+        }
+    }, { data, layers });
+    await page.waitForFunction(() => {
+        var _a, _b;
+        const host = document.querySelector('gux-chart-column-beta');
+        const viz = (_a = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('gux-visualization-beta');
+        return ((_b = viz === null || viz === void 0 ? void 0 : viz.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.mark-rect path')) !== null;
+    });
+}
+export const renderConfigs = [
+    {
+        description: 'should render default column chart',
+        html: '<div lang="en" style="width:500px"><gux-chart-column-beta x-field-name="category" y-field-name="value"></gux-chart-column-beta></div>',
+        extraActions: page => setChartData(page, chartData)
+    },
+    {
+        description: 'should render layered column chart',
+        html: '<div lang="en" style="width:500px"><gux-chart-column-beta x-field-name="category" y-field-name="value"></gux-chart-column-beta></div>',
+        extraActions: page => setChartData(page, layeredData, ['group2', 'group1'])
+    },
+    {
+        description: 'should render column chart with legend',
+        html: '<div lang="en" style="width:500px"><gux-chart-column-beta include-legend="true" x-field-name="category" y-field-name="value"></gux-chart-column-beta></div>',
+        extraActions: page => setChartData(page, chartData)
+    },
+    {
+        description: 'should render column chart with tooltip on hover',
+        html: '<div lang="en" style="width:500px"><gux-chart-column-beta x-field-name="category" y-field-name="value"></gux-chart-column-beta></div>',
+        extraActions: async (page) => {
+            await setChartData(page, chartData);
+            await hoverFirstShadowMark(page, 'gux-chart-column-beta', '.mark-rect path');
+        }
+    }
+];

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

@@ -45,10 +45,6 @@ export class GuxDonutChart {
         if (!this.outerRadius && !this.innerRadius) {
             logError(this.root, 'requires at least one of outer-radius or inner-radius');
         }
-        let chartData = {};
-        if (this.chartData) {
-            chartData = { data: this.chartData };
-        }
         this.baseChartSpec.config.legend.orient = this.legendPosition;
         if (this.includeLegend) {
             this.baseChartSpec.encoding.color.legend = {};
@@ -182,15 +178,17 @@ export class GuxDonutChart {
                 };
             }
         }
-        const spec = Object.assign(this.baseChartSpec, chartData);
-        this.visualizationSpec = spec;
+        if (this.chartData) {
+            this.baseChartSpec.data = this.chartData;
+        }
+        this.visualizationSpec = JSON.parse(JSON.stringify(this.baseChartSpec));
     }
     componentWillLoad() {
         trackComponent(this.root);
         this.parseData();
     }
     render() {
-        return (h("gux-visualization-beta", { key: '9c6ad7f05c2f788bd677dca62fd91505cba0b525', visualizationSpec: this.visualizationSpec, embedOptions: this.tooltipSpec }));
+        return (h("gux-visualization-beta", { key: 'd8fd27820d40a737e614891b68c579d03422399e', visualizationSpec: this.visualizationSpec, embedOptions: this.tooltipSpec }));
     }
     static get is() { return "gux-chart-donut-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-chart-donut/tests/gux-chart-donut.common.js

@@ -0,0 +1,50 @@
+import { hoverFirstShadowMark } from "../../../../test/playwrightTestUtils";
+const chartData = {
+    values: [
+        { category: 'Voice', value: 4 },
+        { category: 'Callback', value: 6 },
+        { category: 'Chat', value: 10 },
+        { category: 'Email', value: 3 },
+        { category: 'Messaging', value: 7 },
+        { category: 'Wuphf', value: 8 }
+    ]
+};
+async function setChartData(page) {
+    await page.evaluate(data => {
+        const el = document.querySelector('gux-chart-donut-beta');
+        if (el) {
+            el.chartData = data;
+        }
+    }, chartData);
+    await page.waitForFunction(() => {
+        var _a, _b;
+        const host = document.querySelector('gux-chart-donut-beta');
+        const viz = (_a = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('gux-visualization-beta');
+        return ((_b = viz === null || viz === void 0 ? void 0 : viz.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.mark-arc path')) !== null;
+    });
+}
+export const renderConfigs = [
+    {
+        description: 'should render donut chart',
+        html: '<div lang="en" style="width:400px"><gux-chart-donut-beta label-radius="110" label-field="value" outer-radius="80" inner-radius="68"></gux-chart-donut-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render donut chart with legend',
+        html: '<div lang="en" style="width:400px"><gux-chart-donut-beta label-radius="110" label-field="value" include-legend="true" legend-title="Media Type" outer-radius="100"></gux-chart-donut-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render gauge donut with center text',
+        html: '<div lang="en" style="width:400px"><gux-chart-donut-beta label-radius="110" label-field="value" outer-radius="80" inner-radius="68" gauge="true" center-text="38%" center-sub-text="Total Percentage"></gux-chart-donut-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render donut chart with tooltip on hover',
+        html: '<div lang="en" style="width:400px"><gux-chart-donut-beta label-radius="110" label-field="value" outer-radius="80" inner-radius="68"></gux-chart-donut-beta></div>',
+        extraActions: async (page) => {
+            await setChartData(page);
+            await hoverFirstShadowMark(page, 'gux-chart-donut-beta', '.mark-arc path');
+        }
+    }
+];

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

@@ -0,0 +1,62 @@
+import { hoverFirstShadowMark } from "../../../../test/playwrightTestUtils";
+const chartData = {
+    values: [
+        { date: '2021-01-01', value: 9.4, category: 'Jupiter' },
+        { date: '2021-01-02', value: 12.8, category: 'Jupiter' },
+        { date: '2021-01-03', value: 10.6, category: 'Jupiter' },
+        { date: '2021-01-04', value: 11.7, category: 'Jupiter' },
+        { date: '2021-01-05', value: 12.2, category: 'Jupiter' },
+        { date: '2021-01-06', value: 8.9, category: 'Jupiter' },
+        { date: '2021-01-01', value: 5.6, category: 'Venus' },
+        { date: '2021-01-02', value: 5.6, category: 'Venus' },
+        { date: '2021-01-03', value: 5.0, category: 'Venus' },
+        { date: '2021-01-04', value: 10.6, category: 'Venus' },
+        { date: '2021-01-05', value: 12.2, category: 'Venus' },
+        { date: '2021-01-06', value: 12.2, category: 'Venus' }
+    ]
+};
+async function setChartData(page) {
+    await page.evaluate(data => {
+        const el = document.querySelector('gux-chart-line-beta');
+        if (el) {
+            el.chartData = data;
+        }
+    }, chartData);
+    await page.waitForFunction(() => {
+        var _a, _b;
+        const host = document.querySelector('gux-chart-line-beta');
+        const viz = (_a = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('gux-visualization-beta');
+        return ((_b = viz === null || viz === void 0 ? void 0 : viz.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.mark-line path')) !== null;
+    });
+}
+export const renderConfigs = [
+    {
+        description: 'should render default line chart',
+        html: '<div lang="en" style="width:500px"><gux-chart-line-beta x-field-name="date" y-field-name="value" x-tick-label-slant="true"></gux-chart-line-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render line chart with legend',
+        html: '<div lang="en" style="width:500px"><gux-chart-line-beta x-field-name="date" y-field-name="value" include-legend="true" x-tick-label-slant="true"></gux-chart-line-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render line chart with point markers',
+        html: '<div lang="en" style="width:500px"><gux-chart-line-beta x-field-name="date" y-field-name="value" include-legend="true" include-data-point-markers="true" x-tick-label-slant="true"></gux-chart-line-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render line chart with tooltip on hover',
+        html: '<div lang="en" style="width:500px"><gux-chart-line-beta x-field-name="date" y-field-name="value" x-tick-label-slant="true" include-data-point-markers="true"></gux-chart-line-beta></div>',
+        extraActions: async (page) => {
+            await setChartData(page);
+            await page.waitForFunction(() => {
+                var _a, _b;
+                const host = document.querySelector('gux-chart-line-beta');
+                const viz = (_a = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('gux-visualization-beta');
+                return ((_b = viz === null || viz === void 0 ? void 0 : viz.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.mark-symbol path')) !== null;
+            });
+            await hoverFirstShadowMark(page, 'gux-chart-line-beta', '.mark-symbol path');
+        }
+    }
+];

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

@@ -44,10 +44,6 @@ export class GuxPieChart {
         if (!this.outerRadius) {
             logError(this.root, 'requires outer-radius');
         }
-        let chartData = {};
-        if (this.chartData) {
-            chartData = { data: this.chartData };
-        }
         if (this.includeLegend) {
             this.baseChartSpec.encoding.color.legend = true;
         }
@@ -75,15 +71,17 @@ export class GuxPieChart {
                 }
             });
         }
-        const spec = Object.assign(this.baseChartSpec, chartData);
-        this.visualizationSpec = spec;
+        if (this.chartData) {
+            this.baseChartSpec.data = this.chartData;
+        }
+        this.visualizationSpec = JSON.parse(JSON.stringify(this.baseChartSpec));
     }
     componentWillLoad() {
         trackComponent(this.root);
         this.parseData();
     }
     render() {
-        return (h("gux-visualization-beta", { key: 'bda28ea5f2fbd01ee1a91287f2c30446db02d910', visualizationSpec: this.visualizationSpec }));
+        return (h("gux-visualization-beta", { key: '14ea025a649390ac62820a42990bbbf4f7b8f4f5', visualizationSpec: this.visualizationSpec }));
     }
     static get is() { return "gux-chart-pie-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-chart-pie/tests/gux-chart-pie.common.js

@@ -0,0 +1,45 @@
+import { hoverFirstShadowMark } from "../../../../test/playwrightTestUtils";
+const chartData = {
+    values: [
+        { category: 'Voice', value: 4 },
+        { category: 'Callback', value: 6 },
+        { category: 'Chat', value: 10 },
+        { category: 'Email', value: 3 },
+        { category: 'Messaging', value: 7 },
+        { category: 'Wuphf', value: 8 }
+    ]
+};
+async function setChartData(page) {
+    await page.evaluate(data => {
+        const el = document.querySelector('gux-chart-pie-beta');
+        if (el) {
+            el.chartData = data;
+        }
+    }, chartData);
+    await page.waitForFunction(() => {
+        var _a, _b;
+        const host = document.querySelector('gux-chart-pie-beta');
+        const viz = (_a = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('gux-visualization-beta');
+        return ((_b = viz === null || viz === void 0 ? void 0 : viz.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.mark-arc path')) !== null;
+    });
+}
+export const renderConfigs = [
+    {
+        description: 'should render pie chart',
+        html: '<div lang="en" style="width:400px"><gux-chart-pie-beta label-radius="110" label-field="value" outer-radius="100"></gux-chart-pie-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render pie chart with legend',
+        html: '<div lang="en" style="width:400px"><gux-chart-pie-beta label-radius="110" label-field="value" include-legend="true" legend-title="Media Type" outer-radius="100"></gux-chart-pie-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render pie chart with tooltip on hover',
+        html: '<div lang="en" style="width:400px"><gux-chart-pie-beta label-radius="110" label-field="value" outer-radius="100"></gux-chart-pie-beta></div>',
+        extraActions: async (page) => {
+            await setChartData(page);
+            await hoverFirstShadowMark(page, 'gux-chart-pie-beta', '.mark-arc path');
+        }
+    }
+];

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

@@ -0,0 +1,54 @@
+import { hoverFirstShadowMark } from "../../../../test/playwrightTestUtils";
+const chartData = {
+    values: [
+        { date: '2021-01-01', value: 9.4, category: 'Jupiter' },
+        { date: '2021-01-02', value: 12.8, category: 'Jupiter' },
+        { date: '2021-01-03', value: 10.6, category: 'Jupiter' },
+        { date: '2021-01-04', value: 11.7, category: 'Jupiter' },
+        { date: '2021-01-05', value: 12.2, category: 'Jupiter' },
+        { date: '2021-01-01', value: 5.6, category: 'Venus' },
+        { date: '2021-01-02', value: 5.6, category: 'Venus' },
+        { date: '2021-01-03', value: 5.0, category: 'Venus' },
+        { date: '2021-01-04', value: 10.6, category: 'Venus' },
+        { date: '2021-01-05', value: 12.2, category: 'Venus' },
+        { date: '2021-01-01', value: 2.6, category: 'Saturn' },
+        { date: '2021-01-02', value: 6.6, category: 'Saturn' },
+        { date: '2021-01-03', value: 3.0, category: 'Saturn' },
+        { date: '2021-01-04', value: 1.6, category: 'Saturn' },
+        { date: '2021-01-05', value: 14.2, category: 'Saturn' }
+    ]
+};
+async function setChartData(page) {
+    await page.evaluate(data => {
+        const el = document.querySelector('gux-chart-scatter-plot-beta');
+        if (el) {
+            el.chartData = data;
+        }
+    }, chartData);
+    await page.waitForFunction(() => {
+        var _a, _b;
+        const host = document.querySelector('gux-chart-scatter-plot-beta');
+        const viz = (_a = host === null || host === void 0 ? void 0 : host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('gux-visualization-beta');
+        return ((_b = viz === null || viz === void 0 ? void 0 : viz.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('svg')) !== null;
+    });
+}
+export const renderConfigs = [
+    {
+        description: 'should render default scatter plot',
+        html: '<div lang="en" style="width:500px"><gux-chart-scatter-plot-beta x-field-name="date" y-field-name="value" x-tick-label-slant="true"></gux-chart-scatter-plot-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render scatter plot with legend',
+        html: '<div lang="en" style="width:500px"><gux-chart-scatter-plot-beta x-field-name="date" y-field-name="value" include-legend="true" x-tick-label-slant="true"></gux-chart-scatter-plot-beta></div>',
+        extraActions: setChartData
+    },
+    {
+        description: 'should render scatter plot with tooltip on hover',
+        html: '<div lang="en" style="width:500px"><gux-chart-scatter-plot-beta x-field-name="date" y-field-name="value" x-tick-label-slant="true"></gux-chart-scatter-plot-beta></div>',
+        extraActions: async (page) => {
+            await setChartData(page);
+            await hoverFirstShadowMark(page, 'gux-chart-scatter-plot-beta', '.mark-symbol path');
+        }
+    }
+];

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

@@ -0,0 +1,116 @@
+import { hoverFirstShadowMark } from "../../../../test/playwrightTestUtils";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function setSpec(spec) {
+    return async (page) => {
+        await page.evaluate(s => {
+            const el = document.querySelector('gux-visualization-beta');
+            if (el) {
+                el.visualizationSpec = s;
+            }
+        }, spec);
+        await page.locator('gux-visualization-beta svg').waitFor();
+    };
+}
+async function waitForMark(page, selector) {
+    await page.waitForFunction(sel => {
+        var _a;
+        const viz = document.querySelector('gux-visualization-beta');
+        return ((_a = viz === null || viz === void 0 ? void 0 : viz.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(sel)) !== null;
+    }, selector);
+}
+const html = '<div lang="en" style="width:400px"><gux-visualization-beta></gux-visualization-beta></div>';
+const barSpec = {
+    $schema: 'https://vega.github.io/schema/vega-lite/v6.json',
+    data: {
+        values: [
+            { category: 'A', value: 4 },
+            { category: 'B', value: 6 },
+            { category: 'C', value: 10 },
+            { category: 'D', value: 3 }
+        ]
+    },
+    mark: { type: 'bar' },
+    encoding: {
+        x: { field: 'category', type: 'nominal' },
+        y: { field: 'value', type: 'quantitative' }
+    }
+};
+const lineSpec = {
+    $schema: 'https://vega.github.io/schema/vega-lite/v6.json',
+    data: {
+        values: [
+            { month: '2024-01-01', value: 4 },
+            { month: '2024-02-01', value: 6 },
+            { month: '2024-03-01', value: 10 },
+            { month: '2024-04-01', value: 3 }
+        ]
+    },
+    mark: { type: 'line' },
+    encoding: {
+        x: { field: 'month', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' }
+    }
+};
+const pieSpec = {
+    $schema: 'https://vega.github.io/schema/vega-lite/v6.json',
+    data: {
+        values: [
+            { category: 'A', value: 4 },
+            { category: 'B', value: 6 },
+            { category: 'C', value: 10 },
+            { category: 'D', value: 3 }
+        ]
+    },
+    encoding: {
+        theta: { field: 'value', type: 'quantitative', stack: true },
+        color: { field: 'category', type: 'nominal', legend: null }
+    },
+    layer: [{ mark: { type: 'arc', outerRadius: 80 } }]
+};
+const lineSpecWithTooltip = Object.assign(Object.assign({}, lineSpec), { mark: { type: 'line', point: true, tooltip: true } });
+const pieSpecWithTooltip = Object.assign(Object.assign({}, pieSpec), { layer: [{ mark: { type: 'arc', outerRadius: 80, tooltip: true } }] });
+const barWithTooltipSpec = Object.assign(Object.assign({}, barSpec), { mark: { type: 'bar', tooltip: true } });
+export const renderConfigs = [
+    {
+        description: 'should render a bar chart',
+        html,
+        extraActions: setSpec(barSpec)
+    },
+    {
+        description: 'should render a line chart',
+        html,
+        extraActions: setSpec(lineSpec)
+    },
+    {
+        description: 'should render a pie chart',
+        html,
+        extraActions: setSpec(pieSpec)
+    },
+    {
+        description: 'should render a bar chart with tooltip on hover',
+        html,
+        extraActions: async (page) => {
+            await setSpec(barWithTooltipSpec)(page);
+            await waitForMark(page, '.mark-rect path');
+            await hoverFirstShadowMark(page, 'gux-visualization-beta', '.mark-rect path');
+        }
+    },
+    {
+        description: 'should render a line chart with tooltip on hover',
+        html,
+        extraActions: async (page) => {
+            await setSpec(lineSpecWithTooltip)(page);
+            await waitForMark(page, '.mark-symbol path');
+            await hoverFirstShadowMark(page, 'gux-visualization-beta', '.mark-symbol path');
+        }
+    },
+    {
+        description: 'should render a pie chart with tooltip on hover',
+        html,
+        extraActions: async (page) => {
+            await setSpec(pieSpecWithTooltip)(page);
+            await waitForMark(page, '.mark-arc path');
+            await hoverFirstShadowMark(page, 'gux-visualization-beta', '.mark-arc path');
+        }
+    }
+];