@checkstack/ui 0.4.0 → 0.4.1
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/CHANGELOG.md +16 -0
- package/package.json +1 -1
- package/src/components/DateRangeFilter.tsx +25 -18
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @checkstack/ui
|
|
2
2
|
|
|
3
|
+
## 0.4.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 538e45d: Fixed 24-hour date range not returning correct data and improved chart display
|
|
8
|
+
|
|
9
|
+
- Fixed missing `endDate` parameter in raw data queries causing data to extend beyond selected time range
|
|
10
|
+
- Fixed incorrect 24-hour date calculation using `setHours()` - now uses `date-fns` `subHours()` for correct date math
|
|
11
|
+
- Refactored `DateRangePreset` from string union to enum for improved type safety and IDE support
|
|
12
|
+
- Exported `getPresetRange` function for reuse across components
|
|
13
|
+
- Changed chart x-axis domain from `["auto", "auto"]` to `["dataMin", "dataMax"]` to remove padding gaps
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [db1f56f]
|
|
16
|
+
- @checkstack/common@0.6.0
|
|
17
|
+
- @checkstack/frontend-api@0.3.3
|
|
18
|
+
|
|
3
19
|
## 0.4.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -9,7 +9,12 @@ export interface DateRange {
|
|
|
9
9
|
endDate: Date;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
export
|
|
12
|
+
export enum DateRangePreset {
|
|
13
|
+
Last24Hours = "24h",
|
|
14
|
+
Last7Days = "7d",
|
|
15
|
+
Last30Days = "30d",
|
|
16
|
+
Custom = "custom",
|
|
17
|
+
}
|
|
13
18
|
|
|
14
19
|
export interface DateRangeFilterProps {
|
|
15
20
|
value: DateRange;
|
|
@@ -18,25 +23,25 @@ export interface DateRangeFilterProps {
|
|
|
18
23
|
}
|
|
19
24
|
|
|
20
25
|
const PRESETS: Array<{ id: DateRangePreset; label: string }> = [
|
|
21
|
-
{ id:
|
|
22
|
-
{ id:
|
|
23
|
-
{ id:
|
|
24
|
-
{ id:
|
|
26
|
+
{ id: DateRangePreset.Last24Hours, label: "Last 24h" },
|
|
27
|
+
{ id: DateRangePreset.Last7Days, label: "Last 7 days" },
|
|
28
|
+
{ id: DateRangePreset.Last30Days, label: "Last 30 days" },
|
|
29
|
+
{ id: DateRangePreset.Custom, label: "Custom" },
|
|
25
30
|
];
|
|
26
31
|
|
|
27
|
-
function getPresetRange(preset: DateRangePreset): DateRange {
|
|
32
|
+
export function getPresetRange(preset: DateRangePreset): DateRange {
|
|
28
33
|
const now = new Date();
|
|
29
34
|
switch (preset) {
|
|
30
|
-
case
|
|
35
|
+
case DateRangePreset.Last24Hours: {
|
|
31
36
|
return { startDate: subHours(now, 24), endDate: now };
|
|
32
37
|
}
|
|
33
|
-
case
|
|
38
|
+
case DateRangePreset.Last7Days: {
|
|
34
39
|
return { startDate: startOfDay(subDays(now, 7)), endDate: now };
|
|
35
40
|
}
|
|
36
|
-
case
|
|
41
|
+
case DateRangePreset.Last30Days: {
|
|
37
42
|
return { startDate: startOfDay(subDays(now, 30)), endDate: now };
|
|
38
43
|
}
|
|
39
|
-
case
|
|
44
|
+
case DateRangePreset.Custom: {
|
|
40
45
|
return { startDate: startOfDay(subDays(now, 7)), endDate: now };
|
|
41
46
|
}
|
|
42
47
|
}
|
|
@@ -48,10 +53,10 @@ function detectPreset(range: DateRange): DateRangePreset {
|
|
|
48
53
|
const diffHours = diffMs / (1000 * 60 * 60);
|
|
49
54
|
const diffDays = diffHours / 24;
|
|
50
55
|
|
|
51
|
-
if (diffHours <= 25 && diffHours >= 23) return
|
|
52
|
-
if (diffDays <= 8 && diffDays >= 6) return
|
|
53
|
-
if (diffDays <= 31 && diffDays >= 29) return
|
|
54
|
-
return
|
|
56
|
+
if (diffHours <= 25 && diffHours >= 23) return DateRangePreset.Last24Hours;
|
|
57
|
+
if (diffDays <= 8 && diffDays >= 6) return DateRangePreset.Last7Days;
|
|
58
|
+
if (diffDays <= 31 && diffDays >= 29) return DateRangePreset.Last30Days;
|
|
59
|
+
return DateRangePreset.Custom;
|
|
55
60
|
}
|
|
56
61
|
|
|
57
62
|
/**
|
|
@@ -63,10 +68,12 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
|
|
|
63
68
|
className,
|
|
64
69
|
}) => {
|
|
65
70
|
const activePreset = useMemo(() => detectPreset(value), [value]);
|
|
66
|
-
const [showCustom, setShowCustom] = useState(
|
|
71
|
+
const [showCustom, setShowCustom] = useState(
|
|
72
|
+
activePreset === DateRangePreset.Custom,
|
|
73
|
+
);
|
|
67
74
|
|
|
68
75
|
const handlePresetClick = (preset: DateRangePreset) => {
|
|
69
|
-
if (preset ===
|
|
76
|
+
if (preset === DateRangePreset.Custom) {
|
|
70
77
|
setShowCustom(true);
|
|
71
78
|
} else {
|
|
72
79
|
setShowCustom(false);
|
|
@@ -88,7 +95,7 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
|
|
|
88
95
|
variant={
|
|
89
96
|
activePreset === preset.id && !showCustom
|
|
90
97
|
? "primary"
|
|
91
|
-
: preset.id ===
|
|
98
|
+
: preset.id === DateRangePreset.Custom && showCustom
|
|
92
99
|
? "primary"
|
|
93
100
|
: "outline"
|
|
94
101
|
}
|
|
@@ -132,5 +139,5 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
|
|
|
132
139
|
|
|
133
140
|
/** Create a default date range (last 7 days) */
|
|
134
141
|
export function getDefaultDateRange(): DateRange {
|
|
135
|
-
return getPresetRange(
|
|
142
|
+
return getPresetRange(DateRangePreset.Last7Days);
|
|
136
143
|
}
|