diff --git a/.dumirc.ts b/.dumirc.ts index dca52e1..0eef287 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -34,7 +34,9 @@ const themeConfig = { }, name: 'Charts', nav: [ - { link: '/components/area-chart', title: 'Components' }, + { link: '/components/bar-chart', title: 'Charts' }, + { link: 'https://ui.lobehub.com', mode: 'override', title: 'UI' }, + { link: 'https://icon.lobehub.com', mode: 'override', title: 'Icons' }, { link: '/changelog', title: 'Changelog' }, ], socialLinks: { diff --git a/README.md b/README.md index b46be51..03809d3 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,18 @@ React modern charts components built on recharts ## ✨ Features +- [x] Line Chart +- [x] Area Chart +- [x] Bar Chart +- [x] Donut Chart +- [x] Funnel Chart +- [x] Scatter Chart +- [x] Spark Chart +- [x] Heatmaps +- [x] Data List +- [x] Tracker +- [x] Legend +
[![][back-to-top]](#readme-top) diff --git a/docs/index.tsx b/docs/index.tsx index 27fc345..bf47b35 100644 --- a/docs/index.tsx +++ b/docs/index.tsx @@ -1,6 +1,6 @@ -import { Grid } from '@lobehub/ui'; +import { Grid, Snippet } from '@lobehub/ui'; import { Card } from 'antd'; -import { createStyles } from 'antd-style'; +import { Center, Flexbox } from 'react-layout-kit'; import AreaChart from '@/AreaChart/demos/example'; import BarChart from '@/BarChart/demos/example'; @@ -9,35 +9,33 @@ import DonutChart from '@/DonutChart/demos/withLegend'; import LineChart from '@/LineChart/demos/customColors'; import ScatterChart from '@/ScatterChart/demos/example'; -const useStyles = createStyles(({ css }) => ({ - container: css` - margin-top: -4%; - `, -})); - export default () => { - const { styles } = useStyles(); - return ( - - - - - - - - - - - - - - - - - - - - + +
+

To install Lobe Charts, run the following command:

+ {'$ bun add @lobehub/charts'} +
+ + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/package.json b/package.json index d3f7da7..72d76aa 100644 --- a/package.json +++ b/package.json @@ -67,35 +67,35 @@ ] }, "dependencies": { - "@babel/runtime": "^7.24.8", + "@babel/runtime": "^7.26.0", "date-fns": "^3.6.0", "polished": "^4.3.1", - "recharts": "^2.12.7" + "recharts": "^2.13.3" }, "devDependencies": { - "@commitlint/cli": "^19.3.0", - "@icons-pack/react-simple-icons": "^9.6.0", - "@lobehub/lint": "^1.24.3", - "@lobehub/ui": "^1.146.8", + "@commitlint/cli": "^19.6.0", + "@icons-pack/react-simple-icons": "^9.7.0", + "@lobehub/lint": "^1.24.4", + "@lobehub/ui": "^1.153.0", "@testing-library/react": "^14.3.1", "@types/chroma-js": "^2.4.4", "@types/pangu": "^4.0.2", "@types/query-string": "^6.3.0", "@types/react": "18.2.40", - "@types/react-dom": "^18.3.0", + "@types/react-dom": "^18.3.1", "@vitest/coverage-v8": "~1.2.2", "babel-plugin-antd-style": "^1.0.4", - "commitlint": "^19.3.0", + "commitlint": "^19.6.0", "concurrently": "^8.2.2", "cross-env": "^7.0.3", "dayjs": "^1.11.13", - "dumi": "2.2.17", - "dumi-theme-lobehub": "^1.8.1", - "eslint": "^8.57.0", - "father": "4.3.1", + "dumi": "^2.4.14", + "dumi-theme-lobehub": "^1.8.3", + "eslint": "^8.57.1", + "father": "^4.5.1", "husky": "9.0.11", "jsdom": "^23.2.0", - "lint-staged": "^15.2.7", + "lint-staged": "^15.2.10", "prettier": "^3.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -103,7 +103,7 @@ "remark-cli": "^11.0.0", "semantic-release": "^21.1.2", "stylelint": "^15.11.0", - "typescript": "^5.5.3", + "typescript": "^5.6.3", "vitest": "~1.2.2" }, "peerDependencies": { diff --git a/src/AreaChart/index.md b/src/AreaChart/index.md index 8915d90..36bd6f4 100644 --- a/src/AreaChart/index.md +++ b/src/AreaChart/index.md @@ -2,6 +2,7 @@ nav: Components group: Charts description: An area chart displays quantitative data graphically. It is based on the line chart but the area between x-axis and line is emphasized with color. +order: 2 --- diff --git a/src/BarChart/index.md b/src/BarChart/index.md index f8e03ee..5a0b520 100644 --- a/src/BarChart/index.md +++ b/src/BarChart/index.md @@ -2,6 +2,7 @@ nav: Components group: Charts description: Bar charts compare numerical values and use the length of each bar to represent the value of each variable. +order: 0 --- diff --git a/src/DataBars/index.md b/src/DataBars/index.md index 1ebbcaa..6ce209f 100644 --- a/src/DataBars/index.md +++ b/src/DataBars/index.md @@ -1,6 +1,6 @@ --- nav: Components -group: Charts +group: Visualizations atomId: 'ProgressBar, MarkerBar, DeltaBar, CategoryBar' description: Components to indicate progress, performance, or status. For example, an individual score compared to a benchmark, the length of a process, or the deviation of a value. --- diff --git a/src/FunnelChart/index.md b/src/FunnelChart/index.md index 13df784..0754e50 100644 --- a/src/FunnelChart/index.md +++ b/src/FunnelChart/index.md @@ -2,6 +2,7 @@ nav: Components group: Charts description: A funnel chart illustrates the progression or conversion rates through successive stages of a process. +order: 3 --- diff --git a/src/Heatmaps/index.md b/src/Heatmaps/index.md index dc6eefd..d4d6dbb 100644 --- a/src/Heatmaps/index.md +++ b/src/Heatmaps/index.md @@ -1,6 +1,6 @@ --- nav: Components -group: Charts +group: Visualizations description: A flexible React component to display activity data in a heatmaps chart. --- diff --git a/src/Legend/index.md b/src/Legend/index.md index dcf9569..1db3c41 100644 --- a/src/Legend/index.md +++ b/src/Legend/index.md @@ -1,6 +1,6 @@ --- nav: Components -group: Charts +group: Visualizations description: A color-coded legend which goes well with data bar components. --- diff --git a/src/LineChart/index.md b/src/LineChart/index.md index 742ead9..96deaff 100644 --- a/src/LineChart/index.md +++ b/src/LineChart/index.md @@ -2,6 +2,7 @@ nav: Components group: Charts description: A line chart is a graphical representation that connects one or more series of data points with a continuous line. +order: 1 --- diff --git a/src/ScatterChart/index.md b/src/ScatterChart/index.md index 12ecbbe..978a02e 100644 --- a/src/ScatterChart/index.md +++ b/src/ScatterChart/index.md @@ -2,6 +2,7 @@ nav: Components group: Charts description: A scatter chart visualizes relationships between two or three variables. +order: 4 --- diff --git a/src/SparkChart/index.md b/src/SparkChart/index.md index b6e45c5..ca8910c 100644 --- a/src/SparkChart/index.md +++ b/src/SparkChart/index.md @@ -1,6 +1,6 @@ --- nav: Components -group: Charts +group: Visualizations atomId: 'SparkAreaChart, SparkBarChart, SparkLineChart' description: A small graph capable of visualizing data in a simplified form. --- diff --git a/src/Tracker/index.md b/src/Tracker/index.md index 4c292ab..c444e4f 100644 --- a/src/Tracker/index.md +++ b/src/Tracker/index.md @@ -1,6 +1,6 @@ --- nav: Components -group: Charts +group: Visualizations description: Component for visualizing activity logs or other data related to monitoring. ---