- This is an admin dashboard application with many charts and pages created using ReactJS, TailwindCSS, MUI X (for charts), PrimeReact (for datatables and other components), and Chakra UI (for tooltips)
- It is based on this tutorial, with using MUI X instead of SyncFusion (because MUI X is free)
- For basic installation and usage, see this repo
- The addition here is adding custom styles in TailwindCSS (e.g. background colors)
- To do this:
- In
tailwind.config.jsadd the needed attributes under theextendsection
extend: {
fontSize: {
14: '14px',
},
backgroundColor: {
'main-bg': '#FAFBFB',
'main-dark-bg': '#20232A',
'secondary-dark-bg': '#33373E',
'light-gray': '#F7F7F7',
'half-transparent': 'rgba(0, 0, 0, 0.5)',
},
- To use the style in the app, simply add the className (e.g.
bg-main-bg)
- The application state is stored using
useContexthook in React. SeeContextProvider.js
- See ReactPrime DataTable and the examples in
Orders.jsxandEmployees.jsxandCustomers.jsx
- Install it using npm
npm install primereact
- Add its imports and CSS includes
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import "primereact/resources/themes/lara-light-indigo/theme.css";
- Use it
<DataTable
value={ordersData}
paginator
rows={5}
rowsPerPageOptions={[5, 10, 25, 50]}
id="gridcomp"
>
{ordersGrid.map((column) => (
<Column
key={column.headerText}
header={column.headerText}
body={column.template}
align={column.textAlign}
alignHeader={column.textAlign}
style={{ width: 10 }}
field={column.field}
sortable
></Column>
))}
</DataTable>
- Add some options (like sorting by columns in
Orders.jsxor global search inEmployees.jsxor editing and selecting inCustomers.jsx)
- Line chart: see MUI X line chart
<LineChart
xAxis={[{ data: SparklineAreaData.dataX }]}
series={[
{
data: SparklineAreaData.dataY,
color: "blue",
},
]}
width={300}
height={200}
id="line-sparkline"
/>
- Sparkline chart: see MUI X Sparkline chart and
Ecommerce.jsx
<SparkLineChart
xAxis={{ data: SparklineAreaData.dataX }}
data={SparklineAreaData.dataY}
width={250}
height={120}
colors={["blue"]}
id="line-sparkline"
showHighlight={true}
showTooltip={true}
/>
- Stacked bar chart: see MUI X Bar chart and
Ecommerce.jsx
<BarChart
xAxis={[
{
scaleType: "band",
data: myStackedChartData.dataX,
},
]}
series={[
{
data: myStackedChartData.dataY1,
color: "#4b5563",
stack: "A",
label: "Expense",
},
{
data: myStackedChartData.dataY2,
color: "#4ade80",
stack: "A",
label: "Budget",
},
]}
width={320}
height={360}
id="stack-chart"
/>
- An elegant sidebar in React is added where the navigation is done using NavLink from
react-router-dom. SeeSidebar.jsx - Responsive, closes automatically on small screens
- An elegant navbar in React is added using icons. See
Navbar.jsx
- A side menu is opened for the user to choose the application theme when settings is clicked. See
ThemeSettings.jsx. - Implementation is done in the ContextProvide and stored in
localStorage. SeeContextProvider.js - Usage: see the usage of
currentColorandcurrentMode
- Added based on PrimeReact which uses QuiliJS. See
EditorComp.jsx
SwatchesPickerandSketchPickerare added based on react-color. SeeColorPicker.jsx
- A Kanban chart is added in
Kanban.jsxbased on this repo