open-index/open-npm huggingface dataset:
npm package: @real-wagmi/v3-sdk
Description: [![Unit Tests](https://github.com/RealWagmi/v3-sdk/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/RealWagmi/v3-sdk/actions/workflows/unit-tests.yml) [![npm version](https://img.shields.io/npm/v/@real-wagmi/v3-sdk/latest.svg)](https://www.
Author: Wagmi
Latest version: 1.4.4

# Wagmi V3 SDK

[![Unit Tests](https://github.com/RealWagmi/v3-sdk/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/RealWagmi/v3-sdk/actions/workflows/unit-tests.yml)
[![npm version](https://img.shields.io/npm/v/@real-wagmi/v3-sdk/latest.svg)](https://www.npmjs.com/package/@real-wagmi/v3-sdk/v/latest)
npm package: @real2sport/depth-chart
Description: 一个使用vue3和vue-konva的深度图组件
Author: VYuLinLin
Latest version: 1.0.7

# @real2sport/depth-chart

交易平台自定义深度图表组件，使用vue3和vue-konva开发

## 功能

1、自适应屏幕分辨率，宽度、高度自适应

2、支持价格、数量、小数位精度控制

3、支持所有元素的颜色、样式控制

## 预览

详见 [预览](https://vyulinlin.github.io/depth-chart-demo/dist/index.html).

# 示意图

![image](asstes/depth2025.png)
<video autoplay="true" controls="controls"  src="https://private-user-images.githubusercontent.com/28807436/400177436-2c2266f4-a3ea-4abb-be43-6a9f8f687b4b.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzYwNTA0MDEsIm5iZiI6MTczNjA1MDEwMSwicGF0aCI6Ii8yODgwNzQzNi80MDAxNzc0MzYtMmMyMjY2ZjQtYTNlYS00YWJiLWJlNDMtNmE5ZjhmNjg3YjRiLm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAxMDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMTA1VDA0MDgyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM3NWQ4NzkzOTI3OTA0MGExOTdiMmNhYzk2YThmODAwNDg1ZmYxN2NlNjE5ODhhMmMzOWZkN2Q5NmUyMWRjNGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.7FzFVdA2yPQq34TRIkN8MXsEKVWTH_2zm11c2nUyj3I" title="asstes/depth2025.mp4"></video>
</video>

# 使用方式

## 1. 安装

`npm i @real2sport/depth-chart`

## 2. 引用

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import depthChart from '@real2sport/depth-chart'
// vue3 全局引用
const app = createApp(App)
app.use(depthChart)
app.mount('#app')
```

```vue
<!-- 组件引用 -->
<script setup lang="ts">
import { depthChart } from '@real2sport/depth-chart'
</script>
```

### 2.1 全部可选配置
```typescript
// 深度图数据结构
interface IDepthItem {
  price: number
  amount: number
  totalAmount: number
}
// 深度图配置项
interface IDepthItemPropsOptions {
  width: number // 总宽
  height: number // 总高
  marginX: number // 右侧数量宽度
  marginY: number // 底部价格高度
  fontSize: number // // 坐标轴字体大小
  fontColor: string // 坐标轴字体颜色
  bidsColor: string // 买盘颜色
  asksColor: string // 卖盘颜色
  bidsBgColor: string // 买盘背景颜色
  asksBgColor: string // 卖盘背景颜色
  dottedBgColor: string // 虚线背景色
  axisColor: string // 中线及刻度线颜色
  tipFontSize: number // 提示字体大小
  tipColor: string // 飘窗字体颜色
  axisXBgColor: string // X坐标轴背景色
  axisYBgColor: string // Y坐标轴背景色
  axisXBorderColor: string // X坐标轴边框色
  axisYBorderColor: string // Y坐标轴边框色
  axisLineWidth: number // 刻度线宽度
  tipPriceText: string // 提示价格文字
  tipTotalText: string // 提示总价文字
  wheel: number // 默认鼠标滚轮步长，数值越大，展示的数据量越多
  isRedUp: boolean // 默认false红跌绿涨，true红涨绿跌
}
```

## 3.调用

[示例项目](https://github.com/VYuLinLin/depth-chart-demo)

示例：example/App.vue

```vue
<depthChart :options="options" :symbolData="symbolData" :depthData="depthData"></depthChart>
```
npm package: @real2sport/k-line-chart
Description: 一个使用vue3和lightweight-charts的秒k线组件
Author: Your Name
Latest version: 1.0.1

# @real2sport/k-line-chart

一个使用vue3和lightweight-charts的秒k线组件

## 功能

1、支持自定义lightweight-charts全部配置

2、自适应屏幕分辨率，宽度、高度自适应

3、支持价格精度控制

4、过滤插针数据，减少小尖角

# 示意图

![image](asstes/sline2024.png)
<video autoplay="true" controls="controls"  src="https://private-user-images.githubusercontent.com/28807436/396122293-1e1eeaa9-4af7-40f5-b91a-0e5c1bf8671b.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQzNTc3NjUsIm5iZiI6MTczNDM1NzQ2NSwicGF0aCI6Ii8yODgwNzQzNi8zOTYxMjIyOTMtMWUxZWVhYTktNGFmNy00MGY1LWI5MWEtMGU1YzFiZjg2NzFiLm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDEyMTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMjE2VDEzNTc0NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTljMDA0M2NjNDA5Mjg0MTYzNTRlNjEyMjg3NjNjMWY5MTNhMjE0ZWE1NTdhZjFlNmI1MzA1ZDRlMWU5MGQ0NGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ML-8GYKK7iPWBSaj_Bv7PyYlr523JzcBaUyye9-pWb8" title="asstes/sline2024.mp4"></video>
</video>

# 使用方式

## 1. 安装

`npm i @real2sport/k-line-chart`

## 2. 引用

```javascript
import Vue from 'vue'
import kLineChart from '@real2sport/k-line-chart'
// 全局引用
Vue.use(kLineChart)
```

```vue
<!-- 组件引用 -->
<script setup lang="ts">
import { kLineChart } from '@real2sport/k-line-chart'
or
import { kLineChart } from '@real2sport/k-line-chart/src'
</script>
```

## 3.调用

示例：example/App.vue

```vue
<kLineChart :list="historyList" :newData="newData"></kLineChart>
```