react-dvis

Live Demo

Installation:

npm install react-dvis

or

yarn add react-dvis

Usage :

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;