@vizzly/dashboard 0.15.0-dev-adc0ad5ca8785acecefbc70dee9842ac6230d1c1 → 0.15.0-dev-9247c7b21e49fb5e3915574eb5264b609426a7b6

package/dist/charts/src/v2/components/Axis/AxisBottom.d.ts

@@ -14,5 +14,6 @@ export declare type AxisBottomProps = {
     xScaleDataType?: DataType;
     xScale: ScaleBand<string> | ScaleBand<Date> | ScaleBand<number> | ScaleLinear<number, number, never> | ScalePoint<string> | ScaleTime<number, number, never> | null;
     height: number;
+    adjustLabelPropsDueToSubgroupLabels?: boolean;
 };
-export declare function AxisBottom({ x, margin, themeCSS, show, removeStroke, xScaleDataType, xScale, height, baselineShift, }: AxisBottomProps): JSX.Element | null;
+export declare function AxisBottom({ x, margin, themeCSS, show, removeStroke, xScaleDataType, xScale, height, baselineShift, adjustLabelPropsDueToSubgroupLabels, }: AxisBottomProps): JSX.Element | null;

package/dist/charts/src/v2/components/BarChart/BarChart.d.ts

@@ -12,6 +12,7 @@ export declare type BarChartProps = {
         showRoundedTotal: boolean;
         showLegend: boolean;
         showLabels: boolean;
+        showSublabels: boolean;
         removeStroke: boolean;
         axis: {
             showXAxisLabels: boolean;

package/dist/charts/src/v2/components/HorizontalBarChart/HorizontalBarChart.d.ts

@@ -11,6 +11,7 @@ export declare type HorizontalBarChartProps = {
         showRoundedTotal: boolean;
         showLegend: boolean;
         showLabels: boolean;
+        showSublabels: boolean;
         removeStroke: boolean;
         axis: {
             showXAxisLabels: boolean;

package/dist/dashboard.cjs.development.js

@@ -44814,7 +44814,7 @@ var buildMargin = function buildMargin(yTicks, showYAxisLabels, hasYAxisTitle, h
   var bottom = showDetailedSubGroupingLabels ? 90 : 40;
   var left = showYTicks ? _.max([maxWidth, MINIMUM_Y_AXIS_WIDTH]) : MINIMUM_Y_AXIS_WIDTH;
   return {
-    top: 15,
+    top: showDetailedSubGroupingLabels ? 25 : 15,
     right: MINIMUM_Y_AXIS_WIDTH,
     bottom: 30 + xAxisTitleOffset,
     left: left + yAxisTitleOffset,
@@ -44893,7 +44893,9 @@ function AxisBottom(_ref) {
     xScaleDataType = _ref.xScaleDataType,
     xScale = _ref.xScale,
     height = _ref.height,
-    baselineShift = _ref.baselineShift;
+    baselineShift = _ref.baselineShift,
+    _ref$adjustLabelProps = _ref.adjustLabelPropsDueToSubgroupLabels,
+    adjustLabelPropsDueToSubgroupLabels = _ref$adjustLabelProps === void 0 ? false : _ref$adjustLabelProps;
   var tickFormat = React.useCallback(function (value) {
     var tick = null;
     if (xScaleDataType === 'date_time' && value instanceof Date) {
@@ -44915,14 +44917,13 @@ function AxisBottom(_ref) {
     }
     return '';
   }, [x.ticks, xScaleDataType]);
-  if (!show) return null;
-  if (!xScale) return null;
-  return jsxRuntime.jsx(axis.AxisBottom, {
+  var hasOnlyTitle = !show && x.title != null && x.title.trim() !== '';
+  return xScale && jsxRuntime.jsx(axis.AxisBottom, {
     label: x.title || undefined,
     labelProps: {
       style: AXIS_TITLE_STYLES
     },
-    labelOffset: margin.bottomTitleOffset,
+    labelOffset: margin.bottomTitleOffset - (hasOnlyTitle ? 20 : 0),
     hideTicks: true,
     top: height,
     scale: xScale,
@@ -44933,10 +44934,11 @@ function AxisBottom(_ref) {
     tickComponent: function tickComponent(_ref2) {
       var formattedValue = _ref2.formattedValue,
         tickProps = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
-      return jsxRuntime.jsx(text$3.Text, _extends({
+      return show && jsxRuntime.jsx(text$3.Text, _extends({
         style: themeCSS.labels
       }, tickProps, {
         baselineShift: baselineShift != null ? baselineShift : tickProps.baselineShift,
+        dy: adjustLabelPropsDueToSubgroupLabels ? 60 : 0,
         children: formattedValue
       }));
     },
@@ -44963,7 +44965,6 @@ var AxisLeft = function AxisLeft(_ref) {
     }
     return item.formattedValue || item.value.toString();
   }, [y.ticks]);
-  if (!show) return null;
   return jsxRuntime.jsx(axis.AxisLeft, {
     labelOffset: margin.leftTitleOffset,
     label: y.title || undefined,
@@ -44979,7 +44980,7 @@ var AxisLeft = function AxisLeft(_ref) {
     tickComponent: function tickComponent(_ref2) {
       var formattedValue = _ref2.formattedValue,
         tickProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
-      return jsxRuntime.jsx(text$3.Text, _extends({
+      return show && jsxRuntime.jsx(text$3.Text, _extends({
         width: 10,
         style: themeCSS.labels
       }, tickProps, {
@@ -46107,8 +46108,8 @@ var useGroupingAxisBaseLineShift = function useGroupingAxisBaseLineShift(_ref) {
     };
   }
   return {
-    groupingAxisBaselineShift: hasBottomTitle ? -65 : -60,
-    bottomOffset: hasBottomTitle ? -15 : 10,
+    groupingAxisBaselineShift: hasLeftTitle ? -65 : -60,
+    bottomOffset: hasLeftTitle ? -15 : 10,
     leftOffset: hasLeftTitle ? -10 : 0
   };
 };
@@ -46169,9 +46170,11 @@ var BarChart$5 = function BarChart(_ref) {
     tooltipData = _useTooltip.tooltipData,
     hideTooltip = _useTooltip.hideTooltip,
     showTooltip = _useTooltip.showTooltip;
-  var showDetailedSubGroupingLabels = !options.stacked && numberOfDimensions === 2 && width > 450;
-  var hasBottomTitle = chart.x.title != null;
-  var hasLeftTitle = chart.y.title != null;
+  var showDetailedSubGroupingLabels = !options.stacked && options.showSublabels === true && numberOfDimensions === 2 && width > 450;
+  var isFirefox = typeof window !== 'undefined' && 'InstallTrigger' in window;
+  var adjustAxisBottomLabelProps = isFirefox && showDetailedSubGroupingLabels;
+  var hasBottomTitle = chart.x.title != null && chart.x.title.trim() !== '';
+  var hasLeftTitle = chart.y.title != null && chart.y.title.trim() !== '';
   var isStacked100 = options.stacked === '100%';
   var _useGroupingAxisBaseL = useGroupingAxisBaseLineShift({
       hasBottomTitle: hasBottomTitle,
@@ -46349,7 +46352,8 @@ var BarChart$5 = function BarChart(_ref) {
           xScaleDataType: xScaleDataType,
           xScale: xScale,
           height: innerHeight,
-          baselineShift: groupingAxisBaselineShift
+          baselineShift: groupingAxisBaselineShift,
+          adjustLabelPropsDueToSubgroupLabels: adjustAxisBottomLabelProps
         }), jsxRuntime.jsx(AxisLeft, {
           show: options.axis.showYAxisLabels,
           y: yAxisConfig,
@@ -47270,7 +47274,7 @@ var HorizontalBarChart$3 = function HorizontalBarChart(_ref) {
     tooltipData = _useTooltip.tooltipData,
     hideTooltip = _useTooltip.hideTooltip,
     showTooltip = _useTooltip.showTooltip;
-  var showDetailedSubGroupingLabels = !options.stacked && numberOfDimensions === 2 && width > 450;
+  var showDetailedSubGroupingLabels = !options.stacked && options.showSublabels === true && numberOfDimensions === 2 && width > 450;
   var hasBottomTitle = chart.x.title != null;
   var hasLeftTitle = chart.y.title != null;
   var _useGroupingAxisBaseL = useGroupingAxisBaseLineShift({
@@ -50846,6 +50850,7 @@ var BarChartV2View = function BarChartV2View(props) {
                 showRoundedTotal: false,
                 showLegend: props.attributes.legend,
                 showLabels: (_props$attributes$lab = props.attributes.labels) != null ? _props$attributes$lab : false,
+                showSublabels: props.attributes.approxXAxisLabelCount === 2,
                 axis: {
                   showXAxisLabels: props.attributes.approxXAxisLabelCount !== 0,
                   showYAxisLabels: props.attributes.approxYAxisLabelCount !== 0
@@ -54624,6 +54629,7 @@ var HorizontalBarChartV2View = function HorizontalBarChartV2View(props) {
                 showRoundedTotal: false,
                 showLegend: props.attributes.legend,
                 showLabels: (_props$attributes$lab = props.attributes.labels) != null ? _props$attributes$lab : false,
+                showSublabels: props.attributes.approxYAxisLabelCount === 2,
                 axis: {
                   showXAxisLabels: props.attributes.approxXAxisLabelCount !== 0,
                   showYAxisLabels: props.attributes.approxYAxisLabelCount !== 0
@@ -64909,11 +64915,11 @@ var SelectNumberFormat = function SelectNumberFormat(props) {
 };
 
 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$attributes$axi, _props$section$x$form, _props$section$x$form2, _props$section$x$axis, _props$attributes$axi2;
+  var _props$attributes, _props$attributes2, _props$attributes3, _props$attributes4, _props$attributes5, _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$form2, _props$section$x$axis, _props$attributes$axi2;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     textOverride = _useDashboardBehaviou.textOverride,
     dateTimeFormatOptions = _useDashboardBehaviou.dateTimeFormatOptions;
-  var axisOptions = [{
+  var axisLabelCountOptionsItems = [{
     label: textOverride('auto', 'Auto'),
     value: 'auto'
   }, {
@@ -64923,6 +64929,16 @@ var AxisPreferenceSection = function AxisPreferenceSection(props) {
     label: textOverride('None', 'None'),
     value: 0
   }];
+  var axisLabelSettingsOptionsItems = [{
+    label: textOverride('hideAllLabels', 'Hide All Labels'),
+    value: 0
+  }, {
+    label: textOverride('hideSublabels', 'Hide Sublabels'),
+    value: 'auto'
+  }, {
+    label: textOverride('showEverything', 'Show Everything'),
+    value: 2
+  }];
   var dateTimeFormatOptionsItems = Object.keys(dateTimeFormatOptions).map(function (key) {
     var option = dateTimeFormatOptions[key];
     return {
@@ -64930,10 +64946,12 @@ var AxisPreferenceSection = function AxisPreferenceSection(props) {
       value: key
     };
   });
-  var horizontal = props.attributes.type == 'horizontalBarChart' || props.attributes.type == 'horizontalBarChartV2';
+  var isBarChartV2 = props.attributes.type == 'barChartV2' || props.attributes.type == 'horizontalBarChartV2';
+  var isHorizontalBarChart = props.attributes.type == 'horizontalBarChart' || props.attributes.type == 'horizontalBarChartV2';
   var showXAxisNumberFormatter = ((_props$attributes = props.attributes) == null || (_props$attributes = _props$attributes.dimension) == null ? void 0 : _props$attributes.length) > 0 && findField(props.dataSet, (_props$attributes2 = props.attributes) == null || (_props$attributes2 = _props$attributes2.dimension[0]) == null ? void 0 : _props$attributes2.field).dataType === 'number' && !((_props$attributes3 = props.attributes) != null && _props$attributes3.timeDimension);
   var showXAxisDateFormatOptions = !!((_props$attributes4 = props.attributes) != null && _props$attributes4.timeDimension);
-  var _ref = horizontal ? {
+  var showXAxisLabelSettings = isBarChartV2 && ((_props$attributes5 = props.attributes) == null || (_props$attributes5 = _props$attributes5.dimension) == null ? void 0 : _props$attributes5.length) > 1;
+  var _ref = isHorizontalBarChart ? {
       x: 'y',
       y: 'x'
     } : {
@@ -64942,8 +64960,37 @@ var AxisPreferenceSection = function AxisPreferenceSection(props) {
     },
     x = _ref.x,
     y = _ref.y;
-  var labelCount = horizontal ? 'approxYAxisLabelCount' : 'approxXAxisLabelCount';
-  var metricAxisLabelCount = horizontal ? 'approxXAxisLabelCount' : 'approxYAxisLabelCount';
+  var labelCount = isHorizontalBarChart ? 'approxYAxisLabelCount' : 'approxXAxisLabelCount';
+  var metricAxisLabelCount = isHorizontalBarChart ? 'approxXAxisLabelCount' : 'approxYAxisLabelCount';
+  var xAxisLabelSettingsSelectInput = jsxRuntime.jsx(FormatSelectInput, {
+    id: "axis-" + x + "-label-settings",
+    label: "Label Settings",
+    currentValue: props.attributes[labelCount],
+    onSelect: function onSelect(value) {
+      var _props$setAttributes;
+      return props.setAttributes((_props$setAttributes = {}, _props$setAttributes[labelCount] = value, _props$setAttributes));
+    },
+    options: axisLabelSettingsOptionsItems
+  });
+  var xAxisDateFormatLabelSelectInput = showXAxisLabelSettings ? xAxisLabelSettingsSelectInput : jsxRuntime.jsx(FormatSelectInput, {
+    id: "axis-" + x + "-label-count",
+    label: props.section[x].count.title,
+    currentValue: props.attributes[labelCount],
+    onSelect: function onSelect(value) {
+      var _props$setAttributes2;
+      return props.setAttributes((_props$setAttributes2 = {}, _props$setAttributes2[labelCount] = value, _props$setAttributes2));
+    },
+    options: axisLabelCountOptionsItems
+  });
+  var xAxisOtherFormatsLabelSelectInput = showXAxisLabelSettings ? xAxisLabelSettingsSelectInput : jsxRuntime.jsx(Checkbox, {
+    label: textOverride('hide_labels', 'Hide Labels'),
+    onChange: function onChange(event) {
+      var _props$setAttributes3;
+      return props.setAttributes((_props$setAttributes3 = {}, _props$setAttributes3[labelCount] = event ? 0 : 'auto', _props$setAttributes3));
+    },
+    id: "hide-labels",
+    currentValue: props.attributes[labelCount] === 0 ? true : false
+  });
   return jsxRuntime.jsx(Section, {
     title: (_props$section = props.section) == null ? void 0 : _props$section.title,
     tooltip: (_props$section2 = props.section) == null ? void 0 : _props$section2.description,
@@ -64992,10 +65039,10 @@ var AxisPreferenceSection = function AxisPreferenceSection(props) {
             label: props.section[y].count.title,
             currentValue: props.attributes[metricAxisLabelCount],
             onSelect: function onSelect(value) {
-              var _props$setAttributes;
-              return props.setAttributes((_props$setAttributes = {}, _props$setAttributes[metricAxisLabelCount] = value, _props$setAttributes));
+              var _props$setAttributes4;
+              return props.setAttributes((_props$setAttributes4 = {}, _props$setAttributes4[metricAxisLabelCount] = value, _props$setAttributes4));
             },
-            options: axisOptions
+            options: axisLabelCountOptionsItems
           })]
         }), jsxRuntime.jsx(Section.Grid, {
           children: props.section[y].axisTitle && jsxRuntime.jsx(TextInput, {
@@ -65059,25 +65106,8 @@ var AxisPreferenceSection = function AxisPreferenceSection(props) {
                   });
                 },
                 options: dateTimeFormatOptionsItems
-              }), jsxRuntime.jsx(FormatSelectInput, {
-                id: "axis-" + x + "-label-count",
-                label: props.section[x].count.title,
-                currentValue: props.attributes[labelCount],
-                onSelect: function onSelect(value) {
-                  var _props$setAttributes2;
-                  return props.setAttributes((_props$setAttributes2 = {}, _props$setAttributes2[labelCount] = value, _props$setAttributes2));
-                },
-                options: axisOptions
-              })]
-            }) : jsxRuntime.jsx(Checkbox, {
-              label: textOverride('hide_labels', 'Hide Labels'),
-              onChange: function onChange(event) {
-                var _props$setAttributes3;
-                return props.setAttributes((_props$setAttributes3 = {}, _props$setAttributes3[labelCount] = event ? 0 : 'auto', _props$setAttributes3));
-              },
-              id: "hide-labels",
-              currentValue: props.attributes[labelCount] === 0 ? true : false
-            })]
+              }), xAxisDateFormatLabelSelectInput]
+            }) : xAxisOtherFormatsLabelSelectInput]
           })
         }), jsxRuntime.jsx(Section.Grid, {
           children: props.section[x].axisTitle && jsxRuntime.jsx(TextInput, {