Skip to content

Commit 7ba27ef

Browse files
committed
✨ Add Dashdot name indicator
1 parent 48e1808 commit 7ba27ef

File tree

1 file changed

+30
-25
lines changed

1 file changed

+30
-25
lines changed

src/modules/dashdot/DashdotModule.tsx

+30-25
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createStyles, useMantineColorScheme, useMantineTheme } from '@mantine/core';
1+
import { createStyles, Stack, Title, useMantineColorScheme, useMantineTheme } from '@mantine/core';
22
import { IconCalendar as CalendarIcon } from '@tabler/icons';
33
import axios from 'axios';
44
import { useEffect, useState } from 'react';
@@ -214,30 +214,35 @@ export function DashdotComponent() {
214214
</div>
215215

216216
{graphs.map((graph) => (
217-
<iframe
218-
className={classes.iframe}
219-
style={
220-
isCompact
221-
? {
222-
width: graph.spanTwo ? '100%' : 'calc(50% - 5px)',
223-
}
224-
: undefined
225-
}
226-
key={graph.name}
227-
title={graph.name}
228-
src={`${dashdotUrl}?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
229-
'dark'
230-
? theme.colors.dark[7]
231-
: theme.colors.gray[0]
232-
).substring(1)}${isCompact ? '&gap=10' : '&gap=5'}&innerRadius=${theme.radius.lg}${
233-
graph.params
234-
? `&${Object.entries(graph.params)
235-
.map(([key, value]) => `${key}=${value.toString()}`)
236-
.join('&')}`
237-
: ''
238-
}`}
239-
frameBorder="0"
240-
/>
217+
<Stack>
218+
<Title style={{ position: 'absolute', right: 0 }} order={4} mt={10} mr={25}>
219+
{graph.name}
220+
</Title>
221+
<iframe
222+
className={classes.iframe}
223+
style={
224+
isCompact
225+
? {
226+
width: graph.spanTwo ? '100%' : 'calc(50% - 5px)',
227+
}
228+
: undefined
229+
}
230+
key={graph.name}
231+
title={graph.name}
232+
src={`${dashdotUrl}?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
233+
'dark'
234+
? theme.colors.dark[7]
235+
: theme.colors.gray[0]
236+
).substring(1)}${isCompact ? '&gap=10' : '&gap=5'}&innerRadius=${theme.radius.lg}${
237+
graph.params
238+
? `&${Object.entries(graph.params)
239+
.map(([key, value]) => `${key}=${value.toString()}`)
240+
.join('&')}`
241+
: ''
242+
}`}
243+
frameBorder="0"
244+
/>
245+
</Stack>
241246
))}
242247
</div>
243248
)}

0 commit comments

Comments
 (0)