Ако искате да създадетеДиаграма със статистически данни на Google Анализ с градиентен цвят и инструмент за избор на времева рамка (падащо меню), която ви позволява да превключвате между различни времеви рамки и да показвате персонализирани статистики, това е, което ще вградим тази статия.
В тази статия ще изградим компонент за диаграма на React за многократна употреба, използвайки „recharts“ за показване на статистики за анализи и падащо меню, което ще ви позволи да превключвате между различни времеви рамки.
Можете да намерите завършен код за този компонент, свързан по-долу
Инициализирайте нов проект React
- Нека инициализираме нов проект на React
npx create-react-app my-app
cd my-app2. Инсталирайте всички зависимости
npm i recharts react-jss antd3. Стартирайте проекта
npm startСъздаване на компонент на диаграма (1ви компонент)
- Ще направим нов компонент, наречен MyGraph, така че направете нов файл, наречен graph.jsx в директорията src/component и импортирайте следното в горната част.
src/component/graph.jsx
import React from "react";
import { createUseStyles } from "react-jss";
import {
AreaChart,
Area,
Tooltip,
ResponsiveContainer,
CartesianGrid,
XAxis,
YAxis
} from "recharts";
2. Създайте таблица със стилове за компонента Graph, като използвате react-jss
=== STYLESHEET USING REACT-JSS ===
const useStyles = createUseStyles(() => ({
container: {
color: "#fff",
backgroundColor: "rgb(255, 255, 255)",
padding: "1rem",
transition: "0.3s ease-in-out",
width: "100%",
height: "400px",
}
}
}));
3. Сега ще дефинираме градиентни цветове за нашия компонент на диаграмата, ще създадем нов компонент, наречен ‹GradientColors/›
const GradientColors = () => {
return (
<linearGradient id="colorView" x1="0" y1="0" x2="0" y2="1">
<stop offset="30%" stopColor="#8884d8" stopOpacity={0.4} />
<stop offset="75%" stopColor="#ff9bff81" stopOpacity={0.3} />
=== ADD MORE COLOURS HERE ===
<stop offset="95%" stopColor="#FFFFFF" stopOpacity={0.2} />
</linearGradient>
);
};
4. След това ще направим родителския компонент за нашата диаграма; не забравяйте да проверите отново маркираните точки във вашия код.
const MyGraph = ({ data }) => { <--- data will be passed a props
const classes = useStyles();
return (
<div className={classes.container}>
<h1> Plays </h1>
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={data}>
<defs>
<GradientColors /> <--- GradientColors component
</defs>
<Tooltip
itemStyle={{ color: "#fff", backgroundColor: "#0A1322" }}
contentStyle={{ backgroundColor: "#0A1322" }}
/>
<CartesianGrid
strokeDasharray="4 4"
stroke="#8884d8"
opacity={0.4}
/>
<XAxis
dataKey="name" <--- data key from demo data
tick={{ fill: "#B6BAC3" }}
stroke="#EEEEEE" />
<YAxis
tick={{ fill: "#B6BAC3" }}
stroke="#EEEEEE" />
<Area
dataKey="view" <--- data key from demo data
type="monotone"
stroke="#8884d8"
strokeWidth={3}
strokeOpacity={1}
fill="url(#colorView)" <--- Id from GradientColors component
/>
</AreaChart>
</ResponsiveContainer>
</div>
);
};
export default MyGraph;
Този компонент изобразява основната диаграма с градиент, Имайте предвид, че dataKey, който добавихме XAxis и Area, са специфични за данните (от нашите демонстрационни данни), ако вашите данни имат различни двойки ключ-стойност, трябва да ги използвате .
Завършен код за 1-ви компонент src/component/graph.jsx
Създаване на компонент за избор на времева рамка (2-ри компонент)
- Ще направим нов компонент, наречен DropdownSelector, така че направете нов файл, наречен menu.jsx в директорията src/component и импортирайте следното в върха.
src/component/menu.jsx
import React, { useState } from "react";
import { Dropdown, Button } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { createUseStyles } from "react-jss";
import { menu } from "./items"; <-- We will create this later
const dropdownCategories = [
{
key: 0,
content: "Today",
value: "Today",
},
{
key: 1,
content: "Yesterday",
value: "Yesterday",
},
{
key: 2,
content: "Last 7 days",
value: "Last_7_days",
},
{
key: 3,
content: "Last 14 days",
value: "Last_14_days",
},
{
key: 4,
content: "Last 30 days",
value: "Last_30_days",
},
{
key: 5,
content: "Last 90 days",
value: "Last_90_days",
}
];
2. Създайте таблица със стилове за компонента DropdownSelector, като използвате react-jss
=== STYLESHEET USING REACT-JSS ===
const useStyles = createUseStyles(() => ({
container: {
position: "absolute",
right: 10,
"& button": {
color: "black",
border: "1.5px solid #EDEEF1",
width: 150,
borderRadius: "15px",
}
}
}));
3. Сега ще направим родителски компонент за нашия избор на времева рамка
const DropdownSelector = ({ fetchCustomData }) => {
const classes = useStyles();
const [activeTimeFrame, setActiveTimeFrame] = useState(0);
const handleDataFetching = (key, value) => {
setActiveTimeFrame(key);
fetchCustomData(value); <-- It will fetch data for selected
time frame from dropdown
};
return (
<div className={classes.container}>
<Dropdown
overlay={
menu( <-- We will create this function later
handleDataFetching,
dropdownCategories,
dropdownCategories[activeTimeFrame]
)
}
>
<Button>
{dropdownCategories[activeTimeFrame].content} <DownOutlined />
</Button>
</Dropdown>
</div>
);
};
export default DropdownSelector
4. Сега ще създадем функция на менюто, която оставихме по-рано, така че създайте файл, наречен items.jsx във вашата src/componentдиректория.
src/component/items.jsx
import { Menu } from "antd";
export const menu = (
handleDataFetching,
dropdownCategories,
selectedItem
) => {
return (
<Menu>
{dropdownCategories.map((item) => {
return ( selectedItem.key != item.key && (
<Menu.Item
onClick={(e) => handleDataFetching(e.key,item.value)}
key={item.key}
>
{item.content}
</Menu.Item>
)
);
})}
</Menu>
);
};
Този компонент изброява всички падащи елементи, моля, имайте предвид, че сме добавили условие, така че да не изброяваме вече избран елемент.
Пълен код за втория компонент src/menu.jsx и src/items.jsx
Изобразете компонента Chart
- За изобразяване на диаграмата в тази статия ще използваме демонстрационни данни, но вие лесно интегрирате API, така че създайте файл, наречен data.js във вашата src директорияи тези демонстрационни данни
src/component/data.js
2. След това създайте файл, наречен Analytics.jsx във вашата src директория (src/Analytics.jsx)и импортирайте всички подкомпоненти + демонстрационни данни.
src/Analytics.jsx
import { useState } from "react";
import {createUseStyles} from "react-jss"
import "antd/dist/antd.css";
=== Sub Components ===
import MyGraph from "./component/graph";
import DropdownSelector from "./component/menu";
import dataSet from "./component/data";
3. Създайте таблица със стилове за компонент на Analytics с помощта на react-jss
const useStyles = createUseStyles(() => ({
container: {
color: '#fff',
padding: '1rem',
transition: '0.3s ease-in-out',
width: '1200px',
height: '400px',
display:'flex',
flexDirection:'column',
position:'relative'
}
}));
4. Сега създайте родителския компонент, наречен Analytics
function Analytics() {
const classes = useStyles()
const [data, setData] = useState(dataSet.Today);
const fetchCustomData = (key) => {
setData(dataSet[key]);
};
return (
<div className={classes.container}>
<h1>Analytics</h1>
<DropdownSelector fetchCustomData={fetchCustomData} />
<MyGraph data={data} />
</div>
);
}
export default Analytics;
Сега имаме многократно използваем компонент за анализ с инструмент за избор на времева рамка, можете да вградите този компонент ‹Analytics/›където искате да го изобразите.
Нека го изобразим в нашето приложение (по избор)
- Импортирайте
<Analytics>въввашият App.js файл и добавете във функционалния компонент.
import Analytics from "./Analytics"
function App() {
return (
<Analytics/>
);
}
export default App;
2. Уверете се, че вашата файлова структура изглежда подобно на по-долу, в случай че получите някакви грешки.
src/component/graph.jsx src/component/menu.jsx src/component/items.jsx src/component/data.jsx src/Analytics.jsx src/App.jsx
И това е!
Досега трябва да имате добре изглеждащ компонент на Анализ с градиентни цветове и инструмент за избор на времева рамка.
Повече съдържание в plainenglish.io. Регистрирайте се за нашия безплатен седмичен бюлетин. Получете изключителен достъп до възможности за писане и съвети в нашата общност Discord.
