frolicorg / frolic-react

React Component Library to Build Analytics Dashboard 10x Faster

frolic-react is an open source react library to build UI for analytics dashboards much faster. It is built on top of react, tailwindcss and recharts. You can use frolic-react directly with frolic backend service to create full stack dashboards 10x faster.

Installation

frolic-react can be installed directly through npm.

npm i frolic-react

In your tailwind.config.js, add the following code:

module.exports = {
  content: [
    ...
    'node_modules/frolic-react/**/*.{js,ts,jsx,tsx}',
  ],
  ...
  plugins: [
    require('frolic-react'),
  ],
}

Usage

import { Card, LineChart, BarChart } from 'frolic-react'

const data = [
    { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
    { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 }
];

const Page = () => {
  return (
    <div className="grid grid-cols-2 gap-5">
      <Card title="Line Chart">
        <LineChart data={data} metrics={["uv", "pv", "amt"]} dimensions={["name"]}></LineChart>
      </Card>
      <Card title="Bar Chart">
        <BarChart data={data} metrics={["uv", "pv", "amt"]} dimensions={["name"]}></BarChart>
      </Card>
    </div>
  );
};

export default Page;

Components

Please refer to our documentation which list all our components with their APIs.

Integrations

You can use frolic-react directly with frolic backend service to create full stack dashboards much faster.

Support and Community

Issues are inevitable. When you have one, our entire team and our active developer community is around to help.

💬 Ask for help on Discord

⚠️ Open an issue right here on GitHub

How to Contribute

We ❤️ our contributors. We're committed to fostering an open, welcoming, and safe environment in the community.

📕 We expect everyone participating in the community to abide by our Code of Conduct. Please read and follow it.

🤝 If you'd like to contribute, start by reading our Contribution Guide.

Lets build great software together.

License

This project is available under the Apache License 2.0

frolic-react's Issues

Add Support for Custom Metrics and Dimension Names

When the user adds the data to the charts, he needs to set the metric and dimension attribute according to the attribute names present in data.

It is possible that the user wants to give different names to these labels and dimensions. For which we need to create another optional input attributes called labelNames and dimensionNames. When the user sends these attributes, we need to use these attributes to display in the UI

Add Support for Pie Chart

We need to add support for pie chart component.

Steps to create new chart component:

1. Create new folder PieChart and its files in graph: https://github.com/frolicorg/frolic-react/tree/main/src/components/graph
2. Implement the PieChart.tsx component by referring to LineChart.tsx : https://github.com/frolicorg/frolic-react/blob/main/src/components/graph/LineChart/LineChart.tsx

Add Support for Axis Labels

Currently there is no support for axis labels in frolic-react. To add support for it, we need to follow these steps:

• We need to define two new parameters xLabel and yLabel for the charts which have X and Y axis.

• Add Axis Inputs in Chart Interface

• Implement the Axis Labels functionality in different graph components. For example, for AreaChart, we need to update the code such that it takes the axis labels and renders them in the UI