diff --git a/pwa/components/Diagrammes/TimeSeries.tsx b/pwa/components/Diagrammes/TimeSeries.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2ffc21cdc1525be1144b2b6775b350431b356254
--- /dev/null
+++ b/pwa/components/Diagrammes/TimeSeries.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect, RefObject, useRef } from 'react';
+import * as d3 from 'd3';
+
+const TimeSeries = (props : any) => {
+  const ref: RefObject<HTMLDivElement> = React.createRef();
+  const drawn = useRef(false); // nouvelle référence pour stocker l'état de l'objet
+
+  useEffect(() => {
+    if (!drawn.current) { // vérifie si l'objet a déjà été dessiné
+      draw();
+      drawn.current = true; // met à jour l'état de l'objet
+    }
+  }, []);
+
+  let data  :{ date: Date, value: number }[] = [];
+
+  if (typeof props.fetchedData === "undefined" ){
+    data = [
+      { date: new Date('2020-01-01'), value: 25 },
+      { date: new Date('2020-02-01'), value: 37 },
+      { date: new Date('2020-03-01'), value: 45 },
+    ];
+  }else{
+    let fetchedData = props.fetchedData["hydra:member"];
+    console.log("fetched : " + JSON.stringify(props.fetchedData["hydra:member"].length));
+    for (let index = 0; index < fetchedData.length; index++) {
+      const element = {date : new Date(fetchedData[index].date), value : Math.round(fetchedData[index].prix)};
+      console.log(typeof fetchedData[index].date)
+      data.push(element);
+    }
+  }
+  console.log(data);
+
+  const draw = () => {
+    const margin = { top: 20, right: 20, bottom: 30, left: 50 };
+    const width = 800 - margin.left - margin.right;
+    const height = 400 - margin.top - margin.bottom;
+
+    const container = ref.current;
+    const svg = d3.select(container)
+      .append('svg')
+      .attr('width', width + margin.left + margin.right)
+      .attr('height', height + margin.top + margin.bottom)
+      .append('g')
+      .attr('transform', `translate(${margin.left}, ${margin.top})`);
+
+    const xScale = d3.scaleTime()
+      .range([0, width])
+      .domain(d3.extent(data, (d) => d.date));
+
+    const yScale = d3.scaleLinear()
+      .range([height, 0])
+      .domain([0, d3.max(data, (d) => d.value)]);
+
+    const line = d3.line<{ date: Date, value: number }>()
+      .x((d) => xScale(d.date))
+      .y((d) => yScale(d.value));
+
+    svg.append('path')
+      .datum(data)
+      .attr('fill', 'none')
+      .attr('stroke', 'steelblue')
+      .attr('stroke-width', 1.5)
+      .attr('d', line);
+
+    const xAxis = d3.axisBottom(xScale);
+    const yAxis = d3.axisLeft(yScale);
+
+    svg.append('g')
+      .attr('transform', `translate(0, ${height})`)
+      .call(xAxis);
+
+    svg.append('g')
+      .call(yAxis);
+
+      const g = svg.append('g');
+      
+  };
+
+  return (
+    <div className="TimeSeries" ref={ref}>
+    </div>
+  );
+};
+
+export default TimeSeries;
\ No newline at end of file
diff --git a/pwa/pages/TimeSeries/index.tsx b/pwa/pages/TimeSeries/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..60e6058650d67837e360eddb1c28ff7328f718b5
--- /dev/null
+++ b/pwa/pages/TimeSeries/index.tsx
@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from "react";
+import { fetch } from "../../utils/dataAccess";
+import TimeSeries from "../../components/Diagrammes/TimeSeries";
+import { PrixMoyen } from "../../types/PrixMoyen";
+
+const getPrixMoyen = async () => {
+  const data = await fetch("/ventes/prix");
+  return JSON.parse(data.text);
+}
+
+export default function Home() {
+  const [prixMoyen, setPrixMoyen] = useState<PrixMoyen[] | undefined>(undefined);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await getPrixMoyen();
+      setPrixMoyen(data);
+    };
+    fetchData();
+  }, []);
+  console.log(prixMoyen);
+  return (
+    <div className="container">
+      {prixMoyen ? <TimeSeries  fetchedData={prixMoyen} /> : 'Loading...'}
+    </div>
+  );
+}
\ No newline at end of file