https://github.com/antvis/component

🍱 AntV UI component based on G render engine.
https://github.com/antvis/component

component g hacktoberfest visualization

Last synced: 5 days ago
JSON representation

🍱 AntV UI component based on G render engine.

• Host: GitHub
• URL: https://github.com/antvis/component
• Owner: antvis
• License: mit
• Created: 2018-08-17T03:01:20.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-10-24T06:08:54.000Z (2 months ago)
• Last Synced: 2024-10-29T21:05:30.131Z (2 months ago)
• Topics: component, g, hacktoberfest, visualization
• Language: TypeScript
• Homepage: https://github.com/antvis/component
• Size: 13 MB
• Stars: 59
• Watchers: 38
• Forks: 39
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


@antv/component





Visualization components for AntV, based on [G](https://github.com/antvis/g) which is a flexible rendering engine for visualization.

[![build](https://github.com/antvis/component/actions/workflows/build.yml/badge.svg)](https://github.com/antvis/component/actions/workflows/build.yml)

[![Coverage Status](https://coveralls.io/repos/github/antvis/component/badge.svg?branch=master)](https://coveralls.io/github/antvis/component?branch=master)

[![npm Version](https://img.shields.io/npm/v/@antv/component.svg)](https://www.npmjs.com/package/@antv/component)

[![npm Download](https://img.shields.io/npm/dm/@antv/component.svg)](https://www.npmjs.com/package/@antv/component)

[![npm License](https://img.shields.io/npm/l/@antv/component.svg)](https://www.npmjs.com/package/@antv/component)



## ✨ Features

- **Rich** - Contains 20+ Visualization components, for AntV [G2](https://github.com/antvis/G2), [G6](https://github.com/antvis/G6), [L7](https://github.com/antvis/L7).

- **Powerful** - Each component has powerful abilities and flexible scalability.

- **Well Design** - Continuous optimization and iteration.

- **Powerful Renderer** - Based on the powerful renderer [G](https://github.com/antvis/G), we can render the components using `Canvas`, `SVG` or `WebGL` with same code.

## 📦 Installation

```bash

$ npm install @antv/component

```

```bash

$ yarn add @antv/component

```

## 🔨 Getting Started

```ts

import { Canvas } from '@antv/g';

import { Renderer } from '@antv/g-canvas';

import { Button } from '@antv/component';

// 1. New a canvas.

const canvas = new Canvas({

  container: 'container',

  width: 600,

  height: 600,

  renderer: new Renderer(),

});

// 2. Create a button with configure.

const button = new Button({

  /* ... */

});

// 3. Append into G canvas.

canvas.appendChild(button);

// 4. Render.

canvas.render();

```

## 📎 Documents

- [API](./docs/api.md)

- UI components

  - [Axis](./docs/components/axis.md)

  - [Legend](./docs/components/legend.md)

  - [Tooltip](./docs/components/tooltip.md)

  - [Slider](./docs/components/slider.md)

  - [Scrollbar](./docs/components/scrollbar.md)

  - [Button](./docs/components/button.md)

  - [Checkbox](./docs/components/checkbox.md)

  - [Navigator](./docs/components/navigator.md)

  - [Breadcrumb](./docs/components/breadcrumb.md)

  - [Sparkline](./docs/components/sparkline.md)

## 📮 Contribution

```bash

$ git clone [email protected]:antvis/component.git

$ cd component

$ npm install

$ npm run dev

```

Then send a pull request on GitHub.

## 📄 License

MIT@[AntV](https://github.com/antvis).