@vizzly/dashboard 0.14.4-dev-bb1215ca6cb16d6182d2617660ee9c9be91b265f → 0.14.4-dev-393f477b6f997aed542a53b1fce003c259068613

package/dist/dashboard.cjs.development.js

@@ -64,7 +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 RadarChart$4 = require('./charts/src/v2/components/RadarChart');
 var VisibilitySensor = _interopDefault(require('react-visibility-sensor'));
 var ExcelJS = _interopDefault(require('exceljs'));
 var fileSaver = require('file-saver');
@@ -8173,7 +8173,319 @@ var RichText = function RichText(config) {
   };
 };
 
-var componentTypes = ['areaChart', 'barChart', 'basicTable', 'bubbleChart', 'comboChart', 'custom', 'dataTable', 'funnelChart', 'horizontalBarChart', 'lineChart', 'lineChartV2', 'areaChartV2', 'barChartV2', 'mercatorMap', 'pieChart', 'progress', 'richText', 'scatterChart', 'singleStat', 'waterfallChart'];
+var attributesSchema$d = function attributesSchema(config) {
+  return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
+    legend: Joi.valid(true, false),
+    type: Joi.valid('radarChart').required(),
+    parameters: parametersSchema(config.queryEngineConfig, config.attributesSchemaOptions),
+    axisTitles: axisTitleSchema(),
+    headline: headlineSchema(),
+    tags: tagsSchema()
+  }));
+};
+
+var setAttributes$c = (function (config) {
+  return function (radarChart, partial) {
+    var newAttributes = setAttributes(radarChart, partial, attributesSchema$d(config));
+    newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
+    return newAttributes;
+  };
+});
+
+var CONSTANTS$e = {
+  title: 'Radar chart',
+  description: 'Visualizes multiple variables as points on axes starting from the same center point, creating a spider web-like shape. Perfect for comparing strengths and weaknesses across multiple dimensions or showing performance metrics across different categories.',
+  namespace: 'radar_chart',
+  data_panel: {
+    data_set: {
+      type: 'dataSet',
+      title: 'Data set',
+      description: 'What data do you want to use in this radar chart?'
+    },
+    views: {
+      type: 'views',
+      title: 'View',
+      description: ''
+    },
+    field_y_axis: {
+      type: 'fieldCollector',
+      title: 'Metric - Y Axis',
+      description: 'What do you want each line to measure?',
+      callToAction: 'Add metric'
+    },
+    field_x_axis: {
+      type: 'fieldCollector',
+      title: 'Grouping - X Axis',
+      description: 'What do you want each line to represent? An example might be a `product category` field to represent each category as a line.',
+      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 radar 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 radar 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: {
+        curve: {
+          type: 'curve',
+          title: 'Line Style',
+          description: '',
+          namespace: 'curve'
+        },
+        //Idk what is this
+        legend: {
+          type: 'legend',
+          title: 'Show Legend',
+          description: '',
+          namespace: 'legend'
+        }
+      }
+    },
+    axis_labels: {
+      type: 'axisLabels',
+      title: 'Axis Preferences',
+      description: '',
+      subSectionDefinition: {
+        x: {
+          title: 'Grouping - 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'
+        },
+        y: {
+          title: 'Metric - 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'
+        }
+      }
+    }
+  }
+};
+
+console.log(axisLabelsConstants(CONSTANTS$e));
+var RadarChart = function RadarChart(config) {
+  return {
+    title: CONSTANTS$e.title,
+    description: CONSTANTS$e.description,
+    servicesClass: 'RadarChart',
+    namespace: CONSTANTS$e.namespace,
+    dump: function dump(hydrated) {
+      return hydrated;
+    },
+    load: function load(dumped) {
+      var _dumped$tags;
+      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,
+        approxXAxisLabelCount: upcastAxisLabel(dumped.approxXAxisLabelCount),
+        approxYAxisLabelCount: upcastAxisLabel(dumped.approxYAxisLabelCount),
+        legend: dumped.legend,
+        tags: (_dumped$tags = dumped.tags) != null ? _dumped$tags : []
+      };
+    },
+    setAttributes: setAttributes$c(config),
+    validate: function validate(attrs, dataSets) {
+      return validateView(attrs, dataSets, config.queryEngineConfig);
+    },
+    init: function init(dataSetId, overrides) {
+      return _extends({
+        type: 'radarChart',
+        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,
+        legend: true,
+        approxXAxisLabelCount: 'auto',
+        approxYAxisLabelCount: 'auto',
+        parameters: {},
+        axisTitles: undefined,
+        headline: undefined,
+        tags: []
+      }, overrides);
+    },
+    createFeedback: createFeedback,
+    schema: attributesSchema$d(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$e, 'data_set'), namespace(CONSTANTS$e, 'views'), _extends({}, namespace(CONSTANTS$e, '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$e, '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$e, 'sort'), namespace(CONSTANTS$e, 'filter'), namespace(CONSTANTS$e, 'custom_metrics'), namespace(CONSTANTS$e, 'limit')];
+    },
+    formatPanelConfig: function formatPanelConfig() {
+      return [headingConstant(CONSTANTS$e), chartStylesConstant(CONSTANTS$e, false, false), axisLabelsConstants(CONSTANTS$e)];
+    },
+    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 componentTypes = ['areaChart', 'barChart', 'basicTable', 'bubbleChart', 'comboChart', 'custom', 'dataTable', 'funnelChart', 'horizontalBarChart', 'lineChart', 'lineChartV2', 'areaChartV2', 'barChartV2', 'mercatorMap', 'pieChart', 'progress', 'richText', 'scatterChart', 'singleStat', 'waterfallChart', 'radarChart'];
 /** @deprecated */
 
 var ProgressType = /*#__PURE__*/function (ProgressType) {
@@ -8182,7 +8494,7 @@ var ProgressType = /*#__PURE__*/function (ProgressType) {
   return ProgressType;
 }({});
 
-var attributesSchema$d = function attributesSchema(config) {
+var attributesSchema$e = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), {
     measure: Joi.array().items(measureSchema(config.queryEngineConfig.supportedAggregates, config.attributesSchemaOptions)),
     filter: queryAttributesFilter(config.queryEngineConfig),
@@ -8205,7 +8517,7 @@ var attributesSchema$d = function attributesSchema(config) {
   }));
 };
 
-var CONSTANTS$e = {
+var CONSTANTS$f = {
   title: 'Progress',
   description: 'Used to show progress towards goals, completion of tasks, or as indicators of performance metrics.',
   namespace: 'progress',
@@ -8293,12 +8605,12 @@ var CONSTANTS$e = {
 
 var Progress = function Progress(config) {
   return {
-    title: CONSTANTS$e.title,
-    description: CONSTANTS$e.description,
+    title: CONSTANTS$f.title,
+    description: CONSTANTS$f.description,
     dump: function dump(hydrated) {
       return hydrated;
     },
-    namespace: CONSTANTS$e.namespace,
+    namespace: CONSTANTS$f.namespace,
     servicesClass: 'Progress',
     load: function load(dumped) {
       var _dumpedButUpcasted$ta;
@@ -8324,7 +8636,7 @@ var Progress = function Progress(config) {
       };
     },
     setAttributes: function setAttributes$1(hydrated, partial) {
-      return setAttributes(hydrated, partial, attributesSchema$d(config));
+      return setAttributes(hydrated, partial, attributesSchema$e(config));
     },
     validate: function validate(attrs, dataSets) {
       return validateView(attrs, dataSets, config.queryEngineConfig);
@@ -8350,7 +8662,7 @@ var Progress = function Progress(config) {
         tags: []
       }, overrides);
     },
-    schema: attributesSchema$d(config),
+    schema: attributesSchema$e(config),
     removeField: function removeField(attrs, fieldId) {
       return removeField$1(attrs, fieldId, config.queryEngineConfig);
     },
@@ -8361,14 +8673,14 @@ var Progress = function Progress(config) {
       return this.init(dataSet.id);
     },
     dataPanelConfig: function dataPanelConfig() {
-      return [namespace(CONSTANTS$e, 'data_set'), namespace(CONSTANTS$e, 'views'), namespace(CONSTANTS$e, 'progress_goals'), namespace(CONSTANTS$e, 'filter'), namespace(CONSTANTS$e, 'custom_metrics')];
+      return [namespace(CONSTANTS$f, 'data_set'), namespace(CONSTANTS$f, 'views'), namespace(CONSTANTS$f, 'progress_goals'), namespace(CONSTANTS$f, 'filter'), namespace(CONSTANTS$f, 'custom_metrics')];
     },
     formatPanelConfig: function formatPanelConfig() {
-      return [headingConstant(CONSTANTS$e), namespace(CONSTANTS$e, 'progress_type'), _extends({}, namespace(CONSTANTS$e, 'stats_labels'), {
-        prefix: statsLabelsConstant(CONSTANTS$e, 'prefix'),
-        postfix: statsLabelsConstant(CONSTANTS$e, 'postfix'),
-        format: statsLabelsConstant(CONSTANTS$e, 'format'),
-        count: statsLabelsConstant(CONSTANTS$e, 'count')
+      return [headingConstant(CONSTANTS$f), namespace(CONSTANTS$f, 'progress_type'), _extends({}, namespace(CONSTANTS$f, 'stats_labels'), {
+        prefix: statsLabelsConstant(CONSTANTS$f, 'prefix'),
+        postfix: statsLabelsConstant(CONSTANTS$f, 'postfix'),
+        format: statsLabelsConstant(CONSTANTS$f, 'format'),
+        count: statsLabelsConstant(CONSTANTS$f, 'count')
       })];
     },
     supportedCustomFields: {
@@ -8388,7 +8700,7 @@ var Progress = function Progress(config) {
   };
 };
 
-var setAttributes$c = (function (config) {
+var setAttributes$d = (function (config) {
   return function (lineChart, partial) {
     var newAttributes = setAttributes(lineChart, partial, attributesSchema(config));
     newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
@@ -8396,7 +8708,7 @@ var setAttributes$c = (function (config) {
   };
 });
 
-var CONSTANTS$f = {
+var CONSTANTS$g = {
   title: 'Funnel chart',
   description: 'Track conversion between stages of a process.',
   namespace: 'funnel_chart',
@@ -8564,10 +8876,10 @@ var CONSTANTS$f = {
 
 var FunnelChart = function FunnelChart(config) {
   return {
-    title: CONSTANTS$f.title,
-    description: CONSTANTS$f.description,
+    title: CONSTANTS$g.title,
+    description: CONSTANTS$g.description,
     servicesClass: 'FunnelChart',
-    namespace: CONSTANTS$f.namespace,
+    namespace: CONSTANTS$g.namespace,
     dump: function dump(hydrated) {
       return hydrated;
     },
@@ -8585,7 +8897,7 @@ var FunnelChart = function FunnelChart(config) {
         parameters: upcastParameters(dumped.parameters)
       });
     },
-    setAttributes: setAttributes$c(config),
+    setAttributes: setAttributes$d(config),
     validate: function validate(attrs, dataSets) {
       return validateView(attrs, dataSets, config.queryEngineConfig);
     },
@@ -8637,7 +8949,7 @@ var FunnelChart = function FunnelChart(config) {
       });
     },
     dataPanelConfig: function dataPanelConfig() {
-      return [namespace(CONSTANTS$f, 'data_set'), namespace(CONSTANTS$f, 'views'), _extends({}, namespace(CONSTANTS$f, 'field_y_axis'), {
+      return [namespace(CONSTANTS$g, 'data_set'), namespace(CONSTANTS$g, 'views'), _extends({}, namespace(CONSTANTS$g, 'field_y_axis'), {
         fieldFilterOptions: {
           forComponent: 'funnelChart'
         },
@@ -8652,7 +8964,7 @@ var FunnelChart = function FunnelChart(config) {
           return attrs.measure;
         },
         testId: 'metric-input'
-      }), _extends({}, namespace(CONSTANTS$f, 'field_x_axis'), {
+      }), _extends({}, namespace(CONSTANTS$g, 'field_x_axis'), {
         fieldFilterOptions: {
           forComponent: 'funnelChart',
           onlyDimensions: true
@@ -8667,12 +8979,12 @@ var FunnelChart = function FunnelChart(config) {
         },
         maxAllowed: 1,
         testId: 'add-dimension'
-      }), namespace(CONSTANTS$f, 'sort'), namespace(CONSTANTS$f, 'filter'), namespace(CONSTANTS$f, 'custom_metrics'), namespace(CONSTANTS$f, 'limit')];
+      }), namespace(CONSTANTS$g, 'sort'), namespace(CONSTANTS$g, 'filter'), namespace(CONSTANTS$g, 'custom_metrics'), namespace(CONSTANTS$g, 'limit')];
     },
     formatPanelConfig: function formatPanelConfig() {
-      return [headingConstant(CONSTANTS$f), chartStylesConstant(CONSTANTS$f, false, false), axisLabelsConstants(CONSTANTS$f), _extends({}, namespace(CONSTANTS$f, 'conditional_formatting'), {
+      return [headingConstant(CONSTANTS$g), chartStylesConstant(CONSTANTS$g, false, false), axisLabelsConstants(CONSTANTS$g), _extends({}, namespace(CONSTANTS$g, 'conditional_formatting'), {
         ruleType: 'backgroundColor'
-      }), namespace(CONSTANTS$f, 'headline')];
+      }), namespace(CONSTANTS$g, 'headline')];
     },
     supportedCustomFields: {
       percentages: true,
@@ -8940,7 +9252,7 @@ function isStatsLabels(panel) {
   return 'prefix' in panel;
 }
 
-var attributesSchema$e = function attributesSchema(config) {
+var attributesSchema$f = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), {
     xMeasure: measureSchema(config.queryEngineConfig.supportedAggregates, config.attributesSchemaOptions).allow(null),
     yMeasure: measureSchema(config.queryEngineConfig.supportedAggregates, config.attributesSchemaOptions).allow(null),
@@ -8967,9 +9279,9 @@ var attributesSchema$e = function attributesSchema(config) {
   }));
 };
 
-var setAttributes$d = (function (config) {
+var setAttributes$e = (function (config) {
   return function (bubbleChart, partial) {
-    var newAttributes = setAttributes(bubbleChart, partial, attributesSchema$e(config));
+    var newAttributes = setAttributes(bubbleChart, partial, attributesSchema$f(config));
     var allowedOrderSpec = [];
     if (newAttributes.xMeasure) {
       allowedOrderSpec.push(newAttributes.xMeasure);
@@ -8993,7 +9305,7 @@ var setAttributes$d = (function (config) {
   };
 });
 
-var CONSTANTS$g = {
+var CONSTANTS$h = {
   title: 'Bubble chart',
   description: 'Displays data points on a Cartesian plane, with a third metric corresponding to bubble size.',
   namespace: 'bubble_chart',
@@ -9192,10 +9504,10 @@ var CONSTANTS$g = {
 
 var BubbleChart = function BubbleChart(config) {
   return {
-    title: CONSTANTS$g.title,
-    description: CONSTANTS$g.description,
+    title: CONSTANTS$h.title,
+    description: CONSTANTS$h.description,
     servicesClass: 'BubbleChart',
-    namespace: CONSTANTS$g.namespace,
+    namespace: CONSTANTS$h.namespace,
     dump: function dump(hydrated) {
       return hydrated;
     },
@@ -9230,7 +9542,7 @@ var BubbleChart = function BubbleChart(config) {
         tags: (_dumped$tags = dumped.tags) != null ? _dumped$tags : []
       };
     },
-    setAttributes: setAttributes$d(config),
+    setAttributes: setAttributes$e(config),
     validate: function validate(attrs, dataSets) {
       return validateView(attrs, dataSets, config.queryEngineConfig);
     },
@@ -9265,7 +9577,7 @@ var BubbleChart = function BubbleChart(config) {
       }, overrides);
     },
     createFeedback: createFeedback,
-    schema: attributesSchema$e(config),
+    schema: attributesSchema$f(config),
     removeField: function removeField(attrs, fieldId) {
       return removeField$1(attrs, fieldId, config.queryEngineConfig);
     },
@@ -9284,18 +9596,18 @@ var BubbleChart = function BubbleChart(config) {
     },
     dataPanelConfig: function dataPanelConfig() {
       var _CONSTANTS$data_panel, _CONSTANTS$data_panel2, _CONSTANTS$data_panel3;
-      return [namespace(CONSTANTS$g, 'data_set'), namespace(CONSTANTS$g, 'views'), _extends({}, namespace(CONSTANTS$g, 'labelled_metrics'), {
-        subSection: [_extends({}, (_CONSTANTS$data_panel = CONSTANTS$g.data_panel.labelled_metrics) == null ? void 0 : _CONSTANTS$data_panel.subSectionDefinition['xAxis'], {
+      return [namespace(CONSTANTS$h, 'data_set'), namespace(CONSTANTS$h, 'views'), _extends({}, namespace(CONSTANTS$h, 'labelled_metrics'), {
+        subSection: [_extends({}, (_CONSTANTS$data_panel = CONSTANTS$h.data_panel.labelled_metrics) == null ? void 0 : _CONSTANTS$data_panel.subSectionDefinition['xAxis'], {
           propKey: 'xMeasure',
           allowsMultiple: false
-        }), _extends({}, (_CONSTANTS$data_panel2 = CONSTANTS$g.data_panel.labelled_metrics) == null ? void 0 : _CONSTANTS$data_panel2.subSectionDefinition['yAxis'], {
+        }), _extends({}, (_CONSTANTS$data_panel2 = CONSTANTS$h.data_panel.labelled_metrics) == null ? void 0 : _CONSTANTS$data_panel2.subSectionDefinition['yAxis'], {
           propKey: 'yMeasure',
           allowsMultiple: false
-        }), _extends({}, (_CONSTANTS$data_panel3 = CONSTANTS$g.data_panel.labelled_metrics) == null ? void 0 : _CONSTANTS$data_panel3.subSectionDefinition['zAxis'], {
+        }), _extends({}, (_CONSTANTS$data_panel3 = CONSTANTS$h.data_panel.labelled_metrics) == null ? void 0 : _CONSTANTS$data_panel3.subSectionDefinition['zAxis'], {
           propKey: 'zMeasure',
           allowsMultiple: false
         })]
-      }), _extends({}, namespace(CONSTANTS$g, 'field_grouping'), {
+      }), _extends({}, namespace(CONSTANTS$h, 'field_grouping'), {
         fieldFilterOptions: {
           onlyDimensions: true,
           onlyFieldTypes: ['boolean', 'number', 'string'],
@@ -9313,13 +9625,13 @@ var BubbleChart = function BubbleChart(config) {
           return attrs.dimension;
         },
         testId: 'add-dimension'
-      }), namespace(CONSTANTS$g, 'filter'), namespace(CONSTANTS$g, 'custom_metrics'), namespace(CONSTANTS$g, 'limit')];
+      }), namespace(CONSTANTS$h, 'filter'), namespace(CONSTANTS$h, 'custom_metrics'), namespace(CONSTANTS$h, 'limit')];
     },
     formatPanelConfig: function formatPanelConfig() {
       var _CONSTANTS$format_pan;
-      return [headingConstant(CONSTANTS$g), _extends({}, namespace(CONSTANTS$g, 'chart_styles'), {
-        subSection: [(_CONSTANTS$format_pan = CONSTANTS$g.format_panel.chart_styles) == null ? void 0 : _CONSTANTS$format_pan.subSectionDefinition.legend]
-      }), axisLabelsConstants(CONSTANTS$g), namespace(CONSTANTS$g, 'goal_line')];
+      return [headingConstant(CONSTANTS$h), _extends({}, namespace(CONSTANTS$h, 'chart_styles'), {
+        subSection: [(_CONSTANTS$format_pan = CONSTANTS$h.format_panel.chart_styles) == null ? void 0 : _CONSTANTS$format_pan.subSectionDefinition.legend]
+      }), axisLabelsConstants(CONSTANTS$h), namespace(CONSTANTS$h, 'goal_line')];
     },
     supportedCustomFields: {
       percentages: true,
@@ -9338,7 +9650,7 @@ var BubbleChart = function BubbleChart(config) {
   };
 };
 
-var attributesSchema$f = function attributesSchema(config) {
+var attributesSchema$g = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
     stacked: Joi.valid(true, false),
     legend: Joi.valid(true, false),
@@ -9353,15 +9665,15 @@ var attributesSchema$f = function attributesSchema(config) {
   }));
 };
 
-var setAttributes$e = (function (config) {
+var setAttributes$f = (function (config) {
   return function (barChart, partial) {
-    var newAttributes = setAttributes(barChart, partial, attributesSchema$f(config));
+    var newAttributes = setAttributes(barChart, partial, attributesSchema$g(config));
     newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
     return newAttributes;
   };
 });
 
-var CONSTANTS$h = {
+var CONSTANTS$i = {
   title: 'Bar Chart V2',
   description: 'Ideal for illustrating changes and trends over time with bar graphs.',
   namespace: 'bar_chart',
@@ -9583,7 +9895,7 @@ var BarChart$1 = function BarChart(config) {
         drilldownOptions: dumped.drilldownOptions
       };
     },
-    setAttributes: setAttributes$e(config),
+    setAttributes: setAttributes$f(config),
     validate: function validate(attrs, dataSets) {
       return validateView(attrs, dataSets, config.queryEngineConfig);
     },
@@ -9621,7 +9933,7 @@ var BarChart$1 = function BarChart(config) {
       }, overrides);
     },
     createFeedback: createFeedback,
-    schema: attributesSchema$f(config),
+    schema: attributesSchema$g(config),
     removeField: function removeField(attrs, fieldId) {
       return removeField$1(attrs, fieldId, config.queryEngineConfig);
     },
@@ -9638,7 +9950,7 @@ var BarChart$1 = function BarChart(config) {
       });
     },
     dataPanelConfig: function dataPanelConfig() {
-      return [namespace(CONSTANTS$h, 'data_set'), namespace(CONSTANTS$h, 'views'), _extends({}, namespace(CONSTANTS$h, 'field_y_axis'), {
+      return [namespace(CONSTANTS$i, 'data_set'), namespace(CONSTANTS$i, 'views'), _extends({}, namespace(CONSTANTS$i, 'field_y_axis'), {
         fieldFilterOptions: {
           forComponent: 'barChart'
         },
@@ -9651,7 +9963,7 @@ var BarChart$1 = function BarChart(config) {
           return attrs.measure;
         },
         testId: 'metric-input'
-      }), _extends({}, namespace(CONSTANTS$h, 'field_x_axis'), {
+      }), _extends({}, namespace(CONSTANTS$i, 'field_x_axis'), {
         fieldFilterOptions: {
           forComponent: 'barChart',
           onlyDimensions: true
@@ -9669,16 +9981,16 @@ var BarChart$1 = function BarChart(config) {
         },
         maxAllowed: 2,
         testId: 'add-dimension'
-      }), namespace(CONSTANTS$h, 'sort'), namespace(CONSTANTS$h, 'filter'), _extends({}, namespace(CONSTANTS$h, 'drilldown'), {
+      }), namespace(CONSTANTS$i, 'sort'), namespace(CONSTANTS$i, 'filter'), _extends({}, namespace(CONSTANTS$i, 'drilldown'), {
         options: {
           property: 'drilldownOptions'
         }
-      }), namespace(CONSTANTS$h, 'custom_metrics'), namespace(CONSTANTS$h, 'limit')];
+      }), namespace(CONSTANTS$i, 'custom_metrics'), namespace(CONSTANTS$i, 'limit')];
     },
     formatPanelConfig: function formatPanelConfig() {
-      return [headingConstant(CONSTANTS$h), chartStylesConstant(CONSTANTS$h, false, true), axisLabelsConstants(CONSTANTS$h), _extends({}, namespace(CONSTANTS$h, 'conditional_formatting'), {
+      return [headingConstant(CONSTANTS$i), chartStylesConstant(CONSTANTS$i, false, true), axisLabelsConstants(CONSTANTS$i), _extends({}, namespace(CONSTANTS$i, 'conditional_formatting'), {
         ruleType: 'lineColor'
-      }), namespace(CONSTANTS$h, 'goal_line')];
+      }), namespace(CONSTANTS$i, 'goal_line')];
     },
     supportedCustomFields: {
       calculatedField: false,
@@ -9700,7 +10012,7 @@ var BarChart$1 = function BarChart(config) {
   };
 };
 
-var attributesSchema$g = function attributesSchema(config) {
+var attributesSchema$h = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
     legend: Joi.valid(true, false),
     type: Joi.valid('waterfallChart').required(),
@@ -9711,15 +10023,15 @@ var attributesSchema$g = function attributesSchema(config) {
   }));
 };
 
-var setAttributes$f = (function (config) {
+var setAttributes$g = (function (config) {
   return function (waterfallChart, partial) {
-    var newAttributes = setAttributes(waterfallChart, partial, attributesSchema$g(config));
+    var newAttributes = setAttributes(waterfallChart, partial, attributesSchema$h(config));
     newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
     return newAttributes;
   };
 });
 
-var CONSTANTS$i = {
+var CONSTANTS$j = {
   title: 'Waterfall chart',
   description: "Shows a running total as values are added or subtracted. It's useful for understanding how an initial value is affected by a series of positive and negative values.",
   namespace: 'waterfall_chart',
@@ -9877,10 +10189,10 @@ var CONSTANTS$i = {
 
 var WaterfallChart = function WaterfallChart(config) {
   return {
-    title: CONSTANTS$i.title,
-    description: CONSTANTS$i.description,
+    title: CONSTANTS$j.title,
+    description: CONSTANTS$j.description,
     servicesClass: 'WaterfallChart',
-    namespace: CONSTANTS$i.namespace,
+    namespace: CONSTANTS$j.namespace,
     dump: function dump(hydrated) {
       return hydrated;
     },
@@ -9915,7 +10227,7 @@ var WaterfallChart = function WaterfallChart(config) {
         offset: dumped.offset
       };
     },
-    setAttributes: setAttributes$f(config),
+    setAttributes: setAttributes$g(config),
     validate: function validate(attrs, dataSets) {
       return validateView(attrs, dataSets, config.queryEngineConfig);
     },
@@ -9950,7 +10262,7 @@ var WaterfallChart = function WaterfallChart(config) {
       }, overrides);
     },
     createFeedback: createFeedback,
-    schema: attributesSchema$g(config),
+    schema: attributesSchema$h(config),
     removeField: function removeField(attrs, fieldId) {
       return removeField$1(attrs, fieldId, config.queryEngineConfig);
     },
@@ -9967,7 +10279,7 @@ var WaterfallChart = function WaterfallChart(config) {
       });
     },
     dataPanelConfig: function dataPanelConfig() {
-      return [namespace(CONSTANTS$i, 'data_set'), namespace(CONSTANTS$i, 'views'), _extends({}, namespace(CONSTANTS$i, 'field_y_axis'), {
+      return [namespace(CONSTANTS$j, 'data_set'), namespace(CONSTANTS$j, 'views'), _extends({}, namespace(CONSTANTS$j, 'field_y_axis'), {
         fieldFilterOptions: {
           forComponent: 'waterfallChart',
           onlyMeasures: true
@@ -9981,7 +10293,7 @@ var WaterfallChart = function WaterfallChart(config) {
           return attrs.measure;
         },
         testId: 'metric-input'
-      }), _extends({}, namespace(CONSTANTS$i, 'field_x_axis'), {
+      }), _extends({}, namespace(CONSTANTS$j, 'field_x_axis'), {
         fieldFilterOptions: {
           forComponent: 'waterfallChart',
           onlyDimensions: true
@@ -9995,10 +10307,10 @@ var WaterfallChart = function WaterfallChart(config) {
         },
         maxAllowed: 2,
         testId: 'add-dimension'
-      }), namespace(CONSTANTS$i, 'sort'), namespace(CONSTANTS$i, 'filter'), namespace(CONSTANTS$i, 'custom_metrics'), namespace(CONSTANTS$i, 'limit')];
+      }), namespace(CONSTANTS$j, 'sort'), namespace(CONSTANTS$j, 'filter'), namespace(CONSTANTS$j, 'custom_metrics'), namespace(CONSTANTS$j, 'limit')];
     },
     formatPanelConfig: function formatPanelConfig() {
-      return [headingConstant(CONSTANTS$i), chartStylesConstant(CONSTANTS$i, false, false), axisLabelsConstants(CONSTANTS$i)];
+      return [headingConstant(CONSTANTS$j), chartStylesConstant(CONSTANTS$j, false, false), axisLabelsConstants(CONSTANTS$j)];
     },
     supportedCustomFields: {
       percentages: true,
@@ -10020,7 +10332,7 @@ var WaterfallChart = function WaterfallChart(config) {
   };
 };
 
-var attributesSchema$h = function attributesSchema(config) {
+var attributesSchema$i = 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),
@@ -10036,15 +10348,15 @@ var attributesSchema$h = function attributesSchema(config) {
   }));
 };
 
-var setAttributes$g = (function (config) {
+var setAttributes$h = (function (config) {
   return function (lineChart, partial) {
-    var newAttributes = setAttributes(lineChart, partial, attributesSchema$h(config));
+    var newAttributes = setAttributes(lineChart, partial, attributesSchema$i(config));
     newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
     return newAttributes;
   };
 });
 
-var CONSTANTS$j = {
+var CONSTANTS$k = {
   title: 'Area chart',
   description: 'Ideal for illustrating changes and trends over time with area graphs.',
   namespace: 'area_chart',
@@ -10278,7 +10590,7 @@ var AreaChart$1 = function AreaChart(config) {
         stacked: dumped.stacked
       };
     },
-    setAttributes: setAttributes$g(config),
+    setAttributes: setAttributes$h(config),
     validate: function validate(attrs, dataSets) {
       return validateView(attrs, dataSets, config.queryEngineConfig);
     },
@@ -10318,7 +10630,7 @@ var AreaChart$1 = function AreaChart(config) {
       }, overrides);
     },
     createFeedback: createFeedback,
-    schema: attributesSchema$h(config),
+    schema: attributesSchema$i(config),
     removeField: function removeField(attrs, fieldId) {
       return removeField$1(attrs, fieldId, config.queryEngineConfig);
     },
@@ -10335,7 +10647,7 @@ var AreaChart$1 = function AreaChart(config) {
       });
     },
     dataPanelConfig: function dataPanelConfig() {
-      return [namespace(CONSTANTS$j, 'data_set'), namespace(CONSTANTS$j, 'views'), _extends({}, namespace(CONSTANTS$j, 'field_y_axis'), {
+      return [namespace(CONSTANTS$k, 'data_set'), namespace(CONSTANTS$k, 'views'), _extends({}, namespace(CONSTANTS$k, 'field_y_axis'), {
         fieldFilterOptions: {
           forComponent: 'lineChart'
         },
@@ -10348,7 +10660,7 @@ var AreaChart$1 = function AreaChart(config) {
           return attrs.measure;
         },
         testId: 'metric-input'
-      }), _extends({}, namespace(CONSTANTS$j, 'field_x_axis'), {
+      }), _extends({}, namespace(CONSTANTS$k, 'field_x_axis'), {
         fieldFilterOptions: {
           forComponent: 'lineChart',
           onlyDimensions: true
@@ -10366,12 +10678,12 @@ var AreaChart$1 = function AreaChart(config) {
         },
         maxAllowed: 2,
         testId: 'add-dimension'
-      }), namespace(CONSTANTS$j, 'sort'), namespace(CONSTANTS$j, 'filter'), namespace(CONSTANTS$j, 'custom_metrics'), namespace(CONSTANTS$j, 'limit')];
+      }), namespace(CONSTANTS$k, 'sort'), namespace(CONSTANTS$k, 'filter'), namespace(CONSTANTS$k, 'custom_metrics'), namespace(CONSTANTS$k, 'limit')];
     },
     formatPanelConfig: function formatPanelConfig() {
-      return [headingConstant(CONSTANTS$j), chartStylesConstant(CONSTANTS$j, true, false), axisLabelsConstants(CONSTANTS$j), _extends({}, namespace(CONSTANTS$j, 'conditional_formatting'), {
+      return [headingConstant(CONSTANTS$k), chartStylesConstant(CONSTANTS$k, true, false), axisLabelsConstants(CONSTANTS$k), _extends({}, namespace(CONSTANTS$k, 'conditional_formatting'), {
         ruleType: 'lineColor'
-      }), namespace(CONSTANTS$j, 'goal_line')];
+      }), namespace(CONSTANTS$k, 'goal_line')];
     },
     supportedCustomFields: {
       calculatedField: false,
@@ -10426,6 +10738,7 @@ function getComponentInterface(type, config) {
   if (type == 'scatterChart') return textOverrideComponent(ScatterChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'singleStat') return textOverrideComponent(SingleStat(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   if (type == 'waterfallChart') return textOverrideComponent(WaterfallChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
+  if (type == 'radarChart') return textOverrideComponent(RadarChart(config || EMPTY_CONFIG), config == null ? void 0 : config.textOverride);
   throw "Cannot get interface for " + type + ". Please implement it.";
 }
 
@@ -13572,7 +13885,7 @@ var buildDefaults = function buildDefaults(partialFeatureToggles) {
   };
 };
 
-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_COMPONENT_TYPES = ['barChart', 'bubbleChart', 'horizontalBarChart', 'funnelChart', 'areaChart', 'areaChartV2', 'lineChart', 'lineChartV2', 'barChartV2', 'scatterChart', 'pieChart', 'singleStat', 'dataTable', 'basicTable', 'comboChart', 'mercatorMap', 'progress', 'richText', 'custom', 'waterfallChart', 'radarChart'];
 var ALL_VIZZLY_COMPONENT_TYPES = /*#__PURE__*/[].concat(ALL_COMPONENT_TYPES).filter(function (type) {
   return type != 'custom';
 });
@@ -13912,7 +14225,7 @@ var saveable = function saveable(component, protectedComponent) {
   };
 };
 
-var attributesSchema$i = function attributesSchema(config) {
+var attributesSchema$j = function attributesSchema(config) {
   return Joi.alternatives().conditional('.type', {
     is: 'barChart',
     then: BarChart(config).schema
@@ -13973,6 +14286,9 @@ var attributesSchema$i = function attributesSchema(config) {
   }).conditional('.type', {
     is: 'waterfallChart',
     then: WaterfallChart(config).schema
+  }).conditional('.type', {
+    is: 'radarChart',
+    then: RadarChart(config).schema
   });
 };
 
@@ -21282,7 +21598,7 @@ var Combobox = function Combobox(props) {
   });
 };
 
-var attributesSchema$j = /*#__PURE__*/Joi.object({
+var attributesSchema$k = /*#__PURE__*/Joi.object({
   displayTitle: /*#__PURE__*/Joi.string().min(1).required(),
   colSpan: /*#__PURE__*/Joi.number().valid(12).required()
 });
@@ -21299,7 +21615,7 @@ var isEmptyCell = /*#__PURE__*/Joi.object({
 });
 var isPopulatedCell = function isPopulatedCell(queryEngineConfig) {
   return Joi.object({
-    attributes: attributesSchema$i({
+    attributes: attributesSchema$j({
       queryEngineConfig: queryEngineConfig
     }),
     colSpan: colSpanSchema
@@ -21310,7 +21626,7 @@ var saveableDashboardDefinitionSchema = function saveableDashboardDefinitionSche
     id: Joi.string(),
     display: displaySchema(queryEngineConfig),
     componentLibrary: Joi.array().required().items(Joi.object({
-      attributes: attributesSchema$i({
+      attributes: attributesSchema$j({
         queryEngineConfig: queryEngineConfig
       })
     })),
@@ -21321,7 +21637,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$j))
+    components: Joi.array().required().min(1).items(Joi.alternatives(isEmptyCell, isPopulatedCell(queryEngineConfig), attributesSchema$k))
   }));
 }
 
@@ -22043,7 +22359,7 @@ var setHeaderComponent = function setHeaderComponent(state, action) {
   newDisplayState.dashboard.display[rowIndex].components[cellIndex] = component;
   return newDisplayState;
 };
-var setAttributes$h = function setAttributes(state, action) {
+var setAttributes$i = function setAttributes(state, action) {
   var attributes = action.attributes,
     rowIndex = action.rowIndex,
     cellIndex = action.cellIndex;
@@ -22328,7 +22644,7 @@ var reducer = function reducer(pipelineTransformationOptions) {
         case 'swapComponents':
           return swapComponents$1(state, action);
         case 'setAttributes':
-          return setAttributes$h(state, action);
+          return setAttributes$i(state, action);
         case 'addComponentToLibrary':
           return addComponentToLibrary(state, action);
         case 'setLocalFilters':
@@ -25897,6 +26213,19 @@ var ComboChart$1 = function ComboChart(props) {
     })
   }));
 };
+var RadarChart$1 = function RadarChart(props) {
+  return jsxRuntime.jsx("svg", _extends({}, props, {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsxRuntime.jsx("path", {
+      d: "M12 3L16.4498 6.51028L21 9.87539M12 3L7.55015 6.51028L3 9.87539M12 3V7.97508M21 9.87539L19.2 15.41L17.5623 21M21 9.87539L16.5 11.4128M17.5623 21L12 20.9103L6.43769 21M17.5623 21L14.7812 16.9751M6.43769 21L4.8 15.41L3 9.87539M6.43769 21L8.5 18M3 9.87539L7.5 11.4128M12 12.9502L8.5 18M12 12.9502L14.7812 16.9751M12 12.9502L16.5 11.4128M12 12.9502V7.97508M12 12.9502L7.5 11.4128M8.5 18L14.7812 16.9751M8.5 18L7.5 11.4128M14.7812 16.9751L16.5 11.4128M16.5 11.4128L12 7.97508M12 7.97508L7.5 11.4128",
+      stroke: "#5C6770",
+      "stroke-width": "1.5",
+      "stroke-linejoin": "round"
+    })
+  }));
+};
 var MercatorMap$1 = function MercatorMap(props) {
   return jsxRuntime.jsx("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -25998,6 +26327,9 @@ var componentTypeToIconMapping = {
   waterfallChart: function waterfallChart(color) {
     return WaterfallChart$1(color);
   },
+  radarChart: function radarChart(color) {
+    return RadarChart$1(color);
+  },
   custom: function custom(_p) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
@@ -43321,6 +43653,432 @@ var Bar = function Bar(props) {
   }, props.key);
 };
 
+var useableId = function useableId(key, prefix) {
+  var newKey = key.toLowerCase()
+  // Remove characters that aren't letters, digits, underscores, or spaces
+  .replace(/[^\w\s-]+/g, '')
+  // Replace whitespace with hyphens
+  .replace(/\s+/g, '-')
+  // Remove leading or trailing hyphens
+  .replace(/^-+|-+$/g, '');
+  return prefix + '-' + newKey;
+};
+
+function useVisibleYKeys(areas) {
+  var _useState = React.useState(areas.map(function (legendItem) {
+      return legendItem.yKey;
+    })),
+    visibleYKeysState = _useState[0],
+    setVisibleYKeys = _useState[1];
+  React.useEffect(function () {
+    setVisibleYKeys(areas.map(function (legendItem) {
+      return legendItem.yKey;
+    }));
+    return function () {
+      setVisibleYKeys([]);
+    };
+  }, [areas]);
+  return {
+    visibleYKeys: visibleYKeysState,
+    setVisibleYKeys: setVisibleYKeys
+  };
+}
+
+var thresholdId$1 = function thresholdId(args, idPrefix, position, uniqueId) {
+  var rawIdKey = args.yKey + "_" + args.value + "_" + args.operator;
+  return (position + "_" + idPrefix + "_" + uniqueId + "_" + btoa(rawIdKey)).replace(/=/g, '');
+};
+function buildClipPathId$1(rule, idPrefix, uniqueId) {
+  var isGreater = rule.operator === '>=';
+  var clipPathId = isGreater ? thresholdId$1(rule, idPrefix, 'above', uniqueId) : thresholdId$1(rule, idPrefix, 'below', uniqueId);
+  return clipPathId;
+}
+function getRule(rules, yKey) {
+  return rules.filter(function (threshold) {
+    return threshold.yKey === yKey;
+  });
+}
+
+var ThresholdArea = function ThresholdArea(props) {
+  var chartHeight = props.height - props.margin.top;
+  return jsxRuntime.jsxs(React.Fragment, {
+    children: [jsxRuntime.jsx("g", {
+      transform: "translate(50, 0)",
+      children: props.rules.map(function (thresh, index) {
+        var _props$theme$stroke, _props$theme;
+        var thresholdYCoord = props.yScale(thresh.value);
+        return jsxRuntime.jsx("g", {
+          children: jsxRuntime.jsx("line", {
+            x1: 0,
+            y1: thresholdYCoord,
+            x2: props.width - props.margin.right - props.margin.left,
+            y2: thresholdYCoord,
+            stroke: (_props$theme$stroke = (_props$theme = props.theme) == null ? void 0 : _props$theme.stroke) != null ? _props$theme$stroke : '#F4F4F4',
+            strokeWidth: "1",
+            fill: "transparent",
+            "data-themeapi": "charts.threshold.stroke"
+          })
+        }, "threshold-" + index);
+      })
+    }), jsxRuntime.jsx("defs", {
+      children: props.rules.map(function (thresh, index) {
+        var thresholdYCoord = props.yScale(thresh.value);
+        if (!thresholdYCoord) return null;
+        return jsxRuntime.jsxs(React.Fragment, {
+          children: [jsxRuntime.jsx("clipPath", {
+            id: thresholdId$1(thresh, props.idPrefix, 'above', props.uniqueId),
+            children: jsxRuntime.jsx("rect", {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: thresholdYCoord
+            })
+          }), jsxRuntime.jsx("clipPath", {
+            id: thresholdId$1(thresh, props.idPrefix, 'intermediate', props.uniqueId),
+            children: jsxRuntime.jsx("rect", {
+              x: "0",
+              y: thresholdYCoord,
+              width: "100%",
+              height: 0
+            })
+          }), jsxRuntime.jsx("clipPath", {
+            id: thresholdId$1(thresh, props.idPrefix, 'below', props.uniqueId),
+            children: jsxRuntime.jsx("rect", {
+              x: "0",
+              y: thresholdYCoord,
+              width: "100%",
+              height: chartHeight - thresholdYCoord
+            })
+          })]
+        }, "threshold-" + index);
+      })
+    })]
+  });
+};
+
+var AREA_GRADIENT_ID_PREFIX = 'area-gradient';
+
+/* 
+  NOTES
+  ----- 
+  1. Control width of margins via props and truncate ticks using a fixed width
+  2. (somehow) prevent overlapping of ticks
+  3. Split out conditional formatting colours to show operator and values for each color
+  4. Add axis titles
+  5. Account for no xKey and showing 1 dot for a single yKey
+*/
+
+var AreaChart$5 = function AreaChart(_ref) {
+  var _theme$axis;
+  var chart = _ref.chart,
+    options = _ref.options,
+    theme = _ref.theme,
+    width = _ref.width,
+    height = _ref.height,
+    uniqueId = _ref.uniqueId;
+  var _useTooltip = useTooltip$1(),
+    tooltipOpen = _useTooltip.tooltipOpen,
+    _useTooltip$tooltipLe = _useTooltip.tooltipLeft,
+    tooltipLeft = _useTooltip$tooltipLe === void 0 ? 0 : _useTooltip$tooltipLe,
+    _useTooltip$tooltipTo = _useTooltip.tooltipTop,
+    tooltipTop = _useTooltip$tooltipTo === void 0 ? 0 : _useTooltip$tooltipTo,
+    _useTooltip$lineLeft = _useTooltip.lineLeft,
+    lineLeft = _useTooltip$lineLeft === void 0 ? 0 : _useTooltip$lineLeft,
+    tooltipData = _useTooltip.tooltipData,
+    hideTooltip = _useTooltip.hideTooltip,
+    showTooltip = _useTooltip.showTooltip;
+  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null);
+  var _useVisibleYKeys = useVisibleYKeys(chart.areas),
+    visibleYKeys = _useVisibleYKeys.visibleYKeys,
+    setVisibleYKeys = _useVisibleYKeys.setVisibleYKeys;
+  var innerWidth = width - margin.left - margin.right;
+  var innerHeight = height - margin.top - margin.bottom - (options.showLegend ? 40 : 0);
+  var xKey = chart.x.key;
+  var xScaleKey = chart.x.scale.key;
+  var xScaleDataType = chart.x.scale.dataType;
+  var themeCSS = React.useMemo(function () {
+    return getChartThemeCSS(theme);
+  }, [theme]);
+  var xScale = React.useMemo(function () {
+    if (xScaleDataType === 'string') {
+      return scale.scalePoint({
+        range: [0, innerWidth],
+        domain: xScaleKey ? [].concat(chart.data.map(function (d) {
+          return d[xScaleKey] && d[xScaleKey].value !== null ? String(d[xScaleKey].value) : '';
+        })) : []
+      });
+    }
+    if (xScaleDataType === 'date_time') {
+      return scale.scaleTime({
+        range: [0, innerWidth],
+        domain: chart.x.scale.ordering === 'asc' ? [chart.x.scale.min, chart.x.scale.max] : [chart.x.scale.max, chart.x.scale.min]
+      });
+    }
+    if (xScaleDataType === 'number') {
+      return scale.scaleLinear({
+        range: [0, innerWidth],
+        domain: chart.x.scale.ordering === 'asc' ? [chart.x.scale.min, chart.x.scale.max] : [chart.x.scale.max, chart.x.scale.min],
+        nice: true
+      });
+    }
+    return null;
+  }, [innerWidth, chart.x, chart.data]);
+  var _yScale = React.useMemo(function () {
+    return scale.scaleLinear({
+      range: [innerHeight, 0],
+      domain: chart.y.scale.ordering === 'asc' ? [chart.y.scale.min, chart.y.scale.max] : [chart.y.scale.max, chart.y.scale.min],
+      nice: true
+    });
+  }, [innerHeight, chart.y.scale]);
+  var dataFlattened = useFlattenedData(xScaleKey, xScaleDataType, chart);
+  var handleMouseMove = React.useCallback(function (event) {
+    if (!xKey || !xScaleKey || xScale === null) return;
+    var tooltipData = getTooltipData({
+      data: chart.data,
+      event: event,
+      margin: margin,
+      xScaleKey: xScaleKey,
+      xScaleDataType: xScaleDataType,
+      xOrdering: chart.x.scale.ordering,
+      xScale: xScale,
+      chartType: 'lines'
+    });
+    showTooltip({
+      lineLeft: tooltipData == null ? void 0 : tooltipData.lineLeft,
+      tooltipLeft: event.pageX,
+      tooltipTop: event.pageY,
+      tooltipData: tooltipData == null ? void 0 : tooltipData.tooltipData
+    });
+  }, [showTooltip, xScale, margin, xKey, xScaleKey, xScaleDataType, chart.x.scale.ordering, chart.data]);
+  var handleMouseLeave = React.useCallback(function () {
+    hideTooltip();
+  }, [hideTooltip]);
+  var areaCurve = React.useCallback(function () {
+    var _options$curve;
+    var curveMap = {
+      natural: Curves.curveMonotoneX,
+      step: Curves.curveStep,
+      straight: Curves.curveLinear
+    };
+    return curveMap[(_options$curve = options.curve) != null ? _options$curve : 'monotoneX'];
+  }, [options.curve]);
+  if (width === 0 || height === 0 || xScale === null) return jsxRuntime.jsx(React__default.Fragment, {});
+  var yTickValues = chart.y.ticks.map(function (tick) {
+    return Number(tick.value);
+  });
+  return jsxRuntime.jsxs(React__default.Fragment, {
+    children: [jsxRuntime.jsxs(ChartWrapper$1, {
+      width: width,
+      height: height,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      showLegend: options.showLegend,
+      children: [jsxRuntime.jsxs(group.Group, {
+        left: margin.left,
+        top: margin.top,
+        children: [jsxRuntime.jsx(GridRows, {
+          ticks: yTickValues,
+          yScale: _yScale,
+          width: innerWidth,
+          height: innerHeight,
+          removeStroke: options.removeStroke,
+          themeCSS: themeCSS
+        }), jsxRuntime.jsx(AxisBottom, {
+          x: chart.x,
+          margin: margin,
+          themeCSS: themeCSS,
+          show: options.axis.showXAxisLabels,
+          removeStroke: options.removeStroke,
+          xScaleDataType: xScaleDataType,
+          xScale: xScale,
+          height: innerHeight
+        }), jsxRuntime.jsx(AxisLeft, {
+          show: options.axis.showYAxisLabels,
+          y: chart.y,
+          margin: margin,
+          themeCSS: themeCSS,
+          yScale: _yScale,
+          ticks: yTickValues,
+          stroke: theme == null || (_theme$axis = theme.axis) == null ? void 0 : _theme$axis.stroke
+        }), jsxRuntime.jsxs(group.Group, {
+          children: [chart.conditionalFormattingRules && chart.conditionalFormattingRules.length > 0 && jsxRuntime.jsx(ThresholdArea, {
+            rules: chart.conditionalFormattingRules,
+            height: height,
+            margin: margin,
+            idPrefix: AREA_GRADIENT_ID_PREFIX,
+            theme: theme == null ? void 0 : theme.threshold,
+            uniqueId: uniqueId,
+            yScale: _yScale,
+            width: width
+          }), chart.y.keys.map(function (yKey) {
+            var style = chart.areas.find(function (area) {
+              return area.yKey === yKey;
+            });
+            return jsxRuntime.jsxs(React.Fragment, {
+              children: [jsxRuntime.jsx(gradient.LinearGradient, {
+                id: useableId(yKey, AREA_GRADIENT_ID_PREFIX),
+                from: style == null ? void 0 : style.color,
+                to: style == null ? void 0 : style.color,
+                fromOpacity: style == null ? void 0 : style.style.fromOpacity,
+                toOpacity: style == null ? void 0 : style.style.toOpacity
+              }), getRule(chart.conditionalFormattingRules, yKey).map(function (areaThreshold, thresholdIndex) {
+                return jsxRuntime.jsx(gradient.LinearGradient, {
+                  id: useableId(yKey + "-" + thresholdIndex, AREA_GRADIENT_ID_PREFIX),
+                  from: areaThreshold == null ? void 0 : areaThreshold.color,
+                  to: areaThreshold == null ? void 0 : areaThreshold.color,
+                  fromOpacity: style == null ? void 0 : style.style.fromOpacity,
+                  toOpacity: style == null ? void 0 : style.style.toOpacity,
+                  clipPath: "url(#" + buildClipPathId$1(areaThreshold, AREA_GRADIENT_ID_PREFIX, uniqueId) + ")"
+                }, yKey + "-" + AREA_GRADIENT_ID_PREFIX + "_" + thresholdIndex);
+              })]
+            }, yKey + "-" + AREA_GRADIENT_ID_PREFIX);
+          }), options.stacked && jsxRuntime.jsx(shape.AreaStack, {
+            keys: chart.y.keys,
+            data: dataFlattened,
+            x: function x(d) {
+              var _xScale;
+              // @ts-ignore
+              var xValue = d.data[xScaleKey];
+              var xValueAdjusted = xScaleDataType === 'date_time' ? new Date(xValue) : xScaleDataType === 'number' ? Number(xValue) : String(xValue);
+              // @ts-ignore
+              return (_xScale = xScale(xValueAdjusted)) != null ? _xScale : 0;
+            },
+            y0: function y0(d) {
+              return _yScale(d[0]);
+            },
+            y1: function y1(d) {
+              return _yScale(d[1]);
+            },
+            curve: areaCurve(),
+            children: function children(_ref2) {
+              var stacks = _ref2.stacks,
+                path = _ref2.path;
+              return stacks.map(function (stack) {
+                return jsxRuntime.jsx(React.Fragment, {
+                  children: jsxRuntime.jsx("path", {
+                    d: path(stack) || '',
+                    fill: "url(#" + useableId(stack.key, AREA_GRADIENT_ID_PREFIX) + ")"
+                  })
+                }, "stack-" + stack.index + "-" + stack.key);
+              });
+            }
+          }), !options.stacked && chart.y.keys.map(function (yKey) {
+            if (xScaleKey === null) return null;
+            return jsxRuntime.jsxs(React.Fragment, {
+              children: [jsxRuntime.jsx(Area, {
+                data: dataFlattened,
+                yScale: _yScale,
+                xScaleDataType: xScaleDataType,
+                xKey: xScaleKey,
+                xScale: xScale,
+                yKey: yKey,
+                curve: areaCurve()
+              }), getRule(chart.conditionalFormattingRules, yKey).map(function (areaThreshold, thresholdIndex) {
+                var id = useableId(yKey + "-" + thresholdIndex, AREA_GRADIENT_ID_PREFIX);
+                return jsxRuntime.jsx(Area, {
+                  data: dataFlattened,
+                  yScale: _yScale,
+                  xScaleDataType: xScaleDataType,
+                  xKey: xScaleKey,
+                  xScale: xScale,
+                  yKey: yKey,
+                  curve: areaCurve(),
+                  stroke: "url(#" + id + ")",
+                  clipPath: "url(#" + buildClipPathId$1(areaThreshold, AREA_GRADIENT_ID_PREFIX, uniqueId) + ")",
+                  fill: "url(#" + id + ")"
+                }, yKey + "-" + AREA_GRADIENT_ID_PREFIX + "-" + thresholdIndex);
+              })]
+            }, yKey + "-" + AREA_GRADIENT_ID_PREFIX);
+          })]
+        })]
+      }), tooltipData && jsxRuntime.jsxs("g", {
+        children: [jsxRuntime.jsx(Line, {
+          x: lineLeft,
+          margin: margin,
+          height: innerHeight
+        }), !options.stacked && jsxRuntime.jsx(CrosshairCircle, {
+          yKeys: chart.y.keys,
+          xKey: xScaleKey,
+          dataType: xScaleDataType,
+          legendItems: chart.areas,
+          yScale: function yScale(yKey) {
+            return _yScale(tooltipData[yKey].value !== null ? tooltipData[yKey].value : 0);
+          }
+          // @ts-ignore
+          ,
+          xScale: xScale,
+          margin: margin,
+          tooltipData: tooltipData,
+          conditionalFormattingRules: chart.conditionalFormattingRules,
+          visibleYKeys: visibleYKeys
+        })]
+      }), jsxRuntime.jsx(GoalLines$1, {
+        goalLines: chart.goalLines,
+        y: function y(d) {
+          return _yScale(d);
+        },
+        margin: margin,
+        width: innerWidth
+      })]
+    }), options.showLegend && jsxRuntime.jsx(Legend$1, {
+      legendItems: chart.areas,
+      visibleYKeys: visibleYKeys,
+      setVisibleYKeys: setVisibleYKeys,
+      keys: chart.keys,
+      conditionalFormattingRules: chart.conditionalFormattingRules,
+      marginLeft: margin.left - margin.leftTitleOffset
+    }), tooltipOpen && tooltipData && xKey && jsxRuntime.jsx(Tooltip$1, {
+      tooltipData: tooltipData,
+      tooltipLeft: tooltipLeft,
+      tooltipTop: tooltipTop,
+      xKey: xKey,
+      keys: chart.keys,
+      visibleYKeys: visibleYKeys,
+      yKeys: chart.y.keys,
+      legendItems: chart.areas,
+      showRoundedTotal: options.showRoundedTotal,
+      conditionalFormattingRules: chart.conditionalFormattingRules,
+      theme: themeCSS.popoverMenus
+    })]
+  });
+};
+function Area(_ref3) {
+  var data = _ref3.data,
+    xScaleDataType = _ref3.xScaleDataType,
+    xScale = _ref3.xScale,
+    yScale = _ref3.yScale,
+    yKey = _ref3.yKey,
+    curve = _ref3.curve,
+    clipPath = _ref3.clipPath,
+    xKey = _ref3.xKey,
+    fill = _ref3.fill,
+    stroke = _ref3.stroke;
+  return jsxRuntime.jsx(shape.AreaClosed, {
+    data: data,
+    x: function x(d) {
+      var _xScale2;
+      var xValue = d[xKey];
+      var xValueAdjusted = xScaleDataType === 'date_time' ? new Date(xValue) : xScaleDataType === 'number' ? Number(xValue) : String(xValue);
+      // @ts-ignore
+      return (_xScale2 = xScale(xValueAdjusted)) != null ? _xScale2 : 0;
+    },
+    y: function y(d) {
+      var _yScale2;
+      var value = d[yKey];
+      return value !== null ? (_yScale2 = yScale(value)) != null ? _yScale2 : 0 : 0;
+    },
+    defined: function defined(d) {
+      return d !== null && d[yKey] !== null;
+    },
+    yScale: yScale,
+    strokeWidth: 1,
+    stroke: stroke != null ? stroke : "url(#" + useableId(yKey, AREA_GRADIENT_ID_PREFIX) + ")",
+    fill: fill != null ? fill : "url(#" + useableId(yKey, AREA_GRADIENT_ID_PREFIX) + ")",
+    curve: curve,
+    clipPath: clipPath
+  });
+}
+
 function getStyleDefinition(_ref) {
   var colors = _ref.colors,
     yKeys = _ref.yKeys,
@@ -49295,7 +50053,7 @@ var AreaChartV2View = function AreaChartV2View(props) {
           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, {
+            return jsxRuntime.jsx(AreaChart$5, {
               width: parent.width,
               height: parent.height,
               chart: adjustTicks(chartRepresentation, parent.width, parent.height),
@@ -49351,6 +50109,511 @@ var AreaChartV2 = function AreaChartV2(props) {
   });
 };
 
+var getMinAndMax = function getMinAndMax(_ref) {
+  var data = _ref.data,
+    keys = _ref.keys,
+    dataType = _ref.dataType;
+  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;
+      });
+    }));
+    return {
+      max: Math.max.apply(Math, _dataToAnalyse),
+      min: Math.min.apply(Math, _dataToAnalyse)
+    };
+  }
+  return {
+    max: null,
+    min: null
+  };
+};
+
+function getNiceInterval$2(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$1 = function getScaleAndTicks(_ref) {
+  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;
+  var xTicks = [];
+  var yTicks = [];
+  var xScale = {
+    dataType: xScaleDataType,
+    key: xKey
+  };
+  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'
+  });
+  var maxY = y.max || 0;
+  var minY = Math.min(y.min || 0, 0);
+  var yTickInterval = getNiceInterval$2((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
+      }
+    },
+    y: {
+      ticks: yTicks,
+      scale: {
+        dataType: 'number',
+        key: null,
+        ordering: 'asc',
+        max: maxY,
+        min: minY
+      }
+    }
+  };
+};
+
+var buildRadarChartRepresentation = function buildRadarChartRepresentation(_ref) {
+  var _xKeys$;
+  var result = _ref.result,
+    xAxisFormat = _ref.xAxisFormat,
+    xAxisPostfix = _ref.xAxisPostfix,
+    xAxisPrefix = _ref.xAxisPrefix,
+    yAxisFormat = _ref.yAxisFormat,
+    yAxisPostfix = _ref.yAxisPostfix,
+    yAxisPrefix = _ref.yAxisPrefix,
+    colors = _ref.colors,
+    dateTimeFormatOptions = _ref.dateTimeFormatOptions,
+    defaultFormats = _ref.defaultFormats,
+    nullValue = _ref.nullValue,
+    numberFormatOptions = _ref.numberFormatOptions,
+    pivotConfig = _ref.pivotConfig,
+    _valueAlias = _ref.valueAlias,
+    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
+    seriesLabelFormatter = _ref.seriesLabelFormatter;
+  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;
+  var params = {
+    defaultFormats: defaultFormats,
+    dateTimeFormatOptions: dateTimeFormatOptions,
+    numberFormatOptions: numberFormatOptions,
+    valueAlias: function valueAlias(params) {
+      if (typeof _valueAlias === 'function') {
+        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);
+  var xKeyField = getXKeyField(pivotConfig, result.fields);
+  var formattingFunctionX = function formattingFunctionX(value) {
+    if (!xKeyField) return '';
+    return formattedResult.formatterFunc(value, {
+      fieldId: xKeyField.fieldId,
+      "function": xKeyField["function"],
+      outputDataType: xKeyField.outputDataType
+    }).formattedValue;
+  };
+  var formattingFunctionY = function formattingFunctionY(value) {
+    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 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 ticks = getScaleAndTicks$1({
+    data: chartData,
+    xKey: xKey,
+    xScaleDataType: xScaleDataType,
+    yKeys: yKeys,
+    tickCountYAxis: approxYAxisLabelCount,
+    formattingFunctionX: formattingFunctionX,
+    formattingFunctionY: formattingFunctionY,
+    nullValue: nullValue
+  });
+  var styleDefinition = getStyleDefinition({
+    colors: colors,
+    yKeys: yKeys,
+    style: {
+      strokeWidth: 3,
+      strokeDasharray: null,
+      type: 'line'
+    }
+  });
+  var chart = {
+    keys: keys,
+    x: {
+      ticks: ticks.x.ticks,
+      scale: {
+        dataType: ticks.x.scale.dataType,
+        key: ticks.x.scale.key,
+        min: ticks.x.scale.min,
+        max: ticks.x.scale.max,
+        ordering: 'asc'
+      },
+      key: xKey,
+      postfix: xAxisPostfix,
+      prefix: xAxisPrefix,
+      title: null
+    },
+    y: {
+      ticks: ticks.y.ticks,
+      scale: {
+        dataType: ticks.y.scale.dataType,
+        key: ticks.y.scale.key,
+        min: ticks.y.scale.min,
+        max: ticks.y.scale.max,
+        ordering: 'asc'
+      },
+      keys: yKeys,
+      postfix: yAxisPostfix,
+      prefix: yAxisPrefix,
+      title: null
+    },
+    data: chartData,
+    lines: styleDefinition
+  };
+  return chart;
+};
+
+var ASSUMED_AVERAGE_CHAR_WIDTH$2 = 8.8;
+var MIN_RADIUS_SPACING = 60;
+function adjustRadialTicksForOverlap(ticks, maxHeight, avgCharWidth) {
+  if (avgCharWidth === void 0) {
+    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$2;
+  }
+  var radius = maxHeight / 2;
+  var maxTicks = Math.ceil(radius / MIN_RADIUS_SPACING);
+  if (ticks.length <= maxTicks) {
+    return ticks;
+  }
+  var ticksToKeep = Math.min(maxTicks, Math.ceil(radius / (avgCharWidth * Math.max.apply(Math, ticks.map(function (tick) {
+    return tick.formattedValue ? tick.formattedValue.toString().length : 0;
+  })))));
+  return pickEquallySpaced$2(ticks, ticksToKeep).map(function (tick) {
+    return _extends({}, tick, {
+      value: Number(tick.value),
+      scaleValue: typeof tick.scaleValue === 'number' ? tick.scaleValue : null
+    });
+  });
+}
+function pickEquallySpaced$2(arr, numPicks) {
+  if (numPicks >= arr.length) {
+    return arr;
+  }
+  var result = [];
+  var interval = (arr.length - 1) / (numPicks - 1);
+  for (var i = 0; i < numPicks; i++) {
+    var index = Math.round(i * interval);
+    result.push(arr[index]);
+  }
+  return result;
+}
+var adjustTicks$2 = function adjustTicks(chartRepresentation, width) {
+  chartRepresentation = _.cloneDeep(chartRepresentation);
+  var minDimension = width;
+  chartRepresentation.y.ticks = adjustRadialTicksForOverlap(chartRepresentation.y.ticks, minDimension, ASSUMED_AVERAGE_CHAR_WIDTH$2);
+  return chartRepresentation;
+};
+
+var RadarChartView = function RadarChartView(props) {
+  var _theme$charts$colors, _theme$charts;
+  var approxYAxisLabelCount = props.approxYAxisLabelCount,
+    approxXAxisLabelCount = props.approxXAxisLabelCount,
+    dataSet = props.dataSet,
+    dataSetId = props.dataSetId,
+    dimension = props.dimension,
+    displaySubject = props.displaySubject,
+    displayTitle = props.displayTitle,
+    headline = props.headline,
+    id = props.id,
+    legend = props.legend,
+    library = props.library,
+    localFilters = props.localFilters,
+    measure = props.measure,
+    order = props.order,
+    parameters = props.parameters,
+    protectedByOrganisation = props.protectedByOrganisation,
+    queriesAreChanging = props.queriesAreChanging,
+    result = props.result,
+    setLocalFilters = props.setLocalFilters,
+    setPartialAttributes = props.setPartialAttributes,
+    timeDimension = props.timeDimension,
+    type = props.type,
+    viewId = props.viewId,
+    xAxisFormat = props.xAxisFormat,
+    xAxisPostfix = props.xAxisPostfix,
+    xAxisPrefix = props.xAxisPrefix,
+    yAxisFormat = props.yAxisFormat,
+    yAxisPostfix = props.yAxisPostfix,
+    yAxisPrefix = props.yAxisPrefix,
+    defaultFormats = props.defaultFormats;
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    textOverride = _useDashboardBehaviou.textOverride,
+    valueAlias = _useDashboardBehaviou.valueAlias,
+    developerTools = _useDashboardBehaviou.developerTools,
+    numberFormatOptions = _useDashboardBehaviou.numberFormatOptions,
+    dateTimeFormatOptions = _useDashboardBehaviou.dateTimeFormatOptions,
+    queryEngineConfig = _useDashboardBehaviou.queryEngineConfig,
+    labelFormat = _useDashboardBehaviou.labelFormat;
+  var theme = useTheme();
+  var headerProps = {
+    displayTitle: displayTitle,
+    displaySubject: displaySubject,
+    localFilters: localFilters,
+    setLocalFilters: setLocalFilters,
+    setPartialAttributes: setPartialAttributes,
+    library: library != null ? library : false,
+    verified: protectedByOrganisation,
+    dataSet: dataSet,
+    parameters: parameters,
+    componentType: type,
+    measure: measure,
+    dimension: dimension,
+    timeDimension: timeDimension,
+    viewId: viewId != null ? viewId : '',
+    order: order
+  };
+  useDeveloperTools({
+    developerTools: developerTools,
+    viewId: id
+  });
+  var RadarChartComponent = getComponentInterface(type);
+  if (!RadarChartComponent.isRunnable(props)) return jsxRuntime.jsx(QueryUnderConstructionNotice, {
+    title: "Missing parameters"
+  });
+  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 = headlineAvailable(order, headline, timeDimension);
+  var pivotConfig = init$c(props);
+  var chartRepresentation = buildRadarChartRepresentation({
+    result: result,
+    xAxisFormat: xAxisFormat,
+    xAxisPrefix: xAxisPrefix,
+    xAxisPostfix: xAxisPostfix,
+    yAxisFormat: yAxisFormat,
+    yAxisPrefix: yAxisPrefix,
+    yAxisPostfix: yAxisPostfix,
+    colors: (_theme$charts$colors = theme == null || (_theme$charts = theme.charts) == null ? void 0 : _theme$charts.colors) != null ? _theme$charts$colors : DEFAULT_CHART_COLORS,
+    dateTimeFormatOptions: dateTimeFormatOptions,
+    defaultFormats: defaultFormats,
+    nullValue: checkForNullValue(dataSetId, dimension, timeDimension, textOverride, valueAlias),
+    numberFormatOptions: numberFormatOptions,
+    pivotConfig: pivotConfig,
+    valueAlias: valueAlias,
+    approxYAxisLabelCount: approxYAxisLabelCount === 'auto' ? 10 : approxYAxisLabelCount,
+    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.viewId,
+        fieldId: yResultField.fieldId,
+        func: yResultField["function"],
+        type: 'radarChart',
+        defaultLabel: defaultLabelFormat
+      }) || defaultLabelFormat;
+    }
+  });
+  var style = buildStyleOverrides({
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    variants: {
+      overflowScroll: {
+        "false": {},
+        "true": _extends({
+          overflow: 'auto'
+        }, scrollBarStyles)
+      },
+      justifyCenter: {
+        "false": {},
+        "true": {
+          display: 'flex',
+          justifyContent: 'center'
+        }
+      }
+    }
+  });
+  return jsxRuntime.jsx(React.Suspense, {
+    fallback: jsxRuntime.jsx(LoadingComponent, {}),
+    children: jsxRuntime.jsxs(ViewWrapper, {
+      id: id,
+      queriesAreChanging: queriesAreChanging,
+      children: [jsxRuntime.jsx(ViewHeader, _extends({}, headerProps, {
+        paddingBottom: showHeadline ? '0.5rem' : undefined
+      })), showHeadline && jsxRuntime.jsx(HeadlineStats, _extends({}, props)), jsxRuntime.jsx("div", {
+        className: styles({
+          flex: '1',
+          position: 'relative'
+        }),
+        "aria-disabled": props.library,
+        children: jsxRuntime.jsx(responsive.ParentSize, {
+          className: "" + style({
+            overflowScroll: true,
+            justifyCenter: true
+          }),
+          children: function children(parent) {
+            if (chartRepresentation.data.length === 0) return jsxRuntime.jsx(LoadingComponent, {});
+            return jsxRuntime.jsx(RadarChart$4.RadarChart, {
+              width: parent.width,
+              height: parent.height,
+              options: {
+                showLegend: showLegend(legend, (theme == null ? void 0 : theme.detail) === 'verbose'),
+                showRoundedTotal: false,
+                removeStroke: false,
+                axis: {
+                  showYAxisLabels: approxYAxisLabelCount !== 0,
+                  showXAxisLabels: approxXAxisLabelCount !== 0
+                }
+              },
+              theme: theme == null ? void 0 : theme.charts,
+              chart: adjustTicks$2(chartRepresentation, parent.width)
+            });
+          }
+        })
+      })]
+    })
+  });
+};
+var RadarChartView$1 = /*#__PURE__*/React.memo(RadarChartView, shouldUpdate);
+
+var RadarChart$2 = function RadarChart(_ref) {
+  var component = _ref.component,
+    dataSet = _ref.dataSet,
+    dashboardBehaviour = _ref.dashboardBehaviour,
+    globalFilters = _ref.globalFilters,
+    id = _ref.id,
+    library = _ref.library,
+    runQueriesCallback = _ref.runQueriesCallback,
+    setLocalFilters = _ref.setLocalFilters,
+    _setPartialAttributes = _ref.setPartialAttributes,
+    setResults = _ref.setResults,
+    updateComponentAttributes = _ref.updateComponentAttributes;
+  var localFilters = component.localFilters,
+    results = component.results;
+  var _useState = React.useState(component.attributes),
+    attributes = _useState[0],
+    setAttributes = _useState[1];
+  var _useComponentEffect = useComponentEffect(component.attributes, dataSet, dashboardBehaviour.queryEngineConfig, {
+      localFilters: localFilters,
+      globalFilters: globalFilters
+    }, updateComponentAttributes, runQueriesCallback, setResults, dashboardBehaviour.variables),
+    queriesAreChanging = _useComponentEffect.queriesAreChanging;
+  React.useEffect(function () {
+    if (!queriesAreChanging) {
+      setAttributes(component.attributes);
+    }
+  }, [component.attributes, queriesAreChanging]);
+  return jsxRuntime.jsx(RadarChartView$1, _extends({
+    id: id
+  }, attributes, {
+    dataSet: dataSet,
+    localFilters: component.localFilters,
+    setLocalFilters: setLocalFilters,
+    setPartialAttributes: function setPartialAttributes(changes) {
+      return _setPartialAttributes(changes);
+    },
+    result: results && results[0],
+    queriesAreChanging: queriesAreChanging,
+    supportedAggregates: dashboardBehaviour.queryEngineConfig.supportedAggregates,
+    supportedTimeTruncFunctions: dashboardBehaviour.queryEngineConfig.supportedTimeTruncFunctions,
+    supportedTransformationFunctions: dashboardBehaviour.queryEngineConfig.supportedTransformationFunctions,
+    library: library,
+    defaultFormats: dashboardBehaviour.defaultFormats
+  }));
+};
+
 var Component = function Component(props) {
   var _useDashboardContext = useDashboardContext(),
     dashboard = _useDashboardContext.dashboard;
@@ -49842,6 +51105,32 @@ var Component = function Component(props) {
       })
     });
   }
+  if (props.component.attributes.type === 'radarChart') {
+    return jsxRuntime.jsx(ErrorBoundary, {
+      renderOnError: function renderOnError(onManualRetry) {
+        return jsxRuntime.jsx(ComponentErrorNotice, {
+          onManualRetry: onManualRetry
+        });
+      },
+      onError: dashboardBehaviour.onError,
+      children: jsxRuntime.jsx(RadarChart$2, {
+        id: props.id,
+        dataSet: dataSet,
+        setLocalFilters: props.setLocalFilters,
+        runQueriesCallback: props.runQueriesCallback,
+        updateComponentAttributes: function updateComponentAttributes(newAttributes) {
+          return _updateComponentAttributes(newAttributes);
+        },
+        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 == 'waterfallChart') {
     return jsxRuntime.jsx(ErrorBoundary, {
       renderOnError: function renderOnError(onManualRetry) {
@@ -58019,7 +59308,7 @@ var ChartSettingsSection = function ChartSettingsSection(_ref) {
 };
 
 var AxisPreferenceSection = function AxisPreferenceSection(props) {
-  var _props$attributes, _props$attributes2, _props$attributes3, _props$attributes4, _props$section, _props$section2, _props$section$y, _props$section$y$form, _props$section$y$axis, _props$section$y$axis2, _props$attributes$axi, _props$section$x$form, _props$section$x, _props$section$x$axis, _props$section$x$axis2, _props$attributes$axi2;
+  var _props$attributes, _props$attributes2, _props$attributes3, _props$attributes4, _props$section, _props$section2, _props$section$y, _props$section$y$form, _props$section$y$axis, _props$attributes$axi, _props$section$x$form, _props$section$x, _props$section$x$axis, _props$attributes$axi2;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     textOverride = _useDashboardBehaviou.textOverride,
     dateTimeFormatOptions = _useDashboardBehaviou.dateTimeFormatOptions;
@@ -58107,8 +59396,8 @@ var AxisPreferenceSection = function AxisPreferenceSection(props) {
             options: axisOptions
           })]
         }), jsxRuntime.jsx(Section.Grid, {
-          children: jsxRuntime.jsx(TextInput, {
-            label: (_props$section$y$axis = (_props$section$y$axis2 = props.section[y].axisTitle) == null ? void 0 : _props$section$y$axis2.title) != null ? _props$section$y$axis : '',
+          children: props.section[y].axisTitle && jsxRuntime.jsx(TextInput, {
+            label: (_props$section$y$axis = props.section[y].axisTitle.title) != null ? _props$section$y$axis : '',
             setText: function setText(axisTitle) {
               var _axisTitles;
               return props.setAttributes({
@@ -58191,8 +59480,8 @@ var AxisPreferenceSection = function AxisPreferenceSection(props) {
             })]
           })
         }), jsxRuntime.jsx(Section.Grid, {
-          children: jsxRuntime.jsx(TextInput, {
-            label: (_props$section$x$axis = (_props$section$x$axis2 = props.section[x].axisTitle) == null ? void 0 : _props$section$x$axis2.title) != null ? _props$section$x$axis : '',
+          children: props.section[x].axisTitle && jsxRuntime.jsx(TextInput, {
+            label: (_props$section$x$axis = props.section[x].axisTitle.title) != null ? _props$section$x$axis : '',
             setText: function setText(axisTitle) {
               var _axisTitles2;
               return props.setAttributes({
@@ -66029,7 +67318,7 @@ var View$3 = /*#__PURE__*/function () {
   };
   return View;
 }();
-var AreaChart$5 = /*#__PURE__*/function (_View2) {
+var AreaChart$6 = /*#__PURE__*/function (_View2) {
   function AreaChart(attributes) {
     return _View2.call(this, _extends({}, attributes, {
       type: 'areaChart'
@@ -66185,6 +67474,18 @@ var WaterfallChart$4 = /*#__PURE__*/function (_View16) {
   };
   return WaterfallChart;
 }(View$3);
+var RadarChart$3 = /*#__PURE__*/function (_View17) {
+  function RadarChart(attributes) {
+    return _View17.call(this, _extends({}, attributes, {
+      type: 'radarChart'
+    })) || this;
+  }
+  _inheritsLoose(RadarChart, _View17);
+  RadarChart.type = function type() {
+    return 'radarChart';
+  };
+  return RadarChart;
+}(View$3);
 
 var VizzlyInstanceNotLoaded = /*#__PURE__*/function (_Error) {
   function VizzlyInstanceNotLoaded(instanceId) {
@@ -66523,6 +67824,8 @@ var toQueries$i = commonToQueries;
 
 var toQueries$j = commonToQueries;
 
+var toQueries$k = commonToQueries;
+
 var buildVizzlyViewQueries = function buildVizzlyViewQueries(attributes, dataSet, queryEngineConfig, params) {
   switch (attributes.type) {
     case 'areaChart':
@@ -66563,6 +67866,8 @@ var buildVizzlyViewQueries = function buildVizzlyViewQueries(attributes, dataSet
       return toQueries$i(attributes, dataSet, queryEngineConfig, params);
     case 'waterfallChart':
       return toQueries$j(attributes, dataSet, queryEngineConfig, params);
+    case 'radarChart':
+      return toQueries$k(attributes, dataSet, queryEngineConfig, params);
     default:
       throw 'Unsupported view when building query.';
   }
@@ -68110,8 +69415,9 @@ VizzlyServices.Dashboard = Dashboard$1;
 VizzlyServices.Editor = Editor;
 VizzlyServices.Header = Header;
 VizzlyServices.Library = Library$1;
-VizzlyServices.AreaChart = AreaChart$5;
+VizzlyServices.AreaChart = AreaChart$6;
 VizzlyServices.LineChart = LineChart$6;
+VizzlyServices.RadarChart = RadarChart$3;
 VizzlyServices.BarChart = BarChart$6;
 VizzlyServices.PieChart = PieChart$4;
 VizzlyServices.ScatterChart = ScatterChart$4;
@@ -69437,6 +70743,7 @@ var attributesToAiView = function attributesToAiView(dataSet, originalAttributes
   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.';
+  if (attributes.type === 'radarChart') throw 'Radar chart views are not supported by Vizzly AI.';
   var select = [];
   var group = [];
   var order = [];