From 87dda77b05d509afe2b27f4d298342ef41fc0ba8 Mon Sep 17 00:00:00 2001 From: CanisMinor Date: Wed, 14 Feb 2024 10:16:11 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20init?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .bunfig.toml | 3 + .changelogrc.js | 1 + .commitlintrc.js | 1 + .dumirc.ts | 67 +++ .editorconfig | 16 + .eslintignore | 30 ++ .eslintrc.js | 1 + .fatherrc.ts | 5 + .github/ISSUE_TEMPLATE/1_bug_report.yml | 45 ++ .github/ISSUE_TEMPLATE/2_feature_request.yml | 21 + .github/ISSUE_TEMPLATE/3_question.yml | 15 + .github/ISSUE_TEMPLATE/4_other.md | 7 + .github/PULL_REQUEST_TEMPLATE.md | 18 + .github/workflows/issue-auto-comments.yml | 72 +++ .github/workflows/issue-check-inactive.yml | 23 + .github/workflows/issue-close-require.yml | 52 ++ .github/workflows/release.yml | 36 ++ .github/workflows/test.yml | 27 + .gitignore | 45 ++ .husky/commit-msg | 4 + .husky/pre-commit | 5 + .i18nrc.cjs | 7 + .npmrc | 11 + .prettierignore | 61 +++ .prettierrc.js | 1 + .releaserc.js | 1 + .remarkrc.js | 1 + .stylelintrc.js | 10 + CHANGELOG.md | 487 +++++++++++++++++++ LICENSE | 21 + README.md | 208 +++++++- docs/changelog.md | 9 + docs/index.md | 7 + docs/index.tsx | 18 + package.json | 122 +++++ renovate.json | 13 + src/BarChart/demos/data.ts | 8 + src/BarChart/demos/index.tsx | 71 +++ src/BarChart/index.md | 8 + src/BarChart/index.tsx | 185 +++++++ src/BarChart/styles.ts | 18 + src/components/ColorSwatch/index.tsx | 14 + src/components/Legend/Content.tsx | 60 +++ src/components/Legend/index.tsx | 27 + src/components/Legend/styles.ts | 19 + src/components/Tooltip/Content.tsx | 71 +++ src/components/Tooltip/index.tsx | 48 ++ src/components/Tooltip/styles.ts | 21 + src/components/XAxis/index.tsx | 27 + src/components/YAxis/index.tsx | 27 + src/index.ts | 1 + src/types.ts | 93 ++++ src/utils/getData.ts | 7 + src/utils/getFilteredChartLegendPayload.ts | 3 + src/utils/getFilteredChartTooltipPayload.ts | 10 + src/utils/getSeriesLabels.ts | 12 + src/utils/valueToPercent.ts | 3 + tsconfig-check.json | 7 + tsconfig.json | 21 + vitest.config.ts | 14 + 60 files changed, 2245 insertions(+), 1 deletion(-) create mode 100644 .bunfig.toml create mode 100644 .changelogrc.js create mode 100644 .commitlintrc.js create mode 100644 .dumirc.ts create mode 100644 .editorconfig create mode 100644 .eslintignore create mode 100644 .eslintrc.js create mode 100644 .fatherrc.ts create mode 100644 .github/ISSUE_TEMPLATE/1_bug_report.yml create mode 100644 .github/ISSUE_TEMPLATE/2_feature_request.yml create mode 100644 .github/ISSUE_TEMPLATE/3_question.yml create mode 100644 .github/ISSUE_TEMPLATE/4_other.md create mode 100644 .github/PULL_REQUEST_TEMPLATE.md create mode 100644 .github/workflows/issue-auto-comments.yml create mode 100644 .github/workflows/issue-check-inactive.yml create mode 100644 .github/workflows/issue-close-require.yml create mode 100644 .github/workflows/release.yml create mode 100644 .github/workflows/test.yml create mode 100644 .gitignore create mode 100755 .husky/commit-msg create mode 100755 .husky/pre-commit create mode 100644 .i18nrc.cjs create mode 100644 .npmrc create mode 100644 .prettierignore create mode 100644 .prettierrc.js create mode 100644 .releaserc.js create mode 100644 .remarkrc.js create mode 100644 .stylelintrc.js create mode 100644 CHANGELOG.md create mode 100644 LICENSE create mode 100644 docs/changelog.md create mode 100644 docs/index.md create mode 100644 docs/index.tsx create mode 100644 package.json create mode 100644 renovate.json create mode 100644 src/BarChart/demos/data.ts create mode 100644 src/BarChart/demos/index.tsx create mode 100644 src/BarChart/index.md create mode 100644 src/BarChart/index.tsx create mode 100644 src/BarChart/styles.ts create mode 100644 src/components/ColorSwatch/index.tsx create mode 100644 src/components/Legend/Content.tsx create mode 100644 src/components/Legend/index.tsx create mode 100644 src/components/Legend/styles.ts create mode 100644 src/components/Tooltip/Content.tsx create mode 100644 src/components/Tooltip/index.tsx create mode 100644 src/components/Tooltip/styles.ts create mode 100644 src/components/XAxis/index.tsx create mode 100644 src/components/YAxis/index.tsx create mode 100644 src/index.ts create mode 100644 src/types.ts create mode 100644 src/utils/getData.ts create mode 100644 src/utils/getFilteredChartLegendPayload.ts create mode 100644 src/utils/getFilteredChartTooltipPayload.ts create mode 100644 src/utils/getSeriesLabels.ts create mode 100644 src/utils/valueToPercent.ts create mode 100644 tsconfig-check.json create mode 100644 tsconfig.json create mode 100644 vitest.config.ts diff --git a/.bunfig.toml b/.bunfig.toml new file mode 100644 index 0000000..d6bb75b --- /dev/null +++ b/.bunfig.toml @@ -0,0 +1,3 @@ +[install.lockfile] + +save = false diff --git a/.changelogrc.js b/.changelogrc.js new file mode 100644 index 0000000..9a2f5f9 --- /dev/null +++ b/.changelogrc.js @@ -0,0 +1 @@ +module.exports = require('@lobehub/lint').changelog; diff --git a/.commitlintrc.js b/.commitlintrc.js new file mode 100644 index 0000000..9b8c6ac --- /dev/null +++ b/.commitlintrc.js @@ -0,0 +1 @@ +module.exports = require('@lobehub/lint').commitlint; diff --git a/.dumirc.ts b/.dumirc.ts new file mode 100644 index 0000000..d060c18 --- /dev/null +++ b/.dumirc.ts @@ -0,0 +1,67 @@ +import { defineConfig } from 'dumi'; + +import { homepage, name } from './package.json'; + +const isProduction = process.env.NODE_ENV === 'production'; +const isWin = process.platform === 'win32'; + +const themeConfig = { + actions: [ + { + link: homepage, + openExternal: true, + text: 'Github', + }, + { + link: '/components/anthropic', + text: 'Get Started', + type: 'primary', + }, + ], + apiHeader: { + docUrl: `{github}/tree/master/src/{atomId}/index.md`, + match: ['/components'], + pkg: name, + sourceUrl: `{github}/tree/master/src/{atomId}/index.tsx`, + }, + description: 'React modern charts components built on recharts', + footer: 'Made with 🤯 by LobeHub', + name: 'Charts', + nav: [ + { link: '/components/anthropic', title: 'Components' }, + { link: '/changelog', title: 'Changelog' }, + ], + socialLinks: { + discord: 'https://discord.gg/AYFPHvv2jT', + github: homepage, + }, + title: 'Lobe Charts', +}; + +export default defineConfig({ + apiParser: isProduction ? {} : false, + base: '/', + define: { + 'process.env': process.env, + }, + extraBabelPlugins: ['babel-plugin-antd-style'], + favicons: ['https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon.ico'], + locales: [{ id: 'en-US', name: 'English' }], + mfsu: isWin ? undefined : {}, + npmClient: 'pnpm', + publicPath: '/', + resolve: isProduction + ? { + entryFile: './src/index.ts', + } + : undefined, + styles: [ + `html, body { background: transparent; } + + @media (prefers-color-scheme: dark) { + html, body { background: #000; } + }`, + ], + themeConfig, + title: 'Lobe Charts', +}); diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..7e3649a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[Makefile] +indent_style = tab diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..305d1ef --- /dev/null +++ b/.eslintignore @@ -0,0 +1,30 @@ +# Eslintignore for LobeHub +################################################################ + +# dependencies +node_modules + +# ci +coverage +.coverage + +# test +jest* +_test_ +__test__ + +# umi +.umi +.umi-production +.umi-test +.dumi/tmp* +!.dumirc.ts + +# production +dist +es +lib +logs + +# misc +# add other ignore file below diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..bc75953 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1 @@ +module.exports = require('@lobehub/lint').eslint; diff --git a/.fatherrc.ts b/.fatherrc.ts new file mode 100644 index 0000000..8ee4f1b --- /dev/null +++ b/.fatherrc.ts @@ -0,0 +1,5 @@ +import { defineConfig } from 'father'; + +export default defineConfig({ + esm: { output: 'es' }, +}); diff --git a/.github/ISSUE_TEMPLATE/1_bug_report.yml b/.github/ISSUE_TEMPLATE/1_bug_report.yml new file mode 100644 index 0000000..d181c38 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/1_bug_report.yml @@ -0,0 +1,45 @@ +name: '🐛 反馈缺陷 Bug Report' +description: '反馈一个问题缺陷 | Report an bug' +title: '[Bug] ' +labels: '🐛 Bug' +body: + - type: dropdown + attributes: + label: '💻 系统环境 | Operating System' + options: + - Windows + - macOS + - Ubuntu + - Other Linux + - Other + validations: + required: true + - type: dropdown + attributes: + label: '🌐 浏览器 | Browser' + options: + - Chrome + - Edge + - Safari + - Firefox + - Other + validations: + required: true + - type: textarea + attributes: + label: '🐛 问题描述 | Bug Description' + description: A clear and concise description of the bug. + validations: + required: true + - type: textarea + attributes: + label: '🚦 期望结果 | Expected Behavior' + description: A clear and concise description of what you expected to happen. + - type: textarea + attributes: + label: '📷 复现步骤 | Recurrence Steps' + description: A clear and concise description of how to recurrence. + - type: textarea + attributes: + label: '📝 补充信息 | Additional Information' + description: If your problem needs further explanation, or if the issue you're seeing cannot be reproduced in a gist, please add more information here. diff --git a/.github/ISSUE_TEMPLATE/2_feature_request.yml b/.github/ISSUE_TEMPLATE/2_feature_request.yml new file mode 100644 index 0000000..edcf7d0 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/2_feature_request.yml @@ -0,0 +1,21 @@ +name: '🌠 功能需求 Feature Request' +description: '需求或建议 | Suggest an idea' +title: '[Request] ' +labels: '🌠 Feature Request' +body: + - type: textarea + attributes: + label: '🥰 需求描述 | Feature Description' + description: Please add a clear and concise description of the problem you are seeking to solve with this feature request. + validations: + required: true + - type: textarea + attributes: + label: '🧐 解决方案 | Proposed Solution' + description: Describe the solution you'd like in a clear and concise manner. + validations: + required: true + - type: textarea + attributes: + label: '📝 补充信息 | Additional Information' + description: Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/3_question.yml b/.github/ISSUE_TEMPLATE/3_question.yml new file mode 100644 index 0000000..f989f7d --- /dev/null +++ b/.github/ISSUE_TEMPLATE/3_question.yml @@ -0,0 +1,15 @@ +name: '😇 疑问或帮助 Help Wanted' +description: '疑问或需要帮助 | Need help' +title: '[Question] ' +labels: '😇 Help Wanted' +body: + - type: textarea + attributes: + label: '🧐 问题描述 | Proposed Solution' + description: A clear and concise description of the proplem. + validations: + required: true + - type: textarea + attributes: + label: '📝 补充信息 | Additional Information' + description: Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/4_other.md b/.github/ISSUE_TEMPLATE/4_other.md new file mode 100644 index 0000000..215dd1f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/4_other.md @@ -0,0 +1,7 @@ +--- +name: '📝 其他 Other' +about: '其他问题 | Other issues' +title: '' +labels: '' +assignees: '' +--- diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..ae2208c --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,18 @@ +#### 💻 变更类型 | Change Type + + + +- [ ] ✨ feat +- [ ] 🐛 fix +- [ ] ♻️ refactor +- [ ] 💄 style +- [ ] 🔨 chore +- [ ] 📝 docs + +#### 🔀 变更说明 | Description of Change + + + +#### 📝 补充信息 | Additional Information + + diff --git a/.github/workflows/issue-auto-comments.yml b/.github/workflows/issue-auto-comments.yml new file mode 100644 index 0000000..65b3c98 --- /dev/null +++ b/.github/workflows/issue-auto-comments.yml @@ -0,0 +1,72 @@ +name: Issue Auto Comment +on: + issues: + types: + - opened + - closed + - assigned + pull_request_target: + types: + - opened + - closed + +permissions: + contents: read + +jobs: + run: + permissions: + issues: write # for actions-cool/issues-helper to update issues + pull-requests: write # for actions-cool/issues-helper to update PRs + runs-on: ubuntu-latest + steps: + - name: Auto Comment on Issues Opened + uses: wow-actions/auto-comment@v1 + with: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN}} + issuesOpened: | + 👀 @{{ author }} + Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. + Please make sure you have given us as much context as possible.\ + 非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。 + - name: Auto Comment on Issues Closed + uses: wow-actions/auto-comment@v1 + with: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN}} + issuesClosed: | + ✅ @{{ author }} +
+ This issue is closed, If you have any questions, you can comment and reply.\ + 此问题已经关闭。如果您有任何问题，可以留言并回复。 + - name: Auto Comment on Pull Request Opened + uses: wow-actions/auto-comment@v1 + with: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN}} + pullRequestOpened: | + 👍 @{{ author }} +
+ Thank you for raising your pull request and contributing to our Community + Please make sure you have followed our contributing guidelines. We will review it as soon as possible. + If you encounter any problems, please feel free to connect with us.\ + 非常感谢您提出拉取请求并为我们的社区做出贡献，请确保您已经遵循了我们的贡献指南，我们会尽快审查它。 + 如果您遇到任何问题，请随时与我们联系。 + - name: Auto Comment on Pull Request Merged + uses: actions-cool/pr-welcome@main + if: github.event.pull_request.merged == true + with: + token: ${{ secrets.GH_TOKEN }} + comment: | + ❤️ Great PR @${{ github.event.pull_request.user.login }} ❤️ +
+ The growth of project is inseparable from user feedback and contribution, thanks for your contribution!\ + 项目的成长离不开用户反馈和贡献，感谢您的贡献! + emoji: 'hooray' + pr-emoji: '+1, heart' + - name: Remove inactive + if: github.event.issue.state == 'open' && github.actor == github.event.issue.user.login + uses: actions-cool/issues-helper@v3 + with: + actions: 'remove-labels' + token: ${{ secrets.GH_TOKEN }} + issue-number: ${{ github.event.issue.number }} + labels: 'Inactive' diff --git a/.github/workflows/issue-check-inactive.yml b/.github/workflows/issue-check-inactive.yml new file mode 100644 index 0000000..a5ae1fb --- /dev/null +++ b/.github/workflows/issue-check-inactive.yml @@ -0,0 +1,23 @@ +name: Issue Check Inactive + +on: + schedule: + - cron: '0 0 */15 * *' + +permissions: + contents: read + +jobs: + issue-check-inactive: + permissions: + issues: write # for actions-cool/issues-helper to update issues + pull-requests: write # for actions-cool/issues-helper to update PRs + runs-on: ubuntu-latest + steps: + - name: check-inactive + uses: actions-cool/issues-helper@v3 + with: + actions: 'check-inactive' + token: ${{ secrets.GH_TOKEN }} + inactive-label: 'Inactive' + inactive-day: 30 diff --git a/.github/workflows/issue-close-require.yml b/.github/workflows/issue-close-require.yml new file mode 100644 index 0000000..e64d0cd --- /dev/null +++ b/.github/workflows/issue-close-require.yml @@ -0,0 +1,52 @@ +name: Issue Close Require + +on: + schedule: + - cron: '0 0 * * *' + +permissions: + contents: read + +jobs: + issue-close-require: + permissions: + issues: write # for actions-cool/issues-helper to update issues + pull-requests: write # for actions-cool/issues-helper to update PRs + runs-on: ubuntu-latest + steps: + - name: need reproduce + uses: actions-cool/issues-helper@v3 + with: + actions: 'close-issues' + token: ${{ secrets.GH_TOKEN }} + labels: '✅ Fixed' + inactive-day: 3 + body: | + 👋 @{{ github.event.issue.user.login }} +
+ Since the issue was labeled with `✅ Fixed`, but no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.\ + 由于该 issue 被标记为已修复，同时 3 天未收到回应。现关闭 issue，若有任何问题，可评论回复。 + - name: need reproduce + uses: actions-cool/issues-helper@v3 + with: + actions: 'close-issues' + token: ${{ secrets.GH_TOKEN }} + labels: '🤔 Need Reproduce' + inactive-day: 3 + body: | + 👋 @{{ github.event.issue.user.login }} +
+ Since the issue was labeled with `🤔 Need Reproduce`, but no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.\ + 由于该 issue 被标记为需要更多信息，却 3 天未收到回应。现关闭 issue，若有任何问题，可评论回复。 + - name: need reproduce + uses: actions-cool/issues-helper@v3 + with: + actions: 'close-issues' + token: ${{ secrets.GH_TOKEN }} + labels: "🙅🏻‍♀️ WON'T DO" + inactive-day: 3 + body: | + 👋 @{{ github.event.issue.user.login }} +
+ Since the issue was labeled with `🙅🏻‍♀️ WON'T DO`, and no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.\ + 由于该 issue 被标记为暂不处理，同时 3 天未收到回应。现关闭 issue，若有任何问题，可评论回复。 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..f7f1a4f --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,36 @@ +name: Release CI +on: + push: + branches: + - master + - alpha + - beta + - rc + +jobs: + release: + name: Release + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Install bun + uses: oven-sh/setup-bun@v1 + + - name: Install deps + run: bun i + + - name: CI + run: bun run ci + + - name: Test + run: bun run test + + - name: Build + run: bun run build + + - name: Release + run: bun run release + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..9e0238f --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,27 @@ +name: Test CI +on: + pull_request: + push: + branches: + - '!main' +jobs: + test: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Install bun + uses: oven-sh/setup-bun@v1 + + - name: Install deps + run: bun i + + - name: CI + run: bun run ci + + - name: Test and coverage + run: bun run test:coverage + + - name: Upload coverage to Codecov + uses: codecov/codecov-action@v3 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1c49d17 --- /dev/null +++ b/.gitignore @@ -0,0 +1,45 @@ +# Gitignore for LobeHub +################################################################ + +# general +.DS_Store +.idea +.vscode +.history +.temp +.env.local +venv +temp +tmp + +# dependencies +node_modules +*.log +*.lock +package-lock.json + +# ci +coverage +.coverage +.eslintcache +.stylelintcache + +# production +dist +es +lib +logs +test-output + +# umi +.umi +.umi-production +.umi-test +.dumi/tmp* + +# husky +.husky/prepare-commit-msg + +# misc +# add other ignore file below +bun.lockb \ No newline at end of file diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100755 index 0000000..c160a77 --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npx --no -- commitlint --edit ${1} diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..8da041a --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,5 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npm run type-check +npx --no-install lint-staged diff --git a/.i18nrc.cjs b/.i18nrc.cjs new file mode 100644 index 0000000..df9553a --- /dev/null +++ b/.i18nrc.cjs @@ -0,0 +1,7 @@ +module.exports = { + markdown: { + entry: ['./README.md'], + entryLocale: 'en-US', + outputLocales: ['zh-CN'] + }, +}; diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..d9ed3d3 --- /dev/null +++ b/.npmrc @@ -0,0 +1,11 @@ +lockfile=false +resolution-mode=highest +public-hoist-pattern[]=*@umijs/lint* +public-hoist-pattern[]=*changelog* +public-hoist-pattern[]=*commitlint* +public-hoist-pattern[]=*eslint* +public-hoist-pattern[]=*postcss* +public-hoist-pattern[]=*prettier* +public-hoist-pattern[]=*remark* +public-hoist-pattern[]=*semantic-release* +public-hoist-pattern[]=*stylelint* diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..51fdf94 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,61 @@ +# Prettierignore for LobeHub +################################################################ + +# general +.DS_Store +.editorconfig +.idea +.vscode +.history +.temp +.env.local +.husky +.npmrc +.gitkeep +venv +temp +tmp +LICENSE + +# dependencies +node_modules +*.log +*.lock +package-lock.json + +# ci +coverage +.coverage +.eslintcache +.stylelintcache +test-output +__snapshots__ +*.snap + +# production +dist +es +lib +logs + +# umi +.umi +.umi-production +.umi-test +.dumi/tmp* + +# ignore files +.*ignore + +# docker +docker +Dockerfile* + +# image +*.webp +*.gif +*.png +*.jpg + +# misc +# add other ignore file below diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..f0355a9 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1 @@ +module.exports = require('@lobehub/lint').prettier; diff --git a/.releaserc.js b/.releaserc.js new file mode 100644 index 0000000..3793001 --- /dev/null +++ b/.releaserc.js @@ -0,0 +1 @@ +module.exports = require('@lobehub/lint').semanticRelease; diff --git a/.remarkrc.js b/.remarkrc.js new file mode 100644 index 0000000..b673c10 --- /dev/null +++ b/.remarkrc.js @@ -0,0 +1 @@ +module.exports = require('@lobehub/lint').remarklint; diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000..113f184 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,10 @@ +const config = require('@lobehub/lint').stylelint; + +module.exports = { + ...config, + rules: { + 'custom-property-pattern': null, + 'selector-pseudo-element-no-unknown': null, + 'no-descending-specificity': null, + }, +}; diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..72f86ce --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,487 @@ + + +# Changelog + +### [Version 1.10.2](https://github.com/lobehub/lobe-icons/compare/v1.10.1...v1.10.2) + +Released on **2024-02-02** + +#### 🐛 Bug Fixes + +- **misc**: Fix homepage. + +
+ +
+Improvements and Fixes + +#### What's fixed + +- **misc**: Fix homepage ([7021a40](https://github.com/lobehub/lobe-icons/commit/7021a40)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +### [Version 1.10.1](https://github.com/lobehub/lobe-icons/compare/v1.10.0...v1.10.1) + +Released on **2024-02-02** + +#### 🐛 Bug Fixes + +- **misc**: Fix dashboard. + +
+ +
+Improvements and Fixes + +#### What's fixed + +- **misc**: Fix dashboard ([1526c46](https://github.com/lobehub/lobe-icons/commit/1526c46)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.10.0](https://github.com/lobehub/lobe-icons/compare/v1.9.0...v1.10.0) + +Released on **2024-02-02** + +#### ✨ Features + +- **misc**: Add more ai brand. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add more ai brand ([8e63d1b](https://github.com/lobehub/lobe-icons/commit/8e63d1b)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.9.0](https://github.com/lobehub/lobe-icons/compare/v1.8.1...v1.9.0) + +Released on **2024-02-02** + +#### ✨ Features + +- **misc**: Add demos. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add demos ([8020388](https://github.com/lobehub/lobe-icons/commit/8020388)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +### [Version 1.8.1](https://github.com/lobehub/lobe-icons/compare/v1.8.0...v1.8.1) + +Released on **2024-02-02** + +#### 🐛 Bug Fixes + +- **misc**: Fix ollama icon position. + +
+ +
+Improvements and Fixes + +#### What's fixed + +- **misc**: Fix ollama icon position ([9d614df](https://github.com/lobehub/lobe-icons/commit/9d614df)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.8.0](https://github.com/lobehub/lobe-icons/compare/v1.7.0...v1.8.0) + +Released on **2024-02-01** + +#### ✨ Features + +- **misc**: Add Hunyuan. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add Hunyuan ([d2dc21a](https://github.com/lobehub/lobe-icons/commit/d2dc21a)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.7.0](https://github.com/lobehub/lobe-icons/compare/v1.6.0...v1.7.0) + +Released on **2024-02-01** + +#### ✨ Features + +- **misc**: Add more llm icons. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add more llm icons ([d1b27da](https://github.com/lobehub/lobe-icons/commit/d1b27da)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.6.0](https://github.com/lobehub/lobe-icons/compare/v1.5.0...v1.6.0) + +Released on **2024-02-01** + +#### ✨ Features + +- **misc**: Add midjourney. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add midjourney ([49f2030](https://github.com/lobehub/lobe-icons/commit/49f2030)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.5.0](https://github.com/lobehub/lobe-icons/compare/v1.4.0...v1.5.0) + +Released on **2024-02-01** + +#### ✨ Features + +- **misc**: Add aws bedrock. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add aws bedrock ([43ab6c3](https://github.com/lobehub/lobe-icons/commit/43ab6c3)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.4.0](https://github.com/lobehub/lobe-icons/compare/v1.3.0...v1.4.0) + +Released on **2024-01-31** + +#### ✨ Features + +- **misc**: Add more ai brands. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add more ai brands ([7c6c843](https://github.com/lobehub/lobe-icons/commit/7c6c843)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.3.0](https://github.com/lobehub/lobe-icons/compare/v1.2.1...v1.3.0) + +Released on **2024-01-31** + +#### ✨ Features + +- **misc**: Add more llm brands. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add more llm brands ([62ba9c5](https://github.com/lobehub/lobe-icons/commit/62ba9c5)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +### [Version 1.2.1](https://github.com/lobehub/lobe-icons/compare/v1.2.0...v1.2.1) + +Released on **2024-01-31** + +#### 🐛 Bug Fixes + +- **misc**: Fix avatar type. + +
+ +
+Improvements and Fixes + +#### What's fixed + +- **misc**: Fix avatar type ([0e3404b](https://github.com/lobehub/lobe-icons/commit/0e3404b)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.2.0](https://github.com/lobehub/lobe-icons/compare/v1.1.0...v1.2.0) + +Released on **2024-01-31** + +#### ✨ Features + +- **misc**: Add Google Gemini. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add Google Gemini ([f4a71e0](https://github.com/lobehub/lobe-icons/commit/f4a71e0)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## [Version 1.1.0](https://github.com/lobehub/lobe-icons/compare/v1.0.2...v1.1.0) + +Released on **2024-01-31** + +#### ✨ Features + +- **misc**: Add Tongyi Wenxi ChatGLM. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Add Tongyi Wenxi ChatGLM ([7e9b574](https://github.com/lobehub/lobe-icons/commit/7e9b574)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +### [Version 1.0.2](https://github.com/lobehub/lobe-icons/compare/v1.0.1...v1.0.2) + +Released on **2024-01-31** + +#### 🐛 Bug Fixes + +- **misc**: Fix father build ignore. + +
+ +
+Improvements and Fixes + +#### What's fixed + +- **misc**: Fix father build ignore ([d18b69c](https://github.com/lobehub/lobe-icons/commit/d18b69c)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +### [Version 1.0.1](https://github.com/lobehub/lobe-icons/compare/v1.0.0...v1.0.1) + +Released on **2024-01-30** + +#### 💄 Styles + +- **misc**: Update base flow. + +
+ +
+Improvements and Fixes + +#### Styles + +- **misc**: Update base flow ([5ec6904](https://github.com/lobehub/lobe-icons/commit/5ec6904)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## Version 1.0.0 + +Released on **2024-01-30** + +#### ✨ Features + +- **misc**: Root. + +#### 🐛 Bug Fixes + +- **misc**: Fix deps, fix deps. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Root ([c8ae543](https://github.com/lobehub/lobe-icons/commit/c8ae543)) + +#### What's fixed + +- **misc**: Fix deps ([385a104](https://github.com/lobehub/lobe-icons/commit/385a104)) +- **misc**: Fix deps ([361faa5](https://github.com/lobehub/lobe-icons/commit/361faa5)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +### [Version 1.0.1](https://github.com/lobehub/lobe-icons/compare/v1.0.0...v1.0.1) + +Released on **2024-01-30** + +#### 🐛 Bug Fixes + +- **misc**: Fix deps. + +
+ +
+Improvements and Fixes + +#### What's fixed + +- **misc**: Fix deps ([361faa5](https://github.com/lobehub/lobe-icons/commit/361faa5)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ +## Version 1.0.0 + +Released on **2024-01-30** + +#### ✨ Features + +- **misc**: Root. + +
+ +
+Improvements and Fixes + +#### What's improved + +- **misc**: Root ([c8ae543](https://github.com/lobehub/lobe-icons/commit/c8ae543)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..1dd53d2 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 LobeHub + +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. diff --git a/README.md b/README.md index 82f456b..526742b 100644 --- a/README.md +++ b/README.md @@ -1 +1,207 @@ -# lobe-charts \ No newline at end of file + + +
+ + + + + +

Lobe Icons

+ +React modern charts components built on recharts + +[Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link] + + + +[![][npm-release-shield]][npm-release-link] +[![][vercel-shield]][vercel-link] +[![][discord-shield]][discord-link] +[![][npm-downloads-shield]][npm-downloads-link]
+[![][github-releasedate-shield]][github-releasedate-link] +[![][github-action-test-shield]][github-action-test-link] +[![][github-action-release-shield]][github-action-release-link]
+[![][github-contributors-shield]][github-contributors-link] +[![][github-forks-shield]][github-forks-link] +[![][github-stars-shield]][github-stars-link] +[![][github-issues-shield]][github-issues-link] +[![][github-license-shield]][github-license-link] + +
+ +
+Table of contents + +#### TOC + +- [✨ Features](#-features) +- [📦 Installation](#-installation) + - [Compile with NextJS](#compile-with-nextjs) +- [⌨️ Local Development](#️-local-development) +- [🤝 Contributing](#-contributing) +- [🩷 Sponsor](#-sponsor) +- [🔗 More Products](#-more-products) + +#### + +
+ +## ✨ Features + +
+ +[![][back-to-top]](#readme-top) + +
+ +## 📦 Installation + +> \[!IMPORTANT]\ +> This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). + +To install Lobe UI, run the following command: + +[![][bun-shield]][bun-link] + +```bash +$ bun add @lobehub/charts +``` + +### Compile with NextJS + +> \[!NOTE]\ +> By work correct with nextjs ssr, add `transpilePackages: ['@lobehub/charts']` to `next.config.js`. For example: + +```js +// next.config.js +const nextConfig = { + // ...other config + + transpilePackages: ['@lobehub/charts'], +}; +``` + +
+ +[![][back-to-top]](#readme-top) + +
+ +## ⌨️ Local Development + +You can use Github Codespaces for online development: + +[![][codespaces-shield]][codespaces-link] + +Or clone it for local development: + +```bash +$ git clone https://github.com/lobehub/lobe-charts.git +$ cd lobe-charts +$ bun install +$ bun start +``` + +
+ +[![][back-to-top]](#readme-top) + +
+ +## 🤝 Contributing + +Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] to get stuck in to show us what you’re made of. + +[![][pr-welcome-shield]][pr-welcome-link] + +[![][contributors-contrib]][contributors-link] + +
+ +[![][back-to-top]](#readme-top) + +
+ +## 🩷 Sponsor + +Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time. + + + + + + + + +
+ +[![][back-to-top]](#readme-top) + +
+ +## 🔗 More Products + +- **[🤖 Lobe Chat][lobe-chat] :** An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application. +- **[🤯 Lobe Theme][lobe-theme] :** The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features. +- **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature. +- **[💌 Lobe Commit][lobe-commit] :** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages. + +
+ +[![][back-to-top]](#readme-top) + +
+ +--- + +

📝 License

 + +[![][fossa-license-shield]][fossa-license-link] + +
+ +Copyright © 2023 [LobeHub][profile-link].
+This project is [MIT](./LICENSE) licensed. + + + +[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square +[bun-link]: https://bun.sh +[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge +[codespaces-link]: https://codespaces.new/lobehub/lobe-charts +[codespaces-shield]: https://github.com/codespaces/badge.svg +[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/charts +[contributors-link]: https://github.com/lobehub/lobe-charts/graphs/contributors +[discord-link]: https://discord.gg/AYFPHvv2jT +[discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square +[fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-charts +[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-charts.svg?type=large +[github-action-release-link]: https://github.com/actions/workflows/lobehub/lobe-charts/release.yml +[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-charts/release.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square +[github-action-test-link]: https://github.com/actions/workflows/lobehub/lobe-charts/test.yml +[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-charts/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square +[github-contributors-link]: https://github.com/lobehub/lobe-charts/graphs/contributors +[github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-charts?color=c4f042&labelColor=black&style=flat-square +[github-forks-link]: https://github.com/lobehub/lobe-charts/network/members +[github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-charts?color=8ae8ff&labelColor=black&style=flat-square +[github-issues-link]: https://github.com/lobehub/lobe-charts/issues +[github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-charts?color=ff80eb&labelColor=black&style=flat-square +[github-license-link]: https://github.com/lobehub/lobe-charts/blob/master/LICENSE +[github-license-shield]: https://img.shields.io/github/license/lobehub/lobe-charts?color=white&labelColor=black&style=flat-square +[github-releasedate-link]: https://github.com/lobehub/lobe-charts/releases +[github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-charts?labelColor=black&style=flat-square +[github-stars-link]: https://github.com/lobehub/lobe-charts/network/stargazers +[github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-charts?color=ffcb47&labelColor=black&style=flat-square +[lobe-chat]: https://github.com/lobehub/lobe-chat +[lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit +[lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n +[lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme +[npm-downloads-link]: https://www.npmjs.com/package/@lobehub/charts +[npm-downloads-shield]: https://img.shields.io/npm/dt/@lobehub/charts?labelColor=black&style=flat-square +[npm-release-link]: https://www.npmjs.com/package/@lobehub/charts +[npm-release-shield]: https://img.shields.io/npm/v/@lobehub/charts?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square +[pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls +[pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge +[profile-link]: https://github.com/lobehub +[vercel-link]: https://icons.lobehub.com +[vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fui.lobehub.com diff --git a/docs/changelog.md b/docs/changelog.md new file mode 100644 index 0000000..6d4759e --- /dev/null +++ b/docs/changelog.md @@ -0,0 +1,9 @@ +--- +title: Changelog +description: New updates and improvements to @lobehub/icons +nav: + title: Changelog + order: 999 +--- + + diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 0000000..2290f97 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,7 @@ +--- +hero: + title: LobeHub Charts + description: React modern charts components built on recharts +--- + + diff --git a/docs/index.tsx b/docs/index.tsx new file mode 100644 index 0000000..8d143ab --- /dev/null +++ b/docs/index.tsx @@ -0,0 +1,18 @@ +import { createStyles } from 'antd-style'; +import { Center } from 'react-layout-kit'; + +const useStyles = createStyles(({ css, token }) => ({ + container: css` + margin-top: -4%; + `, +})); + +export default () => { + const { styles } = useStyles(); + + return ( +
+ 1111 +
+ ); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..7290e22 --- /dev/null +++ b/package.json @@ -0,0 +1,122 @@ +{ + "name": "@lobehub/charts", + "version": "1.0.0", + "private": true, + "description": "React modern charts components built on recharts", + "keywords": [ + "lobehub", + "charts" + ], + "homepage": "https://github.com/lobehub/lobe-icons", + "bugs": { + "url": "https://github.com/lobehub/lobe-icons/issues/new" + }, + "repository": { + "type": "git", + "url": "https://github.com/lobehub/lobe-icons.git" + }, + "license": "MIT", + "author": "LobeHub ", + "sideEffects": false, + "main": "es/index.js", + "module": "es/index.js", + "types": "es/index.d.ts", + "files": [ + "es" + ], + "scripts": { + "build": "father build", + "build:watch": "father dev", + "ci": "npm run lint && npm run type-check", + "clean": "rm -r es lib dist coverage .dumi/tmp .eslintcache node_modules/.cache", + "dev": "dumi dev", + "docs:build": "dumi build", + "docs:build-analyze": "ANALYZE=1 dumi build", + "doctor": "father doctor", + "lint": "eslint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix", + "lint:md": "remark . --quiet --frail --output", + "lint:style": "stylelint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix", + "prepare": "husky install && npm run setup", + "prepublishOnly": "npm run build", + "prettier": "prettier -c --write --no-error-on-unmatched-pattern \"**/**\"", + "pull": "git pull", + "release": "semantic-release", + "setup": "dumi setup", + "start": "npm run dev", + "test": "vitest --passWithNoTests", + "test:coverage": "vitest run --coverage --passWithNoTests", + "test:update": "vitest -u", + "type-check": "tsc -p tsconfig-check.json" + }, + "lint-staged": { + "*.md": [ + "remark --quiet --output --", + "prettier --write --no-error-on-unmatched-pattern" + ], + "*.json": [ + "prettier --write --no-error-on-unmatched-pattern" + ], + "*.{js,jsx}": [ + "prettier --write", + "stylelint --fix", + "eslint --fix" + ], + "*.{ts,tsx}": [ + "prettier --parser=typescript --write", + "stylelint --fix", + "eslint --fix" + ] + }, + "dependencies": { + "@babel/runtime": "^7", + "antd-style": "^3", + "react-layout-kit": "^1", + "recharts": "^2.11.0" + }, + "devDependencies": { + "@commitlint/cli": "^18", + "@lobehub/lint": "latest", + "@lobehub/ui": "^1", + "@testing-library/react": "^14", + "@types/pangu": "^4", + "@types/query-string": "^6", + "@types/react": "18.2.40", + "@types/react-dom": "^18", + "@vitest/coverage-v8": "latest", + "antd": "^5.13.3", + "babel-plugin-antd-style": "latest", + "commitlint": "^18", + "concurrently": "^8", + "cross-env": "^7", + "dumi": "^2", + "dumi-theme-lobehub": "latest", + "eslint": "^8", + "father": "4.3.1", + "husky": "^8", + "jsdom": "^23", + "leva": "^0.9.35", + "lint-staged": "^15", + "lucide-react": "latest", + "polished": "^4", + "prettier": "^3", + "react": "^18", + "react-dom": "^18", + "remark": "^14", + "remark-cli": "^11", + "semantic-release": "^21", + "stylelint": "^15", + "svgo-browser": "^1", + "typescript": "^5", + "vitest": "latest" + }, + "peerDependencies": { + "@lobehub/ui": ">=1", + "react": ">=18", + "react-dom": ">=18", + "react-layout-kit": ">=1" + }, + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org" + } +} diff --git a/renovate.json b/renovate.json new file mode 100644 index 0000000..99c84e1 --- /dev/null +++ b/renovate.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://docs.renovatebot.com/renovate-schema.json", + "automerge": false, + "dependencyDashboard": true, + "ignoreDeps": [], + "labels": ["dependencies"], + "postUpdateOptions": ["yarnDedupeHighest"], + "prConcurrentLimit": 30, + "prHourlyLimit": 0, + "rebaseWhen": "conflicted", + "schedule": "on sunday before 6:00am", + "timezone": "UTC" +} diff --git a/src/BarChart/demos/data.ts b/src/BarChart/demos/data.ts new file mode 100644 index 0000000..db1a175 --- /dev/null +++ b/src/BarChart/demos/data.ts @@ -0,0 +1,8 @@ +export const data = [ + { Laptops: 900, Smartphones: 1200, Tablets: 200, month: 'January' }, + { Laptops: 1200, Smartphones: 1900, Tablets: 400, month: 'February' }, + { Laptops: 1000, Smartphones: 400, Tablets: 200, month: 'March' }, + { Laptops: 200, Smartphones: 1000, Tablets: 800, month: 'April' }, + { Laptops: 1400, Smartphones: 800, Tablets: 1200, month: 'May' }, + { Laptops: 600, Smartphones: 750, Tablets: 1000, month: 'June' }, +]; diff --git a/src/BarChart/demos/index.tsx b/src/BarChart/demos/index.tsx new file mode 100644 index 0000000..26a164e --- /dev/null +++ b/src/BarChart/demos/index.tsx @@ -0,0 +1,71 @@ +import { BarChart } from '@lobehub/charts'; +import { StoryBook } from '@lobehub/ui'; +import { useTheme } from 'antd-style'; +import { folder, useControls, useCreateStore } from 'leva'; + +import { data } from './data'; + +export default () => { + const theme = useTheme(); + const store = useCreateStore(); + + const options: any = useControls( + { + gridAxis: { options: ['x', 'y', 'xy', 'none'], value: 'xy' }, + tickLine: { options: ['x', 'y', 'xy', 'none'], value: 'xy' }, + withLegend: true, + withTooltip: true, + withXAxis: true, + withYAxis: true, + }, + { store }, + ); + + const legendOptions: any = useControls( + { + legend: folder({ verticalAlign: { options: ['top', 'bottom', 'middle'], value: 'top' } }), + }, + { store }, + ); + + const yAxisOptions: any = useControls( + { + yAxis: folder({ orientation: { options: ['left', 'right'], value: 'left' } }), + }, + { store }, + ); + + const xAxisOptions: any = useControls( + { + xAxis: folder({ + verticalAlign: { orientation: ['top', 'bottom'], value: 'bottom' }, + }), + }, + { store }, + ); + + return ( + + + + ); +}; diff --git a/src/BarChart/index.md b/src/BarChart/index.md new file mode 100644 index 0000000..4973bc7 --- /dev/null +++ b/src/BarChart/index.md @@ -0,0 +1,8 @@ +--- +nav: Components +group: Charts +--- + +## Usae + + diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx new file mode 100644 index 0000000..8246b7d --- /dev/null +++ b/src/BarChart/index.tsx @@ -0,0 +1,185 @@ +import { ComponentPropsWithoutRef, MouseEvent, forwardRef, useState } from 'react'; +import { Flexbox, FlexboxProps } from 'react-layout-kit'; +import { + Bar, + CartesianGrid, + BarChart as ReChartsBarChart, + ReferenceLine, + ResponsiveContainer, +} from 'recharts'; + +import Legend from '@/components/Legend'; +import Tooltip from '@/components/Tooltip'; +import XAxis from '@/components/XAxis'; +import YAxis from '@/components/YAxis'; +import type { ChartSeries } from '@/types'; +import { GridChartBaseProps } from '@/types'; +import { valueToPercent } from '@/utils/valueToPercent'; + +import { useStyles } from './styles'; + +export type BarChartSeries = ChartSeries; + +export type BarChartType = 'default' | 'stacked' | 'percent'; + +export interface BarChartProps extends GridChartBaseProps, FlexboxProps { + /** Props passed down to recharts `BarChart` component */ + barChartProps?: ComponentPropsWithoutRef; + + /** Fill of hovered bar section, by default value is based on color scheme */ + cursorFill?: string; + + /** Data used to display chart */ + data: Record[]; + + /** Controls fill opacity of all bars, `1` by default */ + fillOpacity?: number; + + /** An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. */ + series: BarChartSeries[]; + + /** Controls how bars are positioned relative to each other, `'default'` by default */ + type?: BarChartType; +} + +const BarChart = forwardRef( + ( + { + className, + data, + withLegend = true, + legendProps, + series, + onMouseLeave, + dataKey, + withTooltip = true, + withXAxis = true, + withYAxis = true, + gridAxis = 'x', + tickLine = 'y', + xAxisProps, + yAxisProps, + unit, + tooltipAnimationDuration = 200, + strokeDasharray = '4 4', + gridProps, + tooltipProps, + referenceLines, + fillOpacity = 1, + barChartProps, + type = 'default', + orientation, + valueFormatter, + ...rest + }, + ref, + ) => { + const { cx, styles, theme } = useStyles(); + const withXTickLine = gridAxis !== 'none' && (tickLine === 'x' || tickLine === 'xy'); + const withYTickLine = gridAxis !== 'none' && (tickLine === 'y' || tickLine === 'xy'); + const [highlightedArea, setHighlightedArea] = useState(null); + const shouldHighlight = highlightedArea !== null; + const stacked = type === 'stacked' || type === 'percent'; + const handleMouseLeave = (event: MouseEvent) => { + setHighlightedArea(null); + onMouseLeave?.(event); + }; + + const bars = series.map((item) => { + const color = item.color; + const dimmed = shouldHighlight && highlightedArea !== item.name; + return ( + + ); + }); + + const referenceLinesItems = referenceLines?.map((line, index) => { + const color = line.color; + return ( + + ); + }); + + return ( + + + + {withLegend && ( + + )} + + + + {withTooltip && ( + + )} + {bars} + {referenceLinesItems} + + + + ); + }, +); + +export default BarChart; diff --git a/src/BarChart/styles.ts b/src/BarChart/styles.ts new file mode 100644 index 0000000..bd8c8c6 --- /dev/null +++ b/src/BarChart/styles.ts @@ -0,0 +1,18 @@ +import { createStyles } from 'antd-style'; + +export const useStyles = createStyles(({ css }) => ({ + axis: css``, + bar: css``, + container: css` + width: 100%; + height: 100%; + `, + grid: css``, + referenceLine: css``, + root: css` + font-size: 12px; + min-height: 300px; + width: 100%; + height: 100%; + `, +})); diff --git a/src/components/ColorSwatch/index.tsx b/src/components/ColorSwatch/index.tsx new file mode 100644 index 0000000..4ce60f2 --- /dev/null +++ b/src/components/ColorSwatch/index.tsx @@ -0,0 +1,14 @@ +import { CSSProperties, memo } from 'react'; + +interface ColorSwatchProps { + className?: string; + color: string; + size?: number; + style?: CSSProperties; +} + +const ColorSwatch = memo(({ size = 8, color, ...rest }) => ( +
+)); + +export default ColorSwatch; diff --git a/src/components/Legend/Content.tsx b/src/components/Legend/Content.tsx new file mode 100644 index 0000000..aec6f78 --- /dev/null +++ b/src/components/Legend/Content.tsx @@ -0,0 +1,60 @@ +import React, { forwardRef } from 'react'; +import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import ColorSwatch from '@/components/ColorSwatch'; +import type { ChartSeries } from '@/types'; +import { getFilteredChartLegendPayload } from '@/utils/getFilteredChartLegendPayload'; +import { getSeriesLabels } from '@/utils/getSeriesLabels'; + +import { useStyles } from './styles'; + +export interface ChartLegendProps extends FlexboxProps { + onHighlight: (area: string | null) => void; + payload: Record[] | undefined; + series?: ChartSeries[]; +} + +const ChartLegend = forwardRef( + ({ className, payload, onHighlight, series, ...rest }, ref) => { + const { cx, styles } = useStyles(); + + if (!payload) { + return null; + } + + const filteredPayload = getFilteredChartLegendPayload(payload); + const labels = getSeriesLabels(series); + + const items = filteredPayload.map((item, index) => ( + onHighlight(item.dataKey)} + onMouseLeave={() => onHighlight(null)} + > + +
{labels[item.dataKey] || item.dataKey}
+ + )); + + return ( + + {items} + + ); + }, +); + +export default ChartLegend; diff --git a/src/components/Legend/index.tsx b/src/components/Legend/index.tsx new file mode 100644 index 0000000..13c9e25 --- /dev/null +++ b/src/components/Legend/index.tsx @@ -0,0 +1,27 @@ +import { forwardRef } from 'react'; +import { Legend as RcLegend, type LegendProps as RcLegendProps } from 'recharts'; + +import ChartLegend, { type ChartLegendProps } from './Content'; + +export interface TooltipProps + extends RcLegendProps, + Pick { + strokeDasharray?: string | number; + tooltipAnimationDuration?: number; +} + +const Legend = forwardRef(({ onHighlight, series, ...rest }, ref) => { + return ( + ( + + )} + ref={ref as any} + verticalAlign="top" + {...rest} + /> + ); +}); + +Legend.displayName = 'Legend'; +export default Legend; diff --git a/src/components/Legend/styles.ts b/src/components/Legend/styles.ts new file mode 100644 index 0000000..68f6571 --- /dev/null +++ b/src/components/Legend/styles.ts @@ -0,0 +1,19 @@ +import { createStyles } from 'antd-style'; + +export const useStyles = createStyles(({ css, token }) => ({ + container: css` + flex-wrap: wrap; + `, + item: css` + border-radius: ${token.borderRadius}px; + transition: background-color 0.2s ${token.motionEaseInOut}; + padding: 8px; + &:hover { + background-color: ${token.colorFillTertiary}; + } + `, + itemName: css` + line-height: 1; + color: ${token.colorTextSecondary}; + `, +})); diff --git a/src/components/Tooltip/Content.tsx b/src/components/Tooltip/Content.tsx new file mode 100644 index 0000000..4f53c22 --- /dev/null +++ b/src/components/Tooltip/Content.tsx @@ -0,0 +1,71 @@ +import React, { forwardRef } from 'react'; +import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import ColorSwatch from '@/components/ColorSwatch'; +import { ChartSeries } from '@/types'; +import { getData } from '@/utils/getData'; +import { getFilteredChartTooltipPayload } from '@/utils/getFilteredChartTooltipPayload'; +import { getSeriesLabels } from '@/utils/getSeriesLabels'; + +import { useStyles } from './styles'; + +export interface ChartTooltipProps extends FlexboxProps { + /** Main tooltip label */ + label?: React.ReactNode; + + /** Chart data provided by recharts */ + payload: Record[] | undefined; + + /** Id of the segment to display data for. Only applicable when `type="radial"`. If not set, all data is rendered. */ + segmentId?: string; + + /** Chart series data, applicable only for `area` type */ + series?: ChartSeries[]; + + /** Tooltip type that determines the content and styles, `area` for LineChart, AreaChart and BarChart, `radial` for DonutChart and PieChart, `'area'` by default */ + type?: 'area' | 'radial'; + + /** Data units, provided by parent component */ + unit?: string; + + /** A function to format values */ + valueFormatter?: (value: number) => string; +} + +const ChartTooltip = forwardRef( + ( + { className, payload, type = 'area', label, unit, segmentId, series, valueFormatter, ...rest }, + ref, + ) => { + const { cx, styles } = useStyles(); + + if (!payload) return null; + + const filteredPayload = getFilteredChartTooltipPayload(payload, segmentId); + const labels = getSeriesLabels(series); + + const items = filteredPayload.map((item) => ( + + + +
{labels[item.name] || item.name}
+ +
+ {typeof valueFormatter === 'function' + ? valueFormatter(getData(item, type!)) + : getData(item, type!)} + {unit} +
+ + )); + + return ( + + {label &&
{label}
} + {items} + + ); + }, +); + +export default ChartTooltip; diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx new file mode 100644 index 0000000..572149a --- /dev/null +++ b/src/components/Tooltip/index.tsx @@ -0,0 +1,48 @@ +import { useTheme } from 'antd-style'; +import { forwardRef } from 'react'; +import { Tooltip as RcTooltip, type TooltipProps as RcTooltipProps } from 'recharts'; + +import { NameType, ValueType } from '@/types'; + +import ChartTooltip, { type ChartTooltipProps } from './Content'; + +export interface TooltipProps + extends RcTooltipProps, + Pick { + strokeDasharray?: string | number; + tooltipAnimationDuration?: number; +} + +const Tooltip = forwardRef( + ({ series, unit, valueFormatter, strokeDasharray, tooltipAnimationDuration, ...rest }, ref) => { + const theme = useTheme(); + + return ( + ( + + )} + cursor={{ + fill: theme.colorFillTertiary, + stroke: theme.colorBorder, + strokeDasharray, + strokeWidth: 1, + }} + isAnimationActive={tooltipAnimationDuration !== 0} + position={{ y: 0 }} + ref={ref as any} + {...rest} + /> + ); + }, +); + +Tooltip.displayName = 'Tooltip'; +export default Tooltip; diff --git a/src/components/Tooltip/styles.ts b/src/components/Tooltip/styles.ts new file mode 100644 index 0000000..a4ff15e --- /dev/null +++ b/src/components/Tooltip/styles.ts @@ -0,0 +1,21 @@ +import { createStyles } from 'antd-style'; +import { rgba } from 'polished'; + +export const useStyles = createStyles(({ css, token }) => ({ + container: css` + background: ${rgba(token.colorBgElevated, 0.5)}; + border-radius: ${token.borderRadiusLG}px; + border: 1px solid ${token.colorBorder}; + overflow: hidden; + padding: 8px 12px; + box-shadow: ${token.boxShadow}; + backdrop-filter: blur(8px); + `, + item: css``, + itemData: css``, + itemTitle: css``, + label: css` + font-weight: 600; + font-size: 16px; + `, +})); diff --git a/src/components/XAxis/index.tsx b/src/components/XAxis/index.tsx new file mode 100644 index 0000000..5ac291e --- /dev/null +++ b/src/components/XAxis/index.tsx @@ -0,0 +1,27 @@ +import { useTheme } from 'antd-style'; +import { memo } from 'react'; +import { XAxis as RcXAxis, type XAxisProps as RcXAxisProps } from 'recharts'; + +export interface XAxisProps extends RcXAxisProps { + withXTickLine?: boolean; +} + +const XAxis = memo(({ withXTickLine, ...rest }) => { + const theme = useTheme(); + return ( + + ); +}); + +XAxis.displayName = 'XAxis'; +export default XAxis; diff --git a/src/components/YAxis/index.tsx b/src/components/YAxis/index.tsx new file mode 100644 index 0000000..337fcab --- /dev/null +++ b/src/components/YAxis/index.tsx @@ -0,0 +1,27 @@ +import { useTheme } from 'antd-style'; +import { memo } from 'react'; +import { YAxis as RcYAxis, type YAxisProps as RcYAxisProps } from 'recharts'; + +export interface YAxisProps extends RcYAxisProps { + withYTickLine?: boolean; +} + +const YAxis = memo(({ unit, withYTickLine, ...rest }) => { + const theme = useTheme(); + return ( + + ); +}); + +YAxis.displayName = 'YAxis'; +export default YAxis; diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..9056e28 --- /dev/null +++ b/src/index.ts @@ -0,0 +1 @@ +export { default as BarChart, type BarChartProps } from './BarChart'; diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..d320e9d --- /dev/null +++ b/src/types.ts @@ -0,0 +1,93 @@ +import type { + CartesianGridProps, + LabelProps, + LegendProps, + ReferenceLineProps, + TooltipProps, + XAxisProps, + YAxisProps, +} from 'recharts'; + +export interface ChartReferenceLineProps extends Omit { + color?: string; + label?: string; + labelPosition?: LabelProps['position']; +} + +export interface ChartSeries { + color: string; + label?: string; + name: string; +} + +export type BaseChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'referenceLine'; + +export type ChartData = Record[]; + +export interface GridChartBaseProps { + /** Data used to display chart */ + data: ChartData; + + /** Key of the `data` object for x-axis values */ + dataKey: string; + + /** Specifies which lines should be displayed in the grid, `'x'` by default */ + gridAxis?: 'x' | 'y' | 'xy' | 'none'; + + /** Color of the grid and cursor lines, by default depends on color scheme */ + gridColor?: string; + + /** Props passed down to the `CartesianGrid` component */ + gridProps?: Omit; + + /** Props passed down to the `Legend` component */ + legendProps?: Omit; + + /** Chart orientation, `'horizontal'` by default */ + orientation?: 'horizontal' | 'vertical'; + + /** Reference lines that should be displayed on the chart */ + referenceLines?: ChartReferenceLineProps[]; + + /** Dash array for the grid lines and cursor, `'5 5'` by default */ + strokeDasharray?: string | number; + + /** Color of the text displayed inside the chart, `'dimmed'` by default */ + textColor?: string; + + /** Specifies which axis should have tick line, `'y'` by default */ + tickLine?: 'x' | 'y' | 'xy' | 'none'; + + /** Tooltip position animation duration in ms, `0` by default */ + tooltipAnimationDuration?: number; + + /** Props passed down to the `Tooltip` component */ + tooltipProps?: Omit, 'ref'>; + + /** Unit displayed next to each tick in y-axis */ + unit?: string; + + /** A function to format values on Y axis and inside the tooltip */ + valueFormatter?: (value: number) => string; + + /** Determines whether chart legend should be displayed, `false` by default */ + withLegend?: boolean; + + /** Determines whether chart tooltip should be displayed, `true` by default */ + withTooltip?: boolean; + + /** Determines whether x-axis should be hidden, `true` by default */ + withXAxis?: boolean; + + /** Determines whether y-axis should be hidden, `true` by default */ + withYAxis?: boolean; + + /** Props passed down to the `XAxis` recharts component */ + xAxisProps?: Omit; + + /** Props passed down to the `YAxis` recharts component */ + yAxisProps?: Omit; +} + +export type ValueType = number | string | Array; +export type NameType = number | string; diff --git a/src/utils/getData.ts b/src/utils/getData.ts new file mode 100644 index 0000000..ddbac94 --- /dev/null +++ b/src/utils/getData.ts @@ -0,0 +1,7 @@ +export const getData = (item: Record, type: 'area' | 'radial') => { + if (type === 'radial') { + return item.value; + } + + return item.payload[item.dataKey]; +}; diff --git a/src/utils/getFilteredChartLegendPayload.ts b/src/utils/getFilteredChartLegendPayload.ts new file mode 100644 index 0000000..5da67d5 --- /dev/null +++ b/src/utils/getFilteredChartLegendPayload.ts @@ -0,0 +1,3 @@ +export const getFilteredChartLegendPayload = (payload: Record[]) => { + return payload.filter((item) => item.color !== 'none'); +}; diff --git a/src/utils/getFilteredChartTooltipPayload.ts b/src/utils/getFilteredChartTooltipPayload.ts new file mode 100644 index 0000000..29b4275 --- /dev/null +++ b/src/utils/getFilteredChartTooltipPayload.ts @@ -0,0 +1,10 @@ +export const getFilteredChartTooltipPayload = ( + payload: Record[], + segmentId?: string, +) => { + const duplicatesFilter = payload.filter((item) => item.fill !== 'none' || !item.color); + if (!segmentId) { + return duplicatesFilter; + } + return duplicatesFilter.filter((item) => item.name === segmentId); +}; diff --git a/src/utils/getSeriesLabels.ts b/src/utils/getSeriesLabels.ts new file mode 100644 index 0000000..ddc7978 --- /dev/null +++ b/src/utils/getSeriesLabels.ts @@ -0,0 +1,12 @@ +import { ChartSeries } from '@/types'; + +type ChartSeriesLabels = Record; + +export const getSeriesLabels = (series: ChartSeries[] | undefined): ChartSeriesLabels => { + if (!series) return {}; + + return series.reduce((acc, item) => { + acc[item.name] = item.label; + return acc; + }, {}); +}; diff --git a/src/utils/valueToPercent.ts b/src/utils/valueToPercent.ts new file mode 100644 index 0000000..aeb0959 --- /dev/null +++ b/src/utils/valueToPercent.ts @@ -0,0 +1,3 @@ +export const valueToPercent = (value: number) => { + return `${(value * 100).toFixed(0)}%`; +}; diff --git a/tsconfig-check.json b/tsconfig-check.json new file mode 100644 index 0000000..682d5ad --- /dev/null +++ b/tsconfig-check.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "noEmit": true + }, + "extends": "./tsconfig.json", + "include": ["src", "tests"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..9fd629d --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "declaration": true, + "downlevelIteration": true, + "esModuleInterop": true, + "jsx": "react-jsx", + "lib": ["dom", "dom.iterable", "esnext"], + "paths": { + "@@/*": [".dumi/tmp/*"], + "@/*": ["src/*"], + "@lobehub/charts": ["src"], + "@lobehub/charts/*": ["src/*"] + }, + "resolveJsonModule": true, + "skipLibCheck": true, + "strict": true, + "types": ["vitest/globals"] + }, + "include": ["src", "docs", "tests", ".dumirc.ts", "*.ts"] +} diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 0000000..1dfc9db --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,14 @@ +import { defineConfig } from 'vitest/config'; + +import { name } from './package.json'; + +export default defineConfig({ + test: { + alias: { + '@': './src', + [name]: './src', + }, + environment: 'jsdom', + globals: true, + }, +});