Vendor SEO chart kit and shell media
This commit is contained in:
DCCONSTRUCTIONS
parent
942373563d
commit
95eea435ac
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2026 uixmat
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
|
||||
|
||||
|
||||
<br />
|
||||
<p align="center">
|
||||
<img alt="vercel-oss 2" src="https://github.com/user-attachments/assets/e6cd5d4c-7707-4271-96cb-10122d193048" />
|
||||
</p>
|
||||
</br>
|
||||
<p align="center">
|
||||
A collection of Open Source charts and utility components that you can customize and extend.
|
||||
<br />
|
||||
<br />
|
||||
<a href="https://github.com/bklit/bklit-ui"><img src="https://www.shieldcn.dev/github/stars/bklit/bklit-ui.svg?variant=secondary&size=xs&theme=zinc" alt="GitHub Stars" /></a>
|
||||
<a href="https://github.com/bklit/bklit-ui/actions"><img src="https://www.shieldcn.dev/github/ci/bklit/bklit-ui.svg?variant=secondary&size=xs&theme=zinc" alt="CI" /></a>
|
||||
<a href="https://discord.gg/75s4frfE8X"><img src="https://www.shieldcn.dev/discord/members/75s4frfE8X.svg?variant=secondary&size=xs&theme=zinc" alt="Discord Members" /></a>
|
||||
<a href="https://x.com/uixmat"><img src="https://www.shieldcn.dev/x/follow/uixmat.svg?variant=branded&size=xs&theme=zinc" alt="X Follow" /></a>
|
||||
<a href="https://vercel.com/oss"><img src="https://shieldcn.dev/badge/Vercel_OSS_Program_Member.svg?variant=branded&size=xs&theme=zinc&logo=vercel" alt="Vercel OSS Program Member" /></a>
|
||||
</p>
|
||||
</p>
|
||||
|
||||
|
||||
## Premium Sponsors
|
||||
|
||||
Bklit UI is supported by our premium sponsors.
|
||||
|
||||
<br />
|
||||
<a href="https://openpanel.dev">
|
||||
<img alt="OpenPanel" src="https://github.com/user-attachments/assets/279ef3ca-ed28-4a75-bac7-3fb90db4954d" />
|
||||
</a>
|
||||
|
||||
**[OpenPanel](https://openpanel.dev)** — OpenPanel is an open source analytics platform that combines web analytics and product analytics in one privacy-first tool. Track pageviews, events, funnels, retention, and user journeys — all without cookies.
|
||||
|
||||
## Charts
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/area-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/area-chart.svg" alt="Area Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Area Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/area-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=area-chart">Studio</a>
|
||||
</td>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/bar-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/bar-chart.svg" alt="Bar Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Bar Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/bar-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=bar-chart">Studio</a>
|
||||
</td>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/candlestick-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/candlestick-chart.svg" alt="Candlestick Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Candlestick Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/candlestick-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=candlestick-chart">Studio</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/choropleth-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/choropleth-chart.svg" alt="Choropleth Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Choropleth Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/choropleth-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=choropleth-chart">Studio</a>
|
||||
</td>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/composed-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/composed-chart.svg" alt="Composed Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Composed Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/composed-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=composed-chart">Studio</a>
|
||||
</td>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/funnel-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/funnel-chart.svg" alt="Funnel Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Funnel Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/funnel-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=funnel-chart">Studio</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/gauge-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/gauge-chart.svg" alt="Gauge" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Gauge</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/gauge-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=gauge-chart">Studio</a>
|
||||
</td>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/line-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/line-chart.svg" alt="Line Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Line Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/line-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=line-chart">Studio</a>
|
||||
</td>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/live-line-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/live-line-chart.svg" alt="Live Line Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Live Line Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/live-line-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=live-line-chart">Studio</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/pie-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/pie-chart.svg" alt="Pie Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Pie Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/pie-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=pie-chart">Studio</a>
|
||||
</td>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/radar-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/radar-chart.svg" alt="Radar Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Radar Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/radar-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=radar-chart">Studio</a>
|
||||
</td>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/ring-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/ring-chart.svg" alt="Ring Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Ring Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/ring-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=ring-chart">Studio</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/scatter-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/scatter-chart.svg" alt="Scatter Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Scatter Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/scatter-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=scatter-chart">Studio</a>
|
||||
</td>
|
||||
<td align="center" valign="top" width="33%">
|
||||
<a href="https://ui.bklit.com/docs/components/sankey-chart">
|
||||
<img src="https://github.com/bklit/bklit-ui/raw/main/apps/web/public/svgs/sankey-chart.svg" alt="Sankey Chart" width="280" />
|
||||
</a>
|
||||
<br />
|
||||
<strong>Sankey Chart</strong><br />
|
||||
<a href="https://ui.bklit.com/docs/components/sankey-chart">Docs</a> · <a href="https://ui.bklit.com/studio?chart=sankey-chart">Studio</a>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Studio
|
||||
|
||||
Studio is Bklit's interactive chart playground. Pick a chart, tweak styling and animation controls in real time, then copy the generated React code or export a registry JSON for your project.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.youtube.com/watch?v=I3PLqHImYbE"><img src="https://img.youtube.com/vi/I3PLqHImYbE/maxresdefault.jpg" alt="Bklit Studio" width="720" /></a>
|
||||
</p>
|
||||
|
||||
[Open Studio →](https://ui.bklit.com/studio)
|
||||
|
||||
## Getting Started
|
||||
|
||||
Bklit UI is a shadcn registry. Initialize shadcn in your project, then add a chart:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
npx shadcn@latest add @bklit/line-chart
|
||||
```
|
||||
|
||||
See [Installation](https://ui.bklit.com/docs/installation) for registry setup and all components.
|
||||
|
||||
## Repo activity
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
**Chart components** (`packages/ui`, shadcn registry) are [MIT licensed](./LICENSE).
|
||||
|
||||
**Bklit Studio** (`packages/studio`, hosted at [ui.bklit.com/studio](https://ui.bklit.com/studio))
|
||||
is proprietary. See [LICENSE-STUDIO.md](./LICENSE-STUDIO.md). You may not reuse,
|
||||
resell, or redistribute Studio without written permission.
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
# Bklit UI Vendor Snapshot
|
||||
|
||||
Source: https://github.com/bklit/bklit-ui
|
||||
Commit: 86149e76b509b661aca26af95461b18952eda646
|
||||
Snapshot date: 2026-06-28
|
||||
|
||||
Included:
|
||||
|
||||
- `LICENSE`
|
||||
- `README.md`
|
||||
- `packages/ui`
|
||||
- `apps/web/public/svgs`
|
||||
|
||||
Excluded:
|
||||
|
||||
- `.git`
|
||||
- `node_modules`
|
||||
- `apps/studio`
|
||||
- `packages/studio`
|
||||
|
||||
License notes:
|
||||
|
||||
- The root Bklit UI repository is MIT licensed.
|
||||
- Bklit Studio has a separate restrictive license and is intentionally not vendored here.
|
||||
- Treat this directory as a local source/reference snapshot. Do not import it into the runtime directly until the selected chart components and their dependencies are copied into the app layer intentionally.
|
||||
|
||||
Candidate SEO module uses:
|
||||
|
||||
- `funnel-chart`: pipeline/readiness from context review to market demand, SEO plan, rewrite, validation.
|
||||
- `bar-chart`: top clusters, pages, intents, and demand buckets.
|
||||
- `scatter-chart`: opportunity map by demand, relevance, confidence, and implementation effort.
|
||||
- `sankey-chart`: context/intent to keyword/page/field flow for dev-mode explainability.
|
||||
- `gauge-chart` or `ring-chart`: compact quality/readiness scores.
|
||||
- `area-chart`, `line-chart`, `composed-chart`: historical demand, forecast, and validation trend screens after time-series data exists.
|
||||
- `heatmap-chart`: keyword/page coverage matrix if the table becomes too dense.
|
||||
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/area-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/area-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 995 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/bar-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/bar-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1005 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/candlestick-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/candlestick-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1000 KiB |
23
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/choropleth-chart.svg
vendored
Normal file
23
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/choropleth-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 675 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/composed-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/composed-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1001 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/funnel-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/funnel-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1018 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/gauge-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/gauge-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1005 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/line-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/line-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 994 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/live-line-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/live-line-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1014 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/pie-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/pie-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 988 KiB |
23
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/radar-chart.svg
vendored
Normal file
23
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/radar-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 500 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/ring-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/ring-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 988 KiB |
23
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/sankey-chart.svg
vendored
Normal file
23
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/sankey-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 499 KiB |
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/scatter-chart.svg
vendored
Normal file
44
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/apps/web/public/svgs/scatter-chart.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1005 KiB |
17
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/typescript-config/react-library.json
vendored
Normal file
17
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/typescript-config/react-library.json
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"jsx": "react-jsx",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// biome-ignore lint/performance/noBarrelFile: ESLint config re-export
|
||||
export { config as default } from "@bklitui/eslint-config/react-internal";
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
{
|
||||
"name": "@bklitui/ui",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"sideEffects": false,
|
||||
"exports": {
|
||||
"./charts": "./src/charts/index.ts",
|
||||
"./lib/utils": "./src/lib/utils.ts",
|
||||
"./components/shimmering-text": "./src/components/shimmering-text.tsx",
|
||||
"./button": "./src/button.tsx",
|
||||
"./card": "./src/card.tsx",
|
||||
"./code": "./src/code.tsx",
|
||||
"./chart-grid": "./src/chart-grid.tsx",
|
||||
"./chart-marker": "./src/chart-marker.tsx",
|
||||
"./line-chart": "./src/line-chart.tsx",
|
||||
"./tooltip": "./src/tooltip.tsx",
|
||||
"./*": "./src/*.tsx"
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint . --max-warnings 0",
|
||||
"check-types": "tsc --noEmit",
|
||||
"test": "node scripts/run-tests.mjs",
|
||||
"registry:build": "node scripts/verify-registry-files.mjs && node scripts/verify-registry-deps.mjs && node scripts/generate-v0-examples.mjs && node scripts/generate-block-registry.mjs && shadcn build --output ../../apps/web/public/r && cp registry.json ../../apps/web/public/r/registry.json",
|
||||
"registry:verify": "node scripts/verify-registry-files.mjs && node scripts/verify-registry-deps.mjs && node scripts/verify-registry-sync.mjs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@bklitui/eslint-config": "workspace:*",
|
||||
"@bklitui/typescript-config": "workspace:*",
|
||||
"@types/d3-array": "^3.2.1",
|
||||
"@types/d3-geo": "^3.1.0",
|
||||
"@types/d3-sankey": "^0.12.5",
|
||||
"@types/d3-scale": "^4.0.9",
|
||||
"@types/d3-shape": "^3.1.6",
|
||||
"@types/geojson": "^7946.0.16",
|
||||
"@types/node": "^22.15.3",
|
||||
"@types/react": "19.2.2",
|
||||
"@types/react-dom": "19.2.2",
|
||||
"@types/topojson-client": "^3.1.5",
|
||||
"@types/topojson-specification": "^1.0.5",
|
||||
"eslint": "^9.39.1",
|
||||
"shadcn": "^2.5.0",
|
||||
"tailwindcss": "^4.1.8",
|
||||
"tsx": "^4.19.4",
|
||||
"typescript": "5.9.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@bklitui/icons": "workspace:*",
|
||||
"@base-ui/react": "^1.0.0-alpha.8",
|
||||
"@number-flow/react": "^0.5.4",
|
||||
"@visx/brush": "3.12.0",
|
||||
"@visx/curve": "4.0.1-alpha.0",
|
||||
"@visx/event": "4.0.1-alpha.0",
|
||||
"@visx/geo": "4.0.1-alpha.0",
|
||||
"@visx/gradient": "4.0.1-alpha.0",
|
||||
"@visx/grid": "4.0.1-alpha.0",
|
||||
"@visx/group": "4.0.1-alpha.0",
|
||||
"@visx/heatmap": "4.0.1-alpha.0",
|
||||
"@visx/pattern": "4.0.1-alpha.0",
|
||||
"@visx/responsive": "4.0.1-alpha.0",
|
||||
"@visx/sankey": "4.0.1-alpha.0",
|
||||
"@visx/scale": "4.0.1-alpha.0",
|
||||
"@visx/shape": "4.0.1-alpha.0",
|
||||
"@visx/zoom": "4.0.1-alpha.0",
|
||||
"clsx": "^2.1.1",
|
||||
"d3-array": "3.2.4",
|
||||
"d3-geo": "3.1.0",
|
||||
"d3-scale": "4.0.2",
|
||||
"d3-shape": "^3.2.0",
|
||||
"motion": "^12.27.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-use-measure": "^2.1.7",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"topojson-client": "3.1.0"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,97 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
ChartStatFlow,
|
||||
LinearGradient,
|
||||
} from "@/components/charts";
|
||||
import { curveCardinal } from "@visx/curve";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { revenueSeries, revenueStats } from "../data/revenue-series";
|
||||
import {
|
||||
StatCardChart,
|
||||
statCardLabelClassName,
|
||||
statCardValueClassName,
|
||||
} from "./stat-card-chart";
|
||||
import {
|
||||
formatStatCardMonth,
|
||||
StatCardHoverBridge,
|
||||
type StatCardHoverState,
|
||||
} from "./stat-card-hover-bridge";
|
||||
import { TrendBadge } from "./trend-badge";
|
||||
|
||||
export function StatCardArea() {
|
||||
const [hover, setHover] = useState<StatCardHoverState>({
|
||||
value: null,
|
||||
label: null,
|
||||
trend: null,
|
||||
});
|
||||
const displayValue = hover.value ?? revenueStats.average;
|
||||
const displayLabel = hover.label ?? "Avg";
|
||||
const displayTrend = hover.trend ?? revenueStats.trend;
|
||||
|
||||
return (
|
||||
<Card className="w-full gap-0 py-0">
|
||||
<CardHeader className="px-4 py-3">
|
||||
<CardTitle>Total Revenue</CardTitle>
|
||||
<CardAction>
|
||||
<TrendBadge value={displayTrend} />
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex flex-col gap-3 px-4 pt-2 pb-3">
|
||||
<ChartStatFlow
|
||||
formatOptions={{
|
||||
currency: "USD",
|
||||
maximumFractionDigits: 0,
|
||||
style: "currency",
|
||||
}}
|
||||
label={displayLabel}
|
||||
labelClassName={statCardLabelClassName}
|
||||
value={displayValue}
|
||||
valueClassName={statCardValueClassName}
|
||||
/>
|
||||
|
||||
<StatCardChart size="md">
|
||||
<AreaChart
|
||||
aspectRatio="2.5 / 1"
|
||||
className="w-full"
|
||||
data={revenueSeries}
|
||||
margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
|
||||
>
|
||||
<StatCardHoverBridge
|
||||
dataKey="value"
|
||||
formatLabel={formatStatCardMonth}
|
||||
onHoverChange={setHover}
|
||||
/>
|
||||
<LinearGradient
|
||||
from="var(--chart-1)"
|
||||
fromOpacity={0.45}
|
||||
id="stat-card-area-fill"
|
||||
to="var(--chart-1)"
|
||||
toOpacity={0}
|
||||
/>
|
||||
<Area
|
||||
curve={curveCardinal.tension(0.65)}
|
||||
dataKey="value"
|
||||
fill="url(#stat-card-area-fill)"
|
||||
fillOpacity={1}
|
||||
gradientToOpacity={0}
|
||||
showHighlight
|
||||
stroke="var(--chart-1)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</AreaChart>
|
||||
</StatCardChart>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface StatCardHoverState {
|
||||
value: number | null;
|
||||
label: string | null;
|
||||
trend: number | null;
|
||||
}
|
||||
|
||||
export const statCardValueClassName =
|
||||
"text-3xl font-semibold leading-none tracking-tight";
|
||||
|
||||
export const statCardLabelClassName = "mt-0 text-xs";
|
||||
|
||||
export const statCardChartHeights = {
|
||||
sm: "[--stat-card-chart-h:96px]",
|
||||
md: "[--stat-card-chart-h:190px]",
|
||||
lg: "[--stat-card-chart-h:420px]",
|
||||
} as const;
|
||||
|
||||
/** Bleeds charts edge-to-edge inside stat card content padding. */
|
||||
export function StatCardChart({
|
||||
children,
|
||||
className,
|
||||
size = "sm",
|
||||
}: {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
size?: keyof typeof statCardChartHeights;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative -mx-4 -mb-3 overflow-hidden",
|
||||
"[&_.relative.w-full]:aspect-auto! [&_.relative.w-full]:h-[var(--stat-card-chart-h)]!",
|
||||
statCardChartHeights[size],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
"use client";
|
||||
|
||||
import { useChart } from "@/components/charts";
|
||||
import { useEffect } from "react";
|
||||
import type { StatCardHoverState } from "./stat-card-chart";
|
||||
|
||||
export type { StatCardHoverState } from "./stat-card-chart";
|
||||
|
||||
export function formatStatCardMonth(date: Date) {
|
||||
return date.toLocaleDateString("en-US", { month: "short" });
|
||||
}
|
||||
|
||||
export function formatStatCardWeekday(date: Date) {
|
||||
return date.toLocaleDateString("en-US", { weekday: "long" });
|
||||
}
|
||||
|
||||
function parsePointDate(raw: unknown): Date | null {
|
||||
if (raw instanceof Date) {
|
||||
return raw;
|
||||
}
|
||||
if (typeof raw === "string") {
|
||||
return new Date(raw);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function computePeriodTrend(
|
||||
data: Record<string, unknown>[],
|
||||
index: number,
|
||||
dataKey: string
|
||||
): number | null {
|
||||
if (index <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const current = data[index]?.[dataKey];
|
||||
const previous = data[index - 1]?.[dataKey];
|
||||
|
||||
if (
|
||||
typeof current !== "number" ||
|
||||
typeof previous !== "number" ||
|
||||
previous === 0
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ((current - previous) / previous) * 100;
|
||||
}
|
||||
|
||||
/** Syncs hovered chart values, labels, and trend into stat card UI. */
|
||||
export function StatCardHoverBridge({
|
||||
dataKey,
|
||||
dateKey = "date",
|
||||
formatLabel,
|
||||
onHoverChange,
|
||||
}: {
|
||||
dataKey: string;
|
||||
dateKey?: string;
|
||||
formatLabel: (date: Date) => string;
|
||||
onHoverChange: (state: StatCardHoverState) => void;
|
||||
}) {
|
||||
const { data, tooltipData } = useChart();
|
||||
|
||||
useEffect(() => {
|
||||
if (!tooltipData?.point) {
|
||||
onHoverChange({ value: null, label: null, trend: null });
|
||||
return;
|
||||
}
|
||||
|
||||
const raw = tooltipData.point[dataKey];
|
||||
const value = typeof raw === "number" ? raw : null;
|
||||
const date = parsePointDate(tooltipData.point[dateKey]);
|
||||
const label = date ? formatLabel(date) : null;
|
||||
const trend = computePeriodTrend(data, tooltipData.index, dataKey);
|
||||
|
||||
onHoverChange({ value, label, trend });
|
||||
}, [data, dataKey, dateKey, formatLabel, onHoverChange, tooltipData]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
"use client";
|
||||
|
||||
import { CentralIcon } from "@central-icons-react/all";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function TrendBadge({
|
||||
value,
|
||||
className,
|
||||
}: {
|
||||
value: number;
|
||||
className?: string;
|
||||
}) {
|
||||
const positive = value >= 0;
|
||||
|
||||
return (
|
||||
<Badge
|
||||
className={cn(
|
||||
positive &&
|
||||
"border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
className
|
||||
)}
|
||||
variant={positive ? "outline" : "destructive"}
|
||||
>
|
||||
<CentralIcon
|
||||
className="size-3"
|
||||
data-icon="inline-start"
|
||||
fill="outlined"
|
||||
join="round"
|
||||
name={positive ? "IconArrowUp" : "IconArrowDown"}
|
||||
radius="0"
|
||||
stroke="1.5"
|
||||
/>
|
||||
{positive ? "+" : ""}
|
||||
{value.toFixed(1)}%
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface StatCardHoverState {
|
||||
value: number | null;
|
||||
label: string | null;
|
||||
trend: number | null;
|
||||
}
|
||||
|
||||
export const statCardValueClassName =
|
||||
"text-3xl font-semibold leading-none tracking-tight";
|
||||
|
||||
export const statCardLabelClassName = "mt-0 text-xs";
|
||||
|
||||
export const statCardChartHeights = {
|
||||
sm: "[--stat-card-chart-h:96px]",
|
||||
md: "[--stat-card-chart-h:190px]",
|
||||
lg: "[--stat-card-chart-h:420px]",
|
||||
} as const;
|
||||
|
||||
/** Bleeds charts edge-to-edge inside stat card content padding. */
|
||||
export function StatCardChart({
|
||||
children,
|
||||
className,
|
||||
size = "sm",
|
||||
}: {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
size?: keyof typeof statCardChartHeights;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative -mx-4 -mb-3 overflow-hidden",
|
||||
"[&_.relative.w-full]:aspect-auto! [&_.relative.w-full]:h-[var(--stat-card-chart-h)]!",
|
||||
statCardChartHeights[size],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
"use client";
|
||||
|
||||
import { useChoropleth } from "@/components/charts";
|
||||
import { useEffect } from "react";
|
||||
import { computeVisitorTrend, getVisitorValue } from "../data/visitors";
|
||||
import type { StatCardHoverState } from "./stat-card-chart";
|
||||
|
||||
/** Syncs hovered choropleth feature into stat card NumberFlow and trend badge. */
|
||||
export function StatCardChoroplethHoverBridge({
|
||||
onHoverChange,
|
||||
}: {
|
||||
onHoverChange: (state: StatCardHoverState) => void;
|
||||
}) {
|
||||
const { tooltipData } = useChoropleth();
|
||||
|
||||
useEffect(() => {
|
||||
if (!tooltipData?.feature) {
|
||||
onHoverChange({ value: null, label: null, trend: null });
|
||||
return;
|
||||
}
|
||||
|
||||
const feature = tooltipData.feature;
|
||||
const label = (feature.properties?.name as string | undefined) ?? "Unknown";
|
||||
const visitors = getVisitorValue(feature);
|
||||
const value = visitors ?? 0;
|
||||
const trend = visitors === undefined ? null : computeVisitorTrend(visitors);
|
||||
|
||||
onHoverChange({ value, label, trend });
|
||||
}, [onHoverChange, tooltipData]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
"use client";
|
||||
|
||||
import type { ChoroplethFeature } from "@/components/charts";
|
||||
import {
|
||||
ChartStatFlow,
|
||||
ChoroplethChart,
|
||||
ChoroplethFeatureComponent,
|
||||
ChoroplethTooltip,
|
||||
} from "@/components/charts";
|
||||
import { useState } from "react";
|
||||
import { useWorldDataStandalone } from "@/lib/use-world-data";
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
getVisitorColor,
|
||||
getVisitorValue,
|
||||
visitorStats,
|
||||
} from "../data/visitors";
|
||||
import {
|
||||
StatCardChart,
|
||||
type StatCardHoverState,
|
||||
statCardLabelClassName,
|
||||
statCardValueClassName,
|
||||
} from "./stat-card-chart";
|
||||
import { StatCardChoroplethHoverBridge } from "./stat-card-choropleth-hover-bridge";
|
||||
import { TrendBadge } from "./trend-badge";
|
||||
|
||||
export function StatCardChoropleth() {
|
||||
const { worldData, isLoading } = useWorldDataStandalone();
|
||||
const [hover, setHover] = useState<StatCardHoverState>({
|
||||
value: null,
|
||||
label: null,
|
||||
trend: null,
|
||||
});
|
||||
const displayValue = hover.value ?? visitorStats.total;
|
||||
const displayLabel = hover.label ?? "Total";
|
||||
const displayTrend = hover.trend ?? visitorStats.trend;
|
||||
|
||||
return (
|
||||
<Card className="relative w-full gap-0 overflow-hidden py-0">
|
||||
<CardHeader className="pointer-events-none absolute inset-x-0 top-0 z-10 grid auto-rows-min grid-cols-[1fr_auto] items-start gap-1 border-0 bg-gradient-to-b from-45% from-card to-transparent px-4 py-3 pb-10 shadow-none ring-0">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<CardTitle>Unique Visitors</CardTitle>
|
||||
<ChartStatFlow
|
||||
label={displayLabel}
|
||||
labelClassName={statCardLabelClassName}
|
||||
value={displayValue}
|
||||
valueClassName={statCardValueClassName}
|
||||
/>
|
||||
</div>
|
||||
<CardAction>
|
||||
<TrendBadge value={displayTrend} />
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0">
|
||||
{isLoading || !worldData ? (
|
||||
<StatCardChart className="mx-0 mb-0 min-h-[420px]" size="lg">
|
||||
<div className="flex h-full min-h-[420px] items-center justify-center text-muted-foreground text-xs">
|
||||
Loading map…
|
||||
</div>
|
||||
</StatCardChart>
|
||||
) : (
|
||||
<StatCardChart className="mx-0 mb-0 min-h-[420px]" size="lg">
|
||||
<ChoroplethChart
|
||||
aspectRatio="2.5 / 1"
|
||||
className="min-h-[420px] w-full"
|
||||
data={worldData}
|
||||
>
|
||||
<StatCardChoroplethHoverBridge onHoverChange={setHover} />
|
||||
<ChoroplethFeatureComponent
|
||||
getFeatureColor={(feature: ChoroplethFeature) =>
|
||||
getVisitorColor(feature)
|
||||
}
|
||||
/>
|
||||
<ChoroplethTooltip
|
||||
getFeatureValue={getVisitorValue}
|
||||
valueLabel="Visitors"
|
||||
/>
|
||||
</ChoroplethChart>
|
||||
</StatCardChart>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
"use client";
|
||||
|
||||
import { CentralIcon } from "@central-icons-react/all";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function TrendBadge({
|
||||
value,
|
||||
className,
|
||||
}: {
|
||||
value: number;
|
||||
className?: string;
|
||||
}) {
|
||||
const positive = value >= 0;
|
||||
|
||||
return (
|
||||
<Badge
|
||||
className={cn(
|
||||
positive &&
|
||||
"border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
className
|
||||
)}
|
||||
variant={positive ? "outline" : "destructive"}
|
||||
>
|
||||
<CentralIcon
|
||||
className="size-3"
|
||||
data-icon="inline-start"
|
||||
fill="outlined"
|
||||
join="round"
|
||||
name={positive ? "IconArrowUp" : "IconArrowDown"}
|
||||
radius="0"
|
||||
stroke="1.5"
|
||||
/>
|
||||
{positive ? "+" : ""}
|
||||
{value.toFixed(1)}%
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
"use client";
|
||||
|
||||
import type { FeatureCollection, Geometry } from "geojson";
|
||||
import {
|
||||
createContext,
|
||||
type ReactNode,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { feature } from "topojson-client";
|
||||
import type { GeometryCollection, Topology } from "topojson-specification";
|
||||
|
||||
interface CountryProperties {
|
||||
name: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
interface WorldTopology extends Topology {
|
||||
objects: {
|
||||
[key: string]: GeometryCollection<CountryProperties>;
|
||||
};
|
||||
}
|
||||
|
||||
const WORLD_DATA_URL =
|
||||
"https://raw.githubusercontent.com/subyfly/topojson/refs/heads/master/world-countries.json";
|
||||
|
||||
// Global cache to avoid refetching across component mounts
|
||||
let globalWorldDataCache: FeatureCollection<
|
||||
Geometry,
|
||||
CountryProperties
|
||||
> | null = null;
|
||||
let globalFetchPromise: Promise<FeatureCollection<
|
||||
Geometry,
|
||||
CountryProperties
|
||||
> | null> | null = null;
|
||||
|
||||
function fetchWorldData(): Promise<FeatureCollection<
|
||||
Geometry,
|
||||
CountryProperties
|
||||
> | null> {
|
||||
// Return cached data if available
|
||||
if (globalWorldDataCache) {
|
||||
return Promise.resolve(globalWorldDataCache);
|
||||
}
|
||||
|
||||
// Return existing promise if fetch is in progress
|
||||
if (globalFetchPromise) {
|
||||
return globalFetchPromise;
|
||||
}
|
||||
|
||||
// Start new fetch
|
||||
globalFetchPromise = (async () => {
|
||||
try {
|
||||
const response = await fetch(WORLD_DATA_URL);
|
||||
const topology = (await response.json()) as WorldTopology;
|
||||
const objectKey = Object.keys(topology.objects)[0];
|
||||
if (!objectKey) {
|
||||
throw new Error("No objects found in topology");
|
||||
}
|
||||
const geoObject = topology.objects[objectKey];
|
||||
if (!geoObject) {
|
||||
throw new Error("Object not found in topology");
|
||||
}
|
||||
const geojson = feature(
|
||||
topology,
|
||||
geoObject
|
||||
) as unknown as FeatureCollection<Geometry, CountryProperties>;
|
||||
globalWorldDataCache = geojson;
|
||||
return geojson;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch world data:", error);
|
||||
return null;
|
||||
}
|
||||
})();
|
||||
|
||||
return globalFetchPromise;
|
||||
}
|
||||
|
||||
interface WorldDataContextValue {
|
||||
worldData: FeatureCollection<Geometry, CountryProperties> | null;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const WorldDataContext = createContext<WorldDataContextValue>({
|
||||
worldData: null,
|
||||
isLoading: true,
|
||||
});
|
||||
|
||||
export function WorldDataProvider({ children }: { children: ReactNode }) {
|
||||
const [worldData, setWorldData] = useState<FeatureCollection<
|
||||
Geometry,
|
||||
CountryProperties
|
||||
> | null>(globalWorldDataCache);
|
||||
const [isLoading, setIsLoading] = useState(!globalWorldDataCache);
|
||||
|
||||
useEffect(() => {
|
||||
if (globalWorldDataCache) {
|
||||
setWorldData(globalWorldDataCache);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
fetchWorldData().then((data) => {
|
||||
setWorldData(data);
|
||||
setIsLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<WorldDataContext.Provider value={{ worldData, isLoading }}>
|
||||
{children}
|
||||
</WorldDataContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useWorldData() {
|
||||
return useContext(WorldDataContext);
|
||||
}
|
||||
|
||||
// Standalone hook for components that don't have the provider
|
||||
export function useWorldDataStandalone() {
|
||||
const [worldData, setWorldData] = useState<FeatureCollection<
|
||||
Geometry,
|
||||
CountryProperties
|
||||
> | null>(globalWorldDataCache);
|
||||
const [isLoading, setIsLoading] = useState(!globalWorldDataCache);
|
||||
|
||||
useEffect(() => {
|
||||
if (globalWorldDataCache) {
|
||||
setWorldData(globalWorldDataCache);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
fetchWorldData().then((data) => {
|
||||
setWorldData(data);
|
||||
setIsLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return { worldData, isLoading };
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface StatCardHoverState {
|
||||
value: number | null;
|
||||
label: string | null;
|
||||
trend: number | null;
|
||||
}
|
||||
|
||||
export const statCardValueClassName =
|
||||
"text-3xl font-semibold leading-none tracking-tight";
|
||||
|
||||
export const statCardLabelClassName = "mt-0 text-xs";
|
||||
|
||||
export const statCardChartHeights = {
|
||||
sm: "[--stat-card-chart-h:96px]",
|
||||
md: "[--stat-card-chart-h:190px]",
|
||||
lg: "[--stat-card-chart-h:420px]",
|
||||
} as const;
|
||||
|
||||
/** Bleeds charts edge-to-edge inside stat card content padding. */
|
||||
export function StatCardChart({
|
||||
children,
|
||||
className,
|
||||
size = "sm",
|
||||
}: {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
size?: keyof typeof statCardChartHeights;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative -mx-4 -mb-3 overflow-hidden",
|
||||
"[&_.relative.w-full]:aspect-auto! [&_.relative.w-full]:h-[var(--stat-card-chart-h)]!",
|
||||
statCardChartHeights[size],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
"use client";
|
||||
|
||||
import { useChart } from "@/components/charts";
|
||||
import { useEffect } from "react";
|
||||
import type { StatCardHoverState } from "./stat-card-chart";
|
||||
|
||||
export type { StatCardHoverState } from "./stat-card-chart";
|
||||
|
||||
export function formatStatCardMonth(date: Date) {
|
||||
return date.toLocaleDateString("en-US", { month: "short" });
|
||||
}
|
||||
|
||||
export function formatStatCardWeekday(date: Date) {
|
||||
return date.toLocaleDateString("en-US", { weekday: "long" });
|
||||
}
|
||||
|
||||
function parsePointDate(raw: unknown): Date | null {
|
||||
if (raw instanceof Date) {
|
||||
return raw;
|
||||
}
|
||||
if (typeof raw === "string") {
|
||||
return new Date(raw);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function computePeriodTrend(
|
||||
data: Record<string, unknown>[],
|
||||
index: number,
|
||||
dataKey: string
|
||||
): number | null {
|
||||
if (index <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const current = data[index]?.[dataKey];
|
||||
const previous = data[index - 1]?.[dataKey];
|
||||
|
||||
if (
|
||||
typeof current !== "number" ||
|
||||
typeof previous !== "number" ||
|
||||
previous === 0
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ((current - previous) / previous) * 100;
|
||||
}
|
||||
|
||||
/** Syncs hovered chart values, labels, and trend into stat card UI. */
|
||||
export function StatCardHoverBridge({
|
||||
dataKey,
|
||||
dateKey = "date",
|
||||
formatLabel,
|
||||
onHoverChange,
|
||||
}: {
|
||||
dataKey: string;
|
||||
dateKey?: string;
|
||||
formatLabel: (date: Date) => string;
|
||||
onHoverChange: (state: StatCardHoverState) => void;
|
||||
}) {
|
||||
const { data, tooltipData } = useChart();
|
||||
|
||||
useEffect(() => {
|
||||
if (!tooltipData?.point) {
|
||||
onHoverChange({ value: null, label: null, trend: null });
|
||||
return;
|
||||
}
|
||||
|
||||
const raw = tooltipData.point[dataKey];
|
||||
const value = typeof raw === "number" ? raw : null;
|
||||
const date = parsePointDate(tooltipData.point[dateKey]);
|
||||
const label = date ? formatLabel(date) : null;
|
||||
const trend = computePeriodTrend(data, tooltipData.index, dataKey);
|
||||
|
||||
onHoverChange({ value, label, trend });
|
||||
}, [data, dataKey, dateKey, formatLabel, onHoverChange, tooltipData]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
"use client";
|
||||
|
||||
import { ChartStatFlow, Line, LineChart } from "@/components/charts";
|
||||
import { curveBasis } from "@visx/curve";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { sessionsSeries, sessionsStats } from "../data/sessions-series";
|
||||
import {
|
||||
StatCardChart,
|
||||
statCardLabelClassName,
|
||||
statCardValueClassName,
|
||||
} from "./stat-card-chart";
|
||||
import {
|
||||
formatStatCardWeekday,
|
||||
StatCardHoverBridge,
|
||||
type StatCardHoverState,
|
||||
} from "./stat-card-hover-bridge";
|
||||
import { TrendBadge } from "./trend-badge";
|
||||
|
||||
export function StatCardLine() {
|
||||
const [hover, setHover] = useState<StatCardHoverState>({
|
||||
value: null,
|
||||
label: null,
|
||||
trend: null,
|
||||
});
|
||||
const average = Math.round(sessionsStats.average);
|
||||
const displayValue = hover.value === null ? average : Math.round(hover.value);
|
||||
const displayLabel = hover.label ?? "Avg";
|
||||
const displayTrend = hover.trend ?? sessionsStats.trend;
|
||||
|
||||
return (
|
||||
<Card className="w-full gap-0 py-0">
|
||||
<CardHeader className="px-4 py-3">
|
||||
<CardTitle>Active Sessions</CardTitle>
|
||||
<CardAction>
|
||||
<TrendBadge value={displayTrend} />
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="px-4 pt-2 pb-3">
|
||||
<StatCardChart size="md">
|
||||
<div className="pointer-events-none absolute right-4 bottom-4 z-10 flex flex-col items-end text-right">
|
||||
<ChartStatFlow
|
||||
label={displayLabel}
|
||||
labelClassName={statCardLabelClassName}
|
||||
value={displayValue}
|
||||
valueClassName={statCardValueClassName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<LineChart
|
||||
aspectRatio="2.5 / 1"
|
||||
className="w-full"
|
||||
data={sessionsSeries}
|
||||
margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
|
||||
>
|
||||
<StatCardHoverBridge
|
||||
dataKey="value"
|
||||
formatLabel={formatStatCardWeekday}
|
||||
onHoverChange={setHover}
|
||||
/>
|
||||
<Line
|
||||
curve={curveBasis}
|
||||
dataKey="value"
|
||||
showHighlight
|
||||
stroke="var(--chart-3)"
|
||||
strokeWidth={2.5}
|
||||
/>
|
||||
</LineChart>
|
||||
</StatCardChart>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
"use client";
|
||||
|
||||
import { CentralIcon } from "@central-icons-react/all";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function TrendBadge({
|
||||
value,
|
||||
className,
|
||||
}: {
|
||||
value: number;
|
||||
className?: string;
|
||||
}) {
|
||||
const positive = value >= 0;
|
||||
|
||||
return (
|
||||
<Badge
|
||||
className={cn(
|
||||
positive &&
|
||||
"border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
className
|
||||
)}
|
||||
variant={positive ? "outline" : "destructive"}
|
||||
>
|
||||
<CentralIcon
|
||||
className="size-3"
|
||||
data-icon="inline-start"
|
||||
fill="outlined"
|
||||
join="round"
|
||||
name={positive ? "IconArrowUp" : "IconArrowDown"}
|
||||
radius="0"
|
||||
stroke="1.5"
|
||||
/>
|
||||
{positive ? "+" : ""}
|
||||
{value.toFixed(1)}%
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
6
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/area-chart-index.ts
vendored
Normal file
6
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/area-chart-index.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { AreaChart } from "./area-chart";
|
||||
export { Area } from "./area";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { ChartTooltip } from "./tooltip";
|
||||
30
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/area-chart.tsx
vendored
Normal file
30
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/area-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { AreaChart, Area, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts"
|
||||
import { AreaChart, Area, Grid, XAxis, ChartTooltip } from "@/components/charts"
|
||||
|
||||
import { curveNatural } from "@visx/curve";
|
||||
|
||||
const chartData = [
|
||||
{ date: new Date("2024-01-01"), desktop: 186 },
|
||||
{ date: new Date("2024-02-01"), desktop: 305 },
|
||||
{ date: new Date("2024-03-01"), desktop: 237 },
|
||||
{ date: new Date("2024-04-01"), desktop: 73 },
|
||||
{ date: new Date("2024-05-01"), desktop: 209 },
|
||||
{ date: new Date("2024-06-01"), desktop: 214 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<AreaChart data={chartData} animationDuration={1100}>
|
||||
<Grid horizontal />
|
||||
<Area dataKey="desktop" curve={curveNatural} strokeWidth={2.5} fillOpacity={0.4} />
|
||||
<XAxis />
|
||||
<ChartTooltip />
|
||||
</AreaChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
6
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/bar-chart-index.ts
vendored
Normal file
6
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/bar-chart-index.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { BarChart } from "./bar-chart";
|
||||
export { Bar } from "./bar";
|
||||
export { BarXAxis } from "./bar-x-axis";
|
||||
export { Grid } from "./grid";
|
||||
export { ChartTooltip } from "./tooltip";
|
||||
29
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/bar-chart.tsx
vendored
Normal file
29
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/bar-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { BarChart, Bar, BarXAxis, Grid, ChartTooltip } from "@bklitui/ui/charts"
|
||||
import { BarChart, Bar, BarXAxis, Grid, ChartTooltip } from "@/components/charts"
|
||||
|
||||
const data = [
|
||||
{ month: "Jan", revenue: 12000, profit: 4500 },
|
||||
{ month: "Feb", revenue: 15500, profit: 5200 },
|
||||
{ month: "Mar", revenue: 11000, profit: 3800 },
|
||||
{ month: "Apr", revenue: 18500, profit: 7100 },
|
||||
{ month: "May", revenue: 16800, profit: 5400 },
|
||||
{ month: "Jun", revenue: 21200, profit: 8800 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<BarChart data={data} xDataKey="month">
|
||||
<Grid horizontal />
|
||||
<Bar dataKey="revenue" fill="var(--chart-line-primary)" lineCap="round" />
|
||||
<Bar dataKey="profit" fill="var(--chart-line-secondary)" lineCap="round" />
|
||||
<BarXAxis />
|
||||
<ChartTooltip />
|
||||
</BarChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { CandlestickChart } from "./candlestick-chart";
|
||||
export { Candlestick } from "./candlestick";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { YAxis } from "./y-axis";
|
||||
export { ChartTooltip } from "./tooltip";
|
||||
27
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/candlestick-chart.tsx
vendored
Normal file
27
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/candlestick-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { CandlestickChart, Candlestick, Grid, XAxis, YAxis, ChartTooltip } from "@bklitui/ui/charts"
|
||||
import { CandlestickChart, Candlestick, Grid, XAxis, YAxis, ChartTooltip } from "@/components/charts"
|
||||
|
||||
const ohlcData = [
|
||||
{ date: new Date("2024-01-02"), open: 100, high: 108, low: 98, close: 105 },
|
||||
{ date: new Date("2024-01-03"), open: 105, high: 110, low: 102, close: 103 },
|
||||
{ date: new Date("2024-01-04"), open: 103, high: 112, low: 101, close: 110 },
|
||||
{ date: new Date("2024-01-05"), open: 110, high: 115, low: 107, close: 108 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<CandlestickChart data={ohlcData}>
|
||||
<Grid horizontal vertical />
|
||||
<Candlestick />
|
||||
<XAxis />
|
||||
<YAxis />
|
||||
<ChartTooltip />
|
||||
</CandlestickChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip } from "./choropleth";
|
||||
23
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/choropleth-chart.tsx
vendored
Normal file
23
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/choropleth-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip } from "@bklitui/ui/charts"
|
||||
import { ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip } from "@/components/charts"
|
||||
|
||||
const features = [
|
||||
{ id: "US", name: "United States", value: 120 },
|
||||
{ id: "CA", name: "Canada", value: 45 },
|
||||
{ id: "GB", name: "United Kingdom", value: 62 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<ChoroplethChart data={features} aspectRatio="2 / 1">
|
||||
<ChoroplethFeatureComponent />
|
||||
<ChoroplethTooltip />
|
||||
</ChoroplethChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { ComposedChart } from "./composed-chart";
|
||||
export { SeriesBar } from "./series-bar";
|
||||
export { Area } from "./area";
|
||||
export { Line } from "./line";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { ChartTooltip } from "./tooltip";
|
||||
30
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/composed-chart.tsx
vendored
Normal file
30
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/composed-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { ComposedChart, SeriesBar, Area, Line, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts"
|
||||
import { ComposedChart, SeriesBar, Area, Line, Grid, XAxis, ChartTooltip } from "@/components/charts"
|
||||
|
||||
import { curveNatural } from "@visx/curve";
|
||||
|
||||
const chartData = [
|
||||
{ date: new Date("2024-01-01"), revenue: 4200, runRate: 3800 },
|
||||
{ date: new Date("2024-02-01"), revenue: 5100, runRate: 4600 },
|
||||
{ date: new Date("2024-03-01"), revenue: 4800, runRate: 5200 },
|
||||
{ date: new Date("2024-04-01"), revenue: 5500, runRate: 5000 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<ComposedChart data={chartData}>
|
||||
<Grid horizontal />
|
||||
<SeriesBar dataKey="revenue" fill="var(--chart-1)" />
|
||||
<Area dataKey="runRate" curve={curveNatural} fill="var(--chart-4)" fillOpacity={0.35} />
|
||||
<Line dataKey="runRate" curve={curveNatural} stroke="var(--chart-2)" />
|
||||
<XAxis />
|
||||
<ChartTooltip />
|
||||
</ComposedChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { FunnelChart } from "./funnel-chart";
|
||||
21
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/funnel-chart.tsx
vendored
Normal file
21
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/funnel-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { FunnelChart } from "@bklitui/ui/charts"
|
||||
import { FunnelChart } from "@/components/charts"
|
||||
|
||||
const funnelData = [
|
||||
{ label: "Visitors", value: 12000 },
|
||||
{ label: "Signups", value: 4800 },
|
||||
{ label: "Activated", value: 2100 },
|
||||
{ label: "Paid", value: 840 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<FunnelChart data={funnelData} aspectRatio="2 / 1" />
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { Gauge } from "./gauge";
|
||||
22
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/gauge-chart.tsx
vendored
Normal file
22
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/gauge-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { Gauge } from "@bklitui/ui/charts"
|
||||
import { Gauge } from "@/components/charts"
|
||||
|
||||
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<Gauge
|
||||
value={72}
|
||||
centerValue={72}
|
||||
totalNotches={40}
|
||||
defaultLabel="Score"
|
||||
formatOptions={{ style: "percent" }}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
11
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/heatmap-chart-index.ts
vendored
Normal file
11
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/heatmap-chart-index.ts
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export {
|
||||
HeatmapCells,
|
||||
HeatmapChart,
|
||||
HeatmapInteractionBoundary,
|
||||
HeatmapInteractionProvider,
|
||||
HeatmapLegend,
|
||||
HeatmapTooltip,
|
||||
HeatmapXAxis,
|
||||
HeatmapYAxis,
|
||||
} from "./heatmap";
|
||||
53
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/heatmap-chart.tsx
vendored
Normal file
53
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/heatmap-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { HeatmapCells, HeatmapChart, HeatmapInteractionBoundary, HeatmapInteractionProvider, HeatmapLegend, HeatmapTooltip, HeatmapXAxis, HeatmapYAxis } from "@bklitui/ui/charts"
|
||||
import { HeatmapCells, HeatmapChart, HeatmapInteractionBoundary, HeatmapInteractionProvider, HeatmapLegend, HeatmapTooltip, HeatmapXAxis, HeatmapYAxis } from "@/components/charts"
|
||||
|
||||
const data = [
|
||||
{
|
||||
bin: 0,
|
||||
bins: [
|
||||
{ bin: 0, count: 2, date: new Date(2024, 0, 1) },
|
||||
{ bin: 1, count: 0, date: new Date(2024, 0, 2) },
|
||||
{ bin: 2, count: 3, date: new Date(2024, 0, 3) },
|
||||
{ bin: 3, count: 1, date: new Date(2024, 0, 4) },
|
||||
{ bin: 4, count: 4, date: new Date(2024, 0, 5) },
|
||||
{ bin: 5, count: 0, date: new Date(2024, 0, 6) },
|
||||
{ bin: 6, count: 1, date: new Date(2024, 0, 7) },
|
||||
],
|
||||
},
|
||||
{
|
||||
bin: 1,
|
||||
bins: [
|
||||
{ bin: 0, count: 1, date: new Date(2024, 0, 8) },
|
||||
{ bin: 1, count: 2, date: new Date(2024, 0, 9) },
|
||||
{ bin: 2, count: 0, date: new Date(2024, 0, 10) },
|
||||
{ bin: 3, count: 3, date: new Date(2024, 0, 11) },
|
||||
{ bin: 4, count: 2, date: new Date(2024, 0, 12) },
|
||||
{ bin: 5, count: 1, date: new Date(2024, 0, 13) },
|
||||
{ bin: 6, count: 0, date: new Date(2024, 0, 14) },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<HeatmapInteractionProvider>
|
||||
<HeatmapInteractionBoundary>
|
||||
<div className="flex w-full flex-col items-stretch gap-3">
|
||||
<HeatmapChart className="w-full" data={data} layout="fluid">
|
||||
<HeatmapCells />
|
||||
<HeatmapXAxis />
|
||||
<HeatmapYAxis />
|
||||
<HeatmapTooltip />
|
||||
</HeatmapChart>
|
||||
<HeatmapLegend />
|
||||
</div>
|
||||
</HeatmapInteractionBoundary>
|
||||
</HeatmapInteractionProvider>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
6
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/line-chart-index.ts
vendored
Normal file
6
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/line-chart-index.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { LineChart } from "./line-chart";
|
||||
export { Line } from "./line";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { ChartTooltip } from "./tooltip";
|
||||
30
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/line-chart.tsx
vendored
Normal file
30
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/line-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { LineChart, Line, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts"
|
||||
import { LineChart, Line, Grid, XAxis, ChartTooltip } from "@/components/charts"
|
||||
|
||||
import { curveNatural } from "@visx/curve";
|
||||
|
||||
const chartData = [
|
||||
{ date: new Date("2024-01-01"), users: 1200 },
|
||||
{ date: new Date("2024-02-01"), users: 1350 },
|
||||
{ date: new Date("2024-03-01"), users: 1100 },
|
||||
{ date: new Date("2024-04-01"), users: 1450 },
|
||||
{ date: new Date("2024-05-01"), users: 1380 },
|
||||
{ date: new Date("2024-06-01"), users: 1520 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<LineChart data={chartData}>
|
||||
<Grid horizontal />
|
||||
<Line dataKey="users" curve={curveNatural} stroke="var(--chart-line-primary)" />
|
||||
<XAxis />
|
||||
<ChartTooltip />
|
||||
</LineChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { LiveLineChart } from "./live-line-chart";
|
||||
export { LiveLine } from "./live-line";
|
||||
export { LiveXAxis } from "./live-x-axis";
|
||||
export { LiveYAxis } from "./live-y-axis";
|
||||
export { ChartTooltip } from "./tooltip";
|
||||
32
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/live-line-chart.tsx
vendored
Normal file
32
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/live-line-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { LiveLineChart, LiveLine, LiveXAxis, LiveYAxis, ChartTooltip } from "@bklitui/ui/charts"
|
||||
import { LiveLineChart, LiveLine, LiveXAxis, LiveYAxis, ChartTooltip } from "@/components/charts"
|
||||
|
||||
import { curveNatural } from "@visx/curve";
|
||||
|
||||
const initialData = Array.from({ length: 24 }, (_, i) => ({
|
||||
time: Date.now() - (23 - i) * 60_000,
|
||||
value: 50 + Math.sin(i / 3) * 20,
|
||||
}));
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<LiveLineChart
|
||||
data={initialData}
|
||||
interval={1000}
|
||||
maxPoints={24}
|
||||
xDataKey="time"
|
||||
yDataKey="value"
|
||||
>
|
||||
<LiveLine curve={curveNatural} stroke="var(--chart-line-primary)" />
|
||||
<LiveXAxis />
|
||||
<LiveYAxis />
|
||||
<ChartTooltip />
|
||||
</LiveLineChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
4
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/pie-chart-index.ts
vendored
Normal file
4
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/pie-chart-index.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { PieChart } from "./pie-chart";
|
||||
export { PieSlice } from "./pie-slice";
|
||||
export { PieCenter } from "./pie-center";
|
||||
26
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/pie-chart.tsx
vendored
Normal file
26
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/pie-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { PieChart, PieSlice, PieCenter } from "@bklitui/ui/charts"
|
||||
import { PieChart, PieSlice, PieCenter } from "@/components/charts"
|
||||
|
||||
const pieData = [
|
||||
{ label: "Direct", value: 320 },
|
||||
{ label: "Organic", value: 280 },
|
||||
{ label: "Referral", value: 190 },
|
||||
{ label: "Social", value: 140 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<PieChart data={pieData} size={280}>
|
||||
{pieData.map((item, i) => (
|
||||
<PieSlice index={i} key={item.label} />
|
||||
))}
|
||||
<PieCenter defaultLabel="Traffic" />
|
||||
</PieChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { LineChart } from "./line-chart";
|
||||
export { Line } from "./line";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { ChartTooltip } from "./tooltip";
|
||||
export { ProfitLossLine } from "./profit-loss-line";
|
||||
export { ProfitLossLegend } from "./profit-loss-legend";
|
||||
export { ProfitLossLegendHoverProvider } from "./profit-loss-legend-hover";
|
||||
export {
|
||||
profitLossColor,
|
||||
resolveProfitLossTooltipLabel,
|
||||
} from "./profit-loss-line";
|
||||
72
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/profit-loss-line.tsx
vendored
Normal file
72
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/profit-loss-line.tsx
vendored
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import from "@bklitui/ui/charts"
|
||||
import {
|
||||
ChartTooltip,
|
||||
Grid,
|
||||
Line,
|
||||
LineChart,
|
||||
ProfitLossLegend,
|
||||
ProfitLossLegendHoverProvider,
|
||||
ProfitLossLine,
|
||||
profitLossColor,
|
||||
resolveProfitLossTooltipLabel,
|
||||
XAxis,
|
||||
} from "@/components/charts"
|
||||
import { curveLinear } from "@visx/curve";
|
||||
import { useState } from "react";
|
||||
|
||||
const chartData = [
|
||||
{ date: new Date("2024-01-01"), pnl: 420 },
|
||||
{ date: new Date("2024-01-05"), pnl: 180 },
|
||||
{ date: new Date("2024-01-10"), pnl: -240 },
|
||||
{ date: new Date("2024-01-15"), pnl: -90 },
|
||||
{ date: new Date("2024-01-20"), pnl: 310 },
|
||||
{ date: new Date("2024-01-25"), pnl: 520 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
const [legendHoveredIndex, setLegendHoveredIndex] = useState<number | null>(
|
||||
null
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="flex w-full max-w-3xl flex-col gap-2">
|
||||
<ProfitLossLegend
|
||||
align="center"
|
||||
hoveredIndex={legendHoveredIndex}
|
||||
onHoverChange={setLegendHoveredIndex}
|
||||
/>
|
||||
<LineChart data={chartData}>
|
||||
<Grid highlightRowValues={[0]} horizontal />
|
||||
<Line
|
||||
curve={curveLinear}
|
||||
dataKey="pnl"
|
||||
fadeEdges={false}
|
||||
showHighlight={false}
|
||||
stroke="transparent"
|
||||
strokeWidth={0}
|
||||
/>
|
||||
<ProfitLossLegendHoverProvider hoveredIndex={legendHoveredIndex}>
|
||||
<ProfitLossLine dataKey="pnl" />
|
||||
</ProfitLossLegendHoverProvider>
|
||||
<XAxis />
|
||||
<ChartTooltip
|
||||
indicatorColor={(point) => profitLossColor((point.pnl as number) ?? 0)}
|
||||
rows={(point) => {
|
||||
const value = (point.pnl as number) ?? 0;
|
||||
return [
|
||||
{
|
||||
color: profitLossColor(value),
|
||||
label: resolveProfitLossTooltipLabel(""),
|
||||
value,
|
||||
},
|
||||
];
|
||||
}}
|
||||
/>
|
||||
</LineChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { RadarChart } from "./radar-chart";
|
||||
export { RadarGrid } from "./radar-grid";
|
||||
export { RadarAxis } from "./radar-axis";
|
||||
export { RadarLabels } from "./radar-labels";
|
||||
export { RadarArea } from "./radar-area";
|
||||
32
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/radar-chart.tsx
vendored
Normal file
32
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/radar-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { RadarChart, RadarGrid, RadarAxis, RadarLabels, RadarArea } from "@bklitui/ui/charts"
|
||||
import { RadarChart, RadarGrid, RadarAxis, RadarLabels, RadarArea } from "@/components/charts"
|
||||
|
||||
const metrics = [
|
||||
{ key: "speed", label: "Speed" },
|
||||
{ key: "reliability", label: "Reliability" },
|
||||
{ key: "comfort", label: "Comfort" },
|
||||
{ key: "safety", label: "Safety" },
|
||||
{ key: "efficiency", label: "Efficiency" },
|
||||
];
|
||||
const data = [
|
||||
{ id: "a", speed: 80, reliability: 70, comfort: 60, safety: 90, efficiency: 75 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<RadarChart data={data} metrics={metrics} size={320}>
|
||||
<RadarGrid />
|
||||
<RadarAxis />
|
||||
<RadarLabels fontSize={10} offset={16} />
|
||||
{data.map((row, i) => (
|
||||
<RadarArea key={row.id} index={i} fill="var(--chart-line-primary)" fillOpacity={0.35} />
|
||||
))}
|
||||
</RadarChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
4
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/ring-chart-index.ts
vendored
Normal file
4
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/ring-chart-index.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { RingChart } from "./ring-chart";
|
||||
export { Ring } from "./ring";
|
||||
export { RingCenter } from "./ring-center";
|
||||
26
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/ring-chart.tsx
vendored
Normal file
26
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/ring-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { RingChart, Ring, RingCenter } from "@bklitui/ui/charts"
|
||||
import { RingChart, Ring, RingCenter } from "@/components/charts"
|
||||
|
||||
const ringData = [
|
||||
{ label: "Email", value: 42 },
|
||||
{ label: "Social", value: 28 },
|
||||
{ label: "Direct", value: 18 },
|
||||
{ label: "Other", value: 12 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<RingChart data={ringData} size={280} strokeWidth={14}>
|
||||
{ringData.map((item, i) => (
|
||||
<Ring index={i} key={item.label} />
|
||||
))}
|
||||
<RingCenter defaultLabel="Channels" />
|
||||
</RingChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { SankeyChart, SankeyLink, SankeyNode, SankeyTooltip } from "./sankey";
|
||||
34
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/sankey-chart.tsx
vendored
Normal file
34
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/sankey-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { SankeyChart, SankeyLink, SankeyNode, SankeyTooltip } from "@bklitui/ui/charts"
|
||||
import { SankeyChart, SankeyLink, SankeyNode, SankeyTooltip } from "@/components/charts"
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{ name: "Ads" },
|
||||
{ name: "Organic" },
|
||||
{ name: "Landing" },
|
||||
{ name: "Product" },
|
||||
{ name: "Checkout" },
|
||||
],
|
||||
links: [
|
||||
{ source: 0, target: 2, value: 40 },
|
||||
{ source: 1, target: 2, value: 30 },
|
||||
{ source: 2, target: 3, value: 50 },
|
||||
{ source: 3, target: 4, value: 35 },
|
||||
],
|
||||
};
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<SankeyChart data={data} aspectRatio="16 / 9">
|
||||
<SankeyLink />
|
||||
<SankeyNode />
|
||||
<SankeyTooltip />
|
||||
</SankeyChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install
|
||||
export { ScatterChart } from "./scatter-chart";
|
||||
export { Scatter } from "./scatter";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { ChartTooltip } from "./tooltip";
|
||||
29
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/scatter-chart.tsx
vendored
Normal file
29
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/scatter-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { ScatterChart, Scatter, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts"
|
||||
import { ScatterChart, Scatter, Grid, XAxis, ChartTooltip } from "@/components/charts"
|
||||
|
||||
const chartData = [
|
||||
{ date: new Date("2024-01-01"), sessions: 420, conversions: 28 },
|
||||
{ date: new Date("2024-02-01"), sessions: 510, conversions: 34 },
|
||||
{ date: new Date("2024-03-01"), sessions: 390, conversions: 22 },
|
||||
{ date: new Date("2024-04-01"), sessions: 580, conversions: 41 },
|
||||
{ date: new Date("2024-05-01"), sessions: 620, conversions: 38 },
|
||||
{ date: new Date("2024-06-01"), sessions: 710, conversions: 52 },
|
||||
];
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<ScatterChart data={chartData}>
|
||||
<Grid horizontal />
|
||||
<Scatter dataKey="sessions" />
|
||||
<Scatter dataKey="conversions" />
|
||||
<XAxis />
|
||||
<ChartTooltip />
|
||||
</ScatterChart>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/** biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install */
|
||||
export { AreaChart } from "./area-chart";
|
||||
export { Area } from "./area";
|
||||
export { ChartStatFlow } from "./chart-stat-flow";
|
||||
export { useChart } from "./chart-context";
|
||||
export { LinearGradient } from "@visx/gradient";
|
||||
13
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/stat-card-area-01.tsx
vendored
Normal file
13
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/stat-card-area-01.tsx
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
"use client";
|
||||
|
||||
import { StatCardArea } from "@/components/stat-card-area";
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-md">
|
||||
<StatCardArea />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/** biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install */
|
||||
export { type ChoroplethFeature, ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip, useChoropleth } from "./choropleth";
|
||||
export { ChartStatFlow } from "./chart-stat-flow";
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
"use client";
|
||||
|
||||
import { StatCardChoropleth } from "@/components/stat-card-choropleth";
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
<StatCardChoropleth />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/** biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install */
|
||||
export { LineChart } from "./line-chart";
|
||||
export { Line } from "./line";
|
||||
export { ChartStatFlow } from "./chart-stat-flow";
|
||||
export { useChart } from "./chart-context";
|
||||
13
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/stat-card-line-01.tsx
vendored
Normal file
13
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/registry/examples/stat-card-line-01.tsx
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
"use client";
|
||||
|
||||
import { StatCardLine } from "@/components/stat-card-line";
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-md">
|
||||
<StatCardLine />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
328
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/generate-block-registry.mjs
vendored
Normal file
328
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/generate-block-registry.mjs
vendored
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
/**
|
||||
* Syncs stat-card blocks from apps/web/blocks into registry sources and registry.json
|
||||
* (shadcn add + Open in v0). Run from packages/ui after generate-v0-examples.mjs.
|
||||
*/
|
||||
import {
|
||||
cpSync,
|
||||
existsSync,
|
||||
mkdirSync,
|
||||
readFileSync,
|
||||
writeFileSync,
|
||||
} from "node:fs";
|
||||
import { dirname, join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const uiRoot = join(__dirname, "..");
|
||||
const webBlocksRoot = join(uiRoot, "../../apps/web/blocks");
|
||||
const registryBlocksRoot = join(uiRoot, "registry/blocks");
|
||||
const examplesDir = join(uiRoot, "registry/examples");
|
||||
const registryPath = join(uiRoot, "registry.json");
|
||||
|
||||
const TREND_BADGE_REGISTRY = `"use client";
|
||||
|
||||
import { CentralIcon } from "@central-icons-react/all";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function TrendBadge({
|
||||
value,
|
||||
className,
|
||||
}: {
|
||||
value: number;
|
||||
className?: string;
|
||||
}) {
|
||||
const positive = value >= 0;
|
||||
|
||||
return (
|
||||
<Badge
|
||||
className={cn(
|
||||
positive &&
|
||||
"border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
className
|
||||
)}
|
||||
variant={positive ? "outline" : "destructive"}
|
||||
>
|
||||
<CentralIcon
|
||||
className="size-3"
|
||||
data-icon="inline-start"
|
||||
fill="outlined"
|
||||
join="round"
|
||||
name={positive ? "IconArrowUp" : "IconArrowDown"}
|
||||
radius="0"
|
||||
stroke="1.5"
|
||||
/>
|
||||
{positive ? "+" : ""}
|
||||
{value.toFixed(1)}%
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
`;
|
||||
|
||||
const BLOCK_CHART_INDEX = {
|
||||
"stat-card-area-01": `export { AreaChart } from "./area-chart";
|
||||
export { Area } from "./area";
|
||||
export { ChartStatFlow } from "./chart-stat-flow";
|
||||
export { useChart } from "./chart-context";
|
||||
export { LinearGradient } from "@visx/gradient";`,
|
||||
"stat-card-line-01": `export { LineChart } from "./line-chart";
|
||||
export { Line } from "./line";
|
||||
export { ChartStatFlow } from "./chart-stat-flow";
|
||||
export { useChart } from "./chart-context";`,
|
||||
"stat-card-choropleth-01": `export { type ChoroplethFeature, ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip, useChoropleth } from "./choropleth";
|
||||
export { ChartStatFlow } from "./chart-stat-flow";`,
|
||||
};
|
||||
|
||||
/** @type {Record<string, { title: string, description: string, previewMaxWidth: string, registryDependencies: string[], dependencies: string[], files: string[], extraFiles?: { path: string, target: string, content?: string }[] }>} */
|
||||
const BLOCKS = {
|
||||
"stat-card-area-01": {
|
||||
title: "Stat Card Area",
|
||||
description:
|
||||
"Revenue stat card with gradient area sparkline, NumberFlow, and trend badge",
|
||||
previewMaxWidth: "max-w-md",
|
||||
registryDependencies: [
|
||||
"@bklit/area-chart",
|
||||
"@bklit/chart-stat-flow",
|
||||
"card",
|
||||
"badge",
|
||||
],
|
||||
dependencies: [
|
||||
"@visx/curve@4.0.1-alpha.0",
|
||||
"@visx/gradient@4.0.1-alpha.0",
|
||||
"@number-flow/react",
|
||||
"@central-icons-react/all",
|
||||
],
|
||||
files: [
|
||||
"components/stat-card-area.tsx",
|
||||
"components/stat-card-chart.tsx",
|
||||
"components/stat-card-hover-bridge.tsx",
|
||||
"components/trend-badge.tsx",
|
||||
"data/revenue-series.ts",
|
||||
],
|
||||
},
|
||||
"stat-card-line-01": {
|
||||
title: "Stat Card Line",
|
||||
description:
|
||||
"Sessions stat card with line sparkline, overlaid NumberFlow, and trend badge",
|
||||
previewMaxWidth: "max-w-md",
|
||||
registryDependencies: [
|
||||
"@bklit/line-chart",
|
||||
"@bklit/chart-stat-flow",
|
||||
"card",
|
||||
"badge",
|
||||
],
|
||||
dependencies: [
|
||||
"@visx/curve@4.0.1-alpha.0",
|
||||
"@number-flow/react",
|
||||
"@central-icons-react/all",
|
||||
],
|
||||
files: [
|
||||
"components/stat-card-line.tsx",
|
||||
"components/stat-card-chart.tsx",
|
||||
"components/stat-card-hover-bridge.tsx",
|
||||
"components/trend-badge.tsx",
|
||||
"data/sessions-series.ts",
|
||||
],
|
||||
},
|
||||
"stat-card-choropleth-01": {
|
||||
title: "Stat Card Choropleth",
|
||||
description:
|
||||
"Visitor map stat card with choropleth sparkline, NumberFlow, and trend badge",
|
||||
previewMaxWidth: "max-w-3xl",
|
||||
registryDependencies: [
|
||||
"@bklit/choropleth-chart",
|
||||
"@bklit/chart-stat-flow",
|
||||
"card",
|
||||
"badge",
|
||||
],
|
||||
dependencies: [
|
||||
"@number-flow/react",
|
||||
"@types/geojson",
|
||||
"@types/topojson-specification",
|
||||
"@central-icons-react/all",
|
||||
"topojson-client",
|
||||
],
|
||||
files: [
|
||||
"components/stat-card-choropleth.tsx",
|
||||
"components/stat-card-choropleth-hover-bridge.tsx",
|
||||
"components/stat-card-chart.tsx",
|
||||
"components/trend-badge.tsx",
|
||||
"data/visitors.ts",
|
||||
"lib/use-world-data.tsx",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const COMPONENT_EXPORTS = {
|
||||
"stat-card-area-01": "StatCardArea",
|
||||
"stat-card-line-01": "StatCardLine",
|
||||
"stat-card-choropleth-01": "StatCardChoropleth",
|
||||
};
|
||||
|
||||
function transformForRegistry(content, filePath) {
|
||||
if (filePath.endsWith("trend-badge.tsx")) {
|
||||
return TREND_BADGE_REGISTRY;
|
||||
}
|
||||
|
||||
return content
|
||||
.replaceAll("@bklitui/ui/charts", "@/components/charts")
|
||||
.replaceAll("@/components/docs/use-world-data", "@/lib/use-world-data");
|
||||
}
|
||||
|
||||
function copyBlockFile(blockId, relativePath) {
|
||||
const sourcePath = join(webBlocksRoot, blockId, "files", relativePath);
|
||||
const targetPath = join(registryBlocksRoot, blockId, relativePath);
|
||||
|
||||
if (relativePath === "lib/use-world-data.tsx") {
|
||||
const sharedSource = join(
|
||||
uiRoot,
|
||||
"../../apps/web/components/docs/use-world-data.tsx"
|
||||
);
|
||||
mkdirSync(dirname(targetPath), { recursive: true });
|
||||
cpSync(sharedSource, targetPath);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!existsSync(sourcePath)) {
|
||||
throw new Error(`Block source not found: ${sourcePath}`);
|
||||
}
|
||||
|
||||
mkdirSync(dirname(targetPath), { recursive: true });
|
||||
const content = transformForRegistry(
|
||||
readFileSync(sourcePath, "utf8"),
|
||||
relativePath
|
||||
);
|
||||
writeFileSync(targetPath, content);
|
||||
}
|
||||
|
||||
function blockRegistryFiles(blockId, relativePaths) {
|
||||
return relativePaths.map((relativePath) => ({
|
||||
path: `registry/blocks/${blockId}/${relativePath}`,
|
||||
type: relativePath.endsWith(".ts") ? "registry:lib" : "registry:component",
|
||||
target: relativePath,
|
||||
}));
|
||||
}
|
||||
|
||||
function blockChartIndexFile(blockId) {
|
||||
if (!BLOCK_CHART_INDEX[blockId]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
path: `registry/examples/${blockId}-index.ts`,
|
||||
type: "registry:lib",
|
||||
target: "components/charts/index.ts",
|
||||
};
|
||||
}
|
||||
|
||||
const chartStatFlowItem = {
|
||||
name: "chart-stat-flow",
|
||||
type: "registry:component",
|
||||
title: "Chart Stat Flow",
|
||||
description: "Animated stat value and label for chart overlays",
|
||||
registryDependencies: ["@bklit/utils"],
|
||||
dependencies: ["@number-flow/react", "motion"],
|
||||
files: [
|
||||
{
|
||||
path: "src/charts/chart-stat-flow.tsx",
|
||||
type: "registry:component",
|
||||
target: "components/charts/chart-stat-flow.tsx",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
mkdirSync(examplesDir, { recursive: true });
|
||||
mkdirSync(registryBlocksRoot, { recursive: true });
|
||||
|
||||
for (const [blockId, spec] of Object.entries(BLOCKS)) {
|
||||
for (const relativePath of spec.files) {
|
||||
copyBlockFile(blockId, relativePath);
|
||||
}
|
||||
|
||||
const exportName = COMPONENT_EXPORTS[blockId];
|
||||
const mainComponentPath = spec.files.find((file) =>
|
||||
file.startsWith("components/stat-card-")
|
||||
);
|
||||
const importPath = `@/components/${mainComponentPath
|
||||
?.replace("components/", "")
|
||||
.replace(".tsx", "")}`;
|
||||
|
||||
const exampleContent = `"use client";
|
||||
|
||||
import { ${exportName} } from "${importPath}";
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full ${spec.previewMaxWidth}">
|
||||
<${exportName} />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
`;
|
||||
|
||||
writeFileSync(join(examplesDir, `${blockId}.tsx`), exampleContent);
|
||||
|
||||
const chartIndex = BLOCK_CHART_INDEX[blockId];
|
||||
if (chartIndex) {
|
||||
writeFileSync(
|
||||
join(examplesDir, `${blockId}-index.ts`),
|
||||
`/** biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install */\n${chartIndex}\n`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const registry = JSON.parse(readFileSync(registryPath, "utf8"));
|
||||
|
||||
registry.items = registry.items.filter(
|
||||
(item) =>
|
||||
item.name !== "chart-stat-flow" && !item.name.startsWith("stat-card-")
|
||||
);
|
||||
|
||||
registry.items.push(chartStatFlowItem);
|
||||
|
||||
for (const [blockId, spec] of Object.entries(BLOCKS)) {
|
||||
const blockFiles = blockRegistryFiles(blockId, spec.files);
|
||||
const chartIndexFile = blockChartIndexFile(blockId);
|
||||
if (chartIndexFile) {
|
||||
blockFiles.push(chartIndexFile);
|
||||
}
|
||||
|
||||
registry.items.push({
|
||||
name: blockId,
|
||||
type: "registry:block",
|
||||
title: spec.title,
|
||||
description: spec.description,
|
||||
registryDependencies: spec.registryDependencies,
|
||||
dependencies: spec.dependencies,
|
||||
files: blockFiles,
|
||||
});
|
||||
|
||||
const exampleFiles = [
|
||||
{
|
||||
path: `registry/examples/${blockId}.tsx`,
|
||||
type: "registry:page",
|
||||
target: "app/page.tsx",
|
||||
},
|
||||
];
|
||||
|
||||
if (chartIndexFile) {
|
||||
exampleFiles.push(chartIndexFile);
|
||||
}
|
||||
|
||||
registry.items.push({
|
||||
name: `${blockId}-example`,
|
||||
type: "registry:example",
|
||||
title: `${spec.title} Example`,
|
||||
description: `${spec.description} — demo for Open in v0`,
|
||||
registryDependencies: [`@bklit/${blockId}`],
|
||||
dependencies: spec.dependencies,
|
||||
files: exampleFiles,
|
||||
});
|
||||
}
|
||||
|
||||
writeFileSync(registryPath, `${JSON.stringify(registry, null, 2)}\n`);
|
||||
console.log(
|
||||
`Synced ${Object.keys(BLOCKS).length} stat-card blocks into registry (${Object.keys(BLOCKS).length * 2 + 1} items).`
|
||||
);
|
||||
520
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/generate-v0-examples.mjs
vendored
Normal file
520
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/generate-v0-examples.mjs
vendored
Normal file
|
|
@ -0,0 +1,520 @@
|
|||
/**
|
||||
* Generates registry example entries for Open in v0 (registry:example + registry:page).
|
||||
* Run from packages/ui: node scripts/generate-v0-examples.mjs
|
||||
*/
|
||||
import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
|
||||
import { dirname, join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const root = join(__dirname, "..");
|
||||
const examplesDir = join(root, "registry/examples");
|
||||
|
||||
/** Per-chart barrel for installed @/components/charts/* paths in v0. */
|
||||
const CHART_INDEX_EXPORTS = {
|
||||
"area-chart": `export { AreaChart } from "./area-chart";
|
||||
export { Area } from "./area";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { ChartTooltip } from "./tooltip";`,
|
||||
"bar-chart": `export { BarChart } from "./bar-chart";
|
||||
export { Bar } from "./bar";
|
||||
export { BarXAxis } from "./bar-x-axis";
|
||||
export { Grid } from "./grid";
|
||||
export { ChartTooltip } from "./tooltip";`,
|
||||
"line-chart": `export { LineChart } from "./line-chart";
|
||||
export { Line } from "./line";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { ChartTooltip } from "./tooltip";`,
|
||||
"scatter-chart": `export { ScatterChart } from "./scatter-chart";
|
||||
export { Scatter } from "./scatter";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { ChartTooltip } from "./tooltip";`,
|
||||
"pie-chart": `export { PieChart } from "./pie-chart";
|
||||
export { PieSlice } from "./pie-slice";
|
||||
export { PieCenter } from "./pie-center";`,
|
||||
"gauge-chart": `export { Gauge } from "./gauge";`,
|
||||
"heatmap-chart": `export {
|
||||
HeatmapCells,
|
||||
HeatmapChart,
|
||||
HeatmapInteractionBoundary,
|
||||
HeatmapInteractionProvider,
|
||||
HeatmapLegend,
|
||||
HeatmapTooltip,
|
||||
HeatmapXAxis,
|
||||
HeatmapYAxis,
|
||||
} from "./heatmap";`,
|
||||
"ring-chart": `export { RingChart } from "./ring-chart";
|
||||
export { Ring } from "./ring";
|
||||
export { RingCenter } from "./ring-center";`,
|
||||
"radar-chart": `export { RadarChart } from "./radar-chart";
|
||||
export { RadarGrid } from "./radar-grid";
|
||||
export { RadarAxis } from "./radar-axis";
|
||||
export { RadarLabels } from "./radar-labels";
|
||||
export { RadarArea } from "./radar-area";`,
|
||||
"composed-chart": `export { ComposedChart } from "./composed-chart";
|
||||
export { SeriesBar } from "./series-bar";
|
||||
export { Area } from "./area";
|
||||
export { Line } from "./line";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { ChartTooltip } from "./tooltip";`,
|
||||
"funnel-chart": `export { FunnelChart } from "./funnel-chart";`,
|
||||
"sankey-chart": `export { SankeyChart, SankeyLink, SankeyNode, SankeyTooltip } from "./sankey";`,
|
||||
"candlestick-chart": `export { CandlestickChart } from "./candlestick-chart";
|
||||
export { Candlestick } from "./candlestick";
|
||||
export { Grid } from "./grid";
|
||||
export { XAxis } from "./x-axis";
|
||||
export { YAxis } from "./y-axis";
|
||||
export { ChartTooltip } from "./tooltip";`,
|
||||
"choropleth-chart": `export { ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip } from "./choropleth";`,
|
||||
"live-line-chart": `export { LiveLineChart } from "./live-line-chart";
|
||||
export { LiveLine } from "./live-line";
|
||||
export { LiveXAxis } from "./live-x-axis";
|
||||
export { LiveYAxis } from "./live-y-axis";
|
||||
export { ChartTooltip } from "./tooltip";`,
|
||||
};
|
||||
|
||||
/** @type {Record<string, { registryDependencies: string[], dependencies: string[], importFrom: string, data: string, body: string }>} */
|
||||
const EXAMPLES = {
|
||||
"area-chart": {
|
||||
registryDependencies: [
|
||||
"@bklit/area-chart",
|
||||
"@bklit/grid",
|
||||
"@bklit/x-axis",
|
||||
"@bklit/chart-tooltip",
|
||||
],
|
||||
dependencies: [
|
||||
"@visx/curve@4.0.1-alpha.0",
|
||||
"@visx/shape@4.0.1-alpha.0",
|
||||
"motion",
|
||||
],
|
||||
importFrom: "AreaChart, Area, Grid, XAxis, ChartTooltip",
|
||||
data: `const chartData = [
|
||||
{ date: new Date("2024-01-01"), desktop: 186 },
|
||||
{ date: new Date("2024-02-01"), desktop: 305 },
|
||||
{ date: new Date("2024-03-01"), desktop: 237 },
|
||||
{ date: new Date("2024-04-01"), desktop: 73 },
|
||||
{ date: new Date("2024-05-01"), desktop: 209 },
|
||||
{ date: new Date("2024-06-01"), desktop: 214 },
|
||||
];`,
|
||||
body: `<AreaChart data={chartData} animationDuration={1100}>
|
||||
<Grid horizontal />
|
||||
<Area dataKey="desktop" curve={curveNatural} strokeWidth={2.5} fillOpacity={0.4} />
|
||||
<XAxis />
|
||||
<ChartTooltip />
|
||||
</AreaChart>`,
|
||||
extraImports: `import { curveNatural } from "@visx/curve";`,
|
||||
},
|
||||
"bar-chart": {
|
||||
registryDependencies: [
|
||||
"@bklit/bar-chart",
|
||||
"@bklit/grid",
|
||||
"@bklit/chart-tooltip",
|
||||
],
|
||||
dependencies: [
|
||||
"@visx/gradient@4.0.1-alpha.0",
|
||||
"@visx/pattern@4.0.1-alpha.0",
|
||||
"@visx/shape@4.0.1-alpha.0",
|
||||
"motion",
|
||||
],
|
||||
importFrom: "BarChart, Bar, BarXAxis, Grid, ChartTooltip",
|
||||
data: `const data = [
|
||||
{ month: "Jan", revenue: 12000, profit: 4500 },
|
||||
{ month: "Feb", revenue: 15500, profit: 5200 },
|
||||
{ month: "Mar", revenue: 11000, profit: 3800 },
|
||||
{ month: "Apr", revenue: 18500, profit: 7100 },
|
||||
{ month: "May", revenue: 16800, profit: 5400 },
|
||||
{ month: "Jun", revenue: 21200, profit: 8800 },
|
||||
];`,
|
||||
body: `<BarChart data={data} xDataKey="month">
|
||||
<Grid horizontal />
|
||||
<Bar dataKey="revenue" fill="var(--chart-line-primary)" lineCap="round" />
|
||||
<Bar dataKey="profit" fill="var(--chart-line-secondary)" lineCap="round" />
|
||||
<BarXAxis />
|
||||
<ChartTooltip />
|
||||
</BarChart>`,
|
||||
},
|
||||
"line-chart": {
|
||||
registryDependencies: [
|
||||
"@bklit/line-chart",
|
||||
"@bklit/grid",
|
||||
"@bklit/x-axis",
|
||||
"@bklit/chart-tooltip",
|
||||
],
|
||||
dependencies: [
|
||||
"@visx/curve@4.0.1-alpha.0",
|
||||
"@visx/shape@4.0.1-alpha.0",
|
||||
"motion",
|
||||
],
|
||||
importFrom: "LineChart, Line, Grid, XAxis, ChartTooltip",
|
||||
data: `const chartData = [
|
||||
{ date: new Date("2024-01-01"), users: 1200 },
|
||||
{ date: new Date("2024-02-01"), users: 1350 },
|
||||
{ date: new Date("2024-03-01"), users: 1100 },
|
||||
{ date: new Date("2024-04-01"), users: 1450 },
|
||||
{ date: new Date("2024-05-01"), users: 1380 },
|
||||
{ date: new Date("2024-06-01"), users: 1520 },
|
||||
];`,
|
||||
body: `<LineChart data={chartData}>
|
||||
<Grid horizontal />
|
||||
<Line dataKey="users" curve={curveNatural} stroke="var(--chart-line-primary)" />
|
||||
<XAxis />
|
||||
<ChartTooltip />
|
||||
</LineChart>`,
|
||||
extraImports: `import { curveNatural } from "@visx/curve";`,
|
||||
},
|
||||
"scatter-chart": {
|
||||
registryDependencies: [
|
||||
"@bklit/scatter-chart",
|
||||
"@bklit/grid",
|
||||
"@bklit/x-axis",
|
||||
"@bklit/chart-tooltip",
|
||||
],
|
||||
dependencies: ["d3-scale", "d3-array", "motion", "react-use-measure"],
|
||||
importFrom: "ScatterChart, Scatter, Grid, XAxis, ChartTooltip",
|
||||
data: `const chartData = [
|
||||
{ date: new Date("2024-01-01"), sessions: 420, conversions: 28 },
|
||||
{ date: new Date("2024-02-01"), sessions: 510, conversions: 34 },
|
||||
{ date: new Date("2024-03-01"), sessions: 390, conversions: 22 },
|
||||
{ date: new Date("2024-04-01"), sessions: 580, conversions: 41 },
|
||||
{ date: new Date("2024-05-01"), sessions: 620, conversions: 38 },
|
||||
{ date: new Date("2024-06-01"), sessions: 710, conversions: 52 },
|
||||
];`,
|
||||
body: `<ScatterChart data={chartData}>
|
||||
<Grid horizontal />
|
||||
<Scatter dataKey="sessions" />
|
||||
<Scatter dataKey="conversions" />
|
||||
<XAxis />
|
||||
<ChartTooltip />
|
||||
</ScatterChart>`,
|
||||
},
|
||||
"pie-chart": {
|
||||
registryDependencies: ["@bklit/pie-chart"],
|
||||
dependencies: ["@visx/shape@4.0.1-alpha.0", "motion"],
|
||||
importFrom: "PieChart, PieSlice, PieCenter",
|
||||
data: `const pieData = [
|
||||
{ label: "Direct", value: 320 },
|
||||
{ label: "Organic", value: 280 },
|
||||
{ label: "Referral", value: 190 },
|
||||
{ label: "Social", value: 140 },
|
||||
];`,
|
||||
body: `<PieChart data={pieData} size={280}>
|
||||
{pieData.map((item, i) => (
|
||||
<PieSlice index={i} key={item.label} />
|
||||
))}
|
||||
<PieCenter defaultLabel="Traffic" />
|
||||
</PieChart>`,
|
||||
},
|
||||
"gauge-chart": {
|
||||
registryDependencies: ["@bklit/gauge-chart"],
|
||||
dependencies: ["@visx/shape@4.0.1-alpha.0", "motion"],
|
||||
importFrom: "Gauge",
|
||||
data: "",
|
||||
body: `<Gauge
|
||||
value={72}
|
||||
centerValue={72}
|
||||
totalNotches={40}
|
||||
defaultLabel="Score"
|
||||
formatOptions={{ style: "percent" }}
|
||||
/>`,
|
||||
},
|
||||
"heatmap-chart": {
|
||||
registryDependencies: ["@bklit/heatmap-chart"],
|
||||
dependencies: [
|
||||
"@visx/heatmap@4.0.1-alpha.0",
|
||||
"@visx/shape@4.0.1-alpha.0",
|
||||
"motion",
|
||||
],
|
||||
importFrom:
|
||||
"HeatmapCells, HeatmapChart, HeatmapInteractionBoundary, HeatmapInteractionProvider, HeatmapLegend, HeatmapTooltip, HeatmapXAxis, HeatmapYAxis",
|
||||
data: `const data = [
|
||||
{
|
||||
bin: 0,
|
||||
bins: [
|
||||
{ bin: 0, count: 2, date: new Date(2024, 0, 1) },
|
||||
{ bin: 1, count: 0, date: new Date(2024, 0, 2) },
|
||||
{ bin: 2, count: 3, date: new Date(2024, 0, 3) },
|
||||
{ bin: 3, count: 1, date: new Date(2024, 0, 4) },
|
||||
{ bin: 4, count: 4, date: new Date(2024, 0, 5) },
|
||||
{ bin: 5, count: 0, date: new Date(2024, 0, 6) },
|
||||
{ bin: 6, count: 1, date: new Date(2024, 0, 7) },
|
||||
],
|
||||
},
|
||||
{
|
||||
bin: 1,
|
||||
bins: [
|
||||
{ bin: 0, count: 1, date: new Date(2024, 0, 8) },
|
||||
{ bin: 1, count: 2, date: new Date(2024, 0, 9) },
|
||||
{ bin: 2, count: 0, date: new Date(2024, 0, 10) },
|
||||
{ bin: 3, count: 3, date: new Date(2024, 0, 11) },
|
||||
{ bin: 4, count: 2, date: new Date(2024, 0, 12) },
|
||||
{ bin: 5, count: 1, date: new Date(2024, 0, 13) },
|
||||
{ bin: 6, count: 0, date: new Date(2024, 0, 14) },
|
||||
],
|
||||
},
|
||||
];`,
|
||||
body: `<HeatmapInteractionProvider>
|
||||
<HeatmapInteractionBoundary>
|
||||
<div className="flex w-full flex-col items-stretch gap-3">
|
||||
<HeatmapChart className="w-full" data={data} layout="fluid">
|
||||
<HeatmapCells />
|
||||
<HeatmapXAxis />
|
||||
<HeatmapYAxis />
|
||||
<HeatmapTooltip />
|
||||
</HeatmapChart>
|
||||
<HeatmapLegend />
|
||||
</div>
|
||||
</HeatmapInteractionBoundary>
|
||||
</HeatmapInteractionProvider>`,
|
||||
},
|
||||
"ring-chart": {
|
||||
registryDependencies: ["@bklit/ring-chart"],
|
||||
dependencies: ["@visx/shape@4.0.1-alpha.0", "motion"],
|
||||
importFrom: "RingChart, Ring, RingCenter",
|
||||
data: `const ringData = [
|
||||
{ label: "Email", value: 42 },
|
||||
{ label: "Social", value: 28 },
|
||||
{ label: "Direct", value: 18 },
|
||||
{ label: "Other", value: 12 },
|
||||
];`,
|
||||
body: `<RingChart data={ringData} size={280} strokeWidth={14}>
|
||||
{ringData.map((item, i) => (
|
||||
<Ring index={i} key={item.label} />
|
||||
))}
|
||||
<RingCenter defaultLabel="Channels" />
|
||||
</RingChart>`,
|
||||
},
|
||||
"radar-chart": {
|
||||
registryDependencies: ["@bklit/radar-chart"],
|
||||
dependencies: ["@visx/shape@4.0.1-alpha.0", "motion"],
|
||||
importFrom: "RadarChart, RadarGrid, RadarAxis, RadarLabels, RadarArea",
|
||||
data: `const metrics = [
|
||||
{ key: "speed", label: "Speed" },
|
||||
{ key: "reliability", label: "Reliability" },
|
||||
{ key: "comfort", label: "Comfort" },
|
||||
{ key: "safety", label: "Safety" },
|
||||
{ key: "efficiency", label: "Efficiency" },
|
||||
];
|
||||
const data = [
|
||||
{ id: "a", speed: 80, reliability: 70, comfort: 60, safety: 90, efficiency: 75 },
|
||||
];`,
|
||||
body: `<RadarChart data={data} metrics={metrics} size={320}>
|
||||
<RadarGrid />
|
||||
<RadarAxis />
|
||||
<RadarLabels fontSize={10} offset={16} />
|
||||
{data.map((row, i) => (
|
||||
<RadarArea key={row.id} index={i} fill="var(--chart-line-primary)" fillOpacity={0.35} />
|
||||
))}
|
||||
</RadarChart>`,
|
||||
},
|
||||
"composed-chart": {
|
||||
registryDependencies: [
|
||||
"@bklit/composed-chart",
|
||||
"@bklit/grid",
|
||||
"@bklit/x-axis",
|
||||
"@bklit/chart-tooltip",
|
||||
],
|
||||
dependencies: [
|
||||
"@visx/curve@4.0.1-alpha.0",
|
||||
"@visx/shape@4.0.1-alpha.0",
|
||||
"motion",
|
||||
],
|
||||
importFrom:
|
||||
"ComposedChart, SeriesBar, Area, Line, Grid, XAxis, ChartTooltip",
|
||||
data: `const chartData = [
|
||||
{ date: new Date("2024-01-01"), revenue: 4200, runRate: 3800 },
|
||||
{ date: new Date("2024-02-01"), revenue: 5100, runRate: 4600 },
|
||||
{ date: new Date("2024-03-01"), revenue: 4800, runRate: 5200 },
|
||||
{ date: new Date("2024-04-01"), revenue: 5500, runRate: 5000 },
|
||||
];`,
|
||||
body: `<ComposedChart data={chartData}>
|
||||
<Grid horizontal />
|
||||
<SeriesBar dataKey="revenue" fill="var(--chart-1)" />
|
||||
<Area dataKey="runRate" curve={curveNatural} fill="var(--chart-4)" fillOpacity={0.35} />
|
||||
<Line dataKey="runRate" curve={curveNatural} stroke="var(--chart-2)" />
|
||||
<XAxis />
|
||||
<ChartTooltip />
|
||||
</ComposedChart>`,
|
||||
extraImports: `import { curveNatural } from "@visx/curve";`,
|
||||
},
|
||||
"funnel-chart": {
|
||||
registryDependencies: ["@bklit/funnel-chart"],
|
||||
dependencies: ["@visx/shape@4.0.1-alpha.0", "motion"],
|
||||
importFrom: "FunnelChart",
|
||||
data: `const funnelData = [
|
||||
{ label: "Visitors", value: 12000 },
|
||||
{ label: "Signups", value: 4800 },
|
||||
{ label: "Activated", value: 2100 },
|
||||
{ label: "Paid", value: 840 },
|
||||
];`,
|
||||
body: `<FunnelChart data={funnelData} aspectRatio="2 / 1" />`,
|
||||
},
|
||||
"sankey-chart": {
|
||||
registryDependencies: ["@bklit/sankey-chart"],
|
||||
dependencies: [
|
||||
"@visx/sankey@4.0.1-alpha.0",
|
||||
"@visx/shape@4.0.1-alpha.0",
|
||||
"motion",
|
||||
],
|
||||
importFrom: "SankeyChart, SankeyLink, SankeyNode, SankeyTooltip",
|
||||
data: `const data = {
|
||||
nodes: [
|
||||
{ name: "Ads" },
|
||||
{ name: "Organic" },
|
||||
{ name: "Landing" },
|
||||
{ name: "Product" },
|
||||
{ name: "Checkout" },
|
||||
],
|
||||
links: [
|
||||
{ source: 0, target: 2, value: 40 },
|
||||
{ source: 1, target: 2, value: 30 },
|
||||
{ source: 2, target: 3, value: 50 },
|
||||
{ source: 3, target: 4, value: 35 },
|
||||
],
|
||||
};`,
|
||||
body: `<SankeyChart data={data} aspectRatio="16 / 9">
|
||||
<SankeyLink />
|
||||
<SankeyNode />
|
||||
<SankeyTooltip />
|
||||
</SankeyChart>`,
|
||||
},
|
||||
"candlestick-chart": {
|
||||
registryDependencies: [
|
||||
"@bklit/candlestick-chart",
|
||||
"@bklit/grid",
|
||||
"@bklit/x-axis",
|
||||
"@bklit/y-axis",
|
||||
"@bklit/chart-tooltip",
|
||||
],
|
||||
dependencies: ["@visx/shape@4.0.1-alpha.0", "motion"],
|
||||
importFrom:
|
||||
"CandlestickChart, Candlestick, Grid, XAxis, YAxis, ChartTooltip",
|
||||
data: `const ohlcData = [
|
||||
{ date: new Date("2024-01-02"), open: 100, high: 108, low: 98, close: 105 },
|
||||
{ date: new Date("2024-01-03"), open: 105, high: 110, low: 102, close: 103 },
|
||||
{ date: new Date("2024-01-04"), open: 103, high: 112, low: 101, close: 110 },
|
||||
{ date: new Date("2024-01-05"), open: 110, high: 115, low: 107, close: 108 },
|
||||
];`,
|
||||
body: `<CandlestickChart data={ohlcData}>
|
||||
<Grid horizontal vertical />
|
||||
<Candlestick />
|
||||
<XAxis />
|
||||
<YAxis />
|
||||
<ChartTooltip />
|
||||
</CandlestickChart>`,
|
||||
},
|
||||
"choropleth-chart": {
|
||||
registryDependencies: ["@bklit/choropleth-chart"],
|
||||
dependencies: ["@visx/geo@4.0.1-alpha.0", "d3-geo", "topojson-client"],
|
||||
importFrom:
|
||||
"ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip",
|
||||
data: `const features = [
|
||||
{ id: "US", name: "United States", value: 120 },
|
||||
{ id: "CA", name: "Canada", value: 45 },
|
||||
{ id: "GB", name: "United Kingdom", value: 62 },
|
||||
];`,
|
||||
body: `<ChoroplethChart data={features} aspectRatio="2 / 1">
|
||||
<ChoroplethFeatureComponent />
|
||||
<ChoroplethTooltip />
|
||||
</ChoroplethChart>`,
|
||||
},
|
||||
"live-line-chart": {
|
||||
registryDependencies: ["@bklit/live-line-chart", "@bklit/chart-tooltip"],
|
||||
dependencies: [
|
||||
"@visx/curve@4.0.1-alpha.0",
|
||||
"@visx/shape@4.0.1-alpha.0",
|
||||
"motion",
|
||||
],
|
||||
importFrom: "LiveLineChart, LiveLine, LiveXAxis, LiveYAxis, ChartTooltip",
|
||||
data: `const initialData = Array.from({ length: 24 }, (_, i) => ({
|
||||
time: Date.now() - (23 - i) * 60_000,
|
||||
value: 50 + Math.sin(i / 3) * 20,
|
||||
}));`,
|
||||
body: `<LiveLineChart
|
||||
data={initialData}
|
||||
interval={1000}
|
||||
maxPoints={24}
|
||||
xDataKey="time"
|
||||
yDataKey="value"
|
||||
>
|
||||
<LiveLine curve={curveNatural} stroke="var(--chart-line-primary)" />
|
||||
<LiveXAxis />
|
||||
<LiveYAxis />
|
||||
<ChartTooltip />
|
||||
</LiveLineChart>`,
|
||||
extraImports: `import { curveNatural } from "@visx/curve";`,
|
||||
},
|
||||
};
|
||||
|
||||
mkdirSync(examplesDir, { recursive: true });
|
||||
|
||||
for (const [slug, spec] of Object.entries(EXAMPLES)) {
|
||||
const extra = spec.extraImports ? `${spec.extraImports}\n\n` : "";
|
||||
const content = `"use client"
|
||||
|
||||
// In your app (monorepo/npm): import { ${spec.importFrom} } from "@bklitui/ui/charts"
|
||||
import { ${spec.importFrom} } from "@/components/charts"
|
||||
|
||||
${extra}${spec.data}
|
||||
|
||||
export default function Component() {
|
||||
return (
|
||||
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-3xl">
|
||||
${spec.body}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
`;
|
||||
writeFileSync(join(examplesDir, `${slug}.tsx`), content);
|
||||
|
||||
const indexExports = CHART_INDEX_EXPORTS[slug];
|
||||
if (indexExports) {
|
||||
writeFileSync(
|
||||
join(examplesDir, `${slug}-index.ts`),
|
||||
`// biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install\n${indexExports}\n`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const registryPath = join(root, "registry.json");
|
||||
const registry = JSON.parse(readFileSync(registryPath, "utf8"));
|
||||
|
||||
registry.items = registry.items.filter(
|
||||
(item) => !item.name.endsWith("-example")
|
||||
);
|
||||
|
||||
const exampleItems = Object.entries(EXAMPLES).map(([slug, spec]) => {
|
||||
const files = [
|
||||
{
|
||||
path: `registry/examples/${slug}.tsx`,
|
||||
type: "registry:page",
|
||||
target: "app/page.tsx",
|
||||
},
|
||||
];
|
||||
if (CHART_INDEX_EXPORTS[slug]) {
|
||||
files.push({
|
||||
path: `registry/examples/${slug}-index.ts`,
|
||||
type: "registry:lib",
|
||||
target: "components/charts/index.ts",
|
||||
});
|
||||
}
|
||||
return {
|
||||
name: `${slug}-example`,
|
||||
type: "registry:example",
|
||||
title: `${slug.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())} Example`,
|
||||
description: `Composable ${slug} demo for Open in v0`,
|
||||
registryDependencies: spec.registryDependencies,
|
||||
dependencies: spec.dependencies,
|
||||
files,
|
||||
};
|
||||
});
|
||||
|
||||
registry.items.push(...exampleItems);
|
||||
|
||||
writeFileSync(registryPath, `${JSON.stringify(registry, null, 2)}\n`);
|
||||
console.log(`Wrote ${Object.keys(EXAMPLES).length} v0 example registry items`);
|
||||
24
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/run-tests.mjs
vendored
Normal file
24
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/run-tests.mjs
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { spawnSync } from "node:child_process";
|
||||
import { readdirSync } from "node:fs";
|
||||
import { dirname, join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const packageRoot = join(dirname(fileURLToPath(import.meta.url)), "..");
|
||||
const testDir = join(packageRoot, "src/charts/__tests__");
|
||||
|
||||
const tests = readdirSync(testDir)
|
||||
.filter((name) => name.endsWith(".test.ts"))
|
||||
.map((name) => join(testDir, name));
|
||||
|
||||
if (tests.length === 0) {
|
||||
console.error(`No test files found in ${testDir}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const result = spawnSync(
|
||||
process.execPath,
|
||||
["--import", "tsx", "--test", ...tests],
|
||||
{ stdio: "inherit", cwd: packageRoot }
|
||||
);
|
||||
|
||||
process.exit(result.status ?? 1);
|
||||
169
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/verify-registry-deps.mjs
vendored
Normal file
169
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/verify-registry-deps.mjs
vendored
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
#!/usr/bin/env node
|
||||
/**
|
||||
* Verifies registry item `dependencies` cover all npm imports in the item's
|
||||
* file tree plus transitive @bklit registryDependencies (shadcn / v0 install closure).
|
||||
*/
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const uiRoot = path.join(__dirname, "..");
|
||||
const registryPath = path.join(uiRoot, "registry.json");
|
||||
|
||||
const registry = JSON.parse(fs.readFileSync(registryPath, "utf8"));
|
||||
const byName = Object.fromEntries(
|
||||
registry.items.map((item) => [item.name, item])
|
||||
);
|
||||
|
||||
const importRe =
|
||||
/(?:import|export)\s+(?:type\s+)?(?:[^'"]+\s+from\s+)?['"]([^'"]+)['"]/g;
|
||||
const DEP_VERSION_SUFFIX_RE = /@[\d.]+(-[\w.]+)?$/;
|
||||
const BKLIT_REGISTRY_DEP_RE = /^@bklit\/(.+)$/;
|
||||
|
||||
function getPackageName(spec) {
|
||||
if (spec.startsWith(".") || spec.startsWith("@/")) {
|
||||
return null;
|
||||
}
|
||||
if (spec.startsWith("@")) {
|
||||
const parts = spec.split("/");
|
||||
return `${parts[0]}/${parts[1]}`;
|
||||
}
|
||||
return spec.split("/")[0];
|
||||
}
|
||||
|
||||
function normalizeDep(dep) {
|
||||
return dep.replace(DEP_VERSION_SUFFIX_RE, "");
|
||||
}
|
||||
|
||||
/** Import specifiers that are satisfied by @types/* registry dependencies. */
|
||||
const TYPES_ALIASES = {
|
||||
geojson: ["geojson", "@types/geojson"],
|
||||
};
|
||||
|
||||
function isDeclared(pkg, declared) {
|
||||
if (declared.has(pkg)) {
|
||||
return true;
|
||||
}
|
||||
const aliases = TYPES_ALIASES[pkg];
|
||||
if (aliases) {
|
||||
return aliases.some((name) => declared.has(name));
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function scanFiles(files) {
|
||||
const used = new Set();
|
||||
for (const file of files ?? []) {
|
||||
const fullPath = path.join(uiRoot, file.path);
|
||||
if (!fs.existsSync(fullPath)) {
|
||||
throw new Error(`Registry file not found: ${file.path}`);
|
||||
}
|
||||
const content = fs.readFileSync(fullPath, "utf8");
|
||||
importRe.lastIndex = 0;
|
||||
let match = importRe.exec(content);
|
||||
while (match) {
|
||||
const pkg = getPackageName(match[1]);
|
||||
if (pkg && pkg !== "react" && pkg !== "react-dom") {
|
||||
used.add(pkg);
|
||||
}
|
||||
match = importRe.exec(content);
|
||||
}
|
||||
}
|
||||
return used;
|
||||
}
|
||||
|
||||
function getRegistryDepName(dep) {
|
||||
const m = dep.match(BKLIT_REGISTRY_DEP_RE);
|
||||
return m ? m[1] : null;
|
||||
}
|
||||
|
||||
function collectDeclared(name, visited = new Set()) {
|
||||
const declared = new Set();
|
||||
const visit = (itemName) => {
|
||||
if (visited.has(itemName)) {
|
||||
return;
|
||||
}
|
||||
visited.add(itemName);
|
||||
const item = byName[itemName];
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
for (const dep of item.dependencies ?? []) {
|
||||
declared.add(normalizeDep(dep));
|
||||
}
|
||||
for (const regDep of item.registryDependencies ?? []) {
|
||||
const nested = getRegistryDepName(regDep);
|
||||
if (nested) {
|
||||
visit(nested);
|
||||
}
|
||||
}
|
||||
};
|
||||
visit(name);
|
||||
return declared;
|
||||
}
|
||||
|
||||
function collectUsed(name, visited = new Set()) {
|
||||
const used = new Set();
|
||||
const visit = (itemName) => {
|
||||
if (visited.has(itemName)) {
|
||||
return;
|
||||
}
|
||||
visited.add(itemName);
|
||||
const item = byName[itemName];
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
for (const pkg of scanFiles(item.files)) {
|
||||
used.add(pkg);
|
||||
}
|
||||
for (const regDep of item.registryDependencies ?? []) {
|
||||
const nested = getRegistryDepName(regDep);
|
||||
if (nested) {
|
||||
visit(nested);
|
||||
}
|
||||
}
|
||||
};
|
||||
visit(name);
|
||||
return used;
|
||||
}
|
||||
|
||||
const chartItems = registry.items.filter(
|
||||
(item) =>
|
||||
item.type === "registry:component" &&
|
||||
(item.name.endsWith("-chart") ||
|
||||
item.name === "chart-context" ||
|
||||
item.name === "chart-animation")
|
||||
);
|
||||
|
||||
const utilityItems = registry.items.filter((item) =>
|
||||
["grid", "x-axis", "y-axis", "chart-tooltip", "legend", "markers"].includes(
|
||||
item.name
|
||||
)
|
||||
);
|
||||
|
||||
const failures = [];
|
||||
|
||||
for (const item of [...chartItems, ...utilityItems]) {
|
||||
const declared = collectDeclared(item.name);
|
||||
const used = collectUsed(item.name);
|
||||
const missing = [...used].filter((pkg) => !isDeclared(pkg, declared)).sort();
|
||||
if (missing.length > 0) {
|
||||
failures.push({ name: item.name, missing });
|
||||
}
|
||||
}
|
||||
|
||||
if (failures.length > 0) {
|
||||
console.error("Registry dependency closure check failed:\n");
|
||||
for (const { name, missing } of failures) {
|
||||
console.error(` ${name}: missing ${missing.join(", ")}`);
|
||||
}
|
||||
console.error(
|
||||
"\nAdd missing packages to `dependencies` in packages/ui/registry.json (on the item or a registryDependency)."
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log(
|
||||
`Registry dependency closure OK (${chartItems.length + utilityItems.length} items checked).`
|
||||
);
|
||||
178
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/verify-registry-files.mjs
vendored
Normal file
178
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/verify-registry-files.mjs
vendored
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
#!/usr/bin/env node
|
||||
/**
|
||||
* Verifies every installable registry item ships all local `./` imports in its
|
||||
* transitive file closure (item files + registryDependencies).
|
||||
*
|
||||
* Also rejects CommonJS `require("react-dom")` in registry source files — it
|
||||
* breaks Vite/ESM consumers even though Next.js/webpack may tolerate it.
|
||||
*/
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const uiRoot = path.join(__dirname, "..");
|
||||
const registryPath = path.join(uiRoot, "registry.json");
|
||||
|
||||
const registry = JSON.parse(fs.readFileSync(registryPath, "utf8"));
|
||||
const byName = Object.fromEntries(
|
||||
registry.items.map((item) => [item.name, item])
|
||||
);
|
||||
|
||||
const importRe =
|
||||
/(?:import|export)\s+(?:type\s+)?(?:[^'"]+\s+from\s+)?['"](\.[^'"]+)['"]/g;
|
||||
const BKLIT_REGISTRY_DEP_RE = /^@bklit\/(.+)$/;
|
||||
|
||||
const RESOLVE_EXTENSIONS = [".ts", ".tsx", ".js", ".jsx"];
|
||||
|
||||
function resolveRelativeImport(fromFilePath, spec) {
|
||||
const dir = path.dirname(fromFilePath);
|
||||
const base = path.normalize(path.join(dir, spec));
|
||||
const candidates = [
|
||||
base,
|
||||
...RESOLVE_EXTENSIONS.map((ext) => base + ext),
|
||||
...RESOLVE_EXTENSIONS.map((ext) => path.join(base, `index${ext}`)),
|
||||
];
|
||||
|
||||
for (const candidate of candidates) {
|
||||
const fullPath = path.join(uiRoot, candidate);
|
||||
if (fs.existsSync(fullPath)) {
|
||||
return candidate;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function collectItemFiles(itemName, visited = new Set()) {
|
||||
const files = new Set();
|
||||
const visit = (name) => {
|
||||
if (visited.has(name)) {
|
||||
return;
|
||||
}
|
||||
visited.add(name);
|
||||
const item = byName[name];
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
for (const file of item.files ?? []) {
|
||||
files.add(file.path);
|
||||
}
|
||||
for (const regDep of item.registryDependencies ?? []) {
|
||||
const nested = regDep.match(BKLIT_REGISTRY_DEP_RE)?.[1];
|
||||
if (nested) {
|
||||
visit(nested);
|
||||
}
|
||||
}
|
||||
};
|
||||
visit(itemName);
|
||||
return files;
|
||||
}
|
||||
|
||||
function scanRelativeImports(filePath) {
|
||||
// v0/shadcn example barrels re-export co-installed chart files from the
|
||||
// target `components/charts/` directory — not from registry source paths.
|
||||
if (
|
||||
filePath.startsWith("registry/examples/") &&
|
||||
filePath.endsWith("-index.ts")
|
||||
) {
|
||||
return { imports: [], content: "" };
|
||||
}
|
||||
|
||||
const fullPath = path.join(uiRoot, filePath);
|
||||
if (!fs.existsSync(fullPath)) {
|
||||
throw new Error(`Registry file not found: ${filePath}`);
|
||||
}
|
||||
const content = fs.readFileSync(fullPath, "utf8");
|
||||
const imports = [];
|
||||
importRe.lastIndex = 0;
|
||||
let match = importRe.exec(content);
|
||||
while (match) {
|
||||
imports.push(match[1]);
|
||||
match = importRe.exec(content);
|
||||
}
|
||||
return { imports, content };
|
||||
}
|
||||
|
||||
const INSTALLABLE_TYPES = new Set([
|
||||
"registry:component",
|
||||
"registry:lib",
|
||||
"registry:block",
|
||||
]);
|
||||
|
||||
const installableItems = registry.items.filter((item) =>
|
||||
INSTALLABLE_TYPES.has(item.type)
|
||||
);
|
||||
|
||||
const closureFailures = [];
|
||||
const requireFailures = [];
|
||||
|
||||
for (const item of installableItems) {
|
||||
const closure = collectItemFiles(item.name);
|
||||
const missing = new Map();
|
||||
|
||||
for (const filePath of closure) {
|
||||
const { imports, content } = scanRelativeImports(filePath);
|
||||
|
||||
if (content.includes('require("react-dom")')) {
|
||||
requireFailures.push({ item: item.name, file: filePath });
|
||||
}
|
||||
|
||||
for (const spec of imports) {
|
||||
const resolved = resolveRelativeImport(filePath, spec);
|
||||
if (!resolved) {
|
||||
const key = `${filePath} -> ${spec}`;
|
||||
if (!missing.has(key)) {
|
||||
missing.set(key, "missing on disk");
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (!closure.has(resolved)) {
|
||||
const key = `${filePath} -> ${spec} (${resolved})`;
|
||||
if (!missing.has(key)) {
|
||||
missing.set(key, "not in install closure");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (missing.size > 0) {
|
||||
closureFailures.push({ name: item.name, missing: [...missing.entries()] });
|
||||
}
|
||||
}
|
||||
|
||||
let failed = false;
|
||||
|
||||
if (closureFailures.length > 0) {
|
||||
failed = true;
|
||||
console.error("Registry local import closure check failed:\n");
|
||||
for (const { name, missing } of closureFailures) {
|
||||
console.error(` ${name}:`);
|
||||
for (const [ref, reason] of missing) {
|
||||
console.error(` - ${ref} (${reason})`);
|
||||
}
|
||||
console.error("");
|
||||
}
|
||||
console.error(
|
||||
"Add missing files to packages/ui/registry.json (on the item or a registryDependency)."
|
||||
);
|
||||
}
|
||||
|
||||
if (requireFailures.length > 0) {
|
||||
failed = true;
|
||||
console.error('Registry source must not use require("react-dom"):\n');
|
||||
for (const { item, file } of requireFailures) {
|
||||
console.error(` ${item}: ${file}`);
|
||||
}
|
||||
console.error(
|
||||
'\nUse `import { createPortal } from "react-dom"` in "use client" components instead.'
|
||||
);
|
||||
}
|
||||
|
||||
if (failed) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log(
|
||||
`Registry file closure OK (${installableItems.length} installable items checked).`
|
||||
);
|
||||
139
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/verify-registry-sync.mjs
vendored
Normal file
139
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/scripts/verify-registry-sync.mjs
vendored
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
#!/usr/bin/env node
|
||||
/**
|
||||
* Ensures shadcn registry output matches chart source when packages/ui/src/charts changes.
|
||||
* Run via `pnpm registry:verify` (locally or in CI).
|
||||
*/
|
||||
import { execSync } from "node:child_process";
|
||||
import fs from "node:fs";
|
||||
import { dirname, join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const repoRoot = join(__dirname, "../../..");
|
||||
|
||||
const CHARTS_SRC = "packages/ui/src/charts";
|
||||
const REGISTRY_PATHS = [
|
||||
"apps/web/public/r",
|
||||
"packages/ui/registry.json",
|
||||
"packages/ui/registry/examples",
|
||||
"packages/ui/registry/blocks",
|
||||
];
|
||||
|
||||
/** Build scripts may reformat these; compare parsed JSON, not raw text. */
|
||||
const SEMANTIC_JSON_PATHS = [
|
||||
"packages/ui/registry.json",
|
||||
"apps/web/public/r/registry.json",
|
||||
];
|
||||
|
||||
function run(cmd, { inherit = false } = {}) {
|
||||
return execSync(cmd, {
|
||||
cwd: repoRoot,
|
||||
encoding: "utf8",
|
||||
stdio: inherit ? "inherit" : "pipe",
|
||||
});
|
||||
}
|
||||
|
||||
function readJson(relativePath) {
|
||||
return JSON.parse(fs.readFileSync(join(repoRoot, relativePath), "utf8"));
|
||||
}
|
||||
|
||||
function jsonEqual(a, b) {
|
||||
return JSON.stringify(a) === JSON.stringify(b);
|
||||
}
|
||||
|
||||
function resolveDiffRange() {
|
||||
if (process.env.REGISTRY_SYNC_DIFF_RANGE) {
|
||||
return process.env.REGISTRY_SYNC_DIFF_RANGE;
|
||||
}
|
||||
|
||||
if (process.env.GITHUB_EVENT_NAME === "pull_request") {
|
||||
const base = process.env.GITHUB_BASE_REF || "main";
|
||||
return `origin/${base}...HEAD`;
|
||||
}
|
||||
|
||||
if (
|
||||
process.env.GITHUB_EVENT_NAME === "push" &&
|
||||
process.env.GITHUB_EVENT_BEFORE &&
|
||||
process.env.GITHUB_SHA
|
||||
) {
|
||||
return `${process.env.GITHUB_EVENT_BEFORE}...${process.env.GITHUB_SHA}`;
|
||||
}
|
||||
|
||||
return "origin/main...HEAD";
|
||||
}
|
||||
|
||||
function chartsChanged(diffRange) {
|
||||
const changed = run(
|
||||
`git diff --name-only ${diffRange} -- ${CHARTS_SRC}`
|
||||
).trim();
|
||||
return changed.length > 0;
|
||||
}
|
||||
|
||||
function listDirtyRegistryFiles() {
|
||||
const excludeArgs = SEMANTIC_JSON_PATHS.map((p) => `':!${p}'`).join(" ");
|
||||
const paths = REGISTRY_PATHS.join(" ");
|
||||
const status = run(
|
||||
`git status --porcelain -- ${paths} ${excludeArgs}`
|
||||
).trim();
|
||||
if (!status) {
|
||||
return [];
|
||||
}
|
||||
return status.split("\n").filter(Boolean);
|
||||
}
|
||||
|
||||
function listSemanticRegistryDrift(beforeByPath) {
|
||||
const drift = [];
|
||||
for (const relativePath of SEMANTIC_JSON_PATHS) {
|
||||
const after = readJson(relativePath);
|
||||
if (!jsonEqual(beforeByPath[relativePath], after)) {
|
||||
drift.push(relativePath);
|
||||
}
|
||||
}
|
||||
return drift;
|
||||
}
|
||||
|
||||
function main() {
|
||||
const diffRange = resolveDiffRange();
|
||||
|
||||
if (!chartsChanged(diffRange)) {
|
||||
console.log(
|
||||
`No changes in ${CHARTS_SRC} (${diffRange}); registry sync check skipped.`
|
||||
);
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
console.log(
|
||||
`Chart source changed (${diffRange}); rebuilding registry to verify sync...`
|
||||
);
|
||||
|
||||
const registryBefore = Object.fromEntries(
|
||||
SEMANTIC_JSON_PATHS.map((relativePath) => [
|
||||
relativePath,
|
||||
readJson(relativePath),
|
||||
])
|
||||
);
|
||||
|
||||
run("pnpm registry:build", { inherit: true });
|
||||
|
||||
const semanticDrift = listSemanticRegistryDrift(registryBefore);
|
||||
const dirty = listDirtyRegistryFiles();
|
||||
const failures = [
|
||||
...semanticDrift.map((path) => `${path} (content changed)`),
|
||||
...dirty,
|
||||
];
|
||||
|
||||
if (failures.length > 0) {
|
||||
console.error("\nRegistry is out of sync with chart source changes.\n");
|
||||
console.error(
|
||||
"Run `pnpm registry:build` from the repo root and commit the updated registry files:\n"
|
||||
);
|
||||
for (const line of failures) {
|
||||
console.error(` ${line}`);
|
||||
}
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log("Registry is in sync with chart source.");
|
||||
}
|
||||
|
||||
main();
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface ButtonProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
appName: string;
|
||||
}
|
||||
|
||||
export const Button = ({ children, className, appName }: ButtonProps) => {
|
||||
return (
|
||||
<button
|
||||
className={className}
|
||||
onClick={() => console.log(`Hello from your ${appName} app!`)}
|
||||
type="button"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import type { JSX } from "react";
|
||||
|
||||
export function Card({
|
||||
className,
|
||||
title,
|
||||
children,
|
||||
href,
|
||||
}: {
|
||||
className?: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
href: string;
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<a
|
||||
className={className}
|
||||
href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<h2>
|
||||
{title} <span>-></span>
|
||||
</h2>
|
||||
<p>{children}</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
"use client";
|
||||
|
||||
import { GridColumns, GridRows } from "@visx/grid";
|
||||
import type { scaleLinear, scaleTime } from "@visx/scale";
|
||||
import { useId } from "react";
|
||||
|
||||
type ScaleLinear<Output, _Input = number> = ReturnType<
|
||||
typeof scaleLinear<Output>
|
||||
>;
|
||||
type ScaleTime<Output, _Input = Date | number> = ReturnType<
|
||||
typeof scaleTime<Output>
|
||||
>;
|
||||
|
||||
export interface ChartGridProps {
|
||||
/** Width of the grid area */
|
||||
width: number;
|
||||
/** Height of the grid area */
|
||||
height: number;
|
||||
/** X scale (time scale) */
|
||||
xScale: ScaleTime<number, number>;
|
||||
/** Y scale (linear scale) */
|
||||
yScale: ScaleLinear<number, number>;
|
||||
/** Show horizontal grid lines. Default: true */
|
||||
showRows?: boolean;
|
||||
/** Show vertical grid lines. Default: false */
|
||||
showColumns?: boolean;
|
||||
/** Number of horizontal grid lines. Default: 5 */
|
||||
numTicksRows?: number;
|
||||
/** Number of vertical grid lines. Default: 10 */
|
||||
numTicksColumns?: number;
|
||||
/** Grid line stroke color. Default: var(--chart-grid) */
|
||||
stroke?: string;
|
||||
/** Grid line stroke opacity. Default: 1 */
|
||||
strokeOpacity?: number;
|
||||
/** Grid line stroke width. Default: 1 */
|
||||
strokeWidth?: number;
|
||||
/** Grid line dash array. Default: "4,4" for dashed lines */
|
||||
strokeDasharray?: string;
|
||||
/** Enable horizontal fade effect on grid rows. Default: true */
|
||||
fadeRows?: boolean;
|
||||
}
|
||||
|
||||
export function ChartGrid({
|
||||
width,
|
||||
height,
|
||||
xScale,
|
||||
yScale,
|
||||
showRows = true,
|
||||
showColumns = false,
|
||||
numTicksRows = 5,
|
||||
numTicksColumns = 10,
|
||||
stroke = "var(--chart-grid)",
|
||||
strokeOpacity = 1,
|
||||
strokeWidth = 1,
|
||||
strokeDasharray = "4,4",
|
||||
fadeRows = true,
|
||||
}: ChartGridProps) {
|
||||
const uniqueId = useId();
|
||||
const maskId = `chart-grid-rows-fade-${uniqueId}`;
|
||||
const gradientId = `${maskId}-gradient`;
|
||||
|
||||
return (
|
||||
<g className="chart-grid">
|
||||
{/* Gradient mask for horizontal grid lines - fades at both ends */}
|
||||
{showRows && fadeRows && (
|
||||
<defs>
|
||||
<linearGradient id={gradientId} x1="0%" x2="100%" y1="0%" y2="0%">
|
||||
<stop offset="0%" style={{ stopColor: "white", stopOpacity: 0 }} />
|
||||
<stop offset="10%" style={{ stopColor: "white", stopOpacity: 1 }} />
|
||||
<stop offset="90%" style={{ stopColor: "white", stopOpacity: 1 }} />
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "white", stopOpacity: 0 }}
|
||||
/>
|
||||
</linearGradient>
|
||||
<mask id={maskId}>
|
||||
<rect
|
||||
fill={`url(#${gradientId})`}
|
||||
height={height}
|
||||
width={width}
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
)}
|
||||
|
||||
{showRows && (
|
||||
<g mask={fadeRows ? `url(#${maskId})` : undefined}>
|
||||
<GridRows
|
||||
numTicks={numTicksRows}
|
||||
scale={yScale}
|
||||
stroke={stroke}
|
||||
strokeDasharray={strokeDasharray}
|
||||
strokeOpacity={strokeOpacity}
|
||||
strokeWidth={strokeWidth}
|
||||
width={width}
|
||||
/>
|
||||
</g>
|
||||
)}
|
||||
{showColumns && (
|
||||
<GridColumns
|
||||
height={height}
|
||||
numTicks={numTicksColumns}
|
||||
scale={xScale}
|
||||
stroke={stroke}
|
||||
strokeDasharray={strokeDasharray}
|
||||
strokeOpacity={strokeOpacity}
|
||||
strokeWidth={strokeWidth}
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChartGrid;
|
||||
38
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/__tests__/animation.test.ts
vendored
Normal file
38
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/__tests__/animation.test.ts
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import {
|
||||
clipRevealTransition,
|
||||
DEFAULT_CHART_ENTER_TRANSITION,
|
||||
} from "../animation";
|
||||
|
||||
describe("clipRevealTransition", () => {
|
||||
it("preserves explicit tween ease", () => {
|
||||
const tween = {
|
||||
type: "tween" as const,
|
||||
duration: 0.9,
|
||||
ease: [0.1, 0.2, 0.3, 0.4] as [number, number, number, number],
|
||||
};
|
||||
assert.deepEqual(clipRevealTransition(tween), tween);
|
||||
});
|
||||
|
||||
it("applies default ease when tween omits ease", () => {
|
||||
const result = clipRevealTransition({
|
||||
type: "tween",
|
||||
duration: 0.9,
|
||||
});
|
||||
assert.equal(result.type, "tween");
|
||||
assert.equal(result.duration, 0.9);
|
||||
assert.deepEqual(result.ease, DEFAULT_CHART_ENTER_TRANSITION.ease);
|
||||
});
|
||||
|
||||
it("converts spring to tween for svg width reveal", () => {
|
||||
const result = clipRevealTransition({
|
||||
type: "spring",
|
||||
duration: 1.2,
|
||||
bounce: 0.5,
|
||||
});
|
||||
assert.equal(result.type, "tween");
|
||||
assert.equal(result.duration, 1.2);
|
||||
assert.deepEqual(result.ease, DEFAULT_CHART_ENTER_TRANSITION.ease);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import {
|
||||
BAR_DEPTH_MAX_PX,
|
||||
BAR_DEPTH_PERSPECTIVE_RATIO,
|
||||
barDepthAndRise,
|
||||
barDepthMaxDepth,
|
||||
} from "../bar-depth-geometry";
|
||||
|
||||
describe("barDepthMaxDepth", () => {
|
||||
it("caps at BAR_DEPTH_MAX_PX when the gap is wide", () => {
|
||||
// step 100, band 90 → gap 10, gap-1=9; band*0.22=19.8 → min(19.8, 9, 7) = 7
|
||||
assert.equal(barDepthMaxDepth(100, 90), BAR_DEPTH_MAX_PX);
|
||||
});
|
||||
|
||||
it("is bounded by the inter-bar gap on dense charts", () => {
|
||||
// step 50, band 48 → gap 2, gap-1=1; band*0.22=10.56 → min(10.56, 1, 7) = 1
|
||||
assert.equal(barDepthMaxDepth(50, 48), 1);
|
||||
});
|
||||
|
||||
it("is 0 when there is no gap between bars", () => {
|
||||
assert.equal(barDepthMaxDepth(50, 50), 0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("barDepthAndRise", () => {
|
||||
it("returns no depth for a dead-center bar (absOffset 0)", () => {
|
||||
assert.deepEqual(barDepthAndRise(0, 100, 7), {
|
||||
depth: 0,
|
||||
perspectiveRise: 0,
|
||||
});
|
||||
});
|
||||
|
||||
it("scales depth with offset, capped by maxDepth at the edge", () => {
|
||||
assert.equal(barDepthAndRise(1, 100, 7).depth, 7);
|
||||
assert.equal(barDepthAndRise(0.5, 100, 7).depth, 3.5);
|
||||
});
|
||||
|
||||
it("caps depth by the bar height so short bars stay proportional", () => {
|
||||
// naturalHeight 4 < maxDepth 7 → depth capped at 4
|
||||
assert.equal(barDepthAndRise(1, 4, 7).depth, 4);
|
||||
});
|
||||
|
||||
it("derives the rise from depth via the perspective ratio", () => {
|
||||
const { depth, perspectiveRise } = barDepthAndRise(0.5, 100, 7);
|
||||
assert.equal(perspectiveRise, depth * BAR_DEPTH_PERSPECTIVE_RATIO);
|
||||
});
|
||||
|
||||
it("clamps out-of-range inputs defensively", () => {
|
||||
assert.equal(barDepthAndRise(2, 100, 7).depth, 7); // absOffset clamped to 1
|
||||
assert.equal(barDepthAndRise(-1, 100, 7).depth, 0); // clamped to 0
|
||||
assert.equal(barDepthAndRise(1, -5, 7).depth, 0); // negative height → 0
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import {
|
||||
hmsTimeFmt,
|
||||
intFmt,
|
||||
shortDateFmt,
|
||||
weekdayDateFmt,
|
||||
} from "../chart-formatters";
|
||||
|
||||
const sampleDates = [
|
||||
new Date(2025, 0, 5, 9, 8, 7),
|
||||
new Date(2024, 11, 31, 23, 59, 59),
|
||||
new Date(2026, 6, 4, 12, 0, 0),
|
||||
];
|
||||
|
||||
const sampleNumbers = [0, 42, 1234, 1_234_567, -9876.5];
|
||||
|
||||
describe("chart-formatters", () => {
|
||||
describe("shortDateFmt", () => {
|
||||
for (const date of sampleDates) {
|
||||
it(`matches toLocaleDateString for ${date.toISOString()}`, () => {
|
||||
assert.equal(
|
||||
shortDateFmt.format(date),
|
||||
date.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
describe("weekdayDateFmt", () => {
|
||||
for (const date of sampleDates) {
|
||||
it(`matches toLocaleDateString for ${date.toISOString()}`, () => {
|
||||
assert.equal(
|
||||
weekdayDateFmt.format(date),
|
||||
date.toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
describe("hmsTimeFmt", () => {
|
||||
for (const date of sampleDates) {
|
||||
it(`matches toLocaleTimeString for ${date.toISOString()}`, () => {
|
||||
assert.equal(
|
||||
hmsTimeFmt.format(date),
|
||||
date.toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
hour12: false,
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
describe("intFmt", () => {
|
||||
for (const value of sampleNumbers) {
|
||||
it(`matches toLocaleString for ${value}`, () => {
|
||||
assert.equal(intFmt(value), value.toLocaleString("en-US"));
|
||||
});
|
||||
}
|
||||
|
||||
it("is a reusable formatter function", () => {
|
||||
const formatValue = intFmt;
|
||||
assert.equal(formatValue(1000), (1000).toLocaleString("en-US"));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import {
|
||||
decimateOhlcData,
|
||||
decimateTimeSeries,
|
||||
maxRenderPointsForWidth,
|
||||
} from "../decimate-time-series";
|
||||
|
||||
describe("decimateTimeSeries", () => {
|
||||
it("returns the original array when under the point budget", () => {
|
||||
const data = [{ v: 1 }, { v: 2 }, { v: 3 }];
|
||||
assert.equal(decimateTimeSeries(data, 10), data);
|
||||
});
|
||||
|
||||
it("always keeps the first and last points", () => {
|
||||
const data = Array.from({ length: 100 }, (_, i) => ({ v: i }));
|
||||
const sampled = decimateTimeSeries(data, 20, ["v"]);
|
||||
assert.equal(sampled[0]?.v, 0);
|
||||
assert.equal(sampled.at(-1)?.v, 99);
|
||||
assert.equal(sampled.length, 20);
|
||||
});
|
||||
|
||||
it("preserves spikes in the series", () => {
|
||||
const data = Array.from({ length: 50 }, (_, i) => ({
|
||||
v: i === 25 ? 1000 : i,
|
||||
}));
|
||||
const sampled = decimateTimeSeries(data, 10, ["v"]);
|
||||
assert(sampled.some((point) => point.v === 1000));
|
||||
});
|
||||
});
|
||||
|
||||
describe("decimateOhlcData", () => {
|
||||
it("preserves bucket high/low extremes", () => {
|
||||
const data = Array.from({ length: 100 }, (_, i) => ({
|
||||
date: new Date(i),
|
||||
open: i,
|
||||
high: i === 50 ? 999 : i + 5,
|
||||
low: i === 50 ? 1 : i - 5,
|
||||
close: i + 1,
|
||||
}));
|
||||
const sampled = decimateOhlcData(data, 10);
|
||||
assert(sampled.some((row) => row.high === 999));
|
||||
assert(sampled.some((row) => row.low === 1));
|
||||
assert.equal(sampled.length, 10);
|
||||
});
|
||||
});
|
||||
|
||||
describe("maxRenderPointsForWidth", () => {
|
||||
it("returns at least 64 points", () => {
|
||||
assert.equal(maxRenderPointsForWidth(10), 64);
|
||||
});
|
||||
|
||||
it("scales with chart width", () => {
|
||||
assert.equal(maxRenderPointsForWidth(400), 600);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import { computeSegmentBounds } from "../highlight-segment-bounds";
|
||||
|
||||
// Data points at t = 0,10,20,30 ms; a linear pixel xScale (1px per ms) keeps the
|
||||
// arithmetic obvious — the band is the pixel x-range one data point either side.
|
||||
const data = [{ t: 0 }, { t: 10 }, { t: 20 }, { t: 30 }];
|
||||
const xAccessor = (d: Record<string, unknown>) => new Date(d.t as number);
|
||||
const xScale = (value: Date) => value.getTime();
|
||||
|
||||
describe("computeSegmentBounds", () => {
|
||||
it("is inactive for empty data", () => {
|
||||
assert.deepEqual(
|
||||
computeSegmentBounds([], xScale, xAccessor, { index: 1 }, null),
|
||||
{ x: 0, width: 0, isActive: false }
|
||||
);
|
||||
});
|
||||
|
||||
it("is inactive with no hover and no selection", () => {
|
||||
assert.equal(
|
||||
computeSegmentBounds(data, xScale, xAccessor, null, null).isActive,
|
||||
false
|
||||
);
|
||||
});
|
||||
|
||||
it("spans one data point either side of the hovered index", () => {
|
||||
// idx 1 → [t 0, t 20] → x 0, width 20
|
||||
assert.deepEqual(
|
||||
computeSegmentBounds(data, xScale, xAccessor, { index: 1 }, null),
|
||||
{ x: 0, width: 20, isActive: true }
|
||||
);
|
||||
});
|
||||
|
||||
it("clamps the start at the first index", () => {
|
||||
// idx 0 → [t 0, t 10] → x 0, width 10
|
||||
assert.deepEqual(
|
||||
computeSegmentBounds(data, xScale, xAccessor, { index: 0 }, null),
|
||||
{ x: 0, width: 10, isActive: true }
|
||||
);
|
||||
});
|
||||
|
||||
it("clamps the end at the last index", () => {
|
||||
// idx 3 (last) → [t 20, t 30] → x 20, width 10
|
||||
assert.deepEqual(
|
||||
computeSegmentBounds(data, xScale, xAccessor, { index: 3 }, null),
|
||||
{ x: 20, width: 10, isActive: true }
|
||||
);
|
||||
});
|
||||
|
||||
it("uses the dragged pixel range for an active selection (takes priority)", () => {
|
||||
const bounds = computeSegmentBounds(
|
||||
data,
|
||||
xScale,
|
||||
xAccessor,
|
||||
{ index: 1 }, // ignored — selection wins
|
||||
{ active: true, startX: 5, endX: 25 }
|
||||
);
|
||||
assert.deepEqual(bounds, { x: 5, width: 20, isActive: true });
|
||||
});
|
||||
|
||||
it("normalizes a reversed (right-to-left) selection drag", () => {
|
||||
const bounds = computeSegmentBounds(data, xScale, xAccessor, null, {
|
||||
active: true,
|
||||
startX: 25,
|
||||
endX: 5,
|
||||
});
|
||||
assert.deepEqual(bounds, { x: 5, width: 20, isActive: true });
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import { resolveLineLoadingPulseMode } from "../line-loading-pulse";
|
||||
|
||||
describe("resolveLineLoadingPulseMode", () => {
|
||||
it("maps loading phases to pulse modes", () => {
|
||||
assert.equal(resolveLineLoadingPulseMode("loading"), "loop");
|
||||
assert.equal(resolveLineLoadingPulseMode("exiting"), "exit");
|
||||
assert.equal(resolveLineLoadingPulseMode("revealingLoading"), "enter");
|
||||
});
|
||||
|
||||
it("returns null for non-loading phases", () => {
|
||||
assert.equal(resolveLineLoadingPulseMode("ready"), null);
|
||||
assert.equal(resolveLineLoadingPulseMode("revealing"), null);
|
||||
assert.equal(resolveLineLoadingPulseMode("exitingReady"), null);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import { getSkeletonHeights } from "../loading-sweep";
|
||||
|
||||
describe("getSkeletonHeights", () => {
|
||||
it("returns the requested number of heights", () => {
|
||||
assert.equal(getSkeletonHeights(12).length, 12);
|
||||
assert.equal(getSkeletonHeights(0).length, 0);
|
||||
});
|
||||
|
||||
it("is deterministic for the same (count, seed) — SSR-safe", () => {
|
||||
assert.deepEqual(getSkeletonHeights(8, 3), getSkeletonHeights(8, 3));
|
||||
});
|
||||
|
||||
it("re-rolls when the seed changes", () => {
|
||||
assert.notDeepEqual(getSkeletonHeights(8, 0), getSkeletonHeights(8, 1));
|
||||
});
|
||||
|
||||
it("stays within the default [20, 80) range", () => {
|
||||
for (const h of getSkeletonHeights(50, 7)) {
|
||||
assert.ok(h >= 20 && h < 80, `height ${h} out of default range`);
|
||||
}
|
||||
});
|
||||
|
||||
it("respects a custom range", () => {
|
||||
for (const h of getSkeletonHeights(50, 2, 40, 60)) {
|
||||
assert.ok(h >= 40 && h < 60, `height ${h} out of [40, 60)`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import { splitProfitLossSegments } from "../profit-loss-segments";
|
||||
|
||||
const xAccessor = (d: Record<string, unknown>) => d.date as Date;
|
||||
|
||||
describe("splitProfitLossSegments", () => {
|
||||
it("returns empty array for no data", () => {
|
||||
assert.deepEqual(
|
||||
splitProfitLossSegments({
|
||||
data: [],
|
||||
dataKey: "pnl",
|
||||
xAccessor,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
});
|
||||
|
||||
it("splits at zero crossings with interpolated crossing points", () => {
|
||||
const data = [
|
||||
{ date: new Date("2024-01-01"), pnl: 100 },
|
||||
{ date: new Date("2024-01-02"), pnl: -50 },
|
||||
{ date: new Date("2024-01-03"), pnl: -20 },
|
||||
];
|
||||
|
||||
const segments = splitProfitLossSegments({
|
||||
data,
|
||||
dataKey: "pnl",
|
||||
xAccessor,
|
||||
});
|
||||
|
||||
assert.equal(segments.length, 2);
|
||||
assert.equal(segments[0]?.isPositive, true);
|
||||
assert.equal(segments[1]?.isPositive, false);
|
||||
assert.equal(segments[0]?.data.at(-1)?.pnl, 0);
|
||||
assert.equal(segments[1]?.data[0]?.pnl, 0);
|
||||
});
|
||||
|
||||
it("keeps a single segment when values stay on one side of zero", () => {
|
||||
const data = [
|
||||
{ date: new Date("2024-01-01"), pnl: 10 },
|
||||
{ date: new Date("2024-01-02"), pnl: 20 },
|
||||
];
|
||||
|
||||
const segments = splitProfitLossSegments({
|
||||
data,
|
||||
dataKey: "pnl",
|
||||
xAccessor,
|
||||
});
|
||||
|
||||
assert.equal(segments.length, 1);
|
||||
assert.equal(segments[0]?.isPositive, true);
|
||||
assert.equal(segments[0]?.data.length, 2);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import {
|
||||
buildHorizontalTangentBezierPath,
|
||||
buildProjectionPath,
|
||||
} from "../projection-utils";
|
||||
|
||||
const sourceData = Array.from({ length: 6 }, (_, index) => ({
|
||||
date: new Date(2024, 0, index + 1),
|
||||
desktop: 100 + index * 10,
|
||||
}));
|
||||
|
||||
describe("buildProjectionPath", () => {
|
||||
it("extends auto projections from the last point to the horizon", () => {
|
||||
const path = buildProjectionPath({
|
||||
sourceData,
|
||||
seriesKey: "desktop",
|
||||
mode: "auto",
|
||||
autoMethod: "linearRegression",
|
||||
horizonPoints: 3,
|
||||
});
|
||||
|
||||
assert.equal(path.length, 2);
|
||||
assert.equal(path[0]?.value, 150);
|
||||
assert.ok((path.at(-1)?.value ?? 0) > 150);
|
||||
});
|
||||
|
||||
it("builds a target projection to an end value", () => {
|
||||
const path = buildProjectionPath({
|
||||
sourceData,
|
||||
seriesKey: "desktop",
|
||||
mode: "target",
|
||||
horizonPoints: 3,
|
||||
endValue: 220,
|
||||
});
|
||||
|
||||
assert.equal(path.length, 2);
|
||||
assert.equal(path[0]?.value, 150);
|
||||
assert.equal(path[1]?.value, 220);
|
||||
});
|
||||
});
|
||||
|
||||
const HORIZONTAL_TANGENT_BEZIER_PATH = /^M 0,100 C 90,100 110,50 200,50$/;
|
||||
|
||||
describe("buildHorizontalTangentBezierPath", () => {
|
||||
it("uses horizontal control points at start and end y", () => {
|
||||
const path = buildHorizontalTangentBezierPath(0, 100, 200, 50);
|
||||
assert.match(path, HORIZONTAL_TANGENT_BEZIER_PATH);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import {
|
||||
computeReferenceAreaRect,
|
||||
resolveReferenceDataRange,
|
||||
} from "../reference-area-geometry";
|
||||
|
||||
const innerWidth = 400;
|
||||
const innerHeight = 200;
|
||||
|
||||
const xScale = (date: Date) => date.getTime() / 10;
|
||||
const yScale = (value: number) => innerHeight - value;
|
||||
|
||||
function baseOptions(
|
||||
overrides: Partial<Parameters<typeof computeReferenceAreaRect>[0]> = {}
|
||||
) {
|
||||
return {
|
||||
innerWidth,
|
||||
innerHeight,
|
||||
xScale,
|
||||
yScale,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("computeReferenceAreaRect", () => {
|
||||
it("maps a full-width horizontal band between y1 and y2", () => {
|
||||
const rect = computeReferenceAreaRect(baseOptions({ y1: 40, y2: 80 }));
|
||||
assert.deepEqual(rect, { x: 0, y: 120, width: 400, height: 40 });
|
||||
});
|
||||
|
||||
it("maps a partial x-range when x1 and x2 are set", () => {
|
||||
const rect = computeReferenceAreaRect(
|
||||
baseOptions({
|
||||
x1: new Date(1000),
|
||||
x2: new Date(2000),
|
||||
y1: 50,
|
||||
y2: 100,
|
||||
})
|
||||
);
|
||||
assert.deepEqual(rect, { x: 100, y: 100, width: 100, height: 50 });
|
||||
});
|
||||
|
||||
it("clamps to the plot when ifOverflow is hidden", () => {
|
||||
const rect = computeReferenceAreaRect(
|
||||
baseOptions({
|
||||
y1: 150,
|
||||
y2: 250,
|
||||
ifOverflow: "hidden",
|
||||
})
|
||||
);
|
||||
assert.deepEqual(rect, { x: 0, y: 0, width: 400, height: 50 });
|
||||
});
|
||||
|
||||
it("returns null when discard and partly outside the plot", () => {
|
||||
const rect = computeReferenceAreaRect(
|
||||
baseOptions({
|
||||
y1: 150,
|
||||
y2: 250,
|
||||
ifOverflow: "discard",
|
||||
})
|
||||
);
|
||||
assert.equal(rect, null);
|
||||
});
|
||||
|
||||
it("does not clamp when ifOverflow is visible", () => {
|
||||
const rect = computeReferenceAreaRect(
|
||||
baseOptions({
|
||||
y1: 150,
|
||||
y2: 250,
|
||||
ifOverflow: "visible",
|
||||
})
|
||||
);
|
||||
assert.deepEqual(rect, { x: 0, y: -50, width: 400, height: 100 });
|
||||
});
|
||||
|
||||
it("returns null for zero plot size", () => {
|
||||
assert.equal(
|
||||
computeReferenceAreaRect(
|
||||
baseOptions({ innerWidth: 0, innerHeight: 200, y1: 10, y2: 20 })
|
||||
),
|
||||
null
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("resolveReferenceDataRange", () => {
|
||||
it("returns inclusive bounds between y1 and y2", () => {
|
||||
assert.deepEqual(resolveReferenceDataRange(160, 220, [0, 300]), [160, 220]);
|
||||
});
|
||||
|
||||
it("extends to domain edges when y bounds are omitted", () => {
|
||||
assert.deepEqual(
|
||||
resolveReferenceDataRange(undefined, 220, [0, 300]),
|
||||
[0, 220]
|
||||
);
|
||||
assert.deepEqual(
|
||||
resolveReferenceDataRange(160, undefined, [0, 300]),
|
||||
[160, 300]
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import {
|
||||
computeSeriesBarRevealClipPadding,
|
||||
computeSeriesBarWidth,
|
||||
} from "../series-bar-layout";
|
||||
|
||||
describe("computeSeriesBarWidth", () => {
|
||||
it("caps grouped bar width to the slot", () => {
|
||||
const width = computeSeriesBarWidth({
|
||||
innerWidth: 400,
|
||||
dataLength: 12,
|
||||
columnWidth: 400 / 11,
|
||||
seriesCount: 2,
|
||||
composedBarGap: 4,
|
||||
});
|
||||
assert.ok(width >= 2);
|
||||
assert.ok(width <= 40);
|
||||
});
|
||||
});
|
||||
|
||||
describe("computeSeriesBarRevealClipPadding", () => {
|
||||
it("uses half the bar width for a single stacked column", () => {
|
||||
assert.equal(
|
||||
computeSeriesBarRevealClipPadding({
|
||||
barWidth: 24,
|
||||
seriesCount: 3,
|
||||
stacked: true,
|
||||
}),
|
||||
12
|
||||
);
|
||||
});
|
||||
|
||||
it("uses half the group width for grouped bars", () => {
|
||||
assert.equal(
|
||||
computeSeriesBarRevealClipPadding({
|
||||
barWidth: 20,
|
||||
seriesCount: 2,
|
||||
gap: 4,
|
||||
}),
|
||||
22
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import {
|
||||
domainsEqual,
|
||||
isReferenceAreaVisiblePhase,
|
||||
mergeYDomainRecords,
|
||||
niceYDomain,
|
||||
shouldTweenYDomain,
|
||||
} from "../y-domain-utils";
|
||||
|
||||
describe("shouldTweenYDomain", () => {
|
||||
it("skips tween when both endpoints move less than 2% of span", () => {
|
||||
assert.equal(shouldTweenYDomain([0, 100], [1, 101]), false);
|
||||
});
|
||||
|
||||
it("tweens when min endpoint shifts enough", () => {
|
||||
assert.equal(shouldTweenYDomain([0, 100], [5, 100]), true);
|
||||
});
|
||||
|
||||
it("tweens when max endpoint shifts enough", () => {
|
||||
assert.equal(shouldTweenYDomain([0, 100], [0, 110]), true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("niceYDomain", () => {
|
||||
it("expands raw domain to nice tick boundaries", () => {
|
||||
const [min, max] = niceYDomain([13, 87]);
|
||||
assert.ok(min <= 13);
|
||||
assert.ok(max >= 87);
|
||||
});
|
||||
});
|
||||
|
||||
describe("mergeYDomainRecords", () => {
|
||||
it("normalizes axis ids and merges maps", () => {
|
||||
const merged = mergeYDomainRecords({ left: [0, 100] }, { right: [10, 50] });
|
||||
assert.deepEqual(merged.left, [0, 100]);
|
||||
assert.deepEqual(merged.right, [10, 50]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("domainsEqual", () => {
|
||||
it("returns true when axis domains match", () => {
|
||||
assert.equal(domainsEqual({ left: [0, 100] }, { left: [0, 100] }), true);
|
||||
});
|
||||
|
||||
it("returns false when any endpoint differs", () => {
|
||||
assert.equal(domainsEqual({ left: [0, 100] }, { left: [0, 110] }), false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("isReferenceAreaVisiblePhase", () => {
|
||||
it("shows reference areas during ready reveal phases", () => {
|
||||
assert.equal(isReferenceAreaVisiblePhase("ready"), true);
|
||||
assert.equal(isReferenceAreaVisiblePhase("revealing"), true);
|
||||
assert.equal(isReferenceAreaVisiblePhase("gridTweenReady"), true);
|
||||
});
|
||||
|
||||
it("hides reference areas during loading and exit phases", () => {
|
||||
assert.equal(isReferenceAreaVisiblePhase("loading"), false);
|
||||
assert.equal(isReferenceAreaVisiblePhase("exiting"), false);
|
||||
assert.equal(isReferenceAreaVisiblePhase("exitingReady"), false);
|
||||
assert.equal(isReferenceAreaVisiblePhase("gridTweenLoading"), false);
|
||||
assert.equal(isReferenceAreaVisiblePhase("revealingLoading"), false);
|
||||
});
|
||||
});
|
||||
36
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/animation.ts
vendored
Normal file
36
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/animation.ts
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import type { Transition } from "motion/react";
|
||||
|
||||
/** Default clip-reveal easing for cartesian charts. */
|
||||
export const DEFAULT_ANIMATION_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
|
||||
|
||||
export const DEFAULT_ANIMATION_DURATION_MS = 1100;
|
||||
|
||||
/** Default enter transition — matches the original line chart reveal. */
|
||||
export const DEFAULT_CHART_ENTER_TRANSITION: Transition = {
|
||||
type: "tween",
|
||||
duration: DEFAULT_ANIMATION_DURATION_MS / 1000,
|
||||
ease: [0.85, 0, 0.15, 1],
|
||||
};
|
||||
|
||||
/**
|
||||
* Clip-path width reveal must use tween — spring does not reliably animate SVG width.
|
||||
*/
|
||||
export function clipRevealTransition(enterTransition?: Transition): Transition {
|
||||
if (enterTransition?.type === "tween") {
|
||||
return {
|
||||
...enterTransition,
|
||||
ease: enterTransition.ease ?? DEFAULT_CHART_ENTER_TRANSITION.ease,
|
||||
};
|
||||
}
|
||||
|
||||
const duration =
|
||||
typeof enterTransition?.duration === "number"
|
||||
? enterTransition.duration
|
||||
: DEFAULT_ANIMATION_DURATION_MS / 1000;
|
||||
|
||||
return {
|
||||
type: "tween",
|
||||
duration,
|
||||
ease: DEFAULT_CHART_ENTER_TRANSITION.ease,
|
||||
};
|
||||
}
|
||||
116
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/area-chart-loading.tsx
vendored
Normal file
116
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/area-chart-loading.tsx
vendored
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
"use client";
|
||||
|
||||
import { curveNatural } from "@visx/curve";
|
||||
import { useMemo } from "react";
|
||||
import { Area } from "./area";
|
||||
import { AreaChart } from "./area-chart";
|
||||
import type { Margin } from "./chart-context";
|
||||
import type { LoadingStyle } from "./chart-phase";
|
||||
import {
|
||||
DEFAULT_SKELETON_DATA_KEY,
|
||||
DEFAULT_SKELETON_POINT_COUNT,
|
||||
generateChartSkeletonData,
|
||||
} from "./generate-chart-skeleton-data";
|
||||
import { Grid } from "./grid";
|
||||
|
||||
const LOADING_DATA_KEY = DEFAULT_SKELETON_DATA_KEY;
|
||||
const DEFAULT_LOADING_STROKE = "var(--foreground)";
|
||||
const DEFAULT_LOADING_GRID_STROKE =
|
||||
"color-mix(in oklch, var(--chart-grid) 50%, transparent)";
|
||||
const DEFAULT_LOADING_GRID_SHIMMER_STROKE =
|
||||
"color-mix(in oklch, var(--foreground) 68%, transparent)";
|
||||
const DEFAULT_LOADING_STROKE_OPACITY = 0.5;
|
||||
|
||||
export interface AreaChartLoadingProps {
|
||||
/** Chart margins */
|
||||
margin?: Partial<Margin>;
|
||||
/** Stroke color for the animated loading segment. */
|
||||
stroke?: string;
|
||||
/** Stroke opacity for the animated loading segment. Default: 0.5 */
|
||||
strokeOpacity?: number;
|
||||
/** Grid line stroke (color and opacity via color-mix or oklch alpha). */
|
||||
gridStroke?: string;
|
||||
/** Shimmer band stroke (color and opacity via color-mix or oklch alpha). */
|
||||
gridShimmerStroke?: string;
|
||||
/** Animate a shimmer band across grid lines. Default: true */
|
||||
gridShimmer?: boolean;
|
||||
/** Shimmer band width in pixels. Default: 140 */
|
||||
gridShimmerLength?: number;
|
||||
/** Shimmer speed multiplier (higher = faster). Default: 1 */
|
||||
gridShimmerSpeed?: number;
|
||||
/** Match shimmer loop to the loading line pulse (cycle + inter-loop pause). */
|
||||
gridShimmerSync?: boolean;
|
||||
/** Loading animation: `"pulse"` (default traveling pulse) or `"sweep"` (a
|
||||
* diagonal shimmer across the skeleton area). Default: `"pulse"`. */
|
||||
loadingStyle?: LoadingStyle;
|
||||
/** Centered shimmer label text. Default: "Loading" */
|
||||
label?: string;
|
||||
/** Aspect ratio as "width / height". Default: "2 / 1" */
|
||||
aspectRatio?: string;
|
||||
/** Additional class name for the container */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function AreaChartLoading({
|
||||
margin,
|
||||
stroke = DEFAULT_LOADING_STROKE,
|
||||
strokeOpacity = DEFAULT_LOADING_STROKE_OPACITY,
|
||||
gridStroke = DEFAULT_LOADING_GRID_STROKE,
|
||||
gridShimmerStroke = DEFAULT_LOADING_GRID_SHIMMER_STROKE,
|
||||
gridShimmer = true,
|
||||
gridShimmerLength,
|
||||
gridShimmerSpeed,
|
||||
gridShimmerSync = false,
|
||||
loadingStyle = "pulse",
|
||||
label = "Loading",
|
||||
aspectRatio = "2 / 1",
|
||||
className = "",
|
||||
}: AreaChartLoadingProps) {
|
||||
const data = useMemo(
|
||||
() =>
|
||||
generateChartSkeletonData({
|
||||
dataKey: DEFAULT_SKELETON_DATA_KEY,
|
||||
pointCount: DEFAULT_SKELETON_POINT_COUNT,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<AreaChart
|
||||
animationDuration={0}
|
||||
aspectRatio={aspectRatio}
|
||||
className={className}
|
||||
data={data}
|
||||
loadingLabel={label}
|
||||
margin={margin}
|
||||
status="loading"
|
||||
>
|
||||
<Grid
|
||||
horizontal
|
||||
shimmer={loadingStyle === "sweep" ? false : gridShimmer}
|
||||
shimmerLength={gridShimmerLength}
|
||||
shimmerSpeed={gridShimmerSpeed}
|
||||
shimmerStroke={gridShimmerStroke}
|
||||
shimmerSync={gridShimmerSync}
|
||||
stroke={gridStroke}
|
||||
/>
|
||||
<Area
|
||||
curve={curveNatural}
|
||||
dataKey={LOADING_DATA_KEY}
|
||||
fadeEdges={false}
|
||||
fill="transparent"
|
||||
fillOpacity={0}
|
||||
loading
|
||||
loadingStroke={stroke}
|
||||
loadingStrokeOpacity={strokeOpacity}
|
||||
loadingStyle={loadingStyle}
|
||||
showHighlight={false}
|
||||
showLine
|
||||
stroke="transparent"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</AreaChart>
|
||||
);
|
||||
}
|
||||
|
||||
export default AreaChartLoading;
|
||||
272
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/area-chart.tsx
vendored
Normal file
272
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/area-chart.tsx
vendored
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
"use client";
|
||||
|
||||
import { ParentSize } from "@visx/responsive";
|
||||
import type { Transition } from "motion/react";
|
||||
import {
|
||||
Children,
|
||||
type CSSProperties,
|
||||
isValidElement,
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Area, type AreaProps } from "./area";
|
||||
import type { LineConfig, Margin } from "./chart-context";
|
||||
import { ChartLoadingLabel } from "./chart-loading-label";
|
||||
import {
|
||||
type ChartPhase,
|
||||
type ChartStatus,
|
||||
DEFAULT_CHART_STATUS,
|
||||
DEFAULT_Y_DOMAIN_TWEEN_MS,
|
||||
resolveRestingChartPhase,
|
||||
} from "./chart-phase";
|
||||
import { PatternArea } from "./pattern-area";
|
||||
import { TimeSeriesChartInner } from "./time-series-chart-shell";
|
||||
|
||||
export interface AreaChartProps {
|
||||
/** Data array - each item should have a date field and numeric values */
|
||||
data: Record<string, unknown>[];
|
||||
/** Key in data for the x-axis (date). Default: "date" */
|
||||
xDataKey?: string;
|
||||
/** Chart margins */
|
||||
margin?: Partial<Margin>;
|
||||
/** Animation duration in milliseconds. Default: 1100 */
|
||||
animationDuration?: number;
|
||||
/** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
|
||||
animationEasing?: string;
|
||||
/** Motion enter transition (spring or cubic-bezier tween). */
|
||||
enterTransition?: Transition;
|
||||
/** Signature of motion URL state — triggers reveal replay when it changes. */
|
||||
revealSignature?: string;
|
||||
/** Aspect ratio as "width / height". Default: "2 / 1" */
|
||||
aspectRatio?: string;
|
||||
/** Additional class name for the container */
|
||||
className?: string;
|
||||
/** Loading vs ready — drives chart phase and loading chrome. Default: `"ready"`. */
|
||||
status?: ChartStatus;
|
||||
/** Centered shimmer label while loading. */
|
||||
loadingLabel?: string;
|
||||
/** Animate y-domain over this duration (ms) on status transitions. Default: 500. */
|
||||
yDomainTweenDuration?: number;
|
||||
/** Animate y-domain when status or target domain changes. Default: true */
|
||||
yDomainTween?: boolean;
|
||||
/** Visible x-domain for brush zoom. */
|
||||
xDomain?: [Date, Date];
|
||||
/** Full dataset length for x-scale padding when `xDomain` is set. */
|
||||
xDomainSlotCount?: number;
|
||||
/** Tween y-domain when brush changes the visible x-range. Default: false */
|
||||
tweenYDomainOnXDomainChange?: boolean;
|
||||
/** Inline container styles (e.g. fixed height for brush strip). */
|
||||
style?: CSSProperties;
|
||||
/** Fires when the internal chart phase changes (e.g. OG capture readiness). */
|
||||
onPhaseChange?: (phase: ChartPhase) => void;
|
||||
/** Child components (Area, Grid, ChartTooltip, etc.) */
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
|
||||
|
||||
function extractAreaConfigs(children: ReactNode): LineConfig[] {
|
||||
const configs: LineConfig[] = [];
|
||||
|
||||
Children.forEach(children, (child) => {
|
||||
if (!isValidElement(child)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const childType = child.type as {
|
||||
displayName?: string;
|
||||
name?: string;
|
||||
};
|
||||
const componentName =
|
||||
typeof child.type === "function"
|
||||
? childType.displayName || childType.name || ""
|
||||
: "";
|
||||
|
||||
const props = child.props as AreaProps | undefined;
|
||||
const isPatternArea =
|
||||
componentName === "PatternArea" || child.type === PatternArea;
|
||||
const isAreaComponent =
|
||||
componentName === "Area" ||
|
||||
child.type === Area ||
|
||||
(props &&
|
||||
typeof props.dataKey === "string" &&
|
||||
props.dataKey.length > 0 &&
|
||||
!isPatternArea);
|
||||
|
||||
if (isAreaComponent && props?.dataKey) {
|
||||
configs.push({
|
||||
dataKey: props.dataKey,
|
||||
stroke: props.stroke || props.fill || "var(--chart-line-primary)",
|
||||
strokeWidth: props.strokeWidth || 2,
|
||||
yAxisId: props.yAxisId,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return configs;
|
||||
}
|
||||
|
||||
interface ChartInnerProps {
|
||||
width: number;
|
||||
height: number;
|
||||
data: Record<string, unknown>[];
|
||||
xDataKey: string;
|
||||
margin: Margin;
|
||||
animationDuration: number;
|
||||
animationEasing?: string;
|
||||
enterTransition?: Transition;
|
||||
revealSignature?: string;
|
||||
chartStatus: ChartStatus;
|
||||
loadingLabel?: string;
|
||||
yDomainTweenDuration: number;
|
||||
yDomainTween: boolean;
|
||||
xDomain?: [Date, Date];
|
||||
xDomainSlotCount?: number;
|
||||
tweenYDomainOnXDomainChange?: boolean;
|
||||
children: ReactNode;
|
||||
containerRef: React.RefObject<HTMLDivElement | null>;
|
||||
onPhaseChange: (phase: ChartPhase) => void;
|
||||
}
|
||||
|
||||
function ChartInner({
|
||||
width,
|
||||
height,
|
||||
data,
|
||||
xDataKey,
|
||||
margin,
|
||||
animationDuration,
|
||||
animationEasing,
|
||||
enterTransition,
|
||||
revealSignature,
|
||||
chartStatus,
|
||||
loadingLabel,
|
||||
yDomainTweenDuration,
|
||||
yDomainTween,
|
||||
xDomain,
|
||||
xDomainSlotCount,
|
||||
tweenYDomainOnXDomainChange,
|
||||
children,
|
||||
containerRef,
|
||||
onPhaseChange,
|
||||
}: ChartInnerProps) {
|
||||
const lines = useMemo(() => extractAreaConfigs(children), [children]);
|
||||
|
||||
return (
|
||||
<TimeSeriesChartInner
|
||||
animationDuration={animationDuration}
|
||||
animationEasing={animationEasing}
|
||||
chartStatus={chartStatus}
|
||||
clipPathId="chart-area-grow-clip"
|
||||
containerRef={containerRef}
|
||||
data={data}
|
||||
enterTransition={enterTransition}
|
||||
height={height}
|
||||
lines={lines}
|
||||
loadingLabel={loadingLabel}
|
||||
margin={margin}
|
||||
onPhaseChange={onPhaseChange}
|
||||
revealSignature={revealSignature}
|
||||
tweenYDomainOnXDomainChange={tweenYDomainOnXDomainChange}
|
||||
width={width}
|
||||
xDataKey={xDataKey}
|
||||
xDomain={xDomain}
|
||||
xDomainSlotCount={xDomainSlotCount}
|
||||
yDomainTween={yDomainTween}
|
||||
yDomainTweenDuration={yDomainTweenDuration}
|
||||
>
|
||||
{children}
|
||||
</TimeSeriesChartInner>
|
||||
);
|
||||
}
|
||||
|
||||
export function AreaChart({
|
||||
data,
|
||||
xDataKey = "date",
|
||||
margin: marginProp,
|
||||
animationDuration = 1100,
|
||||
animationEasing,
|
||||
enterTransition,
|
||||
revealSignature,
|
||||
aspectRatio = "2 / 1",
|
||||
className = "",
|
||||
status = DEFAULT_CHART_STATUS,
|
||||
loadingLabel,
|
||||
yDomainTweenDuration = DEFAULT_Y_DOMAIN_TWEEN_MS,
|
||||
yDomainTween = true,
|
||||
xDomain,
|
||||
xDomainSlotCount,
|
||||
tweenYDomainOnXDomainChange = false,
|
||||
style,
|
||||
onPhaseChange,
|
||||
children,
|
||||
}: AreaChartProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const margin = { ...DEFAULT_MARGIN, ...marginProp };
|
||||
const [chartPhase, setChartPhase] = useState<ChartPhase>(() =>
|
||||
resolveRestingChartPhase(status)
|
||||
);
|
||||
const handlePhaseChange = useCallback(
|
||||
(phase: ChartPhase) => {
|
||||
setChartPhase(phase);
|
||||
onPhaseChange?.(phase);
|
||||
},
|
||||
[onPhaseChange]
|
||||
);
|
||||
|
||||
const showLoadingLabel = Boolean(
|
||||
loadingLabel?.trim() &&
|
||||
(chartPhase === "loading" ||
|
||||
chartPhase === "exiting" ||
|
||||
chartPhase === "gridTweenReady" ||
|
||||
chartPhase === "revealingLoading")
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("relative w-full", className)}
|
||||
ref={containerRef}
|
||||
style={{ aspectRatio, touchAction: "none", ...style }}
|
||||
>
|
||||
<ParentSize debounceTime={10}>
|
||||
{({ width, height }) => (
|
||||
<ChartInner
|
||||
animationDuration={animationDuration}
|
||||
animationEasing={animationEasing}
|
||||
chartStatus={status}
|
||||
containerRef={containerRef}
|
||||
data={data}
|
||||
enterTransition={enterTransition}
|
||||
height={height}
|
||||
loadingLabel={loadingLabel}
|
||||
margin={margin}
|
||||
onPhaseChange={handlePhaseChange}
|
||||
revealSignature={revealSignature}
|
||||
tweenYDomainOnXDomainChange={tweenYDomainOnXDomainChange}
|
||||
width={width}
|
||||
xDataKey={xDataKey}
|
||||
xDomain={xDomain}
|
||||
xDomainSlotCount={xDomainSlotCount}
|
||||
yDomainTween={yDomainTween}
|
||||
yDomainTweenDuration={yDomainTweenDuration}
|
||||
>
|
||||
{children}
|
||||
</ChartInner>
|
||||
)}
|
||||
</ParentSize>
|
||||
{showLoadingLabel ? (
|
||||
<ChartLoadingLabel
|
||||
exiting={chartPhase !== "loading"}
|
||||
text={loadingLabel}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { Area, type AreaProps } from "./area";
|
||||
|
||||
export default AreaChart;
|
||||
113
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/area-gradient-defs.tsx
vendored
Normal file
113
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/area-gradient-defs.tsx
vendored
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import {
|
||||
type FadeEdges,
|
||||
fadeGradientStops,
|
||||
resolveFadeSides,
|
||||
viewportFadeGradientAttrs,
|
||||
} from "./fade-edges";
|
||||
|
||||
interface AreaGradientDefsProps {
|
||||
gradientId: string;
|
||||
strokeGradientId: string;
|
||||
edgeMaskId: string;
|
||||
edgeGradientId: string;
|
||||
fill: string;
|
||||
fillOpacity: number;
|
||||
gradientToOpacity: number;
|
||||
/** 0–1: where the bottom stop sits (1 = full-height gradient). */
|
||||
gradientSpan?: number;
|
||||
resolvedStroke: string;
|
||||
isPatternFill: boolean;
|
||||
fadeEdges: FadeEdges;
|
||||
innerWidth: number;
|
||||
innerHeight: number;
|
||||
}
|
||||
|
||||
export function AreaGradientDefs({
|
||||
gradientId,
|
||||
strokeGradientId,
|
||||
edgeMaskId,
|
||||
edgeGradientId,
|
||||
fill,
|
||||
fillOpacity,
|
||||
gradientToOpacity,
|
||||
gradientSpan = 1,
|
||||
resolvedStroke,
|
||||
isPatternFill,
|
||||
fadeEdges,
|
||||
innerWidth,
|
||||
innerHeight,
|
||||
}: AreaGradientDefsProps) {
|
||||
const sides = resolveFadeSides(fadeEdges);
|
||||
// Stroke gradient mirrors the area's edge fade so the line doesn't pop in
|
||||
// past the faded fill. Skip emitting it when neither edge fades — the line
|
||||
// can then paint a solid stroke instead of an unnecessary url(#...) ref.
|
||||
const strokeStops = sides.any ? fadeGradientStops(sides) : null;
|
||||
const showEdgeMask = sides.any && !isPatternFill;
|
||||
const edgeStops = showEdgeMask ? fadeGradientStops(sides) : null;
|
||||
const span = Math.min(1, Math.max(0.01, gradientSpan));
|
||||
const midOffset = `${span * 100}%`;
|
||||
|
||||
return (
|
||||
<defs>
|
||||
{isPatternFill ? null : (
|
||||
<linearGradient id={gradientId} x1="0%" x2="0%" y1="0%" y2="100%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: fill, stopOpacity: fillOpacity }}
|
||||
/>
|
||||
<stop
|
||||
offset={midOffset}
|
||||
style={{ stopColor: fill, stopOpacity: gradientToOpacity }}
|
||||
/>
|
||||
{span < 1 ? (
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: fill, stopOpacity: gradientToOpacity }}
|
||||
/>
|
||||
) : null}
|
||||
</linearGradient>
|
||||
)}
|
||||
|
||||
{strokeStops ? (
|
||||
<linearGradient
|
||||
id={strokeGradientId}
|
||||
{...viewportFadeGradientAttrs(innerWidth)}
|
||||
>
|
||||
{strokeStops.map((stop) => (
|
||||
<stop
|
||||
key={stop.offset}
|
||||
offset={stop.offset}
|
||||
style={{ stopColor: resolvedStroke, stopOpacity: stop.opacity }}
|
||||
/>
|
||||
))}
|
||||
</linearGradient>
|
||||
) : null}
|
||||
|
||||
{edgeStops ? (
|
||||
<>
|
||||
<linearGradient
|
||||
id={edgeGradientId}
|
||||
{...viewportFadeGradientAttrs(innerWidth)}
|
||||
>
|
||||
{edgeStops.map((stop) => (
|
||||
<stop
|
||||
key={stop.offset}
|
||||
offset={stop.offset}
|
||||
style={{ stopColor: "white", stopOpacity: stop.opacity }}
|
||||
/>
|
||||
))}
|
||||
</linearGradient>
|
||||
<mask id={edgeMaskId}>
|
||||
<rect
|
||||
fill={`url(#${edgeGradientId})`}
|
||||
height={innerHeight}
|
||||
width={innerWidth}
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
</mask>
|
||||
</>
|
||||
) : null}
|
||||
</defs>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,377 @@
|
|||
"use client";
|
||||
|
||||
import { curveMonotoneX } from "@visx/curve";
|
||||
import { AreaClosed, LinePath } from "@visx/shape";
|
||||
|
||||
// CurveFactory type - simplified version compatible with visx
|
||||
// biome-ignore lint/suspicious/noExplicitAny: d3 curve factory type
|
||||
type CurveFactory = any;
|
||||
|
||||
import { useCallback, useId, useMemo, useRef, useState } from "react";
|
||||
import { AreaGradientDefs } from "./area-gradient-defs";
|
||||
import { chartCssVars, useChartStable, useYScale } from "./chart-context";
|
||||
import type { ChartPhase, LoadingStyle } from "./chart-phase";
|
||||
import { type FadeEdges, resolveFadeSides } from "./fade-edges";
|
||||
import {
|
||||
type LineLoadingPulseMode,
|
||||
LineLoadingPulseStroke,
|
||||
resolveLineLoadingPulseMode,
|
||||
} from "./line-loading-pulse";
|
||||
import { LINE_LOADING_LOOP_PAUSE_MS } from "./line-loading-timing";
|
||||
import { LineLoadingSweep } from "./loading-sweep";
|
||||
import {
|
||||
resolveDashTailBounds,
|
||||
usePathStrokeMetrics,
|
||||
} from "./path-stroke-utils";
|
||||
import { SeriesDashTailOverlay } from "./series-dash-tail-overlay";
|
||||
import { SeriesHighlightLayer } from "./series-highlight-layer";
|
||||
import { SeriesHoverDim } from "./series-hover-dim";
|
||||
import { SeriesMarkers } from "./series-markers";
|
||||
import type { SeriesPointMarkerStyle } from "./series-point-marker";
|
||||
|
||||
export interface AreaProps {
|
||||
/** Key in data to use for y values */
|
||||
dataKey: string;
|
||||
/** Y-scale group id (Recharts `yAxisId`). Default: `"left"`. */
|
||||
yAxisId?: string | number;
|
||||
/** Fill color for the area gradient start. Default: var(--chart-line-primary) */
|
||||
fill?: string;
|
||||
/** Fill opacity at the top of the area. Default: 0.4 */
|
||||
fillOpacity?: number;
|
||||
/** Stroke color for the line. Default: same as fill */
|
||||
stroke?: string;
|
||||
/** Stroke width. Default: 2 */
|
||||
strokeWidth?: number;
|
||||
/** Curve function. Default: curveMonotoneX */
|
||||
curve?: CurveFactory;
|
||||
/** Whether to animate the area. Default: true */
|
||||
animate?: boolean;
|
||||
/** Whether to show the stroke line. Default: true */
|
||||
showLine?: boolean;
|
||||
/** Whether to show highlight segment on hover. Default: true */
|
||||
showHighlight?: boolean;
|
||||
/** Gradient opacity at bottom (0 = fully transparent). Default: 0 */
|
||||
gradientToOpacity?: number;
|
||||
/**
|
||||
* Vertical extent of the fill gradient (0–1). `1` fades across the full
|
||||
* height; lower values compress the gradient toward the top.
|
||||
*/
|
||||
gradientSpan?: number;
|
||||
/**
|
||||
* Fade the area fill (and stroke) toward transparent at the chart edges.
|
||||
* - `true` fades both edges, `false` disables the fade entirely.
|
||||
* - `"left"` / `"right"` fades only that side — useful when the opposite
|
||||
* edge butts up against another element you don't want to fade into.
|
||||
* Default: false
|
||||
*/
|
||||
fadeEdges?: FadeEdges;
|
||||
/** Render scatter-style circle markers at each data point. Default: false */
|
||||
showMarkers?: boolean;
|
||||
/** Marker styling (same options as Scatter). */
|
||||
markers?: SeriesPointMarkerStyle;
|
||||
/**
|
||||
* Data index from which the line stroke becomes dashed (inclusive).
|
||||
* Useful for projecting incomplete periods, e.g. dashed from yesterday through today.
|
||||
*/
|
||||
dashFromIndex?: number;
|
||||
/** Dash pattern for the tail segment when `dashFromIndex` is set. Default: "6,4" */
|
||||
dashArray?: string;
|
||||
/** Pulse stroke color while chart is loading. Default: var(--foreground) */
|
||||
loadingStroke?: string;
|
||||
/** Pulse stroke opacity while chart is loading. Default: 0.5 */
|
||||
loadingStrokeOpacity?: number;
|
||||
/**
|
||||
* Show the loading pulse overlay. Default: follows chart loading phase.
|
||||
* Set `false` to disable even during loading.
|
||||
*/
|
||||
loading?: boolean;
|
||||
/** Override pulse animation mode (loop / exit / enter). */
|
||||
loadingPulseMode?: LineLoadingPulseMode;
|
||||
/**
|
||||
* Loading animation while the chart is in loading status: the default
|
||||
* traveling `"pulse"`, or a diagonal `"sweep"` shimmer across the skeleton
|
||||
* area. Default: `"pulse"`.
|
||||
*/
|
||||
loadingStyle?: LoadingStyle;
|
||||
}
|
||||
|
||||
function useAreaLoadingPulseState(
|
||||
chartPhase: ChartPhase,
|
||||
loading: boolean | undefined,
|
||||
loadingPulseMode: LineLoadingPulseMode | undefined,
|
||||
notifyLoadingPulseComplete?: () => void
|
||||
) {
|
||||
const phasePulseMode = resolveLineLoadingPulseMode(chartPhase);
|
||||
const pulseMode =
|
||||
loading === false
|
||||
? null
|
||||
: (loadingPulseMode ?? (loading === true ? "loop" : phasePulseMode));
|
||||
const showLoadingPulse = pulseMode != null;
|
||||
const showSeriesContent =
|
||||
chartPhase === "revealing" ||
|
||||
chartPhase === "ready" ||
|
||||
chartPhase === "exitingReady";
|
||||
const [pulseEpoch, setPulseEpoch] = useState(0);
|
||||
|
||||
const handleLoadingPulseComplete = useCallback(() => {
|
||||
if (pulseMode === "loop") {
|
||||
window.setTimeout(() => {
|
||||
setPulseEpoch((epoch) => epoch + 1);
|
||||
}, LINE_LOADING_LOOP_PAUSE_MS);
|
||||
return;
|
||||
}
|
||||
notifyLoadingPulseComplete?.();
|
||||
}, [notifyLoadingPulseComplete, pulseMode]);
|
||||
|
||||
return {
|
||||
handleLoadingPulseComplete,
|
||||
pulseMode,
|
||||
pulseEpoch,
|
||||
showLoadingPulse,
|
||||
showSeriesContent,
|
||||
};
|
||||
}
|
||||
|
||||
// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: mirrors Line series layout (fill, stroke, dash, markers, pulse)
|
||||
export function Area({
|
||||
dataKey,
|
||||
yAxisId,
|
||||
fill = chartCssVars.linePrimary,
|
||||
fillOpacity = 0.4,
|
||||
stroke,
|
||||
strokeWidth = 2,
|
||||
curve = curveMonotoneX,
|
||||
animate = true,
|
||||
showLine = true,
|
||||
showHighlight = true,
|
||||
gradientToOpacity = 0,
|
||||
gradientSpan = 1,
|
||||
fadeEdges = false,
|
||||
showMarkers = false,
|
||||
markers,
|
||||
dashFromIndex,
|
||||
dashArray = "6,4",
|
||||
loading,
|
||||
loadingStroke = chartCssVars.foreground,
|
||||
loadingStrokeOpacity = 0.5,
|
||||
loadingPulseMode,
|
||||
loadingStyle = "pulse",
|
||||
}: AreaProps) {
|
||||
// Stable slice only: hover state lives inside `<SeriesHoverDim>` and
|
||||
// `<SeriesHighlightLayer>` so this component (and its expensive
|
||||
// <SeriesDashTailOverlay> child) does not re-render on cursor motion.
|
||||
// The reveal-clip is now a single shared clipPath at the chart-shell
|
||||
// level (`time-series-chart-shell.tsx`); we no longer render a per-area
|
||||
// `<ChartRevealClip>` or read `revealEpoch` here.
|
||||
const {
|
||||
data,
|
||||
renderData,
|
||||
xScale,
|
||||
innerHeight,
|
||||
innerWidth,
|
||||
xAccessor,
|
||||
lines,
|
||||
chartPhase,
|
||||
notifyLoadingPulseComplete,
|
||||
} = useChartStable();
|
||||
const yScale = useYScale(yAxisId);
|
||||
const {
|
||||
handleLoadingPulseComplete,
|
||||
pulseMode,
|
||||
pulseEpoch,
|
||||
showLoadingPulse,
|
||||
showSeriesContent,
|
||||
} = useAreaLoadingPulseState(
|
||||
chartPhase,
|
||||
loading,
|
||||
loadingPulseMode,
|
||||
notifyLoadingPulseComplete
|
||||
);
|
||||
|
||||
const seriesIndex = useMemo(() => {
|
||||
const index = lines.findIndex((line) => line.dataKey === dataKey);
|
||||
return index >= 0 ? index : 0;
|
||||
}, [lines, dataKey]);
|
||||
|
||||
const pathRef = useRef<SVGPathElement>(null);
|
||||
const { pathLength, pathD } = usePathStrokeMetrics(pathRef, [
|
||||
renderData,
|
||||
innerWidth,
|
||||
dashFromIndex,
|
||||
showLine,
|
||||
showSeriesContent,
|
||||
showLoadingPulse,
|
||||
]);
|
||||
|
||||
// Unique IDs for this area
|
||||
const uniqueId = useId();
|
||||
const gradientId = `area-gradient-${dataKey}-${uniqueId}`;
|
||||
const strokeGradientId = `area-stroke-gradient-${dataKey}-${uniqueId}`;
|
||||
const edgeMaskId = `area-edge-mask-${dataKey}-${uniqueId}`;
|
||||
const edgeGradientId = `${edgeMaskId}-gradient`;
|
||||
|
||||
const isPatternFill = fill.startsWith("url(");
|
||||
const showAreaFill = isPatternFill || fillOpacity > 0;
|
||||
const areaFill = isPatternFill ? fill : `url(#${gradientId})`;
|
||||
|
||||
// Resolved stroke color (defaults to fill; pattern URLs need a real color)
|
||||
const resolvedStroke =
|
||||
stroke || (isPatternFill ? chartCssVars.linePrimary : fill);
|
||||
|
||||
const getY = useCallback(
|
||||
(d: Record<string, unknown>) => {
|
||||
const value = d[dataKey];
|
||||
return typeof value === "number" ? (yScale(value) ?? 0) : 0;
|
||||
},
|
||||
[dataKey, yScale]
|
||||
);
|
||||
|
||||
const hasDashTail = resolveDashTailBounds(dashFromIndex, data.length);
|
||||
// The stroke gradient is only emitted when at least one edge fades, so fall
|
||||
// back to the resolved solid color otherwise — avoids an invalid url(#...).
|
||||
const fadeSides = resolveFadeSides(fadeEdges);
|
||||
const useViewportEdgeFade = fadeSides.any && !isPatternFill;
|
||||
let strokePaint = resolvedStroke;
|
||||
if (!useViewportEdgeFade && fadeSides.any) {
|
||||
strokePaint = `url(#${strokeGradientId})`;
|
||||
}
|
||||
const highlightEnabled =
|
||||
showHighlight && showLine && !showLoadingPulse && showSeriesContent;
|
||||
const showSeriesStroke = showSeriesContent && showLine;
|
||||
let visibleStroke = "transparent";
|
||||
if (showSeriesStroke && !hasDashTail) {
|
||||
visibleStroke = strokePaint;
|
||||
}
|
||||
const shouldMeasurePath = showLine && (showSeriesContent || showLoadingPulse);
|
||||
|
||||
const seriesLayers = (
|
||||
<>
|
||||
{showSeriesContent && showAreaFill ? (
|
||||
<AreaClosed
|
||||
curve={curve}
|
||||
data={renderData}
|
||||
fill={areaFill}
|
||||
x={(d) => xScale(xAccessor(d)) ?? 0}
|
||||
y={getY}
|
||||
yScale={yScale}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{shouldMeasurePath ? (
|
||||
<>
|
||||
<LinePath
|
||||
curve={curve}
|
||||
data={renderData}
|
||||
innerRef={pathRef}
|
||||
stroke={visibleStroke}
|
||||
strokeLinecap="round"
|
||||
strokeWidth={strokeWidth}
|
||||
x={(d) => xScale(xAccessor(d)) ?? 0}
|
||||
y={getY}
|
||||
/>
|
||||
{showSeriesStroke ? (
|
||||
<SeriesDashTailOverlay
|
||||
dashArray={dashArray}
|
||||
dashFromIndex={dashFromIndex}
|
||||
data={data}
|
||||
innerHeight={innerHeight}
|
||||
innerWidth={innerWidth}
|
||||
pathD={pathD}
|
||||
pathLength={pathLength}
|
||||
stroke={strokePaint}
|
||||
strokeWidth={strokeWidth}
|
||||
xAccessor={xAccessor}
|
||||
xScale={xScale}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
|
||||
// Sweep style owns all loading modes (loop + the exit/enter transitions),
|
||||
// drawing its own silhouette; the pulse covers the default style.
|
||||
const sweepLoading =
|
||||
showLoadingPulse && innerWidth > 0 && loadingStyle === "sweep";
|
||||
const pulseLoading = showLoadingPulse && innerWidth > 0 && !sweepLoading;
|
||||
|
||||
return (
|
||||
<>
|
||||
<AreaGradientDefs
|
||||
edgeGradientId={edgeGradientId}
|
||||
edgeMaskId={edgeMaskId}
|
||||
fadeEdges={fadeEdges}
|
||||
fill={fill}
|
||||
fillOpacity={fillOpacity}
|
||||
gradientId={gradientId}
|
||||
gradientSpan={gradientSpan}
|
||||
gradientToOpacity={gradientToOpacity}
|
||||
innerHeight={innerHeight}
|
||||
innerWidth={innerWidth}
|
||||
isPatternFill={isPatternFill}
|
||||
resolvedStroke={resolvedStroke}
|
||||
strokeGradientId={strokeGradientId}
|
||||
/>
|
||||
|
||||
<SeriesHoverDim
|
||||
dimOpacity={0.6}
|
||||
enabled={showHighlight}
|
||||
seriesIndex={seriesIndex}
|
||||
>
|
||||
{useViewportEdgeFade ? (
|
||||
<g mask={`url(#${edgeMaskId})`}>{seriesLayers}</g>
|
||||
) : (
|
||||
seriesLayers
|
||||
)}
|
||||
</SeriesHoverDim>
|
||||
|
||||
{/* Highlight segment on hover — isolated hover subscriber. */}
|
||||
<SeriesHighlightLayer
|
||||
enabled={highlightEnabled}
|
||||
height={innerHeight}
|
||||
pathRef={pathRef}
|
||||
stroke={resolvedStroke}
|
||||
strokeWidth={strokeWidth}
|
||||
/>
|
||||
|
||||
{showMarkers && showSeriesContent ? (
|
||||
<SeriesMarkers
|
||||
animate={animate}
|
||||
dataKey={dataKey}
|
||||
{...markers}
|
||||
fill={markers?.fill ?? resolvedStroke}
|
||||
stroke={markers?.stroke ?? markers?.fill ?? resolvedStroke}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{sweepLoading ? (
|
||||
<LineLoadingSweep
|
||||
curve={curve}
|
||||
key="loading-sweep"
|
||||
mode={pulseMode ?? "loop"}
|
||||
onTransitionComplete={handleLoadingPulseComplete}
|
||||
stroke={loadingStroke}
|
||||
strokeOpacity={loadingStrokeOpacity}
|
||||
strokeWidth={strokeWidth}
|
||||
withArea
|
||||
/>
|
||||
) : null}
|
||||
{pulseLoading && pathD ? (
|
||||
<LineLoadingPulseStroke
|
||||
key="loading-pulse"
|
||||
loopEpoch={pulseEpoch}
|
||||
mode={pulseMode ?? undefined}
|
||||
onCycleComplete={handleLoadingPulseComplete}
|
||||
pathD={pathD}
|
||||
stroke={loadingStroke}
|
||||
strokeOpacity={loadingStrokeOpacity}
|
||||
strokeWidth={strokeWidth}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Area.displayName = "Area";
|
||||
|
||||
export default Area;
|
||||
219
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/background.tsx
vendored
Normal file
219
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/background.tsx
vendored
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
"use client";
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import { useId, useMemo } from "react";
|
||||
import { useChartStable } from "./chart-context";
|
||||
import {
|
||||
type PatternPresetId,
|
||||
type PatternPresetOptions,
|
||||
renderPatternPreset,
|
||||
} from "./pattern-preset";
|
||||
|
||||
export type BackgroundPatternPreset = PatternPresetId;
|
||||
|
||||
export interface BackgroundProps extends PatternPresetOptions {
|
||||
/** Pattern preset. `"none"` renders nothing. */
|
||||
pattern?: BackgroundPatternPreset;
|
||||
/** Pattern stroke color. Default: `var(--chart-grid)` */
|
||||
color?: string;
|
||||
/** Apply the pattern texture to the plot area. Default: true */
|
||||
showFill?: boolean;
|
||||
/** Pattern fill opacity. Default: 1 */
|
||||
opacity?: number;
|
||||
/** Fade pattern at the left and right chart edges. Default: true */
|
||||
fadeHorizontal?: boolean;
|
||||
/** Fade pattern at the top and bottom chart edges. Default: true */
|
||||
fadeVertical?: boolean;
|
||||
/** Horizontal fade zone as % of plot width per edge. Default: 10 */
|
||||
fadeHorizontalLength?: number;
|
||||
/** Vertical fade zone as % of plot height per edge. Default: 10 */
|
||||
fadeVerticalLength?: number;
|
||||
}
|
||||
|
||||
const BACKGROUND_ENTER_FADE_MS = 420;
|
||||
|
||||
function clampFadeLength(length: number): number {
|
||||
return Math.min(45, Math.max(0, length));
|
||||
}
|
||||
|
||||
function fadeMaskStops(lengthPercent: number): Array<{
|
||||
offset: string;
|
||||
opacity: number;
|
||||
}> {
|
||||
const edge = clampFadeLength(lengthPercent);
|
||||
return [
|
||||
{ offset: "0%", opacity: 0 },
|
||||
{ offset: `${edge}%`, opacity: 1 },
|
||||
{ offset: `${100 - edge}%`, opacity: 1 },
|
||||
{ offset: "100%", opacity: 0 },
|
||||
];
|
||||
}
|
||||
|
||||
/** Plot-area pattern fill for charts without a grid. Renders behind series layers. */
|
||||
export function Background({
|
||||
pattern = "diagonal",
|
||||
color = "var(--chart-grid)",
|
||||
scale = 1,
|
||||
strokeWidth,
|
||||
radius,
|
||||
complement,
|
||||
fill,
|
||||
dotFill,
|
||||
tileBackground,
|
||||
showFill = true,
|
||||
opacity = 1,
|
||||
fadeHorizontal = true,
|
||||
fadeVertical = true,
|
||||
fadeHorizontalLength = 10,
|
||||
fadeVerticalLength = 10,
|
||||
}: BackgroundProps) {
|
||||
const { innerWidth, innerHeight, isLoaded, enterTransition } =
|
||||
useChartStable();
|
||||
const uniqueId = useId();
|
||||
const patternId = `chart-background-${uniqueId.replace(/:/g, "")}`;
|
||||
|
||||
const hStops = useMemo(
|
||||
() => fadeMaskStops(fadeHorizontalLength),
|
||||
[fadeHorizontalLength]
|
||||
);
|
||||
const vStops = useMemo(
|
||||
() => fadeMaskStops(fadeVerticalLength),
|
||||
[fadeVerticalLength]
|
||||
);
|
||||
|
||||
if (pattern === "none" || !showFill || innerWidth <= 0 || innerHeight <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const patternNode = renderPatternPreset(pattern, patternId, {
|
||||
color,
|
||||
scale,
|
||||
strokeWidth,
|
||||
radius,
|
||||
complement,
|
||||
fill,
|
||||
dotFill,
|
||||
tileBackground,
|
||||
});
|
||||
if (!patternNode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const fadeMask = fadeHorizontal || fadeVertical;
|
||||
const hMaskId = `chart-background-fade-h-${uniqueId.replace(/:/g, "")}`;
|
||||
const hGradientId = `${hMaskId}-gradient`;
|
||||
const vMaskId = `chart-background-fade-v-${uniqueId.replace(/:/g, "")}`;
|
||||
const vGradientId = `${vMaskId}-gradient`;
|
||||
const combinedMaskId = `chart-background-fade-${uniqueId.replace(/:/g, "")}`;
|
||||
|
||||
let maskRef: string | undefined;
|
||||
if (fadeHorizontal && fadeVertical) {
|
||||
maskRef = `url(#${combinedMaskId})`;
|
||||
} else if (fadeHorizontal) {
|
||||
maskRef = `url(#${hMaskId})`;
|
||||
} else if (fadeVertical) {
|
||||
maskRef = `url(#${vMaskId})`;
|
||||
}
|
||||
|
||||
const targetOpacity = opacity;
|
||||
const revealOpacity = isLoaded ? targetOpacity : 0;
|
||||
const enterFade =
|
||||
enterTransition && typeof enterTransition === "object"
|
||||
? enterTransition
|
||||
: { duration: BACKGROUND_ENTER_FADE_MS / 1000, ease: "easeOut" as const };
|
||||
|
||||
return (
|
||||
// biome-ignore lint/a11y/noAriaHiddenOnFocusable: decorative plot-area pattern layer
|
||||
<g aria-hidden="true" className="chart-background">
|
||||
{fadeMask ? (
|
||||
<defs>
|
||||
{fadeHorizontal ? (
|
||||
<>
|
||||
<linearGradient
|
||||
id={hGradientId}
|
||||
x1="0%"
|
||||
x2="100%"
|
||||
y1="0%"
|
||||
y2="0%"
|
||||
>
|
||||
{hStops.map((stop) => (
|
||||
<stop
|
||||
key={stop.offset}
|
||||
offset={stop.offset}
|
||||
style={{ stopColor: "white", stopOpacity: stop.opacity }}
|
||||
/>
|
||||
))}
|
||||
</linearGradient>
|
||||
<mask id={hMaskId}>
|
||||
<rect
|
||||
fill={`url(#${hGradientId})`}
|
||||
height={innerHeight}
|
||||
width={innerWidth}
|
||||
x={0}
|
||||
y={0}
|
||||
/>
|
||||
</mask>
|
||||
</>
|
||||
) : null}
|
||||
{fadeVertical ? (
|
||||
<>
|
||||
<linearGradient
|
||||
id={vGradientId}
|
||||
x1="0%"
|
||||
x2="0%"
|
||||
y1="0%"
|
||||
y2="100%"
|
||||
>
|
||||
{vStops.map((stop) => (
|
||||
<stop
|
||||
key={stop.offset}
|
||||
offset={stop.offset}
|
||||
style={{ stopColor: "white", stopOpacity: stop.opacity }}
|
||||
/>
|
||||
))}
|
||||
</linearGradient>
|
||||
<mask id={vMaskId}>
|
||||
<rect
|
||||
fill={`url(#${vGradientId})`}
|
||||
height={innerHeight}
|
||||
width={innerWidth}
|
||||
x={0}
|
||||
y={0}
|
||||
/>
|
||||
</mask>
|
||||
</>
|
||||
) : null}
|
||||
{fadeHorizontal && fadeVertical ? (
|
||||
<mask id={combinedMaskId}>
|
||||
<g mask={`url(#${hMaskId})`}>
|
||||
<rect
|
||||
fill={`url(#${vGradientId})`}
|
||||
height={innerHeight}
|
||||
width={innerWidth}
|
||||
x={0}
|
||||
y={0}
|
||||
/>
|
||||
</g>
|
||||
</mask>
|
||||
) : null}
|
||||
</defs>
|
||||
) : null}
|
||||
<defs>{patternNode}</defs>
|
||||
<motion.rect
|
||||
animate={{ opacity: revealOpacity }}
|
||||
fill={`url(#${patternId})`}
|
||||
height={innerHeight}
|
||||
initial={{ opacity: 0 }}
|
||||
mask={maskRef}
|
||||
transition={isLoaded ? enterFade : { duration: 0 }}
|
||||
width={innerWidth}
|
||||
x={0}
|
||||
y={0}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
Background.displayName = "Background";
|
||||
|
||||
export default Background;
|
||||
38
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/bar-chart-loading.tsx
vendored
Normal file
38
seo_mode/seo_mode/SEO-farm/vendor/bklit-ui/packages/ui/src/charts/bar-chart-loading.tsx
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
"use client";
|
||||
|
||||
import { BarChart } from "./bar-chart";
|
||||
import type { Margin } from "./chart-context";
|
||||
|
||||
const EMPTY_DATA: Record<string, unknown>[] = [];
|
||||
|
||||
export interface BarChartLoadingProps {
|
||||
/** Chart margins. */
|
||||
margin?: Partial<Margin>;
|
||||
/** Aspect ratio as "width / height". Default: "2 / 1" */
|
||||
aspectRatio?: string;
|
||||
/** Additional class name for the container. */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Turnkey loading skeleton for bar charts, a thin shortcut for
|
||||
* `<BarChart status="loading" />`. Renders shimmer-swept placeholder bars while
|
||||
* data is fetching; swap in a real `<BarChart>` once it resolves.
|
||||
*/
|
||||
export function BarChartLoading({
|
||||
margin,
|
||||
aspectRatio = "2 / 1",
|
||||
className = "",
|
||||
}: BarChartLoadingProps) {
|
||||
return (
|
||||
<BarChart
|
||||
aspectRatio={aspectRatio}
|
||||
className={className}
|
||||
data={EMPTY_DATA}
|
||||
margin={margin}
|
||||
status="loading"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default BarChartLoading;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue