With charts

1import { Footnote, PageBottom, Tailwind, CSS } from "@fileforge/react-print";
2import {
3 BarChart,
4 XAxis,
5 YAxis,
6 Bar,
7 Legend,
8 PieChart,
9 Pie,
10 Cell,
11} from "recharts";
12
13export const dailyData = [
14 {
15 date: new Date("2024-01-01").getTime(),
16 electricity: 4000,
17 gas: 2400,
18 oil: 2800,
19 },
20 {
21 date: new Date("2024-01-02").getTime(),
22 electricity: 3000,
23 gas: 1398,
24 oil: 2210,
25 },
26 {
27 date: new Date("2024-01-03").getTime(),
28 electricity: 2000,
29 gas: 9800,
30 oil: 2290,
31 },
32 {
33 date: new Date("2024-01-04").getTime(),
34 electricity: 2780,
35 gas: 3908,
36 oil: 2000,
37 },
38 {
39 date: new Date("2024-01-05").getTime(),
40 electricity: 1890,
41 gas: 4800,
42 oil: 2181,
43 },
44 {
45 date: new Date("2024-01-06").getTime(),
46 electricity: 2390,
47 gas: 3800,
48 oil: 2500,
49 },
50 {
51 date: new Date("2024-01-07").getTime(),
52 electricity: 3490,
53 gas: 4300,
54 oil: 2100,
55 },
56 {
57 date: new Date("2024-01-08").getTime(),
58 electricity: 4000,
59 gas: 2400,
60 oil: 2800,
61 },
62 {
63 date: new Date("2024-01-09").getTime(),
64 electricity: 3000,
65 gas: 1398,
66 oil: 2210,
67 },
68 {
69 date: new Date("2024-01-10").getTime(),
70 electricity: 2000,
71 gas: 9800,
72 oil: 2290,
73 },
74 {
75 date: new Date("2024-01-11").getTime(),
76 electricity: 2780,
77 gas: 3908,
78 oil: 2000,
79 },
80 {
81 date: new Date("2024-01-12").getTime(),
82 electricity: 1890,
83 gas: 4800,
84 oil: 2181,
85 },
86 {
87 date: new Date("2024-01-13").getTime(),
88 electricity: 2390,
89 gas: 3800,
90 oil: 2500,
91 },
92 {
93 date: new Date("2024-01-14").getTime(),
94 electricity: 3490,
95 gas: 4300,
96 oil: 2100,
97 },
98 {
99 date: new Date("2024-01-15").getTime(),
100 electricity: 4000,
101 gas: 2400,
102 oil: 2800,
103 },
104 {
105 date: new Date("2024-01-16").getTime(),
106 electricity: 3000,
107 gas: 1398,
108 oil: 2210,
109 },
110 {
111 date: new Date("2024-01-17").getTime(),
112 electricity: 2000,
113 gas: 9800,
114 oil: 2290,
115 },
116 {
117 date: new Date("2024-01-18").getTime(),
118 electricity: 2780,
119 gas: 3908,
120 oil: 2000,
121 },
122 {
123 date: new Date("2024-01-19").getTime(),
124 electricity: 1890,
125 gas: 4800,
126 oil: 2181,
127 },
128 {
129 date: new Date("2024-01-20").getTime(),
130 electricity: 2390,
131 gas: 3800,
132 oil: 2500,
133 },
134 {
135 date: new Date("2024-01-21").getTime(),
136 electricity: 3490,
137 gas: 4300,
138 oil: 2100,
139 },
140 {
141 date: new Date("2024-01-22").getTime(),
142 electricity: 4000,
143 gas: 2400,
144 oil: 2800,
145 },
146 {
147 date: new Date("2024-01-23").getTime(),
148 electricity: 3000,
149 gas: 1398,
150 oil: 2210,
151 },
152 {
153 date: new Date("2024-01-24").getTime(),
154 electricity: 2000,
155 gas: 9800,
156 oil: 2290,
157 },
158 {
159 date: new Date("2024-01-25").getTime(),
160 electricity: 2780,
161 gas: 3908,
162 oil: 2000,
163 },
164 {
165 date: new Date("2024-01-26").getTime(),
166 electricity: 1890,
167 gas: 4800,
168 oil: 2181,
169 },
170 {
171 date: new Date("2024-01-27").getTime(),
172 electricity: 2390,
173 gas: 3800,
174 oil: 2500,
175 },
176 {
177 date: new Date("2024-01-28").getTime(),
178 electricity: 3490,
179 gas: 4300,
180 oil: 2100,
181 },
182];
183
184export const synthesisData = [
185 {
186 name: "Electricité",
187 value: 400,
188 },
189 {
190 name: "Gaz",
191 value: 300,
192 },
193 {
194 name: "Pétrole",
195 value: 300,
196 },
197];
198
199<Tailwind>
200 <CSS>{`@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
201
202 @page {
203 size: a4;
204 margin: .75in .75in 1in .75in;
205 }
206 `}</CSS>
207
208 <main className="text-slate-800 font-[inter]">
209 <PageBottom>
210 <div className="text-xs text-slate-400 border-t border-t-slate-300 py-4 mt-4 flex border-b border-b-slate-300">
211 <div>Consommation énergétique - Janvier 2024</div>
212 <div className="flex-grow" />
213 <div>
214 Fourni par{" "}
215 <a
216 href="https://www.enerflow.ai/"
217 target="_blank"
218 className="underline underline-offset-2 "
219 >
220 EnerFlow
221 </a>
222 </div>
223 </div>
224 </PageBottom>
225 <div className="flex items-center pb-6 mb-6 border-b">
226 <div className="flex-grow">
227 <h1 className="font-bold text-2xl">Rapport de consommation</h1>
228 <p className="text-slate-500 ">
229 1231 Rue des Sources, Montréal, QC H3J 1C6
230 </p>
231 </div>
232 <img
233 src="https://framerusercontent.com/images/UM8IiaGXuEviaIXCXI1zvRJYd2k.svg"
234 className="h-12 block"
235 />
236 </div>
237 <div className="my-6">
238 <h2 className="mb-6">Votre mois de janvier 2024</h2>
239 <BarChart
240 width={730}
241 height={250}
242 data={dailyData}
243 margin={{
244 top: 20,
245 left: 10,
246 right: 10,
247 }}
248 style={{
249 width: "100%",
250 height: "auto",
251 }}
252 >
253 <XAxis
254 axisLine={false}
255 dataKey="date"
256 type="number"
257 scale="time"
258 domain={[
259 new Date("2024-01-01").getTime(),
260 new Date("2024-01-14").getTime(),
261 ]}
262 tickFormatter={(date) => new Date(date).toLocaleDateString()}
263 ticks={dailyData
264 .map((d, i) => ((i + 3) % 7 === 0 ? d.date : null))
265 .filter((d) => d !== null)}
266 />
267 <Bar
268 barSize={13}
269 dataKey="electricity"
270 fill="#fcd656"
271 stroke="#fcd656"
272 stackId="1"
273 legendType="line"
274 name="Electricité"
275 />
276 <Bar
277 barSize={13}
278 dataKey="gas"
279 fill="#ec6666"
280 stroke="#ec6666"
281 stackId="1"
282 legendType="line"
283 name="Gaz"
284 />
285 <Bar
286 barSize={13}
287 dataKey="oil"
288 fill="#1479d4"
289 stroke="#1479d4"
290 stackId="1"
291 legendType="line"
292 name="Pétrole"
293 />
294 </BarChart>
295 </div>
296 <div className="flex -mx-4">
297 <div className="basis-0 flex-grow m-4 bg-slate-100 rounded-xl p-6">
298 <h2 className="text-xl font-bold">Consommation combinée</h2>
299 <PieChart
300 width={300}
301 height={160}
302 className="my-6"
303 style={{
304 width: "100%",
305 height: "auto",
306 }}
307 >
308 <Pie
309 cx="50%"
310 cy="100%"
311 outerRadius={115}
312 startAngle={180}
313 endAngle={0}
314 label
315 data={synthesisData}
316 dataKey="value"
317 >
318 {synthesisData.map((entry, index) => (
319 <Cell
320 key={`cell-${index}`}
321 fill={
322 index === 0 ? "#fcd656" : index === 1 ? "#ec6666" : "#1479d4"
323 }
324 />
325 ))}
326 </Pie>
327 </PieChart>
328 <p>
329 Ce mois-ci, votre consommation combinée d'électricité, de gaz et de
330 pétrole s'élève à 1000 kWh.
331 </p>
332 </div>
333 <div className="basis-0 flex-grow m-4 bg-slate-100 rounded-xl p-6">
334 <h2 className="text-xl font-bold">Consommation combinée</h2>
335 <PieChart
336 width={300}
337 height={160}
338 className="my-6"
339 style={{
340 width: "100%",
341 height: "auto",
342 }}
343 >
344 <Pie
345 cx="50%"
346 cy="100%"
347 outerRadius={115}
348 startAngle={180}
349 endAngle={0}
350 label
351 data={synthesisData}
352 dataKey="value"
353 >
354 {synthesisData.map((entry, index) => (
355 <Cell
356 key={`cell-${index}`}
357 fill={
358 index === 0 ? "#fcd656" : index === 1 ? "#ec6666" : "#1479d4"
359 }
360 />
361 ))}
362 </Pie>
363 </PieChart>
364 <p>
365 Ce mois-ci, votre consommation combinée d'électricité, de gaz et de
366 pétrole s'élève à 1000 kWh.
367 </p>
368 </div>
369 </div>
370 </main>
371</Tailwind>;