INSERT INTO crimes (fokontany, commune, region, country, Date_crime, Heure_crime,
type_crime, Gravité_crime, lat, log, description) VALUES
('Sahalava', 'Fianarantsoa I', 'Haute Matsiatra', 'Madagascar', '2023-05-01',
'12:30', 'viol', 'crime', '-21.43817', '47.08971', 'Viol perpétré à Sahalava,
Fianarantsoa I. La victime a été attaquée à midi et demie.'),
('Ampasambazaha', 'Fianarantsoa I', 'Haute Matsiatra', 'Madagascar', '2022-05-
02', '14:00', 'viol', 'grave', '-21.44756', '47.08662', 'Viol grave signalé à
Ampasambazaha, Fianarantsoa I. L\'incident a eu lieu à 14 heures.'),
('Isaha', 'Fianarantsoa I', 'Haute Matsiatra', 'Madagascar', '2021-05-03',
'16:45', 'agression', 'modéré', '-21.45134', '47.08840', 'Agression modérée
survenue à Isaha, Fianarantsoa I. L\'agression a eu lieu à 16h45.'),
('Anjoma', 'Fianarantsoa I', 'Haute Matsiatra', 'Madagascar', '2020-05-04',
'18:15', 'viol', 'mineur', '-21.45447', '47.08759', 'Viol mineur signalé à Anjoma,
Fianarantsoa I. L\'incident a eu lieu à 18h15.'),
('Tsianolondroa', 'Fianarantsoa I', 'Haute Matsiatra', 'Madagascar', '2024-05-
05', '20:00', 'vol', 'grave', '-21.45563', '47.085', 'Vol grave rapporté à
Tsianolondroa, Fianarantsoa I. Le vol a eu lieu à 20 heures.'),
('Ampitakely', 'Fianarantsoa I', 'Haute Matsiatra', 'Madagascar', '2021-05-07',
'23:00', 'homicide', 'crime', '-21.45950', '47.09029', 'Un homicide a été commis à
Ampitakely, Fianarantsoa I. L\'incident s\'est produit à 23 heures.'),
('beraviana', 'Fianarantsoa I', 'Haute Matsiatra', 'Madagascar', '2020-05-04',
'18:15', 'viol', 'mineur', '-21.4647', '47.09759', 'Viol mineur signalé à
Beraviana, Fianarantsoa I. L\'incident a eu lieu à 18h15.');
*/
voici le donner crimes sur postegress
select le somme de crimes par mois dans ans
l'ans ans lister par combobox
faite le backend laravel(CrimeController et Route et importer l'api par cette
statistique de code ci dessus:faite le update de code Chartone avec le classement
de en click combobox par l'anne
xaxes:categorie remplace le nom mois de base de donner convertir par lettre de mois
et y remplace le somme de crime par mois dans un nom
api axios :[Link]
import React, { useState } from 'react';
import ReactApexChart from 'react-apexcharts';
const ChartOne = () => {
const [seriesData, setSeriesData] = useState([
{
name: 'Total Revenue',
data: [5,2,3,2,1,2,3,6,4,2,1,1],
},
]);
const options = {
legend: {
show: false,
},
colors: ['#3C50E0'],
chart: {
fontFamily: 'Satoshi, sans-serif',
height: 335,
type: 'area',
dropShadow: {
enabled: true,
color: '#623CEA14',
top: 10,
blur: 4,
left: 0,
opacity: 0.1,
},
toolbar: {
show: false,
},
},
responsive: [
{
breakpoint: 1024,
options: {
chart: {
height: 300,
},
},
},
{
breakpoint: 1366,
options: {
chart: {
height: 350,
},
},
},
],
stroke: {
width: 2,
curve: 'straight',
},
grid: {
xaxis: {
lines: {
show: true,
},
},
yaxis: {
lines: {
show: true,
},
},
},
dataLabels: {
enabled: false,
},
markers: {
size: 4,
colors: '#fff',
strokeColors: ['#3056D3'],
strokeWidth: 3,
strokeOpacity: 0.9,
strokeDashArray: 0,
fillOpacity: 1,
discrete: [],
hover: {
size: undefined,
sizeOffset: 5,
},
},
xaxis: {
type: 'category',
categories: [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug','Sep', 'Oct',
'Nov', 'Dec',
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
title: {
style: {
fontSize: '0px',
},
},
min: 0,
max: 10,
},
};
return (
<div className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-
7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-
span-8">
<div className="flex min-w-47.5">
<div>
<div className="relative z-20 inline-block">
<select
name="#"
id="#"
className="relative z-20 inline-flex bg-transparent pr-1 pl-1 mr-2
text-sm font-medium outline-none"
>
<option value="" className='dark:bg-boxdark'>2024</option>
<option value="" className='dark:bg-boxdark'>2023</option>
<option value="" className='dark:bg-boxdark'>2022</option>
</select>
</div>
</div>
<div className="w-full">
<p className="font-semibold text-primary">Total l'insecurite par ans:
70</p>
<p className="font-semibold text-primary">Total tous l'insecurite:
128</p>
</div>
</div>
<div>
<div id="chartOne" className="-ml-5">
<ReactApexChart
options={options}
series={seriesData}
type="area"
height={350}
/>
</div>
</div>
</div>
);
};
export default ChartOne;
