From d70b7ed6b91985634099b6c7c88cc93721a30420 Mon Sep 17 00:00:00 2001 From: Lydia MAOUCHE Date: Mon, 6 Jan 2020 09:41:38 +0100 Subject: [PATCH] Mise en place du la partie front end pour le prix moyens par annee --- api/src/Controller/PrixMoyenParAnnee.php | 11 +- api/src/Entity/ValeursFonciere.php | 5 +- client/src/Cascading_Style_Sheets/index.css | 34 +++++ .../valeursfonciere/Prixmoyenparannee.js | 117 ++++++++++++++++++ .../src/components/valeursfonciere/index.js | 3 +- client/src/routes/valeursfonciere.js | 6 +- 6 files changed, 162 insertions(+), 14 deletions(-) create mode 100644 client/src/Cascading_Style_Sheets/index.css create mode 100644 client/src/components/valeursfonciere/Prixmoyenparannee.js diff --git a/api/src/Controller/PrixMoyenParAnnee.php b/api/src/Controller/PrixMoyenParAnnee.php index 68492f5..f526f91 100644 --- a/api/src/Controller/PrixMoyenParAnnee.php +++ b/api/src/Controller/PrixMoyenParAnnee.php @@ -28,7 +28,6 @@ class PrixMoyenParAnnee extends AbstractController{ $query = " SELECT TO_CHAR(valeurs_fonciere.date_mutation, 'YYYY') AS annee, - TO_CHAR(valeurs_fonciere.date_mutation, 'MM') AS mois, AVG(valeurs_fonciere.valeur_fonciere / valeurs_fonciere.surface_reelle_bati) AS prix_moyen_m_carree FROM App:ValeursFonciere AS valeurs_fonciere @@ -39,15 +38,13 @@ class PrixMoyenParAnnee extends AbstractController{ AND lower(valeurs_fonciere.nature_mutation) = 'vente' GROUP BY - annee, - mois + annee ORDER BY - annee, - mois"; + annee + "; $prix_mettres = $this->em->createQuery($query)->getResult(); foreach ($prix_mettres as &$prix_mettre){ $prix_mettre['annee'] = intval($prix_mettre['annee']); - $prix_mettre['mois'] = intval($prix_mettre['mois']); $prix_mettre['prix_moyen_m_carree'] = floatval($prix_mettre['prix_moyen_m_carree']); } $res = new JsonResponse( @@ -56,4 +53,4 @@ class PrixMoyenParAnnee extends AbstractController{ ); return $res; } -} \ No newline at end of file +} diff --git a/api/src/Entity/ValeursFonciere.php b/api/src/Entity/ValeursFonciere.php index 702188a..47f5f5d 100644 --- a/api/src/Entity/ValeursFonciere.php +++ b/api/src/Entity/ValeursFonciere.php @@ -29,9 +29,6 @@ use Doctrine\ORM\Mapping as ORM; * "annee"={ * "type"="number" * }, - * "mois"={ - * "type"="number" - * }, * "prix_moyen_m_carree"={ * "type"="number" * } @@ -112,7 +109,7 @@ class ValeursFonciere private $nature_mutation; /** - * @ORM\Column(type="float") + * @ORM\Column(type="float") */ private $valeur_fonciere; diff --git a/client/src/Cascading_Style_Sheets/index.css b/client/src/Cascading_Style_Sheets/index.css new file mode 100644 index 0000000..803dec5 --- /dev/null +++ b/client/src/Cascading_Style_Sheets/index.css @@ -0,0 +1,34 @@ +#app { + padding: 20px; + font-family: robot, arial +} +svg { + fill: #000; + fill-opacity: 0.3; +} + +path { + stroke: steelblue; + stroke-width: 2px; + fill: none; +} + +.axis { + stroke: #000; +} + +.axis-labels text { + fill: #000; + fill-opacity: 0.9; + font-size: 12px; + text-anchor: middle; +} + +.axis-labels line { + stroke: #000; +} + +.gridline { + opacity: 0.2; +} + diff --git a/client/src/components/valeursfonciere/Prixmoyenparannee.js b/client/src/components/valeursfonciere/Prixmoyenparannee.js new file mode 100644 index 0000000..131162a --- /dev/null +++ b/client/src/components/valeursfonciere/Prixmoyenparannee.js @@ -0,0 +1,117 @@ +import React, { Component } from 'react'; +import * as d3 from 'd3' +import '../../Cascading_Style_Sheets/index.css'; + +class Prixmoyenparannee extends Component { + + constructor(props){ + super(props); + this.state = { + data: [] + } + } + componentWillMount(){ + console.log('Je suis appeler en premier!'); + } + + getData(){ + fetch(`https://${document.domain}:8443/prix_moyens`) + .then(response => { + if (response.ok) { + const data = response.json() + return data; + } else { + throw new Error('Something went wrong ...'); + } + }) + .then(data => { + this.setState({data: data }); + }) + .catch(error => console.log("error")); + } + + componentDidMount(){ + this.getData(); + + } + + render() { + function parseData(data) { + var arr = []; + data.map(function (thisList){ + arr.push({ + annee: thisList.annee | 0, + prix_moyen_m_carree : thisList.prix_moyen_m_carree + }); + }) + return arr; + } + + function isInteger(n) { + return n === +n && n === (n|0); +} + + const data = parseData(this.state.data) + console.log(data) + + const margin = 30 + const width = 800, height = 500; + + const h = height - 2 * margin, w = width - 2 * margin + + //x scale + const x = d3.scaleLinear() + .domain(d3.extent(data, d => d.annee )) //domaine : [min,max] d'annee + .range([margin, w]) + + //y scale + const y = d3.scaleLinear() + .domain([0, d3.max(data, d => d.prix_moyen_m_carree)]) // domaine [0,max] de b (à partir de 0) + .range([h, margin]) + + //Générateur de lignes : chaque point est [x(d.annee), y(d.prix_moyen_m_carré)] où d est une ligne dans les données + // et x, y sont des échelles (par exemple x(10) renvoie la valeur du pixel de 10 mis à l'échelle par x) + const line = d3.line() + .x(d => x(d.annee)) + .y(d => y(d.prix_moyen_m_carree)) + .curve(d3.curveCatmullRom.alpha(0.5)) //curve line + + const xTicks = x.ticks(6).map(d => ( + x(d) > margin && x(d) < w ? + + {(isInteger(d))? d:' '} + + + : null + )) + + const yTicks = y.ticks(5).map(d => ( + y(d) > 10 && y(d) < h ? + + {d} + + + + : null + )) + + return ( +
+ + + + + + {xTicks} + + + {yTicks} + + +
+ ) + } + } + +export default Prixmoyenparannee; + diff --git a/client/src/components/valeursfonciere/index.js b/client/src/components/valeursfonciere/index.js index e936e55..0e1ecc8 100644 --- a/client/src/components/valeursfonciere/index.js +++ b/client/src/components/valeursfonciere/index.js @@ -2,5 +2,6 @@ import Create from './Create'; import List from './List'; import Update from './Update'; import Show from './Show'; +import Prixmoyenparannee from './Prixmoyenparannee'; -export { Create, List, Update, Show }; +export { Create, List, Update, Show, Prixmoyenparannee}; diff --git a/client/src/routes/valeursfonciere.js b/client/src/routes/valeursfonciere.js index b142e8d..5d4316b 100644 --- a/client/src/routes/valeursfonciere.js +++ b/client/src/routes/valeursfonciere.js @@ -1,11 +1,13 @@ import React from 'react'; import { Route } from 'react-router-dom'; -import { List, Create, Update, Show } from '../components/valeursfonciere/'; +import { List, Create, Update, Show,Prixmoyenparannee} from '../components/valeursfonciere/'; export default [ , , , , - + , + + ]; -- GitLab