open-index/open-npm huggingface dataset:
npm package: @seven_lives/app-header
Description: A custom element for the app header
Latest version: 1.8.35

```markdown
# app-header

这是一个基于 Web Component 的项目，支持通过自定义标签 `<app-header></app-header>` 进行组件引入。

## 安装

请确保你的环境已经安装了 [Node.js](https://nodejs.org/)。

1. 克隆仓库到本地：

   ```bash
   git@gitlab.easeus.com:om/aurylab-public.git
   cd aurylab-public
   ```

2. 安装依赖：

   ```bash
   npm install
   ```

## 编译

使用以下命令进行项目构建：

```bash
npm run build
```

构建完成后，相关资源会输出到 `dist` 目录下。

## 引入和使用

在你的项目 HTML 文件中，导入 `dist` 文件夹中的 JS 和 CSS 文件，例如：

```html
<link rel="stylesheet" href="dist/app-header.css">
<script src="dist/app-header.js"></script>
```

然后你可以直接在 HTML 中使用 `<app-header>` 标签：

```html
<app-header></app-header>
```

## 贡献

欢迎提交 issue 和 pull request！

## License

[MIT](LICENSE)
```
npm package: @seven_tantan/f2
Description: A canvas library which providing 2d draw for G2.
Author: https://github.com/orgs/antvis/people
Latest version: 3.1.1-beta.6

# F2: 基于 HTML5 Canvas，开箱即用的移动端可视化解决方案

不要下载，不要下载

[![](https://img.shields.io/travis/antvis/f2.svg)](https://travis-ci.org/antvis/f2)
![](https://img.shields.io/badge/language-javascript-red.svg)
![](https://img.shields.io/badge/license-MIT-000000.svg)

[![npm package](https://img.shields.io/npm/v/@antv/f2.svg)](https://www.npmjs.com/package/@antv/f2)
[![NPM downloads](http://img.shields.io/npm/dm/@antv/f2.svg)](https://npmjs.org/package/@antv/f2)
[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/f2.svg)](http://isitmaintained.com/project/antvis/f2 "Percentage of issues still open")

F2（Fast && Flexible），是一套面向移动端的基于可视化图形语法的解决方案，具有精简、高性能、易扩展的特性，适用于对性能、大小、扩展性要求很高的场景。

<img src="https://gw.alipayobjects.com/zos/rmsportal/TzJcRDHJNFlPhUVByrvG.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/eOHezxTwQScZvAlLSLfh.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/CpdljwuwbEPSiaVIbVwE.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/GYRfGZxtdcIWoPURiNNQ.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/nCVpGkXoNjWqNMXIAuaL.gif" width="200">

**在此衷心感谢[《The Grammar of Graphics》](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html)的作者 [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson)，为 F2 的图形语法提供了理论基础！**

## 安装

```bash
$ npm install @antv/f2
```

## 特性

- ✔︎ 灵活且易扩展：灵活的按需引入机制，并提供自定义 Shape 以及动画机制，基于图形语法灵活绘制图表，满足你无限的创意
- ✔︎ 高性能：性能极致追求，针对移动设备做了大量的优化
- ✔︎ 精简：精简版（简单折柱饼）压缩后不到 100k，完整版本压缩后 152k
- ✔︎ 丰富的图表类型：支持 20+ 图表类型

### 正在建设中

- [x] ~~动画支持~~
- [ ] 丰富交互功能
- [ ] 多平台支持

## 文档

- 文档地址：[https://antvis.github.io/f2/](https://antvis.github.io/f2/#%E6%96%87%E6%A1%A3)，所以内容位于 [doc](./docs) 目录下
- 3.0 版本的文档，可访问 AntV 官网：[F2](https://antv.alipay.com/zh-cn/f2/3.x/index.html)。

## 快速开始

<img src="https://gw.alipayobjects.com/zos/rmsportal/QTqjaZLcsrmDFywWRfHv.png" width="480">

```html
<canvas id="c1"></canvas>
```

```js
import F2 from '@antv/f2';

const data = [ 
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

const chart = new F2.Chart({
  id: 'c1',
  width: 500,
  height: 300  
});

chart.source(data);
chart.interval().position('genre*sold').color('genre');
chart.render();
```

更多示例：[demos](https://antvis.github.io/f2/demos/)。

![demos](https://gw.alipayobjects.com/zos/rmsportal/RDCaavVwfzwoVTynJuNR.png)

## 本地开发

```bash
$ npm install

# 跑测试用例
$ npm run test-live

# 监听文件变化构建，并打开 demo 页面
$ npm run dev

# 打开 demo
$ npm run demos
```

## 如何贡献

如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/f2/issues) 看看有没有类似的 bug 或者建议。

如需提交代码，请遵从我们的[贡献指南](https://github.com/antvis/f2/blob/master/CONTRIBUTING.md)。

## License

[MIT license](./LICENSE).