Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 23:15:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add Dashdot name indicator

Browse Source
This commit is contained in:
ajnart
2022-08-12 15:30:53 +02:00
parent 48e1808992
commit 7ba27ef9f1
1 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/modules/dashdot/DashdotModule.tsx
View File

@@ -1,4 +1,4 @@
import { createStyles, useMantineColorScheme, useMantineTheme } from '@mantine/core'; import { createStyles, Stack, Title, useMantineColorScheme, useMantineTheme } from '@mantine/core';
import { IconCalendar as CalendarIcon } from '@tabler/icons'; import { IconCalendar as CalendarIcon } from '@tabler/icons';
import axios from 'axios'; import axios from 'axios';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -214,30 +214,35 @@ export function DashdotComponent() {
</div> </div>
{graphs.map((graph) => ( {graphs.map((graph) => (
<iframe <Stack>
className={classes.iframe} <Title style={{ position: 'absolute', right: 0 }} order={4} mt={10} mr={25}>
style={ {graph.name}
isCompact </Title>
? { <iframe
width: graph.spanTwo ? '100%' : 'calc(50% - 5px)', className={classes.iframe}
} style={
: undefined isCompact
} ? {
key={graph.name} width: graph.spanTwo ? '100%' : 'calc(50% - 5px)',
title={graph.name} }
src={`${dashdotUrl}?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme === : undefined
'dark' }
? theme.colors.dark[7] key={graph.name}
: theme.colors.gray[0] title={graph.name}
).substring(1)}${isCompact ? '&gap=10' : '&gap=5'}&innerRadius=${theme.radius.lg}${ src={`${dashdotUrl}?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
graph.params 'dark'
? `&${Object.entries(graph.params) ? theme.colors.dark[7]
.map(([key, value]) => `${key}=${value.toString()}`) : theme.colors.gray[0]
.join('&')}` ).substring(1)}${isCompact ? '&gap=10' : '&gap=5'}&innerRadius=${theme.radius.lg}${
: '' graph.params
}`} ? `&${Object.entries(graph.params)
frameBorder="0" .map(([key, value]) => `${key}=${value.toString()}`)
/> .join('&')}`
: ''
}`}
frameBorder="0"
/>
</Stack>
))} ))}
</div> </div>
)} )}