tempest-react-sdk 0.10.0 → 0.12.0
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/README.md +57 -27
- package/dist/charts.cjs +2 -0
- package/dist/charts.cjs.map +1 -0
- package/dist/charts.d.ts +139 -0
- package/dist/charts.js +196 -0
- package/dist/charts.js.map +1 -0
- package/dist/cn-C0Sxc9eb.js +19 -0
- package/dist/cn-C0Sxc9eb.js.map +1 -0
- package/dist/cn-CNScIEB4.cjs +2 -0
- package/dist/cn-CNScIEB4.cjs.map +1 -0
- package/dist/editor.cjs +2 -0
- package/dist/editor.cjs.map +1 -0
- package/dist/editor.d.ts +28 -0
- package/dist/editor.js +190 -0
- package/dist/editor.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/tempest-react-sdk.cjs +3 -3
- package/dist/tempest-react-sdk.cjs.map +1 -1
- package/dist/tempest-react-sdk.d.ts +1001 -0
- package/dist/tempest-react-sdk.js +4326 -2983
- package/dist/tempest-react-sdk.js.map +1 -1
- package/dist/vision.cjs +2 -0
- package/dist/vision.cjs.map +1 -0
- package/dist/vision.d.ts +1030 -0
- package/dist/vision.js +1416 -0
- package/dist/vision.js.map +1 -0
- package/package.json +38 -1
package/README.md
CHANGED
|
@@ -193,33 +193,63 @@ The styles ship hashed under the `tempest_` namespace — they do **not** collid
|
|
|
193
193
|
|
|
194
194
|
Every module is re-exported from the package root — `import { Button, useDebounce, createApiClient } from "tempest-react-sdk"` always works.
|
|
195
195
|
|
|
196
|
-
| Module
|
|
197
|
-
|
|
|
198
|
-
| `components`
|
|
199
|
-
| `hooks`
|
|
200
|
-
| `http`
|
|
201
|
-
| `auth` _(peer: `zustand`)_
|
|
202
|
-
| `query` _(peer: `@tanstack/react-query`)_
|
|
203
|
-
| `router` _(dep: `react-router-dom`)_
|
|
204
|
-
| `store` _(dep: `zustand`)_
|
|
205
|
-
| `app`
|
|
206
|
-
| `vite` _(subpath `tempest-react-sdk/vite`)_
|
|
207
|
-
| `forms` _(peer: `zod`, `react-hook-form`)_
|
|
208
|
-
| `sse`
|
|
209
|
-
| `ws`
|
|
210
|
-
| `push`
|
|
211
|
-
| `sw` _(also subpath `tempest-react-sdk/sw`)_
|
|
212
|
-
| `
|
|
213
|
-
| `
|
|
214
|
-
| `
|
|
215
|
-
| `
|
|
216
|
-
| `
|
|
217
|
-
| `
|
|
218
|
-
| `
|
|
219
|
-
| `
|
|
220
|
-
| `
|
|
221
|
-
| `
|
|
222
|
-
|
|
|
196
|
+
| Module | Exports |
|
|
197
|
+
| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
198
|
+
| `components` | `Avatar`, `Badge`, `Breadcrumbs`, `Button`, `Card`, `Checkbox`, `ChipInput`, `ConfirmDialog`, `Container`, `DatePicker`, `Drawer`, `EmptyState`, `ErrorState`, `FileUpload`, `Form` (`FormSection`, `FormRow`, `FormActions`), `Grid`, `Input`, `Modal`, `Pagination`, `Progress`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `Skeleton`, `Spinner`, `Stack`, `Stepper`, `Switch`, `Table`, `Tabs`, `Textarea`, `Toast` (`ToastProvider`, `useToast`), `Tooltip`, `VirtualList` |
|
|
199
|
+
| `hooks` | `useDebounce`, `usePagination`, `useClientFilter`, `useMediaQuery`, `useOnline`, `useDocumentVisibility`, `useIntersectionObserver`, `useResizeObserver`, `useClipboard`, `useKeyboardShortcut`, `useBeforeInstallPrompt`, `useIdle`, `useGeolocation`, `useScrollLock`, `useFocusTrap`, `useStableCallback`, `useDeepMemo` |
|
|
200
|
+
| `http` | `createApiClient`, `parseResponse`, `uploadWithProgress`, `retry`, `generateIdempotencyKey`, `usePoll`, types: `ApiClient`, `ApiClientConfig`, `ApiError`, `RequestOptions`, `RetryOptions`, `UploadProgressEvent`, `UploadWithProgressOptions`, `UsePollOptions`, `UsePollResult` |
|
|
201
|
+
| `auth` _(peer: `zustand`)_ | `createAuthStore`, `AuthGuard`, `decodeJWT`, `isJWTExpired`, `lazyWithRetry`, `createRefreshQueue`, types: `AuthState`, `CreateAuthStoreOptions`, `AuthGuardProps`, `DecodedJWT`, `LazyWithRetryOptions` |
|
|
202
|
+
| `query` _(peer: `@tanstack/react-query`)_ | `QueryProvider`, `createQueryKeys`, `STALE_TIME`, `CACHE_TIME`, `REFETCH_TIME` |
|
|
203
|
+
| `router` _(dep: `react-router-dom`)_ | `defineRoutes`, `AppRouter`, `RouteGuard`, + re-exports (`Link`, `NavLink`, `Outlet`, `Navigate`, `useNavigate`, `useParams`, `useSearchParams`, `useLocation`, `useMatch`, `useRouteError`, `redirect`, `BrowserRouter`/`HashRouter`/`MemoryRouter`/`Routes`/`Route`), types: `TempestRouteObject`, `RouterKind`, `AppRouterProps`, `RouteGuardProps` |
|
|
204
|
+
| `store` _(dep: `zustand`)_ | `createStore`, `createSelectors`, types: `CreateStoreOptions`, `CreateStorePersistOptions`, `WithSelectors` |
|
|
205
|
+
| `app` | `AppProviders` (composes `ErrorBoundary` → `QueryProvider` → `ThemeProvider` → `I18nProvider`), type: `AppProvidersProps` |
|
|
206
|
+
| `vite` _(subpath `tempest-react-sdk/vite`)_ | `createViteConfig`, `tempestPwaManifest` (emits `precache-manifest.json` for offline precache), `tempestPwaIcons` (generates the PNG icon set from one SVG via `sharp`), `tempestPwaDevSw` (serves the SW under `npm run dev`), `tempestPwaIcons({ appleSplash })` (Apple splash screens), types: `CreateViteConfigOptions`, `ProxyEntry`, `TempestViteConfig`, `TempestPwaManifestOptions`, `TempestPwaIconsOptions`, `TempestPwaDevSwOptions`, `AppleSplashSpec`, `TempestVitePlugin` |
|
|
207
|
+
| `forms` _(peer: `zod`, `react-hook-form`)_ | `validateForm`, `zodResolver`, `useZodForm`, `validateCPF`, `validateCNPJ`, `formatCEP`, `formatCNPJ`, `unmask`, `CPFInput`, `CNPJInput`, `PhoneInput`, `CEPInput`, `MoneyInput`, `useViaCEP` |
|
|
208
|
+
| `sse` | `createEventStream`, `useEventStream` |
|
|
209
|
+
| `ws` | `createWebSocket`, `useWebSocket` |
|
|
210
|
+
| `push` | `WebPushClient`, `WebPushUnsupportedError`, `WebPushPermissionDeniedError`, `usePushSubscription`, `urlBase64ToUint8Array`, `isPushSupported` |
|
|
211
|
+
| `sw` _(also subpath `tempest-react-sdk/sw`)_ | `registerServiceWorker`, `skipWaiting`, `unregisterAllServiceWorkers`, `installPushHandler`, `installNotificationClickHandler`, `installSkipWaitingListener`, `installPrecache` (app-shell offline), `installRuntimeCache` (per-route caching, incl. `rangeRequests`), `createPartialResponse` (206 range slicing), `installBackgroundSync` (offline mutation queue) — the React-free `tempest-react-sdk/sw` subpath is ideal for bundling into your own `sw.ts` |
|
|
212
|
+
| `charts` _(subpath `tempest-react-sdk/charts`, opt. peer `recharts`)_ | `AreaChart`, `BarChart`, `LineChart`, `PieChart`, `RadarChart`, `DEFAULT_CHART_COLORS` — themed recharts wrappers (recharts externalized; install it only if you use charts) |
|
|
213
|
+
| `audio` | `createAudioPlayer`, `playAudio`, `stopAudio`, `useAudio` |
|
|
214
|
+
| `offline` _(peer: `dexie`)_ | `createOfflineStore`, types: `OfflineStore`, `OfflineStoreConfig`, `ListOptions` |
|
|
215
|
+
| `error-boundary` | `ErrorBoundary`, `useErrorHandler`, types: `ErrorBoundaryProps`, `ErrorBoundaryRenderProps` |
|
|
216
|
+
| `theme` | `ThemeProvider`, `useTheme`, `getInitialTheme`, `themeInitScript`, types: `ThemeMode`, `ResolvedTheme` |
|
|
217
|
+
| `i18n` | `createI18n`, `I18nProvider`, `useI18n`, `useTranslate`, types: `Catalog`, `Messages`, `I18n`, `InterpolationValues` |
|
|
218
|
+
| `logger` | `createLogger`, `consoleSink`, types: `Logger`, `LogEntry`, `LogLevel`, `LoggerSink` |
|
|
219
|
+
| `telemetry` | `TelemetryProvider`, `useTelemetry`, `consoleTelemetryAdapter`, `createSentryTelemetryAdapter`, `createPostHogTelemetryAdapter`, types: `TelemetryAdapter`, `TelemetryEvent`, `TelemetryUser`, `CreateSentryTelemetryAdapterOptions`, `SentryLike`, `CreatePostHogTelemetryAdapterOptions`, `PostHogLike` |
|
|
220
|
+
| `feature-flags` | `FeatureFlagsProvider`, `useFeatureFlag`, `useFlagValue`, `createInMemoryFlags`, `createGrowthBookFeatureFlagsAdapter`, `createLaunchDarklyFeatureFlagsAdapter`, types: `FeatureFlagsAdapter`, `FlagValue`, `GrowthBookLike`, `LDClientLike` |
|
|
221
|
+
| `share` | `share`, `isShareSupported`, types: `SharePayload`, `ShareResult` |
|
|
222
|
+
| `utils` | `cn`, format BR (`formatCurrency`, `formatDate`, `formatDateTime`, `formatPhone`, `formatCPF`, `formatPercent`), `storage`, strings (`slugify`, `truncate`, `capitalize`, `camelCase`, `kebabCase`, `pluralize`), numbers (`clamp`, `formatBytes`, `formatCompactNumber`), arrays (`groupBy`, `uniqueBy`, `chunk`, `range`), objects (`pick`, `omit`, `deepMerge`, `isEmpty`), guards (`isDefined`, `isString`, `isNumber`, `isPlainObject`, `assertNever`), functions (`debounce`, `throttle`, `once`, `memoizeOne`), promises (`sleep`, `withTimeout`), `randomId`, `relativeTime` |
|
|
223
|
+
| generic components | display (`CopyButton`, `RelativeTime`, `Money`, `TruncateText`, `VisuallyHidden`), headless (`Portal`, `ClickOutside`, `ConditionalWrapper`, `For`, `ErrorText`), media/content (`Image`, `DataList`, `DescriptionList`) |
|
|
224
|
+
| Module | Exports |
|
|
225
|
+
| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
226
|
+
| `components` | `Avatar`, `Badge`, `Breadcrumbs`, `Button`, `Card`, `Checkbox`, `ChipInput`, `ConfirmDialog`, `Container`, `DatePicker`, `Drawer`, `EmptyState`, `ErrorState`, `FileUpload`, `Form` (`FormSection`, `FormRow`, `FormActions`), `Grid`, `Input`, `Modal`, `Pagination`, `Progress`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `Skeleton`, `Spinner`, `Stack`, `Stepper`, `Switch`, `Table`, `Tabs`, `Textarea`, `Toast` (`ToastProvider`, `useToast`), `Tooltip`, `VirtualList` |
|
|
227
|
+
| `hooks` | `useDebounce`, `usePagination`, `useClientFilter`, `useMediaQuery`, `useOnline`, `useDocumentVisibility`, `useIntersectionObserver`, `useResizeObserver`, `useClipboard`, `useKeyboardShortcut`, `useBeforeInstallPrompt`, `useIdle`, `useGeolocation`, `useScrollLock`, `useFocusTrap`, `useStableCallback`, `useDeepMemo` |
|
|
228
|
+
| `http` | `createApiClient`, `parseResponse`, `uploadWithProgress`, `retry`, `generateIdempotencyKey`, `usePoll`, types: `ApiClient`, `ApiClientConfig`, `ApiError`, `RequestOptions`, `RetryOptions`, `UploadProgressEvent`, `UploadWithProgressOptions`, `UsePollOptions`, `UsePollResult` |
|
|
229
|
+
| `auth` _(peer: `zustand`)_ | `createAuthStore`, `AuthGuard`, `decodeJWT`, `isJWTExpired`, `lazyWithRetry`, `createRefreshQueue`, types: `AuthState`, `CreateAuthStoreOptions`, `AuthGuardProps`, `DecodedJWT`, `LazyWithRetryOptions` |
|
|
230
|
+
| `query` _(peer: `@tanstack/react-query`)_ | `QueryProvider`, `createQueryKeys`, `STALE_TIME`, `CACHE_TIME`, `REFETCH_TIME` |
|
|
231
|
+
| `router` _(dep: `react-router-dom`)_ | `defineRoutes`, `AppRouter`, `RouteGuard`, + re-exports (`Link`, `NavLink`, `Outlet`, `Navigate`, `useNavigate`, `useParams`, `useSearchParams`, `useLocation`, `useMatch`, `useRouteError`, `redirect`, `BrowserRouter`/`HashRouter`/`MemoryRouter`/`Routes`/`Route`), types: `TempestRouteObject`, `RouterKind`, `AppRouterProps`, `RouteGuardProps` |
|
|
232
|
+
| `store` _(dep: `zustand`)_ | `createStore`, `createSelectors`, types: `CreateStoreOptions`, `CreateStorePersistOptions`, `WithSelectors` |
|
|
233
|
+
| `app` | `AppProviders` (composes `ErrorBoundary` → `QueryProvider` → `ThemeProvider` → `I18nProvider`), type: `AppProvidersProps` |
|
|
234
|
+
| `vite` _(subpath `tempest-react-sdk/vite`)_ | `createViteConfig`, `tempestPwaManifest` (emits `precache-manifest.json` for offline precache), `tempestPwaIcons` (generates the PNG icon set from one SVG via `sharp`), `tempestPwaDevSw` (serves the SW under `npm run dev`), `tempestPwaIcons({ appleSplash })` (Apple splash screens), types: `CreateViteConfigOptions`, `ProxyEntry`, `TempestViteConfig`, `TempestPwaManifestOptions`, `TempestPwaIconsOptions`, `TempestPwaDevSwOptions`, `AppleSplashSpec`, `TempestVitePlugin` |
|
|
235
|
+
| `forms` _(peer: `zod`, `react-hook-form`)_ | `validateForm`, `zodResolver`, `useZodForm`, `validateCPF`, `validateCNPJ`, `formatCEP`, `formatCNPJ`, `unmask`, `CPFInput`, `CNPJInput`, `PhoneInput`, `CEPInput`, `MoneyInput`, `useViaCEP` |
|
|
236
|
+
| `sse` | `createEventStream`, `useEventStream` |
|
|
237
|
+
| `ws` | `createWebSocket`, `useWebSocket` |
|
|
238
|
+
| `push` | `WebPushClient`, `WebPushUnsupportedError`, `WebPushPermissionDeniedError`, `usePushSubscription`, `urlBase64ToUint8Array`, `isPushSupported` |
|
|
239
|
+
| `sw` _(also subpath `tempest-react-sdk/sw`)_ | `registerServiceWorker`, `skipWaiting`, `unregisterAllServiceWorkers`, `installPushHandler`, `installNotificationClickHandler`, `installSkipWaitingListener`, `installPrecache` (app-shell offline), `installRuntimeCache` (per-route caching, incl. `rangeRequests`), `createPartialResponse` (206 range slicing), `installBackgroundSync` (offline mutation queue) — the React-free `tempest-react-sdk/sw` subpath is ideal for bundling into your own `sw.ts` |
|
|
240
|
+
| `editor` _(subpath `tempest-react-sdk/editor`, opt. peers `@tiptap/react`+`@tiptap/starter-kit`)_ | `RichTextEditor` — themed tiptap v3 rich-text editor with toolbar (tiptap externalized; install it only if you use the editor) |
|
|
241
|
+
| `vision` _(subpath `tempest-react-sdk/vision`, opt. peer `onnxruntime-web`)_ | `Classifier`, `Detector`, `Segmenter` + results/labels/preprocess — on-device ONNX vision inference, vendored from `@mauriciobenjamin700/ort-vision-sdk-web` (onnxruntime-web externalized; install it only if you use vision) |
|
|
242
|
+
| `audio` | `createAudioPlayer`, `playAudio`, `stopAudio`, `useAudio` |
|
|
243
|
+
| `offline` _(peer: `dexie`)_ | `createOfflineStore`, types: `OfflineStore`, `OfflineStoreConfig`, `ListOptions` |
|
|
244
|
+
| `error-boundary` | `ErrorBoundary`, `useErrorHandler`, types: `ErrorBoundaryProps`, `ErrorBoundaryRenderProps` |
|
|
245
|
+
| `theme` | `ThemeProvider`, `useTheme`, `getInitialTheme`, `themeInitScript`, types: `ThemeMode`, `ResolvedTheme` |
|
|
246
|
+
| `i18n` | `createI18n`, `I18nProvider`, `useI18n`, `useTranslate`, types: `Catalog`, `Messages`, `I18n`, `InterpolationValues` |
|
|
247
|
+
| `logger` | `createLogger`, `consoleSink`, types: `Logger`, `LogEntry`, `LogLevel`, `LoggerSink` |
|
|
248
|
+
| `telemetry` | `TelemetryProvider`, `useTelemetry`, `consoleTelemetryAdapter`, `createSentryTelemetryAdapter`, `createPostHogTelemetryAdapter`, types: `TelemetryAdapter`, `TelemetryEvent`, `TelemetryUser`, `CreateSentryTelemetryAdapterOptions`, `SentryLike`, `CreatePostHogTelemetryAdapterOptions`, `PostHogLike` |
|
|
249
|
+
| `feature-flags` | `FeatureFlagsProvider`, `useFeatureFlag`, `useFlagValue`, `createInMemoryFlags`, `createGrowthBookFeatureFlagsAdapter`, `createLaunchDarklyFeatureFlagsAdapter`, types: `FeatureFlagsAdapter`, `FlagValue`, `GrowthBookLike`, `LDClientLike` |
|
|
250
|
+
| `share` | `share`, `isShareSupported`, types: `SharePayload`, `ShareResult` |
|
|
251
|
+
| `utils` | `cn`, format BR (`formatCurrency`, `formatDate`, `formatDateTime`, `formatPhone`, `formatCPF`, `formatPercent`), `storage`, strings (`slugify`, `truncate`, `capitalize`, `camelCase`, `kebabCase`, `pluralize`), numbers (`clamp`, `formatBytes`, `formatCompactNumber`), arrays (`groupBy`, `uniqueBy`, `chunk`, `range`), objects (`pick`, `omit`, `deepMerge`, `isEmpty`), guards (`isDefined`, `isString`, `isNumber`, `isPlainObject`, `assertNever`), functions (`debounce`, `throttle`, `once`, `memoizeOne`), promises (`sleep`, `withTimeout`), `randomId`, `relativeTime` |
|
|
252
|
+
| generic components | display (`CopyButton`, `RelativeTime`, `Money`, `TruncateText`, `VisuallyHidden`), headless (`Portal`, `ClickOutside`, `ConditionalWrapper`, `For`, `ErrorText`), media/content (`Image`, `DataList`, `DescriptionList`) |
|
|
223
253
|
|
|
224
254
|
Full per-module docs are published as a bilingual MkDocs site on GitHub Pages — **[Português (BR)](https://mauriciobenjamin700.github.io/tempest-react-sdk/)** / **[English (US)](https://mauriciobenjamin700.github.io/tempest-react-sdk/en/)** (one page per module + draw.io diagrams in [`docs/diagrams/`](./docs/diagrams)). The source markdown lives in [`docs/`](./docs) (PT-BR base files + `.en.md` translations).
|
|
225
255
|
|
package/dist/charts.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("recharts"),p=require("./cn-CNScIEB4.cjs"),f=["#2563eb","#16a34a","#f59e0b","#7c3aed","#ec4899","#06b6d4"];function A(a){if(a)return d=>a(Number(d))}function y({data:a,index:d,categories:c,colors:t=f,height:n=300,width:s,stack:j=!1,showLegend:h=!0,showGrid:C=!0,showTooltip:x=!0,valueFormatter:l,className:o}){const u=j?"stack":void 0,i=e.jsxs(r.AreaChart,{data:a,width:s,height:n,children:[C?e.jsx(r.CartesianGrid,{strokeDasharray:"3 3"}):null,e.jsx(r.XAxis,{dataKey:d}),e.jsx(r.YAxis,{tickFormatter:l}),x?e.jsx(r.Tooltip,{formatter:A(l)}):null,h?e.jsx(r.Legend,{}):null,c.map((m,R)=>{const v=t[R%t.length];return e.jsx(r.Area,{type:"monotone",dataKey:m,stackId:u,stroke:v,fill:v,fillOpacity:.3},m)})]});return e.jsx("div",{className:p.cn(o),children:s!==void 0?i:e.jsx(r.ResponsiveContainer,{width:"100%",height:n,children:i})})}function k({data:a,index:d,categories:c,colors:t=f,height:n=300,width:s,stack:j=!1,showLegend:h=!0,showGrid:C=!0,showTooltip:x=!0,valueFormatter:l,className:o}){const u=j?"stack":void 0,i=e.jsxs(r.BarChart,{data:a,width:s,height:n,children:[C?e.jsx(r.CartesianGrid,{strokeDasharray:"3 3"}):null,e.jsx(r.XAxis,{dataKey:d}),e.jsx(r.YAxis,{tickFormatter:l}),x?e.jsx(r.Tooltip,{formatter:A(l)}):null,h?e.jsx(r.Legend,{}):null,c.map((m,R)=>e.jsx(r.Bar,{dataKey:m,stackId:u,fill:t[R%t.length]},m))]});return e.jsx("div",{className:p.cn(o),children:s!==void 0?i:e.jsx(r.ResponsiveContainer,{width:"100%",height:n,children:i})})}function L({data:a,index:d,categories:c,colors:t=f,height:n=300,width:s,showLegend:j=!0,showGrid:h=!0,showTooltip:C=!0,valueFormatter:x,className:l}){const o=e.jsxs(r.LineChart,{data:a,width:s,height:n,children:[h?e.jsx(r.CartesianGrid,{strokeDasharray:"3 3"}):null,e.jsx(r.XAxis,{dataKey:d}),e.jsx(r.YAxis,{tickFormatter:x}),C?e.jsx(r.Tooltip,{formatter:A(x)}):null,j?e.jsx(r.Legend,{}):null,c.map((u,i)=>e.jsx(r.Line,{type:"monotone",dataKey:u,stroke:t[i%t.length],dot:!1},u))]});return e.jsx("div",{className:p.cn(l),children:s!==void 0?o:e.jsx(r.ResponsiveContainer,{width:"100%",height:n,children:o})})}function T({data:a,category:d,index:c,colors:t=f,height:n=300,width:s,donut:j=!1,showLegend:h=!0,showTooltip:C=!0,valueFormatter:x,className:l}){const o=e.jsxs(r.PieChart,{width:s,height:n,children:[C?e.jsx(r.Tooltip,{formatter:A(x)}):null,h?e.jsx(r.Legend,{}):null,e.jsx(r.Pie,{data:a,dataKey:d,nameKey:c,innerRadius:j?"60%":0,outerRadius:"80%",children:a.map((u,i)=>e.jsx(r.Cell,{fill:t[i%t.length]},`${String(u[c])}-${i}`))})]});return e.jsx("div",{className:p.cn(l),children:s!==void 0?o:e.jsx(r.ResponsiveContainer,{width:"100%",height:n,children:o})})}function K({data:a,index:d,categories:c,colors:t=f,height:n=300,width:s,showLegend:j=!0,showTooltip:h=!0,valueFormatter:C,className:x}){const l=e.jsxs(r.RadarChart,{data:a,width:s,height:n,children:[e.jsx(r.PolarGrid,{}),e.jsx(r.PolarAngleAxis,{dataKey:d}),e.jsx(r.PolarRadiusAxis,{}),h?e.jsx(r.Tooltip,{formatter:A(C)}):null,j?e.jsx(r.Legend,{}):null,c.map((o,u)=>{const i=t[u%t.length];return e.jsx(r.Radar,{dataKey:o,stroke:i,fill:i,fillOpacity:.3},o)})]});return e.jsx("div",{className:p.cn(x),children:s!==void 0?l:e.jsx(r.ResponsiveContainer,{width:"100%",height:n,children:l})})}exports.AreaChart=y;exports.BarChart=k;exports.DEFAULT_CHART_COLORS=f;exports.LineChart=L;exports.PieChart=T;exports.RadarChart=K;
|
|
2
|
+
//# sourceMappingURL=charts.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"charts.cjs","sources":["../src/charts/palette.ts","../src/charts/types.ts","../src/charts/AreaChart.tsx","../src/charts/BarChart.tsx","../src/charts/LineChart.tsx","../src/charts/PieChart.tsx","../src/charts/RadarChart.tsx"],"sourcesContent":["/**\n * Default color palette for Tempest charts.\n *\n * A set of six visually distinct hex colors (blue, green, amber, violet, pink,\n * cyan) used to color chart series in cycle order. Exported so callers can\n * import and theme their own charts, or pass a custom `colors` array to any\n * chart component to override it.\n */\nexport const DEFAULT_CHART_COLORS: string[] = [\n \"#2563eb\", // blue\n \"#16a34a\", // green\n \"#f59e0b\", // amber\n \"#7c3aed\", // violet\n \"#ec4899\", // pink\n \"#06b6d4\", // cyan\n];\n","/**\n * Tabular data consumed by every chart: an array of rows, where each row maps a\n * column key to a string (label) or number (value).\n */\nexport type ChartData = Array<Record<string, string | number>>;\n\nimport type {\n Formatter,\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\n\n/**\n * Recharts tooltip formatters receive a loosely-typed value. This adapts a\n * friendly `(value: number) => string` formatter into a recharts `Formatter`,\n * coercing the incoming value to a number first.\n *\n * @param valueFormatter - The user-supplied numeric formatter, if any.\n * @returns A recharts-compatible formatter, or undefined when none was given.\n */\nexport function toTooltipFormatter(\n valueFormatter?: (value: number) => string,\n): Formatter<ValueType, NameType> | undefined {\n if (!valueFormatter) return undefined;\n return (value: ValueType | undefined): string => valueFormatter(Number(value));\n}\n\n/**\n * Shared props for the cartesian chart family (Area, Bar, Line) and Radar.\n *\n * Each chart plots one series per entry in `categories`, reading values from the\n * matching key on every row, and uses `index` for the category axis.\n */\nexport interface CartesianChartProps {\n /** Rows of data to plot. */\n data: ChartData;\n /** Row key used for the x-axis (cartesian) or angle axis (radar). */\n index: string;\n /** Row keys to plot, one series each. */\n categories: string[];\n /** Series colors, cycled per category. Defaults to {@link DEFAULT_CHART_COLORS}. */\n colors?: string[];\n /** Chart height in pixels. Defaults to 300. */\n height?: number;\n /**\n * Fixed chart width in pixels. When set, the chart renders at this explicit\n * width WITHOUT a ResponsiveContainer (useful for tests/SSR). When omitted,\n * the chart fills its parent via a ResponsiveContainer.\n */\n width?: number;\n /** Stack all series on a shared stackId instead of grouping them. */\n stack?: boolean;\n /** Render the legend. Defaults to true. */\n showLegend?: boolean;\n /** Render the cartesian grid. Defaults to true. */\n showGrid?: boolean;\n /** Render the tooltip. Defaults to true. */\n showTooltip?: boolean;\n /** Format numeric values for tooltip/axis display. */\n valueFormatter?: (value: number) => string;\n /** Extra class name applied to the chart wrapper. */\n className?: string;\n}\n\n/**\n * Props for the {@link PieChart} component.\n */\nexport interface PieChartProps {\n /** Rows of data to plot, one slice each. */\n data: ChartData;\n /** Row key holding the numeric slice value. */\n category: string;\n /** Row key holding the slice name/label. */\n index: string;\n /** Slice colors, cycled per slice. Defaults to {@link DEFAULT_CHART_COLORS}. */\n colors?: string[];\n /** Chart height in pixels. Defaults to 300. */\n height?: number;\n /**\n * Fixed chart width in pixels. When set, the chart renders at this explicit\n * width WITHOUT a ResponsiveContainer (useful for tests/SSR).\n */\n width?: number;\n /** Render as a donut (non-zero inner radius) instead of a full pie. */\n donut?: boolean;\n /** Render the legend. Defaults to true. */\n showLegend?: boolean;\n /** Render the tooltip. Defaults to true. */\n showTooltip?: boolean;\n /** Format numeric values for tooltip display. */\n valueFormatter?: (value: number) => string;\n /** Extra class name applied to the chart wrapper. */\n className?: string;\n}\n","import {\n Area,\n AreaChart as RAreaChart,\n CartesianGrid,\n Legend,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * AreaChart — themed wrapper over recharts `AreaChart`.\n *\n * Plots one filled area per entry in `categories`, colored from `colors`\n * (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all\n * areas share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function AreaChart({\n data,\n index,\n categories,\n colors = DEFAULT_CHART_COLORS,\n height = 300,\n width,\n stack = false,\n showLegend = true,\n showGrid = true,\n showTooltip = true,\n valueFormatter,\n className,\n}: CartesianChartProps) {\n const stackId = stack ? \"stack\" : undefined;\n\n const chart = (\n <RAreaChart data={data} width={width} height={height}>\n {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n <XAxis dataKey={index} />\n <YAxis tickFormatter={valueFormatter} />\n {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n {showLegend ? <Legend /> : null}\n {categories.map((category, i) => {\n const color = colors[i % colors.length];\n return (\n <Area\n key={category}\n type=\"monotone\"\n dataKey={category}\n stackId={stackId}\n stroke={color}\n fill={color}\n fillOpacity={0.3}\n />\n );\n })}\n </RAreaChart>\n );\n\n return (\n <div className={cn(className)}>\n {width !== undefined ? (\n chart\n ) : (\n <ResponsiveContainer width=\"100%\" height={height}>\n {chart}\n </ResponsiveContainer>\n )}\n </div>\n );\n}\n","import {\n Bar,\n BarChart as RBarChart,\n CartesianGrid,\n Legend,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * BarChart — themed wrapper over recharts `BarChart`.\n *\n * Plots one bar series per entry in `categories`, colored from `colors`\n * (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all\n * bars share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function BarChart({\n data,\n index,\n categories,\n colors = DEFAULT_CHART_COLORS,\n height = 300,\n width,\n stack = false,\n showLegend = true,\n showGrid = true,\n showTooltip = true,\n valueFormatter,\n className,\n}: CartesianChartProps) {\n const stackId = stack ? \"stack\" : undefined;\n\n const chart = (\n <RBarChart data={data} width={width} height={height}>\n {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n <XAxis dataKey={index} />\n <YAxis tickFormatter={valueFormatter} />\n {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n {showLegend ? <Legend /> : null}\n {categories.map((category, i) => (\n <Bar\n key={category}\n dataKey={category}\n stackId={stackId}\n fill={colors[i % colors.length]}\n />\n ))}\n </RBarChart>\n );\n\n return (\n <div className={cn(className)}>\n {width !== undefined ? (\n chart\n ) : (\n <ResponsiveContainer width=\"100%\" height={height}>\n {chart}\n </ResponsiveContainer>\n )}\n </div>\n );\n}\n","import {\n CartesianGrid,\n Legend,\n Line,\n LineChart as RLineChart,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * LineChart — themed wrapper over recharts `LineChart`.\n *\n * Plots one line per entry in `categories`, colored from `colors` (cycling\n * {@link DEFAULT_CHART_COLORS} by default). `stack` is accepted for API parity\n * but does not visually stack lines. When `width` is provided the chart renders\n * at that fixed size without a ResponsiveContainer; otherwise it fills its\n * parent.\n */\nexport function LineChart({\n data,\n index,\n categories,\n colors = DEFAULT_CHART_COLORS,\n height = 300,\n width,\n showLegend = true,\n showGrid = true,\n showTooltip = true,\n valueFormatter,\n className,\n}: CartesianChartProps) {\n const chart = (\n <RLineChart data={data} width={width} height={height}>\n {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n <XAxis dataKey={index} />\n <YAxis tickFormatter={valueFormatter} />\n {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n {showLegend ? <Legend /> : null}\n {categories.map((category, i) => (\n <Line\n key={category}\n type=\"monotone\"\n dataKey={category}\n stroke={colors[i % colors.length]}\n dot={false}\n />\n ))}\n </RLineChart>\n );\n\n return (\n <div className={cn(className)}>\n {width !== undefined ? (\n chart\n ) : (\n <ResponsiveContainer width=\"100%\" height={height}>\n {chart}\n </ResponsiveContainer>\n )}\n </div>\n );\n}\n","import { Cell, Legend, Pie, PieChart as RPieChart, ResponsiveContainer, Tooltip } from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { PieChartProps } from \"./types\";\n\n/**\n * PieChart — themed wrapper over recharts `PieChart`.\n *\n * Renders one slice per row, reading the numeric value from `category` and the\n * label from `index`. Each slice is colored from `colors` (cycling\n * {@link DEFAULT_CHART_COLORS} by default). When `donut` is set the pie gets a\n * non-zero inner radius. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function PieChart({\n data,\n category,\n index,\n colors = DEFAULT_CHART_COLORS,\n height = 300,\n width,\n donut = false,\n showLegend = true,\n showTooltip = true,\n valueFormatter,\n className,\n}: PieChartProps) {\n const chart = (\n <RPieChart width={width} height={height}>\n {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n {showLegend ? <Legend /> : null}\n <Pie\n data={data}\n dataKey={category}\n nameKey={index}\n innerRadius={donut ? \"60%\" : 0}\n outerRadius=\"80%\"\n >\n {data.map((row, i) => (\n <Cell key={`${String(row[index])}-${i}`} fill={colors[i % colors.length]} />\n ))}\n </Pie>\n </RPieChart>\n );\n\n return (\n <div className={cn(className)}>\n {width !== undefined ? (\n chart\n ) : (\n <ResponsiveContainer width=\"100%\" height={height}>\n {chart}\n </ResponsiveContainer>\n )}\n </div>\n );\n}\n","import {\n Legend,\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n RadarChart as RRadarChart,\n Radar,\n ResponsiveContainer,\n Tooltip,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * RadarChart — themed wrapper over recharts `RadarChart`.\n *\n * Plots one radar polygon per entry in `categories`, colored from `colors`\n * (cycling {@link DEFAULT_CHART_COLORS} by default). `index` drives the angle\n * axis. When `width` is provided the chart renders at that fixed size without a\n * ResponsiveContainer; otherwise it fills its parent.\n */\nexport function RadarChart({\n data,\n index,\n categories,\n colors = DEFAULT_CHART_COLORS,\n height = 300,\n width,\n showLegend = true,\n showTooltip = true,\n valueFormatter,\n className,\n}: CartesianChartProps) {\n const chart = (\n <RRadarChart data={data} width={width} height={height}>\n <PolarGrid />\n <PolarAngleAxis dataKey={index} />\n <PolarRadiusAxis />\n {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n {showLegend ? <Legend /> : null}\n {categories.map((category, i) => {\n const color = colors[i % colors.length];\n return (\n <Radar\n key={category}\n dataKey={category}\n stroke={color}\n fill={color}\n fillOpacity={0.3}\n />\n );\n })}\n </RRadarChart>\n );\n\n return (\n <div className={cn(className)}>\n {width !== undefined ? (\n chart\n ) : (\n <ResponsiveContainer width=\"100%\" height={height}>\n {chart}\n </ResponsiveContainer>\n )}\n </div>\n );\n}\n"],"names":["DEFAULT_CHART_COLORS","toTooltipFormatter","valueFormatter","value","AreaChart","data","index","categories","colors","height","width","stack","showLegend","showGrid","showTooltip","className","stackId","chart","jsxs","RAreaChart","jsx","CartesianGrid","XAxis","YAxis","Tooltip","Legend","category","i","color","Area","cn","ResponsiveContainer","BarChart","RBarChart","Bar","LineChart","RLineChart","Line","PieChart","donut","RPieChart","Pie","row","Cell","RadarChart","RRadarChart","PolarGrid","PolarAngleAxis","PolarRadiusAxis","Radar"],"mappings":"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"}
|
package/dist/charts.d.ts
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { JSX } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* AreaChart — themed wrapper over recharts `AreaChart`.
|
|
5
|
+
*
|
|
6
|
+
* Plots one filled area per entry in `categories`, colored from `colors`
|
|
7
|
+
* (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all
|
|
8
|
+
* areas share a stackId. When `width` is provided the chart renders at that
|
|
9
|
+
* fixed size without a ResponsiveContainer; otherwise it fills its parent.
|
|
10
|
+
*/
|
|
11
|
+
export declare function AreaChart({ data, index, categories, colors, height, width, stack, showLegend, showGrid, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* BarChart — themed wrapper over recharts `BarChart`.
|
|
15
|
+
*
|
|
16
|
+
* Plots one bar series per entry in `categories`, colored from `colors`
|
|
17
|
+
* (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all
|
|
18
|
+
* bars share a stackId. When `width` is provided the chart renders at that
|
|
19
|
+
* fixed size without a ResponsiveContainer; otherwise it fills its parent.
|
|
20
|
+
*/
|
|
21
|
+
export declare function BarChart({ data, index, categories, colors, height, width, stack, showLegend, showGrid, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Shared props for the cartesian chart family (Area, Bar, Line) and Radar.
|
|
25
|
+
*
|
|
26
|
+
* Each chart plots one series per entry in `categories`, reading values from the
|
|
27
|
+
* matching key on every row, and uses `index` for the category axis.
|
|
28
|
+
*/
|
|
29
|
+
export declare interface CartesianChartProps {
|
|
30
|
+
/** Rows of data to plot. */
|
|
31
|
+
data: ChartData;
|
|
32
|
+
/** Row key used for the x-axis (cartesian) or angle axis (radar). */
|
|
33
|
+
index: string;
|
|
34
|
+
/** Row keys to plot, one series each. */
|
|
35
|
+
categories: string[];
|
|
36
|
+
/** Series colors, cycled per category. Defaults to {@link DEFAULT_CHART_COLORS}. */
|
|
37
|
+
colors?: string[];
|
|
38
|
+
/** Chart height in pixels. Defaults to 300. */
|
|
39
|
+
height?: number;
|
|
40
|
+
/**
|
|
41
|
+
* Fixed chart width in pixels. When set, the chart renders at this explicit
|
|
42
|
+
* width WITHOUT a ResponsiveContainer (useful for tests/SSR). When omitted,
|
|
43
|
+
* the chart fills its parent via a ResponsiveContainer.
|
|
44
|
+
*/
|
|
45
|
+
width?: number;
|
|
46
|
+
/** Stack all series on a shared stackId instead of grouping them. */
|
|
47
|
+
stack?: boolean;
|
|
48
|
+
/** Render the legend. Defaults to true. */
|
|
49
|
+
showLegend?: boolean;
|
|
50
|
+
/** Render the cartesian grid. Defaults to true. */
|
|
51
|
+
showGrid?: boolean;
|
|
52
|
+
/** Render the tooltip. Defaults to true. */
|
|
53
|
+
showTooltip?: boolean;
|
|
54
|
+
/** Format numeric values for tooltip/axis display. */
|
|
55
|
+
valueFormatter?: (value: number) => string;
|
|
56
|
+
/** Extra class name applied to the chart wrapper. */
|
|
57
|
+
className?: string;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Tabular data consumed by every chart: an array of rows, where each row maps a
|
|
62
|
+
* column key to a string (label) or number (value).
|
|
63
|
+
*/
|
|
64
|
+
export declare type ChartData = Array<Record<string, string | number>>;
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Default color palette for Tempest charts.
|
|
68
|
+
*
|
|
69
|
+
* A set of six visually distinct hex colors (blue, green, amber, violet, pink,
|
|
70
|
+
* cyan) used to color chart series in cycle order. Exported so callers can
|
|
71
|
+
* import and theme their own charts, or pass a custom `colors` array to any
|
|
72
|
+
* chart component to override it.
|
|
73
|
+
*/
|
|
74
|
+
export declare const DEFAULT_CHART_COLORS: string[];
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* LineChart — themed wrapper over recharts `LineChart`.
|
|
78
|
+
*
|
|
79
|
+
* Plots one line per entry in `categories`, colored from `colors` (cycling
|
|
80
|
+
* {@link DEFAULT_CHART_COLORS} by default). `stack` is accepted for API parity
|
|
81
|
+
* but does not visually stack lines. When `width` is provided the chart renders
|
|
82
|
+
* at that fixed size without a ResponsiveContainer; otherwise it fills its
|
|
83
|
+
* parent.
|
|
84
|
+
*/
|
|
85
|
+
export declare function LineChart({ data, index, categories, colors, height, width, showLegend, showGrid, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* PieChart — themed wrapper over recharts `PieChart`.
|
|
89
|
+
*
|
|
90
|
+
* Renders one slice per row, reading the numeric value from `category` and the
|
|
91
|
+
* label from `index`. Each slice is colored from `colors` (cycling
|
|
92
|
+
* {@link DEFAULT_CHART_COLORS} by default). When `donut` is set the pie gets a
|
|
93
|
+
* non-zero inner radius. When `width` is provided the chart renders at that
|
|
94
|
+
* fixed size without a ResponsiveContainer; otherwise it fills its parent.
|
|
95
|
+
*/
|
|
96
|
+
export declare function PieChart({ data, category, index, colors, height, width, donut, showLegend, showTooltip, valueFormatter, className, }: PieChartProps): JSX.Element;
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Props for the {@link PieChart} component.
|
|
100
|
+
*/
|
|
101
|
+
export declare interface PieChartProps {
|
|
102
|
+
/** Rows of data to plot, one slice each. */
|
|
103
|
+
data: ChartData;
|
|
104
|
+
/** Row key holding the numeric slice value. */
|
|
105
|
+
category: string;
|
|
106
|
+
/** Row key holding the slice name/label. */
|
|
107
|
+
index: string;
|
|
108
|
+
/** Slice colors, cycled per slice. Defaults to {@link DEFAULT_CHART_COLORS}. */
|
|
109
|
+
colors?: string[];
|
|
110
|
+
/** Chart height in pixels. Defaults to 300. */
|
|
111
|
+
height?: number;
|
|
112
|
+
/**
|
|
113
|
+
* Fixed chart width in pixels. When set, the chart renders at this explicit
|
|
114
|
+
* width WITHOUT a ResponsiveContainer (useful for tests/SSR).
|
|
115
|
+
*/
|
|
116
|
+
width?: number;
|
|
117
|
+
/** Render as a donut (non-zero inner radius) instead of a full pie. */
|
|
118
|
+
donut?: boolean;
|
|
119
|
+
/** Render the legend. Defaults to true. */
|
|
120
|
+
showLegend?: boolean;
|
|
121
|
+
/** Render the tooltip. Defaults to true. */
|
|
122
|
+
showTooltip?: boolean;
|
|
123
|
+
/** Format numeric values for tooltip display. */
|
|
124
|
+
valueFormatter?: (value: number) => string;
|
|
125
|
+
/** Extra class name applied to the chart wrapper. */
|
|
126
|
+
className?: string;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* RadarChart — themed wrapper over recharts `RadarChart`.
|
|
131
|
+
*
|
|
132
|
+
* Plots one radar polygon per entry in `categories`, colored from `colors`
|
|
133
|
+
* (cycling {@link DEFAULT_CHART_COLORS} by default). `index` drives the angle
|
|
134
|
+
* axis. When `width` is provided the chart renders at that fixed size without a
|
|
135
|
+
* ResponsiveContainer; otherwise it fills its parent.
|
|
136
|
+
*/
|
|
137
|
+
export declare function RadarChart({ data, index, categories, colors, height, width, showLegend, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;
|
|
138
|
+
|
|
139
|
+
export { }
|
package/dist/charts.js
ADDED
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import { jsxs as p, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { AreaChart as b, CartesianGrid as P, XAxis as $, YAxis as x, Tooltip as k, Legend as y, Area as B, ResponsiveContainer as A, BarChart as D, Bar as O, LineChart as T, Line as j, PieChart as G, Pie as I, Cell as S, RadarChart as _, PolarGrid as E, PolarAngleAxis as F, PolarRadiusAxis as H, Radar as U } from "recharts";
|
|
3
|
+
import { c as v } from "./cn-C0Sxc9eb.js";
|
|
4
|
+
const K = [
|
|
5
|
+
"#2563eb",
|
|
6
|
+
// blue
|
|
7
|
+
"#16a34a",
|
|
8
|
+
// green
|
|
9
|
+
"#f59e0b",
|
|
10
|
+
// amber
|
|
11
|
+
"#7c3aed",
|
|
12
|
+
// violet
|
|
13
|
+
"#ec4899",
|
|
14
|
+
// pink
|
|
15
|
+
"#06b6d4"
|
|
16
|
+
// cyan
|
|
17
|
+
];
|
|
18
|
+
function R(n) {
|
|
19
|
+
if (n)
|
|
20
|
+
return (s) => n(Number(s));
|
|
21
|
+
}
|
|
22
|
+
function w({
|
|
23
|
+
data: n,
|
|
24
|
+
index: s,
|
|
25
|
+
categories: o,
|
|
26
|
+
colors: t = K,
|
|
27
|
+
height: a = 300,
|
|
28
|
+
width: e,
|
|
29
|
+
stack: h = !1,
|
|
30
|
+
showLegend: f = !0,
|
|
31
|
+
showGrid: m = !0,
|
|
32
|
+
showTooltip: c = !0,
|
|
33
|
+
valueFormatter: i,
|
|
34
|
+
className: d
|
|
35
|
+
}) {
|
|
36
|
+
const u = h ? "stack" : void 0, l = /* @__PURE__ */ p(b, { data: n, width: e, height: a, children: [
|
|
37
|
+
m ? /* @__PURE__ */ r(P, { strokeDasharray: "3 3" }) : null,
|
|
38
|
+
/* @__PURE__ */ r($, { dataKey: s }),
|
|
39
|
+
/* @__PURE__ */ r(x, { tickFormatter: i }),
|
|
40
|
+
c ? /* @__PURE__ */ r(k, { formatter: R(i) }) : null,
|
|
41
|
+
f ? /* @__PURE__ */ r(y, {}) : null,
|
|
42
|
+
o.map((C, L) => {
|
|
43
|
+
const N = t[L % t.length];
|
|
44
|
+
return /* @__PURE__ */ r(
|
|
45
|
+
B,
|
|
46
|
+
{
|
|
47
|
+
type: "monotone",
|
|
48
|
+
dataKey: C,
|
|
49
|
+
stackId: u,
|
|
50
|
+
stroke: N,
|
|
51
|
+
fill: N,
|
|
52
|
+
fillOpacity: 0.3
|
|
53
|
+
},
|
|
54
|
+
C
|
|
55
|
+
);
|
|
56
|
+
})
|
|
57
|
+
] });
|
|
58
|
+
return /* @__PURE__ */ r("div", { className: v(d), children: e !== void 0 ? l : /* @__PURE__ */ r(A, { width: "100%", height: a, children: l }) });
|
|
59
|
+
}
|
|
60
|
+
function z({
|
|
61
|
+
data: n,
|
|
62
|
+
index: s,
|
|
63
|
+
categories: o,
|
|
64
|
+
colors: t = K,
|
|
65
|
+
height: a = 300,
|
|
66
|
+
width: e,
|
|
67
|
+
stack: h = !1,
|
|
68
|
+
showLegend: f = !0,
|
|
69
|
+
showGrid: m = !0,
|
|
70
|
+
showTooltip: c = !0,
|
|
71
|
+
valueFormatter: i,
|
|
72
|
+
className: d
|
|
73
|
+
}) {
|
|
74
|
+
const u = h ? "stack" : void 0, l = /* @__PURE__ */ p(D, { data: n, width: e, height: a, children: [
|
|
75
|
+
m ? /* @__PURE__ */ r(P, { strokeDasharray: "3 3" }) : null,
|
|
76
|
+
/* @__PURE__ */ r($, { dataKey: s }),
|
|
77
|
+
/* @__PURE__ */ r(x, { tickFormatter: i }),
|
|
78
|
+
c ? /* @__PURE__ */ r(k, { formatter: R(i) }) : null,
|
|
79
|
+
f ? /* @__PURE__ */ r(y, {}) : null,
|
|
80
|
+
o.map((C, L) => /* @__PURE__ */ r(
|
|
81
|
+
O,
|
|
82
|
+
{
|
|
83
|
+
dataKey: C,
|
|
84
|
+
stackId: u,
|
|
85
|
+
fill: t[L % t.length]
|
|
86
|
+
},
|
|
87
|
+
C
|
|
88
|
+
))
|
|
89
|
+
] });
|
|
90
|
+
return /* @__PURE__ */ r("div", { className: v(d), children: e !== void 0 ? l : /* @__PURE__ */ r(A, { width: "100%", height: a, children: l }) });
|
|
91
|
+
}
|
|
92
|
+
function J({
|
|
93
|
+
data: n,
|
|
94
|
+
index: s,
|
|
95
|
+
categories: o,
|
|
96
|
+
colors: t = K,
|
|
97
|
+
height: a = 300,
|
|
98
|
+
width: e,
|
|
99
|
+
showLegend: h = !0,
|
|
100
|
+
showGrid: f = !0,
|
|
101
|
+
showTooltip: m = !0,
|
|
102
|
+
valueFormatter: c,
|
|
103
|
+
className: i
|
|
104
|
+
}) {
|
|
105
|
+
const d = /* @__PURE__ */ p(T, { data: n, width: e, height: a, children: [
|
|
106
|
+
f ? /* @__PURE__ */ r(P, { strokeDasharray: "3 3" }) : null,
|
|
107
|
+
/* @__PURE__ */ r($, { dataKey: s }),
|
|
108
|
+
/* @__PURE__ */ r(x, { tickFormatter: c }),
|
|
109
|
+
m ? /* @__PURE__ */ r(k, { formatter: R(c) }) : null,
|
|
110
|
+
h ? /* @__PURE__ */ r(y, {}) : null,
|
|
111
|
+
o.map((u, l) => /* @__PURE__ */ r(
|
|
112
|
+
j,
|
|
113
|
+
{
|
|
114
|
+
type: "monotone",
|
|
115
|
+
dataKey: u,
|
|
116
|
+
stroke: t[l % t.length],
|
|
117
|
+
dot: !1
|
|
118
|
+
},
|
|
119
|
+
u
|
|
120
|
+
))
|
|
121
|
+
] });
|
|
122
|
+
return /* @__PURE__ */ r("div", { className: v(i), children: e !== void 0 ? d : /* @__PURE__ */ r(A, { width: "100%", height: a, children: d }) });
|
|
123
|
+
}
|
|
124
|
+
function M({
|
|
125
|
+
data: n,
|
|
126
|
+
category: s,
|
|
127
|
+
index: o,
|
|
128
|
+
colors: t = K,
|
|
129
|
+
height: a = 300,
|
|
130
|
+
width: e,
|
|
131
|
+
donut: h = !1,
|
|
132
|
+
showLegend: f = !0,
|
|
133
|
+
showTooltip: m = !0,
|
|
134
|
+
valueFormatter: c,
|
|
135
|
+
className: i
|
|
136
|
+
}) {
|
|
137
|
+
const d = /* @__PURE__ */ p(G, { width: e, height: a, children: [
|
|
138
|
+
m ? /* @__PURE__ */ r(k, { formatter: R(c) }) : null,
|
|
139
|
+
f ? /* @__PURE__ */ r(y, {}) : null,
|
|
140
|
+
/* @__PURE__ */ r(
|
|
141
|
+
I,
|
|
142
|
+
{
|
|
143
|
+
data: n,
|
|
144
|
+
dataKey: s,
|
|
145
|
+
nameKey: o,
|
|
146
|
+
innerRadius: h ? "60%" : 0,
|
|
147
|
+
outerRadius: "80%",
|
|
148
|
+
children: n.map((u, l) => /* @__PURE__ */ r(S, { fill: t[l % t.length] }, `${String(u[o])}-${l}`))
|
|
149
|
+
}
|
|
150
|
+
)
|
|
151
|
+
] });
|
|
152
|
+
return /* @__PURE__ */ r("div", { className: v(i), children: e !== void 0 ? d : /* @__PURE__ */ r(A, { width: "100%", height: a, children: d }) });
|
|
153
|
+
}
|
|
154
|
+
function Q({
|
|
155
|
+
data: n,
|
|
156
|
+
index: s,
|
|
157
|
+
categories: o,
|
|
158
|
+
colors: t = K,
|
|
159
|
+
height: a = 300,
|
|
160
|
+
width: e,
|
|
161
|
+
showLegend: h = !0,
|
|
162
|
+
showTooltip: f = !0,
|
|
163
|
+
valueFormatter: m,
|
|
164
|
+
className: c
|
|
165
|
+
}) {
|
|
166
|
+
const i = /* @__PURE__ */ p(_, { data: n, width: e, height: a, children: [
|
|
167
|
+
/* @__PURE__ */ r(E, {}),
|
|
168
|
+
/* @__PURE__ */ r(F, { dataKey: s }),
|
|
169
|
+
/* @__PURE__ */ r(H, {}),
|
|
170
|
+
f ? /* @__PURE__ */ r(k, { formatter: R(m) }) : null,
|
|
171
|
+
h ? /* @__PURE__ */ r(y, {}) : null,
|
|
172
|
+
o.map((d, u) => {
|
|
173
|
+
const l = t[u % t.length];
|
|
174
|
+
return /* @__PURE__ */ r(
|
|
175
|
+
U,
|
|
176
|
+
{
|
|
177
|
+
dataKey: d,
|
|
178
|
+
stroke: l,
|
|
179
|
+
fill: l,
|
|
180
|
+
fillOpacity: 0.3
|
|
181
|
+
},
|
|
182
|
+
d
|
|
183
|
+
);
|
|
184
|
+
})
|
|
185
|
+
] });
|
|
186
|
+
return /* @__PURE__ */ r("div", { className: v(c), children: e !== void 0 ? i : /* @__PURE__ */ r(A, { width: "100%", height: a, children: i }) });
|
|
187
|
+
}
|
|
188
|
+
export {
|
|
189
|
+
w as AreaChart,
|
|
190
|
+
z as BarChart,
|
|
191
|
+
K as DEFAULT_CHART_COLORS,
|
|
192
|
+
J as LineChart,
|
|
193
|
+
M as PieChart,
|
|
194
|
+
Q as RadarChart
|
|
195
|
+
};
|
|
196
|
+
//# sourceMappingURL=charts.js.map
|