PHPackages                             ajthinking/data-story - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ajthinking/data-story

ActivePackage[Utility & Helpers](/categories/utility)

ajthinking/data-story
=====================

A diagram workflow builder.

16864020TypeScriptCI passing

Since Jan 5Pushed 8mo ago9 watchersCompare

[ Source](https://github.com/ajthinking/data-story)[ Packagist](https://packagist.org/packages/ajthinking/data-story)[ RSS](/packages/ajthinking-data-story/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (1)DependenciesVersions (3)Used By (0)

DataStory 💫
-----------

[](#datastory-dizzy)

[![tests](https://github.com/ajthinking/data-story/actions/workflows/test.yml/badge.svg)](https://github.com/ajthinking/data-story/actions/workflows/test.yml)[![status](https://camo.githubusercontent.com/c19557dabee8ab3ea40a5a0be769d1548392d35252b9831af07d7058ae7c62bd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7374617475732d756e737461626c652d79656c6c6f77)](https://camo.githubusercontent.com/c19557dabee8ab3ea40a5a0be769d1548392d35252b9831af07d7058ae7c62bd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7374617475732d756e737461626c652d79656c6c6f77)[![npm version](https://camo.githubusercontent.com/e751543842578fe1c9cc5fb62bfb24d5c97aa1e6df347aa9a9d339ec81947a31/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40646174612d73746f72792f636f72653f6c6162656c3d636f726526636f6c6f723d677265656e)](https://www.npmjs.com/package/@data-story/core)[![npm version](https://camo.githubusercontent.com/d1f6aef47c19cc8f2a39ce12c23ef28351216861a6b0b02b6b663ed77988e19d/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40646174612d73746f72792f75693f6c6162656c3d756926636f6c6f723d677265656e)](https://www.npmjs.com/package/@data-story/ui)[![npm version](https://camo.githubusercontent.com/acb4e37ad14df164009c9198b7b97749ef39ffb1a7aa38e707c898131063955a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40646174612d73746f72792f6e6f64656a733f6c6162656c3d6e6f64656a7326636f6c6f723d677265656e)](https://www.npmjs.com/package/@data-story/nodejs)[![vs code extension](https://camo.githubusercontent.com/b5463e3249fd1b49abc1eebaaaafe73194fbf41724ba580872d10d871a07ad4e/68747470733a2f2f76736d61726b6574706c6163656261646765732e6465762f76657273696f6e2f616a7468696e6b696e672e64732d6578742e737667)](https://marketplace.visualstudio.com/items?itemName=ajthinking.ds-ext)[![MIT](https://camo.githubusercontent.com/b8cadaa967891081f8f165695470689986c028821dd8a040132f6e661795dc0d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c7565)](https://opensource.org/license/mit)

🛠️ Real-time, observable, [Flow-based programming](http://en.wikipedia.org/wiki/Flow-based_programming) for React, Node.js and VS Code. [Docs](https://datastory.dev)| [Playground](https://datastory.dev/playground)

[![ds-tech-gif](https://github.com/user-attachments/assets/d2dbbdda-8757-43b1-a749-c24646e3d315)](https://github.com/user-attachments/assets/d2dbbdda-8757-43b1-a749-c24646e3d315)

### VS Code extension

[](#vs-code-extension)

A *preliminary implementation* is available under name [`ds-ext`](https://marketplace.visualstudio.com/items?itemName=ajthinking.ds-ext).

[![trimmed-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/0941a210-252a-4c23-9309-f115b7c212e0)](https://github.com/user-attachments/assets/0941a210-252a-4c23-9309-f115b7c212e0)

### Usage with React

[](#usage-with-react)

```
import '@data-story/ui/data-story.css';
import { DataStory } from '@data-story/ui'

export default function Home() {
  return (

  )
}
```

Installation
------------

[](#installation)

```
yarn add @data-story/ui
```

Testing
-------

[](#testing)

When you're writing tests in your local environment

```
# run component tests and then chose component test
yarn cy:open

# run e2e tests and then chose e2e test
yarn dev
yarn cy:open

# test on ci, only run @data-story/ui,  @data-story/core and e2e tests
```

Development Notes
-----------------

[](#development-notes)

### Turbo tasks naming convention

[](#turbo-tasks-naming-convention)

namedescription`build:xxx`Start a one-shot task to build artifacts`watch:xxx`Start a long running process that produce build artifacts`dev:xxx`Start a long running process that launch a dev server to accept incoming requests, e.g. webpack dev server, nodejs ds-server

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance42

Moderate activity, may be stable

Popularity31

Limited adoption so far

Community21

Small or concentrated contributor base

Maturity34

Early-stage or recently created project

 Bus Factor1

Top contributor holds 53.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/cc2d6bf00e3a29857b1e2a96b9e7e4339fdb7c336676c4a48ba9a80fc6dec833?d=identicon)[ajthinking](/maintainers/ajthinking)

---

Top Contributors

[![stone-lyl](https://avatars.githubusercontent.com/u/20497176?v=4)](https://github.com/stone-lyl "stone-lyl (1446 commits)")[![ajthinking](https://avatars.githubusercontent.com/u/3457668?v=4)](https://github.com/ajthinking "ajthinking (1187 commits)")[![roy232828](https://avatars.githubusercontent.com/u/217438047?v=4)](https://github.com/roy232828 "roy232828 (40 commits)")[![dpMerchant](https://avatars.githubusercontent.com/u/17969799?v=4)](https://github.com/dpMerchant "dpMerchant (4 commits)")[![mandy-fullstackdev](https://avatars.githubusercontent.com/u/113978647?v=4)](https://github.com/mandy-fullstackdev "mandy-fullstackdev (4 commits)")[![ld-codes](https://avatars.githubusercontent.com/u/123950213?v=4)](https://github.com/ld-codes "ld-codes (3 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (2 commits)")

---

Tags

etlflow-based-programmingjavascriptworkbench

### Embed Badge

![Health badge](/badges/ajthinking-data-story/health.svg)

```
[![Health](https://phpackages.com/badges/ajthinking-data-story/health.svg)](https://phpackages.com/packages/ajthinking-data-story)
```

###  Alternatives

[jaeger/querylist-phantomjs

QueryList Plugin: Use PhantomJS to crawl Javascript dynamically rendered pages.(headless WebKit ) 使用PhantomJS采集JavaScript动态渲染的页面

6124.3k2](/packages/jaeger-querylist-phantomjs)[pre/plugin

941.4k3](/packages/pre-plugin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)