@vizzly/dashboard 0.14.4-dev-a92622560305a2aadfb851574db2d2f43a80cb14 → 0.14.4-dev-f592adcabadc611d0e867520c138d5a939466968

package/dist/dashboard.esm.js

@@ -48,7 +48,6 @@ import { useWindowWidth } from '@react-hook/window-size';
 import copy from 'copy-to-clipboard';
 import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
-import { BubbleChart as BubbleChart$3 } from './charts/src/BubbleChart';
 import { RectClipPath } from '@visx/clip-path';
 import { localPoint } from '@visx/event';
 import { bisector } from '@visx/vendor/d3-array';
@@ -56,6 +55,7 @@ import { AxisBottom as AxisBottom$1, AxisLeft as AxisLeft$1 } from '@visx/axis';
 import { Text } from '@visx/text';
 import { GridRows as GridRows$1 } from '@visx/grid';
 import '@visx/point';
+import { AreaChartV2 as AreaChartV2$1 } from './charts/src/v2';
 import VisibilitySensor from 'react-visibility-sensor';
 import ExcelJS from 'exceljs';
 import { saveAs } from 'file-saver';
@@ -2723,6 +2723,7 @@ var timeDimensionQuerySchema = function timeDimensionQuerySchema(queryEngineConf
   });
 };
 var lineCurveSchema = /*#__PURE__*/Joi.string().valid('natural', 'straight', 'step', 'stepBefore', 'stepAfter', 'dotted');
+var areaCurveSchema = /*#__PURE__*/Joi.string().valid('natural', 'straight', 'step');
 var protectedFieldsMeasure = function protectedFieldsMeasure(queryEngineConfig) {
   var _Joi$string6;
   return Joi.array().items(Joi.object({
@@ -8163,7 +8164,7 @@ var RichText = function RichText(config) {
   };
 };
 
-var componentTypes = ['areaChart', 'barChart', 'basicTable', 'bubbleChart', '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', 'areaChartV2', 'barChartV2', 'mercatorMap', 'pieChart', 'progress', 'richText', 'scatterChart', 'singleStat', 'waterfallChart'];
 /** @deprecated */
 
 var ProgressType = /*#__PURE__*/function (ProgressType) {
@@ -8960,7 +8961,6 @@ var attributesSchema$e = function attributesSchema(config) {
 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);
@@ -9331,7 +9331,7 @@ var BubbleChart = function BubbleChart(config) {
 
 var attributesSchema$f = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
-    stacked: Joi.valid(true, false, '100%'),
+    stacked: Joi.valid(true, false),
     legend: Joi.valid(true, false),
     type: Joi.valid('barChartV2').required(),
     parameters: parametersSchema(config.queryEngineConfig, config.attributesSchemaOptions),
@@ -10011,6 +10011,379 @@ var WaterfallChart = function WaterfallChart(config) {
   };
 };
 
+var attributesSchema$h = function attributesSchema(config) {
+  return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
+    stacked: Joi.valid(true, false),
+    legend: Joi.valid(true, false),
+    type: Joi.valid('areaChartV2').required(),
+    parameters: parametersSchema(config.queryEngineConfig, config.attributesSchemaOptions),
+    lineCurve: areaCurveSchema,
+    conditionalFormattingRules: conditionalFormattingRulesSchema(config.queryEngineConfig),
+    goalLines: goalLinesSchema(),
+    axisTitles: axisTitleSchema(),
+    headline: headlineSchema(),
+    tags: tagsSchema(),
+    trends: trendsSchema()
+  }));
+};
+
+var setAttributes$g = (function (config) {
+  return function (lineChart, partial) {
+    var newAttributes = setAttributes(lineChart, partial, attributesSchema$h(config));
+    newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
+    return newAttributes;
+  };
+});
+
+var CONSTANTS$j = {
+  title: 'Area chart',
+  description: 'Ideal for illustrating changes and trends over time with area graphs.',
+  namespace: 'area_chart',
+  data_panel: {
+    data_set: {
+      type: 'dataSet',
+      title: 'Data set',
+      description: 'What data do you want to use in this area chart?'
+    },
+    views: {
+      type: 'views',
+      title: 'View',
+      description: ''
+    },
+    field_y_axis: {
+      type: 'fieldCollector',
+      title: 'Metric - Y Axis',
+      description: 'What do you want each area to measure?',
+      callToAction: 'Add metric'
+    },
+    drilldown: {
+      type: 'drilldown',
+      title: 'Drilldown',
+      description: 'After clicking on a segment of this area chart, what information do you want to see next?'
+    },
+    field_x_axis: {
+      type: 'fieldCollector',
+      title: 'Grouping - X Axis',
+      description: 'What do you want each area to represent? An example might be a `product category` field to represent each category as a area.',
+      callToAction: 'Add grouping'
+    },
+    sort: {
+      type: 'sort',
+      title: 'Sort',
+      description: 'Select the order of categories or time on the x Axis.'
+    },
+    filter: {
+      type: 'filter',
+      title: 'Filters',
+      description: 'Only include the information you want to use in this area chart.'
+    },
+    custom_metrics: {
+      type: 'customMetrics',
+      title: 'Custom metrics',
+      description: 'Build your own metrics, such as a percentage.'
+    },
+    limit: {
+      type: 'limit',
+      title: 'Limit',
+      description: 'Set the maximum number of records to show on this area 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: {
+        stacked: {
+          type: 'stacked',
+          title: 'Layout',
+          description: '',
+          namespace: 'stacked'
+        },
+        curve: {
+          type: 'curve',
+          title: 'Area Style',
+          description: '',
+          namespace: 'curve'
+        },
+        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'
+        }
+      }
+    },
+    conditional_formatting: {
+      type: 'conditionalFormatting',
+      title: 'Conditional Formatting',
+      description: ''
+    },
+    headline: {
+      type: 'headline',
+      title: 'Headarea',
+      description: ''
+    },
+    trends: {
+      type: 'trends',
+      title: 'Trend lines',
+      description: 'Specify a trend type for the area chart.'
+    },
+    goal_line: {
+      type: 'goalLine',
+      title: 'Goal lines',
+      description: ''
+    }
+  }
+};
+
+var AreaChart$1 = function AreaChart(config) {
+  return {
+    title: 'Area chart V2',
+    description: 'Ideal for illustrating changes and trends over time with area graphs.',
+    servicesClass: 'AreaChart',
+    namespace: 'area_chart',
+    dump: function dump(hydrated) {
+      return hydrated;
+    },
+    load: function load(dumped) {
+      var _dumped$tags, _dumped$trends;
+      return {
+        type: dumped.type,
+        measure: upcastMeasure(dumped.measure),
+        order: upcastOrder(dumped.order, dumped.timeDimension),
+        dimension: upcastStringDimensionsToObject(dumped.dimension),
+        // TODO: upcast dumped.timeDimension -> dimension
+        displayTitle: dumped.displayTitle,
+        displaySubject: dumped.displaySubject,
+        protectedByOrganisation: dumped.protectedByOrganisation,
+        viewId: upcastViewId(dumped.viewId),
+        filter: upcastFilter(dumped.filter),
+        dataSetId: dumped.dataSetId,
+        limit: dumped.limit,
+        timeDimension: null,
+        xAxisPostfix: dumped.xAxisPostfix,
+        xAxisPrefix: dumped.xAxisPrefix,
+        yAxisPostfix: dumped.yAxisPostfix,
+        yAxisPrefix: dumped.yAxisPrefix,
+        yAxisFormat: dumped.yAxisFormat,
+        xAxisFormat: dumped.xAxisFormat,
+        lineCurve: dumped.lineCurve,
+        conditionalFormattingRules: upcast$1(config.queryEngineConfig, dumped.conditionalFormattingRules),
+        drilldown: dumped.drilldown,
+        legend: dumped.legend,
+        goalLines: dumped.goalLines,
+        headline: upcastHeadline(dumped.headline, dumped.timeDimension),
+        parameters: upcastParameters(dumped.parameters),
+        approxXAxisLabelCount: upcastAxisLabel(dumped.approxXAxisLabelCount),
+        approxYAxisLabelCount: upcastAxisLabel(dumped.approxYAxisLabelCount),
+        axisTitles: dumped.axisTitles,
+        tags: (_dumped$tags = dumped.tags) != null ? _dumped$tags : [],
+        trends: (_dumped$trends = dumped.trends) != null ? _dumped$trends : [],
+        stacked: dumped.stacked
+      };
+    },
+    setAttributes: setAttributes$g(config),
+    validate: function validate(attrs, dataSets) {
+      return validateView(attrs, dataSets, config.queryEngineConfig);
+    },
+    init: function init(dataSetId, overrides) {
+      return _extends({
+        type: 'areaChartV2',
+        measure: [],
+        dimension: [],
+        timeDimension: null,
+        displayTitle: '',
+        displaySubject: '',
+        protectedByOrganisation: undefined,
+        viewId: upcastViewId(overrides == null ? void 0 : overrides.viewId),
+        filter: [],
+        order: [],
+        dataSetId: dataSetId,
+        limit: 5000,
+        xAxisPostfix: '',
+        xAxisPrefix: '',
+        yAxisPostfix: '',
+        yAxisPrefix: '',
+        yAxisFormat: null,
+        xAxisFormat: null,
+        lineCurve: 'natural',
+        conditionalFormattingRules: [],
+        drilldown: [],
+        legend: true,
+        goalLines: undefined,
+        approxXAxisLabelCount: 'auto',
+        approxYAxisLabelCount: 'auto',
+        parameters: {},
+        axisTitles: undefined,
+        headline: undefined,
+        tags: [],
+        trends: [],
+        stacked: false
+      }, overrides);
+    },
+    createFeedback: createFeedback,
+    schema: attributesSchema$h(config),
+    removeField: function removeField(attrs, fieldId) {
+      return removeField$1(attrs, fieldId, config.queryEngineConfig);
+    },
+    isRunnable: function isRunnable(hydrated) {
+      return hydrated.measure.length > 0 && hydrated.dimension.length > 0;
+    },
+    autoGenerate: function autoGenerate(dataSet) {
+      var _DataSet$buildQueryAt = buildQueryAttributes(dataSet, config.queryEngineConfig, 'lineChart'),
+        measure = _DataSet$buildQueryAt.measure,
+        dimension = _DataSet$buildQueryAt.dimension;
+      return this.init(dataSet.id, {
+        measure: [measure[0]],
+        dimension: dimension
+      });
+    },
+    dataPanelConfig: function dataPanelConfig() {
+      return [namespace(CONSTANTS$j, 'data_set'), namespace(CONSTANTS$j, 'views'), _extends({}, namespace(CONSTANTS$j, 'field_y_axis'), {
+        fieldFilterOptions: {
+          forComponent: 'lineChart'
+        },
+        preSetPartialAttributes: function preSetPartialAttributes(values) {
+          return {
+            measure: values
+          };
+        },
+        getValues: function getValues(attrs) {
+          return attrs.measure;
+        },
+        testId: 'metric-input'
+      }), _extends({}, namespace(CONSTANTS$j, 'field_x_axis'), {
+        fieldFilterOptions: {
+          forComponent: 'lineChart',
+          onlyDimensions: true
+        },
+        preventDuplicates: false,
+        // return all values in the dimension array instead of seperating out timeDimension
+        preSetPartialAttributes: function preSetPartialAttributes(values) {
+          return {
+            dimension: [].concat(values)
+          };
+        },
+        // does this need to be updated too?
+        getValues: function getValues(attrs) {
+          return [].concat(attrs.dimension);
+        },
+        maxAllowed: 2,
+        testId: 'add-dimension'
+      }), namespace(CONSTANTS$j, 'sort'), namespace(CONSTANTS$j, 'filter'), namespace(CONSTANTS$j, 'custom_metrics'), namespace(CONSTANTS$j, 'limit')];
+    },
+    formatPanelConfig: function formatPanelConfig() {
+      return [headingConstant(CONSTANTS$j), chartStylesConstant(CONSTANTS$j, true, false), axisLabelsConstants(CONSTANTS$j), _extends({}, namespace(CONSTANTS$j, 'conditional_formatting'), {
+        ruleType: 'lineColor'
+      }), namespace(CONSTANTS$j, 'goal_line')];
+    },
+    supportedCustomFields: {
+      calculatedField: false,
+      percentages: true,
+      dateCalculations: true,
+      simpleMaths: true,
+      rules: true,
+      aggregateMaths: true,
+      roundedNumbers: true,
+      conditional: true
+    },
+    supportedFeatures: {
+      parameters: true,
+      colorGradient: false
+    },
+    setDataAttributesFromPreAggregatedDataSet: function setDataAttributesFromPreAggregatedDataSet$1(attributes, dataSet) {
+      return setDataAttributesFromPreAggregatedDataSet(attributes, dataSet, this.setAttributes);
+    }
+  };
+};
+
 var EMPTY_CONFIG = {
   queryEngineConfig: {
     supportedFeatures: [],
@@ -10037,6 +10410,7 @@ function getComponentInterface(type, config) {
   if (type == 'lineChart') return textOverrideComponent(LineChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'lineChartV2') return textOverrideComponent(LineChart$1(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'barChartV2') return textOverrideComponent(BarChart$1(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
+  if (type == 'areaChartV2') return textOverrideComponent(AreaChart$1(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'mercatorMap') return textOverrideComponent(MercatorMap(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'pieChart') return textOverrideComponent(PieChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'progress') return textOverrideComponent(Progress(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
@@ -13193,7 +13567,7 @@ var buildDefaults = function buildDefaults(partialFeatureToggles) {
   };
 };
 
-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_COMPONENT_TYPES = ['barChart', 'bubbleChart', 'horizontalBarChart', 'funnelChart', 'areaChart', 'areaChartV2', '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';
 });
@@ -13533,7 +13907,7 @@ var saveable = function saveable(component, protectedComponent) {
   };
 };
 
-var attributesSchema$h = function attributesSchema(config) {
+var attributesSchema$i = function attributesSchema(config) {
   return Joi.alternatives().conditional('.type', {
     is: 'barChart',
     then: BarChart(config).schema
@@ -13555,6 +13929,9 @@ var attributesSchema$h = function attributesSchema(config) {
   }).conditional('.type', {
     is: 'barChartV2',
     then: BarChart$1(config).schema
+  }).conditional('.type', {
+    is: 'areaChartV2',
+    then: AreaChart$1(config).schema
   }).conditional('.type', {
     is: 'comboChart',
     then: ComboChart(config).schema
@@ -20933,7 +21310,7 @@ var Combobox = function Combobox(props) {
   });
 };
 
-var attributesSchema$i = /*#__PURE__*/Joi.object({
+var attributesSchema$j = /*#__PURE__*/Joi.object({
   displayTitle: /*#__PURE__*/Joi.string().min(1).required(),
   colSpan: /*#__PURE__*/Joi.number().valid(12).required()
 });
@@ -20950,7 +21327,7 @@ var isEmptyCell = /*#__PURE__*/Joi.object({
 });
 var isPopulatedCell = function isPopulatedCell(queryEngineConfig) {
   return Joi.object({
-    attributes: attributesSchema$h({
+    attributes: attributesSchema$i({
       queryEngineConfig: queryEngineConfig
     }),
     colSpan: colSpanSchema
@@ -20961,7 +21338,7 @@ var saveableDashboardDefinitionSchema = function saveableDashboardDefinitionSche
     id: Joi.string(),
     display: displaySchema(queryEngineConfig),
     componentLibrary: Joi.array().required().items(Joi.object({
-      attributes: attributesSchema$h({
+      attributes: attributesSchema$i({
         queryEngineConfig: queryEngineConfig
       })
     })),
@@ -20972,7 +21349,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$i))
+    components: Joi.array().required().min(1).items(Joi.alternatives(isEmptyCell, isPopulatedCell(queryEngineConfig), attributesSchema$j))
   }));
 }
 
@@ -21694,7 +22071,7 @@ var setHeaderComponent = function setHeaderComponent(state, action) {
   newDisplayState.dashboard.display[rowIndex].components[cellIndex] = component;
   return newDisplayState;
 };
-var setAttributes$g = function setAttributes(state, action) {
+var setAttributes$h = function setAttributes(state, action) {
   var attributes = action.attributes,
     rowIndex = action.rowIndex,
     cellIndex = action.cellIndex;
@@ -21979,7 +22356,7 @@ var reducer = function reducer(pipelineTransformationOptions) {
         case 'swapComponents':
           return swapComponents$1(state, action);
         case 'setAttributes':
-          return setAttributes$g(state, action);
+          return setAttributes$h(state, action);
         case 'addComponentToLibrary':
           return addComponentToLibrary(state, action);
         case 'setLocalFilters':
@@ -25324,7 +25701,7 @@ var RichText$1 = function RichText(props) {
     })
   }));
 };
-var AreaChart$1 = function AreaChart(props) {
+var AreaChart$2 = function AreaChart(props) {
   return jsx("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
@@ -25593,7 +25970,10 @@ var WaterfallChart$1 = function WaterfallChart(props) {
 
 var componentTypeToIconMapping = {
   areaChart: function areaChart(props) {
-    return AreaChart$1(props);
+    return AreaChart$2(props);
+  },
+  areaChartV2: function areaChartV2(props) {
+    return AreaChart$2(props);
   },
   barChart: function barChart(props) {
     return BarChart$2(props);
@@ -32701,7 +33081,7 @@ var VizzlyXYChart = function VizzlyXYChart(props) {
   });
 };
 
-var AreaChart$2 = /*#__PURE__*/forwardRef(function (props, ref) {
+var AreaChart$3 = /*#__PURE__*/forwardRef(function (props, ref) {
   var forceRerender = useChartForceRerender(ref);
   if (forceRerender) return null;
   return jsx(ParentSize, {
@@ -33652,7 +34032,7 @@ var AreaChartView = function AreaChartView(props) {
         paddingBottom: showHeadline ? '0.5rem' : undefined
       })), showHeadline && jsx(HeadlineStats, _extends({}, props.propsForHeadline)), jsx(ChartWrapper, {
         disabledFeatures: (_props$library2 = props == null ? void 0 : props.library) != null ? _props$library2 : false,
-        children: jsx(AreaChart$2, {
+        children: jsx(AreaChart$3, {
           approxXAxisLabelCount: props.approxXAxisLabelCount,
           approxYAxisLabelCount: props.approxYAxisLabelCount,
           ref: ref,
@@ -33786,7 +34166,7 @@ var isDrilldownAvailable = function isDrilldownAvailable(props) {
   return (props == null || (_props$component = props.component) == null || (_props$component = _props$component.attributes) == null || (_props$component = _props$component.drilldown) == null ? void 0 : _props$component.length) > 0;
 };
 
-var AreaChart$3 = function AreaChart(props) {
+var AreaChart$4 = function AreaChart(props) {
   var _props$dashboardBehav;
   var _useState = useState(null),
     onDrilldown = _useState[0],
@@ -40784,6 +41164,259 @@ var IconText = function IconText(props) {
   });
 };
 
+var accessors$1 = function accessors(xAxisIsTime, xKey, yKey, horizontal) {
+  return {
+    xAccessor: function xAccessor(d) {
+      return d ? horizontal ? d[yKey] : xAxisIsTime ? new Date(d[xKey]) : d[xKey] : undefined;
+    },
+    yAccessor: function yAccessor(d) {
+      return d ? horizontal ? xAxisIsTime ? new Date(d[xKey]) : d[xKey] : d[yKey] : undefined;
+    }
+  };
+};
+var DEFAULT_Y_AXIS_LABEL_COUNT$1 = 5;
+var VizzlyBubbleChart = function VizzlyBubbleChart(props) {
+  var _props$height, _theme$axis$stroke, _theme$axis, _ref, _props$lines$data$len, _props$lines, _props$areas, _props$bars, _props$forceXAxisAsTi, _props$bars2, _props$lines2, _theme$grid$stroke, _theme$grid, _props$axisTitles, _props$axisTitles2, _props$axisTitles3, _props$axisTitles4, _props$bars3, _props$bars4, _props$bars5;
+  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,
+    _props$approxXAxisLab = props.approxXAxisLabelCount,
+    approxXAxisLabelCount = _props$approxXAxisLab === void 0 ? 'auto' : _props$approxXAxisLab,
+    _props$removeStroke = props.removeStroke,
+    removeStroke = _props$removeStroke === void 0 ? false : _props$removeStroke,
+    _props$horizontal = props.horizontal,
+    horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
+    theme = props.theme,
+    x = props.x;
+  var xAxisIsTime = isXAxisTime(props.x, props.forceXAxisAsTime, props.bars, props.lines, props.areas);
+  var axisLabelStyles = function axisLabelStyles(horizontal, labelTheme) {
+    var _labelTheme$color, _labelTheme$fontSize, _labelTheme$fontWeigh, _labelTheme$fontFamil;
+    return {
+      fill: (_labelTheme$color = labelTheme == null ? void 0 : labelTheme.color) != null ? _labelTheme$color : 'rgba(0, 0, 0, 0.6)',
+      fontSize: (_labelTheme$fontSize = labelTheme == null ? void 0 : labelTheme.fontSize) != null ? _labelTheme$fontSize : 9,
+      fontWeight: (_labelTheme$fontWeigh = labelTheme == null ? void 0 : labelTheme.fontWeight) != null ? _labelTheme$fontWeigh : 700,
+      fontFamily: (_labelTheme$fontFamil = labelTheme == null ? void 0 : labelTheme.fontFamily) != null ? _labelTheme$fontFamil : DEFAULT_CHART_FONT,
+      textAnchor: horizontal ? 'end' : 'middle',
+      scaleToFit: 'shrink-only'
+    };
+  };
+  var _useXAxisLabelCount = useXAxisLabelCount(approxXAxisLabelCount, !(props != null && props.horizontal) && (props == null ? void 0 : props.forceXAxisAsTime)),
+    widthRef = _useXAxisLabelCount[0],
+    approximateXTickCount = _useXAxisLabelCount[1];
+  var _useState = useState(undefined),
+    nearestDatum = _useState[0];
+  var _useState2 = useState(undefined),
+    nearestTooltipDatums = _useState2[0];
+  var colors = getConcatenatedProperties(props, 'colors');
+  var customTheme = buildChartTheme(_extends({}, lightTheme, {
+    colors: colors,
+    tickLength: 0,
+    gridColor: '',
+    gridColorDark: ''
+  }));
+  var chartData = getConcatenatedProperties(props, 'data');
+  var axisStrokeColor = (_theme$axis$stroke = theme == null || (_theme$axis = theme.axis) == null ? void 0 : _theme$axis.stroke) != null ? _theme$axis$stroke : '#eaeaea';
+  var _getAxisType = getAxisType(approxXAxisLabelCount, approxYAxisLabelCount),
+    xAxisType = _getAxisType.xAxisType,
+    xAxisAttributes = _getAxisType.xAxisAttributes,
+    yAxisType = _getAxisType.yAxisType;
+  var numberOfXAxisPoints = (_ref = (_props$lines$data$len = props == null || (_props$lines = props.lines) == null ? void 0 : _props$lines.data.length) != null ? _props$lines$data$len : props == null || (_props$areas = props.areas) == null || (_props$areas = _props$areas.data) == null ? void 0 : _props$areas.length) != null ? _ref : (_props$bars = props.bars) == null ? void 0 : _props$bars.data.length;
+  var _useMinMaxValue = useMinMaxValue(props),
+    maxValue = _useMinMaxValue.maxValue,
+    minValue = _useMinMaxValue.minValue;
+  var leftWidth = getYAxisWidth(horizontal, (_props$forceXAxisAsTi = props.forceXAxisAsTime) != null ? _props$forceXAxisAsTi : false, props, theme, getConcatenatedProperties(props, 'data'), props.x);
+  var margin = props.sparkline ? NO_MARGIN(props.yAxisOrientation !== 'right') : getDefaultMargins(horizontal, props.yAxisOrientation !== 'right', xAxisType, props == null ? void 0 : props.axisTitles, leftWidth);
+  var getTrendLineStyle = function getTrendLineStyle(datumKey) {
+    if (props.trends) {
+      var _props$trends, _strokeDasharrayToBor, _indicatorProperties$, _indicatorProperties$2, _indicatorProperties$3, _indicatorProperties$4, _indicatorProperties$5, _indicatorProperties$6, _indicatorProperties$7, _indicatorProperties$8, _indicatorProperties$9;
+      var indicatorKeyIndex = (_props$trends = props.trends) == null ? void 0 : _props$trends.keys.indexOf(datumKey);
+      var indicatorProperties = props.trends;
+      return {
+        borderStyle: (_strokeDasharrayToBor = strokeDasharrayToBorderStyle((_indicatorProperties$ = indicatorProperties.strokeDasharray) == null ? void 0 : _indicatorProperties$[indicatorKeyIndex])) != null ? _strokeDasharrayToBor : 'dotted',
+        borderWidth: 0,
+        marginTop: (_indicatorProperties$2 = (_indicatorProperties$3 = indicatorProperties.strokeWidth) == null ? void 0 : _indicatorProperties$3[indicatorKeyIndex]) != null ? _indicatorProperties$2 : 2,
+        borderTopWidth: (_indicatorProperties$4 = (_indicatorProperties$5 = indicatorProperties.strokeWidth) == null ? void 0 : _indicatorProperties$5[indicatorKeyIndex]) != null ? _indicatorProperties$4 : 2,
+        borderColor: (_indicatorProperties$6 = (_indicatorProperties$7 = indicatorProperties.colors) == null ? void 0 : _indicatorProperties$7[indicatorKeyIndex]) != null ? _indicatorProperties$6 : '#1E1D2D',
+        opacity: (_indicatorProperties$8 = (_indicatorProperties$9 = indicatorProperties.opacity) == null ? void 0 : _indicatorProperties$9[indicatorKeyIndex]) != null ? _indicatorProperties$8 : 1
+      };
+    }
+    return undefined;
+  };
+  return jsxs("div", {
+    ref: widthRef,
+    style: {
+      position: 'relative',
+      height: height
+    },
+    className: "vizzly-xy-chart" + (props != null && (_props$bars2 = props.bars) != null && _props$bars2.funnelChart ? ' vizzly-xy-chart-funnel' : ''),
+    "data-testid": "vizzly-" + (props == null ? void 0 : props.uniqueId) + "-chart",
+    children: [jsxs(XYChart, {
+      theme: customTheme,
+      margin: margin,
+      height: height,
+      xScale: getScale('x', horizontal, xAxisIsTime, props == null || (_props$lines2 = props.lines) == null ? void 0 : _props$lines2.scatter, !!(props != null && props.lines) || !!(props != null && props.areas)),
+      yScale: getYScale(props == null ? void 0 : props.goalLine, maxValue, minValue, horizontal, xAxisIsTime),
+      horizontal: horizontal,
+      onPointerUp: function onPointerUp(params) {
+        return props == null ? void 0 : props.onClick(nearestDatum, nearestTooltipDatums, params);
+      },
+      children: [jsx(Grid$1, {
+        columns: horizontal,
+        rows: !horizontal,
+        stroke: "black",
+        strokeDasharray: "0.5 5",
+        strokeWidth: removeStroke ? 0 : 2,
+        lineStyle: {
+          strokeLinecap: 'round',
+          stroke: (_theme$grid$stroke = theme == null || (_theme$grid = theme.grid) == null ? void 0 : _theme$grid.stroke) != null ? _theme$grid$stroke : 'rgba(200, 200, 200, 0.2)'
+        }
+      }), !(props != null && props.sparkline) && jsxs(Fragment$1, {
+        children: [xAxisType !== 'none' && jsx(Axis, _extends({}, xAxisAttributes, {
+          tickLabelProps: function tickLabelProps() {
+            var tickLabelProps = _extends({}, axisLabelStyles(horizontal, theme == null ? void 0 : theme.labels));
+            if (!horizontal) {
+              tickLabelProps['y'] = 15;
+            }
+            return tickLabelProps;
+          },
+          numTicks: xAxisType === 'end2end' ? numberOfXAxisPoints : approximateXTickCount,
+          strokeWidth: removeStroke ? 0 : 1,
+          tickStroke: "#eaeaea",
+          stroke: horizontal ? 'transparent' : axisStrokeColor,
+          orientation: horizontal ? 'left' : 'bottom',
+          tickFormat: handleFormatXAxisLabel(props.formatXAxisLabel, props.forceXAxisAsTime || xAxisIsTime, chartData),
+          label: horizontal ? props == null || (_props$axisTitles = props.axisTitles) == null ? void 0 : _props$axisTitles.y : props == null || (_props$axisTitles2 = props.axisTitles) == null ? void 0 : _props$axisTitles2.x,
+          children: function children(axisProps) {
+            return jsx(XAxis, _extends({}, axisProps, {
+              theme: theme,
+              type: xAxisType,
+              uniqueId: props == null ? void 0 : props.uniqueId,
+              chartWidth: props == null ? void 0 : props.width,
+              xAxisIsTime: !!props.forceXAxisAsTime,
+              leftPanelWidth: leftWidth,
+              axisHorizontal: props == null ? void 0 : props.horizontal
+            }));
+          }
+        })), jsx(Axis, {
+          labelOffset: 50,
+          tickLabelProps: function tickLabelProps() {
+            var tickLabelProps = _extends({}, axisLabelStyles(horizontal, theme == null ? void 0 : theme.labels));
+            if (!horizontal && props.yAxisOrientation !== 'right') {
+              tickLabelProps['width'] = LEFT_PANEL_WIDTH;
+              tickLabelProps['textAnchor'] = 'middle';
+            }
+            return tickLabelProps;
+          },
+          hideAxisLine: true,
+          numTicks: approxYAxisLabelCount === 'auto' ? DEFAULT_Y_AXIS_LABEL_COUNT$1 : approxYAxisLabelCount,
+          strokeWidth: removeStroke ? 0 : 1,
+          hideTicks: true,
+          tickLength: !props.horizontal && props.yAxisOrientation !== 'right' ? LEFT_PANEL_WIDTH / 2 : 10,
+          stroke: axisStrokeColor,
+          orientation: horizontal ? 'bottom' : props.yAxisOrientation || 'left',
+          tickFormat: formatYAxisLabel$1(props),
+          label: horizontal ? props == null || (_props$axisTitles3 = props.axisTitles) == null ? void 0 : _props$axisTitles3.x : props == null || (_props$axisTitles4 = props.axisTitles) == null ? void 0 : _props$axisTitles4.y,
+          children: function children(axisProps) {
+            return jsx(YAxis, _extends({}, axisProps, {
+              theme: theme,
+              type: yAxisType,
+              horizontal: horizontal,
+              maxValueOfYAxis: props != null && props.formatYAxisLabel ? props == null ? void 0 : props.formatYAxisLabel(maxValue) : maxValue,
+              uniqueId: props == null ? void 0 : props.uniqueId
+            }));
+          }
+        })]
+      }), jsx("style", {
+        children: "\n        .visx-bar-stack .visx-bar {\n          stroke: #fff;\n          stroke-width: 2px;\n        }\n        .vizzly-xy-chart-funnel .visx-bar-stack .visx-bar {\n          stroke-width: 0;\n        }\n        .visx-tooltip-glyph svg {\n          max-width: 10px\n          height: 10px;\n        }\n        " + TOOLTIP_ZINDEX + "\n        "
+      }), props.lines && props.lines.keys.map(function (key, keyIndex) {
+        var _props$lines3, _props$lines4;
+        return jsx(GlyphSeries, _extends({
+          size: function size(datum) {
+            if (!datum || !datum.bubbleSize) return 5;
+            return datum.bubbleSize;
+          },
+          dataKey: key,
+          data: (_props$lines3 = props.lines) == null ? void 0 : _props$lines3.data
+        }, accessors$1(xAxisIsTime, x, key, horizontal), {
+          colorAccessor: (props == null || (_props$lines4 = props.lines) == null ? void 0 : _props$lines4.formatter) && getColorFromDatum(key, props == null ? void 0 : props.lines.formatter, colors, keyIndex)
+        }), "scatter_chart_" + props.uniqueId + "_" + keyIndex);
+      })]
+    }), (props == null ? void 0 : props.legend) && jsx(Legend, {
+      funnelChart: props == null || (_props$bars3 = props.bars) == null ? void 0 : _props$bars3.funnelChart
+      // groupingCount={props}
+      ,
+      keys: getConcatenatedProperties(props, 'keys'),
+      colors: colors,
+      typeIndex: getTypeIndex(props),
+      formatSeriesName: props == null ? void 0 : props.formatSeriesName,
+      formatter: props == null || (_props$bars4 = props.bars) == null ? void 0 : _props$bars4.formatter,
+      data: (_props$bars5 = props.bars) == null ? void 0 : _props$bars5.data,
+      conditionalFormattingPossibilities: props.conditionalFormattingPossibilities,
+      getIndicatorStyles: getTrendLineStyle
+    })]
+  });
+};
+
+var BubbleChart$2 = /*#__PURE__*/forwardRef(function (props, ref) {
+  var zValues = props.z ? props.data.map(function (d) {
+    return d[props.z];
+  }) : [];
+  var normaliseArray = function normaliseArray(array, min, max) {
+    var arrayMin = Math.min.apply(Math, array);
+    var arrayMax = Math.max.apply(Math, array);
+    return array.map(function (value) {
+      return (value - arrayMin) / (arrayMax - arrayMin) * (max - min) + min;
+    });
+  };
+  var scaledSizeValues = normaliseArray(zValues, 1, 30);
+  var data = props.data.map(function (d, i) {
+    return _extends({}, d, {
+      bubbleSize: scaledSizeValues[i]
+    });
+  });
+  var forceRerender = useChartForceRerender(ref);
+  if (forceRerender) return null;
+  return jsx(ParentSize, {
+    children: function children(parent) {
+      var _props$height, _props$width;
+      return jsx(VizzlyBubbleChart, {
+        isBubble: true,
+        approxXAxisLabelCount: props.approxXAxisLabelCount,
+        approxYAxisLabelCount: props.approxYAxisLabelCount,
+        uniqueId: props.uniqueId,
+        formatSeriesName: props.formatSeriesName,
+        forceXAxisAsTime: props.forceXAxisAsTime,
+        sparkline: props.sparkline,
+        lines: {
+          annotate: props.annotate || [],
+          data: data,
+          keys: props.keys,
+          colors: props.colors,
+          scatter: true
+        },
+        x: props.x,
+        z: props.z,
+        sharedTooltip: true,
+        legend: props.legend,
+        removeStroke: props == null ? void 0 : props.removeStroke,
+        formatXAxisLabel: props == null ? void 0 : props.formatXAxisLabel,
+        formatYAxisLabel: props == null ? void 0 : props.formatYAxisLabel,
+        horizontal: props == null ? void 0 : props.horizontal,
+        height: (_props$height = props == null ? void 0 : props.height) != null ? _props$height : parent == null ? void 0 : parent.height,
+        width: (_props$width = props == null ? void 0 : props.width) != null ? _props$width : parent == null ? void 0 : parent.width,
+        theme: props == null ? void 0 : props.theme,
+        onClick: function onClick(datum) {
+          return (props == null ? void 0 : props.onClick) && (props == null ? void 0 : props.onClick(datum));
+        },
+        goalLine: props == null ? void 0 : props.goalLine,
+        axisTitles: props == null ? void 0 : props.axisTitles,
+        idPrefix: props == null ? void 0 : props.idPrefix,
+        popOverMenuStyles: props.popOverMenuStyles
+      });
+    }
+  });
+});
+
 var defaultProps$6 = {
   type: 'bubbleChart',
   xMeasure: null,
@@ -40871,7 +41504,7 @@ var BubbleChartView = function BubbleChartView(props) {
       queriesAreChanging: props.queriesAreChanging,
       children: [jsx(ViewHeader, _extends({}, headerProps)), jsx(ChartWrapper, {
         disabledFeatures: (_props$library2 = props.library) != null ? _props$library2 : false,
-        children: jsx(BubbleChart$3, {
+        children: jsx(BubbleChart$2, {
           ref: ref,
           approxXAxisLabelCount: props.approxXAxisLabelCount,
           approxYAxisLabelCount: props.approxYAxisLabelCount,
@@ -40916,7 +41549,7 @@ var BubbleChartView = function BubbleChartView(props) {
 BubbleChartView.defaultProps = defaultProps$6;
 var memoized$4 = /*#__PURE__*/memo(BubbleChartView, shouldUpdate);
 
-var BubbleChart$2 = function BubbleChart(props) {
+var BubbleChart$3 = function BubbleChart(props) {
   var _props$dashboardBehav;
   var _props$component = props.component,
     results = _props$component.results,
@@ -41668,6 +42301,22 @@ function howManyTicksFitInWidth(ticks, maxWidth, avgCharWidth) {
   }
   return fittedTicks.length;
 }
+function howManyTicksFitInHeight(ticks, height) {
+  if (height > 180) return undefined;
+  var currentHeight = 0;
+  var fittedTicks = 0;
+  var ASSUMED_AVERAGE_CHAR_HEIGHT = 28;
+  for (var i = 0; i < ticks.length; i++) {
+    var wordHeight = ASSUMED_AVERAGE_CHAR_HEIGHT;
+    if (currentHeight + wordHeight <= height) {
+      fittedTicks++;
+      currentHeight += wordHeight;
+    } else {
+      break;
+    }
+  }
+  return fittedTicks;
+}
 function pickEquallySpaced(arr, numPicks) {
   if (numPicks >= arr.length) {
     return arr; // If numPicks is greater than or equal to the array length, return the whole array
@@ -41680,17 +42329,22 @@ function pickEquallySpaced(arr, numPicks) {
   }
   return result;
 }
-var adjustTicks = function adjustTicks(chartRepresentation, width) {
-  chartRepresentation = cloneDeep(chartRepresentation);
+function adjustTicks(representation, width, height) {
+  representation = cloneDeep(representation);
 
   // TODO; take this from the theme override...
   var averageCharacterWidth = ASSUMED_AVERAGE_CHAR_WIDTH;
-  var numberOfTicksFittingIntoSpace = howManyTicksFitInWidth(chartRepresentation.x.ticks || [], width, averageCharacterWidth);
+  var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth(representation.x.ticks || [], width, averageCharacterWidth);
+  var numberOfYTicksFittingIntoSpace = howManyTicksFitInHeight(representation.y.ticks || [], height);
 
   // @ts-ignore
-  chartRepresentation.x.ticks = pickEquallySpaced(chartRepresentation.x.ticks, numberOfTicksFittingIntoSpace);
-  return chartRepresentation;
-};
+  representation.x.ticks = pickEquallySpaced(representation.x.ticks, numberOfXTicksFittingIntoSpace);
+  if (numberOfYTicksFittingIntoSpace) {
+    // @ts-ignore
+    representation.y.ticks = pickEquallySpaced(representation.y.ticks, numberOfYTicksFittingIntoSpace);
+  }
+  return representation;
+}
 
 var buildMargin = function buildMargin(yTicks, showYAxisLabels, hasYAxisTitle, hasXAxisTitle) {
   var maxWidth = max(yTicks.map(function (tick) {
@@ -42660,135 +43314,6 @@ function getStyleDefinition(_ref) {
   });
 }
 
-var getMinAndMax = function getMinAndMax(_ref) {
-  var data = _ref.data,
-    keys = _ref.keys,
-    dataType = _ref.dataType,
-    goalLines = _ref.goalLines;
-  if (keys.length === 0) return {
-    max: null,
-    min: null
-  };
-  if (dataType === 'date_time') {
-    var dataToAnalyse = [].concat(data.flatMap(function (dataItem) {
-      return keys.map(function (key) {
-        return dataItem[key] ? new Date(dataItem[key].value).valueOf() : 0;
-      });
-    }));
-    return {
-      max: Math.max.apply(Math, dataToAnalyse),
-      min: Math.min.apply(Math, dataToAnalyse)
-    };
-  } else if (dataType === 'number') {
-    var _dataToAnalyse = [].concat(data.flatMap(function (dataItem) {
-      return keys.map(function (key) {
-        return dataItem[key] ? dataItem[key].value : 0;
-      });
-    }), goalLines ? goalLines.map(function (gL) {
-      return gL.value;
-    }) : []);
-    return {
-      max: Math.max.apply(Math, _dataToAnalyse),
-      min: Math.min.apply(Math, _dataToAnalyse)
-    };
-  } else {
-    return {
-      max: null,
-      min: null
-    };
-  }
-};
-
-function getNiceInterval(interval) {
-  // Round the interval to a "nice" value (1, 2, 5, etc.)
-  var exponent = Math.floor(Math.log10(interval));
-  var fraction = interval / Math.pow(10, exponent);
-  var niceFraction;
-  if (fraction <= 1.5) niceFraction = 1;else if (fraction <= 3) niceFraction = 2;else if (fraction <= 7) niceFraction = 5;else niceFraction = 10;
-  return niceFraction * Math.pow(10, exponent);
-}
-var getScaleAndTicks = function getScaleAndTicks(_ref) {
-  var _order$;
-  var data = _ref.data,
-    xKey = _ref.xKey,
-    yKeys = _ref.yKeys,
-    xScaleDataType = _ref.xScaleDataType,
-    nullValue = _ref.nullValue,
-    tickCountYAxis = _ref.tickCountYAxis,
-    formattingFunctionX = _ref.formattingFunctionX,
-    formattingFunctionY = _ref.formattingFunctionY,
-    order = _ref.order,
-    goalLines = _ref.goalLines;
-  var xTicks = [];
-  var yTicks = [];
-  var xScale = {
-    dataType: xScaleDataType,
-    key: xKey,
-    ordering: ((_order$ = order[0]) == null ? void 0 : _order$.direction) || null
-  };
-  var x = getMinAndMax({
-    data: data,
-    keys: xScale.key === null ? [] : [xScale.key],
-    dataType: xScale.dataType
-  });
-  if (xKey) {
-    xTicks = data.map(function (dataItem) {
-      var _dataItem$xKey, _dataItem$xScale$key, _dataItem$xScale$key2;
-      var xValue = (_dataItem$xKey = dataItem[xKey]) != null && _dataItem$xKey.value ? dataItem[xKey].value : null;
-      var xformattedValue = formattingFunctionX(xValue, nullValue);
-      var xScaleValue = xScale.key !== null && (_dataItem$xScale$key = dataItem[xScale.key]) != null && _dataItem$xScale$key.value ? (_dataItem$xScale$key2 = dataItem[xScale.key]) == null ? void 0 : _dataItem$xScale$key2.value : '';
-      var xScaleValueAdjusted = xScale.dataType === 'date_time' ? new Date(xScaleValue) : xScale.dataType === 'string' ? String(xScaleValue) : xScale.dataType === 'number' ? Number(xScaleValue) : xScaleValue;
-      return {
-        value: xValue !== null ? xValue : '',
-        formattedValue: xformattedValue !== null ? "" + xformattedValue : null,
-        scaleValue: xScaleValueAdjusted
-      };
-    });
-  }
-  // ----- Y Axis ("number") -----
-
-  var y = getMinAndMax({
-    data: data,
-    keys: yKeys,
-    dataType: 'number',
-    goalLines: goalLines
-  });
-  var maxY = y.max || 0;
-  var minY = Math.min(y.min || 0, 0);
-  var yTickInterval = getNiceInterval((maxY - minY) / (tickCountYAxis - 1));
-  for (var i = 0; i < tickCountYAxis; i++) {
-    var _value = yTickInterval * i;
-    var formattedValue = formattingFunctionY(_value, nullValue);
-    yTicks.push({
-      value: _value,
-      formattedValue: formattedValue,
-      scaleValue: _value
-    });
-  }
-  return {
-    x: {
-      ticks: xTicks,
-      scale: {
-        dataType: xScale.dataType,
-        max: x.max,
-        min: x.min,
-        key: xScale.key,
-        ordering: xScale.ordering
-      }
-    },
-    y: {
-      ticks: yTicks,
-      scale: {
-        dataType: 'number',
-        key: null,
-        ordering: 'asc',
-        max: maxY,
-        min: minY
-      }
-    }
-  };
-};
-
 /**
  * When provided with a result, and formatting parameters, it returns a
  * populated result including the formatted value to show.
@@ -43237,6 +43762,180 @@ function buildFieldFormatMaps(result, pivotConfig, xAxisPrefix, xAxisPostfix, xA
   };
 }
 
+var getStackedMinAndMax = function getStackedMinAndMax(_ref) {
+  var data = _ref.data,
+    keys = _ref.keys,
+    dataType = _ref.dataType,
+    goalLines = _ref.goalLines,
+    stacked = _ref.stacked;
+  if (keys.length === 0) return {
+    max: null,
+    min: null
+  };
+  if (stacked) {
+    var totals = data.map(function (dataItem) {
+      return keys.reduce(function (sum, key) {
+        var value = dataItem[key] ? dataItem[key].value : 0;
+        return sum + (typeof value === 'number' ? value : 0);
+      }, 0);
+    });
+    var maxTotal = Math.max.apply(Math, totals);
+    var minTotal = Math.min.apply(Math, totals);
+    return {
+      max: maxTotal,
+      min: minTotal
+    };
+  }
+  if (dataType === 'date_time') {
+    var dataToAnalyse = [].concat(data.flatMap(function (dataItem) {
+      return keys.map(function (key) {
+        return dataItem[key] ? new Date(dataItem[key].value).valueOf() : 0;
+      });
+    }));
+    return {
+      max: Math.max.apply(Math, dataToAnalyse),
+      min: Math.min.apply(Math, dataToAnalyse)
+    };
+  } else if (dataType === 'number') {
+    var _dataToAnalyse = [].concat(data.flatMap(function (dataItem) {
+      return keys.map(function (key) {
+        return dataItem[key] ? dataItem[key].value : 0;
+      });
+    }), goalLines ? goalLines.map(function (gL) {
+      return gL.value;
+    }) : []);
+    return {
+      max: Math.max.apply(Math, _dataToAnalyse),
+      min: Math.min.apply(Math, _dataToAnalyse)
+    };
+  } else {
+    return {
+      max: null,
+      min: null
+    };
+  }
+};
+
+function getNiceInterval(interval) {
+  var exponent = Math.floor(Math.log10(interval));
+  var fraction = interval / Math.pow(10, exponent);
+  var niceFraction;
+  if (fraction <= 1) {
+    niceFraction = 1;
+  } else if (fraction <= 1.25) {
+    niceFraction = 1.25;
+  } else if (fraction <= 1.5) {
+    niceFraction = 1.5;
+  } else if (fraction <= 2) {
+    niceFraction = 2;
+  } else if (fraction <= 2.5) {
+    niceFraction = 2.5;
+  } else if (fraction <= 3) {
+    niceFraction = 3;
+  } else if (fraction <= 5) {
+    niceFraction = 5;
+  } else if (fraction <= 7) {
+    niceFraction = 7;
+  } else if (fraction <= 10) {
+    niceFraction = 10;
+  } else {
+    niceFraction = 10;
+  }
+  return niceFraction * Math.pow(10, exponent);
+}
+var getScaleAndTicks = function getScaleAndTicks(_ref) {
+  var _order$;
+  var data = _ref.data,
+    xKey = _ref.xKey,
+    yKeys = _ref.yKeys,
+    xScaleDataType = _ref.xScaleDataType,
+    nullValue = _ref.nullValue,
+    tickCountYAxis = _ref.tickCountYAxis,
+    formattingFunctionX = _ref.formattingFunctionX,
+    formattingFunctionY = _ref.formattingFunctionY,
+    order = _ref.order,
+    goalLines = _ref.goalLines,
+    stacked = _ref.stacked;
+  var xTicks = [];
+  var xScale = {
+    dataType: xScaleDataType,
+    key: xKey,
+    ordering: ((_order$ = order[0]) == null ? void 0 : _order$.direction) || null
+  };
+  var x = getStackedMinAndMax({
+    data: data,
+    keys: xScale.key === null ? [] : [xScale.key],
+    dataType: xScale.dataType
+  });
+  if (xKey) {
+    xTicks = data.map(function (dataItem) {
+      var _dataItem$xKey, _dataItem$xScale$key, _dataItem$xScale$key2;
+      var xValue = (_dataItem$xKey = dataItem[xKey]) != null && _dataItem$xKey.value ? dataItem[xKey].value : null;
+      var xformattedValue = formattingFunctionX(xValue, nullValue);
+      var xScaleValue = xScale.key !== null && (_dataItem$xScale$key = dataItem[xScale.key]) != null && _dataItem$xScale$key.value ? (_dataItem$xScale$key2 = dataItem[xScale.key]) == null ? void 0 : _dataItem$xScale$key2.value : '';
+      var xScaleValueAdjusted = xScale.dataType === 'date_time' ? new Date(xScaleValue) : xScale.dataType === 'string' ? String(xScaleValue) : xScale.dataType === 'number' ? Number(xScaleValue) : xScaleValue;
+      return {
+        value: xValue !== null ? xValue : '',
+        formattedValue: xformattedValue !== null ? "" + xformattedValue : null,
+        scaleValue: xScaleValueAdjusted
+      };
+    });
+  }
+  // ----- Y Axis ("number") -----
+
+  var y = getStackedMinAndMax({
+    data: data,
+    keys: yKeys,
+    dataType: 'number',
+    goalLines: goalLines,
+    stacked: stacked
+  });
+  var maxY = y.max || 0;
+  var minY = Math.min(y.min || 0, 0);
+  var yTickInterval = getNiceInterval((maxY - minY) / (tickCountYAxis - 1));
+  var yTicks = [];
+  for (var i = 0; i < tickCountYAxis; i++) {
+    var _value = minY + yTickInterval * i;
+    var formattedValue = formattingFunctionY(_value, nullValue);
+    yTicks.push({
+      value: _value,
+      formattedValue: formattedValue,
+      scaleValue: _value
+    });
+  }
+  return {
+    x: {
+      ticks: xTicks,
+      scale: {
+        dataType: xScale.dataType,
+        max: x.max,
+        min: x.min,
+        key: xScale.key,
+        ordering: xScale.ordering
+      }
+    },
+    y: {
+      ticks: yTicks,
+      scale: {
+        dataType: 'number',
+        key: null,
+        ordering: 'asc',
+        max: maxY,
+        min: minY
+      }
+    }
+  };
+};
+
+var formattingFunctionX = function formattingFunctionX(value, formattedResult, xKeyField) {
+  if (!xKeyField) return '';
+  return formattedResult.formatterFunc(value, {
+    fieldId: xKeyField.fieldId,
+    "function": xKeyField["function"],
+    outputDataType: xKeyField.outputDataType
+  }).formattedValue;
+};
+
 var buildLineChartRepresentation = function buildLineChartRepresentation(_ref) {
   var _xKeys$, _axisTitles$x, _axisTitles$y;
   var axisTitles = _ref.axisTitles,
@@ -43309,15 +44008,6 @@ var buildLineChartRepresentation = function buildLineChartRepresentation(_ref) {
 
   // ----- Formatting -----
 
-  var formattingFunctionX = function formattingFunctionX(value) {
-    if (!xKeyField) return '';
-    return formattedResult.formatterFunc(value, {
-      fieldId: xKeyField.fieldId,
-      "function": xKeyField["function"],
-      outputDataType: xKeyField.outputDataType
-    }).formattedValue;
-  };
-
   // (value: any, noValueReplacement?: string) => string;
   var formattingFunctionY = function formattingFunctionY(value) {
     // Use any y axis field as they are all formatted in the same way (for now...);
@@ -43346,7 +44036,9 @@ var buildLineChartRepresentation = function buildLineChartRepresentation(_ref) {
   var orderFunction = order.length > 0 ? order[0]["function"] : undefined;
   var trendsAndForecastData = getTrendsAndForecastsData({
     chartData: chartData,
-    formattingFunctionX: formattingFunctionX,
+    formattingFunctionX: function formattingFunctionX$1(value) {
+      return formattingFunctionX(value, formattedResult, xKeyField);
+    },
     formattingFunctionY: formattingFunctionY,
     keys: keys,
     nullValue: nullValue,
@@ -43376,7 +44068,9 @@ var buildLineChartRepresentation = function buildLineChartRepresentation(_ref) {
     xScaleDataType: xScaleDataType,
     yKeys: yKeys,
     tickCountYAxis: approxYAxisLabelCount,
-    formattingFunctionX: formattingFunctionX,
+    formattingFunctionX: function formattingFunctionX$1(value) {
+      return formattingFunctionX(value, formattedResult, xKeyField);
+    },
     formattingFunctionY: formattingFunctionY,
     nullValue: nullValue,
     order: order,
@@ -43438,62 +44132,6 @@ var buildLineChartRepresentation = function buildLineChartRepresentation(_ref) {
   return chart;
 };
 
-var ASSUMED_AVERAGE_CHAR_WIDTH$1 = 8.8;
-function calculateWordWidth$1(word, avgCharWidth) {
-  if (avgCharWidth === void 0) {
-    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$1;
-  }
-  return word.length * avgCharWidth;
-}
-
-/** Reduce width proportionally to simulate spacing / padding between ticks. */
-var widthWithSpacing$1 = function widthWithSpacing(width) {
-  var THIRTY_PERCENT = 0.3;
-  return width - width * THIRTY_PERCENT;
-};
-function howManyTicksFitInWidth$1(ticks, maxWidth, avgCharWidth) {
-  if (avgCharWidth === void 0) {
-    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$1;
-  }
-  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$1(word, avgCharWidth);
-    if (currentWidth + wordWidth <= widthWithSpacing$1(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$1(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$1 = function adjustTicks(lineChartRepresentation, width) {
-  lineChartRepresentation = cloneDeep(lineChartRepresentation);
-
-  // TODO; take this from the theme override...
-  var averageCharacterWidth = ASSUMED_AVERAGE_CHAR_WIDTH$1;
-  var numberOfTicksFittingIntoSpace = howManyTicksFitInWidth$1(lineChartRepresentation.x.ticks || [], width, averageCharacterWidth);
-
-  // @ts-ignore
-  lineChartRepresentation.x.ticks = pickEquallySpaced$1(lineChartRepresentation.x.ticks, numberOfTicksFittingIntoSpace);
-  return lineChartRepresentation;
-};
-
 var LineChartV2View = function LineChartV2View(props) {
   var _props$library, _props$attributes$vie;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
@@ -43602,7 +44240,7 @@ var LineChartV2View = function LineChartV2View(props) {
             return jsx(LineChart$5, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicks$1(chartRepresentation, parent.width),
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height),
               options: {
                 lineCurve: props.attributes.lineCurve,
                 removeStroke: false,
@@ -43610,8 +44248,7 @@ var LineChartV2View = function LineChartV2View(props) {
                 showLegend: props.attributes.legend,
                 axis: {
                   showXAxisLabels: props.attributes.approxXAxisLabelCount !== 0,
-                  // shared-ui/src/library/StylePanel/AxisPreferenceSection.tsx
-                  showYAxisLabels: props.attributes.approxYAxisLabelCount !== 0 // shared-ui/src/library/StylePanel/AxisPreferenceSection.tsx
+                  showYAxisLabels: props.attributes.approxYAxisLabelCount !== 0
                 }
               },
               theme: theme == null ? void 0 : theme.charts
@@ -46933,171 +47570,6 @@ var Progress$2 = function Progress(props) {
   }));
 };
 
-var getMinAndMax$1 = function getMinAndMax(_ref) {
-  var data = _ref.data,
-    keys = _ref.keys,
-    dataType = _ref.dataType,
-    goalLines = _ref.goalLines,
-    stacked = _ref.stacked;
-  if (keys.length === 0) return {
-    max: null,
-    min: null
-  };
-  if (stacked) {
-    var totals = data.map(function (dataItem) {
-      return keys.reduce(function (sum, key) {
-        var value = dataItem[key] ? dataItem[key].value : 0;
-        return sum + (typeof value === 'number' ? value : 0);
-      }, 0);
-    });
-    var maxTotal = Math.max.apply(Math, totals);
-    var minTotal = Math.min.apply(Math, totals);
-    return {
-      max: maxTotal,
-      min: minTotal
-    };
-  }
-  if (dataType === 'date_time') {
-    var dataToAnalyse = [].concat(data.flatMap(function (dataItem) {
-      return keys.map(function (key) {
-        return dataItem[key] ? new Date(dataItem[key].value).valueOf() : 0;
-      });
-    }));
-    return {
-      max: Math.max.apply(Math, dataToAnalyse),
-      min: Math.min.apply(Math, dataToAnalyse)
-    };
-  } else if (dataType === 'number') {
-    var _dataToAnalyse = [].concat(data.flatMap(function (dataItem) {
-      return keys.map(function (key) {
-        return dataItem[key] ? dataItem[key].value : 0;
-      });
-    }), goalLines ? goalLines.map(function (gL) {
-      return gL.value;
-    }) : []);
-    return {
-      max: Math.max.apply(Math, _dataToAnalyse),
-      min: Math.min.apply(Math, _dataToAnalyse)
-    };
-  } else {
-    return {
-      max: null,
-      min: null
-    };
-  }
-};
-
-function getNiceInterval$1(interval) {
-  var exponent = Math.floor(Math.log10(interval));
-  var fraction = interval / Math.pow(10, exponent);
-  var niceFraction;
-  if (fraction <= 1) {
-    niceFraction = 1;
-  } else if (fraction <= 1.25) {
-    niceFraction = 1.25;
-  } else if (fraction <= 1.5) {
-    niceFraction = 1.5;
-  } else if (fraction <= 2) {
-    niceFraction = 2;
-  } else if (fraction <= 2.5) {
-    niceFraction = 2.5;
-  } else if (fraction <= 3) {
-    niceFraction = 3;
-  } else if (fraction <= 5) {
-    niceFraction = 5;
-  } else if (fraction <= 7) {
-    niceFraction = 7;
-  } else if (fraction <= 10) {
-    niceFraction = 10;
-  } else {
-    niceFraction = 10;
-  }
-  return niceFraction * Math.pow(10, exponent);
-}
-var getScaleAndTicks$1 = function getScaleAndTicks(_ref) {
-  var _order$;
-  var data = _ref.data,
-    xKey = _ref.xKey,
-    yKeys = _ref.yKeys,
-    xScaleDataType = _ref.xScaleDataType,
-    nullValue = _ref.nullValue,
-    tickCountYAxis = _ref.tickCountYAxis,
-    formattingFunctionX = _ref.formattingFunctionX,
-    formattingFunctionY = _ref.formattingFunctionY,
-    order = _ref.order,
-    goalLines = _ref.goalLines,
-    stacked = _ref.stacked;
-  var xTicks = [];
-  var xScale = {
-    dataType: xScaleDataType,
-    key: xKey,
-    ordering: ((_order$ = order[0]) == null ? void 0 : _order$.direction) || null
-  };
-  var x = getMinAndMax$1({
-    data: data,
-    keys: xScale.key === null ? [] : [xScale.key],
-    dataType: xScale.dataType
-  });
-  if (xKey) {
-    xTicks = data.map(function (dataItem) {
-      var _dataItem$xKey, _dataItem$xScale$key, _dataItem$xScale$key2;
-      var xValue = (_dataItem$xKey = dataItem[xKey]) != null && _dataItem$xKey.value ? dataItem[xKey].value : null;
-      var xformattedValue = formattingFunctionX(xValue, nullValue);
-      var xScaleValue = xScale.key !== null && (_dataItem$xScale$key = dataItem[xScale.key]) != null && _dataItem$xScale$key.value ? (_dataItem$xScale$key2 = dataItem[xScale.key]) == null ? void 0 : _dataItem$xScale$key2.value : '';
-      var xScaleValueAdjusted = xScale.dataType === 'date_time' ? new Date(xScaleValue) : xScale.dataType === 'string' ? String(xScaleValue) : xScale.dataType === 'number' ? Number(xScaleValue) : xScaleValue;
-      return {
-        value: xValue !== null ? xValue : '',
-        formattedValue: xformattedValue !== null ? "" + xformattedValue : null,
-        scaleValue: xScaleValueAdjusted
-      };
-    });
-  }
-  // ----- Y Axis ("number") -----
-
-  var y = getMinAndMax$1({
-    data: data,
-    keys: yKeys,
-    dataType: 'number',
-    goalLines: goalLines,
-    stacked: stacked
-  });
-  var maxY = y.max || 0;
-  var minY = Math.min(y.min || 0, 0);
-  var yTickInterval = getNiceInterval$1((maxY - minY) / (tickCountYAxis - 1));
-  var yTicks = [];
-  for (var i = 0; i < tickCountYAxis; i++) {
-    var _value = minY + yTickInterval * i;
-    var formattedValue = formattingFunctionY(_value, nullValue);
-    yTicks.push({
-      value: _value,
-      formattedValue: formattedValue,
-      scaleValue: _value
-    });
-  }
-  return {
-    x: {
-      ticks: xTicks,
-      scale: {
-        dataType: xScale.dataType,
-        max: x.max,
-        min: x.min,
-        key: xScale.key,
-        ordering: xScale.ordering
-      }
-    },
-    y: {
-      ticks: yTicks,
-      scale: {
-        dataType: 'number',
-        key: null,
-        ordering: 'asc',
-        max: maxY,
-        min: minY
-      }
-    }
-  };
-};
-
 function fillMissingKeysForChartData(data) {
   var allKeys = new Set();
   data.forEach(function (item) {
@@ -47191,15 +47663,6 @@ var buildBarChartRepresentation = function buildBarChartRepresentation(_ref) {
 
   // ----- Formatting -----
 
-  var formattingFunctionX = function formattingFunctionX(value) {
-    if (!xKeyField) return '';
-    return formattedResult.formatterFunc(value, {
-      fieldId: xKeyField.fieldId,
-      "function": xKeyField["function"],
-      outputDataType: xKeyField.outputDataType
-    }).formattedValue;
-  };
-
   // (value: any, noValueReplacement?: string) => string;
   var formattingFunctionY = function formattingFunctionY(value) {
     // Use any y axis field as they are all formatted in the same way (for now...);
@@ -47243,13 +47706,15 @@ var buildBarChartRepresentation = function buildBarChartRepresentation(_ref) {
 
   // ----- Ticks -----
 
-  var ticks = getScaleAndTicks$1({
+  var ticks = getScaleAndTicks({
     data: updatedData,
     xKey: xKey,
     xScaleDataType: xScaleDataType,
     yKeys: yKeys,
     tickCountYAxis: approxYAxisLabelCount,
-    formattingFunctionX: formattingFunctionX,
+    formattingFunctionX: function formattingFunctionX$1(value) {
+      return formattingFunctionX(value, formattedResult, xKeyField);
+    },
     formattingFunctionY: formattingFunctionY,
     nullValue: nullValue,
     order: order,
@@ -47461,7 +47926,7 @@ var BarChartV2View = function BarChartV2View(props) {
             return jsx(BarChart$5, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicks(chartRepresentation, parent.width),
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height),
               options: {
                 stacked: !!props.attributes.stacked,
                 removeStroke: false,
@@ -47469,8 +47934,7 @@ var BarChartV2View = function BarChartV2View(props) {
                 showLegend: props.attributes.legend,
                 axis: {
                   showXAxisLabels: props.attributes.approxXAxisLabelCount !== 0,
-                  // shared-ui/src/library/StylePanel/AxisPreferenceSection.tsx
-                  showYAxisLabels: props.attributes.approxYAxisLabelCount !== 0 // shared-ui/src/library/StylePanel/AxisPreferenceSection.tsx
+                  showYAxisLabels: props.attributes.approxYAxisLabelCount !== 0
                 }
               },
               theme: theme == null ? void 0 : theme.charts,
@@ -47559,30 +48023,30 @@ function getBarFill$1(bars, conditionalFormattingRules, barKey, barValues) {
   return fill;
 }
 
-var ASSUMED_AVERAGE_CHAR_WIDTH$2 = 8.8;
-function calculateWordWidth$2(word, avgCharWidth) {
+var ASSUMED_AVERAGE_CHAR_WIDTH$1 = 8.8;
+function calculateWordWidth$1(word, avgCharWidth) {
   if (avgCharWidth === void 0) {
-    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$2;
+    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$1;
   }
   return word.length * avgCharWidth;
 }
 
 /** Reduce width proportionally to simulate spacing / padding between ticks. */
-var widthWithSpacing$2 = function widthWithSpacing(width) {
+var widthWithSpacing$1 = function widthWithSpacing(width) {
   var THIRTY_PERCENT = 0.3;
   return width - width * THIRTY_PERCENT;
 };
-function howManyTicksFitInWidth$2(ticks, maxWidth, avgCharWidth) {
+function howManyTicksFitInWidth$1(ticks, maxWidth, avgCharWidth) {
   if (avgCharWidth === void 0) {
-    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$2;
+    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$1;
   }
   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)) {
+    var wordWidth = calculateWordWidth$1(word, avgCharWidth);
+    if (currentWidth + wordWidth <= widthWithSpacing$1(maxWidth)) {
       fittedTicks.push(tick);
       currentWidth += wordWidth + avgCharWidth; // Add space between words
     } else {
@@ -47591,7 +48055,7 @@ function howManyTicksFitInWidth$2(ticks, maxWidth, avgCharWidth) {
   }
   return fittedTicks.length;
 }
-function pickEquallySpaced$2(arr, numPicks) {
+function pickEquallySpaced$1(arr, numPicks) {
   if (numPicks >= arr.length) {
     return arr; // If numPicks is greater than or equal to the array length, return the whole array
   }
@@ -47603,19 +48067,19 @@ function pickEquallySpaced$2(arr, numPicks) {
   }
   return result;
 }
-var adjustTicks$2 = function adjustTicks(waterfallChartRepresentation, width) {
+var adjustTicks$1 = 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 averageCharacterWidth = ASSUMED_AVERAGE_CHAR_WIDTH$1;
+  var numberOfTicksFittingIntoSpace = howManyTicksFitInWidth$1(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);
+  waterfallChartRepresentation.x.ticks = pickEquallySpaced$1(waterfallChartRepresentation.x.ticks, numberOfTicksFittingIntoSpace);
   return waterfallChartRepresentation;
 };
 
@@ -47863,7 +48327,7 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     keys: [y.key]
   });
   var adjustedChartRepresentation = useMemo(function () {
-    return adjustTicks$2(_extends({}, chartCopy), width);
+    return adjustTicks$1(_extends({}, chartCopy), width);
   }, [chartCopy, width]);
   var formattedChartDataForBarChart = _extends({}, adjustedChartRepresentation, {
     y: formattedYAxisForBarChart,
@@ -48137,7 +48601,7 @@ var Bar$1 = function Bar(_ref4) {
   });
 };
 
-function getNiceInterval$2(interval) {
+function getNiceInterval$1(interval) {
   // Round the interval to a "nice" value (1, 2, 5, etc.)
   var exponent = Math.floor(Math.log10(interval));
   var fraction = interval / Math.pow(10, exponent);
@@ -48269,7 +48733,7 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
       outputDataType: nonPivotField.outputDataType
     }).formattedValue;
   };
-  var yTickInterval = getNiceInterval$2((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
+  var yTickInterval = getNiceInterval$1((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
   for (var i = 0; i < approxYAxisLabelCount; i++) {
     var value = (yMinValue + i) * yTickInterval;
     var formattedValue = formattingFunctionY(value);
@@ -48494,6 +48958,352 @@ var WaterfallChart$3 = function WaterfallChart(_ref) {
   }));
 };
 
+var buildAreaChartRepresentation = function buildAreaChartRepresentation(_ref) {
+  var _xKeys$, _axisTitles$x, _axisTitles$y;
+  var axisTitles = _ref.axisTitles,
+    colors = _ref.colors,
+    conditionalFormattingAttributes = _ref.conditionalFormattingAttributes,
+    dateTimeFormatOptions = _ref.dateTimeFormatOptions,
+    defaultFormats = _ref.defaultFormats,
+    goalLineAttributes = _ref.goalLineAttributes,
+    nullValue = _ref.nullValue,
+    numberFormatOptions = _ref.numberFormatOptions,
+    order = _ref.order,
+    pivotConfig = _ref.pivotConfig,
+    result = _ref.result,
+    xAxisFormat = _ref.xAxisFormat,
+    xAxisPostfix = _ref.xAxisPostfix,
+    xAxisPrefix = _ref.xAxisPrefix,
+    yAxisFormat = _ref.yAxisFormat,
+    yAxisPostfix = _ref.yAxisPostfix,
+    yAxisPrefix = _ref.yAxisPrefix,
+    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
+    seriesLabelFormatter = _ref.seriesLabelFormatter,
+    _valueAlias = _ref.valueAlias,
+    stacked = _ref.stacked;
+  var activeDateTimeFormats = {};
+  var _buildFieldFormatMaps = buildFieldFormatMaps(result, pivotConfig, xAxisPrefix, xAxisPostfix, xAxisFormat, yAxisPrefix, yAxisPostfix, yAxisFormat, nullValue, numberFormatOptions),
+    allPrefixes = _buildFieldFormatMaps.allPrefixes,
+    allPostfixes = _buildFieldFormatMaps.allPostfixes,
+    nullValues = _buildFieldFormatMaps.nullValues,
+    activeNumberFormats = _buildFieldFormatMaps.activeNumberFormats;
+
+  // Build params for the result formatter.
+  var params = {
+    defaultFormats: defaultFormats,
+    dateTimeFormatOptions: dateTimeFormatOptions,
+    numberFormatOptions: numberFormatOptions,
+    valueAlias: function valueAlias(params) {
+      if (typeof _valueAlias === 'function') {
+        // TODO; it is more useful providing this information separate,
+        // rather than building it into an ID and returning it. Ideally all would be returned
+        return String(_valueAlias({
+          fieldId: id({
+            field: params.fieldId,
+            "function": params["function"]
+          }),
+          value: params.value
+        }));
+      }
+      return undefined;
+    },
+    nullValue: nullValues,
+    prefixes: allPrefixes,
+    postfixes: allPostfixes,
+    activeNumberFormats: activeNumberFormats,
+    activeDateTimeFormats: activeDateTimeFormats
+  };
+  var formattedResult = formatResult(result, params);
+
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+  // --------------------------------------------
+
+  // ----- xKey -----
+
+  var xKeyField = getXKeyField(pivotConfig, result.fields);
+
+  // ----- Formatting ----
+  // (value: any, noValueReplacement?: string) => string;
+  var formattingFunctionY = function formattingFunctionY(value) {
+    // Use any y axis field as they are all formatted in the same way (for now...);
+    var nonPivotField = formattedResult.fields.find(function (resultField) {
+      return ![].concat(pivotConfig.x, pivotConfig.y).includes(resultField.id);
+    });
+    if (!nonPivotField) return '';
+    return formattedResult.formatterFunc(value, {
+      fieldId: nonPivotField.fieldId,
+      "function": nonPivotField["function"],
+      outputDataType: nonPivotField.outputDataType
+    }).formattedValue;
+  };
+
+  // ----- Keys & Prep -----
+  var xScaleDataType = (xKeyField == null ? void 0 : xKeyField.outputDataType) || 'string';
+  var _formattedResultToSer = formattedResultToSeries(formattedResult, pivotConfig, seriesLabelFormatter),
+    keys = _formattedResultToSer.keys,
+    yKeys = _formattedResultToSer.yKeys,
+    xKeys = _formattedResultToSer.xKeys,
+    chartData = _formattedResultToSer.seriesData;
+  var xKey = (_xKeys$ = xKeys[0]) != null ? _xKeys$ : null;
+  var updatedData = function () {
+    var hasMultipleGroups = result.fields.length > 2;
+    var data = chartData;
+    if (hasMultipleGroups) {
+      data = fillMissingKeysForChartData(chartData);
+    }
+    if (stacked) {
+      data = fillMissingKeysForChartData(data);
+    }
+    return data;
+  }();
+
+  // ----- Goal Lines -----
+
+  var goalLines = getGoalLines({
+    goalLineAttributes: goalLineAttributes,
+    formattingFunctionY: formattingFunctionY
+  });
+
+  // ----- Ticks -----
+
+  var ticks = getScaleAndTicks({
+    data: updatedData,
+    xKey: xKey,
+    xScaleDataType: xScaleDataType,
+    yKeys: yKeys,
+    tickCountYAxis: approxYAxisLabelCount,
+    formattingFunctionX: function formattingFunctionX$1(value) {
+      return formattingFunctionX(value, formattedResult, xKeyField);
+    },
+    formattingFunctionY: formattingFunctionY,
+    nullValue: nullValue,
+    order: order,
+    goalLines: goalLines
+  });
+
+  // ----- Lines -----
+
+  var styleDefinition = getStyleDefinition({
+    colors: colors,
+    yKeys: yKeys,
+    style: {
+      toOpacity: 0.5,
+      fromOpacity: 0.9,
+      type: 'area'
+    }
+  });
+
+  // ----- Conditional Formatting -----
+
+  var conditionalFormattingRules = getConditionalFormatting({
+    conditionalFormattingAttributes: conditionalFormattingAttributes
+  });
+  var chart = {
+    keys: keys,
+    x: {
+      ticks: ticks.x.ticks,
+      scale: {
+        dataType: ticks.x.scale.dataType,
+        key: ticks.x.scale.key,
+        ordering: ticks.x.scale.ordering,
+        min: ticks.x.scale.min,
+        max: ticks.x.scale.max
+      },
+      key: xKey,
+      postfix: xAxisPostfix,
+      prefix: xAxisPrefix,
+      title: (_axisTitles$x = axisTitles == null ? void 0 : axisTitles.x) != null ? _axisTitles$x : null
+    },
+    y: {
+      ticks: ticks.y.ticks,
+      scale: {
+        dataType: ticks.y.scale.dataType,
+        key: ticks.y.scale.key,
+        ordering: ticks.y.scale.ordering,
+        min: ticks.y.scale.min,
+        max: ticks.y.scale.max
+      },
+      keys: yKeys,
+      postfix: yAxisPostfix,
+      prefix: yAxisPrefix,
+      title: (_axisTitles$y = axisTitles == null ? void 0 : axisTitles.y) != null ? _axisTitles$y : null
+    },
+    data: updatedData,
+    areas: styleDefinition,
+    conditionalFormattingRules: conditionalFormattingRules,
+    goalLines: goalLines
+  };
+  return chart;
+};
+
+var AreaChartV2View = function AreaChartV2View(props) {
+  var _props$library, _props$attributes$vie;
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    textOverride = _useDashboardBehaviou.textOverride,
+    valueAlias = _useDashboardBehaviou.valueAlias,
+    labelFormat = _useDashboardBehaviou.labelFormat,
+    queryEngineConfig = _useDashboardBehaviou.queryEngineConfig;
+  var headerProps = {
+    displayTitle: props.attributes.displayTitle,
+    displaySubject: props.attributes.displaySubject,
+    verified: props.attributes.protectedByOrganisation,
+    library: (_props$library = props.library) != null ? _props$library : false,
+    localFilters: props.localFilters,
+    setLocalFilters: props.setLocalFilters,
+    dataSet: props.dataSet,
+    parameters: props == null ? void 0 : props.attributes.parameters,
+    componentType: props == null ? void 0 : props.attributes.type,
+    measure: props == null ? void 0 : props.attributes.measure,
+    dimension: props == null ? void 0 : props.attributes.dimension,
+    timeDimension: props.attributes.timeDimension,
+    setPartialAttributes: props.setPartialAttributes,
+    viewId: (_props$attributes$vie = props == null ? void 0 : props.attributes.viewId) != null ? _props$attributes$vie : '',
+    order: props.attributes.order
+  };
+  var showHeadline = headlineAvailable(props.attributes.order, props.attributes.headline, null);
+  var theme = useTheme();
+  var AreaChartV2Component = getComponentInterface(props.attributes.type);
+  var pivotConfig = init$c(props.attributes);
+  var chartRepresentation = null;
+  if (!isLoading(props.result) && !hasFailed(props.result) && !isEmpty(props.result) && AreaChartV2Component.isRunnable(props.attributes)) {
+    var _theme$charts$colors, _theme$charts, _props$attributes$goa;
+    chartRepresentation = buildAreaChartRepresentation({
+      axisTitles: props.attributes.axisTitles,
+      xAxisPostfix: props.attributes.xAxisPostfix,
+      xAxisPrefix: props.attributes.xAxisPrefix,
+      yAxisPostfix: props.attributes.yAxisPostfix,
+      yAxisPrefix: props.attributes.yAxisPrefix,
+      yAxisFormat: props.attributes.yAxisFormat,
+      xAxisFormat: props.attributes.xAxisFormat,
+      approxYAxisLabelCount: props.attributes.approxYAxisLabelCount === 'auto' ? 10 : props.attributes.approxYAxisLabelCount,
+      colors: (_theme$charts$colors = theme == null || (_theme$charts = theme.charts) == null ? void 0 : _theme$charts.colors) != null ? _theme$charts$colors : DEFAULT_CHART_COLORS,
+      valueAlias: valueAlias,
+      nullValue: checkForNullValue(props.attributes.dataSetId, props.attributes.dimension, props.attributes.timeDimension, textOverride, valueAlias),
+      result: props.result,
+      pivotConfig: pivotConfig,
+      order: props.attributes.order,
+      numberFormatOptions: props.numberFormatOptions,
+      dateTimeFormatOptions: props.dateTimeFormatOptions,
+      goalLineAttributes: (_props$attributes$goa = props.attributes.goalLines) != null ? _props$attributes$goa : [],
+      conditionalFormattingAttributes: props.attributes.conditionalFormattingRules,
+      defaultFormats: props.defaultFormats,
+      seriesLabelFormatter: function seriesLabelFormatter(labelFormatParams) {
+        var _queryEngineConfig$su, _queryEngineConfig$su2, _queryEngineConfig$su3;
+        var yResultField = labelFormatParams.yResultField,
+          yPivotFields = labelFormatParams.yPivotFields,
+          row = labelFormatParams.row;
+        var formattedFunctionName = ((_queryEngineConfig$su = queryEngineConfig.supportedAggregates[yResultField["function"]]) == null ? void 0 : _queryEngineConfig$su.publicName) || ((_queryEngineConfig$su2 = queryEngineConfig.supportedTimeTruncFunctions[yResultField["function"]]) == null ? void 0 : _queryEngineConfig$su2.publicName) || ((_queryEngineConfig$su3 = queryEngineConfig.supportedTransformationFunctions[yResultField["function"]]) == null ? void 0 : _queryEngineConfig$su3.publicName);
+        var formattedFunction = yResultField["function"] === 'none' ? '' : " \u2022 " + formattedFunctionName;
+        var defaultLabelFormat = "" + yPivotFields.map(function (field) {
+          return row[field.id].formattedValue;
+        }).join(' • ') + (yPivotFields.length === 0 ? '' : ' • ') + yResultField.publicName + formattedFunction;
+        if (!labelFormat) return defaultLabelFormat;
+        return labelFormat({
+          viewId: props.attributes.viewId,
+          fieldId: yResultField.fieldId,
+          func: yResultField["function"],
+          type: 'areaChartV2',
+          defaultLabel: defaultLabelFormat
+        }) || defaultLabelFormat;
+      },
+      stacked: props.attributes.stacked
+    });
+  }
+
+  // When these are triggered they don't render the chart after they're resolved, potentially because component did no re-render?
+  if (!AreaChartV2Component.isRunnable(props.attributes)) {
+    return jsx(QueryUnderConstructionNotice, {
+      title: "Missing parameters"
+    });
+  }
+  if (isLoading(props.result)) return jsx(LoadingComponent, {});
+  if (hasFailed(props.result)) return jsx(FailedToLoadDataNotice, {});
+  if (isEmpty(props.result)) return jsx(NoResultContentToShowNotice, _extends({}, headerProps));
+  return jsx(Suspense, {
+    fallback: jsx(LoadingComponent, {}),
+    children: jsxs(ViewWrapper, {
+      id: props.id,
+      queriesAreChanging: props.queriesAreChanging,
+      children: [jsx(ViewHeader, _extends({}, headerProps, {
+        paddingBottom: showHeadline ? '0.5rem' : undefined
+      })), showHeadline && jsx(HeadlineStats, _extends({}, props.propsForHeadline)), jsx("div", {
+        className: styles({
+          flex: '1',
+          position: 'relative'
+        }),
+        "aria-disabled": props.library,
+        children: chartRepresentation && jsx(ParentSize, {
+          style: {
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            overflowX: 'hidden'
+          },
+          children: function children(parent) {
+            var _props$attributes$vie2, _props$attributes$sta;
+            if (chartRepresentation.areas.length === 0) return jsx(LoadingComponent, {});
+            return jsx(AreaChartV2$1, {
+              width: parent.width,
+              height: parent.height,
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height),
+              uniqueId: (_props$attributes$vie2 = props.attributes.viewId) != null ? _props$attributes$vie2 : 'area-chart',
+              options: {
+                stacked: (_props$attributes$sta = props.attributes.stacked) != null ? _props$attributes$sta : false,
+                curve: props.attributes.lineCurve,
+                removeStroke: false,
+                showRoundedTotal: false,
+                showLegend: props.attributes.legend,
+                axis: {
+                  showXAxisLabels: props.attributes.approxXAxisLabelCount !== 0,
+                  showYAxisLabels: props.attributes.approxYAxisLabelCount !== 0
+                }
+              },
+              theme: theme == null ? void 0 : theme.charts
+            });
+          }
+        })
+      })]
+    })
+  });
+};
+
+var AreaChartV2 = function AreaChartV2(props) {
+  var _props$component = props.component,
+    results = _props$component.results,
+    attributes = _props$component.attributes,
+    localFilters = _props$component.localFilters;
+  var dashboardBehaviour = props.dashboardBehaviour;
+  var _useComponentEffect = useComponentEffect(attributes, props.dataSet, dashboardBehaviour.queryEngineConfig, {
+      localFilters: localFilters,
+      globalFilters: props.globalFilters
+    }, props.updateComponentAttributes, props.runQueriesCallback, props.setResults, dashboardBehaviour.variables),
+    queriesAreChanging = _useComponentEffect.queriesAreChanging;
+  return jsx(AreaChartV2View, {
+    id: props.id,
+    attributes: attributes,
+    dataSet: props.dataSet,
+    localFilters: props.component.localFilters,
+    setLocalFilters: props.setLocalFilters,
+    setPartialAttributes: function setPartialAttributes(changes) {
+      return props.setPartialAttributes(changes);
+    },
+    result: results && results[0],
+    queriesAreChanging: queriesAreChanging,
+    numberFormatOptions: dashboardBehaviour.numberFormatOptions,
+    dateTimeFormatOptions: dashboardBehaviour.dateTimeFormatOptions,
+    defaultFormats: dashboardBehaviour.defaultFormats,
+    propsForHeadline: props,
+    idPrefix: props.idPrefix,
+    library: props == null ? void 0 : props.library
+  });
+};
+
 var Component = function Component(props) {
   var _useDashboardContext = useDashboardContext(),
     dashboard = _useDashboardContext.dashboard;
@@ -48583,7 +49393,7 @@ var Component = function Component(props) {
         });
       },
       onError: dashboardBehaviour.onError,
-      children: jsx(BubbleChart$2, {
+      children: jsx(BubbleChart$3, {
         id: props.id,
         setLocalFilters: props.setLocalFilters,
         dataSet: dataSet,
@@ -48636,7 +49446,7 @@ var Component = function Component(props) {
         });
       },
       onError: dashboardBehaviour.onError,
-      children: jsx(AreaChart$3, {
+      children: jsx(AreaChart$4, {
         id: props.id,
         setLocalFilters: props.setLocalFilters,
         dataSet: dataSet,
@@ -48734,6 +49544,32 @@ var Component = function Component(props) {
       })
     });
   }
+  if (props.component.attributes.type == 'areaChartV2') {
+    return jsx(ErrorBoundary, {
+      renderOnError: function renderOnError(onManualRetry) {
+        return jsx(ComponentErrorNotice, {
+          onManualRetry: onManualRetry
+        });
+      },
+      onError: dashboardBehaviour.onError,
+      children: jsx(AreaChartV2, {
+        id: props.id,
+        setLocalFilters: props.setLocalFilters,
+        dataSet: dataSet,
+        updateComponentAttributes: function updateComponentAttributes(newAttributes) {
+          return _updateComponentAttributes(newAttributes);
+        },
+        runQueriesCallback: props.runQueriesCallback,
+        component: props.component,
+        setResults: props.setResults,
+        globalFilters: dashboard.globalFilters,
+        dashboardBehaviour: dashboardBehaviour,
+        library: props == null ? void 0 : props.library,
+        idPrefix: idPrefix,
+        setPartialAttributes: setPartialAttributes
+      })
+    });
+  }
   if (props.component.attributes.type == 'pieChart') {
     return jsx(ErrorBoundary, {
       renderOnError: function renderOnError(onManualRetry) {
@@ -57046,6 +57882,22 @@ var ChartSettingsSection = function ChartSettingsSection(_ref) {
     }
     return options;
   }();
+  var layoutOptions = function () {
+    var options = [{
+      label: textOverride('grouped', 'Grouped'),
+      value: false
+    }, {
+      label: textOverride('stacked', 'Stacked'),
+      value: true
+    }];
+    if (attributes.type === 'barChart' || attributes.type === 'areaChart') {
+      options.push({
+        label: textOverride('stacked_100prc', 'Stacked (100%)'),
+        value: '100%'
+      });
+    }
+    return options;
+  }();
   return jsx(Section, {
     title: section.title,
     tooltip: section == null ? void 0 : section.description,
@@ -57065,16 +57917,7 @@ var ChartSettingsSection = function ChartSettingsSection(_ref) {
                   stacked: stacked
                 });
               },
-              options: [{
-                label: textOverride('grouped', 'Grouped'),
-                value: false
-              }, {
-                label: textOverride('stacked', 'Stacked'),
-                value: true
-              }, {
-                label: textOverride('stacked_100prc', 'Stacked (100%)'),
-                value: '100%'
-              }]
+              options: layoutOptions
             }), section.type === 'curve' && jsx(FormatSelectInput, {
               label: section.title,
               id: "format-layout-curve",
@@ -65139,7 +65982,7 @@ var View$3 = /*#__PURE__*/function () {
   };
   return View;
 }();
-var AreaChart$4 = /*#__PURE__*/function (_View2) {
+var AreaChart$5 = /*#__PURE__*/function (_View2) {
   function AreaChart(attributes) {
     return _View2.call(this, _extends({}, attributes, {
       type: 'areaChart'
@@ -65508,6 +66351,8 @@ var toQueries$9 = commonToQueries;
 
 var toQueries$a = commonToQueries;
 
+var toQueries$b = commonToQueries;
+
 var buildMainQueries = function buildMainQueries(attributes, dataSet, queryEngineConfig, params) {
   var line = build$a(dataSet, attributes.lineMeasure, attributes.order, attributes.lineDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
   var bar = build$a(dataSet, attributes.barMeasure, attributes.order, attributes.barDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
@@ -65516,7 +66361,7 @@ var buildMainQueries = function buildMainQueries(attributes, dataSet, queryEngin
     line: line
   };
 };
-var toQueries$b = function toQueries(attributes, dataSet, queryEngineConfig, params) {
+var toQueries$c = function toQueries(attributes, dataSet, queryEngineConfig, params) {
   var _buildMainQueries = buildMainQueries(attributes, dataSet, queryEngineConfig, params),
     line = _buildMainQueries.line,
     bar = _buildMainQueries.bar;
@@ -65574,7 +66419,7 @@ var buildQueries = function buildQueries(attributes, dataSet, queryEngineConfig,
     measureDescription: deltaQuery ? [mainQuery.measureDescription, deltaQuery.measureDescription] : [mainQuery.measureDescription]
   };
 };
-var toQueries$c = function toQueries(attributes, dataSet, queryEngineConfig, params) {
+var toQueries$d = function toQueries(attributes, dataSet, queryEngineConfig, params) {
   var _buildQueries = buildQueries(attributes, dataSet, queryEngineConfig, params),
     queries = _buildQueries.queries,
     measureDescription = _buildQueries.measureDescription;
@@ -65585,7 +66430,7 @@ var toQueries$c = function toQueries(attributes, dataSet, queryEngineConfig, par
   };
 };
 
-var toQueries$d = function toQueries(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);
@@ -65599,7 +66444,7 @@ var toQueries$d = function toQueries(attributes, dataSet, queryEngineConfig, par
   };
 };
 
-var toQueries$e = function toQueries(attributes, dataSet, queryEngineConfig, params) {
+var toQueries$f = function toQueries(attributes, dataSet, queryEngineConfig, params) {
   var measures = [];
   attributes.xMeasure && measures.push(attributes.xMeasure);
   attributes.yMeasure && measures.push(attributes.yMeasure);
@@ -65613,7 +66458,7 @@ var toQueries$e = function toQueries(attributes, dataSet, queryEngineConfig, par
   };
 };
 
-var toQueries$f = function toQueries$1(attributes, dataSet, queryEngineConfig, params) {
+var toQueries$g = function toQueries$1(attributes, dataSet, queryEngineConfig, params) {
   return toQueries([dataSet], [{
     measure: attributes.measure,
     dataSetId: dataSet.id,
@@ -65625,12 +66470,12 @@ var toQueries$f = function toQueries$1(attributes, dataSet, queryEngineConfig, p
   }], queryEngineConfig, params);
 };
 
-var toQueries$g = commonToQueries;
-
 var toQueries$h = commonToQueries;
 
 var toQueries$i = commonToQueries;
 
+var toQueries$j = commonToQueries;
+
 var buildVizzlyViewQueries = function buildVizzlyViewQueries(attributes, dataSet, queryEngineConfig, params) {
   switch (attributes.type) {
     case 'areaChart':
@@ -65645,30 +66490,32 @@ var buildVizzlyViewQueries = function buildVizzlyViewQueries(attributes, dataSet
       return toQueries$6(attributes, dataSet, queryEngineConfig, params);
     case 'lineChartV2':
       return toQueries$7(attributes, dataSet, queryEngineConfig, params);
-    case 'pieChart':
+    case 'areaChartV2':
       return toQueries$8(attributes, dataSet, queryEngineConfig, params);
-    case 'dataTable':
+    case 'pieChart':
       return toQueries$9(attributes, dataSet, queryEngineConfig, params);
-    case 'basicTable':
+    case 'dataTable':
       return toQueries$a(attributes, dataSet, queryEngineConfig, params);
-    case 'comboChart':
+    case 'basicTable':
       return toQueries$b(attributes, dataSet, queryEngineConfig, params);
-    case 'singleStat':
+    case 'comboChart':
       return toQueries$c(attributes, dataSet, queryEngineConfig, params);
+    case 'singleStat':
+      return toQueries$d(attributes, dataSet, queryEngineConfig, params);
     case 'progress':
-      return toQueries$c(attributes, dataSet, queryEngineConfig, params);
-    case 'scatterChart':
       return toQueries$d(attributes, dataSet, queryEngineConfig, params);
-    case 'bubbleChart':
+    case 'scatterChart':
       return toQueries$e(attributes, dataSet, queryEngineConfig, params);
-    case 'mercatorMap':
+    case 'bubbleChart':
       return toQueries$f(attributes, dataSet, queryEngineConfig, params);
-    case 'funnelChart':
+    case 'mercatorMap':
       return toQueries$g(attributes, dataSet, queryEngineConfig, params);
-    case 'richText':
+    case 'funnelChart':
       return toQueries$h(attributes, dataSet, queryEngineConfig, params);
-    case 'waterfallChart':
+    case 'richText':
       return toQueries$i(attributes, dataSet, queryEngineConfig, params);
+    case 'waterfallChart':
+      return toQueries$j(attributes, dataSet, queryEngineConfig, params);
     default:
       throw 'Unsupported view when building query.';
   }
@@ -67216,7 +68063,7 @@ VizzlyServices.Dashboard = Dashboard$1;
 VizzlyServices.Editor = Editor;
 VizzlyServices.Header = Header;
 VizzlyServices.Library = Library$1;
-VizzlyServices.AreaChart = AreaChart$4;
+VizzlyServices.AreaChart = AreaChart$5;
 VizzlyServices.LineChart = LineChart$6;
 VizzlyServices.BarChart = BarChart$6;
 VizzlyServices.PieChart = PieChart$4;
@@ -68540,7 +69387,8 @@ var attributesToAiView = function attributesToAiView(dataSet, originalAttributes
   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 === 'barChartV2') throw 'Bar Chart V2 views are not supported by Vizzly AI.';
+  if (attributes.type === 'areaChartV2') throw 'Area 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 = [];
   var group = [];