diff --git a/CHANGELOG.md b/CHANGELOG.md index b8be99326f7..bd572212a1e 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/ui/package.json b/ui/package.json index 478fced57d7..16116d8af28 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/shared/components/XYPlot.tsx b/ui/src/shared/components/XYPlot.tsx index f0f1e82f426..8e7d7fc0114 100644 --- a/ui/src/shared/components/XYPlot.tsx +++ b/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 = ({ 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 = ({ 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 diff --git a/ui/yarn.lock b/ui/yarn.lock index 3da0015d25c..a1e3a257d1a 100644 --- a/ui/yarn.lock +++ b/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/influx@0.5.5": version "0.5.5"