GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 08:39:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: unit selection for value graph on dashboard (#898)

Browse Source
This commit is contained in:
Pranshu Chittora 2022-03-23 22:03:57 +05:30 committed by GitHub
parent 7765cee610
commit 8a883f1b5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/container/GridGraphComponent/index.tsx
View File

@ -1,6 +1,7 @@
import { Typography } from 'antd'; import { Typography } from 'antd';
import { ChartData } from 'chart.js'; import { ChartData } from 'chart.js';
import Graph, { graphOnClickHandler } from 'components/Graph'; import Graph, { graphOnClickHandler } from 'components/Graph';
import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
import ValueGraph from 'components/ValueGraph'; import ValueGraph from 'components/ValueGraph';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import history from 'lib/history'; import history from 'lib/history';
@ -57,7 +58,11 @@ function GridGraphComponent({
<Typography>{title}</Typography> <Typography>{title}</Typography>
</TitleContainer> </TitleContainer>
<ValueContainer isDashboardPage={isDashboardPage}> <ValueContainer isDashboardPage={isDashboardPage}>
<ValueGraph value={value.toString()} /> <ValueGraph
value={
yAxisUnit ? getYAxisFormattedValue(value, yAxisUnit) : value.toString()
}
/>
</ValueContainer> </ValueContainer>
</> </>
); );

4
frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
View File

@ -9,7 +9,7 @@ const findCategoryById = (searchValue) =>
const findCategoryByName = (searchValue) => const findCategoryByName = (searchValue) =>
find(flattenedCategories, (option) => option.name == searchValue); find(flattenedCategories, (option) => option.name == searchValue);
function YAxisUnitSelector({ defaultValue, onSelect }): JSX.Element { function YAxisUnitSelector({ defaultValue, onSelect, fieldLabel }): JSX.Element {
const onSelectHandler = (selectedValue: string): void => { const onSelectHandler = (selectedValue: string): void => {
onSelect(findCategoryByName(selectedValue)?.id); onSelect(findCategoryByName(selectedValue)?.id);
}; };
@ -19,7 +19,7 @@ function YAxisUnitSelector({ defaultValue, onSelect }): JSX.Element {
return ( return (
<Col style={{ marginTop: '1rem' }}> <Col style={{ marginTop: '1rem' }}>
<div style={{ margin: '0.5rem 0' }}> <div style={{ margin: '0.5rem 0' }}>
<Typography.Text>Y Axis Unit</Typography.Text> <Typography.Text>{fieldLabel}</Typography.Text>
</div> </div>
<AutoComplete <AutoComplete
style={{ width: '100%' }} style={{ width: '100%' }}

6
frontend/src/container/NewWidget/RightContainer/index.tsx
View File

@ -148,7 +148,11 @@ function RightContainer({
setSelectedTime, setSelectedTime,
}} }}
/> />
<YAxisUnitSelector defaultValue={yAxisUnit} onSelect={setYAxisUnit} /> <YAxisUnitSelector
defaultValue={yAxisUnit}
onSelect={setYAxisUnit}
fieldLabel={selectedGraphType === 'Value' ? 'Unit' : 'Y Axis Unit'}
/>
</Container> </Container>
); );
} }