@vizzly/dashboard 0.14.4-dev-cbf41394775302d8f6b4a782f78abbf7128ea991 → 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');
@@ -64,7 +65,6 @@ var axis = require('@visx/axis');
 var text$3 = require('@visx/text');
 var grid = require('@visx/grid');
 require('@visx/point');
-var WaterfallChart$4 = require('./charts/src/v2/components/WaterfallChart');
 var VisibilitySensor = _interopDefault(require('react-visibility-sensor'));
 var ExcelJS = _interopDefault(require('exceljs'));
 var fileSaver = require('file-saver');
@@ -8172,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) {
@@ -8940,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),
@@ -8954,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',
@@ -9184,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);
     },
@@ -9222,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);
     },
@@ -9239,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'
         },
@@ -9252,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
@@ -9270,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,
@@ -9301,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(),
@@ -9312,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',
@@ -9478,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;
     },
@@ -9516,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);
     },
@@ -9551,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);
     },
@@ -9568,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
@@ -9582,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
@@ -9596,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,
@@ -9637,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);
@@ -12798,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';
 });
@@ -13138,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
@@ -13169,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
@@ -20502,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()
 });
@@ -20519,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
@@ -20530,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
       })
     })),
@@ -20541,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))
   }));
 }
 
@@ -21263,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;
@@ -21548,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':
@@ -25011,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",
@@ -25132,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);
   },
@@ -31711,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,
@@ -32072,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;
@@ -40303,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,
@@ -43193,7 +43803,7 @@ var MercatorMap$3 = function MercatorMap(props) {
   }));
 };
 
-var defaultProps$6 = {
+var defaultProps$7 = {
   type: 'funnelChart',
   measure: [],
   dimension: [],
@@ -43232,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,
@@ -43326,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) {
@@ -43456,7 +44066,7 @@ var SingleStat$2 = function SingleStat(props) {
   }));
 };
 
-var defaultProps$7 = {
+var defaultProps$8 = {
   type: 'dataTable',
   measure: [],
   dimension: [],
@@ -43487,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({
@@ -45777,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));
 });
@@ -46066,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: '',
@@ -46112,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),
@@ -46174,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;
@@ -46808,6 +47418,608 @@ var BarChartV2 = function BarChartV2(props) {
   });
 };
 
+function getBarFill$1(bars, conditionalFormattingRules, barKey, barValues) {
+  var _bars$find;
+  // Default fill color from the corresponding bar
+  var fill = (_bars$find = bars.find(function (chartBar) {
+    return chartBar.yKey === barKey;
+  })) == null ? void 0 : _bars$find.color;
+
+  // Determine the value based on barValues type
+  var value = typeof barValues === 'number' ? barValues : barValues == null ? void 0 : barValues[barKey];
+  if (typeof value === 'number') {
+    for (var _iterator = _createForOfIteratorHelperLoose(conditionalFormattingRules), _step; !(_step = _iterator()).done;) {
+      var rule = _step.value;
+      if (compare({
+        op: rule.operator,
+        value: rule.value
+      }, value)) {
+        fill = rule.color;
+        break;
+      }
+    }
+  }
+  return fill;
+}
+
+var ASSUMED_AVERAGE_CHAR_WIDTH$2 = 8.8;
+function calculateWordWidth$2(word, avgCharWidth) {
+  if (avgCharWidth === void 0) {
+    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$2;
+  }
+  return word.length * avgCharWidth;
+}
+
+/** Reduce width proportionally to simulate spacing / padding between ticks. */
+var widthWithSpacing$2 = function widthWithSpacing(width) {
+  var THIRTY_PERCENT = 0.3;
+  return width - width * THIRTY_PERCENT;
+};
+function howManyTicksFitInWidth$2(ticks, maxWidth, avgCharWidth) {
+  if (avgCharWidth === void 0) {
+    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$2;
+  }
+  var fittedTicks = [];
+  var currentWidth = 0;
+  for (var _iterator = _createForOfIteratorHelperLoose(ticks), _step; !(_step = _iterator()).done;) {
+    var tick = _step.value;
+    var word = (tick == null ? void 0 : tick.formattedValue) || '';
+    var wordWidth = calculateWordWidth$2(word, avgCharWidth);
+    if (currentWidth + wordWidth <= widthWithSpacing$2(maxWidth)) {
+      fittedTicks.push(tick);
+      currentWidth += wordWidth + avgCharWidth; // Add space between words
+    } else {
+      break; // Stop if adding the word exceeds maxWidth
+    }
+  }
+  return fittedTicks.length;
+}
+function pickEquallySpaced$2(arr, numPicks) {
+  if (numPicks >= arr.length) {
+    return arr; // If numPicks is greater than or equal to the array length, return the whole array
+  }
+  var result = [];
+  var interval = (arr.length - 1) / (numPicks - 1);
+  for (var i = 0; i < numPicks; i++) {
+    var index = Math.round(i * interval); // Calculate index and round it
+    result.push(arr[index]);
+  }
+  return result;
+}
+var adjustTicks$2 = function adjustTicks(waterfallChartRepresentation, width) {
+  waterfallChartRepresentation = _.cloneDeep(waterfallChartRepresentation);
+
+  // TODO; take this from the theme override...
+  var averageCharacterWidth = ASSUMED_AVERAGE_CHAR_WIDTH$2;
+  var numberOfTicksFittingIntoSpace = howManyTicksFitInWidth$2(waterfallChartRepresentation.x.ticks || [], width, averageCharacterWidth);
+  var MINIMUM_NUMBER_OF_TICKS = 2;
+  if (numberOfTicksFittingIntoSpace < MINIMUM_NUMBER_OF_TICKS) {
+    numberOfTicksFittingIntoSpace = MINIMUM_NUMBER_OF_TICKS;
+  }
+
+  // @ts-ignore
+  waterfallChartRepresentation.x.ticks = pickEquallySpaced$2(waterfallChartRepresentation.x.ticks, numberOfTicksFittingIntoSpace);
+  return waterfallChartRepresentation;
+};
+
+var Tooltip$2 = function Tooltip(_ref) {
+  var _tooltipData$xKey$for, _tooltipData$yKey$for;
+  var showTooltip = _ref.showTooltip,
+    tooltipData = _ref.tooltipData,
+    tooltipLeft = _ref.tooltipLeft,
+    tooltipTop = _ref.tooltipTop,
+    xKey = _ref.xKey,
+    yKey = _ref.yKey,
+    theme = _ref.theme;
+  var tooltipRowContainerClasses = buildStyleOverrides({
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    gap: 12,
+    fontWeight: 500,
+    color: 'inherit',
+    alignItems: 'center'
+  });
+  var rowClasses = buildStyleOverrides({
+    borderBottom: '1px dotted rgba(0,0,0,0.025)'
+  });
+  var rowLabelClasses = buildStyleOverrides({
+    alignItems: 'center',
+    display: 'flex',
+    fontFamily: 'inherit',
+    letterSpacing: 'inherit',
+    gap: 6
+  });
+  var rowValueClasses = buildStyleOverrides({
+    display: 'block',
+    fontFamily: 'inherit',
+    letterSpacing: 'inherit',
+    margin: 0,
+    padding: 0,
+    textAlign: 'right'
+  });
+  var highlightedClasses = buildStyleOverrides({
+    wordBreak: 'break-all'
+  });
+  if (!showTooltip || !tooltipData) return null;
+  var value = tooltipData[yKey].value;
+  var isPositiveValue = Number(value) > 0;
+  return jsxRuntime.jsx(tooltip$3.TooltipWithBounds, {
+    left: tooltipLeft,
+    top: tooltipTop,
+    style: theme,
+    children: jsxRuntime.jsxs("div", {
+      style: {
+        wordBreak: 'break-all'
+      },
+      children: [jsxRuntime.jsx("div", {
+        style: {
+          fontFamily: 'inherit',
+          lineHeight: 'inherit',
+          letterSpacing: 'inherit',
+          fontWeight: 'bold',
+          fontSize: '15px',
+          width: '100%'
+        },
+        children: (_tooltipData$xKey$for = tooltipData[xKey].formattedValue) != null ? _tooltipData$xKey$for : tooltipData[xKey].value
+      }), jsxRuntime.jsxs("div", {
+        style: {
+          fontWeight: 700
+        },
+        className: "" + tooltipRowContainerClasses,
+        children: [jsxRuntime.jsx("span", {
+          className: rowClasses + " " + rowLabelClasses,
+          children: jsxRuntime.jsx("span", {
+            className: "" + highlightedClasses,
+            children: isPositiveValue ? jsxRuntime.jsx(IconNarrowRight$1, {}) : jsxRuntime.jsx(IconTrendingDown$1, {})
+          })
+        }), jsxRuntime.jsx("p", {
+          className: rowClasses + " " + rowValueClasses,
+          children: (_tooltipData$yKey$for = tooltipData[yKey].formattedValue) != null ? _tooltipData$yKey$for : tooltipData[yKey].value
+        })]
+      })]
+    })
+  }, Math.random());
+};
+var IconNarrowRight$1 = function IconNarrowRight() {
+  var style = {
+    width: 20,
+    height: 20,
+    display: 'block'
+  };
+  var fill = "#12B76A";
+  return jsxRuntime.jsx("svg", {
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    style: style,
+    children: jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M244 56v64a12 12 0 0 1-24 0V85l-75.51 75.52a12 12 0 0 1-17 0L96 129l-63.51 63.49a12 12 0 0 1-17-17l72-72a12 12 0 0 1 17 0L136 135l67-67h-35a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12",
+      fill: fill
+    })
+  });
+};
+var IconTrendingDown$1 = function IconTrendingDown() {
+  var style = {
+    width: 20,
+    height: 20,
+    display: 'block'
+  };
+  var fill = "#F04438";
+  return jsxRuntime.jsx("svg", {
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    style: style,
+    children: jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 13a1 1 0 1 0 0 2h5a1 1 0 0 0 1-1V9a1 1 0 1 0-2 0v2.586l-4.293-4.293a1 1 0 0 0-1.414 0L8 9.586 3.707 5.293a1 1 0 0 0-1.414 1.414l5 5a1 1 0 0 0 1.414 0L11 9.414 14.586 13H12Z",
+      fill: fill
+    })
+  });
+};
+
+var Legend$2 = function Legend(_ref) {
+  var showLegend = _ref.showLegend,
+    margin = _ref.margin;
+  var items = [{
+    color: 'green',
+    yKey: 'increase',
+    style: {
+      type: 'line',
+      strokeDasharray: null,
+      strokeWidth: 2
+    }
+  }, {
+    color: 'red',
+    yKey: 'decrease',
+    style: {
+      type: 'line',
+      strokeDasharray: null,
+      strokeWidth: 2
+    }
+  }];
+  var keys = {
+    increase: {
+      key: 'increase',
+      keyFormatted: 'Increase',
+      dataType: 'string'
+    },
+    decrease: {
+      key: 'decrease',
+      keyFormatted: 'Decrease',
+      dataType: 'string'
+    }
+  };
+  if (!showLegend) return null;
+  return jsxRuntime.jsx(Legend$1, {
+    legendItems: items,
+    visibleYKeys: ['increase', 'decrease'],
+    keys: keys,
+    marginLeft: margin.left - margin.leftTitleOffset,
+    conditionalFormattingRules: [],
+    setVisibleYKeys: function setVisibleYKeys() {}
+  });
+};
+
+var _excluded$g = ["formattedValue"],
+  _excluded2$4 = ["formattedValue"];
+var AXIS_TITLE_STYLES$1 = {
+  opacity: '0.75',
+  fontWeight: 'bold'
+};
+var WaterfallChart$2 = function WaterfallChart(_ref) {
+  var _theme$axis$stroke, _theme$axis;
+  var height = _ref.height,
+    width = _ref.width,
+    options = _ref.options,
+    chart = _ref.chart,
+    theme = _ref.theme;
+  //Waterfall TODO: fix chart for other x types
+  if (chart.x.scale.dataType === 'date_time' || chart.x.scale.dataType === 'number') {
+    return null;
+  }
+  var _useTooltip = tooltip$3.useTooltip(),
+    tooltipOpen = _useTooltip.tooltipOpen,
+    _useTooltip$tooltipLe = _useTooltip.tooltipLeft,
+    tooltipLeft = _useTooltip$tooltipLe === void 0 ? 0 : _useTooltip$tooltipLe,
+    _useTooltip$tooltipTo = _useTooltip.tooltipTop,
+    tooltipTop = _useTooltip$tooltipTo === void 0 ? 0 : _useTooltip$tooltipTo,
+    tooltipData = _useTooltip.tooltipData,
+    hideTooltip = _useTooltip.hideTooltip,
+    showTooltip = _useTooltip.showTooltip;
+  var chartCopy = _.cloneDeep(chart);
+  var data = chartCopy.data,
+    x = chartCopy.x,
+    y = chartCopy.y;
+  var showTotalBar = options.showTotalBar;
+  var conditionalFormattingRules = [{
+    yKey: y.key,
+    operator: '>',
+    value: 0,
+    color: 'green'
+  }, {
+    yKey: y.key,
+    operator: '<',
+    value: 0,
+    color: 'red'
+  }];
+  var xKey = x.key;
+  var yKey = y.key;
+  var cumulativeTotal = 0;
+  var steps = data.map(function (item) {
+    var xValue = item[xKey].value;
+    var yValue = Number(item[yKey].value);
+    var prevTotal = cumulativeTotal;
+    cumulativeTotal += yValue;
+    return {
+      x: xValue,
+      y: yValue,
+      start: prevTotal,
+      end: cumulativeTotal
+    };
+  });
+  if (showTotalBar) {
+    var _data$push;
+    steps.push({
+      x: "Total",
+      y: cumulativeTotal,
+      start: 0,
+      end: cumulativeTotal
+    });
+    data.push((_data$push = {}, _data$push[x.key] = {
+      value: "Total",
+      formattedValue: "Total"
+    }, _data$push[y.key] = {
+      value: cumulativeTotal,
+      formattedValue: null
+    }, _data$push));
+    x.ticks.push({
+      value: "Total",
+      formattedValue: "Total",
+      scaleValue: "Total"
+    });
+  }
+  var formattedYAxisForBarChart = _extends({}, y, {
+    keys: [y.key]
+  });
+  var adjustedChartRepresentation = React.useMemo(function () {
+    return adjustTicks$2(_extends({}, chartCopy), width);
+  }, [chartCopy, width]);
+  var formattedChartDataForBarChart = _extends({}, adjustedChartRepresentation, {
+    y: formattedYAxisForBarChart,
+    steps: steps,
+    conditionalFormattingRules: conditionalFormattingRules,
+    bars: []
+  });
+  var margin = React.useMemo(function () {
+    return buildMargin(formattedChartDataForBarChart.y.ticks, options.axis.showYAxisLabels, formattedChartDataForBarChart.y.title != null, formattedChartDataForBarChart.x.title != null);
+  }, [formattedChartDataForBarChart.y.ticks, options.axis.showYAxisLabels, formattedChartDataForBarChart.y.title, formattedChartDataForBarChart.x.title]);
+  var innerWidth = width - margin.left - margin.right;
+  var innerHeight = height - margin.top - margin.bottom - (options.showLegend ? 40 : 0);
+  var xScaleKey = formattedChartDataForBarChart.x.scale.key;
+  var yScaleKeys = formattedChartDataForBarChart.y.keys;
+  var xScaleDataType = formattedChartDataForBarChart.x.scale.dataType;
+  var xScale = React.useMemo(function () {
+    return scale.scaleBand({
+      range: [0, innerWidth],
+      domain: xScaleKey ? [].concat(formattedChartDataForBarChart.data.map(function (d) {
+        return d[xScaleKey] && d[xScaleKey].value !== null ? String(d[xScaleKey].value) : '';
+      })) : [],
+      paddingOuter: 0,
+      paddingInner: 0
+    });
+  }, [innerWidth, formattedChartDataForBarChart.x, formattedChartDataForBarChart.data]);
+  var yScale = React.useMemo(function () {
+    return scale.scaleLinear({
+      range: [innerHeight, 0],
+      domain: formattedChartDataForBarChart.y.scale.ordering === 'asc' ? [formattedChartDataForBarChart.y.scale.min, formattedChartDataForBarChart.y.scale.max] : [formattedChartDataForBarChart.y.scale.max, formattedChartDataForBarChart.y.scale.min],
+      nice: true
+    });
+  }, [innerHeight, formattedChartDataForBarChart.y]);
+  var xBandwidth = xScale.bandwidth();
+  var innerXScale = React.useMemo(function () {
+    return scale.scaleBand({
+      range: [0, xBandwidth],
+      domain: yScaleKeys,
+      padding: 0.1
+    });
+  }, [xScale, yScaleKeys, xScaleDataType]);
+  var dataFlattened = React.useMemo(function () {
+    if (xScaleKey) {
+      return flattenData({
+        data: formattedChartDataForBarChart.data,
+        xScaleKey: xScaleKey,
+        xScaleDataType: xScaleDataType,
+        yKeys: formattedChartDataForBarChart.y.keys
+      });
+    }
+    return [];
+  }, [formattedChartDataForBarChart.data, xScaleKey, xScaleDataType, formattedChartDataForBarChart.y.keys]);
+  var themeCSS = React.useMemo(function () {
+    return getChartThemeCSS(theme);
+  }, [theme]);
+  var yTickValues = formattedChartDataForBarChart.y.ticks.map(function (tick) {
+    return Number(tick.value);
+  });
+  var xTickValues = formattedChartDataForBarChart.x.ticks.length > 0 ? formattedChartDataForBarChart.x.ticks.map(function (tick) {
+    var _tick$scaleValue;
+    return (_tick$scaleValue = tick.scaleValue) != null ? _tick$scaleValue : 0;
+  }) : undefined;
+  var handleMouseMove = React.useCallback(function (event) {
+    if (!xKey || !xScaleKey || xScale === null) return;
+    var tooltipData = getTooltipData({
+      data: formattedChartDataForBarChart.data,
+      event: event,
+      margin: margin,
+      xScaleKey: xScaleKey,
+      xScaleDataType: xScaleDataType,
+      xOrdering: formattedChartDataForBarChart.x.scale.ordering,
+      xScale: xScale,
+      chartType: 'bar'
+    });
+    showTooltip({
+      tooltipLeft: tooltipData == null ? void 0 : tooltipData.tooltipLeft,
+      tooltipTop: tooltipData == null ? void 0 : tooltipData.tooltipTop,
+      tooltipData: tooltipData == null ? void 0 : tooltipData.tooltipData
+    });
+  }, [showTooltip, xScale, margin, xKey, xScaleKey, xScaleDataType, formattedChartDataForBarChart.x.scale.ordering, formattedChartDataForBarChart.data]);
+  var handleMouseLeave = React.useCallback(function () {
+    hideTooltip();
+  }, [hideTooltip]);
+  var getXTickFormat = React.useCallback(function (value) {
+    var tick = null;
+    if (xScaleDataType === 'date_time' && value instanceof Date) {
+      var matchingTickValue = formattedChartDataForBarChart.x.ticks.find(function (tickValue) {
+        return tickValue.scaleValue && new Date(tickValue.scaleValue).valueOf() === value.valueOf();
+      });
+      tick = matchingTickValue || null;
+    } else {
+      var _matchingTickValue = formattedChartDataForBarChart.x.ticks.find(function (tickValue) {
+        return tickValue.scaleValue === value;
+      });
+      tick = _matchingTickValue || null;
+    }
+    if (tick) {
+      if (tick.formattedValue) {
+        return tick.formattedValue;
+      }
+      return tick.value.toString();
+    }
+    return '';
+  }, [formattedChartDataForBarChart.x.ticks, xScaleDataType]);
+  var getYTickFormat = React.useCallback(function (value) {
+    var item = formattedChartDataForBarChart.y.ticks.filter(function (tick) {
+      return tick.value === value;
+    })[0];
+    if (item) {
+      if (item.formattedValue) {
+        return item.formattedValue;
+      }
+      return item.value.toString();
+    }
+    return '';
+  }, [formattedChartDataForBarChart.y.ticks]);
+  var getBarGroupPosition = React.useCallback(function (d) {
+    if (xScaleKey == null || d == null) return;
+    var xValue = d[xScaleKey];
+    if (xScaleDataType === 'string') return xValue;
+    return;
+  }, [xScaleKey, xScaleDataType]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs("svg", {
+      width: width,
+      height: height - (options.showLegend ? 40 : 0),
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        display: 'block'
+      },
+      children: [jsxRuntime.jsxs(group.Group, {
+        left: margin.left,
+        top: margin.top,
+        children: [jsxRuntime.jsx(grid.GridRows, {
+          tickValues: yTickValues.length > 0 ? yTickValues : undefined,
+          scale: yScale,
+          width: innerWidth,
+          height: innerHeight,
+          pointerEvents: "none",
+          strokeDasharray: "0.5 5",
+          strokeWidth: options.removeStroke ? 0 : 2,
+          lineStyle: {
+            strokeLinecap: 'round',
+            stroke: themeCSS.grid.stroke
+          }
+        }), options.axis.showXAxisLabels && jsxRuntime.jsx(axis.AxisBottom, {
+          label: formattedChartDataForBarChart.x.title || undefined,
+          labelProps: {
+            style: AXIS_TITLE_STYLES$1
+          },
+          labelOffset: margin.bottomTitleOffset,
+          hideTicks: true,
+          top: innerHeight,
+          scale: xScale,
+          tickFormat: getXTickFormat,
+          tickValues: xTickValues,
+          tickComponent: function tickComponent(_ref2) {
+            var formattedValue = _ref2.formattedValue,
+              tickProps = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
+            return jsxRuntime.jsx(text$3.Text, _extends({
+              style: themeCSS.labels
+            }, tickProps, {
+              children: formattedValue
+            }));
+          },
+          stroke: themeCSS.axis.stroke,
+          strokeWidth: options.removeStroke ? 0 : 1
+        }), options.axis.showYAxisLabels && jsxRuntime.jsx(axis.AxisLeft, {
+          labelOffset: margin.leftTitleOffset,
+          label: formattedChartDataForBarChart.y.title || undefined,
+          labelProps: {
+            style: AXIS_TITLE_STYLES$1
+          },
+          hideTicks: true,
+          left: 0,
+          top: 0,
+          scale: yScale,
+          tickFormat: getYTickFormat,
+          tickValues: yTickValues,
+          tickComponent: function tickComponent(_ref3) {
+            var formattedValue = _ref3.formattedValue,
+              tickProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
+            return jsxRuntime.jsx(text$3.Text, _extends({
+              width: 10,
+              style: themeCSS.labels
+            }, tickProps, {
+              children: formattedValue
+            }));
+          },
+          stroke: (_theme$axis$stroke = theme == null || (_theme$axis = theme.axis) == null ? void 0 : _theme$axis.stroke) != null ? _theme$axis$stroke : 'transparent'
+        }), jsxRuntime.jsx(group.Group, {
+          children: jsxRuntime.jsx(shape.BarGroup, {
+            data: dataFlattened,
+            keys: yScaleKeys,
+            height: innerHeight,
+            x0: getBarGroupPosition
+            // @ts-ignore
+            ,
+            x0Scale: xScale
+            // @ts-ignore
+            ,
+            x1Scale: innerXScale,
+            yScale: yScale,
+            color: function color() {
+              return '';
+            },
+            children: function children(barGroups) {
+              return barGroups.map(function (barGroup) {
+                return jsxRuntime.jsx(group.Group, {
+                  left: barGroup.x0,
+                  children: barGroup.bars.map(function (bar) {
+                    return jsxRuntime.jsx(Bar$1, {
+                      bar: bar,
+                      barGroup: barGroup,
+                      yScale: yScale,
+                      formattedChartDataForBarChart: formattedChartDataForBarChart
+                    });
+                  })
+                }, "bar-group-" + barGroup.index + "-" + barGroup.x0);
+              });
+            }
+          })
+        })]
+      }), tooltipData && jsxRuntime.jsx("g", {
+        children: jsxRuntime.jsx(shape.Line, {
+          from: {
+            x: tooltipLeft,
+            y: margin.top
+          },
+          to: {
+            x: tooltipLeft,
+            y: innerHeight + margin.top
+          },
+          stroke: '#aaa',
+          strokeWidth: 2,
+          pointerEvents: "none",
+          opacity: 0.8
+        })
+      })]
+    }), jsxRuntime.jsx(Legend$2, {
+      showLegend: options.showLegend,
+      margin: margin
+    }), jsxRuntime.jsx(Tooltip$2, {
+      showTooltip: tooltipOpen,
+      tooltipData: tooltipData,
+      tooltipLeft: tooltipLeft,
+      tooltipTop: tooltipTop,
+      xKey: xKey,
+      yKey: yKey,
+      theme: themeCSS.popoverMenus
+    })]
+  });
+};
+var Bar$1 = function Bar(_ref4) {
+  var bar = _ref4.bar,
+    barGroup = _ref4.barGroup,
+    yScale = _ref4.yScale,
+    formattedChartDataForBarChart = _ref4.formattedChartDataForBarChart;
+  var step = formattedChartDataForBarChart.steps[barGroup.index];
+  var y = yScale(Math.max(step.start, step.end));
+  var barHeight = Math.abs(yScale(step.start) - yScale(step.end));
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsx("rect", {
+      x: bar.x,
+      y: y,
+      width: bar.width,
+      height: barHeight,
+      fill: getBarFill$1(formattedChartDataForBarChart.bars, formattedChartDataForBarChart.conditionalFormattingRules, bar.key, bar.value),
+      rx: 4
+    }, "bar-group-bar-" + barGroup.index + "-" + bar.index + "-" + bar.value + "-" + bar.key)
+  });
+};
+
 function getNiceInterval$2(interval) {
   // Round the interval to a "nice" value (1, 2, 5, etc.)
   var exponent = Math.floor(Math.log10(interval));
@@ -47092,7 +48304,7 @@ var WaterfallChartView = function WaterfallChartView(props) {
             overflowX: 'hidden'
           },
           children: function children(parent) {
-            return jsxRuntime.jsx(WaterfallChart$4.WaterfallChart, {
+            return jsxRuntime.jsx(WaterfallChart$2, {
               width: parent.width,
               height: parent.height,
               options: {
@@ -47117,7 +48329,7 @@ var WaterfallChartView = function WaterfallChartView(props) {
 };
 var WaterfallChartView$1 = /*#__PURE__*/React.memo(WaterfallChartView, shouldUpdate);
 
-var WaterfallChart$2 = function WaterfallChart(_ref) {
+var WaterfallChart$3 = function WaterfallChart(_ref) {
   var component = _ref.component,
     dataSet = _ref.dataSet,
     dashboardBehaviour = _ref.dashboardBehaviour,
@@ -47246,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) {
@@ -47614,7 +48850,7 @@ var Component = function Component(props) {
         });
       },
       onError: dashboardBehaviour.onError,
-      children: jsxRuntime.jsx(WaterfallChart$2, {
+      children: jsxRuntime.jsx(WaterfallChart$3, {
         id: props.id,
         dataSet: dataSet,
         setLocalFilters: props.setLocalFilters,
@@ -63834,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$3 = /*#__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';
   };
@@ -64246,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,
@@ -64258,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':
@@ -64292,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.';
   }
@@ -65859,7 +67111,7 @@ VizzlyServices.HorizontalBarChart = HorizontalBarChart$2;
 VizzlyServices.MercatorMap = MercatorMap$4;
 VizzlyServices.SingleStat = SingleStat$3;
 VizzlyServices.Progress = Progress$3;
-VizzlyServices.WaterfallChart = WaterfallChart$3;
+VizzlyServices.WaterfallChart = WaterfallChart$4;
 // @ts-ignore
 if (typeof window !== 'undefined' && !window.Vizzly) {
   // @ts-ignore
@@ -67170,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 = [];
@@ -68685,7 +69938,7 @@ var GlobalProviderContents = function GlobalProviderContents(props) {
   });
 };
 
-var _excluded$g = ["view"];
+var _excluded$h = ["view"];
 var Dashboard$2 = function Dashboard(props) {
   var handleOnError = function handleOnError(error, errorInfo) {
     return (props == null ? void 0 : props.onError) && (props == null ? void 0 : props.onError(error, errorInfo));
@@ -68706,7 +69959,7 @@ var Editor$1 = function Editor(props) {
   var handleOnError = function handleOnError(error, errorInfo) {
     return (props == null ? void 0 : props.onError) && (props == null ? void 0 : props.onError(error, errorInfo));
   };
-  var resetProps = _objectWithoutPropertiesLoose(props, _excluded$g);
+  var resetProps = _objectWithoutPropertiesLoose(props, _excluded$h);
   return jsxRuntime.jsxs(ErrorBoundary, {
     renderOnError: function renderOnError() {
       return jsxRuntime.jsx("p", {