Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
762a7195
Unverified
Commit
762a7195
authored
Oct 19, 2020
by
Dominik Prokop
Committed by
GitHub
Oct 19, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Explore: Minor tweaks to exemplars marble (#28366)
parent
89ebb97f
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
24 additions
and
5 deletions
+24
-5
public/app/plugins/panel/graph3/plugins/ExemplarMarker.tsx
+24
-5
No files found.
public/app/plugins/panel/graph3/plugins/ExemplarMarker.tsx
View file @
762a7195
...
...
@@ -67,9 +67,9 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({ time, text, tags
return
(
<>
<
div
ref=
{
markerRef
}
onMouseEnter=
{
onMouseEnter
}
onMouseLeave=
{
onMouseLeave
}
className=
{
cx
(
styles
.
markerWrapper
)
}
>
<
svg
viewBox=
"0 0 599 599"
width=
"8"
height=
"8"
>
<
path
id=
"black_diamond"
fill=
"#000"
d=
"M 300,575 L 575,300 L 300,25 L 25,300 L 300,575 Z"
/>
<
div
ref=
{
markerRef
}
onMouseEnter=
{
onMouseEnter
}
onMouseLeave=
{
onMouseLeave
}
className=
{
styles
.
markerWrapper
}
>
<
svg
viewBox=
"0 0 599 599"
width=
"8"
height=
"8"
className=
{
cx
(
styles
.
marble
,
isOpen
&&
styles
.
activeMarble
)
}
>
<
path
d=
"M 300,575 L 575,300 L 300,25 L 25,300 L 300,575 Z"
/>
</
svg
>
</
div
>
{
isOpen
&&
<
Portal
>
{
renderMarker
()
}
</
Portal
>
}
...
...
@@ -81,6 +81,19 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
const
bg
=
theme
.
isDark
?
theme
.
palette
.
dark2
:
theme
.
palette
.
white
;
const
headerBg
=
theme
.
isDark
?
theme
.
palette
.
dark9
:
theme
.
palette
.
gray5
;
const
shadowColor
=
theme
.
isDark
?
theme
.
palette
.
black
:
theme
.
palette
.
white
;
const
marbleFill
=
theme
.
isDark
?
theme
.
palette
.
gray3
:
theme
.
palette
.
gray1
;
const
marbleFillHover
=
theme
.
isDark
?
theme
.
palette
.
blue85
:
theme
.
palette
.
blue77
;
const
marble
=
css
`
display: block;
fill:
${
marbleFill
}
;
transition: transform 0.15s ease-out;
`
;
const
activeMarble
=
css
`
fill:
${
marbleFillHover
}
;
transform: scale(1.3);
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
`
;
return
{
markerWrapper
:
css
`
...
...
@@ -88,8 +101,11 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
width: 8px;
height: 8px;
box-sizing: content-box;
> svg {
display: block;
&:hover {
> svg {
${
activeMarble
}
}
}
`
,
marker
:
css
`
...
...
@@ -107,6 +123,7 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
max-width: 400px;
box-shadow: 0 0 20px
${
shadowColor
}
;
`
,
tooltip
:
css
`
background: none;
padding: 0;
...
...
@@ -137,5 +154,7 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
padding:
${
theme
.
spacing
.
sm
}
;
font-weight:
${
theme
.
typography
.
weight
.
semibold
}
;
`
,
marble
,
activeMarble
,
};
};
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment