https://github.com/williaster/data-ui

A collection of data-rich UI components 📈
https://github.com/williaster/data-ui

Last synced: about 4 hours ago
JSON representation

A collection of data-rich UI components 📈

• Host: GitHub
• URL: https://github.com/williaster/data-ui
• Owner: williaster
• License: mit
• Created: 2017-04-11T18:03:15.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-02-14T02:15:42.000Z (over 4 years ago)
• Last Synced: 2024-11-12T04:05:57.631Z (1 day ago)
• Language: JavaScript
• Homepage: https://williaster.github.io/data-ui/
• Size: 74 MB
• Stars: 551
• Watchers: 16
• Forks: 69
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Repo freeze 🥶

As of Feb 2020 this repo is currently being deprecated and is **feature frozen**. See [#201](https://github.com/williaster/data-ui/issues/201) for more details.

# data-ui

A collection of custom + wrapped components for data-rich (desktop) UIs. Super beta :baby:



  

    

  

  

    

  



demo at [williaster.github.io/data-ui](https://williaster.github.io/data-ui) :chart_with_upwards_trend:

## Packages

| Package | Version |

|--|--|

| [@data-ui/xy-chart](https://github.com/williaster/data-ui/tree/master/packages/xy-chart) | [![Version](https://img.shields.io/npm/v/@data-ui/xy-chart.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/xy-chart.svg?style=flat) |

| [@data-ui/histogram](https://github.com/williaster/data-ui/tree/master/packages/histogram) | [![Version](https://img.shields.io/npm/v/@data-ui/histogram.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/histogram.svg?style=flat) |

| [@data-ui/sparkline](https://github.com/williaster/data-ui/tree/master/packages/sparkline) | [![Version](https://img.shields.io/npm/v/@data-ui/sparkline.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/sparkline.svg?style=flat) |

| [@data-ui/network](https://github.com/williaster/data-ui/tree/master/packages/network) | [![Version](https://img.shields.io/npm/v/@data-ui/network.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/network.svg?style=flat) |

| [@data-ui/radial-chart](https://github.com/williaster/data-ui/tree/master/packages/radial-chart) | [![Version](https://img.shields.io/npm/v/@data-ui/radial-chart.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/radial-chart.svg?style=flat) |

| [@data-ui/event-flow](https://github.com/williaster/data-ui/tree/master/packages/event-flow) | [![Version](https://img.shields.io/npm/v/@data-ui/event-flow.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/event-flow.svg?style=flat) |

| [@data-ui/data-table](https://github.com/williaster/data-ui/tree/master/packages/data-table) | [![Version](https://img.shields.io/npm/v/@data-ui/data-table.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/data-table.svg?style=flat) |

| [@data-ui/theme](https://github.com/williaster/data-ui/tree/master/packages/data-ui-theme) | [![Version](https://img.shields.io/npm/v/@data-ui/theme.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/theme.svg?style=flat) |

| [@data-ui/demo](https://github.com/williaster/data-ui/tree/master/packages/demo) | -- |

More coming.

## Live Playground

For examples of the components in action, go to [williaster.github.io/data-ui](https://williaster.github.io/data-ui).

OR

To run that demo on your own computer:

```sh

git clone ...data-ui && cd data-ui

# instal root dependencies including lerna

npm install 

# bootstrap (symlink inter-dependencies) all packages

lerna bootstrap

# alternatively install just the demo package

# cd packages/demo

# npm install

# go to the demo package and start storybook

cd packages/demo

npm run dev

# visit http://localhost:9001/

```

## Development

[lerna](https://github.com/lerna/lerna/) is used to manage versions and dependencies between

packages in this repo.

```

data-ui/

  lerna.json

  package.json

  packages/

    package1/

      src/

      test/

      build/

      package.json

      ...

    ...

```

For easiest development, clone this repo, install the root npm modules including lerna,

then have lerna install package dependencies and manage the symlinking between packages for you

```sh

git clone ...data-ui && cd data-ui

npm install

lerna bootstrap

```

Enzyme and jest are used for testing. Each package defines its own tests, which you can run from within a `packages/package-name` directory using

```sh

cd packages/my-package

npm run test

```

for a single test or subset of tests run

```sh

npm run test -t regex

```

To run all tests in all packages run `lerna run test` from the root @data-ui directory.

## License

[MIT](./LICENSE)