Sparkline Chart
Examples
(6)Properties
(54)Playground
Loading demo…
import
{
SparklineChart
}
from
'@platform-blocks/charts'
;
import
{
DAILY_SIGNUPS
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<SparklineChart
height
=
{
72
}
data
=
{
DAILY_SIGNUPS
}
fill
fillOpacity
=
{
0.18
}
smooth
showPoints
=
{
false
}
pointSize
=
{
4
}
strokeWidth
=
{
2.5
}
highlightLast
=
{
false
}
valueFormatter
=
{
(
value
)
=>
`${value} signups`
}
domain
=
{
{
y
:
[
20
,
80
]
}
}
/>
)
;
}
Loading demo…
import
{
Block
,
Card
,
Flex
,
Text
,
Title
}
from
'@platform-blocks/react-ui-library'
;
import
{
SparklineChart
}
from
'@platform-blocks/charts'
;
import
{
SURFACE_SERIES
}
from
'./data'
;
const
formatUsers
=
(
value
:
number
)
=>
`${Math.round(value).toLocaleString()} users`
;
const
getDeltaLabel
=
(
series
:
number
[
]
)
=>
{
if
(
series
.
length
<
2
)
return
'Stable vs yesterday'
;
const
latest
=
series
[
series
.
length
-
1
]
;
const
prior
=
series
[
series
.
length
-
2
]
;
const
delta
=
latest
-
prior
;
if
(
delta
===
0
)
return
'Stable vs yesterday'
;
const
prefix
=
delta
>
0
?
'+'
:
'-'
;
return
`${prefix}${Math.abs(delta).toLocaleString()} vs yesterday`
;
}
;
export
function
Demo
(
)
{
return
(
<Card
padding
=
"lg"
radius
=
"lg"
>
<Block
mb
=
"md"
>
<Title
order
=
{
5
}
text
=
"Daily Active Users"
/>
<Text
size
=
"sm"
c
=
"dimmed"
>
Trailing
two weeks
,
by platform
</Text
>
</Block
>
<Flex
direction
=
"row"
wrap
=
"wrap"
gap
=
"md"
>
{
SURFACE_SERIES
.
map
(
(
series
)
=>
{
const
latest
=
series
.
data
[
series
.
data
.
length
-
1
]
;
return
(
<Block
key
=
{
series
.
id
}
style
=
{
{
width
:
200
}
}
>
<Text
size
=
"sm"
weight
=
"semibold"
>
{
series
.
title
}
</Text
>
<Text
size
=
"xs"
c
=
"dimmed"
>
{
latest
.
toLocaleString
(
)
}
·
{
getDeltaLabel
(
series
.
data
)
}
</Text
>
<SparklineChart
height
=
{
72
}
data
=
{
series
.
data
}
fill
fillOpacity
=
{
0.18
}
smooth
highlightLast
valueFormatter
=
{
formatUsers
}
domain
=
{
{
y
:
[
900
,
2300
]
}
}
thresholds
=
{
[
{
value
:
2100
,
label
:
'Target'
,
dashed
:
true
,
color
:
'#94A3B8'
,
opacity
:
0.7
,
labelPosition
:
'right'
}
]
}
/>
</Block
>
)
;
}
)
}
</Flex
>
</Card
>
)
;
}
Loading demo…
import
{
View
,
Text
}
from
'react-native'
;
import
{
SparklineChart
}
from
'@platform-blocks/charts'
;
import
{
BUG_BACKLOG
}
from
'./data'
;
export
function
Demo
(
)
{
const
latest
=
BUG_BACKLOG
[
BUG_BACKLOG
.
length
-
1
]
;
const
peak
=
Math
.
max
(
.
.
.
BUG_BACKLOG
)
;
return
(
<View
style
=
{
{
padding
:
16
,
backgroundColor
:
'#fff'
,
borderRadius
:
12
,
width
:
260
}
}
>
<Text
style
=
{
{
fontSize
:
15
,
fontWeight
:
'600'
,
marginBottom
:
4
}
}
>
Bugs
per
Release
Train
</Text
>
<Text
style
=
{
{
fontSize
:
12
,
color
:
'#666'
,
marginBottom
:
8
}
}
>
Spike
highlighted at
{
peak
}
bugs ·
Latest
train
:
{
latest
}
open
</Text
>
<SparklineChart
height
=
{
86
}
data
=
{
BUG_BACKLOG
}
color
=
"#F03E3E"
fill
fillOpacity
=
{
0.12
}
smooth
highlightLast
highlightExtrema
=
{
{
showMax
:
true
,
showMin
:
false
,
color
:
'#F03E3E'
,
radius
:
4.5
,
strokeColor
:
'#FEE2E2'
,
strokeWidth
:
1.5
}
}
thresholds
=
{
[
{
value
:
18
,
label
:
'Notice threshold'
,
color
:
'#F87171'
,
dashed
:
true
,
opacity
:
0.8
,
labelPosition
:
'left'
}
]
}
domain
=
{
{
y
:
[
8
,
26
]
}
}
valueFormatter
=
{
(
value
)
=>
`${Math.round(value)} bugs`
}
/>
</View
>
)
;
}
Loading demo…
import
{
View
,
Text
}
from
'react-native'
;
import
{
SparklineChart
}
from
'@platform-blocks/charts'
;
import
{
STOREFRONTS
}
from
'./data'
;
const
formatRevenue
=
(
value
:
number
)
=>
`$${value.toFixed(1)}k`
;
export
function
Demo
(
)
{
return
(
<View
style
=
{
{
padding
:
16
,
backgroundColor
:
'#fff'
,
borderRadius
:
12
}
}
>
<Text
style
=
{
{
fontSize
:
15
,
fontWeight
:
'600'
,
marginBottom
:
4
}
}
>
Weekly
Revenue
Snapshot
</Text
>
<Text
style
=
{
{
fontSize
:
12
,
color
:
'#666'
,
marginBottom
:
12
}
}
>
Seven
-
day trailing
revenue
(
k
USD
)
·
Goal
line at $110k
</Text
>
<View
style
=
{
{
flexDirection
:
'row'
,
flexWrap
:
'wrap'
}
}
>
{
STOREFRONTS
.
map
(
(
store
)
=>
{
const
latest
=
store
.
data
[
store
.
data
.
length
-
1
]
;
const
minimum
=
Math
.
min
(
.
.
.
store
.
data
)
;
return
(
<View
key
=
{
store
.
id
}
style
=
{
{
width
:
200
,
marginRight
:
16
,
marginBottom
:
18
}
}
>
<Text
style
=
{
{
fontSize
:
13
,
fontWeight
:
'600'
}
}
>
{
store
.
name
}
</Text
>
<Text
style
=
{
{
fontSize
:
12
,
color
:
'#555'
,
marginBottom
:
6
}
}
>
Latest
:
{
formatRevenue
(
latest
)
}
·
Low
:
{
formatRevenue
(
minimum
)
}
</Text
>
<SparklineChart
height
=
{
76
}
data
=
{
store
.
data
}
color
=
{
store
.
color
}
showPoints
smooth
fill
fillOpacity
=
{
0.1
}
domain
=
{
{
y
:
[
60
,
140
]
}
}
highlightLast
highlightExtrema
=
{
{
showMin
:
true
,
showMax
:
false
,
color
:
store
.
color
,
radius
:
4
,
strokeColor
:
'#FFFFFF'
,
strokeWidth
:
1.2
}
}
thresholds
=
{
[
{
value
:
110
,
label
:
'Target'
,
dashed
:
true
,
color
:
'#64748B'
,
opacity
:
0.75
,
labelPosition
:
'right'
}
]
}
valueFormatter
=
{
formatRevenue
}
/>
</View
>
)
;
}
)
}
</View
>
</View
>
)
;
}
Loading demo…
import
{
View
,
Text
}
from
'react-native'
;
import
{
SparklineChart
}
from
'@platform-blocks/charts'
;
import
{
QUEUE_DEPTH
}
from
'./data'
;
export
function
Demo
(
)
{
const
current
=
QUEUE_DEPTH
[
QUEUE_DEPTH
.
length
-
1
]
;
const
peak
=
Math
.
max
(
.
.
.
QUEUE_DEPTH
)
;
return
(
<View
style
=
{
{
padding
:
16
,
backgroundColor
:
'#fff'
,
borderRadius
:
12
,
width
:
260
}
}
>
<Text
style
=
{
{
fontSize
:
15
,
fontWeight
:
'600'
,
marginBottom
:
4
}
}
>
Support
Queue
Length
</Text
>
<Text
style
=
{
{
fontSize
:
12
,
color
:
'#666'
,
marginBottom
:
8
}
}
>
Current
queue
:
{
current
}
tickets ·
Peak
today
:
{
peak
}
</Text
>
<SparklineChart
height
=
{
82
}
data
=
{
QUEUE_DEPTH
}
fill
fillOpacity
=
{
0.14
}
smooth
highlightLast
highlightExtrema
=
{
{
showMin
:
false
,
showMax
:
true
,
color
:
'#6366F1'
,
radius
:
4.5
,
strokeColor
:
'#EEF2FF'
,
strokeWidth
:
1.5
}
}
thresholds
=
{
[
{
value
:
12
,
label
:
'SLA ceiling'
,
dashed
:
true
,
color
:
'#A5B4FC'
,
opacity
:
0.85
,
labelPosition
:
'right'
}
]
}
bands
=
{
[
{
from
:
0
,
to
:
8
,
color
:
'#C7D2FE'
,
opacity
:
0.18
}
]
}
domain
=
{
{
y
:
[
4
,
18
]
}
}
animation
=
{
{
duration
:
400
,
easing
:
'easeInOutCubic'
}
}
valueFormatter
=
{
(
value
)
=>
`${Math.round(value)} tickets`
}
/>
</View
>
)
;
}
Loading demo…
import
{
View
,
Text
}
from
'react-native'
;
import
{
SparklineChart
}
from
'@platform-blocks/charts'
;
import
{
TEAMS
}
from
'./data'
;
export
function
Demo
(
)
{
return
(
<View
style
=
{
{
padding
:
16
,
backgroundColor
:
'#fff'
,
borderRadius
:
12
}
}
>
<Text
style
=
{
{
fontSize
:
15
,
fontWeight
:
'600'
,
marginBottom
:
4
}
}
>
Deploy
Velocity
by
Team
</Text
>
<Text
style
=
{
{
fontSize
:
12
,
color
:
'#666'
,
marginBottom
:
12
}
}
>
Rolling
12
-
day deploy counts ·
Targets
shown as dashed lines
</Text
>
<View
>
{
TEAMS
.
map
(
(
team
,
index
)
=>
(
<View
key
=
{
team
.
id
}
style
=
{
{
marginBottom
:
index
===
TEAMS
.
length
-
1
?
0
:
16
}
}
>
<Text
style
=
{
{
fontSize
:
13
,
fontWeight
:
'600'
,
marginBottom
:
6
}
}
>
{
team
.
name
}
</Text
>
<SparklineChart
height
=
{
76
}
data
=
{
team
.
data
}
color
=
{
team
.
color
}
smooth
fill
fillOpacity
=
{
0.08
}
domain
=
{
{
y
:
[
0
,
9
]
}
}
highlightLast
highlightExtrema
=
{
{
showMin
:
true
,
showMax
:
true
,
color
:
team
.
color
,
radius
:
4
,
strokeColor
:
'#FFFFFF'
,
strokeWidth
:
1.2
}
}
thresholds
=
{
[
{
value
:
team
.
target
,
label
:
`${team.target} target`
,
dashed
:
true
,
color
:
'#94A3B8'
,
opacity
:
0.85
,
labelPosition
:
'right'
}
]
}
bands
=
{
[
{
from
:
team
.
target
-
0.5
,
to
:
team
.
target
+
1
,
color
:
'#CBD5F5'
,
opacity
:
0.16
}
]
}
animation
=
{
{
duration
:
420
,
easing
:
'easeOutQuad'
}
}
valueFormatter
=
{
(
value
)
=>
`${Math.round(value)} deploys`
}
/>
</View
>
)
)
}
</View
>
</View
>
)
;
}
</>
react-ui-library
100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.
A Platform Blocks product.
Quick Links
Resources