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

package/dist/collection/utils/tracking/usage.spec.js

@@ -0,0 +1,121 @@
+import { trackComponent, trackAction, getVersionEvent } from "./usage";
+import packageInfo from "../../../package.json";
+const component = document.createElement('gux-button');
+const addPageAction = jest.fn();
+describe('tracking/usage', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+  beforeEach(() => {
+    addPageAction.mockClear();
+    window.newrelic = {
+      addPageAction
+    };
+    window.document.contains = jest.fn().mockReturnValue(true);
+  });
+  describe('Component usage tracking', () => {
+    test("Doesn't throw when newrelic is not present", () => {
+      window.newrelic = undefined;
+      expect(() => {
+        trackComponent(component);
+      }).not.toThrow();
+    });
+    test('Logs the library after the first component loads', () => {
+      trackComponent(component);
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledTimes(2);
+      expect(addPageAction.mock.calls[0][0]).toBe('spark-library');
+      const versionInfo = addPageAction.mock.calls[0][1];
+      expect(versionInfo.fullVersion).toBe(packageInfo.version);
+      expect(packageInfo.version.startsWith(versionInfo.majorVersion)).toBe(true);
+      expect(packageInfo.version.startsWith(versionInfo.minorVersion)).toBe(true);
+    });
+    test('Logs the tag name when a component is tracked', () => {
+      trackComponent(component);
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledWith('spark-component', {
+        component: 'gux-button',
+        version: packageInfo.version,
+        queueDepth: 0
+      });
+    });
+    test('Optionally logs a tag variant', () => {
+      trackComponent(component, { variant: 'test' });
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledWith('spark-component', {
+        component: 'gux-button',
+        version: packageInfo.version,
+        variant: 'test',
+        queueDepth: 0
+      });
+    });
+  });
+  describe('Component action tracking', () => {
+    test("Doesn't throw when newrelic is not present", () => {
+      window.newrelic = undefined;
+      expect(() => {
+        trackAction(component, 'click');
+      }).not.toThrow();
+    });
+    test('Logs the component tag and action', () => {
+      trackAction(component, 'click');
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledWith('spark-action', {
+        component: 'gux-button',
+        action: 'click',
+        queueDepth: 0
+      });
+    });
+    test('Optionally logs metadata', () => {
+      trackAction(component, 'click', { strength: 'real hard' });
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledWith('spark-action', {
+        component: 'gux-button',
+        action: 'click',
+        strength: 'real hard',
+        queueDepth: 0
+      });
+    });
+  });
+});
+describe('getVersionObject', () => {
+  [
+    {
+      packageLockVersion: '0.0.1',
+      expectedVersionObject: {
+        fullVersion: '0.0.1',
+        majorVersion: '0',
+        minorVersion: '0.0'
+      }
+    },
+    {
+      packageLockVersion: '0.1.1',
+      expectedVersionObject: {
+        fullVersion: '0.1.1',
+        majorVersion: '0',
+        minorVersion: '0.1'
+      }
+    },
+    {
+      packageLockVersion: '1.1.1',
+      expectedVersionObject: {
+        fullVersion: '1.1.1',
+        majorVersion: '1',
+        minorVersion: '1.1'
+      }
+    },
+    {
+      packageLockVersion: '2.0.0-alpha.0',
+      expectedVersionObject: {
+        fullVersion: '2.0.0-alpha.0',
+        majorVersion: '2',
+        minorVersion: '2.0'
+      }
+    }
+  ].forEach(({ packageLockVersion, expectedVersionObject }, index) => {
+    it(`should return expected versionObject (${index + 1})`, async () => {
+      const versionEvent = getVersionEvent(packageLockVersion);
+      expect(versionEvent.metadata).toEqual(expectedVersionObject);
+    });
+  });
+});

package/dist/component-specs.json

@@ -0,0 +1,187 @@
+{
+  "gux-visualization": {
+    "beta": true,
+    "attributes": {
+      "--": [
+        "GenericConcatSpec<NonNormalizedSpec> & TopLevelProperties<ExprRef",
+        "SignalRef> & { $schema?: string; config?: Config<ExprRef",
+        "SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; }",
+        "GenericFacetSpec<UnitSpecWithFrame<Field>, LayerSpec<Field>, Field> & TopLevelProperties<ExprRef",
+        "SignalRef> & { $schema?: string; config?: Config<ExprRef",
+        "SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } & DataMixins",
+        "GenericHConcatSpec<NonNormalizedSpec> & TopLevelProperties<ExprRef",
+        "SignalRef> & { $schema?: string; config?: Config<ExprRef",
+        "SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; }",
+        "GenericUnitSpec<FacetedCompositeEncoding<Field>, AnyMark, TopLevelParameter> & ResolveMixins & GenericCompositionLayout & FrameMixins<ExprRef",
+        "SignalRef> & TopLevelProperties<ExprRef",
+        "SignalRef> & { $schema?: string; config?: Config<ExprRef",
+        "SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; } & DataMixins",
+        "GenericVConcatSpec<NonNormalizedSpec> & TopLevelProperties<ExprRef",
+        "SignalRef> & { $schema?: string; config?: Config<ExprRef",
+        "SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; }",
+        "LayerRepeatSpec & TopLevelProperties<ExprRef",
+        "SignalRef> & { $schema?: string; config?: Config<ExprRef",
+        "SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; }",
+        "LayerSpec<Field> & TopLevelProperties<ExprRef",
+        "SignalRef> & { $schema?: string; config?: Config<ExprRef",
+        "SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; }",
+        "NonLayerRepeatSpec & TopLevelProperties<ExprRef",
+        "SignalRef> & { $schema?: string; config?: Config<ExprRef",
+        "SignalRef>; datasets?: Datasets; usermeta?: Dict<unknown>; }",
+        "Spec"
+      ]
+    },
+    "events": {
+      "chartClicked": "",
+      "chartComponentReady": ""
+    }
+  },
+  "gux-chart-scatter-plot": {
+    "beta": true,
+    "attributes": {
+      "--": [
+        "EmbedOptions<string, Renderers>"
+      ],
+      "color-field-name": "text",
+      "include-legend": "checkbox",
+      "legend-position": [
+        "bottom",
+        "bottom-left",
+        "bottom-right",
+        "left",
+        "none",
+        "right",
+        "top",
+        "top-left",
+        "top-right"
+      ],
+      "legend-title": "text",
+      "use-shape": "text",
+      "x-axis-title": "text",
+      "x-field-name": "text",
+      "x-tick-label-slant": "checkbox",
+      "y-axis-title": "text",
+      "y-field-name": "text"
+    },
+    "events": []
+  },
+  "gux-chart-pie": {
+    "beta": true,
+    "attributes": {
+      "--": [
+        "EmbedOptions<string, Renderers>"
+      ],
+      "color-field-name": "text",
+      "include-legend": "checkbox",
+      "label-field": "text",
+      "label-radius": "text",
+      "legend-position": [
+        "bottom",
+        "bottom-left",
+        "bottom-right",
+        "left",
+        "none",
+        "right",
+        "top",
+        "top-left",
+        "top-right"
+      ],
+      "legend-title": "text",
+      "outer-radius": "text"
+    },
+    "events": []
+  },
+  "gux-chart-line": {
+    "beta": true,
+    "attributes": {
+      "--": [
+        "EmbedOptions<string, Renderers>"
+      ],
+      "color-field-name": "text",
+      "include-data-point-markers": "checkbox",
+      "include-legend": "checkbox",
+      "interpolation": "text",
+      "legend-position": [
+        "bottom",
+        "bottom-left",
+        "bottom-right",
+        "left",
+        "none",
+        "right",
+        "top",
+        "top-left",
+        "top-right"
+      ],
+      "legend-title": "text",
+      "stroke-dash": "checkbox",
+      "x-axis-title": "text",
+      "x-field-name": "text",
+      "x-tick-label-slant": "checkbox",
+      "y-axis-title": "text",
+      "y-field-name": "text"
+    },
+    "events": []
+  },
+  "gux-chart-donut": {
+    "beta": true,
+    "attributes": {
+      "center-sub-text": "text",
+      "center-text": "text",
+      "--": [
+        "EmbedOptions<string, Renderers>"
+      ],
+      "color-field-name": "text",
+      "gauge": "checkbox",
+      "include-legend": "checkbox",
+      "inner-radius": "text",
+      "label-field": "text",
+      "label-radius": "text",
+      "legend-font-size": "text",
+      "legend-position": [
+        "bottom",
+        "bottom-left",
+        "bottom-right",
+        "left",
+        "none",
+        "right",
+        "top",
+        "top-left",
+        "top-right"
+      ],
+      "legend-symbol-size": "text",
+      "legend-title": "text",
+      "legend-x": "text",
+      "legend-y": "text",
+      "outer-radius": "text",
+      "show-tooltip": "checkbox"
+    },
+    "events": []
+  },
+  "gux-chart-column": {
+    "beta": true,
+    "attributes": {
+      "--": [
+        "EmbedOptions<string, Renderers>"
+      ],
+      "include-legend": "checkbox",
+      "legend-position": [
+        "bottom",
+        "bottom-left",
+        "bottom-right",
+        "left",
+        "none",
+        "right",
+        "top",
+        "top-left",
+        "top-right"
+      ],
+      "legend-title": "text",
+      "x-axis-title": "text",
+      "x-field-name": "text",
+      "x-tick-label-slant": "checkbox",
+      "y-axis-title": "text",
+      "y-field-name": "text"
+    },
+    "events": []
+  }
+}

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

@@ -0,0 +1,18 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-701d93cf.js';
+export { s as setNonce } from './index-701d93cf.js';
+
+/*
+ Stencil Client Patch Browser v4.5.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = import.meta.url;
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return bootstrapLazy([["gux-visualization-beta",[[1,"gux-visualization-beta",{"visualizationSpec":[16],"embedOptions":[16]}]]],["gux-chart-column-beta",[[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",[[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",[[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",[[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",[[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);
+});

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

@@ -0,0 +1,136 @@
+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';
+
+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) {
+    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;
+    }
+    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]: 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"]
+  }; }
+};
+GuxColumnChart.style = guxChartColumnCss;
+
+export { GuxColumnChart as gux_chart_column_beta };

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

@@ -0,0 +1,225 @@
+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';
+
+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) {
+    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: 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(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() {
+    trackComponent(this.root);
+    this.parseData();
+  }
+  render() {
+    return (h("gux-visualization-beta", { visualizationSpec: this.visualizationSpec, embedOptions: this.tooltipSpec }));
+  }
+  get root() { return getElement(this); }
+  static get watchers() { return {
+    "chartData": ["parseData"]
+  }; }
+};
+GuxDonutChart.style = guxChartDonutCss;
+
+export { GuxDonutChart as gux_chart_donut_beta };