Ogólnie chodzi o to że renderuje sobie plik Javascript, ale w momencie gdy zainstalowałem react w laravelu straciłem możliwość renderowania zmian na żywo. W jaki więc sposób mogę zrobić Cruda który będzie mi pokazywał zmiany w wykresie kołowym uzależnionym od ilości liczbowej w bazie danych? Czy jestem w stanie przekazać do pliku Javascript w Laravel dane z bazy danych, gdzie mam jakąs liczbę i na tej podstawie rysuje wykres kołowy w react?
import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import { PieChart, Pie, Cell, Tooltip } from 'recharts';
const data = [
{ name: 'Facebook', value: 1200000 },
{ name: 'Twitter', value: 300000 },
{ name: 'Instagram', value: 457000 },
{ name: 'Tiktok', value: 257000 },
];
const COLORS = ['#3b5998', '#1da1f2', '#c32aa3', '#010101'];
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
return (
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
{`${(percent * 100).toFixed(0)}%`}
</text>
);
};
function User() {
return (
<div className="container mt-5">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card text-center">
<div className="card-header"><h2>Social Media Statistic</h2></div>
<div className="card-body"><table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Social Media</th>
<th scope="col">Ilość Procentowa</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Facebook</td>
<td>1440000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Instagram</td>
<td>780000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Tiktok</td>
<td>144000</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Twitter</td>
<td>780000</td>
</tr>
</tbody>
</table>
<div className="row justify-content-center">
<PieChart width={400} height={400} >
<Pie
data={data}
cx="50%"
cy="50%"
labelLine={false}
label={renderCustomizedLabel}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip/>
</PieChart>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default User;
// DOM element
if (document.getElementById('user')) {
ReactDOM.render(<User />, document.getElementById('user'));
}
Jak dodaje u góry use DB; pokazuje mi błąd, czy tylko rest Api wchodzi w gre i druga aplikacja w Reacie?