fix(ui): extend the y-axis when stacked line option is selected (#16376)

* fix(ui): extend the y-axis when stacked line option is selected

* chore: update CHANGELOG

CHANGELOG.md

@@ -39,6 +39,7 @@
 1. [16346](https://github.com/influxdata/influxdb/pull/16346): Update pkger task export to only trim out option task and not all vars provided
 1. [16374](https://github.com/influxdata/influxdb/pull/16374): Update influx CLI, only show "see help" message, instead of the whole usage.
 1. [16380](https://github.com/influxdata/influxdb/pull/16380): Fix notification tag matching rules and enable tests to verify
+1. [16376](https://github.com/influxdata/influxdb/pull/16376): Extend the y-axis when stacked graph is selected
 
 ### UI Improvements
 

ui/package.json

@@ -131,7 +131,7 @@
   "dependencies": {
     "@influxdata/clockface": "1.1.0",
     "@influxdata/flux-parser": "^0.3.0",
-    "@influxdata/giraffe": "0.16.11",
+    "@influxdata/giraffe": "0.17.1",
     "@influxdata/influx": "0.5.5",
     "@influxdata/influxdb-templates": "0.9.0",
     "@influxdata/react-custom-scrollbars": "4.3.8",

ui/src/shared/components/XYPlot.tsx

@@ -1,6 +1,12 @@
 // Libraries
 import React, {FunctionComponent, useMemo} from 'react'
-import {Config, Table} from '@influxdata/giraffe'
+import {
+  Config,
+  Table,
+  DomainLabel,
+  lineTransform,
+  getDomainDataFromLines,
+} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@@ -76,17 +82,6 @@ const XYPlot: FunctionComponent<Props> = ({
 
   const columnKeys = table.columnKeys
 
-  const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
-    storedXDomain,
-    table.getColumn(xColumn, 'number'),
-    timeRange
-  )
-
-  const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
-    storedYDomain,
-    table.getColumn(yColumn, 'number')
-  )
-
   const isValidView =
     xColumn &&
     columnKeys.includes(xColumn) &&
@@ -106,6 +101,32 @@ const XYPlot: FunctionComponent<Props> = ({
 
   const groupKey = [...fluxGroupKeyUnion, 'result']
 
+  const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
+    storedXDomain,
+    table.getColumn(xColumn, 'number'),
+    timeRange
+  )
+
+  const memoizedYColumnData = useMemo(() => {
+    if (position === 'stacked') {
+      const {lineData} = lineTransform(
+        table,
+        xColumn,
+        yColumn,
+        groupKey,
+        colorHexes,
+        position
+      )
+      return getDomainDataFromLines(lineData, DomainLabel.Y)
+    }
+    return table.getColumn(yColumn, 'number')
+  }, [table, yColumn, position])
+
+  const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
+    storedYDomain,
+    memoizedYColumnData
+  )
+
   const legendColumns = filterNoisyColumns(
     [...groupKey, xColumn, yColumn],
     table

ui/yarn.lock

@@ -1021,10 +1021,10 @@
   resolved "https://registry.yarnpkg.com/@influxdata/flux-parser/-/flux-parser-0.3.0.tgz#b63123ac814ad32c65e46a4097ba3d8b959416a5"
   integrity sha512-nsm801l60kXFulcSWA2YH2YRz9oSsMlTK9Evn6Og9BoQnQMcwUsSUEug8mQRIUljnkNYV58JSs0W0mP8h7Y/ZQ==
 
-"@influxdata/giraffe@0.16.11":
-  version "0.16.11"
-  resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-0.16.11.tgz#593524758ac74fac170226edc4be79f173b2ea50"
-  integrity sha512-66ayOS3OSXBrbm9ERiLiQbTDPkHjQiwmxsl3w4obzmH92U4vRU95nrGg/wgWVBnnTLAOvCkNOJ5MlyZlRUO4zA==
+"@influxdata/giraffe@0.17.1":
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-0.17.1.tgz#75c4c70bbcf78866f2c127ca94ad31d05267d9ab"
+  integrity sha512-s/51Ax12qcwMBwyh/4B7OccfMBscBxh7ZDPGJxuSoh4rAxGUUk25J4gAO1PpyGaKL6P874so2Ejtu6wfQrZ66A==
 
 "@influxdata/[email protected]":
   version "0.5.5"