@rbxts/uiblox 0.2.0-alpha.33 → 0.2.0-alpha.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/out/ui/packages/index.d.ts +1 -0
- package/out/ui/packages/init.luau +3 -0
- package/out/ui/packages/sparkline/components/Sparkline.d.ts +9 -0
- package/out/ui/packages/sparkline/components/Sparkline.luau +66 -0
- package/out/ui/packages/sparkline/index.d.ts +3 -0
- package/out/ui/packages/sparkline/init.luau +6 -0
- package/out/ui/packages/sparkline/sparklineLayout.d.ts +8 -0
- package/out/ui/packages/sparkline/sparklineLayout.luau +75 -0
- package/package.json +2 -2
|
@@ -24,6 +24,7 @@ export * from "./loadingStroke/index";
|
|
|
24
24
|
export * from "./numberInput/index";
|
|
25
25
|
export * from "./numberRangeEditor/index";
|
|
26
26
|
export * from "./dateRange/index";
|
|
27
|
+
export * from "./sparkline/index";
|
|
27
28
|
export * from "./rectEditor/index";
|
|
28
29
|
export * from "./rayEditor/index";
|
|
29
30
|
export * from "./physicalPropertiesEditor/index";
|
|
@@ -79,6 +79,9 @@ end
|
|
|
79
79
|
for _k, _v in TS.import(script, script, "dateRange") or {} do
|
|
80
80
|
exports[_k] = _v
|
|
81
81
|
end
|
|
82
|
+
for _k, _v in TS.import(script, script, "sparkline") or {} do
|
|
83
|
+
exports[_k] = _v
|
|
84
|
+
end
|
|
82
85
|
for _k, _v in TS.import(script, script, "rectEditor") or {} do
|
|
83
86
|
exports[_k] = _v
|
|
84
87
|
end
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { CustomizedProps } from "../../../../theme/index";
|
|
2
|
+
export interface SparklineProps {
|
|
3
|
+
values: number[];
|
|
4
|
+
width?: number;
|
|
5
|
+
height?: number;
|
|
6
|
+
color?: Color3;
|
|
7
|
+
}
|
|
8
|
+
declare function Sparkline(props: CustomizedProps<Frame, SparklineProps>): JSX.Element;
|
|
9
|
+
export default Sparkline;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
-- Compiled with roblox-ts v3.0.0
|
|
2
|
+
local TS = _G[script]
|
|
3
|
+
local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
|
|
4
|
+
local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
|
|
5
|
+
local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
|
|
6
|
+
local sparklineLayout = TS.import(script, script.Parent.Parent, "sparklineLayout").sparklineLayout
|
|
7
|
+
local function Sparkline(props)
|
|
8
|
+
local _binding = props
|
|
9
|
+
local values = _binding.values
|
|
10
|
+
local width = _binding.width
|
|
11
|
+
if width == nil then
|
|
12
|
+
width = 120
|
|
13
|
+
end
|
|
14
|
+
local height = _binding.height
|
|
15
|
+
if height == nil then
|
|
16
|
+
height = 36
|
|
17
|
+
end
|
|
18
|
+
local color = _binding.color
|
|
19
|
+
local className = _binding.className
|
|
20
|
+
local sx = _binding.sx
|
|
21
|
+
local id = _binding.id
|
|
22
|
+
local ref = _binding.ref
|
|
23
|
+
local _binding_1 = useTheme()
|
|
24
|
+
local theme = _binding_1.theme
|
|
25
|
+
local segments = sparklineLayout(values, width, height)
|
|
26
|
+
local stroke = color or theme.palette.primary.main
|
|
27
|
+
local _attributes = {
|
|
28
|
+
tag = "frame",
|
|
29
|
+
}
|
|
30
|
+
local _condition = id
|
|
31
|
+
if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
|
|
32
|
+
_condition = "Sparkline"
|
|
33
|
+
end
|
|
34
|
+
_attributes.key = _condition
|
|
35
|
+
_attributes.hostRef = ref
|
|
36
|
+
_attributes.base = {
|
|
37
|
+
Size = UDim2.fromOffset(width, height),
|
|
38
|
+
BackgroundTransparency = 1,
|
|
39
|
+
BorderSizePixel = 0,
|
|
40
|
+
ClipsDescendants = true,
|
|
41
|
+
}
|
|
42
|
+
_attributes.className = className
|
|
43
|
+
_attributes.sx = sx
|
|
44
|
+
-- ▼ ReadonlyArray.map ▼
|
|
45
|
+
local _newValue = table.create(#segments)
|
|
46
|
+
local _callback = function(segment, index)
|
|
47
|
+
return React.createElement("frame", {
|
|
48
|
+
key = `s-{index}`,
|
|
49
|
+
AnchorPoint = Vector2.new(0.5, 0.5),
|
|
50
|
+
Position = UDim2.fromOffset(segment.x, segment.y),
|
|
51
|
+
Size = UDim2.fromOffset(segment.length, 2),
|
|
52
|
+
Rotation = segment.rotation,
|
|
53
|
+
BackgroundColor3 = stroke,
|
|
54
|
+
BorderSizePixel = 0,
|
|
55
|
+
})
|
|
56
|
+
end
|
|
57
|
+
for _k, _v in segments do
|
|
58
|
+
_newValue[_k] = _callback(_v, _k - 1, segments)
|
|
59
|
+
end
|
|
60
|
+
-- ▲ ReadonlyArray.map ▲
|
|
61
|
+
return React.createElement(SxHost, _attributes, _newValue)
|
|
62
|
+
end
|
|
63
|
+
local default = Sparkline
|
|
64
|
+
return {
|
|
65
|
+
default = default,
|
|
66
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface SparkSegment {
|
|
2
|
+
x: number;
|
|
3
|
+
y: number;
|
|
4
|
+
length: number;
|
|
5
|
+
rotation: number;
|
|
6
|
+
}
|
|
7
|
+
/** Line segments for a number series. Empty and single-point series draw nothing. */
|
|
8
|
+
export declare function sparklineLayout(values: number[], width: number, height: number, pad?: number): SparkSegment[];
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
-- Compiled with roblox-ts v3.0.0
|
|
2
|
+
--* Line segments for a number series. Empty and single-point series draw nothing.
|
|
3
|
+
local function sparklineLayout(values, width, height, pad)
|
|
4
|
+
if pad == nil then
|
|
5
|
+
pad = 4
|
|
6
|
+
end
|
|
7
|
+
local count = #values
|
|
8
|
+
if count < 2 or width <= pad * 2 or height <= pad * 2 then
|
|
9
|
+
return {}
|
|
10
|
+
end
|
|
11
|
+
local min = values[1]
|
|
12
|
+
local max = values[1]
|
|
13
|
+
for _, value in values do
|
|
14
|
+
if value < min then
|
|
15
|
+
min = value
|
|
16
|
+
end
|
|
17
|
+
if value > max then
|
|
18
|
+
max = value
|
|
19
|
+
end
|
|
20
|
+
end
|
|
21
|
+
local span = math.max(max - min, 1)
|
|
22
|
+
local innerW = width - pad * 2
|
|
23
|
+
local innerH = height - pad * 2
|
|
24
|
+
local step = innerW / (count - 1)
|
|
25
|
+
local points = {}
|
|
26
|
+
do
|
|
27
|
+
local index = 0
|
|
28
|
+
local _shouldIncrement = false
|
|
29
|
+
while true do
|
|
30
|
+
if _shouldIncrement then
|
|
31
|
+
index += 1
|
|
32
|
+
else
|
|
33
|
+
_shouldIncrement = true
|
|
34
|
+
end
|
|
35
|
+
if not (index < count) then
|
|
36
|
+
break
|
|
37
|
+
end
|
|
38
|
+
local _arg0 = {
|
|
39
|
+
x = pad + index * step,
|
|
40
|
+
y = pad + (1 - (values[index + 1] - min) / span) * innerH,
|
|
41
|
+
}
|
|
42
|
+
table.insert(points, _arg0)
|
|
43
|
+
end
|
|
44
|
+
end
|
|
45
|
+
local segments = {}
|
|
46
|
+
do
|
|
47
|
+
local index = 0
|
|
48
|
+
local _shouldIncrement = false
|
|
49
|
+
while true do
|
|
50
|
+
if _shouldIncrement then
|
|
51
|
+
index += 1
|
|
52
|
+
else
|
|
53
|
+
_shouldIncrement = true
|
|
54
|
+
end
|
|
55
|
+
if not (index < count - 1) then
|
|
56
|
+
break
|
|
57
|
+
end
|
|
58
|
+
local start = points[index + 1]
|
|
59
|
+
local finish = points[index + 2]
|
|
60
|
+
local dx = finish.x - start.x
|
|
61
|
+
local dy = finish.y - start.y
|
|
62
|
+
local _arg0 = {
|
|
63
|
+
x = (start.x + finish.x) / 2,
|
|
64
|
+
y = (start.y + finish.y) / 2,
|
|
65
|
+
length = math.sqrt(dx * dx + dy * dy),
|
|
66
|
+
rotation = math.deg(math.atan2(dy, dx)),
|
|
67
|
+
}
|
|
68
|
+
table.insert(segments, _arg0)
|
|
69
|
+
end
|
|
70
|
+
end
|
|
71
|
+
return segments
|
|
72
|
+
end
|
|
73
|
+
return {
|
|
74
|
+
sparklineLayout = sparklineLayout,
|
|
75
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rbxts/uiblox",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.34",
|
|
4
4
|
"description": "UI Library and theming for roblox-ts projects",
|
|
5
5
|
"main": "out/init.luau",
|
|
6
6
|
"packageManager": "pnpm@11.3.0",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"build": "rbxtsc",
|
|
9
9
|
"watch": "rbxtsc -w",
|
|
10
10
|
"pack:check": "node scripts/pack-check.mjs",
|
|
11
|
-
"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/resolve-sx.check.mjs && node --experimental-strip-types scripts/sx-prop.check.mjs && node --experimental-strip-types scripts/style-system.check.mjs && node --experimental-strip-types scripts/host-sx.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node scripts/state-matrix-registers.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/input.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/viewport-observer.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/flex-item.check.mjs && node --experimental-strip-types scripts/grid.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/scroll-view.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/markdown.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/date-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
|
|
11
|
+
"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/resolve-sx.check.mjs && node --experimental-strip-types scripts/sx-prop.check.mjs && node --experimental-strip-types scripts/style-system.check.mjs && node --experimental-strip-types scripts/host-sx.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node scripts/state-matrix-registers.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/input.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/viewport-observer.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/flex-item.check.mjs && node --experimental-strip-types scripts/grid.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/scroll-view.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/markdown.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/date-range.check.mjs && node --experimental-strip-types scripts/sparkline.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
|
|
12
12
|
"prepublishOnly": "pnpm build"
|
|
13
13
|
},
|
|
14
14
|
"keywords": [
|