fix: allow Band plot to work prior to user interaction with options (#3865)

Author: TCL735

cypress/e2e/shared/explorerVisualizations.test.ts

@@ -1,5 +1,6 @@
 import {Organization} from '../../../src/types'
 import {points, makeGraphSnapshot} from '../../support/commands'
+
 const VIS_TYPES = [
   'band',
   //    'check',
@@ -15,6 +16,7 @@ const VIS_TYPES = [
   'table',
 ]
 const NUM_POINTS = 360
+
 describe('visualizations', () => {
   beforeEach(() => {
     cy.flush()
@@ -29,6 +31,7 @@ describe('visualizations', () => {
     cy.writeData(points(NUM_POINTS))
     cy.getByTestID('time-machine--bottom')
   })
+
   describe('empty states', () => {
     it('shows a message if no queries have been created', () => {
       cy.getByTestID('empty-graph--no-queries').should('exist')
@@ -130,7 +133,7 @@ describe('visualizations', () => {
 
           // cycle through all the visualizations of the data
           VIS_TYPES.forEach(type => {
-            if (type !== 'mosaic' && type !== 'band') {
+            if (type !== 'mosaic') {
               // mosaic graph is behind feature flag
               cy.getByTestID('view-type--dropdown').click()
               cy.getByTestID(`view-type--${type}`).click()
@@ -372,4 +375,45 @@ describe('visualizations', () => {
         })
     })
   })
+
+  describe('Band plot behaves correctly', () => {
+    it('can find its main column before adjusting view options', () => {
+      cy.get<string>('@defaultBucketListSelector').then(
+        (defaultBucketListSelector: string) => {
+          const AGGREGATE_FUNCTION = 'last'
+
+          cy.getByTestID('query-builder').should('exist')
+          // build the query to return data from beforeEach
+          cy.getByTestID('selector-list _monitoring').should('be.visible')
+          cy.getByTestID('selector-list _monitoring').click()
+
+          cy.getByTestID(defaultBucketListSelector).should('be.visible')
+          cy.getByTestID(defaultBucketListSelector).click()
+
+          cy.getByTestID('selector-list m').should('be.visible')
+          cy.getByTestID('selector-list m').clickAttached()
+
+          cy.getByTestID('selector-list v').should('be.visible')
+          cy.getByTestID('selector-list v').clickAttached()
+
+          cy.getByTestID('selector-list tv1').clickAttached()
+
+          cy.getByTestID(`selector-list ${AGGREGATE_FUNCTION}`)
+            .scrollIntoView()
+            .should('be.visible')
+            .click()
+
+          cy.getByTestID('view-type--dropdown').click()
+          cy.getByTestID(`view-type--band`).click()
+          cy.getByTestID('time-machine-submit-button').click()
+          cy.getByTestID(`vis-graphic--band`).should('exist')
+
+          cy.get('button.cf-button[title="Customize"').click()
+          cy.getByTestID('dropdown--button-main-column').within(() => {
+            cy.get('.cf-dropdown--selected').contains(AGGREGATE_FUNCTION)
+          })
+        }
+      )
+    })
+  })
 })

cypress/e2e/shared/flows.test.ts

@@ -547,4 +547,77 @@ describe('Flows', () => {
       })
     })
   })
+
+  it('can create a Band plot without crashing', () => {
+    const newBucketName = 'lets goooo'
+    const now = Date.now()
+    cy.get<Organization>('@org').then(({id, name}: Organization) => {
+      cy.createBucket(id, name, newBucketName)
+    })
+    cy.writeData(
+      [
+        `test,container_name=cool dopeness=12 ${now - 1000}000000`,
+        `test,container_name=beans dopeness=18 ${now - 1200}000000`,
+        `test,container_name=cool dopeness=14 ${now - 1400}000000`,
+        `test,container_name=beans dopeness=10 ${now - 1600}000000`,
+      ],
+      newBucketName
+    )
+
+    cy.getByTestID('preset-new')
+      .first()
+      .click()
+    cy.getByTestID('time-machine-submit-button').should('be.visible')
+
+    cy.getByTestID('page-title')
+      .first()
+      .click()
+    cy.getByTestID('renamable-page-title--input').type(
+      'I am not afraid of Band Plot {enter}'
+    )
+
+    // select our bucket
+    cy.getByTestID('bucket-selector').within(() => {
+      cy.getByTestID('selector-list lets goooo').click()
+    })
+
+    // select measurement and field
+    cy.getByTestID('builder-card')
+      .eq(0)
+      .within(() => {
+        cy.getByTestID(`selector-list test`).click()
+      })
+    cy.getByTestID('builder-card')
+      .eq(1)
+      .within(() => {
+        cy.getByTestID(`selector-list dopeness`).click()
+      })
+
+    cy.get('input.flow-panel--title-input')
+      .eq(1)
+      .should('have.value', 'Validate the Data')
+    cy.getByTestID('sidebar-button')
+      .eq(1)
+      .click()
+
+    cy.get('button.cf-dropdown-item[title="Delete"]')
+      .should('be.visible')
+      .click()
+
+    cy.get('input.flow-panel--title-input')
+      .eq(1)
+      .should('have.value', 'Visualize the Result')
+
+    cy.getByTestID('view-type--dropdown').click()
+    cy.getByTestID('view-type--band').click()
+    cy.get(
+      '.flow-panel--persistent-control > button.cf-button[title="Run"'
+    ).click()
+    cy.getByTestID(`vis-graphic--band`).should('exist')
+
+    cy.get('button.cf-button[title="Configure Visualization"]').click()
+    cy.getByTestID('dropdown--button-main-column').within(() => {
+      cy.get('.cf-dropdown--selected').contains('_result')
+    })
+  })
 })

package.json

@@ -156,9 +156,9 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^3.2.1",
+    "@influxdata/clockface": "^3.3.1",
     "@influxdata/flux-lsp-browser": "^0.8.5",
-    "@influxdata/giraffe": "^2.24.1",
+    "@influxdata/giraffe": "^2.24.3",
     "@influxdata/influxdb-templates": "0.9.0",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "abortcontroller-polyfill": "^1.3.0",

src/style/chronograf.scss

@@ -143,6 +143,7 @@
 @import 'src/writeData/components/AddPluginToConfiguration.scss';
 @import 'src/authorizations/components/customApiTokenOverlay.scss';
 @import 'src/flows/components/header/VersionBullet.scss';
+@import 'src/visualization/styles/Band.scss';
 
 // External
 @import '../../node_modules/@influxdata/react-custom-scrollbars/dist/styles.css';

src/views/helpers/index.ts

@@ -164,7 +164,7 @@ export function defaultBandViewProperties() {
     },
     hoverDimension: 'auto' as LineHoverDimension,
     upperColumn: '',
-    mainColumn: DEFAULT_AGGREGATE_FUNCTION,
+    mainColumn: '',
     lowerColumn: '',
   }
 }

src/visualization/styles/Band.scss

@@ -0,0 +1,4 @@
+.view-options--band-column-dropdown-error {
+  margin: $cf-marg-a;
+  color: $cf-input-border--error;
+}

src/visualization/types/Band/icon.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const icon = (
-  <div className="vis-graphic" data-testid="vis-graphic--band-chart">
+  <div className="vis-graphic" data-testid="vis-graphic--band">
     <svg
       id="Band Chart"
       x="0px"