@vizzly/dashboard 0.14.4-dev-dacb7b6ee19300aa636d654c99f13d6ac43da830 → 0.14.4-dev-470d6f9c95d1b6422dbe1be22378ce12cdf6580a

package/dist/dashboard.cjs.development.js

@@ -57,6 +57,7 @@ var windowSize = require('@react-hook/window-size');
 var copy = _interopDefault(require('copy-to-clipboard'));
 var html2canvas = _interopDefault(require('html2canvas'));
 var jsPDF = _interopDefault(require('jspdf'));
+var BubbleChart$3 = require('./charts/src/BubbleChart');
 var clipPath = require('@visx/clip-path');
 var event = require('@visx/event');
 var d3Array = require('@visx/vendor/d3-array');
@@ -8171,7 +8172,7 @@ var RichText = function RichText(config) {
   };
 };
 
-var componentTypes = ['areaChart', 'barChart', 'basicTable', 'comboChart', 'custom', 'dataTable', 'funnelChart', 'horizontalBarChart', 'lineChart', 'lineChartV2', 'barChartV2', 'mercatorMap', 'pieChart', 'progress', 'richText', 'scatterChart', 'singleStat', 'waterfallChart'];
+var componentTypes = ['areaChart', 'barChart', 'basicTable', 'bubbleChart', 'comboChart', 'custom', 'dataTable', 'funnelChart', 'horizontalBarChart', 'lineChart', 'lineChartV2', 'barChartV2', 'mercatorMap', 'pieChart', 'progress', 'richText', 'scatterChart', 'singleStat', 'waterfallChart'];
 /** @deprecated */
 
 var ProgressType = /*#__PURE__*/function (ProgressType) {
@@ -8939,6 +8940,405 @@ function isStatsLabels(panel) {
 }
 
 var attributesSchema$e = function attributesSchema(config) {
+  return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), {
+    xMeasure: measureSchema(config.queryEngineConfig.supportedAggregates, config.attributesSchemaOptions).allow(null),
+    yMeasure: measureSchema(config.queryEngineConfig.supportedAggregates, config.attributesSchemaOptions).allow(null),
+    zMeasure: measureSchema(config.queryEngineConfig.supportedAggregates, config.attributesSchemaOptions).allow(null),
+    dimension: dimensionSchema(config.queryEngineConfig.supportedTimeTruncFunctions, config.attributesSchemaOptions),
+    order: Joi.array().items(orderSchema(config.queryEngineConfig)),
+    limit: queryAttributesLimit(),
+    legend: Joi.valid(true, false),
+    offset: Joi.number().min(0),
+    filter: queryAttributesFilter(config.queryEngineConfig),
+    type: Joi.valid('bubbleChart').required(),
+    timeDimension: Joi.valid(null),
+    xAxisPrefix: Joi.string().allow(''),
+    yAxisPrefix: Joi.string().allow(''),
+    xAxisPostfix: Joi.string().allow(''),
+    yAxisPostfix: Joi.string().allow(''),
+    yAxisFormat: Joi.alternatives(Joi.string(), Joi.valid(null)),
+    xAxisFormat: Joi.alternatives(Joi.string(), Joi.valid(null)),
+    approxYAxisLabelCount: approxAxisLabelCountSchema,
+    approxXAxisLabelCount: approxAxisLabelCountSchema,
+    goalLines: goalLinesSchema(),
+    axisTitles: axisTitleSchema(),
+    tags: tagsSchema()
+  }));
+};
+
+var setAttributes$d = (function (config) {
+  return function (bubbleChart, partial) {
+    var newAttributes = setAttributes(bubbleChart, partial, attributesSchema$e(config));
+    console.log(newAttributes, 'HERE');
+    var allowedOrderSpec = [];
+    if (newAttributes.xMeasure) {
+      allowedOrderSpec.push(newAttributes.xMeasure);
+    }
+    if (newAttributes.yMeasure) {
+      allowedOrderSpec.push(newAttributes.yMeasure);
+    }
+    if (newAttributes.zMeasure) {
+      allowedOrderSpec.push(newAttributes.zMeasure);
+    }
+
+    // Add dimension fields as valid to keep in order
+    newAttributes.dimension.forEach(function (dimension) {
+      allowedOrderSpec.push({
+        field: dimension.field,
+        "function": dimension["function"]
+      });
+    });
+    newAttributes = trimFieldsInOrder(newAttributes, allowedOrderSpec);
+    return newAttributes;
+  };
+});
+
+var CONSTANTS$g = {
+  title: 'Bubble chart',
+  description: 'Displays data points on a Cartesian plane, with a third metric corresponding to bubble size.',
+  namespace: 'bubble_chart',
+  data_panel: {
+    data_set: {
+      type: 'dataSet',
+      title: 'Data set',
+      description: 'What data do you want to use in this bubble chart?'
+    },
+    views: {
+      type: 'views',
+      title: 'View',
+      description: ''
+    },
+    labelled_metrics: {
+      type: 'labelledMetrics',
+      title: 'Metric - Y Axis',
+      description: '',
+      subSectionDefinition: {
+        xAxis: {
+          type: 'metrics',
+          title: 'X axis',
+          namespace: 'metrics.xAxis'
+        },
+        yAxis: {
+          type: 'metrics',
+          title: 'Y axis',
+          namespace: 'metrics.yAxis'
+        },
+        zAxis: {
+          type: 'metrics',
+          title: 'Metric - Bubble Size',
+          namespace: 'metrics.zAxis'
+        }
+      }
+    },
+    field_grouping: {
+      type: 'fieldCollector',
+      title: 'Grouping',
+      description: 'What do you want each bubble to represent?',
+      callToAction: 'Add comparison'
+    },
+    filter: {
+      type: 'filter',
+      title: 'Filters',
+      description: 'Only include the information you want in this bubble chart.'
+    },
+    custom_metrics: {
+      type: 'customMetrics',
+      title: 'Custom metrics',
+      description: 'Build your own metrics, such as a percentage.'
+    },
+    limit: {
+      type: 'limit',
+      title: 'Limit',
+      description: 'Limit the number of data points shown on this bubble chart.'
+    }
+  },
+  format_panel: {
+    heading: {
+      type: 'heading',
+      title: 'Heading',
+      description: '',
+      subSectionDefinition: {
+        title: {
+          type: 'title',
+          title: 'Title',
+          description: '',
+          namespace: 'title'
+        },
+        subject: {
+          title: 'Subject',
+          type: 'subject',
+          description: '',
+          namespace: 'subject'
+        }
+      }
+    },
+    chart_styles: {
+      type: 'chartStyles',
+      title: 'Chart Settings',
+      description: '',
+      subSectionDefinition: {
+        legend: {
+          type: 'legend',
+          title: 'Show Legend',
+          description: '',
+          namespace: 'legend'
+        }
+      }
+    },
+    axis_labels: {
+      type: 'axisLabels',
+      title: 'Axis Preferences',
+      description: '',
+      subSectionDefinition: {
+        x: {
+          title: 'X Axis',
+          description: '',
+          namespace: 'x'
+        },
+        'x.prefix': {
+          title: 'Prefix',
+          description: '',
+          namespace: 'x.prefix'
+        },
+        'x.postfix': {
+          title: 'Postfix',
+          description: '',
+          namespace: 'x.postfix'
+        },
+        'x.format': {
+          title: 'Format',
+          description: '',
+          namespace: 'x.format'
+        },
+        'x.count': {
+          title: 'Label count',
+          description: '',
+          namespace: 'x.count'
+        },
+        'x.axis_title': {
+          title: 'Title',
+          description: '',
+          namespace: 'x.axis_title'
+        },
+        y: {
+          title: 'Y Axis',
+          description: '',
+          namespace: 'y'
+        },
+        'y.prefix': {
+          title: 'Prefix',
+          description: '',
+          namespace: 'y.prefix'
+        },
+        'y.postfix': {
+          title: 'Postfix',
+          description: '',
+          namespace: 'y.postfix'
+        },
+        'y.format': {
+          title: 'Format',
+          description: '',
+          namespace: 'y.format'
+        },
+        'y.count': {
+          title: 'Label count',
+          description: '',
+          namespace: 'y.count'
+        },
+        'y.axis_title': {
+          title: 'Title',
+          description: '',
+          namespace: 'y.axis_title'
+        },
+        z: {
+          title: 'Metric - Bubble Size',
+          description: '',
+          namespace: 'z'
+        },
+        'z.prefix': {
+          title: 'Prefix',
+          description: '',
+          namespace: 'z.prefix'
+        },
+        'z.postfix': {
+          title: 'Postfix',
+          description: '',
+          namespace: 'z.postfix'
+        },
+        'z.format': {
+          title: 'Format',
+          description: '',
+          namespace: 'z.format'
+        },
+        'z.count': {
+          title: 'Label count',
+          description: '',
+          namespace: 'z.count'
+        },
+        'z.axis_title': {
+          title: 'Title',
+          description: '',
+          namespace: 'z.axis_title'
+        }
+      }
+    },
+    goal_line: {
+      type: 'goalLine',
+      title: 'Goal Lines',
+      description: ''
+    }
+  }
+};
+
+var BubbleChart = function BubbleChart(config) {
+  return {
+    title: CONSTANTS$g.title,
+    description: CONSTANTS$g.description,
+    servicesClass: 'BubbleChart',
+    namespace: CONSTANTS$g.namespace,
+    dump: function dump(hydrated) {
+      return hydrated;
+    },
+    load: function load(dumped) {
+      var _dumped$tags;
+      return {
+        type: dumped.type,
+        xMeasure: upcastMeasure(dumped.xMeasure ? [dumped.xMeasure] : [])[0] || null,
+        yMeasure: upcastMeasure(dumped.yMeasure ? [dumped.yMeasure] : [])[0] || null,
+        zMeasure: upcastMeasure(dumped.zMeasure ? [dumped.zMeasure] : [])[0] || null,
+        dimension: upcastStringDimensionsToObject(dumped.dimension),
+        viewId: upcastViewId(dumped.viewId),
+        timeDimension: dumped.timeDimension,
+        displayTitle: dumped.displayTitle,
+        displaySubject: dumped.displaySubject,
+        protectedByOrganisation: dumped.protectedByOrganisation,
+        filter: upcastFilter(dumped.filter),
+        order: upcastOrder(dumped.order, dumped.timeDimension),
+        dataSetId: dumped.dataSetId,
+        limit: dumped.limit,
+        legend: dumped.legend,
+        xAxisFormat: dumped.xAxisFormat,
+        yAxisFormat: dumped.yAxisFormat,
+        yAxisPostfix: dumped.yAxisPostfix,
+        yAxisPrefix: dumped.yAxisPrefix,
+        xAxisPostfix: dumped.xAxisPostfix,
+        xAxisPrefix: dumped.xAxisPrefix,
+        approxXAxisLabelCount: upcastAxisLabel(dumped.approxXAxisLabelCount),
+        approxYAxisLabelCount: upcastAxisLabel(dumped.approxYAxisLabelCount),
+        goalLines: dumped.goalLines,
+        axisTitles: dumped.axisTitles,
+        tags: (_dumped$tags = dumped.tags) != null ? _dumped$tags : []
+      };
+    },
+    setAttributes: setAttributes$d(config),
+    validate: function validate(attrs, dataSets) {
+      return validateView(attrs, dataSets, config.queryEngineConfig);
+    },
+    init: function init(dataSetId, overrides) {
+      return _extends({
+        type: 'bubbleChart',
+        xMeasure: null,
+        yMeasure: null,
+        zMeasure: null,
+        dimension: [],
+        timeDimension: null,
+        displayTitle: '',
+        displaySubject: '',
+        protectedByOrganisation: undefined,
+        viewId: upcastViewId(overrides == null ? void 0 : overrides.viewId),
+        filter: [],
+        order: [],
+        dataSetId: dataSetId,
+        limit: 5000,
+        legend: true,
+        xAxisPostfix: '',
+        xAxisPrefix: '',
+        yAxisPostfix: '',
+        yAxisPrefix: '',
+        yAxisFormat: null,
+        xAxisFormat: null,
+        approxXAxisLabelCount: 'auto',
+        approxYAxisLabelCount: 'auto',
+        goalLines: undefined,
+        axisTitles: undefined,
+        tags: []
+      }, overrides);
+    },
+    createFeedback: createFeedback,
+    schema: attributesSchema$e(config),
+    removeField: function removeField(attrs, fieldId) {
+      return removeField$1(attrs, fieldId, config.queryEngineConfig);
+    },
+    isRunnable: function isRunnable(hydrated) {
+      return !!hydrated.xMeasure && !!hydrated.yMeasure && !!hydrated.zMeasure && hydrated.dimension.length > 0;
+    },
+    autoGenerate: function autoGenerate(dataSet) {
+      var _DataSet$buildQueryAt = buildQueryAttributes(dataSet, config.queryEngineConfig, 'bubbleChart'),
+        measure = _DataSet$buildQueryAt.measure,
+        dimension = _DataSet$buildQueryAt.dimension;
+      return this.init(dataSet.id, {
+        xMeasure: measure[0],
+        yMeasure: measure[1],
+        dimension: dimension
+      });
+    },
+    dataPanelConfig: function dataPanelConfig() {
+      var _CONSTANTS$data_panel, _CONSTANTS$data_panel2, _CONSTANTS$data_panel3;
+      return [namespace(CONSTANTS$g, 'data_set'), namespace(CONSTANTS$g, 'views'), _extends({}, namespace(CONSTANTS$g, 'labelled_metrics'), {
+        subSection: [_extends({}, (_CONSTANTS$data_panel = CONSTANTS$g.data_panel.labelled_metrics) == null ? void 0 : _CONSTANTS$data_panel.subSectionDefinition['xAxis'], {
+          propKey: 'xMeasure',
+          allowsMultiple: false
+        }), _extends({}, (_CONSTANTS$data_panel2 = CONSTANTS$g.data_panel.labelled_metrics) == null ? void 0 : _CONSTANTS$data_panel2.subSectionDefinition['yAxis'], {
+          propKey: 'yMeasure',
+          allowsMultiple: false
+        }), _extends({}, (_CONSTANTS$data_panel3 = CONSTANTS$g.data_panel.labelled_metrics) == null ? void 0 : _CONSTANTS$data_panel3.subSectionDefinition['zAxis'], {
+          propKey: 'zMeasure',
+          allowsMultiple: false
+        })]
+      }), _extends({}, namespace(CONSTANTS$g, 'field_grouping'), {
+        fieldFilterOptions: {
+          onlyDimensions: true,
+          onlyFieldTypes: ['boolean', 'number', 'string'],
+          removePercentage: true,
+          removeSimpleMaths: true,
+          removeAggregateMaths: true
+        },
+        maxAllowed: 1,
+        preSetPartialAttributes: function preSetPartialAttributes(values) {
+          return {
+            dimension: values
+          };
+        },
+        getValues: function getValues(attrs) {
+          return attrs.dimension;
+        },
+        testId: 'add-dimension'
+      }), namespace(CONSTANTS$g, 'filter'), namespace(CONSTANTS$g, 'custom_metrics'), namespace(CONSTANTS$g, 'limit')];
+    },
+    formatPanelConfig: function formatPanelConfig() {
+      var _CONSTANTS$format_pan;
+      return [headingConstant(CONSTANTS$g), _extends({}, namespace(CONSTANTS$g, 'chart_styles'), {
+        subSection: [(_CONSTANTS$format_pan = CONSTANTS$g.format_panel.chart_styles) == null ? void 0 : _CONSTANTS$format_pan.subSectionDefinition.legend]
+      }), axisLabelsConstants(CONSTANTS$g), namespace(CONSTANTS$g, 'goal_line')];
+    },
+    supportedCustomFields: {
+      percentages: true,
+      dateCalculations: true,
+      simpleMaths: true,
+      rules: true,
+      aggregateMaths: true,
+      roundedNumbers: true,
+      conditional: true,
+      calculatedField: [AcceptedTypes.Maths, AcceptedTypes.IfStatement]
+    },
+    supportedFeatures: {
+      parameters: false,
+      colorGradient: false
+    }
+  };
+};
+
+var attributesSchema$f = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
     stacked: Joi.valid(true, false, '100%'),
     legend: Joi.valid(true, false),
@@ -8953,15 +9353,15 @@ var attributesSchema$e = function attributesSchema(config) {
   }));
 };
 
-var setAttributes$d = (function (config) {
+var setAttributes$e = (function (config) {
   return function (barChart, partial) {
-    var newAttributes = setAttributes(barChart, partial, attributesSchema$e(config));
+    var newAttributes = setAttributes(barChart, partial, attributesSchema$f(config));
     newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
     return newAttributes;
   };
 });
 
-var CONSTANTS$g = {
+var CONSTANTS$h = {
   title: 'Bar Chart V2',
   description: 'Ideal for illustrating changes and trends over time with bar graphs.',
   namespace: 'bar_chart',
@@ -9183,7 +9583,7 @@ var BarChart$1 = function BarChart(config) {
         drilldownOptions: dumped.drilldownOptions
       };
     },
-    setAttributes: setAttributes$d(config),
+    setAttributes: setAttributes$e(config),
     validate: function validate(attrs, dataSets) {
       return validateView(attrs, dataSets, config.queryEngineConfig);
     },
@@ -9221,7 +9621,7 @@ var BarChart$1 = function BarChart(config) {
       }, overrides);
     },
     createFeedback: createFeedback,
-    schema: attributesSchema$e(config),
+    schema: attributesSchema$f(config),
     removeField: function removeField(attrs, fieldId) {
       return removeField$1(attrs, fieldId, config.queryEngineConfig);
     },
@@ -9238,7 +9638,7 @@ var BarChart$1 = function BarChart(config) {
       });
     },
     dataPanelConfig: function dataPanelConfig() {
-      return [namespace(CONSTANTS$g, 'data_set'), namespace(CONSTANTS$g, 'views'), _extends({}, namespace(CONSTANTS$g, 'field_y_axis'), {
+      return [namespace(CONSTANTS$h, 'data_set'), namespace(CONSTANTS$h, 'views'), _extends({}, namespace(CONSTANTS$h, 'field_y_axis'), {
         fieldFilterOptions: {
           forComponent: 'barChart'
         },
@@ -9251,7 +9651,7 @@ var BarChart$1 = function BarChart(config) {
           return attrs.measure;
         },
         testId: 'metric-input'
-      }), _extends({}, namespace(CONSTANTS$g, 'field_x_axis'), {
+      }), _extends({}, namespace(CONSTANTS$h, 'field_x_axis'), {
         fieldFilterOptions: {
           forComponent: 'barChart',
           onlyDimensions: true
@@ -9269,16 +9669,16 @@ var BarChart$1 = function BarChart(config) {
         },
         maxAllowed: 2,
         testId: 'add-dimension'
-      }), namespace(CONSTANTS$g, 'sort'), namespace(CONSTANTS$g, 'filter'), _extends({}, namespace(CONSTANTS$g, 'drilldown'), {
+      }), namespace(CONSTANTS$h, 'sort'), namespace(CONSTANTS$h, 'filter'), _extends({}, namespace(CONSTANTS$h, 'drilldown'), {
         options: {
           property: 'drilldownOptions'
         }
-      }), namespace(CONSTANTS$g, 'custom_metrics'), namespace(CONSTANTS$g, 'limit')];
+      }), namespace(CONSTANTS$h, 'custom_metrics'), namespace(CONSTANTS$h, 'limit')];
     },
     formatPanelConfig: function formatPanelConfig() {
-      return [headingConstant(CONSTANTS$g), chartStylesConstant(CONSTANTS$g, false, true), axisLabelsConstants(CONSTANTS$g), _extends({}, namespace(CONSTANTS$g, 'conditional_formatting'), {
+      return [headingConstant(CONSTANTS$h), chartStylesConstant(CONSTANTS$h, false, true), axisLabelsConstants(CONSTANTS$h), _extends({}, namespace(CONSTANTS$h, 'conditional_formatting'), {
         ruleType: 'lineColor'
-      }), namespace(CONSTANTS$g, 'goal_line')];
+      }), namespace(CONSTANTS$h, 'goal_line')];
     },
     supportedCustomFields: {
       calculatedField: false,
@@ -9300,7 +9700,7 @@ var BarChart$1 = function BarChart(config) {
   };
 };
 
-var attributesSchema$f = function attributesSchema(config) {
+var attributesSchema$g = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
     legend: Joi.valid(true, false),
     type: Joi.valid('waterfallChart').required(),
@@ -9311,15 +9711,15 @@ var attributesSchema$f = function attributesSchema(config) {
   }));
 };
 
-var setAttributes$e = (function (config) {
+var setAttributes$f = (function (config) {
   return function (waterfallChart, partial) {
-    var newAttributes = setAttributes(waterfallChart, partial, attributesSchema$f(config));
+    var newAttributes = setAttributes(waterfallChart, partial, attributesSchema$g(config));
     newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
     return newAttributes;
   };
 });
 
-var CONSTANTS$h = {
+var CONSTANTS$i = {
   title: 'Waterfall chart',
   description: "Shows a running total as values are added or subtracted. It's useful for understanding how an initial value is affected by a series of positive and negative values.",
   namespace: 'waterfall_chart',
@@ -9477,10 +9877,10 @@ var CONSTANTS$h = {
 
 var WaterfallChart = function WaterfallChart(config) {
   return {
-    title: CONSTANTS$h.title,
-    description: CONSTANTS$h.description,
+    title: CONSTANTS$i.title,
+    description: CONSTANTS$i.description,
     servicesClass: 'WaterfallChart',
-    namespace: CONSTANTS$h.namespace,
+    namespace: CONSTANTS$i.namespace,
     dump: function dump(hydrated) {
       return hydrated;
     },
@@ -9515,7 +9915,7 @@ var WaterfallChart = function WaterfallChart(config) {
         offset: dumped.offset
       };
     },
-    setAttributes: setAttributes$e(config),
+    setAttributes: setAttributes$f(config),
     validate: function validate(attrs, dataSets) {
       return validateView(attrs, dataSets, config.queryEngineConfig);
     },
@@ -9550,7 +9950,7 @@ var WaterfallChart = function WaterfallChart(config) {
       }, overrides);
     },
     createFeedback: createFeedback,
-    schema: attributesSchema$f(config),
+    schema: attributesSchema$g(config),
     removeField: function removeField(attrs, fieldId) {
       return removeField$1(attrs, fieldId, config.queryEngineConfig);
     },
@@ -9567,7 +9967,7 @@ var WaterfallChart = function WaterfallChart(config) {
       });
     },
     dataPanelConfig: function dataPanelConfig() {
-      return [namespace(CONSTANTS$h, 'data_set'), namespace(CONSTANTS$h, 'views'), _extends({}, namespace(CONSTANTS$h, 'field_y_axis'), {
+      return [namespace(CONSTANTS$i, 'data_set'), namespace(CONSTANTS$i, 'views'), _extends({}, namespace(CONSTANTS$i, 'field_y_axis'), {
         fieldFilterOptions: {
           forComponent: 'waterfallChart',
           onlyMeasures: true
@@ -9581,7 +9981,7 @@ var WaterfallChart = function WaterfallChart(config) {
           return attrs.measure;
         },
         testId: 'metric-input'
-      }), _extends({}, namespace(CONSTANTS$h, 'field_x_axis'), {
+      }), _extends({}, namespace(CONSTANTS$i, 'field_x_axis'), {
         fieldFilterOptions: {
           forComponent: 'waterfallChart',
           onlyDimensions: true
@@ -9595,10 +9995,10 @@ var WaterfallChart = function WaterfallChart(config) {
         },
         maxAllowed: 2,
         testId: 'add-dimension'
-      }), namespace(CONSTANTS$h, 'sort'), namespace(CONSTANTS$h, 'filter'), namespace(CONSTANTS$h, 'custom_metrics'), namespace(CONSTANTS$h, 'limit')];
+      }), namespace(CONSTANTS$i, 'sort'), namespace(CONSTANTS$i, 'filter'), namespace(CONSTANTS$i, 'custom_metrics'), namespace(CONSTANTS$i, 'limit')];
     },
     formatPanelConfig: function formatPanelConfig() {
-      return [headingConstant(CONSTANTS$h), chartStylesConstant(CONSTANTS$h, false, false), axisLabelsConstants(CONSTANTS$h)];
+      return [headingConstant(CONSTANTS$i), chartStylesConstant(CONSTANTS$i, false, false), axisLabelsConstants(CONSTANTS$i)];
     },
     supportedCustomFields: {
       percentages: true,
@@ -9636,6 +10036,7 @@ function getComponentInterface(type, config) {
   if (type == 'areaChart') return textOverrideComponent(AreaChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'barChart') return textOverrideComponent(BarChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'basicTable') return textOverrideComponent(BasicTable(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
+  if (type == 'bubbleChart') return textOverrideComponent(BubbleChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'comboChart') return textOverrideComponent(ComboChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'custom') return textOverrideComponent(CustomChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'dataTable') return textOverrideComponent(DataTable(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
@@ -12797,7 +13198,7 @@ var buildDefaults = function buildDefaults(partialFeatureToggles) {
   };
 };
 
-var ALL_COMPONENT_TYPES = ['barChart', 'horizontalBarChart', 'funnelChart', 'areaChart', 'lineChart', 'lineChartV2', 'barChartV2', 'scatterChart', 'pieChart', 'singleStat', 'dataTable', 'basicTable', 'comboChart', 'mercatorMap', 'progress', 'richText', 'custom', 'waterfallChart'];
+var ALL_COMPONENT_TYPES = ['barChart', 'bubbleChart', 'horizontalBarChart', 'funnelChart', 'areaChart', 'lineChart', 'lineChartV2', 'barChartV2', 'scatterChart', 'pieChart', 'singleStat', 'dataTable', 'basicTable', 'comboChart', 'mercatorMap', 'progress', 'richText', 'custom', 'waterfallChart'];
 var ALL_VIZZLY_COMPONENT_TYPES = /*#__PURE__*/[].concat(ALL_COMPONENT_TYPES).filter(function (type) {
   return type != 'custom';
 });
@@ -13137,7 +13538,7 @@ var saveable = function saveable(component, protectedComponent) {
   };
 };
 
-var attributesSchema$g = function attributesSchema(config) {
+var attributesSchema$h = function attributesSchema(config) {
   return Joi.alternatives().conditional('.type', {
     is: 'barChart',
     then: BarChart(config).schema
@@ -13168,6 +13569,9 @@ var attributesSchema$g = function attributesSchema(config) {
   }).conditional('.type', {
     is: 'pieChart',
     then: PieChart(config).schema
+  }).conditional('.type', {
+    is: 'bubbleChart',
+    then: BubbleChart(config).schema
   }).conditional('.type', {
     is: 'scatterChart',
     then: ScatterChart(config).schema
@@ -20501,7 +20905,7 @@ var Combobox = function Combobox(props) {
   });
 };
 
-var attributesSchema$h = /*#__PURE__*/Joi.object({
+var attributesSchema$i = /*#__PURE__*/Joi.object({
   displayTitle: /*#__PURE__*/Joi.string().min(1).required(),
   colSpan: /*#__PURE__*/Joi.number().valid(12).required()
 });
@@ -20518,7 +20922,7 @@ var isEmptyCell = /*#__PURE__*/Joi.object({
 });
 var isPopulatedCell = function isPopulatedCell(queryEngineConfig) {
   return Joi.object({
-    attributes: attributesSchema$g({
+    attributes: attributesSchema$h({
       queryEngineConfig: queryEngineConfig
     }),
     colSpan: colSpanSchema
@@ -20529,7 +20933,7 @@ var saveableDashboardDefinitionSchema = function saveableDashboardDefinitionSche
     id: Joi.string(),
     display: displaySchema(queryEngineConfig),
     componentLibrary: Joi.array().required().items(Joi.object({
-      attributes: attributesSchema$g({
+      attributes: attributesSchema$h({
         queryEngineConfig: queryEngineConfig
       })
     })),
@@ -20540,7 +20944,7 @@ var saveableDashboardDefinitionSchema = function saveableDashboardDefinitionSche
 function displaySchema(queryEngineConfig) {
   return Joi.array().required().items(Joi.object({
     height: Joi.number().required(),
-    components: Joi.array().required().min(1).items(Joi.alternatives(isEmptyCell, isPopulatedCell(queryEngineConfig), attributesSchema$h))
+    components: Joi.array().required().min(1).items(Joi.alternatives(isEmptyCell, isPopulatedCell(queryEngineConfig), attributesSchema$i))
   }));
 }
 
@@ -21262,7 +21666,7 @@ var setHeaderComponent = function setHeaderComponent(state, action) {
   newDisplayState.dashboard.display[rowIndex].components[cellIndex] = component;
   return newDisplayState;
 };
-var setAttributes$f = function setAttributes(state, action) {
+var setAttributes$g = function setAttributes(state, action) {
   var attributes = action.attributes,
     rowIndex = action.rowIndex,
     cellIndex = action.cellIndex;
@@ -21547,7 +21951,7 @@ var reducer = function reducer(pipelineTransformationOptions) {
         case 'swapComponents':
           return swapComponents$1(state, action);
         case 'setAttributes':
-          return setAttributes$f(state, action);
+          return setAttributes$g(state, action);
         case 'addComponentToLibrary':
           return addComponentToLibrary(state, action);
         case 'setLocalFilters':
@@ -25010,6 +25414,59 @@ var ScatterChart$1 = function ScatterChart(props) {
     })]
   }));
 };
+var BubbleChart$1 = function BubbleChart(props) {
+  return jsxRuntime.jsxs("svg", _extends({
+    viewBox: "0 0 2134 2134",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    style: {
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeMiterlimit: 1.5
+    }
+  }, props, {
+    children: [jsxRuntime.jsx("path", {
+      d: "M208.333 208.334v1716.66M214.91 1926.73h1716.66",
+      style: {
+        strokeWidth: '166.67px'
+      }
+    }), jsxRuntime.jsx("circle", {
+      cx: 987.916,
+      cy: 920.416,
+      r: 187.917,
+      style: {
+        strokeWidth: '8.33px',
+        strokeLinecap: 'square'
+      }
+    }), jsxRuntime.jsx("circle", {
+      cx: 708.749,
+      cy: 1516.25,
+      r: 187.917,
+      style: {
+        strokeWidth: '8.33px',
+        strokeLinecap: 'square'
+      }
+    }), jsxRuntime.jsx("circle", {
+      cx: 1633.75,
+      cy: 907.916,
+      r: 187.917,
+      style: {
+        strokeWidth: '8.33px',
+        strokeLinecap: 'square'
+      }
+    }), jsxRuntime.jsx("circle", {
+      cx: 1775.42,
+      cy: 307.916,
+      r: 187.917,
+      style: {
+        strokeWidth: '8.33px',
+        strokeLinecap: 'square'
+      }
+    })]
+  }));
+};
 var Funnel = function Funnel(props) {
   return jsxRuntime.jsx("svg", _extends({
     fill: "none",
@@ -25131,6 +25588,9 @@ var componentTypeToIconMapping = {
   scatterChart: function scatterChart(props) {
     return ScatterChart$1(props);
   },
+  bubbleChart: function bubbleChart(props) {
+    return BubbleChart$1(props);
+  },
   singleStat: function singleStat(props) {
     return SingleStat$1(props);
   },
@@ -31710,7 +32170,7 @@ var accessors = function accessors(xAxisIsTime, xKey, yKey, horizontal) {
 };
 var DEFAULT_Y_AXIS_LABEL_COUNT = 5;
 var VizzlyXYChart = function VizzlyXYChart(props) {
-  var _props$height, _theme$axis$stroke, _theme$axis, _ref, _props$lines$data$len, _props$lines, _props$areas, _props$bars, _props$lines$threshol, _props$lines2, _props$areas2, _props$forceXAxisAsTi, _props$bars2, _props$lines3, _theme$grid$stroke, _theme$grid, _props$axisTitles, _props$axisTitles2, _props$axisTitles3, _props$axisTitles4, _props$areas7, _props$bars3, _props$bars7, _props$lines4, _props$lines7, _props$trends2, _props$lines13, _props$lines16, _props$bars14, _props$goalLine, _props$bars15, _props$bars16, _props$bars17;
+  var _props$height, _theme$axis$stroke, _theme$axis, _ref, _props$lines$data$len, _props$lines, _props$areas, _props$bars, _props$lines$threshol, _props$lines2, _props$areas2, _props$forceXAxisAsTi, _props$bars2, _props$lines3, _theme$grid$stroke, _theme$grid, _props$axisTitles, _props$axisTitles2, _props$axisTitles3, _props$axisTitles4, _props$areas7, _props$bars3, _props$bars7, _props$lines4, _props$lines7, _props$trends2, _props$lines13, _props$bars14, _props$goalLine, _props$bars15, _props$bars16, _props$bars17;
   var height = adjustHeight((_props$height = props == null ? void 0 : props.height) != null ? _props$height : 300, props == null ? void 0 : props.legend);
   var _props$approxYAxisLab = props.approxYAxisLabelCount,
     approxYAxisLabelCount = _props$approxYAxisLab === void 0 ? 'auto' : _props$approxYAxisLab,
@@ -32071,27 +32531,12 @@ var VizzlyXYChart = function VizzlyXYChart(props) {
           data: props == null || (_props$trends7 = props.trends) == null ? void 0 : _props$trends7.data
         }, accessors(xAxisIsTime, x, key, horizontal)), "trends_line_on_line_chart_" + props.uniqueId + "_" + keyIndex);
       }), props.lines && (props == null || (_props$lines13 = props.lines) == null ? void 0 : _props$lines13.scatter) && props.lines.keys.map(function (key, keyIndex) {
-        var _props$lines14;
+        var _props$lines14, _props$lines15;
         return jsxRuntime.jsx(xychart.GlyphSeries, _extends({
           dataKey: key,
           data: (_props$lines14 = props.lines) == null ? void 0 : _props$lines14.data
         }, accessors(xAxisIsTime, x, key, horizontal), {
-          colorAccessor: function colorAccessor(d) {
-            var _props$lines15;
-            if (props != null && (_props$lines15 = props.lines) != null && _props$lines15.formatter) {
-              var color = getColorFromDatum(key, props == null ? void 0 : props.lines.formatter, colors, keyIndex)(d);
-              return color;
-            }
-            return undefined;
-          }
-        }), "scatter_chart_" + props.uniqueId + "_" + keyIndex);
-      }), props.lines && (props == null || (_props$lines16 = props.lines) == null ? void 0 : _props$lines16.scatter) && props.lines.keys.map(function (key, keyIndex) {
-        var _props$lines17, _props$lines18;
-        return jsxRuntime.jsx(xychart.GlyphSeries, _extends({
-          dataKey: key,
-          data: (_props$lines17 = props.lines) == null ? void 0 : _props$lines17.data
-        }, accessors(xAxisIsTime, x, key, horizontal), {
-          colorAccessor: (props == null || (_props$lines18 = props.lines) == null ? void 0 : _props$lines18.formatter) && getColorFromDatum(key, props == null ? void 0 : props.lines.formatter, colors, keyIndex)
+          colorAccessor: (props == null || (_props$lines15 = props.lines) == null ? void 0 : _props$lines15.formatter) && getColorFromDatum(key, props == null ? void 0 : props.lines.formatter, colors, keyIndex)
         }), "scatter_chart_" + props.uniqueId + "_" + keyIndex);
       }), ['areas', 'lines'].map(function (seriesType, indexOne) {
         var chartProps = props;
@@ -40302,6 +40747,172 @@ var IconText = function IconText(props) {
   });
 };
 
+var defaultProps$6 = {
+  type: 'bubbleChart',
+  xMeasure: null,
+  yMeasure: null,
+  dimension: [],
+  timeDimension: null,
+  order: [],
+  displayTitle: '',
+  displaySubject: '',
+  xAxisPostfix: '',
+  xAxisPrefix: '',
+  yAxisPostfix: '',
+  yAxisPrefix: '',
+  yAxisFormat: null,
+  xAxisFormat: null,
+  filter: [],
+  limit: 500,
+  legend: false,
+  approxXAxisLabelCount: 'auto',
+  approxYAxisLabelCount: 'auto',
+  tags: []
+};
+var BubbleChartView = function BubbleChartView(props) {
+  var _props$library, _props$viewId, _props$library2, _props$viewId2, _theme$charts;
+  var _props = props,
+    displayTitle = _props.displayTitle,
+    displaySubject = _props.displaySubject;
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    textOverride = _useDashboardBehaviou.textOverride,
+    labelFormat = _useDashboardBehaviou.labelFormat,
+    variables = _useDashboardBehaviou.variables;
+  var ref = useChartRenderHelper({
+    title: displayTitle,
+    subject: displaySubject
+  });
+  var headerProps = {
+    displayTitle: displayTitle,
+    displaySubject: displaySubject,
+    library: (_props$library = props.library) != null ? _props$library : false,
+    verified: props.protectedByOrganisation,
+    localFilters: props.localFilters,
+    setLocalFilters: props.setLocalFilters,
+    dataSet: props.dataSet,
+    componentType: props.type,
+    viewId: (_props$viewId = props.viewId) != null ? _props$viewId : '',
+    order: props.order,
+    setPartialAttributes: props.setPartialAttributes
+  };
+  var theme = useTheme();
+  var BubbleChartComponent = getComponentInterface(props.type);
+  if (!BubbleChartComponent.isRunnable(props)) {
+    return jsxRuntime.jsx(QueryUnderConstructionNotice, {
+      title: "Missing parameters",
+      children: emptyScatterChartMessage(props)
+    });
+  }
+  if (isLoading(props.result)) return jsxRuntime.jsx(LoadingComponent, {});
+  if (hasFailed(props.result)) return jsxRuntime.jsx(FailedToLoadDataNotice, {});
+  if (isEmpty(props.result)) return jsxRuntime.jsx(NoResultContentToShowNotice, _extends({}, headerProps));
+  props = mergeProps(props, {}, defaultProps$6);
+  var keys = props.result && props.xMeasure ? scatterXKeys(props.dimension, props.xMeasure, props.result) : [];
+  if (!props.xMeasure || !props.yMeasure) return null;
+  var measure = [];
+  measure.push(props.xMeasure);
+  measure.push(props.yMeasure);
+  var pivotConfig = init$c(props);
+  var bubbleData = props.result ? resultSet(props.result, measure, pivotConfig) : [];
+  var xField = key([], [], props.xMeasure.field, props.xMeasure["function"]);
+  var zField = props.zMeasure ? key([], [], props.zMeasure.field, props.zMeasure["function"]) : '';
+  bubbleData.forEach(function (d) {
+    var dimensionValues = [].concat(props.dimension.map(function (dimension) {
+      return d[dimension.field];
+    }));
+    var yMeasure = props.yMeasure;
+    var xMeasure = props.xMeasure;
+    var yKeyWithoutDimension = key([], [], yMeasure.field, yMeasure["function"]);
+    var xKeyWithDimension = key(props.dimension.map(function (d) {
+      return d.field;
+    }), dimensionValues, xMeasure.field, xMeasure["function"]);
+    d[xKeyWithDimension] = d[yKeyWithoutDimension];
+  });
+  return jsxRuntime.jsx(React.Suspense, {
+    fallback: jsxRuntime.jsx(LoadingComponent, {}),
+    children: jsxRuntime.jsxs(ViewWrapper, {
+      queriesAreChanging: props.queriesAreChanging,
+      children: [jsxRuntime.jsx(ViewHeader, _extends({}, headerProps)), jsxRuntime.jsx(ChartWrapper, {
+        disabledFeatures: (_props$library2 = props.library) != null ? _props$library2 : false,
+        children: jsxRuntime.jsx(BubbleChart$3.BubbleChart, {
+          ref: ref,
+          approxXAxisLabelCount: props.approxXAxisLabelCount,
+          approxYAxisLabelCount: props.approxYAxisLabelCount,
+          uniqueId: props.id,
+          x: xField,
+          z: zField,
+          keys: keys,
+          colors: themeToColorScale(theme == null ? void 0 : theme.colors, keys.length),
+          data: bubbleData,
+          legend: showLegend(props.legend, (theme == null ? void 0 : theme.detail) === 'verbose'),
+          horizontal: false,
+          removeStroke: false,
+          forceXAxisAsTime: false,
+          sparkline: false,
+          formatYAxisLabel: formatYAxisLabel(textOverride, {
+            prefix: props.yAxisPrefix,
+            postfix: props.yAxisPostfix,
+            format: props.yAxisFormat,
+            numberFormatOptions: props.numberFormatOptions,
+            dateTimeFormatOptions: props.dateTimeFormatOptions,
+            defaultFormats: props.defaultFormats
+          }),
+          formatXAxisLabel: formatXAxisLabel(null, {
+            prefix: props.xAxisPrefix,
+            postfix: props.xAxisPostfix,
+            format: props.xAxisFormat,
+            numberFormatOptions: props.numberFormatOptions,
+            dateTimeFormatOptions: props.dateTimeFormatOptions,
+            defaultFormats: props.defaultFormats
+          }),
+          theme: theme == null ? void 0 : theme.charts,
+          formatSeriesName: formatSeriesName(props.result, textOverride, props.type, (_props$viewId2 = props.viewId) != null ? _props$viewId2 : '', labelFormat),
+          goalLine: buildGoalLine(variables, props.goalLines),
+          axisTitles: props.axisTitles,
+          idPrefix: props.idPrefix,
+          popOverMenuStyles: theme == null || (_theme$charts = theme.charts) == null ? void 0 : _theme$charts.popoverMenus
+        })
+      })]
+    })
+  });
+};
+BubbleChartView.defaultProps = defaultProps$6;
+var memoized$4 = /*#__PURE__*/React.memo(BubbleChartView, shouldUpdate);
+
+var BubbleChart$2 = function BubbleChart(props) {
+  var _props$dashboardBehav;
+  var _props$component = props.component,
+    results = _props$component.results,
+    attributes = _props$component.attributes,
+    localFilters = _props$component.localFilters;
+  var _useQueryEffect = useQueryEffect(attributes, props.runQueriesCallback, props.setResults, {
+      localFilters: localFilters,
+      globalFilters: props.globalFilters
+    }, props.dataSet, undefined, props.dashboardBehaviour.variables),
+    queriesAreChanging = _useQueryEffect.queriesAreChanging;
+  return jsxRuntime.jsx(memoized$4, _extends({
+    id: props.id
+  }, attributes, {
+    dataSet: props.dataSet,
+    localFilters: localFilters,
+    setLocalFilters: props.setLocalFilters,
+    setPartialAttributes: function setPartialAttributes(changes) {
+      return props.setPartialAttributes(changes);
+    },
+    result: results && results[0],
+    queriesAreChanging: queriesAreChanging,
+    supportedAggregates: props.dashboardBehaviour.queryEngineConfig.supportedAggregates,
+    supportedTimeTruncFunctions: props.dashboardBehaviour.queryEngineConfig.supportedTimeTruncFunctions,
+    sm: props.sm,
+    library: props == null ? void 0 : props.library,
+    supportedTransformationFunctions: props == null || (_props$dashboardBehav = props.dashboardBehaviour) == null || (_props$dashboardBehav = _props$dashboardBehav.queryEngineConfig) == null ? void 0 : _props$dashboardBehav.supportedTransformationFunctions,
+    numberFormatOptions: props.dashboardBehaviour.numberFormatOptions,
+    dateTimeFormatOptions: props.dashboardBehaviour.dateTimeFormatOptions,
+    idPrefix: props.idPrefix,
+    defaultFormats: props.dashboardBehaviour.defaultFormats
+  }));
+};
+
 var takeRenderOverrideFunctions = function takeRenderOverrideFunctions(props) {
   return {
     renderCloseIcon: props.renderCloseIcon || null,
@@ -43192,7 +43803,7 @@ var MercatorMap$3 = function MercatorMap(props) {
   }));
 };
 
-var defaultProps$6 = {
+var defaultProps$7 = {
   type: 'funnelChart',
   measure: [],
   dimension: [],
@@ -43231,7 +43842,7 @@ var FunnelChartView = function FunnelChartView(props) {
     headline: props.headline
   });
   var theme = useTheme();
-  props = mergeProps(props, {}, defaultProps$6);
+  props = mergeProps(props, {}, defaultProps$7);
   var headerProps = {
     displayTitle: displayTitle,
     displaySubject: displaySubject,
@@ -43325,7 +43936,7 @@ var FunnelChartView = function FunnelChartView(props) {
     })
   });
 };
-FunnelChartView.defaultProps = defaultProps$6;
+FunnelChartView.defaultProps = defaultProps$7;
 var FunnelChartView$1 = /*#__PURE__*/React.memo(FunnelChartView, shouldUpdate);
 
 var FunnelChart$2 = function FunnelChart(props) {
@@ -43455,7 +44066,7 @@ var SingleStat$2 = function SingleStat(props) {
   }));
 };
 
-var defaultProps$7 = {
+var defaultProps$8 = {
   type: 'dataTable',
   measure: [],
   dimension: [],
@@ -43486,13 +44097,13 @@ function hasNext(_ref) {
   return total >= limit;
 }
 function nextOffset(offset, limit) {
-  return (offset || 0) + (limit || defaultProps$7.limit);
+  return (offset || 0) + (limit || defaultProps$8.limit);
 }
 function previousOffset(offset, limit) {
   if (offset === undefined && limit === undefined) {
     return undefined;
   }
-  return (offset || 0) - (limit || defaultProps$7.limit);
+  return (offset || 0) - (limit || defaultProps$8.limit);
 }
 
 var wrapper$8 = /*#__PURE__*/buildStyleOverrides( /*#__PURE__*/_extends({
@@ -45776,7 +46387,7 @@ var DataTableView = function DataTableView(props) {
     })]
   });
 };
-DataTableView.defaultProps = defaultProps$7;
+DataTableView.defaultProps = defaultProps$8;
 var DataTableView$1 = (function (props) {
   return jsxRuntime.jsx(DataTableView, _extends({}, props));
 });
@@ -46065,7 +46676,7 @@ var IndividualProgress = function IndividualProgress(props) {
     radius: props.progressType === ProgressType.Linear ? undefined : props.radius
   });
 };
-var defaultProps$8 = {
+var defaultProps$9 = {
   type: 'progress',
   measure: [],
   displayTitle: '',
@@ -46111,7 +46722,7 @@ var ProgressView$1 = function ProgressView(props) {
   if (isLoading(mainResult)) return jsxRuntime.jsx(LoadingComponent, {});
   if (hasFailed(mainResult)) return jsxRuntime.jsx(FailedToLoadDataNotice, {});
   if (isEmpty(mainResult)) return jsxRuntime.jsx(NoResultContentToShowNotice, _extends({}, headerProps));
-  props = mergeProps(props, {}, defaultProps$8);
+  props = mergeProps(props, {}, defaultProps$9);
   var noOfMeasures = props.measure.length;
   var progressType = defaultProgressType(props.progressType);
   var _useState2 = React.useState(0),
@@ -46173,7 +46784,7 @@ var ProgressView$1 = function ProgressView(props) {
     })]
   });
 };
-ProgressView$1.defaultProps = defaultProps$8;
+ProgressView$1.defaultProps = defaultProps$9;
 
 var Progress$2 = function Progress(props) {
   var _props$dashboardBehav;
@@ -47847,6 +48458,30 @@ var Component = function Component(props) {
       })
     });
   }
+  if (props.component.attributes.type == 'bubbleChart') {
+    return jsxRuntime.jsx(ErrorBoundary, {
+      renderOnError: function renderOnError(onManualRetry) {
+        return jsxRuntime.jsx(ComponentErrorNotice, {
+          onManualRetry: onManualRetry
+        });
+      },
+      onError: dashboardBehaviour.onError,
+      children: jsxRuntime.jsx(BubbleChart$2, {
+        id: props.id,
+        setLocalFilters: props.setLocalFilters,
+        dataSet: dataSet,
+        runQueriesCallback: props.runQueriesCallback,
+        component: props.component,
+        setResults: props.setResults,
+        globalFilters: dashboard.globalFilters,
+        dashboardBehaviour: dashboardBehaviour,
+        sm: smallVersion,
+        library: props == null ? void 0 : props.library,
+        idPrefix: idPrefix,
+        setPartialAttributes: setPartialAttributes
+      })
+    });
+  }
   if (['horizontalBarChart', 'barChart'].includes(props.component.attributes.type)) {
     return jsxRuntime.jsx(ErrorBoundary, {
       renderOnError: function renderOnError(onManualRetry) {
@@ -64435,109 +65070,109 @@ var PieChart$4 = /*#__PURE__*/function (_View5) {
   };
   return PieChart;
 }(View$3);
-var ScatterChart$4 = /*#__PURE__*/function (_View6) {
+var ScatterChart$4 = /*#__PURE__*/function (_View7) {
   function ScatterChart(attributes) {
-    return _View6.call(this, _extends({}, attributes, {
+    return _View7.call(this, _extends({}, attributes, {
       type: 'scatterChart'
     })) || this;
   }
-  _inheritsLoose(ScatterChart, _View6);
+  _inheritsLoose(ScatterChart, _View7);
   ScatterChart.type = function type() {
     return 'scatterChart';
   };
   return ScatterChart;
 }(View$3);
-var ComboChart$4 = /*#__PURE__*/function (_View7) {
+var ComboChart$4 = /*#__PURE__*/function (_View8) {
   function ComboChart(attributes) {
-    return _View7.call(this, _extends({}, attributes, {
+    return _View8.call(this, _extends({}, attributes, {
       type: 'comboChart'
     })) || this;
   }
-  _inheritsLoose(ComboChart, _View7);
+  _inheritsLoose(ComboChart, _View8);
   ComboChart.type = function type() {
     return 'comboChart';
   };
   return ComboChart;
 }(View$3);
-var PivotTable = /*#__PURE__*/function (_View8) {
+var PivotTable = /*#__PURE__*/function (_View9) {
   function PivotTable(attributes) {
-    return _View8.call(this, _extends({}, attributes, {
+    return _View9.call(this, _extends({}, attributes, {
       type: 'dataTable'
     })) || this;
   }
-  _inheritsLoose(PivotTable, _View8);
+  _inheritsLoose(PivotTable, _View9);
   PivotTable.type = function type() {
     return 'dataTable';
   };
   return PivotTable;
 }(View$3);
-var BasicTable$1 = /*#__PURE__*/function (_View9) {
+var BasicTable$1 = /*#__PURE__*/function (_View10) {
   function BasicTable(attributes) {
-    return _View9.call(this, _extends({}, attributes, {
+    return _View10.call(this, _extends({}, attributes, {
       type: 'basicTable'
     })) || this;
   }
-  _inheritsLoose(BasicTable, _View9);
+  _inheritsLoose(BasicTable, _View10);
   BasicTable.type = function type() {
     return 'basicTable';
   };
   return BasicTable;
 }(View$3);
-var HorizontalBarChart$2 = /*#__PURE__*/function (_View10) {
+var HorizontalBarChart$2 = /*#__PURE__*/function (_View11) {
   function HorizontalBarChart(attributes) {
-    return _View10.call(this, _extends({}, attributes, {
+    return _View11.call(this, _extends({}, attributes, {
       type: 'horizontalBarChart'
     })) || this;
   }
-  _inheritsLoose(HorizontalBarChart, _View10);
+  _inheritsLoose(HorizontalBarChart, _View11);
   HorizontalBarChart.type = function type() {
     return 'horizontalBarChart';
   };
   return HorizontalBarChart;
 }(View$3);
-var MercatorMap$4 = /*#__PURE__*/function (_View11) {
+var MercatorMap$4 = /*#__PURE__*/function (_View12) {
   function MercatorMap(attributes) {
-    return _View11.call(this, _extends({}, attributes, {
+    return _View12.call(this, _extends({}, attributes, {
       type: 'mercatorMap'
     })) || this;
   }
-  _inheritsLoose(MercatorMap, _View11);
+  _inheritsLoose(MercatorMap, _View12);
   MercatorMap.type = function type() {
     return 'mercatorMap';
   };
   return MercatorMap;
 }(View$3);
-var SingleStat$3 = /*#__PURE__*/function (_View12) {
+var SingleStat$3 = /*#__PURE__*/function (_View13) {
   function SingleStat(attributes) {
-    return _View12.call(this, _extends({}, attributes, {
+    return _View13.call(this, _extends({}, attributes, {
       type: 'singleStat'
     })) || this;
   }
-  _inheritsLoose(SingleStat, _View12);
+  _inheritsLoose(SingleStat, _View13);
   SingleStat.type = function type() {
     return 'singleStat';
   };
   return SingleStat;
 }(View$3);
-var Progress$3 = /*#__PURE__*/function (_View13) {
+var Progress$3 = /*#__PURE__*/function (_View14) {
   function Progress(attributes) {
-    return _View13.call(this, _extends({}, attributes, {
+    return _View14.call(this, _extends({}, attributes, {
       type: 'progress'
     })) || this;
   }
-  _inheritsLoose(Progress, _View13);
+  _inheritsLoose(Progress, _View14);
   Progress.type = function type() {
     return 'progress';
   };
   return Progress;
 }(View$3);
-var WaterfallChart$4 = /*#__PURE__*/function (_View15) {
+var WaterfallChart$4 = /*#__PURE__*/function (_View16) {
   function WaterfallChart(attributes) {
-    return _View15.call(this, _extends({}, attributes, {
+    return _View16.call(this, _extends({}, attributes, {
       type: 'waterfallChart'
     })) || this;
   }
-  _inheritsLoose(WaterfallChart, _View15);
+  _inheritsLoose(WaterfallChart, _View16);
   WaterfallChart.type = function type() {
     return 'waterfallChart';
   };
@@ -64847,7 +65482,21 @@ var toQueries$d = function toQueries(attributes, dataSet, queryEngineConfig, par
   };
 };
 
-var toQueries$e = function toQueries$1(attributes, dataSet, queryEngineConfig, params) {
+var toQueries$e = function toQueries(attributes, dataSet, queryEngineConfig, params) {
+  var measures = [];
+  attributes.xMeasure && measures.push(attributes.xMeasure);
+  attributes.yMeasure && measures.push(attributes.yMeasure);
+  var _Query$build = build$a(dataSet, measures, attributes.order, attributes.dimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params),
+    query = _Query$build.query,
+    measureDescription = _Query$build.measureDescription;
+  var resultFields = toResultFields([measureDescription], queryEngineConfig);
+  return {
+    queries: [query],
+    resultFields: resultFields
+  };
+};
+
+var toQueries$f = function toQueries$1(attributes, dataSet, queryEngineConfig, params) {
   return toQueries([dataSet], [{
     measure: attributes.measure,
     dataSetId: dataSet.id,
@@ -64859,12 +65508,12 @@ var toQueries$e = function toQueries$1(attributes, dataSet, queryEngineConfig, p
   }], queryEngineConfig, params);
 };
 
-var toQueries$f = commonToQueries;
-
 var toQueries$g = commonToQueries;
 
 var toQueries$h = commonToQueries;
 
+var toQueries$i = commonToQueries;
+
 var buildVizzlyViewQueries = function buildVizzlyViewQueries(attributes, dataSet, queryEngineConfig, params) {
   switch (attributes.type) {
     case 'areaChart':
@@ -64893,14 +65542,16 @@ var buildVizzlyViewQueries = function buildVizzlyViewQueries(attributes, dataSet
       return toQueries$c(attributes, dataSet, queryEngineConfig, params);
     case 'scatterChart':
       return toQueries$d(attributes, dataSet, queryEngineConfig, params);
-    case 'mercatorMap':
+    case 'bubbleChart':
       return toQueries$e(attributes, dataSet, queryEngineConfig, params);
-    case 'funnelChart':
+    case 'mercatorMap':
       return toQueries$f(attributes, dataSet, queryEngineConfig, params);
-    case 'richText':
+    case 'funnelChart':
       return toQueries$g(attributes, dataSet, queryEngineConfig, params);
-    case 'waterfallChart':
+    case 'richText':
       return toQueries$h(attributes, dataSet, queryEngineConfig, params);
+    case 'waterfallChart':
+      return toQueries$i(attributes, dataSet, queryEngineConfig, params);
     default:
       throw 'Unsupported view when building query.';
   }
@@ -67771,6 +68422,7 @@ var attributesToAiView = function attributesToAiView(dataSet, originalAttributes
   if (attributes.type === 'funnelChart') throw 'Funnel chart views are not supported by Vizzly AI.';
   if (attributes.type === 'richText') throw 'Rich text views are not supported by Vizzly AI.';
   if (attributes.type === 'lineChartV2') throw 'Line Chart V2 views are not supported by Vizzly AI.';
+  if (attributes.type === 'bubbleChart') throw 'Bubble Chart views are not supported by Vizzly AI.';
   if (attributes.type === 'barChartV2') throw 'Line Chart V2 views are not supported by Vizzly AI.';
   if (attributes.type === 'waterfallChart') throw 'Waterfall chart views are not supported by Vizzly AI.';
   var select = [];