# react-dvis

> React package for data visualisation

Latest version **1.0.1** (published 2023-01-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dvis
pnpm add react-dvis
yarn add react-dvis
bun add react-dvis
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-01-12 |
| First published | 2023-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 43 |
| Unpacked size | 300.4 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Krystian Śledź |
| Maintainers | krystiansledz |
| Keywords | react, typescript, data, visualisation, visualization, chart, generator |

## Links

- npm: https://www.npmjs.com/package/react-dvis
- Repository: https://github.com/krystiansledz/react-dvis
- npm.io page: https://npm.io/package/react-dvis

## Dependencies (43)

- [yup](https://npm.io/package/yup.md) ^0.32.11
- [luxon](https://npm.io/package/luxon.md) ^3.1.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [eslint](https://npm.io/package/eslint.md) ^8.28.0
- [prettier](https://npm.io/package/prettier.md) ^2.7.1
- [recharts](https://npm.io/package/recharts.md) ^2.1.16
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.5
- [typescript](https://npm.io/package/typescript.md) ^4.9.3
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.0
- [@types/jest](https://npm.io/package/@types/jest.md) ^27.0.1
- [@types/node](https://npm.io/package/@types/node.md) ^16.7.13
- [filter-data](https://npm.io/package/filter-data.md) ^0.2.0
- [usehooks-ts](https://npm.io/package/usehooks-ts.md) ^2.7.2
- [@types/luxon](https://npm.io/package/@types/luxon.md) ^3.1.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.0.25
- [react-router](https://npm.io/package/react-router.md) ^6.4.3
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.10.14
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.39.5
- [recharts-to-png](https://npm.io/package/recharts-to-png.md) ^2.2.0
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.0.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.4.3
- [@types/file-saver](https://npm.io/package/@types/file-saver.md) ^2.0.5
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.6
- [@mui/styled-engine](https://npm.io/package/@mui/styled-engine.md) npm:@mui/styled-engine-sc@latest
- [@hookform/resolvers](https://npm.io/package/@hookform/resolvers.md) ^2.9.10
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.10.14
- [@mui/x-date-pickers](https://npm.io/package/@mui/x-date-pickers.md) ^5.0.8
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.31.11
- [@mui/styled-engine-sc](https://npm.io/package/@mui/styled-engine-sc.md) ^5.10.6
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.0.0
- [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) ^8.5.0
- [eslint-plugin-prettier](https://npm.io/package/eslint-plugin-prettier.md) ^4.2.1
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.26
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.14.1
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^5.43.0
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^4.6.0
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.2.1
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.2.0
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) ^5.43.0
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^6.2.1
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^6.2.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-01-12
- 1.0.0 — 2023-01-12

## README

# react-dvis

[![NPM version][npm-image]][npm-url]
[![Build][github-build]][github-build-url]
![npm-typescript]
[![License][github-license]][github-license-url]

[**Live Demo**](https://krystiansledz.github.io/react-dvis/)

## Installation:

```bash
npm install react-dvis
```

or

```bash
yarn add react-dvis
```

## Usage :

```js
import React from 'react'
import { HashRouter } from 'react-router-dom'
import { createTheme, ThemeProvider } from '@mui/material'
import { LocalizationProvider } from 'Amui/x-date-pickers'
import { AdapterLuxon } from 'Amui/×-date-pickers/AdapterLuxon'
import { Routes, Route } from 'react-router'
import { ChartGenerator } from 'react-dvis'

const data = [
  {
    date: '2022-12-13T01:00:00Z',
    value: 10,
  },
  {
    date: '2022-12-14T01:00:00Z',
    value: 15,
  },
  {
    date: '2022-12-15T01:00:00Z',
    value: 13,
  },
  {
    date: '2022-12-16T01:00:00Z',
    value: 16,
  }
]

// generated using Config Generator
const config = {
  types: {
    date: 'DATE',
    value: 'NUMBER',
  },
  names: {
    date: 'date',
    value: 'value',
  },
  format: {
    date: 'DD_MM_VYYY',
    value: 'default',
  }
}

function App() {
  const theme = createTheme({})

  return (
    <HashRouter>
      <LocalizationProvider dateAdapter={AdapterLuxon}>
        <ThemeProvider theme={theme}>
          <Routes>
            <Route
              path="/*" 
              element={<ChartGenerator data={data} config={config} />}
            />
          </Routes>
        </ThemeProvider>
      </LocalizationProvider>
    </HashRouter>
  )
}

export default App;

```

[npm-url]: https://www.npmjs.com/package/react-dvis
[npm-image]: https://img.shields.io/npm/v/react-dvis
[github-license]: https://img.shields.io/github/license/krystiansledz/react-dvis
[github-license-url]: https://github.com/krystiansledz/react-dvis/blob/master/LICENSE
[github-build]: https://github.com/krystiansledz/react-dvis/actions/workflows/publish.yml/badge.svg
[github-build-url]: https://github.com/krystiansledz/react-dvis/actions/workflows/publish.yml
[npm-typescript]: https://img.shields.io/npm/types/react-dvis

---
_Source: https://npm.io/package/react-dvis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._