@litemetrics/ui 0.1.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.
Files changed (12) hide show
  1. package/README.md +169 -0
  2. package/dist/WorldMapInner-AJ3WDZR2.js +46 -0
  3. package/dist/WorldMapInner-AJ3WDZR2.js.map +1 -0
  4. package/dist/chunk-CBT6H723.js +192 -0
  5. package/dist/chunk-CBT6H723.js.map +1 -0
  6. package/dist/index.cjs +1360 -0
  7. package/dist/index.cjs.map +1 -0
  8. package/dist/index.d.cts +269 -0
  9. package/dist/index.d.ts +269 -0
  10. package/dist/index.js +1050 -0
  11. package/dist/index.js.map +1 -0
  12. package/package.json +74 -0
package/dist/index.d.ts ADDED
@@ -0,0 +1,269 @@
1
+ import { LitemetricsClient } from '@litemetrics/client';
2
+ import { Period, Metric, QueryResult, TimeSeriesResult, QueryDataPoint } from '@litemetrics/core';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import * as react from 'react';
5
+ import { ReactNode } from 'react';
6
+ import * as _tanstack_react_query from '@tanstack/react-query';
7
+ import { QueryClient } from '@tanstack/react-query';
8
+
9
+ type TopListType = 'pages' | 'referrers' | 'countries' | 'events' | 'browsers' | 'devices';
10
+ type ChartMetric = 'pageviews' | 'visitors' | 'sessions';
11
+
12
+ interface LitemetricsTheme {
13
+ bg?: string;
14
+ bgSecondary?: string;
15
+ bgTertiary?: string;
16
+ border?: string;
17
+ borderHover?: string;
18
+ text?: string;
19
+ textSecondary?: string;
20
+ textTertiary?: string;
21
+ textMuted?: string;
22
+ accent?: string;
23
+ accentLight?: string;
24
+ accentText?: string;
25
+ accentHover?: string;
26
+ positive?: string;
27
+ negative?: string;
28
+ chartStroke?: string;
29
+ chartFill?: string;
30
+ chartGrid?: string;
31
+ chartAxis?: string;
32
+ tooltipBg?: string;
33
+ tooltipText?: string;
34
+ tooltipMuted?: string;
35
+ bar?: string;
36
+ barHover?: string;
37
+ pie1?: string;
38
+ pie2?: string;
39
+ pie3?: string;
40
+ pie4?: string;
41
+ pie5?: string;
42
+ pie6?: string;
43
+ pie7?: string;
44
+ pie8?: string;
45
+ mapEmpty?: string;
46
+ mapStroke?: string;
47
+ mapHover?: string;
48
+ }
49
+ declare const defaultTheme: Required<LitemetricsTheme>;
50
+ declare const darkTheme: Required<LitemetricsTheme>;
51
+
52
+ interface LitemetricsUIContextValue {
53
+ client: LitemetricsClient;
54
+ siteId: string;
55
+ period: Period;
56
+ setPeriod: (period: Period) => void;
57
+ dateFrom: string;
58
+ setDateFrom: (date: string) => void;
59
+ dateTo: string;
60
+ setDateTo: (date: string) => void;
61
+ staleTime: number;
62
+ }
63
+
64
+ interface LitemetricsProviderProps {
65
+ baseUrl: string;
66
+ siteId: string;
67
+ secretKey?: string;
68
+ defaultPeriod?: Period;
69
+ queryClient?: QueryClient;
70
+ staleTime?: number;
71
+ theme?: Partial<LitemetricsTheme>;
72
+ darkTheme?: Partial<LitemetricsTheme>;
73
+ children: ReactNode;
74
+ }
75
+ declare function LitemetricsProvider({ baseUrl, siteId, secretKey, defaultPeriod, queryClient: externalQueryClient, staleTime, theme, darkTheme: darkThemeProp, children, }: LitemetricsProviderProps): react_jsx_runtime.JSX.Element;
76
+
77
+ declare const queryKeys: {
78
+ stats: (siteId: string, metric: string, period: string, dateFrom?: string, dateTo?: string) => readonly ["litemetrics-ui", "stats", string, string, string, string | undefined, string | undefined];
79
+ timeSeries: (siteId: string, metric: string, period: string) => readonly ["litemetrics-ui", "timeSeries", string, string, string];
80
+ overview: (siteId: string, period: string, dateFrom?: string, dateTo?: string) => readonly ["litemetrics-ui", "overview", string, string, string | undefined, string | undefined];
81
+ worldMap: (siteId: string, period: string) => readonly ["litemetrics-ui", "worldMap", string, string];
82
+ };
83
+
84
+ declare function useLitemetricsUI(): LitemetricsUIContextValue;
85
+
86
+ interface UseStatsOptions {
87
+ period?: Period;
88
+ limit?: number;
89
+ enabled?: boolean;
90
+ }
91
+ declare function useStats(metric: Metric, options?: UseStatsOptions): _tanstack_react_query.UseQueryResult<QueryResult, Error>;
92
+
93
+ interface UseTimeSeriesOptions {
94
+ period?: Period;
95
+ enabled?: boolean;
96
+ }
97
+ declare function useTimeSeries(metric: ChartMetric, options?: UseTimeSeriesOptions): _tanstack_react_query.UseQueryResult<TimeSeriesResult, Error>;
98
+
99
+ interface UseOverviewOptions {
100
+ period?: Period;
101
+ metrics?: Metric[];
102
+ enabled?: boolean;
103
+ }
104
+ declare function useOverview(options?: UseOverviewOptions): _tanstack_react_query.UseQueryResult<Record<Metric, QueryResult>, Error>;
105
+
106
+ /**
107
+ * Hook that re-renders when the `<html>` element's class list changes (e.g. dark mode toggle).
108
+ * Returns a `get()` helper that reads CSS custom properties as rgb() strings — perfect for
109
+ * Recharts / SVG attributes that require concrete color values rather than Tailwind classes.
110
+ */
111
+ declare function useThemeColors(): {
112
+ get: (varName: string, fallback?: string) => string;
113
+ };
114
+
115
+ interface StatCardProps {
116
+ title: string;
117
+ value: number | string;
118
+ loading?: boolean;
119
+ previousValue?: number;
120
+ changePercent?: number;
121
+ className?: string;
122
+ }
123
+ declare function StatCard({ title, value, loading, changePercent, className }: StatCardProps): react_jsx_runtime.JSX.Element;
124
+
125
+ interface TopListProps {
126
+ title: string;
127
+ data: QueryDataPoint[] | null;
128
+ loading?: boolean;
129
+ type?: TopListType;
130
+ className?: string;
131
+ }
132
+ declare function TopList({ title, data, loading, type, className }: TopListProps): react_jsx_runtime.JSX.Element;
133
+
134
+ interface PieChartCardProps {
135
+ title: string;
136
+ data: {
137
+ name: string;
138
+ value: number;
139
+ }[];
140
+ loading?: boolean;
141
+ className?: string;
142
+ }
143
+ declare function PieChartCard({ title, data, loading, className }: PieChartCardProps): react_jsx_runtime.JSX.Element;
144
+
145
+ interface PeriodSelectorProps {
146
+ value: Period;
147
+ onChange: (period: Period) => void;
148
+ dateFrom?: string;
149
+ dateTo?: string;
150
+ onDateFromChange?: (date: string) => void;
151
+ onDateToChange?: (date: string) => void;
152
+ className?: string;
153
+ }
154
+ declare function PeriodSelector({ value, onChange, dateFrom, dateTo, onDateFromChange, onDateToChange, className }: PeriodSelectorProps): react_jsx_runtime.JSX.Element;
155
+
156
+ interface DateRangePickerProps {
157
+ startDate: string;
158
+ endDate: string;
159
+ onStartChange: (date: string) => void;
160
+ onEndChange: (date: string) => void;
161
+ className?: string;
162
+ }
163
+ declare function DateRangePicker({ startDate, endDate, onStartChange, onEndChange, className }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
164
+
165
+ interface ExportButtonProps {
166
+ data: Record<string, unknown>[];
167
+ filename: string;
168
+ className?: string;
169
+ }
170
+ declare function ExportButton({ data, filename, className }: ExportButtonProps): react_jsx_runtime.JSX.Element | null;
171
+
172
+ interface StatCardsProps {
173
+ period?: Period;
174
+ className?: string;
175
+ }
176
+ declare function StatCards({ period, className }: StatCardsProps): react_jsx_runtime.JSX.Element;
177
+
178
+ interface TimeSeriesChartProps {
179
+ defaultMetric?: ChartMetric;
180
+ period?: Period;
181
+ className?: string;
182
+ }
183
+ declare function TimeSeriesChart({ defaultMetric, period: periodProp, className }: TimeSeriesChartProps): react_jsx_runtime.JSX.Element;
184
+
185
+ interface TopPagesProps {
186
+ period?: Period;
187
+ limit?: number;
188
+ className?: string;
189
+ }
190
+ declare function TopPages({ period, limit, className }: TopPagesProps): react_jsx_runtime.JSX.Element;
191
+
192
+ interface TopReferrersProps {
193
+ period?: Period;
194
+ limit?: number;
195
+ className?: string;
196
+ }
197
+ declare function TopReferrers({ period, limit, className }: TopReferrersProps): react_jsx_runtime.JSX.Element;
198
+
199
+ interface TopCountriesProps {
200
+ period?: Period;
201
+ limit?: number;
202
+ className?: string;
203
+ }
204
+ declare function TopCountries({ period, limit, className }: TopCountriesProps): react_jsx_runtime.JSX.Element;
205
+
206
+ interface TopEventsProps {
207
+ period?: Period;
208
+ limit?: number;
209
+ className?: string;
210
+ }
211
+ declare function TopEvents({ period, limit, className }: TopEventsProps): react_jsx_runtime.JSX.Element;
212
+
213
+ interface TopBrowsersProps {
214
+ period?: Period;
215
+ limit?: number;
216
+ className?: string;
217
+ }
218
+ declare function TopBrowsers({ period, limit, className }: TopBrowsersProps): react_jsx_runtime.JSX.Element;
219
+
220
+ interface TopDevicesProps {
221
+ period?: Period;
222
+ limit?: number;
223
+ className?: string;
224
+ }
225
+ declare function TopDevices({ period, limit, className }: TopDevicesProps): react_jsx_runtime.JSX.Element;
226
+
227
+ interface BrowsersChartProps {
228
+ period?: Period;
229
+ className?: string;
230
+ }
231
+ declare function BrowsersChart({ period, className }: BrowsersChartProps): react_jsx_runtime.JSX.Element;
232
+
233
+ interface DevicesChartProps {
234
+ period?: Period;
235
+ className?: string;
236
+ }
237
+ declare function DevicesChart({ period, className }: DevicesChartProps): react_jsx_runtime.JSX.Element;
238
+
239
+ interface WorldMapProps {
240
+ period?: Period;
241
+ className?: string;
242
+ }
243
+ declare const WorldMap: react.NamedExoticComponent<WorldMapProps>;
244
+
245
+ interface AnalyticsDashboardProps {
246
+ showPeriodSelector?: boolean;
247
+ showExport?: boolean;
248
+ showWorldMap?: boolean;
249
+ showPieCharts?: boolean;
250
+ period?: Period;
251
+ className?: string;
252
+ }
253
+ declare function AnalyticsDashboard({ showPeriodSelector, showExport, showWorldMap, showPieCharts, period, className, }: AnalyticsDashboardProps): react_jsx_runtime.JSX.Element;
254
+
255
+ declare function getBrowserIcon(browser: string): React.ReactNode;
256
+ declare function getOSIcon(os: string): React.ReactNode;
257
+ declare function getDeviceIcon(type: string): React.ReactNode;
258
+ declare function getReferrerIcon(referrer: string): React.ReactNode;
259
+ declare function countryToFlag(code: string): string;
260
+
261
+ declare function formatDate(iso: string, period: Period): string;
262
+ declare function formatTooltipDate(iso: string, period: Period): string;
263
+
264
+ /** Read a CSS custom property and return it as an rgb() string for SVG/Recharts use */
265
+ declare function cssVar(name: string, fallback?: string): string;
266
+ /** Read --lm-pie-1..8 CSS variables, returning hex/rgb strings for Recharts Cell fill */
267
+ declare function getPieColors(): string[];
268
+
269
+ export { AnalyticsDashboard, BrowsersChart, type ChartMetric, DateRangePicker, DevicesChart, ExportButton, LitemetricsProvider, type LitemetricsTheme, type LitemetricsUIContextValue, PeriodSelector, PieChartCard, StatCard, StatCards, TimeSeriesChart, TopBrowsers, TopCountries, TopDevices, TopEvents, TopList, type TopListType, TopPages, TopReferrers, WorldMap, countryToFlag, cssVar, darkTheme, defaultTheme, formatDate, formatTooltipDate, getBrowserIcon, getDeviceIcon, getOSIcon, getPieColors, getReferrerIcon, queryKeys, useLitemetricsUI, useOverview, useStats, useThemeColors, useTimeSeries };