genesys-spark-chart-components 4.12.1-beta.1 → 4.29.1-beta.0

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

@@ -1,136 +1,137 @@
-import { r as registerInstance, h, g as getElement } from './index-701d93cf.js';
-import { t as trackComponent } from './usage-61eee3bd.js';
-import { V as VISUALIZATION_COLORS, l as logError } from './log-error-0fc61f6f.js';
+import { r as registerInstance, h, g as getElement } from './index-82fd7406.js';
+import { t as trackComponent } from './usage-6655c04e.js';
+import { V as VISUALIZATION_COLORS, l as logError } from './log-error-ff9bdda4.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;
 
 const GuxColumnChart = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    // 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;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // 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, // padding between columns / bars
+                    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;
     }
-    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 }
+    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;
             }
-          ],
-          encoding: {
-            x: {
-              field: xFieldName,
-              type: 'nominal'
-            },
-            y: {
-              field: yFieldName,
-              type: 'quantitative'
+            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.layer = layers;
+        this.baseChartSpec.config.range = rangeConfig;
+        const spec = Object.assign(this.baseChartSpec, chartData);
+        this.visualizationSpec = spec;
+    }
+    componentWillLoad() {
+        trackComponent(this.root);
+        this.parseData();
     }
-    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;
-      }
+    render() {
+        return (h("gux-visualization-beta", { key: '204c508da5ccda0059c2500fa91b06ad6ac91c2d', visualizationSpec: this.visualizationSpec }));
     }
-    // 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 }));
-  }
-  get root() { return getElement(this); }
-  static get watchers() { return {
-    "chartData": ["parseData"]
-  }; }
+    get root() { return getElement(this); }
+    static get watchers() { return {
+        "chartData": ["parseData"]
+    }; }
 };
-GuxColumnChart.style = guxChartColumnCss;
+GuxColumnChart.style = GuxChartColumnBetaStyle0;
 
 export { GuxColumnChart as gux_chart_column_beta };