genesys-spark-chart-components 4.74.1 → 4.76.0

package/dist/{esm/usage-0deb6ff1.js → cjs/color-palette-ced3f161.js}

@@ -1,5 +1,7 @@
+'use strict';
+
 const name = "genesys-spark-chart-components";
-const version = "4.74.1";
+const version = "4.76.0";
 const description = "Common chart webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";
@@ -202,4 +204,22 @@ function getVersionEvent(packageInfoVersion) {
     };
 }
 
-export { trackComponent as t };
+const VISUALIZATION_COLORS = [
+    '#203B73',
+    '#1DA8B3',
+    '#75A8FF',
+    '#8452CF',
+    '#B5B5EB',
+    '#CC3EBE',
+    '#5E5782',
+    '#FF8FDD',
+    '#868C1E',
+    '#DDD933'
+];
+const DEFAULT_LABEL_COLOR = '#596373';
+const DEFAULT_DOMAIN_COLOR = '#596373';
+
+exports.DEFAULT_DOMAIN_COLOR = DEFAULT_DOMAIN_COLOR;
+exports.DEFAULT_LABEL_COLOR = DEFAULT_LABEL_COLOR;
+exports.VISUALIZATION_COLORS = VISUALIZATION_COLORS;
+exports.trackComponent = trackComponent;

package/dist/cjs/genesys-chart-webcomponents.cjs.js

@@ -19,7 +19,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  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);
+  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",{"labelColor":[1,"label-color"],"domainColor":[1,"domain-color"],"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",{"labelColor":[1,"label-color"],"domainColor":[1,"domain-color"],"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",{"labelColor":[1,"label-color"],"domainColor":[1,"domain-color"],"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;

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-95713c33.js');
-const usage = require('./usage-930af94e.js');
-const logError = require('./log-error-28c7064e.js');
+const colorPalette = require('./color-palette-ced3f161.js');
+const logError = require('./log-error-8f448752.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 .mark-rect.layer_1_marks path{fill:#1da8b3}";
 const GuxChartColumnBetaStyle0 = guxChartColumnCss;
@@ -19,7 +19,9 @@ const GuxColumnChart = class {
             config: {
                 axis: {
                     ticks: false,
-                    titlePadding: 8
+                    titlePadding: 8,
+                    labelColor: this.labelColor || colorPalette.DEFAULT_LABEL_COLOR,
+                    domainColor: this.domainColor || colorPalette.DEFAULT_DOMAIN_COLOR
                 },
                 axisX: {
                     labelAngle: 0
@@ -32,7 +34,7 @@ const GuxColumnChart = class {
                     symbolType: 'circle'
                 },
                 bar: {
-                    color: logError.VISUALIZATION_COLORS[0]
+                    color: colorPalette.VISUALIZATION_COLORS[0]
                 }
             },
             encoding: {
@@ -41,6 +43,8 @@ const GuxColumnChart = class {
                 tooltip: { aggregate: 'count', type: 'quantitative' }
             }
         };
+        this.labelColor = colorPalette.DEFAULT_LABEL_COLOR;
+        this.domainColor = colorPalette.DEFAULT_DOMAIN_COLOR;
         this.chartData = undefined;
         this.xTickLabelSlant = undefined;
         this.includeLegend = undefined;
@@ -118,18 +122,18 @@ const GuxColumnChart = class {
         // Set up colors for legend and bars
         const rangeField = xFieldName;
         const rangeConfig = {
-            [rangeField]: logError.VISUALIZATION_COLORS
+            [rangeField]: colorPalette.VISUALIZATION_COLORS
         };
         this.baseChartSpec.config.range = rangeConfig;
         const spec = Object.assign(this.baseChartSpec, chartData);
         this.visualizationSpec = spec;
     }
     componentWillLoad() {
-        usage.trackComponent(this.root);
+        colorPalette.trackComponent(this.root);
         this.parseData();
     }
     render() {
-        return (index.h("gux-visualization-beta", { key: '204c508da5ccda0059c2500fa91b06ad6ac91c2d', visualizationSpec: this.visualizationSpec }));
+        return (index.h("gux-visualization-beta", { key: '5bcc2fcee3bfb4905b9fdbb572593402531f960d', visualizationSpec: this.visualizationSpec }));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-95713c33.js');
-const usage = require('./usage-930af94e.js');
-const logError = require('./log-error-28c7064e.js');
+const colorPalette = require('./color-palette-ced3f161.js');
+const logError = require('./log-error-8f448752.js');
 
 const guxChartDonutCss = "gux-visualization-beta{height:fit-content;color:#2e394c}";
 const GuxChartDonutBetaStyle0 = guxChartDonutCss;
@@ -28,7 +28,7 @@ const GuxDonutChart = class {
                 color: {
                     field: DEFAULT_COLOR_FIELD_NAME,
                     type: 'nominal',
-                    scale: { range: logError.VISUALIZATION_COLORS },
+                    scale: { range: colorPalette.VISUALIZATION_COLORS },
                     legend: null
                 }
             },
@@ -214,7 +214,7 @@ const GuxDonutChart = class {
         this.visualizationSpec = spec;
     }
     componentWillLoad() {
-        usage.trackComponent(this.root);
+        colorPalette.trackComponent(this.root);
         this.parseData();
     }
     render() {

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-95713c33.js');
-const usage = require('./usage-930af94e.js');
-const logError = require('./log-error-28c7064e.js');
+const colorPalette = require('./color-palette-ced3f161.js');
+const logError = require('./log-error-8f448752.js');
 
 const guxChartLineCss = "gux-visualization-beta{height:fit-content;color:#2e394c}";
 const GuxChartLineBetaStyle0 = guxChartLineCss;
@@ -24,7 +24,9 @@ const GuxLineChart = class {
             config: {
                 axis: {
                     ticks: false,
-                    titlePadding: 8
+                    titlePadding: 8,
+                    labelColor: this.labelColor || colorPalette.DEFAULT_LABEL_COLOR,
+                    domainColor: this.domainColor || colorPalette.DEFAULT_DOMAIN_COLOR
                 },
                 axisX: {
                     labelAngle: 0
@@ -39,12 +41,14 @@ const GuxLineChart = class {
                 color: {
                     field: DEFAULT_COLOR_FIELD_NAME,
                     type: 'nominal',
-                    scale: { range: logError.VISUALIZATION_COLORS },
+                    scale: { range: colorPalette.VISUALIZATION_COLORS },
                     legend: null
                 },
                 tooltip: { aggregate: 'count', type: 'quantitative' }
             }
         };
+        this.labelColor = colorPalette.DEFAULT_LABEL_COLOR;
+        this.domainColor = colorPalette.DEFAULT_DOMAIN_COLOR;
         this.chartData = undefined;
         this.xTickLabelSlant = undefined;
         this.includeLegend = undefined;
@@ -120,11 +124,11 @@ const GuxLineChart = class {
         this.visualizationSpec = spec;
     }
     componentWillLoad() {
-        usage.trackComponent(this.root);
+        colorPalette.trackComponent(this.root);
         this.parseData();
     }
     render() {
-        return (index.h("gux-visualization-beta", { key: 'd312d8b365db65c08f3631bb4976e74f7bf077ac', visualizationSpec: this.visualizationSpec }));
+        return (index.h("gux-visualization-beta", { key: '9a0bbdde50dc38102cff841ca0b2aa9aa47b47ff', visualizationSpec: this.visualizationSpec }));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-95713c33.js');
-const usage = require('./usage-930af94e.js');
-const logError = require('./log-error-28c7064e.js');
+const colorPalette = require('./color-palette-ced3f161.js');
+const logError = require('./log-error-8f448752.js');
 
 const guxChartPieCss = "gux-visualization-beta{height:fit-content;color:#2e394c}";
 const GuxChartPieBetaStyle0 = guxChartPieCss;
@@ -27,7 +27,7 @@ const GuxPieChart = class {
                 color: {
                     field: DEFAULT_COLOR_FIELD_NAME,
                     type: 'nominal',
-                    scale: { range: logError.VISUALIZATION_COLORS },
+                    scale: { range: colorPalette.VISUALIZATION_COLORS },
                     legend: null
                 },
                 tooltip: { aggregate: 'count', type: 'quantitative' }
@@ -98,7 +98,7 @@ const GuxPieChart = class {
         this.visualizationSpec = spec;
     }
     componentWillLoad() {
-        usage.trackComponent(this.root);
+        colorPalette.trackComponent(this.root);
         this.parseData();
     }
     render() {

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-95713c33.js');
-const usage = require('./usage-930af94e.js');
-const logError = require('./log-error-28c7064e.js');
+const colorPalette = require('./color-palette-ced3f161.js');
+const logError = require('./log-error-8f448752.js');
 
 const guxChartScatterPlotCss = "gux-visualization-beta{height:fit-content;color:#2e394c}";
 const GuxChartScatterPlotBetaStyle0 = guxChartScatterPlotCss;
@@ -26,7 +26,9 @@ const GuxScatterPlotChart = class {
                 axis: {
                     ticks: false,
                     titlePadding: 8,
-                    gridColor: '#F6F7F9'
+                    gridColor: '#F6F7F9',
+                    labelColor: this.labelColor || colorPalette.DEFAULT_LABEL_COLOR,
+                    domainColor: this.domainColor || colorPalette.DEFAULT_DOMAIN_COLOR
                 },
                 axisX: {
                     labelAngle: 0,
@@ -43,7 +45,7 @@ const GuxScatterPlotChart = class {
                 color: {
                     field: DEFAULT_COLOR_FIELD_NAME,
                     type: 'nominal',
-                    scale: { range: logError.VISUALIZATION_COLORS },
+                    scale: { range: colorPalette.VISUALIZATION_COLORS },
                     legend: null
                 },
                 size: {
@@ -58,6 +60,8 @@ const GuxScatterPlotChart = class {
                 }
             }
         };
+        this.labelColor = colorPalette.DEFAULT_LABEL_COLOR;
+        this.domainColor = colorPalette.DEFAULT_DOMAIN_COLOR;
         this.chartData = undefined;
         this.xTickLabelSlant = undefined;
         this.includeLegend = undefined;
@@ -128,11 +132,11 @@ const GuxScatterPlotChart = class {
         this.visualizationSpec = spec;
     }
     componentWillLoad() {
-        usage.trackComponent(this.root);
+        colorPalette.trackComponent(this.root);
         this.parseData();
     }
     render() {
-        return (index.h("gux-visualization-beta", { key: '94b4f927328d22a8764207acdd36cb8bef342ea0', visualizationSpec: this.visualizationSpec }));
+        return (index.h("gux-visualization-beta", { key: '99d30b8b621965db1bb64abc45fa8075f7f1db2f', visualizationSpec: this.visualizationSpec }));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$2 = require('./index-95713c33.js');
-const usage = require('./usage-930af94e.js');
+const colorPalette = require('./color-palette-ced3f161.js');
 
 /*!
  * https://github.com/Starcounter-Jack/JSON-Patch
@@ -67823,7 +67823,7 @@ const timeFormatLocale = {
     }
 };
 
-const guxVisualizationCss = ":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}.gux-chart-container{width:100%}";
+const guxVisualizationCss = ":host{height:fit-content}.gux-chart-container{width:100%}";
 const GuxVisualizationBetaStyle0 = guxVisualizationCss;
 
 const GuxVisualization = class {
@@ -67831,16 +67831,26 @@ const GuxVisualization = class {
         index$2.registerInstance(this, hostRef);
         this.chartComponentReady = index$2.createEvent(this, "chartComponentReady", 7);
         this.chartClicked = index$2.createEvent(this, "chartClicked", 7);
-        this.defaultVisualizationSpec = {};
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.defaultVisualizationSpec = {
+            $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+            mark: { type: 'bar' },
+            config: {
+                axis: {
+                    labelColor: colorPalette.DEFAULT_LABEL_COLOR,
+                    domainColor: colorPalette.DEFAULT_DOMAIN_COLOR
+                }
+            }
+        };
         this.defaultEmbedOptions = {
-            actions: false,
+            actions: true,
             renderer: 'svg'
         };
         this.visualizationSpec = undefined;
         this.embedOptions = undefined;
     }
     componentWillLoad() {
-        usage.trackComponent(this.root);
+        colorPalette.trackComponent(this.root);
     }
     handleChartClick(_name, value) {
         this.chartClicked.emit(value);
@@ -67871,7 +67881,7 @@ const GuxVisualization = class {
         this.chartComponentReady.emit();
     }
     render() {
-        return (index$2.h("div", { key: '43a59e2093a837bf21de943746ce5d0f93e161cc', class: "gux-chart-container", ref: el => (this.chartContainer = el) }));
+        return (index$2.h("div", { key: 'a65548cd5cfadfae0077c7126da2b79f1868981b', class: "gux-chart-container", ref: el => (this.chartContainer = el) }));
     }
     get root() { return index$2.getElement(this); }
 };

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  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);
+  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",{"labelColor":[1,"label-color"],"domainColor":[1,"domain-color"],"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",{"labelColor":[1,"label-color"],"domainColor":[1,"domain-color"],"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",{"labelColor":[1,"label-color"],"domainColor":[1,"domain-color"],"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;

package/dist/cjs/log-error-8f448752.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function logError(component, message) {
+    console.error(`[${component.tagName.toLowerCase()}] ${message}`, component);
+}
+
+exports.logError = logError;

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

@@ -1,7 +1,7 @@
 /* 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 * as VisualizationColorUtil from "../../../utils/theme/color-palette";
 import { logError } from "../../../utils/error/log-error";
 export class GuxColumnChart {
     constructor() {
@@ -12,7 +12,9 @@ export class GuxColumnChart {
             config: {
                 axis: {
                     ticks: false,
-                    titlePadding: 8
+                    titlePadding: 8,
+                    labelColor: this.labelColor || VisualizationColorUtil.DEFAULT_LABEL_COLOR,
+                    domainColor: this.domainColor || VisualizationColorUtil.DEFAULT_DOMAIN_COLOR
                 },
                 axisX: {
                     labelAngle: 0
@@ -25,7 +27,7 @@ export class GuxColumnChart {
                     symbolType: 'circle'
                 },
                 bar: {
-                    color: VISUALIZATION_COLORS[0]
+                    color: VisualizationColorUtil.VISUALIZATION_COLORS[0]
                 }
             },
             encoding: {
@@ -34,6 +36,8 @@ export class GuxColumnChart {
                 tooltip: { aggregate: 'count', type: 'quantitative' }
             }
         };
+        this.labelColor = VisualizationColorUtil.DEFAULT_LABEL_COLOR;
+        this.domainColor = VisualizationColorUtil.DEFAULT_DOMAIN_COLOR;
         this.chartData = undefined;
         this.xTickLabelSlant = undefined;
         this.includeLegend = undefined;
@@ -111,7 +115,7 @@ export class GuxColumnChart {
         // Set up colors for legend and bars
         const rangeField = xFieldName;
         const rangeConfig = {
-            [rangeField]: VISUALIZATION_COLORS
+            [rangeField]: VisualizationColorUtil.VISUALIZATION_COLORS
         };
         this.baseChartSpec.config.range = rangeConfig;
         const spec = Object.assign(this.baseChartSpec, chartData);
@@ -122,7 +126,7 @@ export class GuxColumnChart {
         this.parseData();
     }
     render() {
-        return (h("gux-visualization-beta", { key: '204c508da5ccda0059c2500fa91b06ad6ac91c2d', visualizationSpec: this.visualizationSpec }));
+        return (h("gux-visualization-beta", { key: '5bcc2fcee3bfb4905b9fdbb572593402531f960d', visualizationSpec: this.visualizationSpec }));
     }
     static get is() { return "gux-chart-column-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -138,6 +142,42 @@ export class GuxColumnChart {
     }
     static get properties() {
         return {
+            "labelColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label color"
+                },
+                "attribute": "label-color",
+                "reflect": false,
+                "defaultValue": "VisualizationColorUtil.DEFAULT_LABEL_COLOR"
+            },
+            "domainColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional domain line color"
+                },
+                "attribute": "domain-color",
+                "reflect": false,
+                "defaultValue": "VisualizationColorUtil.DEFAULT_DOMAIN_COLOR"
+            },
             "chartData": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -1,7 +1,7 @@
 /* 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 * as VisualizationColorUtil from "../../../utils/theme/color-palette";
 import { logError } from "../../../utils/error/log-error";
 const DEFAULT_COLOR_FIELD_NAME = 'category';
 export class GuxLineChart {
@@ -17,7 +17,9 @@ export class GuxLineChart {
             config: {
                 axis: {
                     ticks: false,
-                    titlePadding: 8
+                    titlePadding: 8,
+                    labelColor: this.labelColor || VisualizationColorUtil.DEFAULT_LABEL_COLOR,
+                    domainColor: this.domainColor || VisualizationColorUtil.DEFAULT_DOMAIN_COLOR
                 },
                 axisX: {
                     labelAngle: 0
@@ -32,12 +34,14 @@ export class GuxLineChart {
                 color: {
                     field: DEFAULT_COLOR_FIELD_NAME,
                     type: 'nominal',
-                    scale: { range: VISUALIZATION_COLORS },
+                    scale: { range: VisualizationColorUtil.VISUALIZATION_COLORS },
                     legend: null
                 },
                 tooltip: { aggregate: 'count', type: 'quantitative' }
             }
         };
+        this.labelColor = VisualizationColorUtil.DEFAULT_LABEL_COLOR;
+        this.domainColor = VisualizationColorUtil.DEFAULT_DOMAIN_COLOR;
         this.chartData = undefined;
         this.xTickLabelSlant = undefined;
         this.includeLegend = undefined;
@@ -117,7 +121,7 @@ export class GuxLineChart {
         this.parseData();
     }
     render() {
-        return (h("gux-visualization-beta", { key: 'd312d8b365db65c08f3631bb4976e74f7bf077ac', visualizationSpec: this.visualizationSpec }));
+        return (h("gux-visualization-beta", { key: '9a0bbdde50dc38102cff841ca0b2aa9aa47b47ff', visualizationSpec: this.visualizationSpec }));
     }
     static get is() { return "gux-chart-line-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -133,6 +137,42 @@ export class GuxLineChart {
     }
     static get properties() {
         return {
+            "labelColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label color"
+                },
+                "attribute": "label-color",
+                "reflect": false,
+                "defaultValue": "VisualizationColorUtil.DEFAULT_LABEL_COLOR"
+            },
+            "domainColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional domain line color"
+                },
+                "attribute": "domain-color",
+                "reflect": false,
+                "defaultValue": "VisualizationColorUtil.DEFAULT_DOMAIN_COLOR"
+            },
             "chartData": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -1,7 +1,7 @@
 /* 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 * as VisualizationColorUtil from "../../../utils/theme/color-palette";
 import { logError } from "../../../utils/error/log-error";
 const DEFAULT_COLOR_FIELD_NAME = 'category';
 export class GuxScatterPlotChart {
@@ -19,7 +19,9 @@ export class GuxScatterPlotChart {
                 axis: {
                     ticks: false,
                     titlePadding: 8,
-                    gridColor: '#F6F7F9'
+                    gridColor: '#F6F7F9',
+                    labelColor: this.labelColor || VisualizationColorUtil.DEFAULT_LABEL_COLOR,
+                    domainColor: this.domainColor || VisualizationColorUtil.DEFAULT_DOMAIN_COLOR
                 },
                 axisX: {
                     labelAngle: 0,
@@ -36,7 +38,7 @@ export class GuxScatterPlotChart {
                 color: {
                     field: DEFAULT_COLOR_FIELD_NAME,
                     type: 'nominal',
-                    scale: { range: VISUALIZATION_COLORS },
+                    scale: { range: VisualizationColorUtil.VISUALIZATION_COLORS },
                     legend: null
                 },
                 size: {
@@ -51,6 +53,8 @@ export class GuxScatterPlotChart {
                 }
             }
         };
+        this.labelColor = VisualizationColorUtil.DEFAULT_LABEL_COLOR;
+        this.domainColor = VisualizationColorUtil.DEFAULT_DOMAIN_COLOR;
         this.chartData = undefined;
         this.xTickLabelSlant = undefined;
         this.includeLegend = undefined;
@@ -125,7 +129,7 @@ export class GuxScatterPlotChart {
         this.parseData();
     }
     render() {
-        return (h("gux-visualization-beta", { key: '94b4f927328d22a8764207acdd36cb8bef342ea0', visualizationSpec: this.visualizationSpec }));
+        return (h("gux-visualization-beta", { key: '99d30b8b621965db1bb64abc45fa8075f7f1db2f', visualizationSpec: this.visualizationSpec }));
     }
     static get is() { return "gux-chart-scatter-plot-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -141,6 +145,42 @@ export class GuxScatterPlotChart {
     }
     static get properties() {
         return {
+            "labelColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label color"
+                },
+                "attribute": "label-color",
+                "reflect": false,
+                "defaultValue": "VisualizationColorUtil.DEFAULT_LABEL_COLOR"
+            },
+            "domainColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional domain line color"
+                },
+                "attribute": "domain-color",
+                "reflect": false,
+                "defaultValue": "VisualizationColorUtil.DEFAULT_DOMAIN_COLOR"
+            },
             "chartData": {
                 "type": "unknown",
                 "mutable": false,