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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Genesys Cloud Services, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Genesys Spark Chart Components

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e13a15f.js');
+
+/*
+ Stencil Client Patch Browser v4.5.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('genesys-chart-webcomponents.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(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",{"chartData":[16],"xTickLabelSlant":[4,"x-tick-label-slant"],"includeLegend":[4,"include-legend"],"xFieldName":[1,"x-field-name"],"yFieldName":[1,"y-field-name"],"xAxisTitle":[1,"x-axis-title"],"yAxisTitle":[1,"y-axis-title"],"legendTitle":[1,"legend-title"],"legendPosition":[1,"legend-position"],"chartLayers":[16],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-donut-beta.cjs",[[1,"gux-chart-donut-beta",{"chartData":[16],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"outerRadius":[2,"outer-radius"],"innerRadius":[2,"inner-radius"],"labelRadius":[2,"label-radius"],"labelField":[1,"label-field"],"gauge":[4],"centerText":[1,"center-text"],"centerSubText":[1,"center-sub-text"],"showTooltip":[4,"show-tooltip"],"tooltipOptions":[16],"legendX":[2,"legend-x"],"legendY":[2,"legend-y"],"legendFontSize":[2,"legend-font-size"],"legendSymbolSize":[2,"legend-symbol-size"],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-line-beta.cjs",[[1,"gux-chart-line-beta",{"chartData":[16],"xTickLabelSlant":[4,"x-tick-label-slant"],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"includeDataPointMarkers":[4,"include-data-point-markers"],"xFieldName":[1,"x-field-name"],"xAxisTitle":[1,"x-axis-title"],"yFieldName":[1,"y-field-name"],"yAxisTitle":[1,"y-axis-title"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"strokeDash":[4,"stroke-dash"],"interpolation":[1],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-pie-beta.cjs",[[1,"gux-chart-pie-beta",{"chartData":[16],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"outerRadius":[2,"outer-radius"],"labelRadius":[2,"label-radius"],"labelField":[1,"label-field"],"embedOptions":[16]},null,{"chartData":["parseData"]}]]],["gux-chart-scatter-plot-beta.cjs",[[1,"gux-chart-scatter-plot-beta",{"chartData":[16],"xTickLabelSlant":[4,"x-tick-label-slant"],"includeLegend":[4,"include-legend"],"legendPosition":[1,"legend-position"],"xFieldName":[1,"x-field-name"],"xAxisTitle":[1,"x-axis-title"],"yFieldName":[1,"y-field-name"],"yAxisTitle":[1,"y-axis-title"],"legendTitle":[1,"legend-title"],"colorFieldName":[1,"color-field-name"],"useShape":[1,"use-shape"],"embedOptions":[16]},null,{"chartData":["parseData"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

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

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e13a15f.js');
+const usage = require('./usage-30f04ec3.js');
+const logError = require('./log-error-c46b4b4c.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 GuxColumnChart = class {
+  constructor(hostRef) {
+    index.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: logError.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.logError(this.root, 'requires x-field-name and y-field-name');
+    }
+    let chartData = {};
+    if (this.chartData) {
+      chartData = { data: this.chartData };
+    }
+    if (this.xTickLabelSlant) {
+      this.baseChartSpec.config.axisX.labelAngle = 45;
+    }
+    if (this.includeLegend) {
+      this.baseChartSpec.encoding.color = { field: 'category' };
+    }
+    if (this.legendPosition) {
+      this.baseChartSpec.config.legend.orient = this.legendPosition;
+    }
+    const xFieldName = this.xFieldName;
+    const yFieldName = this.yFieldName;
+    const xAxisTitle = this.xAxisTitle;
+    const yAxisTitle = this.yAxisTitle;
+    const legendTitle = this.legendTitle;
+    if (this.chartLayers) {
+      const layers = this.chartLayers.map(layerName => {
+        return {
+          mark: 'bar',
+          transform: [
+            {
+              filter: { field: 'series', equal: layerName }
+            }
+          ],
+          encoding: {
+            x: {
+              field: xFieldName,
+              type: 'nominal'
+            },
+            y: {
+              field: yFieldName,
+              type: 'quantitative'
+            }
+          }
+        };
+      });
+      this.baseChartSpec.layer = layers;
+    }
+    else {
+      if (xFieldName) {
+        this.baseChartSpec.encoding.x.field = xFieldName;
+      }
+      if (yFieldName) {
+        this.baseChartSpec.encoding.y.field = yFieldName;
+      }
+      if (xAxisTitle) {
+        this.baseChartSpec.encoding.x.title = xAxisTitle;
+      }
+      if (yAxisTitle) {
+        this.baseChartSpec.encoding.y.title = yAxisTitle;
+      }
+      if (legendTitle) {
+        this.baseChartSpec.encoding.color.title = legendTitle;
+      }
+    }
+    // Set up colors for legend and bars
+    const rangeField = xFieldName;
+    const rangeConfig = {
+      [rangeField]: logError.VISUALIZATION_COLORS
+    };
+    this.baseChartSpec.config.range = rangeConfig;
+    const spec = Object.assign(this.baseChartSpec, chartData);
+    this.visualizationSpec = spec;
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.parseData();
+  }
+  render() {
+    return (index.h("gux-visualization-beta", { visualizationSpec: this.visualizationSpec }));
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "chartData": ["parseData"]
+  }; }
+};
+GuxColumnChart.style = guxChartColumnCss;
+
+exports.gux_chart_column_beta = GuxColumnChart;

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

@@ -0,0 +1,229 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e13a15f.js');
+const usage = require('./usage-30f04ec3.js');
+const logError = require('./log-error-c46b4b4c.js');
+
+const guxChartDonutCss = "gux-visualization-beta{height:fit-content;color:#2e394c}";
+
+const DEFAULT_COLOR_FIELD_NAME = 'category';
+const DEFAULT_LABEL_FIELD_NAME = 'value';
+const DEFAULT_RING_WIDTH = 32;
+const GuxDonutChart = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.baseChartSpec = {
+      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+      config: {
+        legend: {
+          symbolType: 'circle'
+        }
+      },
+      encoding: {
+        theta: { field: 'value', type: 'quantitative', stack: true },
+        color: {
+          field: DEFAULT_COLOR_FIELD_NAME,
+          type: 'nominal',
+          scale: { range: logError.VISUALIZATION_COLORS },
+          legend: null
+        }
+      },
+      layer: [
+        {
+          mark: { type: 'arc', outerRadius: 80 }
+        },
+        {
+          mark: { type: 'text', radius: 90 },
+          encoding: {
+            text: { field: DEFAULT_LABEL_FIELD_NAME, type: 'quantitative' }
+          }
+        }
+      ],
+      view: { stroke: null }
+    };
+    this.chartData = undefined;
+    this.includeLegend = undefined;
+    this.legendPosition = 'right';
+    this.legendTitle = undefined;
+    this.colorFieldName = undefined;
+    this.outerRadius = undefined;
+    this.innerRadius = undefined;
+    this.labelRadius = undefined;
+    this.labelField = undefined;
+    this.gauge = undefined;
+    this.centerText = undefined;
+    this.centerSubText = undefined;
+    this.showTooltip = true;
+    this.tooltipOptions = undefined;
+    this.legendX = undefined;
+    this.legendY = undefined;
+    this.legendFontSize = undefined;
+    this.legendSymbolSize = undefined;
+    this.embedOptions = undefined;
+  }
+  parseData() {
+    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 };
+    }
+    if (this.legendPosition) {
+      this.baseChartSpec.config.legend.orient = this.legendPosition;
+    }
+    if (this.includeLegend) {
+      this.baseChartSpec.encoding.color.legend = {};
+      if (this.legendX || this.legendY) {
+        this.baseChartSpec.config.legend.orient = 'none';
+        if (this.legendX) {
+          this.baseChartSpec.encoding.color.legend.legendX = this.legendX;
+        }
+        if (this.legendY) {
+          this.baseChartSpec.encoding.color.legend.legendY = this.legendY;
+        }
+      }
+      if (this.legendFontSize) {
+        this.baseChartSpec.encoding.color.legend.labelFontSize =
+          this.legendFontSize;
+      }
+      if (this.legendSymbolSize) {
+        this.baseChartSpec.encoding.color.legend.symbolSize =
+          this.legendSymbolSize;
+      }
+    }
+    else {
+      this.baseChartSpec.encoding.color.legend = null;
+    }
+    const colorFieldName = this.colorFieldName || DEFAULT_COLOR_FIELD_NAME;
+    if (colorFieldName) {
+      this.baseChartSpec.encoding.color.field = colorFieldName;
+    }
+    const legendTitle = this.legendTitle;
+    if (legendTitle) {
+      this.baseChartSpec.encoding.color.title = legendTitle;
+    }
+    else {
+      this.baseChartSpec.encoding.color.title = '';
+    }
+    let outerRadius = this.outerRadius;
+    let innerRadius = this.innerRadius;
+    if (!outerRadius) {
+      outerRadius = innerRadius + DEFAULT_RING_WIDTH;
+    }
+    if (!innerRadius) {
+      innerRadius = outerRadius - DEFAULT_RING_WIDTH;
+    }
+    let layerFiels = 1;
+    if (this.gauge) {
+      this.baseChartSpec.layer = [
+        {
+          data: { values: [{ progress: 'default', value: 100 }] },
+          mark: { type: 'arc', innerRadius },
+          encoding: {
+            theta: { field: 'value', type: 'quantitative' },
+            color: { value: '#E4E9F0' },
+            tooltip: null
+          }
+        },
+        {
+          mark: { type: 'arc', outerRadius, innerRadius, padAngle: 0.01 }
+        },
+        {
+          mark: { type: 'arc', innerRadius, padAngle: 0.01 }
+        }
+      ];
+      layerFiels = 2;
+    }
+    else {
+      this.baseChartSpec.layer = [
+        {
+          mark: { type: 'arc', outerRadius, innerRadius }
+        },
+        {
+          mark: { type: 'arc', innerRadius, stroke: '#fff' }
+        }
+      ];
+    }
+    const centerText = this.centerText;
+    if (centerText) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.baseChartSpec.layer.push({
+        data: { values: [{ centerText: centerText, value: 0 }] },
+        mark: { align: 'center', type: 'text', baseline: 'middle' },
+        encoding: {
+          color: { value: '#4C5054' },
+          text: { field: 'centerText' },
+          size: { value: { expr: 'height * 0.09' } },
+          tooltip: null
+        }
+      });
+    }
+    const centerSubText = this.centerSubText;
+    if (centerSubText) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.baseChartSpec.layer.push({
+        data: { values: [{ centerSubText: centerSubText, value: 0 }] },
+        mark: {
+          align: 'center',
+          type: 'text',
+          baseline: 'middle',
+          y: { expr: 'height/2 + 20' }
+        },
+        encoding: {
+          color: { value: '#6A6D70' },
+          text: { field: 'centerSubText' },
+          size: { value: { expr: 'height * 0.06' } },
+          tooltip: null
+        }
+      });
+    }
+    const labelRadius = this.labelRadius;
+    const labelField = this.labelField || DEFAULT_LABEL_FIELD_NAME;
+    if (labelRadius) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.baseChartSpec.layer.push({
+        mark: { type: 'text', radius: labelRadius },
+        encoding: {
+          text: { field: labelField, type: 'quantitative' }
+        }
+      });
+    }
+    if (this.showTooltip) {
+      if (this.tooltipOptions) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        this.baseChartSpec.layer[layerFiels].mark.tooltip = { content: 'data' };
+        this.tooltipSpec = {
+          actions: false,
+          tooltip: this.tooltipOptions
+        };
+      }
+      else {
+        this.baseChartSpec.encoding.tooltip = {
+          field: labelField,
+          aggregate: 'count',
+          type: 'quantitative'
+        };
+      }
+    }
+    const spec = Object.assign(this.baseChartSpec, chartData);
+    this.visualizationSpec = spec;
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.parseData();
+  }
+  render() {
+    return (index.h("gux-visualization-beta", { visualizationSpec: this.visualizationSpec, embedOptions: this.tooltipSpec }));
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "chartData": ["parseData"]
+  }; }
+};
+GuxDonutChart.style = guxChartDonutCss;
+
+exports.gux_chart_donut_beta = GuxDonutChart;

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

@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e13a15f.js');
+const usage = require('./usage-30f04ec3.js');
+const logError = require('./log-error-c46b4b4c.js');
+
+const guxChartLineCss = "gux-visualization-beta{height:fit-content;color:#2e394c}";
+
+const DEFAULT_COLOR_FIELD_NAME = 'category';
+const GuxLineChart = class {
+  constructor(hostRef) {
+    index.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: '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: logError.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.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() {
+    usage.trackComponent(this.root);
+    this.parseData();
+  }
+  render() {
+    return (index.h("gux-visualization-beta", { visualizationSpec: this.visualizationSpec }));
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "chartData": ["parseData"]
+  }; }
+};
+GuxLineChart.style = guxChartLineCss;
+
+exports.gux_chart_line_beta = GuxLineChart;

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

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e13a15f.js');
+const usage = require('./usage-30f04ec3.js');
+const logError = require('./log-error-c46b4b4c.js');
+
+const guxChartPieCss = "gux-visualization-beta{height:fit-content;color:#2e394c}";
+
+const DEFAULT_COLOR_FIELD_NAME = 'category';
+const DEFAULT_LABEL_FIELD_NAME = 'value';
+const GuxPieChart = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.baseChartSpec = {
+      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+      config: {
+        legend: {
+          symbolType: 'circle'
+        }
+      },
+      encoding: {
+        theta: { field: 'value', type: 'quantitative', stack: true },
+        color: {
+          field: DEFAULT_COLOR_FIELD_NAME,
+          type: 'nominal',
+          scale: { range: logError.VISUALIZATION_COLORS },
+          legend: null
+        },
+        tooltip: { aggregate: 'count', type: 'quantitative' }
+      },
+      layer: [
+        {
+          mark: { type: 'arc', outerRadius: 80 }
+        },
+        {
+          mark: { type: 'text', radius: 90 },
+          encoding: {
+            text: { field: DEFAULT_LABEL_FIELD_NAME, type: 'quantitative' }
+          }
+        }
+      ],
+      view: { stroke: null }
+    };
+    this.chartData = undefined;
+    this.includeLegend = undefined;
+    this.legendPosition = 'right';
+    this.legendTitle = undefined;
+    this.colorFieldName = undefined;
+    this.outerRadius = undefined;
+    this.labelRadius = undefined;
+    this.labelField = undefined;
+    this.embedOptions = undefined;
+  }
+  parseData() {
+    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;
+    }
+    if (this.legendPosition) {
+      this.baseChartSpec.config.legend.orient = this.legendPosition;
+    }
+    const colorFieldName = this.colorFieldName || DEFAULT_COLOR_FIELD_NAME;
+    if (colorFieldName) {
+      this.baseChartSpec.encoding.color.field = colorFieldName;
+    }
+    const legendTitle = this.legendTitle;
+    if (legendTitle) {
+      this.baseChartSpec.encoding.color.title = legendTitle;
+    }
+    const outerRadius = this.outerRadius;
+    this.baseChartSpec.layer = [
+      {
+        mark: { type: 'arc', outerRadius }
+      }
+    ];
+    const labelRadius = this.labelRadius;
+    const labelField = this.labelField || DEFAULT_LABEL_FIELD_NAME;
+    if (labelRadius) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.baseChartSpec.layer.push({
+        mark: { type: 'text', radius: labelRadius },
+        encoding: {
+          text: { field: labelField, type: 'quantitative' }
+        }
+      });
+    }
+    const spec = Object.assign(this.baseChartSpec, chartData);
+    this.visualizationSpec = spec;
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.parseData();
+  }
+  render() {
+    return (index.h("gux-visualization-beta", { visualizationSpec: this.visualizationSpec }));
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "chartData": ["parseData"]
+  }; }
+};
+GuxPieChart.style = guxChartPieCss;
+
+exports.gux_chart_pie_beta = GuxPieChart;