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

fix: Changed Legends UI & Scrollable (#2078)

Browse Source 
* fix: Changed Legends UI & Scrollable

* fix: Changed axis label color

* fix: Changed Legends UI & Scrollable

* chore: Removed other issues changes

* fix: linting issues

* fix: changed fontsize of legend

* fix: changed height of legend

* chore: px is updated to rem

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
Chintan Sudani 2023-01-18 19:53:45 +05:30 committed by GitHub
parent fa652be926
commit 186632af69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/Graph/Plugin/Legend.ts
View File

@ -22,6 +22,7 @@ const getOrCreateLegendList = (
listContainer.style.height = '100%'; listContainer.style.height = '100%';
listContainer.style.flexWrap = 'wrap'; listContainer.style.flexWrap = 'wrap';
listContainer.style.justifyContent = 'center'; listContainer.style.justifyContent = 'center';
listContainer.style.fontSize = '0.75rem';
legendContainer?.appendChild(listContainer); legendContainer?.appendChild(listContainer);
} }
@ -59,7 +60,7 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
li.style.cursor = 'pointer'; li.style.cursor = 'pointer';
li.style.display = 'flex'; li.style.display = 'flex';
li.style.marginLeft = '10px'; li.style.marginLeft = '10px';
li.style.marginTop = '5px'; // li.style.marginTop = '5px';
li.onclick = (): void => { li.onclick = (): void => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@ -83,9 +84,9 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
boxSpan.style.borderColor = `${item?.strokeStyle}`; boxSpan.style.borderColor = `${item?.strokeStyle}`;
boxSpan.style.borderWidth = `${item.lineWidth}px`; boxSpan.style.borderWidth = `${item.lineWidth}px`;
boxSpan.style.display = 'inline-block'; boxSpan.style.display = 'inline-block';
boxSpan.style.minHeight = '20px'; boxSpan.style.minHeight = '0.75rem';
boxSpan.style.marginRight = '10px'; boxSpan.style.marginRight = '0.5rem';
boxSpan.style.minWidth = '20px'; boxSpan.style.minWidth = '0.75rem';
boxSpan.style.borderRadius = '50%'; boxSpan.style.borderRadius = '50%';
if (item.text) { if (item.text) {

2
frontend/src/components/Graph/index.tsx
View File

@ -330,7 +330,7 @@ Graph.defaultProps = {
yAxisUnit: undefined, yAxisUnit: undefined,
forceReRender: undefined, forceReRender: undefined,
staticLine: undefined, staticLine: undefined,
containerHeight: '85%', containerHeight: '90%',
onDragSelect: undefined, onDragSelect: undefined,
dragSelectColor: undefined, dragSelectColor: undefined,
}; };

16
frontend/src/components/Graph/styles.ts
View File

@ -1,3 +1,4 @@
import { themeColors } from 'constants/theme';
import styled from 'styled-components'; import styled from 'styled-components';
export const LegendsContainer = styled.div` export const LegendsContainer = styled.div`
@ -5,10 +6,17 @@ export const LegendsContainer = styled.div`
* { * {
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none !important; width: 0.5rem;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: ${themeColors.royalGrey};
border-radius: 0.625rem;
}
::-webkit-scrollbar-thumb:hover {
background: ${themeColors.matterhornGrey};
} }
-ms-overflow-style: none !important; /* IE and Edge */
scrollbar-width: none !important; /* Firefox */
} }
`; `;

2
frontend/src/constants/theme.ts
View File

@ -33,6 +33,8 @@ const themeColors = {
rust: '#B33300', rust: '#B33300',
}, },
errorColor: '#d32f2f', errorColor: '#d32f2f',
royalGrey: '#888888',
matterhornGrey: '#555555',
whiteCream: '#ffffffd5', whiteCream: '#ffffffd5',
black: '#000000', black: '#000000',
}; };