[Explore vis] update discover vis defaults (#10711)

* update discover vis defaults

1. update some style panel accordions default to be closed
2. change default legend position to bottom
3. default to not show axis title for not specified

This commit also fixed a legend title UI glitch issue that it first is visible then become invisible.

Signed-off-by: Yulong Ruan <[email protected]>

---------

Signed-off-by: Yulong Ruan <[email protected]>

Author: ruanyl

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_area.spec.js

@@ -47,6 +47,8 @@ export const runCreateVisTests = () => {
         .then((canvas) => {
           beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
         });
+      // Open axes setting
+      cy.get('[aria-controls="axesSection"]').click();
       cy.getElementByTestId('showXAxisSwitch').click();
       // compare with new canvas
       cy.get('canvas.marks').then((canvas) => {
@@ -64,6 +66,8 @@ export const runCreateVisTests = () => {
         .then((canvas) => {
           beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
         });
+      // Open thresholds setting
+      cy.get('[aria-controls="thresholdSection"]').click();
       // Change threshold mode from default 'Off' to enable threshold functionality
       cy.getElementByTestId('thresholdModeSelect').should('be.visible').select('Solid lines');
       cy.getElementByTestId('exploreVisAddThreshold').click();

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_bar.spec.js

@@ -47,6 +47,8 @@ export const runCreateVisTests = () => {
         .then((canvas) => {
           beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
         });
+      // Open Axes setting
+      cy.get('[aria-controls="allAxesSection"]').click();
       cy.getElementByTestId('showAxisSwitch').eq(1).click();
       // compare with new canvas
       cy.get('canvas.marks').then((canvas) => {
@@ -82,6 +84,9 @@ export const runCreateVisTests = () => {
         });
 
       cy.getElementByTestId('useThresholdColorButton').click();
+
+      // Open thresholds setting
+      cy.get('[aria-controls="thresholdSection"]').click();
       cy.getElementByTestId('exploreVisAddThreshold').click();
       // compare with new canvas
       cy.get('canvas.marks').then((canvas) => {

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_heatmap.spec.js

@@ -47,6 +47,8 @@ export const runCreateVisTests = () => {
         .then((canvas) => {
           beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
         });
+      // Open Axes setting
+      cy.get('[aria-controls="allAxesSection"]').click();
       cy.getElementByTestId('showAxisSwitch').eq(1).click();
       // compare with new canvas
       cy.get('canvas.marks').then((canvas) => {
@@ -63,6 +65,8 @@ export const runCreateVisTests = () => {
         .then((canvas) => {
           beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
         });
+      // Open legend setting
+      cy.get('[aria-controls="legendSection"]').click();
       cy.getElementByTestId('legendModeSwitch').click();
       // compare with new canvas
       cy.get('canvas.marks').then((canvas) => {

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_line.spec.js

@@ -47,6 +47,8 @@ export const runCreateVisTests = () => {
         .then((canvas) => {
           beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
         });
+      // Open axes setting
+      cy.get('[aria-controls="axesSection"]').click();
       // turn off show X axis
       cy.getElementByTestId('showXAxisSwitch').click();
       // compare with new canvas
@@ -82,8 +84,10 @@ export const runCreateVisTests = () => {
           beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
         });
 
+      // Open thresholds setting
+      cy.get('[aria-controls="thresholdSection"]').click();
       // Change threshold mode from default 'Off' to enable threshold functionality
-      cy.getElementByTestId('thresholdModeSelect').should('be.visible').select('Solid lines');
+      cy.getElementByTestId('thresholdModeSelect').select('Solid lines');
       cy.getElementByTestId('exploreVisAddThreshold').click();
       // compare with new canvas
       cy.get('canvas.marks').then((canvas) => {

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_pie.spec.js

@@ -49,6 +49,8 @@ export const runCreateVisTests = () => {
         .then((canvas) => {
           beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
         });
+      // Open legend setting
+      cy.get('[aria-controls="legendSection"]').click();
       cy.getElementByTestId('legendModeSwitch').click();
       // compare with new canvas
       cy.get('canvas.marks').then((canvas) => {

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_scatter.spec.js

@@ -47,6 +47,8 @@ export const runCreateVisTests = () => {
         .then((canvas) => {
           beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
         });
+      // Open Axes setting
+      cy.get('[aria-controls="allAxesSection"]').click();
       // turn off show y axis
       cy.getElementByTestId('showAxisSwitch').eq(1).click();
       // compare with new canvas

src/plugins/explore/public/components/visualizations/area/area_vis_config.test.ts

@@ -16,7 +16,7 @@ describe('area_vis_config', () => {
     test('should have the expected default values', () => {
       expect(defaultAreaChartStyles).toMatchObject({
         addLegend: true,
-        legendPosition: Positions.RIGHT,
+        legendPosition: Positions.BOTTOM,
         addTimeMarker: false,
         tooltipOptions: {
           mode: 'all',

src/plugins/explore/public/components/visualizations/area/area_vis_config.ts

@@ -54,7 +54,8 @@ export type AreaChartStyle = Required<
 const defaultAreaChartStyles: AreaChartStyle = {
   // Basic controls
   addLegend: true,
-  legendPosition: Positions.RIGHT,
+  legendTitle: '',
+  legendPosition: Positions.BOTTOM,
   addTimeMarker: false,
   tooltipOptions: {
     mode: 'all',

src/plugins/explore/public/components/visualizations/area/to_expression.ts

@@ -52,7 +52,7 @@ export const createSimpleAreaChart = (
         type: 'temporal',
         axis: applyAxisStyling(
           {
-            title: dateName,
+            title: '',
             labelAngle: -45,
             labelSeparation: 8,
           },
@@ -66,14 +66,7 @@ export const createSimpleAreaChart = (
       y: {
         field: metricField,
         type: 'quantitative',
-        axis: applyAxisStyling(
-          { title: metricName },
-          styles,
-          'value',
-          numericalColumns,
-          [],
-          dateColumns
-        ),
+        axis: applyAxisStyling({ title: '' }, styles, 'value', numericalColumns, [], dateColumns),
       },
       ...(showTooltip && {
         tooltip: [
@@ -188,7 +181,7 @@ export const createMultiAreaChart = (
         type: 'temporal',
         axis: applyAxisStyling(
           {
-            title: dateName,
+            title: '',
             labelAngle: -45,
             labelSeparation: 8,
           },
@@ -203,7 +196,7 @@ export const createMultiAreaChart = (
         field: metricField,
         type: 'quantitative',
         axis: applyAxisStyling(
-          { title: metricName },
+          { title: '' },
           styles,
           'value',
           numericalColumns,
@@ -331,7 +324,7 @@ export const createFacetedMultiAreaChart = (
       type: 'temporal',
       axis: applyAxisStyling(
         {
-          title: dateName,
+          title: '',
           labelAngle: -45,
           labelSeparation: 8,
         },
@@ -346,7 +339,7 @@ export const createFacetedMultiAreaChart = (
       field: metricField,
       type: 'quantitative',
       axis: applyAxisStyling(
-        { title: metricName },
+        { title: '' },
         styles,
         'value',
         numericalColumns,
@@ -512,7 +505,7 @@ export const createCategoryAreaChart = (
         type: 'nominal',
         axis: applyAxisStyling(
           {
-            title: categoryName,
+            title: '',
             labelAngle: -45,
             labelSeparation: 8,
           },
@@ -527,7 +520,7 @@ export const createCategoryAreaChart = (
         field: metricField,
         type: 'quantitative',
         axis: applyAxisStyling(
-          { title: metricName },
+          { title: '' },
           styles,
           'value',
           numericalColumns,
@@ -620,7 +613,7 @@ export const createStackedAreaChart = (
         type: 'nominal',
         axis: applyAxisStyling(
           {
-            title: categoryName1,
+            title: '',
             labelAngle: -45,
             labelSeparation: 8,
           },
@@ -635,7 +628,7 @@ export const createStackedAreaChart = (
         field: metricField,
         type: 'quantitative',
         axis: applyAxisStyling(
-          { title: metricName },
+          { title: '' },
           styles,
           'value',
           numericalColumns,

src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.test.ts

@@ -5,7 +5,7 @@
 
 import {
   inferTimeIntervals,
-  transformIntervelsToTickCount,
+  transformIntervalsToTickCount,
   inferBucketSize,
   adjustBucketBins,
   buildEncoding,
@@ -41,10 +41,10 @@ describe('bar_chart_utils', () => {
 
   describe('transformIntervelsToTickCount', () => {
     it('transforms time units correctly', () => {
-      expect(transformIntervelsToTickCount(TimeUnit.YEAR)).toBe('year');
-      expect(transformIntervelsToTickCount(TimeUnit.MONTH)).toBe('month');
-      expect(transformIntervelsToTickCount(TimeUnit.DATE)).toBe('day');
-      expect(transformIntervelsToTickCount(undefined)).toBe('day');
+      expect(transformIntervalsToTickCount(TimeUnit.YEAR)).toBe('year');
+      expect(transformIntervalsToTickCount(TimeUnit.MONTH)).toBe('month');
+      expect(transformIntervalsToTickCount(TimeUnit.DATE)).toBe('day');
+      expect(transformIntervalsToTickCount(undefined)).toBe('day');
     });
   });