Reports
With charts
Reports
With charts
import { Footnote, PageBottom, Tailwind, CSS } from "@onedoc/react-print";
import {
BarChart,
XAxis,
YAxis,
Bar,
Legend,
PieChart,
Pie,
Cell,
} from "recharts";
export const dailyData = [
{
date: new Date("2024-01-01").getTime(),
electricity: 4000,
gas: 2400,
oil: 2800,
},
{
date: new Date("2024-01-02").getTime(),
electricity: 3000,
gas: 1398,
oil: 2210,
},
{
date: new Date("2024-01-03").getTime(),
electricity: 2000,
gas: 9800,
oil: 2290,
},
{
date: new Date("2024-01-04").getTime(),
electricity: 2780,
gas: 3908,
oil: 2000,
},
{
date: new Date("2024-01-05").getTime(),
electricity: 1890,
gas: 4800,
oil: 2181,
},
{
date: new Date("2024-01-06").getTime(),
electricity: 2390,
gas: 3800,
oil: 2500,
},
{
date: new Date("2024-01-07").getTime(),
electricity: 3490,
gas: 4300,
oil: 2100,
},
{
date: new Date("2024-01-08").getTime(),
electricity: 4000,
gas: 2400,
oil: 2800,
},
{
date: new Date("2024-01-09").getTime(),
electricity: 3000,
gas: 1398,
oil: 2210,
},
{
date: new Date("2024-01-10").getTime(),
electricity: 2000,
gas: 9800,
oil: 2290,
},
{
date: new Date("2024-01-11").getTime(),
electricity: 2780,
gas: 3908,
oil: 2000,
},
{
date: new Date("2024-01-12").getTime(),
electricity: 1890,
gas: 4800,
oil: 2181,
},
{
date: new Date("2024-01-13").getTime(),
electricity: 2390,
gas: 3800,
oil: 2500,
},
{
date: new Date("2024-01-14").getTime(),
electricity: 3490,
gas: 4300,
oil: 2100,
},
{
date: new Date("2024-01-15").getTime(),
electricity: 4000,
gas: 2400,
oil: 2800,
},
{
date: new Date("2024-01-16").getTime(),
electricity: 3000,
gas: 1398,
oil: 2210,
},
{
date: new Date("2024-01-17").getTime(),
electricity: 2000,
gas: 9800,
oil: 2290,
},
{
date: new Date("2024-01-18").getTime(),
electricity: 2780,
gas: 3908,
oil: 2000,
},
{
date: new Date("2024-01-19").getTime(),
electricity: 1890,
gas: 4800,
oil: 2181,
},
{
date: new Date("2024-01-20").getTime(),
electricity: 2390,
gas: 3800,
oil: 2500,
},
{
date: new Date("2024-01-21").getTime(),
electricity: 3490,
gas: 4300,
oil: 2100,
},
{
date: new Date("2024-01-22").getTime(),
electricity: 4000,
gas: 2400,
oil: 2800,
},
{
date: new Date("2024-01-23").getTime(),
electricity: 3000,
gas: 1398,
oil: 2210,
},
{
date: new Date("2024-01-24").getTime(),
electricity: 2000,
gas: 9800,
oil: 2290,
},
{
date: new Date("2024-01-25").getTime(),
electricity: 2780,
gas: 3908,
oil: 2000,
},
{
date: new Date("2024-01-26").getTime(),
electricity: 1890,
gas: 4800,
oil: 2181,
},
{
date: new Date("2024-01-27").getTime(),
electricity: 2390,
gas: 3800,
oil: 2500,
},
{
date: new Date("2024-01-28").getTime(),
electricity: 3490,
gas: 4300,
oil: 2100,
},
];
export const synthesisData = [
{
name: "Electricité",
value: 400,
},
{
name: "Gaz",
value: 300,
},
{
name: "Pétrole",
value: 300,
},
];
<Tailwind>
<CSS>{`@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
@page {
size: a4;
margin: .75in .75in 1in .75in;
}
`}</CSS>
<main className="text-slate-800 font-[inter]">
<PageBottom>
<div className="text-xs text-slate-400 border-t border-t-slate-300 py-4 mt-4 flex border-b border-b-slate-300">
<div>Consommation énergétique - Janvier 2024</div>
<div className="flex-grow" />
<div>
Fourni par{" "}
<a
href="https://www.enerflow.ai/"
target="_blank"
className="underline underline-offset-2 "
>
EnerFlow
</a>
</div>
</div>
</PageBottom>
<div className="flex items-center pb-6 mb-6 border-b">
<div className="flex-grow">
<h1 className="font-bold text-2xl">Rapport de consommation</h1>
<p className="text-slate-500 ">
1231 Rue des Sources, Montréal, QC H3J 1C6
</p>
</div>
<img
src="https://framerusercontent.com/images/UM8IiaGXuEviaIXCXI1zvRJYd2k.svg"
className="h-12 block"
/>
</div>
<div className="my-6">
<h2 className="mb-6">Votre mois de janvier 2024</h2>
<BarChart
width={730}
height={250}
data={dailyData}
margin={{
top: 20,
left: 10,
right: 10,
}}
style={{
width: "100%",
height: "auto",
}}
>
<XAxis
axisLine={false}
dataKey="date"
type="number"
scale="time"
domain={[
new Date("2024-01-01").getTime(),
new Date("2024-01-14").getTime(),
]}
tickFormatter={(date) => new Date(date).toLocaleDateString()}
ticks={dailyData
.map((d, i) => ((i + 3) % 7 === 0 ? d.date : null))
.filter((d) => d !== null)}
/>
<Bar
barSize={13}
dataKey="electricity"
fill="#fcd656"
stroke="#fcd656"
stackId="1"
legendType="line"
name="Electricité"
/>
<Bar
barSize={13}
dataKey="gas"
fill="#ec6666"
stroke="#ec6666"
stackId="1"
legendType="line"
name="Gaz"
/>
<Bar
barSize={13}
dataKey="oil"
fill="#1479d4"
stroke="#1479d4"
stackId="1"
legendType="line"
name="Pétrole"
/>
</BarChart>
</div>
<div className="flex -mx-4">
<div className="basis-0 flex-grow m-4 bg-slate-100 rounded-xl p-6">
<h2 className="text-xl font-bold">Consommation combinée</h2>
<PieChart
width={300}
height={160}
className="my-6"
style={{
width: "100%",
height: "auto",
}}
>
<Pie
cx="50%"
cy="100%"
outerRadius={115}
startAngle={180}
endAngle={0}
label
data={synthesisData}
dataKey="value"
>
{synthesisData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={
index === 0 ? "#fcd656" : index === 1 ? "#ec6666" : "#1479d4"
}
/>
))}
</Pie>
</PieChart>
<p>
Ce mois-ci, votre consommation combinée d'électricité, de gaz et de
pétrole s'élève à 1000 kWh.
</p>
</div>
<div className="basis-0 flex-grow m-4 bg-slate-100 rounded-xl p-6">
<h2 className="text-xl font-bold">Consommation combinée</h2>
<PieChart
width={300}
height={160}
className="my-6"
style={{
width: "100%",
height: "auto",
}}
>
<Pie
cx="50%"
cy="100%"
outerRadius={115}
startAngle={180}
endAngle={0}
label
data={synthesisData}
dataKey="value"
>
{synthesisData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={
index === 0 ? "#fcd656" : index === 1 ? "#ec6666" : "#1479d4"
}
/>
))}
</Pie>
</PieChart>
<p>
Ce mois-ci, votre consommation combinée d'électricité, de gaz et de
pétrole s'élève à 1000 kWh.
</p>
</div>
</div>
</main>
</Tailwind>;
Was this page helpful?