open-index/open-npm huggingface dataset:
npm package: @pingcap-incubator/tidb-dashboard-lib-charts
Description: ## Usage
Latest version: 0.18.0

# @pingcap-incubator/tidb-dashboard-lib-charts

## Usage

### Step 1

Import style css

```ts
import "@pingcap-incubator/tidb-dashboard-lib-charts/dist/style.css"
```

### Step 2

Use `ChartThemeSwitch` component in the top level (for example `App` component)

```tsx
function Routes() {
  const theme = useComputedColorScheme()

  return (
    <Router>
      <Stack p={16}>
        {/* ... */}
        <ChartThemeSwitch value={theme} />
      </Stack>
    </Router>
  )
}
```

### Step 3

Render series data by `SeriesChart` component

```tsx
<SeriesChart
  unit={config.unit}
  data={seriesData}
  timeRange={tr}
  theme={colorScheme}
/>
```
npm package: @pingcoder/node-tools
Description: my node js tools
Author: pingcoder
Latest version: 1.0.17

# Some tools for node js command line

## How to use

```shell
npx --package=@pingcoder/node-tools <command> [arg1] [arg2] ...
```

## Commands

### Random bytes hex

	Generate random bytes and print the hex string.

```shell
npx --package=@pingcoder/node-tools random-bytes-hex [bytes]
#bytes default 16
```
npm package: @pingghost/protoc
Description: A tool for converting proto buffers (.proto) files into javascript files usable in Closure Compiler with Closure Library.
Author: Amir Saadallah
Latest version: 1.0.2

# Protocol Buffers for Node
A wrapper in Node for the compiled protoc from https://github.com/protocolbuffers/protobuf.

## Version
It's currently using Protocol Buffers `v3.20.3`.

## Platforms
Google only provides binary files for Windows, Linux and OSX in x86_64 and x86_32.

## Examples
There's currently no documentation. Hopefully this example will help.

```JavaScript
var protoc = require("protoc");

protoc.library(["path/to/file.proto", "path/to/file2.proto"], function(err, files) {
  if (err) {
    console.error(err);
    return;
  }

  // Handle the JavaScript Vinyl files.
  // These files can be used in Google Closure Compiler,
  // but they require the files in
  // https://github.com/google/protobuf/tree/master/js
  
  // ...
});
```

It's also possible to directly call the protoc binary file:
```
npx protoc --help
```
npm package: @pinggod/gatsby-theme-wink
Description: a gatsby theme focus on content expression
Author: pinggodstudio@gmail.com
Latest version: 1.2.3

![gatsby-theme-wink-snapshoot](https://user-images.githubusercontent.com/9530963/65311536-1c374280-dbc3-11e9-855b-8cf2778b8399.png)

## 安装

```shell
yarn add @pinggod/gatsby-theme-wink gatsby-plugin-manifest
```

## 配置

```js
{
  plugins: [
    {
      resolve: `@pinggod/gatsby-theme-wink`,
      options: {
        // 文章所在目录
        postPath: "content/posts",
        mdxExtensions: [".mdx", ".md"],
        // google analytics ID
        ga: "UA-137858782-1",
        // 设置 HTML lang 属性
        htmlLang: "zh",
      }
    },
    // 设置 favicon 和 manifest
    // 文档地址：https://www.gatsbyjs.org/packages/gatsby-plugin-manifest/
    // 
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'REXLNT',
        short_name: 'REXLNT',
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#fff`,
        display: `standalone`,
        icon: "static/favicon.png",
      },
    }
  ]
}
```

## 创建文章

比如在路径 `content/posts/2019-02-02-gatsby-quick-start/index.mdx` 创建一篇文章，内容如：

```tsx
---
title: Consectetur Adipisicing
description: Ipsa odio, dignissimos consectetur debitis harum eaque maiores soluta voluptate
date: '2019-03-16T05:45:02.000Z'
published: true
cover: ./aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg
coverAuthor: Aditya Chinchure
coverOriginalUrl: https://unsplash.com/photos/hyN9aU9Tm-c
---

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae in, deleniti tempora mollitia minima et delectus exercitationem earum. Velit error voluptatem recusandae aspernatur iure tenetur animi provident expedita id in.

Repellendus voluptas ullam, tenetur vitae nisi eligendi iste laborum eaque rerum officia quam cumque eum quisquam exercitationem at beatae corporis placeat, asperiores odit velit numquam. Architecto expedita possimus saepe omnis?
```

`frontmatter` 中的属性介绍：

- `title`: 必填，文章标题
- `description`: 选填，文章简介
- `date`: 必填，创建时间
- `published`: 必填，true 为对外发布，false 则不对外发布，最终只构建生成为 true 的文章，false 可用于标记草稿
- `cover`: 必填，文章题图
- `coverAuthor`: 必填，文章题图作者
- `coverOriginalUrl`: 必填，文章题图原始地址
npm package: @pingid/prettier-plugin-sort-imports
Description: A tiny Prettier plugin that keeps your import statements tidy.
Author: Dan Beaven
Latest version: 0.0.10

# @pingid/prettier-plugin-sort-imports

A tiny Prettier ³ plugin that keeps your import statements tidy.

- Groups consecutive `import ...` lines that are separated by blank lines.
- Within every group the lines are reordered by length – the longest import goes on top.

## Installation

```bash
pnpm add -D @pingid/prettier-plugin-sort-imports
# or
yarn add -D @pingid/prettier-plugin-sort-imports
# or
npm i -D @pingid/prettier-plugin-sort-imports
```

Add the plugin to your configuration `.prettierrc`:

```json
{
  "plugins": ["@pingid/prettier-plugin-sort-imports"]
}
```

## Example

```ts
// before
import a from 'a'
import { join } from 'node:path'

import b from './b'
import c from './utils/c'

// after — formatted by Prettier
import { join } from 'node:path'
import a from 'a'

import c from './utils/c'
import b from './b'
```

### Option: `shiftRelativeImports`

Moves relative imports (`./` or `../`) into a section **below** absolute imports.  
Still sorts by line length **within each group** and preserves blank lines between original relative-only groups.

**Default:** `false`

**Prettier config:**

```json
{
  "plugins": ["@pingid/prettier-plugin-sort-imports"],
  "shiftRelativeImports": true
}
```

**Example (simple):**

```ts
// before
import a from '../relative'
import { b, c } from 'b'

import d from 'c'
import { e, f } from 'd'
import { g, h } from '../relative'

// after
import { b, c } from 'b'

import d from 'c'
import { e, f } from 'd'

import { g, h } from '../relative'
import a from '../relative'
```

## License

This project is licensed under the MIT License.

MIT © [Dan Beaven](https://github.com/Pingid)
npm package: @pingid/shears
Description: Functional web scraping in typescript
Author: Dan Beaven
Latest version: 0.0.0-alpha.4

# Shears

A Declarative web scraping library that aims to provide an extendable set of tools for building complex typesafe queries and web crawlers.

```typescript
import * as sh from 'shears'

const article_list = sh.query(
  '#content',
  ['ul > li'],
  sh.query({
    title: 'h1',
    image: 'image@src'
  })
)

await sh.run('<html><...', article_list)
// [{ title: '...' content: '...' },{...]
```
npm package: @pinging/dagrejs
Description: Layered layout for directed acyclic graph
Latest version: 1.0.1

# dagrejs - Layered layout for directed acyclic graph

**This project is a fork from [dagre](https://github.com/dagrejs/dagre). For more information prelase refer to origin project.**

## Enhanced features

New features:
* support specify layer(rank) for certain node
* support manually control nodes' order
* support keep origin layout when re-layout with nodes added

Optimizations:
* rewrite rank algorithm to support assign layer
* consider previous iteration result at node-ordering step
* support generate `edgeLabelSpacing` or not, which controls generate dummy node between nodes

## Usage

> For full usage please refer to dagre's documentation: https://github.com/dagrejs/dagre/wiki.

### edgeLabelSpace

Default dagre always generate dummy node for every edge, which can be used for edge's curve drawing, etc. If you do not need it, disable it in layout's options:

```js
dagre.layout(g, {
  edgeLabelSpace: false
})
```

Bellow shows graph with or without `edgeLabelSpace`:

![](./assets/edgeLabelSpace.jpg)
![](./assets/noEdgeLabelSpace.jpg)

### Specify layer

Now you can manually specify node's layer(rank) by add layer in node's attribute:

```js
const data = {
    nodes: [
        { id: '0' },
        { id: '1', layer: 1 },
        { id: '2', layer: 3 },
        { id: '3' },
    ],
    // edges: [...]
}

data.nodes.forEach((n) => {
    g.setNode(n.id, n);
});
```

Caution:
* layer is **0-indexed**, which means the root node's layer is 0
* manual layer **should not** violate DAG's properties (e.g. You cannot assign a layer value for a target node greater or equal to cresponding source node.)

### Control nodes' order

Sometimes we want to manually control nodes' order in every layer in case of unexpected result caused by alogrithm. Now we can also configurate in options.

```js
dagre.layout(g, {
  keepNodeOrder: true,
  nodeOrder: ['3', '2', '1', '0'] // an array of nodes's ID.
});
```

A common usage is keeping data's order:
```js
const data = {
    nodes: [
        { id: '0' },
        { id: '2' },
        { id: '3' },
        { id: '1' },
    ],
    // edges: [...]
}

dagre.layout(g, {
  keepNodeOrder: true,
  nodeOrder: data.nodes.map(n => n.id)
});
```

Caution:
* The order only work at same layer ordering step. It does not affect the layer assignment step.
* Like specifying layer, internally the library added `fixorder` attribute for each node. Of cause you can manually set this attribute, but it introduces ambiguity.

### Keep origin layout

When re-layout with small modification, we may want to keep origin layout result. Now we can pass the origin graph to new layout function:

```js
dagre.layout(originGraph) // layout() will internally modify originGraph
dagre.layout(
  g,
  {
    prevGraph: originGraph // pass originGraph to new function
  }
);
```

For full example please refer to `add-subgraph` example in examples folder.