[Lens] [Metric] Improve Primary Metric editor by removing "Supporting visualization" title

src/platform/plugins/shared/chart_expressions/expression_metric/common/types/expression_renderers.ts

@@ -48,7 +48,7 @@ export interface MetricVisParam {
   secondaryLabelPosition: SecondaryMetricProps['labelPosition'];
   /**
    * Determines where the metric color should be applied.
-   * Only applies when the supporting visualization is a panel.
+   * Only applies when the background chart is a panel.
    * - 'background': Applies the color to the metric's background area.
    * - 'value': Applies the color to the Primary Metric's value.
    */

x-pack/platform/plugins/private/translations/translations/de-DE.json

@@ -23291,13 +23291,9 @@
     "xpack.lens.metric.progressDirectionLabel": "Balkendiagramm-Ausrichtung",
     "xpack.lens.metric.secondaryMetric": "Sekundäre Metrik",
     "xpack.lens.metric.summportingVis.needMaxDimension": "Für Balkenvisualisierungen muss ein Höchstwert festgelegt werden.",
-    "xpack.lens.metric.supportingVis.label": "Unterstützung der Visualisierung",
     "xpack.lens.metric.supportingVis.metricHasReducedTimeRange": "Linienvisualisierungen können nicht verwendet werden, wenn ein reduzierter Zeitbereich auf die primäre Metrik angewendet wird.",
     "xpack.lens.metric.supportingVis.needDefaultTimeField": "Linienvisualisierungen erfordern die Verwendung einer Datenansicht mit einem Standardzeitfeld.",
     "xpack.lens.metric.supportingVis.secondaryMetricHasReducedTimeRange": "Linienvisualisierungen können nicht verwendet werden, wenn ein reduzierter Zeitbereich auf die sekundäre Metrik angewendet wird.",
-    "xpack.lens.metric.supportingVis.type": "Typ",
-    "xpack.lens.metric.supportingVisualization.bar": "Leiste",
-    "xpack.lens.metric.supportingVisualization.trendline": "Liniendiagramm",
     "xpack.lens.metric.timeField": "Zeitfeld",
     "xpack.lens.metric.visualizationDescription": "Präsentieren Sie individuelle Schlüsselkennzahlen oder KPIs.",
     "xpack.lens.missingTimeRangeParam.longMessage": "Die Eigenschaft timeRange ist für die angegebene Konfiguration erforderlich",

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -23609,13 +23609,9 @@
     "xpack.lens.metric.progressDirectionLabel": "Orientation de la barre",
     "xpack.lens.metric.secondaryMetric": "Indicateur secondaire",
     "xpack.lens.metric.summportingVis.needMaxDimension": "Les visualisations des barres requièrent la définition d'une valeur maximale.",
-    "xpack.lens.metric.supportingVis.label": "Visualisation de support",
     "xpack.lens.metric.supportingVis.metricHasReducedTimeRange": "Les visualisations linéaires ne peuvent pas être utilisées lorsqu'une plage temporelle réduite est appliquée à l'indicateur principal.",
     "xpack.lens.metric.supportingVis.needDefaultTimeField": "Les visualisations linéaires requièrent l'utilisation d'une vue de données avec un champ temporel par défaut.",
     "xpack.lens.metric.supportingVis.secondaryMetricHasReducedTimeRange": "Les visualisations linéaires ne peuvent pas être utilisées lorsqu'une plage temporelle réduite est appliquée à l'indicateur secondaire.",
-    "xpack.lens.metric.supportingVis.type": "Type",
-    "xpack.lens.metric.supportingVisualization.bar": "Barres",
-    "xpack.lens.metric.supportingVisualization.trendline": "Ligne",
     "xpack.lens.metric.timeField": "Champ temporel",
     "xpack.lens.metric.visualizationDescription": "Présentez les indicateurs clés de performance individuels.",
     "xpack.lens.missingTimeRangeParam.longMessage": "La propriété timeRange est requise pour cette configuration.",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -23638,13 +23638,9 @@
     "xpack.lens.metric.progressDirectionLabel": "棒の向き",
     "xpack.lens.metric.secondaryMetric": "副メトリック",
     "xpack.lens.metric.summportingVis.needMaxDimension": "棒グラフの可視化では、最大値を定義する必要があります。",
-    "xpack.lens.metric.supportingVis.label": "可視化のサポート",
     "xpack.lens.metric.supportingVis.metricHasReducedTimeRange": "縮小された時間範囲が主メトリックに適用されている場合は、折れ線グラフの可視化を使用できません。",
     "xpack.lens.metric.supportingVis.needDefaultTimeField": "折れ線グラフの可視化では、データビューとデフォルト時刻フィールドを使用する必要があります。",
     "xpack.lens.metric.supportingVis.secondaryMetricHasReducedTimeRange": "縮小された時間範囲が副メトリックに適用されている場合は、折れ線グラフの可視化を使用できません。",
-    "xpack.lens.metric.supportingVis.type": "型",
-    "xpack.lens.metric.supportingVisualization.bar": "棒",
-    "xpack.lens.metric.supportingVisualization.trendline": "折れ線",
     "xpack.lens.metric.timeField": "時間フィールド",
     "xpack.lens.metric.visualizationDescription": "個別の主要メトリックまたはKPIを提供します。",
     "xpack.lens.missingTimeRangeParam.longMessage": "指定された構成にはtimeRangeプロパティが必須です",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -23626,13 +23626,9 @@
     "xpack.lens.metric.progressDirectionLabel": "条形图方向",
     "xpack.lens.metric.secondaryMetric": "次级指标",
     "xpack.lens.metric.summportingVis.needMaxDimension": "条形图可视化需要定义一个最大值。",
-    "xpack.lens.metric.supportingVis.label": "支持可视化",
     "xpack.lens.metric.supportingVis.metricHasReducedTimeRange": "将缩小的时间范围应用于主要指标时，无法使用折线图可视化。",
     "xpack.lens.metric.supportingVis.needDefaultTimeField": "折线图可视化需要使用具有默认时间字段的数据视图。",
     "xpack.lens.metric.supportingVis.secondaryMetricHasReducedTimeRange": "将缩小的时间范围应用于次要指标时，无法使用折线图可视化。",
-    "xpack.lens.metric.supportingVis.type": "类型",
-    "xpack.lens.metric.supportingVisualization.bar": "条形图",
-    "xpack.lens.metric.supportingVisualization.trendline": "折线图",
     "xpack.lens.metric.timeField": "时间字段",
     "xpack.lens.metric.visualizationDescription": "展示单个关键指标或 KPI。",
     "xpack.lens.missingTimeRangeParam.longMessage": "给定配置需要包含 timeRange 属性",

x-pack/platform/plugins/shared/lens/public/visualizations/metric/dimension_editor.test.tsx

@@ -938,7 +938,7 @@ describe('dimension editor', () => {
       );
 
       const supportingVisOptions = {
-        panel: screen.queryByTitle(/panel/i),
+        none: screen.queryByTitle(/none/i),
         // in eui when bar or line become disabled they change from input to button so we have to do this weird check
         bar: screen.queryByTitle(/bar/i) || screen.queryByRole('button', { name: /bar/i }),
         trendline: screen.queryByTitle(/line/i) || screen.queryByRole('button', { name: /line/i }),
@@ -947,7 +947,7 @@ describe('dimension editor', () => {
       const clickOnSupportingVis = async (type: SupportingVisType) => {
         const supportingVis = supportingVisOptions[type];
         if (!supportingVis) {
-          throw new Error(`Supporting visualization ${type} not found`);
+          throw new Error(`Background chart ${type} not found`);
         }
         await userEvent.click(supportingVis);
       };
@@ -1011,18 +1011,18 @@ describe('dimension editor', () => {
       expect(container).toBeEmptyDOMElement();
     });
 
-    describe('supporting visualizations', () => {
+    describe('background visualizations', () => {
       const stateWOTrend = {
         ...metricAccessorState,
         trendlineLayerId: undefined,
       };
 
       describe('reflecting visualization state', () => {
-        it('when `showBar` is false and maximum value is not defined, option `panel` should be selected', () => {
+        it('when `showBar` is false and maximum value is not defined, option `none` should be selected', () => {
           const { supportingVisOptions } = renderAdditionalSectionEditor({
             state: { ...stateWOTrend, showBar: false, maxAccessor: undefined },
           });
-          expect(supportingVisOptions.panel).toHaveAttribute('aria-pressed', 'true');
+          expect(supportingVisOptions.none).toHaveAttribute('aria-pressed', 'true');
         });
 
         it('when `showBar` is true and maximum value is not defined, bar should be selected', () => {
@@ -1123,25 +1123,25 @@ describe('dimension editor', () => {
           const { clickOnSupportingVis } = renderAdditionalSectionEditor({
             state: stateWOTrend,
           });
-          await clickOnSupportingVis('panel');
+          await clickOnSupportingVis('none');
 
           expect(mockSetState).toHaveBeenCalledWith({ ...stateWOTrend, showBar: false });
           expect(props.removeLayer).not.toHaveBeenCalled();
         });
 
-        it('selects panel from trendline', async () => {
+        it('selects none from trendline', async () => {
           const { clickOnSupportingVis } = renderAdditionalSectionEditor({
             state: metricAccessorState,
           });
-          await clickOnSupportingVis('panel');
+          await clickOnSupportingVis('none');
 
           expect(mockSetState).toHaveBeenCalledWith({ ...metricAccessorState, showBar: false });
           expect(props.removeLayer).toHaveBeenCalledWith(metricAccessorState.trendlineLayerId);
 
           expectCalledBefore(mockSetState, props.removeLayer as jest.Mock);
         });
 
-        it('selects trendline from panel with apply color to value', async () => {
+        it('selects trendline from none with apply color to value', async () => {
           const { clickOnSupportingVis } = renderAdditionalSectionEditor({
             state: {
               ...stateWOTrend,
@@ -1154,7 +1154,7 @@ describe('dimension editor', () => {
           );
         });
 
-        it('selects bar from panel with apply color to value', async () => {
+        it('selects bar from none with apply color to value', async () => {
           const { clickOnSupportingVis } = renderAdditionalSectionEditor({
             state: {
               ...metricAccessorState,
@@ -1197,7 +1197,7 @@ describe('dimension editor', () => {
       });
 
       describe('`apply color to` controls', () => {
-        it('should show `apply color to` button group when `Panel` option is selected', async () => {
+        it('should show `apply color to` button group when `None` option is selected', async () => {
           const { applyColorToBtnGroup, applyColorToOptions } = renderAdditionalSectionEditor({
             state: { ...stateWOTrend, showBar: false, maxAccessor: undefined },
           });
@@ -1230,7 +1230,7 @@ describe('dimension editor', () => {
           expect(mockSetState).toHaveBeenCalledWith({ ...mockState, applyColorTo: 'background' });
         });
 
-        it('should show help message when color mode static, supporting visualization is panel, apply color to value', () => {
+        it('should show help message when color mode static, supporting visualization is none, apply color to value', () => {
           renderAdditionalSectionEditor({
             state: {
               ...stateWOTrend,
@@ -1246,7 +1246,7 @@ describe('dimension editor', () => {
           );
         });
 
-        it('should show help message when color mode dynamic, supporting visualization is panel, apply color to value', () => {
+        it('should show help message when color mode dynamic, supporting visualization is none, apply color to value', () => {
           renderAdditionalSectionEditor({
             state: {
               ...stateWOTrend,