|
1 |
| -import { createStyles, useMantineColorScheme, useMantineTheme } from '@mantine/core'; |
| 1 | +import { createStyles, Stack, Title, useMantineColorScheme, useMantineTheme } from '@mantine/core'; |
2 | 2 | import { IconCalendar as CalendarIcon } from '@tabler/icons';
|
3 | 3 | import axios from 'axios';
|
4 | 4 | import { useEffect, useState } from 'react';
|
@@ -214,30 +214,35 @@ export function DashdotComponent() {
|
214 | 214 | </div>
|
215 | 215 |
|
216 | 216 | {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> |
241 | 246 | ))}
|
242 | 247 | </div>
|
243 | 248 | )}
|
|
0 commit comments