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

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

@@ -0,0 +1,131 @@
+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 guxChartLineCss = "gux-visualization-beta{height:fit-content;color:#2e394c}";
+
+const DEFAULT_COLOR_FIELD_NAME = 'category';
+const GuxLineChart = 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: '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: 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(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() {
+    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"]
+  }; }
+};
+GuxLineChart.style = guxChartLineCss;
+
+export { GuxLineChart as gux_chart_line_beta };

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

@@ -0,0 +1,109 @@
+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 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) {
+    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
+        },
+        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(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() {
+    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"]
+  }; }
+};
+GuxPieChart.style = guxChartPieCss;
+
+export { GuxPieChart as gux_chart_pie_beta };

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

@@ -0,0 +1,139 @@
+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 guxChartScatterPlotCss = "gux-visualization-beta{height:fit-content;color:#2e394c}";
+
+const DEFAULT_COLOR_FIELD_NAME = 'category';
+const GuxScatterPlotChart = 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',
+      params: [
+        {
+          name: 'onHover',
+          select: { type: 'point', on: 'mouseover' }
+        }
+      ],
+      config: {
+        axis: {
+          ticks: false,
+          titlePadding: 8,
+          gridColor: '#F6F7F9'
+        },
+        axisX: {
+          labelAngle: 0,
+          grid: true
+        },
+        legend: {
+          symbolType: 'circle'
+        }
+      },
+      width: { step: 40 },
+      encoding: {
+        x: { type: 'nominal' },
+        y: { type: 'quantitative' },
+        color: {
+          field: DEFAULT_COLOR_FIELD_NAME,
+          type: 'nominal',
+          scale: { range: VISUALIZATION_COLORS },
+          legend: null
+        },
+        size: {
+          condition: [
+            {
+              param: 'onHover',
+              empty: false,
+              value: 100
+            }
+          ],
+          value: 40
+        }
+      }
+    };
+    this.chartData = undefined;
+    this.xTickLabelSlant = undefined;
+    this.includeLegend = undefined;
+    this.legendPosition = 'right';
+    this.xFieldName = undefined;
+    this.xAxisTitle = undefined;
+    this.yFieldName = undefined;
+    this.yAxisTitle = undefined;
+    this.legendTitle = undefined;
+    this.colorFieldName = undefined;
+    this.useShape = 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.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 useShape = this.useShape || 'circle';
+    const colorFieldName = this.colorFieldName || DEFAULT_COLOR_FIELD_NAME;
+    if (this.includeLegend) {
+      this.baseChartSpec.encoding.color.legend = true;
+    }
+    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;
+    }
+    this.baseChartSpec.mark = { type: useShape, filled: true };
+    this.baseChartSpec.config.legend.symbolType = useShape;
+    this.baseChartSpec.encoding.shape = {
+      field: colorFieldName,
+      type: 'nominal'
+    };
+    this.baseChartSpec.encoding.tooltip = [
+      { field: xFieldName, type: 'nominal', title: xAxisTitle },
+      { field: yFieldName, type: 'quantitative', title: yAxisTitle },
+      { field: colorFieldName, type: 'nominal', title: legendTitle }
+    ];
+    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"]
+  }; }
+};
+GuxScatterPlotChart.style = guxChartScatterPlotCss;
+
+export { GuxScatterPlotChart as gux_chart_scatter_plot_beta };