status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-08 09:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make data easy to filter in future

Browse Source
This commit is contained in:
Hristo Nedelkov 2023-09-13 12:13:56 +03:00
parent c8a4fd075e
commit 232612ae15
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/Dashboard/BalanceLineChart/LineChart.tsx
View File

@ -10,7 +10,6 @@ import {
Legend, Legend,
} from 'chart.js'; } from 'chart.js';
import { Line } from 'react-chartjs-2'; import { Line } from 'react-chartjs-2';
import faker from 'faker';
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
@ -22,7 +21,9 @@ ChartJS.register(
Filler, Filler,
Legend Legend
); );
const exampleData = [ const exampleData = [
{ {
id: 1, id: 1,
year: 2016, year: 2016,
@ -53,23 +54,25 @@ const exampleData = [
userGain: 4300, userGain: 4300,
userLost: 234 userLost: 234
} }
]; ];
const labelsEx = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; const years = exampleData.map(item => item.year.toString());
const userGains = exampleData.map(item => item.userGain);
const data = { const data = {
labels: labelsEx, labels: years,
datasets: [ datasets: [
{ {
label: 'Dataset', label: 'User Gain',
data: exampleData, data: userGains,
borderColor: 'light-red', borderColor: 'red',
backgroundColor: 'light-red', backgroundColor: 'red',
fill: true, fill: true,
start: true,
origin: true
} }
] ]
}; };
const config = { const config = {
type: 'line', type: 'line',
data: data, data: data,
@ -88,6 +91,7 @@ const config = {
} }
}, },
}; };
const options = { const options = {
responsive: true, responsive: true,
plugins: { plugins: {
@ -96,13 +100,13 @@ const options = {
}, },
title: { title: {
display: true, display: true,
text: 'Chart.js Line Chart', text: 'User Gain Over Years',
}, },
}, },
}; };
const LineChart = () => { const LineChart = () => {
return <Line options={options} data={data} />; return <Line options={options} data={data} />;
} }
export default LineChart;
export default LineChart;