https://github.com/antvis/thumbnails
Thumbnail images for different chart types from Chart Knowledge Base.
https://github.com/antvis/thumbnails
Last synced: 11 months ago
JSON representation
Thumbnail images for different chart types from Chart Knowledge Base.
- Host: GitHub
- URL: https://github.com/antvis/thumbnails
- Owner: antvis
- License: mit
- Created: 2020-11-24T10:59:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-20T12:09:29.000Z (over 4 years ago)
- Last Synced: 2025-08-08T09:40:26.719Z (12 months ago)
- Language: TypeScript
- Homepage:
- Size: 174 KB
- Stars: 2
- Watchers: 28
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AntV/Thumbnails
Thumbnail images for different chart types from [CKB](https://github.com/antvis/AVA/tree/master/packages/knowledge).
## Usage
### Use as Data in Object
```ts
import Thumbnails from '@antv/thumbnails';
if (Thumbnails.pie_chart) {
const { id, name, svgCode } = Thumbnails.pie_chart;
console.log(id, name, svgCode);
}
});
```
```ts
import { BAR_CHART } from '@antv/thumbnails';
const { id, name, svgCode } = BAR_CHART;
console.log(id, name, svgCode);
```
The ChartIDs are listed in: [AVA/CKB](https://github.com/antvis/AVA/blob/master/packages/knowledge/src/chartID.ts).
### Use as React Component
```tsx
import Thumbnails, { Thumbnail, PIE_CHART } from '@antv/thumbnails';
// Thumbnail is the React Component
// ...
// define a chart id from 'AVA/CKB'
// get the svg code from Thumbnails object
// get the svg code from specific chart thumbnail object
// with other img HTML attributes
```
For example:
```tsx
import * as React from 'react';
import Thumbnails, { Thumbnail } from '@antv/thumbnails';
class App extends React.Component<{}> {
constructor(props: {}) {
super(props);
}
public render() {
return (
{Object.keys(Thumbnails).map((chart) => {
const { svgCode, name } = Thumbnails[chart];
return (
);
})}
);
}
}
export default App;
```
## Development
Run this command to setup all:
```bash
npm run one-stop-setup
```
Run this command and then visit .
```bash
npm run start:demo
```
If you can see the demo page well, it means that all setups have been successfully completed.