open-index/open-npm huggingface dataset:
npm package: @plotmap/eventmap
Description: A CustomElement class mixin for declarative DOM event handling.
Author: John Horback
Latest version: 0.4.0

# EventMap &middot; [![Build Status](https://travis-ci.com/plotmap-org/plotmap-web.svg?branch=packages/EventMap)](https://travis-ci.com/plotmap-org/plotmap-web)

A CustomElement class mixin which supports attaching and detaching DOM events declaratively.

There are two ways to use the mixin. Using decorators or by adding static properties to the class.

## Using Decorators
```js
@eventsListenAt("parent")
class MyCass extends EventMap(HTMLElement) {

  @event("event-to-handle-at-parent")
  _someHandler(event) {
    // handle event...
  }

  @event("event-to-handle-at-window", {
    listenAt: "window"
  })
  _anotherHandler(event) {
    // handle event...
  }
}
```
### `@eventsListenAt` decorator
The `eventsListenAt` decorator can be used on a class to define where to add event listeners by default.

**Possible values** 
- self (the default behavior)
- parent
- window

### `@event` decorator
Add the `event` decorator on methods to handle the event.

The decorator takes a second argument to override the default `listenAt` property.



## Using Static Properties
The following example is identical in behavior to the above example using decorators.
```js
class MyCass extends EventMap(HTMLElement) {

  static eventsListenAt = "window";

  static events = {
    "event-to-handle-at-parent": "_someHandler",
    "event-to-handle-at-window": {
      listenAt: "window",
      handler: "_anotherHandler"
    }
  };

  _someHandler(event) {
    // handle event...
  }

  _anotherHandler(event) {
    // handle event...
  }
}
```

## Logging and Middleware
`EventMap` supports adding middleware to add custom behaviors.
You can also use the `applyEventMapLogging` method to log
event  information to the console.

**Add Logging**
```js
import {applyEventMapLogging} from "@plotmap/eventmap/applyEventMapLogging";

applyEventMapLogging();

// or call with collapsed:true to collapse console logging groups
applyEventMapLogging({collapsed:true});
```

**Applying Custom Middleware**
```js
import {EventMap} from "@plotmap/eventmap";

EventMap.applyMiddleware(handlerInfo => next => () => {
  // add custom behaviors and call next
  next();
});
```


## Notes on Behavior

### Multiple event maps
If any mixin or class uses the EventMap, all subclass and mixin event maps will be merged.

The event maps higher in the chain will take precident.


### Event Propagation
When an event handler is matched, __stopPropagation()__
is called on the event before passing it to the handler.
npm package: @plotmap/functional
Description: Contains methods for functional JavaScript patterns.
Author: John Horback
Latest version: 0.2.5

# Functional &middot; [![Build Status](https://travis-ci.com/plotmap-org/plotmap-web.svg?branch=packages/functional)](https://travis-ci.com/plotmap-org/plotmap-web)

Contains methods for functional JavaScript patterns.

## Installation
```sh
npm install @plotmap/functional
```

## Usage
Pipe and compose methods combine functions; calling each function with the output of the last one.

The primary difference is that a pipe is from left-to-right (top-to-bottom), where as compose is right-to-left (bottom-to-top).

### pipe
```js
const returnValue = pipe(
    (x) => x + 2,
    (x) => x * 3
)(1);
// returnValue = 9
```

### compose
```js
const returnValue = compose(
    (x) => x + 2,
    (x) => x * 3
)(1);
// returnValue = 5
```

### TypeScript
Both `pipe` and `compose` will infer the type of each functions argument and return value.
If needing to use different types you can use `<any>`.
```js
 const returnValue = pipe<any>(
    text => parseInt(text),
    num => num + 1,
    num => String(num) + " - it worked"
)("1");
// returnValue = "2 - it worked"
```


## Async Versions
`pipeAsync` and `composeAsync` can be used if any one of the methods in the chain is async or returns a promise.
npm package: @plotmap/linkprop
Description: Contains methods for linking properties of dom elements.
Author: John Horback
Latest version: 0.2.5

# linkProp &middot; [![Build Status](https://travis-ci.com/plotmap-org/plotmap-web.svg?branch=packages/linkProp)](https://travis-ci.com/plotmap-org/plotmap-web)

Contains methods for linking properties of dom elements with other dom elements.

Examples are using LitElement.

## Installation
```sh
npm install @plotmap/linkProp
```
## Methods
- `linkProp(element, prop, path?)`
- `linkSiblingProp(host, querySelector, prop, path?)`
- `linkVal(element, path)`
- `linkChecked(element, path)`

### A Note on `path`
The `path` is the property path to set on the target element. If ommited the `prop` value will be used. 

Path can be used to set deep properties so it can be something like: `state.someObject.someProperty`.
## Usage

### linkProp
The `linkProp` method links two element properties; usually from a child element to a parent element.
```js
class LinkPropTest extends LitElement {

    @property({type: Object})
    state = {foo: "bar"};

    render() {
        return html`
            <div id="testDiv" 
                @state-changed="${linkProp(this, "state")}"
                @state-path-changed="${linkProp(this, "foo", "state.foo")}"
            >
        `;
    }

    testMethod() {
        const testDiv = this.shadowRoot.querySelector("#testDiv");
        testDiv.state = {foo: "updated!"};
        testDiv.dispatchEvent(new CustomEvent("state-changed"));
        // this.state.foo === "updated!";

        testDiv.foo = "updated using a state path!";
        testDiv.dispatchEvent(new CustomEvent("state-path-changed"));
        // this.state.foo === "updated using a state path!";
    }
}
```


### linkSiblingProp
The `linkSiblingProp` method links two elements properties that are in the same shadowRoot.
```js
class LinkPropTest extends LitElement {

    render() {
        return html`
            <div id="firstElement"
                test-prop="initial value"
                @test-prop-changed="${linkSiblingProp(this, "#secondElement", "test-prop")}"
            >
            <div id="secondElement">
        `;
    }

    testMethod() {
        const firstElement = this.shadowRoot.querySelector("#firstElement");
        firstElement.setAttribute("test-prop", "updated value!");
        firstElement.dispatchEvent(new CustomEvent("test-prop-changed"));
        // #secondElement.test-prop === "updated value!"
    }
}
```

### linkVal
This is the same as `linkProp` but it uses `"value"` as the property to set.
This is useful for linking input values. 

### linkChecked
This is the same as `linkProp` but it uses `"checked"` as the property to set.
This is useful for linking checkbox values.
npm package: @plotozhu/enclave-sdk
Description: Enclave SDK - Privacy-preserving multi-chain DeFi protocol client library
Author: Enclave Team
Latest version: 2.0.0-alpha.1

# Enclave SDK (JavaScript/TypeScript)

**Languages**: [English](./README.md) | 中文 | [日本語](./README.ja.md) | [한국어](./README.ko.md)

> 🚧 **开发中** - v2.0.0-alpha

Enclave SDK 是一套现代化的 JavaScript/TypeScript 客户端库，用于与 Enclave 隐私保护多链 DeFi 协议进行交互。

## ✨ 特性

- 🔄 **响应式状态管理** - 基于 MobX，数据自动同步
- 🔌 **实时推送** - WebSocket 自动推送更新，无需轮询
- 🌐 **环境通用** - 支持浏览器、Node.js、React Native、Electron
- ⚡ **TypeScript 优先** - 完整的类型定义和推断
- 🎯 **框架集成** - React、Vue、Next.js 等开箱即用
- 📦 **Tree-shakable** - 按需加载，减小包体积

## 📦 安装

```bash
npm install @enclave/sdk

# 或
yarn add @enclave/sdk
pnpm add @enclave/sdk
```

## 🚀 快速开始

```typescript
import { EnclaveClient } from '@enclave/sdk';

// 创建客户端
const client = new EnclaveClient({
  apiUrl: 'https://api.enclave-hq.com',
  wsUrl: 'wss://api.enclave-hq.com/ws',
  signer: privateKey,
});

// 连接（一步完成登录、WebSocket、数据同步）
await client.connect();

// 访问响应式 Store
const checkbooks = client.stores.checkbooks.all;
const totalAmount = client.stores.checkbooks.totalDeposited;

// 创建 Commitment
await client.createCommitment({
  checkbookId: 'checkbook-id',
  amounts: ['1000000', '2000000'],
  tokenId: 'token-id',
});

// 创建提现
await client.withdraw({
  allocationIds: ['allocation-1', 'allocation-2'],
  targetChain: 1,
  targetAddress: '0x...',
  intent: 'withdraw',
});
```

## 📚 文档

完整文档请查看：

- [SDK 总览](./docs/SDK_OVERVIEW.md) - 架构设计、使用场景
- [技术设计文档](./docs/SDK_JS_DESIGN.md) - 详细技术设计
- [API 映射文档](./docs/SDK_API_MAPPING.md) - SDK API 与后端 API 对应关系

其他语言版本：[English](./README.en.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md)

## 🛠️ 开发状态

当前版本：`v2.0.0-alpha.1`

**进度**：
- [x] 文档编写
- [x] 项目初始化
- [x] 核心实现
  - [x] 类型定义
  - [x] Store 层
  - [x] API 层
  - [x] WebSocket 层
  - [x] 主客户端
- [x] 平台集成
- [x] 示例

## 📄 License

MIT © Enclave Team
npm package: @plotset/animation
Description: AnimatedChartModule - An Interactive Data Visualization Tool\n\nAnimatedChartModule is a powerful Node.js module designed for developers who work with data visualization, particularly in JavaScript using D3.js. This module empowers you to create stunning 
Author: Alireza Balaei
Latest version: 2.3.11

# @plotset/animation
`@plotset/animation` is a free npm package that you can  use to create your animated data visualizations charts with.
## Usage
In order to use this package you should first **import** it:
```
const { Animation } = require("@plotset/animation")
```
In order to use `Animation` class you need your inputs to be in this format:
```
const data = [
	{
		"Browser": "Edge",
		"11/1/2017": "4.43",
		"11/1/2018": "4.38",
		"11/1/2019": "4.6"
	},
	{
		"Browser": "Chrome",
		"11/1/2017": "59",
		"11/1/2018": "62.8",
		"11/1/2019": "57"
	},
	...
]
const col_rel = {
	values: ["11/1/2017", "11/1/2018", "11/1/2019"],
	labels: "Browser"
}
const duration = 60
```
Then you can create your animation object like this:
```
const animation = new  Animation(duration , data, col_rel["values"])
```
Now add your drawing chart functions to your `animation` object:
```
function drawRaceBar(frame, transitionTime){
	// code ...
}

function drawRacePie(frame, transitionTime){
	// code ...
}

const charts = [
	drawRaceBar,
	drawRacePie,
	...
]

animation.addCharts(charts)
```
At the end you can call `play()` and `pause()` in your code like this:
```
animation.play()
animation.pause()
```
## Drawing functions
**What can be done in drawing functions you pass to `animation`:**
 - Create a data visualization chart with desired library like `D3.js` ,  `Chart.js` , `Highcharts` , `Recharts` , `Flexmonster` , `Chartkick` , . . .
 - Update each frame with given frame data and transition time(ms)
 
**What parameters drawing functions will get at each pulse:**
```
function drawingFunction(frame, transitionTime){
	const { data, sortedData, date } = frame
	// . . .
}
```
**data:** 
```
[
	{
		"Browser": "Edge",
		"11/1/2017": "4.43"
	},
	{
		"Browser": "Chrome",
		"11/1/2017": "59",
	}
]
```
 **sorted data:**
```
[
	{
		"Browser": "Chrome",
		"11/1/2017": "59",
	},
	{
		"Browser": "Edge",
		"11/1/2017": "4.43"
	}
]
```
 **date:**
```
{
	ISO: "2017-11-01T00:00:00.000Z",
	raw: "11/1/2017",
	time: 1509494400000
}
```
 **transitionTime:**
```
2000
```