@vizzly/dashboard 0.14.4-dev-8beb4cd0b38350abdd05b93b66f2523ced40aa15 → 0.14.4-dev-f96aec9acd048ca40becf3a412567d3799b85700

package/dist/dashboard.cjs.development.js

@@ -64,6 +64,7 @@ var axis = require('@visx/axis');
 var text$3 = require('@visx/text');
 var grid = require('@visx/grid');
 require('@visx/point');
+var v2 = require('./charts/src/v2');
 var VisibilitySensor = _interopDefault(require('react-visibility-sensor'));
 var ExcelJS = _interopDefault(require('exceljs'));
 var fileSaver = require('file-saver');
@@ -2731,6 +2732,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({
@@ -8171,7 +8173,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) {
@@ -8968,7 +8970,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);
@@ -10019,6 +10020,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: [],
@@ -10045,6 +10419,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);
@@ -13197,7 +13572,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';
 });
@@ -13537,7 +13912,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
@@ -13559,6 +13934,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
@@ -20904,7 +21282,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()
 });
@@ -20921,7 +21299,7 @@ var isEmptyCell = /*#__PURE__*/Joi.object({
 });
 var isPopulatedCell = function isPopulatedCell(queryEngineConfig) {
   return Joi.object({
-    attributes: attributesSchema$h({
+    attributes: attributesSchema$i({
       queryEngineConfig: queryEngineConfig
     }),
     colSpan: colSpanSchema
@@ -20932,7 +21310,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
       })
     })),
@@ -20943,7 +21321,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))
   }));
 }
 
@@ -21665,7 +22043,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;
@@ -21950,7 +22328,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':
@@ -25295,7 +25673,7 @@ var RichText$1 = function RichText(props) {
     })
   }));
 };
-var AreaChart$1 = function AreaChart(props) {
+var AreaChart$2 = function AreaChart(props) {
   return jsxRuntime.jsx("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
@@ -25564,7 +25942,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);
@@ -32663,7 +33044,7 @@ var VizzlyXYChart = function VizzlyXYChart(props) {
   });
 };
 
-var AreaChart$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var AreaChart$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var forceRerender = useChartForceRerender(ref);
   if (forceRerender) return null;
   return jsxRuntime.jsx(responsive.ParentSize, {
@@ -33614,7 +33995,7 @@ var AreaChartView = function AreaChartView(props) {
         paddingBottom: showHeadline ? '0.5rem' : undefined
       })), showHeadline && jsxRuntime.jsx(HeadlineStats, _extends({}, props.propsForHeadline)), jsxRuntime.jsx(ChartWrapper, {
         disabledFeatures: (_props$library2 = props == null ? void 0 : props.library) != null ? _props$library2 : false,
-        children: jsxRuntime.jsx(AreaChart$2, {
+        children: jsxRuntime.jsx(AreaChart$3, {
           approxXAxisLabelCount: props.approxXAxisLabelCount,
           approxYAxisLabelCount: props.approxYAxisLabelCount,
           ref: ref,
@@ -33748,7 +34129,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 = React.useState(null),
     onDrilldown = _useState[0],
@@ -41871,6 +42252,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
@@ -41883,17 +42280,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) {
@@ -42857,135 +43259,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.
@@ -43434,6 +43707,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,
@@ -43506,15 +43953,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...);
@@ -43543,7 +43981,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,
@@ -43573,7 +44013,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,
@@ -43635,62 +44077,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(),
@@ -43799,7 +44185,7 @@ var LineChartV2View = function LineChartV2View(props) {
             return jsxRuntime.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,
@@ -43807,8 +44193,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
@@ -47130,171 +47515,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) {
@@ -47388,15 +47608,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...);
@@ -47440,13 +47651,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,
@@ -47658,7 +47871,7 @@ var BarChartV2View = function BarChartV2View(props) {
             return jsxRuntime.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,
@@ -47666,8 +47879,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,
@@ -47756,30 +47968,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 {
@@ -47788,7 +48000,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
   }
@@ -47800,19 +48012,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;
 };
 
@@ -47942,17 +48154,13 @@ var Legend$2 = function Legend(_ref) {
     color: 'green',
     yKey: 'increase',
     style: {
-      type: 'line',
-      strokeDasharray: null,
-      strokeWidth: 2
+      type: 'bar'
     }
   }, {
     color: 'red',
     yKey: 'decrease',
     style: {
-      type: 'line',
-      strokeDasharray: null,
-      strokeWidth: 2
+      type: 'bar'
     }
   }];
   var keys = {
@@ -47990,6 +48198,7 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     width = _ref.width,
     options = _ref.options,
     chart = _ref.chart,
+    steps = _ref.steps,
     theme = _ref.theme;
   //Waterfall TODO: fix chart for other x types
   if (chart.x.scale.dataType === 'date_time' || chart.x.scale.dataType === 'number') {
@@ -48005,10 +48214,10 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     hideTooltip = _useTooltip.hideTooltip,
     showTooltip = _useTooltip.showTooltip;
   var chartCopy = _.cloneDeep(chart);
-  var data = chartCopy.data,
-    x = chartCopy.x,
+  var x = chartCopy.x,
     y = chartCopy.y;
-  var showTotalBar = options.showTotalBar;
+  var xKey = x.key;
+  var yKey = y.key;
   var conditionalFormattingRules = [{
     yKey: y.key,
     operator: '>',
@@ -48020,47 +48229,11 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     value: 0,
     color: 'red'
   }];
-  var xKey = x.key;
-  var yKey = y.key;
-  var cumulativeTotal = 0;
-  var steps = data.map(function (item) {
-    var xValue = item[xKey].value;
-    var yValue = Number(item[yKey].value);
-    var prevTotal = cumulativeTotal;
-    cumulativeTotal += yValue;
-    return {
-      x: xValue,
-      y: yValue,
-      start: prevTotal,
-      end: cumulativeTotal
-    };
-  });
-  if (showTotalBar) {
-    var _data$push;
-    steps.push({
-      x: "Total",
-      y: cumulativeTotal,
-      start: 0,
-      end: cumulativeTotal
-    });
-    data.push((_data$push = {}, _data$push[x.key] = {
-      value: "Total",
-      formattedValue: "Total"
-    }, _data$push[y.key] = {
-      value: cumulativeTotal,
-      formattedValue: null
-    }, _data$push));
-    x.ticks.push({
-      value: "Total",
-      formattedValue: "Total",
-      scaleValue: "Total"
-    });
-  }
   var formattedYAxisForBarChart = _extends({}, y, {
-    keys: [y.key]
+    keys: [yKey]
   });
   var adjustedChartRepresentation = React.useMemo(function () {
-    return adjustTicks$2(_extends({}, chartCopy), width);
+    return adjustTicks$1(_extends({}, chartCopy), width);
   }, [chartCopy, width]);
   var formattedChartDataForBarChart = _extends({}, adjustedChartRepresentation, {
     y: formattedYAxisForBarChart,
@@ -48182,15 +48355,14 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     if (xScaleDataType === 'string') return xValue;
     return;
   }, [xScaleKey, xScaleDataType]);
+  if (width === 0 || height === 0 || xScale == null) return null;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsxs("svg", {
+    children: [jsxRuntime.jsxs(ChartWrapper$1, {
       width: width,
-      height: height - (options.showLegend ? 40 : 0),
+      height: height,
+      showLegend: options.showLegend,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      style: {
-        display: 'block'
-      },
       children: [jsxRuntime.jsxs(group.Group, {
         left: margin.left,
         top: margin.top,
@@ -48334,7 +48506,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);
@@ -48343,6 +48515,111 @@ function getNiceInterval$2(interval) {
   return niceFraction * Math.pow(10, exponent);
 }
 
+var getYTicks = function getYTicks(_ref) {
+  var yMinValue = _ref.yMinValue,
+    yMaxValue = _ref.yMaxValue,
+    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
+    formattingFunctionY = _ref.formattingFunctionY;
+  var yTicks = [];
+  var yTickInterval = getNiceInterval$1((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
+  for (var i = 0; i < approxYAxisLabelCount; i++) {
+    var value = (yMinValue + i) * yTickInterval;
+    var formattedValue = formattingFunctionY(value);
+    yTicks.push({
+      value: value,
+      formattedValue: formattedValue,
+      scaleValue: value
+    });
+  }
+  return yTicks;
+};
+
+var getRepresentationData = function getRepresentationData(_ref) {
+  var content = _ref.content,
+    xKey = _ref.xKey,
+    yKey = _ref.yKey,
+    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
+    showTotalBar = _ref.showTotalBar,
+    formattingFunctionY = _ref.formattingFunctionY;
+  var data = [];
+  var steps = [];
+  var xTicks = [];
+  var yValueSum = 0;
+  var yMinValue = 0;
+  var yMaxValue = 0;
+  content.forEach(function (dataItem, index) {
+    var _data$push;
+    var xValueIndex = 0;
+    var yValueIndex = 1;
+    var xValue = dataItem[xValueIndex].value;
+    var xFormattedValue = dataItem[xValueIndex].formattedValue;
+    var yValue = Number(dataItem[yValueIndex].value);
+    var yValueDiff = yValue;
+    if (index > 0) {
+      var prevYValue = Number(content[index - 1][yValueIndex].value);
+      yValueDiff = yValue - prevYValue;
+    }
+    var prevYValueSum = yValueSum;
+    yValueSum += yValueDiff;
+    data.push((_data$push = {}, _data$push[xKey] = {
+      value: xValue,
+      formattedValue: xFormattedValue
+    }, _data$push[yKey] = {
+      value: yValueDiff,
+      formattedValue: formattingFunctionY(yValueDiff)
+    }, _data$push));
+    xTicks.push({
+      value: xValue,
+      formattedValue: xFormattedValue,
+      scaleValue: xValue
+    });
+    steps.push({
+      x: xValue,
+      y: yValue,
+      start: prevYValueSum,
+      end: yValueSum
+    });
+    yMinValue = Math.floor(Math.min(yMinValue, yValue));
+    yMaxValue = Math.ceil(Math.max(yMaxValue, yValue));
+  });
+  if (showTotalBar) {
+    var _data$push2;
+    var totalLabel = 'Total';
+    steps.push({
+      x: totalLabel,
+      y: yValueSum,
+      start: 0,
+      end: yValueSum
+    });
+    data.push((_data$push2 = {}, _data$push2[xKey] = {
+      value: totalLabel,
+      formattedValue: totalLabel
+    }, _data$push2[yKey] = {
+      value: yValueSum,
+      formattedValue: formattingFunctionY(yValueSum)
+    }, _data$push2));
+    xTicks.push({
+      value: totalLabel,
+      formattedValue: totalLabel,
+      scaleValue: totalLabel
+    });
+  }
+  var yTicks = getYTicks({
+    yMinValue: yMinValue,
+    yMaxValue: yMaxValue,
+    approxYAxisLabelCount: approxYAxisLabelCount,
+    formattingFunctionY: formattingFunctionY
+  });
+  return {
+    data: data,
+    steps: steps,
+    xTicks: xTicks,
+    yTicks: yTicks,
+    yMinValue: yMinValue,
+    yMaxValue: yMaxValue
+  };
+};
+
 var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentation(_ref) {
   var _formattedResult$fiel, _formattedResult$fiel2, _axisTitles$x, _axisTitles$y;
   var approxYAxisLabelCount = _ref.approxYAxisLabelCount,
@@ -48353,6 +48630,7 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
     numberFormatOptions = _ref.numberFormatOptions,
     pivotConfig = _ref.pivotConfig,
     result = _ref.result,
+    showTotalBar = _ref.showTotalBar,
     _valueAlias = _ref.valueAlias,
     xAxisFormat = _ref.xAxisFormat,
     xAxisPrefix = _ref.xAxisPrefix,
@@ -48360,34 +48638,12 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
     yAxisFormat = _ref.yAxisFormat,
     yAxisPrefix = _ref.yAxisPrefix,
     yAxisPostfix = _ref.yAxisPostfix;
-  var allPrefixes = {};
-  var allPostfixes = {};
-  var nullValues = {};
-  var activeNumberFormats = {};
   var activeDateTimeFormats = {};
-  result.fields.forEach(function (field) {
-    if (pivotConfig.x.includes(field.id)) {
-      allPostfixes[field.id] = xAxisPostfix;
-      allPrefixes[field.id] = xAxisPrefix;
-      if (xAxisFormat) {
-        if (field.outputDataType === 'number' && numberFormatOptions[xAxisFormat]) {
-          activeNumberFormats[field.id] = xAxisFormat;
-        } else if (dateTimeFormatOptions[xAxisFormat]) {
-          activeDateTimeFormats[field.id] = xAxisFormat;
-        }
-      }
-    } else if (!pivotConfig.y.includes(field.id)) {
-      allPostfixes[field.id] = yAxisPostfix;
-      allPrefixes[field.id] = yAxisPrefix;
-      yAxisFormat = yAxisFormat || '_vizzly_compact';
-      if (numberFormatOptions[yAxisFormat]) {
-        activeNumberFormats[field.id] = yAxisFormat;
-      }
-    }
-
-    // Set the null value aliases
-    nullValues[field.id] = nullValue;
-  });
+  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;
   var params = {
     defaultFormats: defaultFormats,
     dateTimeFormatOptions: dateTimeFormatOptions,
@@ -48411,6 +48667,18 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
     activeDateTimeFormats: activeDateTimeFormats
   };
   var formattedResult = formatResult(result, params);
+  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;
+  };
   var keys = formattedResult.fields.map(function (field) {
     var _ref2;
     var key = field.fieldId;
@@ -48425,58 +48693,21 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
   var xKey = (_formattedResult$fiel = formattedResult.fields[0]) == null ? void 0 : _formattedResult$fiel.fieldId;
   var yKey = (_formattedResult$fiel2 = formattedResult.fields[1]) == null ? void 0 : _formattedResult$fiel2.fieldId;
   var content = formattedResult.content;
-  var data = [];
-  var xTicks = [];
-  var yTicks = [];
-  var yMinValue = 0;
-  var yMaxValue = 0;
-  content.forEach(function (dataItem, index) {
-    var _data$push;
-    var xValueIndex = 0;
-    var yValueIndex = 1;
-    var xValue = dataItem[xValueIndex].value;
-    var xFormattedValue = dataItem[xValueIndex].formattedValue;
-    var yValue = dataItem[yValueIndex].value;
-    var yFormattedValue = dataItem[yValueIndex].formattedValue;
-    var yValueDiff = index === 0 ? yValue : yValue - content[index - 1][yValueIndex].value;
-    data.push((_data$push = {}, _data$push[xKey] = {
-      value: xValue,
-      formattedValue: xFormattedValue
-    }, _data$push[yKey] = {
-      value: yValueDiff,
-      formattedValue: yFormattedValue
-    }, _data$push));
-    xTicks.push({
-      value: xValue,
-      formattedValue: xFormattedValue,
-      scaleValue: xValue
-    });
-    yMinValue = Math.floor(Math.min(yMinValue, yValue));
-    yMaxValue = Math.ceil(Math.max(yMaxValue, yValue));
-  });
-  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;
-  };
-  var yTickInterval = getNiceInterval$2((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
-  for (var i = 0; i < approxYAxisLabelCount; i++) {
-    var value = (yMinValue + i) * yTickInterval;
-    var formattedValue = formattingFunctionY(value);
-    yTicks.push({
-      value: value,
-      formattedValue: formattedValue,
-      scaleValue: value
-    });
-  }
-  var chart = {
+  var _getRepresentationDat = getRepresentationData({
+      content: content,
+      xKey: xKey,
+      yKey: yKey,
+      approxYAxisLabelCount: approxYAxisLabelCount,
+      showTotalBar: showTotalBar,
+      formattingFunctionY: formattingFunctionY
+    }),
+    data = _getRepresentationDat.data,
+    steps = _getRepresentationDat.steps,
+    xTicks = _getRepresentationDat.xTicks,
+    yTicks = _getRepresentationDat.yTicks,
+    yMinValue = _getRepresentationDat.yMinValue,
+    yMaxValue = _getRepresentationDat.yMaxValue;
+  var chartRepresentation = {
     keys: _extends({}, keys[0], keys[1]),
     x: {
       title: (_axisTitles$x = axisTitles == null ? void 0 : axisTitles.x) != null ? _axisTitles$x : null,
@@ -48508,7 +48739,10 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
     },
     data: data
   };
-  return chart;
+  return {
+    waterfallChartRepresentation: chartRepresentation,
+    waterfallChartSteps: steps
+  };
 };
 
 var WaterfallChartView = function WaterfallChartView(props) {
@@ -48578,12 +48812,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
   if (isLoading(result)) return jsxRuntime.jsx(LoadingComponent, {});
   if (hasFailed(result)) return jsxRuntime.jsx(FailedToLoadDataNotice, {});
   if (isEmpty(result)) return jsxRuntime.jsx(NoResultContentToShowNotice, _extends({}, headerProps));
-  var showHeadline = React.useMemo(function () {
-    return headlineAvailable(order, headline, timeDimension);
-  }, [order, headline, timeDimension]);
+  var showHeadline = headlineAvailable(order, headline, timeDimension);
   var pivotConfig = init$c(props);
-  var chartRepresentation = React.useMemo(function () {
-    return buildWaterfallChartRepresentation({
+  var _buildWaterfallChartR = buildWaterfallChartRepresentation({
       approxYAxisLabelCount: approxYAxisLabelCount === 'auto' ? 10 : approxYAxisLabelCount,
       axisTitles: axisTitles,
       dateTimeFormatOptions: dateTimeFormatOptions,
@@ -48592,6 +48823,7 @@ var WaterfallChartView = function WaterfallChartView(props) {
       numberFormatOptions: numberFormatOptions,
       pivotConfig: pivotConfig,
       result: result,
+      showTotalBar: true,
       valueAlias: valueAlias,
       xAxisFormat: xAxisFormat,
       xAxisPrefix: xAxisPrefix,
@@ -48599,8 +48831,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
       yAxisFormat: yAxisFormat,
       yAxisPrefix: yAxisPrefix,
       yAxisPostfix: yAxisPostfix
-    });
-  }, [approxYAxisLabelCount, axisTitles, dateTimeFormatOptions, defaultFormats, dataSetId, dimension, numberFormatOptions, pivotConfig, result, valueAlias, xAxisFormat, xAxisPrefix, xAxisPostfix, yAxisFormat, yAxisPrefix, yAxisPostfix]);
+    }),
+    chartRepresentation = _buildWaterfallChartR.waterfallChartRepresentation,
+    steps = _buildWaterfallChartR.waterfallChartSteps;
   return jsxRuntime.jsx(React.Suspense, {
     fallback: jsxRuntime.jsx(LoadingComponent, {}),
     children: jsxRuntime.jsxs(ViewWrapper, {
@@ -48608,8 +48841,12 @@ var WaterfallChartView = function WaterfallChartView(props) {
       queriesAreChanging: queriesAreChanging,
       children: [jsxRuntime.jsx(ViewHeader, _extends({}, headerProps, {
         paddingBottom: showHeadline ? '0.5rem' : undefined
-      })), showHeadline && jsxRuntime.jsx(HeadlineStats, _extends({}, props)), jsxRuntime.jsx(ChartWrapper, {
-        disabledFeatures: library != null ? library : false,
+      })), showHeadline && jsxRuntime.jsx(HeadlineStats, _extends({}, props)), jsxRuntime.jsx("div", {
+        className: styles({
+          flex: '1',
+          position: 'relative'
+        }),
+        "aria-disabled": props.library,
         children: jsxRuntime.jsx(responsive.ParentSize, {
           style: {
             position: 'absolute',
@@ -48618,13 +48855,12 @@ var WaterfallChartView = function WaterfallChartView(props) {
             overflowX: 'hidden'
           },
           children: function children(parent) {
+            if (chartRepresentation.data.length === 0) return jsxRuntime.jsx(LoadingComponent, {});
             return jsxRuntime.jsx(WaterfallChart$2, {
               width: parent.width,
               height: parent.height,
               options: {
                 showLegend: showLegend(legend, (theme == null ? void 0 : theme.detail) === 'verbose'),
-                showTotalBar: true,
-                // Waterfall TODO: check if this should be configurable via dashboard
                 showTooltipRoundedTotal: true,
                 removeStroke: false,
                 axis: {
@@ -48633,7 +48869,8 @@ var WaterfallChartView = function WaterfallChartView(props) {
                 }
               },
               theme: theme == null ? void 0 : theme.charts,
-              chart: chartRepresentation
+              chart: chartRepresentation,
+              steps: steps
             });
           }
         })
@@ -48691,6 +48928,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 jsxRuntime.jsx(QueryUnderConstructionNotice, {
+      title: "Missing parameters"
+    });
+  }
+  if (isLoading(props.result)) return jsxRuntime.jsx(LoadingComponent, {});
+  if (hasFailed(props.result)) return jsxRuntime.jsx(FailedToLoadDataNotice, {});
+  if (isEmpty(props.result)) return jsxRuntime.jsx(NoResultContentToShowNotice, _extends({}, headerProps));
+  return jsxRuntime.jsx(React.Suspense, {
+    fallback: jsxRuntime.jsx(LoadingComponent, {}),
+    children: jsxRuntime.jsxs(ViewWrapper, {
+      id: props.id,
+      queriesAreChanging: props.queriesAreChanging,
+      children: [jsxRuntime.jsx(ViewHeader, _extends({}, headerProps, {
+        paddingBottom: showHeadline ? '0.5rem' : undefined
+      })), showHeadline && jsxRuntime.jsx(HeadlineStats, _extends({}, props.propsForHeadline)), jsxRuntime.jsx("div", {
+        className: styles({
+          flex: '1',
+          position: 'relative'
+        }),
+        "aria-disabled": props.library,
+        children: chartRepresentation && jsxRuntime.jsx(responsive.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 jsxRuntime.jsx(LoadingComponent, {});
+            return jsxRuntime.jsx(v2.AreaChartV2, {
+              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 jsxRuntime.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;
@@ -48833,7 +49416,7 @@ var Component = function Component(props) {
         });
       },
       onError: dashboardBehaviour.onError,
-      children: jsxRuntime.jsx(AreaChart$3, {
+      children: jsxRuntime.jsx(AreaChart$4, {
         id: props.id,
         setLocalFilters: props.setLocalFilters,
         dataSet: dataSet,
@@ -48931,6 +49514,32 @@ var Component = function Component(props) {
       })
     });
   }
+  if (props.component.attributes.type == 'areaChartV2') {
+    return jsxRuntime.jsx(ErrorBoundary, {
+      renderOnError: function renderOnError(onManualRetry) {
+        return jsxRuntime.jsx(ComponentErrorNotice, {
+          onManualRetry: onManualRetry
+        });
+      },
+      onError: dashboardBehaviour.onError,
+      children: jsxRuntime.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 jsxRuntime.jsx(ErrorBoundary, {
       renderOnError: function renderOnError(onManualRetry) {
@@ -65343,7 +65952,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'
@@ -65712,6 +66321,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);
@@ -65720,7 +66331,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;
@@ -65778,7 +66389,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;
@@ -65789,7 +66400,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);
@@ -65803,7 +66414,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);
@@ -65817,7 +66428,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,
@@ -65829,12 +66440,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':
@@ -65849,30 +66460,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.';
   }
@@ -67420,7 +68033,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;
@@ -68744,7 +69357,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 = [];