feat: expose stepBefore and stepAfter interpolation options (#4441)

* feat: expose stepBefore and stepAfter options

* chore: resolve merge conflct

* chore: update package.json to use latest sha

Author: blegesse-w

package.json

@@ -52,7 +52,7 @@
     "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
     "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
     "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
-    "generate": "export SHA=4e27f5d5e552e962164d1455d5249ec2d6d0588b && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=65ca23669c55b381acc585d9e5e688a635b81754 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",
     "generate-meta-oss": "yarn oss-api && yarn notebooks && yarn unity && yarn annotations-oss && yarn pinned && yarn mapsd-oss && yarn cloudPriv && yarn fluxdocs && yarn subscriptions-oss",

src/shared/utils/vis.ts

@@ -13,11 +13,16 @@ import {XYGeom, Axis} from 'src/types'
 export const HEX_DIGIT_PRECISION = 16
 
 /*
-  A geom may be stored as "line", "step", "monotoneX", "bar", or "stacked", but
-  we currently only support the "line", "step", and "monotoneX" geoms.
+  A geom may be stored as "line", "step", "monotoneX", "bar", "stacked", "stepBefore", or "stepAfter", but
+  we currently only support the "line", "step", "stepBefore", "stepAfter", and "monotoneX" geoms.
 */
 export const resolveGeom = (geom: XYGeom) => {
-  if (geom === 'step' || geom === 'monotoneX') {
+  if (
+    geom === 'step' ||
+    geom === 'monotoneX' ||
+    geom === 'stepBefore' ||
+    geom === 'stepAfter'
+  ) {
     return geom
   }
 
@@ -32,6 +37,10 @@ export const geomToInterpolation = (geom: XYGeom): LineInterpolation => {
       return 'step'
     case 'monotoneX':
       return 'monotoneX'
+    case 'stepBefore':
+      return 'stepBefore'
+    case 'stepAfter':
+      return 'stepAfter'
     default:
       return 'linear'
   }

src/visualization/types/Graph/options.tsx

@@ -67,6 +67,10 @@ const GraphViewOptions: FC<Props> = ({properties, results, update}) => {
         return 'Smooth'
       case 'step':
         return 'Step'
+      case 'stepBefore':
+        return 'StepBefore'
+      case 'stepAfter':
+        return 'StepAfter'
       default:
       case 'line':
         return 'Linear'
@@ -197,6 +201,24 @@ const GraphViewOptions: FC<Props> = ({properties, results, update}) => {
                     >
                       Step
                     </Dropdown.Item>
+                    <Dropdown.Item
+                      value="stepBefore"
+                      onClick={(geom: string) => {
+                        update({geom})
+                      }}
+                      selected={properties.geom === 'stepBefore'}
+                    >
+                      StepBefore
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      value="stepAfter"
+                      onClick={(geom: string) => {
+                        update({geom})
+                      }}
+                      selected={properties.geom === 'stepAfter'}
+                    >
+                      StepAfter
+                    </Dropdown.Item>
                   </Dropdown.Menu>
                 )}
               />