pdfn 0.4.3 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +4 -4
  2. package/templates/inline/report.tsx +61 -72
  3. package/templates/tailwind/report.tsx +61 -72
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pdfn",
3
- "version": "0.4.3",
3
+ "version": "0.4.5",
4
4
  "description": "Dev server and PDF generation for print-ready PDFs",
5
5
  "type": "module",
6
6
  "bin": {
@@ -56,7 +56,7 @@
56
56
  "ws": "^8.18.3",
57
57
  "@pdfn/client": "0.1.0",
58
58
  "@pdfn/react": "0.3.1",
59
- "@pdfn/vite": "0.5.0"
59
+ "@pdfn/vite": "0.5.1"
60
60
  },
61
61
  "devDependencies": {
62
62
  "@types/express": "^5.0.6",
@@ -66,8 +66,8 @@
66
66
  "tsup": "^8.5.1",
67
67
  "typescript": "^5.9.3",
68
68
  "vitest": "^4.0.17",
69
- "@pdfn/eslint-config": "0.0.0",
70
- "@pdfn/typescript-config": "0.0.0"
69
+ "@pdfn/typescript-config": "0.0.0",
70
+ "@pdfn/eslint-config": "0.0.0"
71
71
  },
72
72
  "scripts": {
73
73
  "build": "tsup",
package/templates/inline/report.tsx CHANGED
@@ -14,7 +14,6 @@ import {
14
14
  CartesianGrid,
15
15
  Tooltip,
16
16
  Legend,
17
- ResponsiveContainer,
18
17
  } from "recharts";
19
18
 
20
19
  /**
@@ -259,19 +258,15 @@ export default function Report({
259
258
  >
260
259
  Monthly Revenue vs Expenses
261
260
  </h2>
262
- <div style={{ height: "224px" }}>
263
- <ResponsiveContainer width="100%" height="100%">
264
- <BarChart data={monthlySales} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
265
- <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
266
- <XAxis dataKey="month" tick={{ fontSize: 10 }} />
267
- <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `$${v / 1000}k`} />
268
- <Tooltip formatter={(value: number) => formatCurrency(value)} />
269
- <Legend wrapperStyle={{ fontSize: 10 }} />
270
- <Bar dataKey="revenue" name="Revenue" fill="#3b82f6" radius={[2, 2, 0, 0]} />
271
- <Bar dataKey="expenses" name="Expenses" fill="#ef4444" radius={[2, 2, 0, 0]} />
272
- </BarChart>
273
- </ResponsiveContainer>
274
- </div>
261
+ <BarChart width={580} height={200} data={monthlySales} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
262
+ <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
263
+ <XAxis dataKey="month" tick={{ fontSize: 10 }} />
264
+ <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `$${v / 1000}k`} />
265
+ <Tooltip formatter={(value) => formatCurrency(value as number)} />
266
+ <Legend wrapperStyle={{ fontSize: 10 }} />
267
+ <Bar dataKey="revenue" name="Revenue" fill="#3b82f6" radius={[2, 2, 0, 0]} isAnimationActive={false} />
268
+ <Bar dataKey="expenses" name="Expenses" fill="#ef4444" radius={[2, 2, 0, 0]} isAnimationActive={false} />
269
+ </BarChart>
275
270
  </div>
276
271
 
277
272
  {/* Two Column Layout: Pie Chart and Growth Chart */}
@@ -290,28 +285,29 @@ export default function Report({
290
285
  >
291
286
  Revenue by Category
292
287
  </h2>
293
- <div style={{ height: "176px" }}>
294
- <ResponsiveContainer width="100%" height="100%">
295
- <PieChart>
296
- <Pie
297
- data={categoryBreakdown}
298
- cx="50%"
299
- cy="50%"
300
- innerRadius={35}
301
- outerRadius={60}
302
- paddingAngle={2}
303
- dataKey="value"
304
- label={({ name, value }) => `${name}: ${value}%`}
305
- labelLine={{ stroke: "#9ca3af", strokeWidth: 1 }}
306
- >
307
- {categoryBreakdown.map((entry, index) => (
308
- <Cell key={`cell-${index}`} fill={entry.color || COLORS[index % COLORS.length]} />
309
- ))}
310
- </Pie>
311
- <Tooltip formatter={(value: number) => `${value}%`} />
312
- </PieChart>
313
- </ResponsiveContainer>
314
- </div>
288
+ <PieChart width={280} height={160}>
289
+ <Pie
290
+ data={categoryBreakdown}
291
+ cx={70}
292
+ cy={80}
293
+ innerRadius={25}
294
+ outerRadius={55}
295
+ paddingAngle={2}
296
+ dataKey="value"
297
+ isAnimationActive={false}
298
+ >
299
+ {categoryBreakdown.map((entry, index) => (
300
+ <Cell key={`cell-${index}`} fill={entry.color || COLORS[index % COLORS.length]} />
301
+ ))}
302
+ </Pie>
303
+ <Tooltip formatter={(value) => `${value}%`} />
304
+ <Legend
305
+ layout="vertical"
306
+ align="right"
307
+ verticalAlign="middle"
308
+ wrapperStyle={{ paddingLeft: 20, fontSize: 10 }}
309
+ />
310
+ </PieChart>
315
311
  </div>
316
312
 
317
313
  {/* Quarterly Growth */}
@@ -328,23 +324,20 @@ export default function Report({
328
324
  >
329
325
  Quarterly Growth Rate
330
326
  </h2>
331
- <div style={{ height: "176px" }}>
332
- <ResponsiveContainer width="100%" height="100%">
333
- <LineChart data={quarterlyGrowth} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
334
- <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
335
- <XAxis dataKey="quarter" tick={{ fontSize: 10 }} />
336
- <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `${v}%`} />
337
- <Tooltip formatter={(value: number) => `${value}%`} />
338
- <Line
339
- type="monotone"
340
- dataKey="growth"
341
- stroke="#10b981"
342
- strokeWidth={2}
343
- dot={{ fill: "#10b981", strokeWidth: 2 }}
344
- />
345
- </LineChart>
346
- </ResponsiveContainer>
347
- </div>
327
+ <LineChart width={280} height={160} data={quarterlyGrowth} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
328
+ <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
329
+ <XAxis dataKey="quarter" tick={{ fontSize: 10 }} />
330
+ <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `${v}%`} />
331
+ <Tooltip formatter={(value) => `${value}%`} />
332
+ <Line
333
+ type="monotone"
334
+ dataKey="growth"
335
+ stroke="#10b981"
336
+ strokeWidth={2}
337
+ dot={{ fill: "#10b981", strokeWidth: 2 }}
338
+ isAnimationActive={false}
339
+ />
340
+ </LineChart>
348
341
  </div>
349
342
  </div>
350
343
 
@@ -362,25 +355,21 @@ export default function Report({
362
355
  >
363
356
  Monthly Profit Trend
364
357
  </h2>
365
- <div style={{ height: "176px" }}>
366
- <ResponsiveContainer width="100%" height="100%">
367
- <LineChart data={monthlySales} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
368
- <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
369
- <XAxis dataKey="month" tick={{ fontSize: 10 }} />
370
- <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `$${v / 1000}k`} />
371
- <Tooltip formatter={(value: number) => formatCurrency(value)} />
372
- <Line
373
- type="monotone"
374
- dataKey="profit"
375
- name="Profit"
376
- stroke="#10b981"
377
- strokeWidth={2}
378
- dot={{ fill: "#10b981", strokeWidth: 2 }}
379
- activeDot={{ r: 6 }}
380
- />
381
- </LineChart>
382
- </ResponsiveContainer>
383
- </div>
358
+ <LineChart width={580} height={160} data={monthlySales} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
359
+ <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
360
+ <XAxis dataKey="month" tick={{ fontSize: 10 }} />
361
+ <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `$${v / 1000}k`} />
362
+ <Tooltip formatter={(value) => formatCurrency(value as number)} />
363
+ <Line
364
+ type="monotone"
365
+ dataKey="profit"
366
+ name="Profit"
367
+ stroke="#10b981"
368
+ strokeWidth={2}
369
+ dot={{ fill: "#10b981", strokeWidth: 2 }}
370
+ isAnimationActive={false}
371
+ />
372
+ </LineChart>
384
373
  </div>
385
374
  </Page>
386
375
  </Document>
package/templates/tailwind/report.tsx CHANGED
@@ -15,7 +15,6 @@ import {
15
15
  CartesianGrid,
16
16
  Tooltip,
17
17
  Legend,
18
- ResponsiveContainer,
19
18
  } from "recharts";
20
19
 
21
20
  /**
@@ -176,19 +175,15 @@ export default function Report({
176
175
  <h2 className="text-lg font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-1">
177
176
  Monthly Revenue vs Expenses
178
177
  </h2>
179
- <div className="h-56">
180
- <ResponsiveContainer width="100%" height="100%">
181
- <BarChart data={monthlySales} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
182
- <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
183
- <XAxis dataKey="month" tick={{ fontSize: 10 }} />
184
- <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `$${v / 1000}k`} />
185
- <Tooltip formatter={(value: number) => formatCurrency(value)} />
186
- <Legend wrapperStyle={{ fontSize: 10 }} />
187
- <Bar dataKey="revenue" name="Revenue" fill="#3b82f6" radius={[2, 2, 0, 0]} />
188
- <Bar dataKey="expenses" name="Expenses" fill="#ef4444" radius={[2, 2, 0, 0]} />
189
- </BarChart>
190
- </ResponsiveContainer>
191
- </div>
178
+ <BarChart width={580} height={200} data={monthlySales} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
179
+ <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
180
+ <XAxis dataKey="month" tick={{ fontSize: 10 }} />
181
+ <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `$${v / 1000}k`} />
182
+ <Tooltip formatter={(value) => formatCurrency(value as number)} />
183
+ <Legend wrapperStyle={{ fontSize: 10 }} />
184
+ <Bar dataKey="revenue" name="Revenue" fill="#3b82f6" radius={[2, 2, 0, 0]} isAnimationActive={false} />
185
+ <Bar dataKey="expenses" name="Expenses" fill="#ef4444" radius={[2, 2, 0, 0]} isAnimationActive={false} />
186
+ </BarChart>
192
187
  </div>
193
188
 
194
189
  {/* Two Column Layout: Pie Chart and Growth Chart */}
@@ -198,28 +193,29 @@ export default function Report({
198
193
  <h2 className="text-lg font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-1">
199
194
  Revenue by Category
200
195
  </h2>
201
- <div className="h-44">
202
- <ResponsiveContainer width="100%" height="100%">
203
- <PieChart>
204
- <Pie
205
- data={categoryBreakdown}
206
- cx="50%"
207
- cy="50%"
208
- innerRadius={35}
209
- outerRadius={60}
210
- paddingAngle={2}
211
- dataKey="value"
212
- label={({ name, value }) => `${name}: ${value}%`}
213
- labelLine={{ stroke: "#9ca3af", strokeWidth: 1 }}
214
- >
215
- {categoryBreakdown.map((entry, index) => (
216
- <Cell key={`cell-${index}`} fill={entry.color || COLORS[index % COLORS.length]} />
217
- ))}
218
- </Pie>
219
- <Tooltip formatter={(value: number) => `${value}%`} />
220
- </PieChart>
221
- </ResponsiveContainer>
222
- </div>
196
+ <PieChart width={280} height={160}>
197
+ <Pie
198
+ data={categoryBreakdown}
199
+ cx={70}
200
+ cy={80}
201
+ innerRadius={25}
202
+ outerRadius={55}
203
+ paddingAngle={2}
204
+ dataKey="value"
205
+ isAnimationActive={false}
206
+ >
207
+ {categoryBreakdown.map((entry, index) => (
208
+ <Cell key={`cell-${index}`} fill={entry.color || COLORS[index % COLORS.length]} />
209
+ ))}
210
+ </Pie>
211
+ <Tooltip formatter={(value) => `${value}%`} />
212
+ <Legend
213
+ layout="vertical"
214
+ align="right"
215
+ verticalAlign="middle"
216
+ wrapperStyle={{ paddingLeft: 20, fontSize: 10 }}
217
+ />
218
+ </PieChart>
223
219
  </div>
224
220
 
225
221
  {/* Quarterly Growth */}
@@ -227,23 +223,20 @@ export default function Report({
227
223
  <h2 className="text-lg font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-1">
228
224
  Quarterly Growth Rate
229
225
  </h2>
230
- <div className="h-44">
231
- <ResponsiveContainer width="100%" height="100%">
232
- <LineChart data={quarterlyGrowth} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
233
- <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
234
- <XAxis dataKey="quarter" tick={{ fontSize: 10 }} />
235
- <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `${v}%`} />
236
- <Tooltip formatter={(value: number) => `${value}%`} />
237
- <Line
238
- type="monotone"
239
- dataKey="growth"
240
- stroke="#10b981"
241
- strokeWidth={2}
242
- dot={{ fill: "#10b981", strokeWidth: 2 }}
243
- />
244
- </LineChart>
245
- </ResponsiveContainer>
246
- </div>
226
+ <LineChart width={280} height={160} data={quarterlyGrowth} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
227
+ <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
228
+ <XAxis dataKey="quarter" tick={{ fontSize: 10 }} />
229
+ <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `${v}%`} />
230
+ <Tooltip formatter={(value) => `${value}%`} />
231
+ <Line
232
+ type="monotone"
233
+ dataKey="growth"
234
+ stroke="#10b981"
235
+ strokeWidth={2}
236
+ dot={{ fill: "#10b981", strokeWidth: 2 }}
237
+ isAnimationActive={false}
238
+ />
239
+ </LineChart>
247
240
  </div>
248
241
  </div>
249
242
 
@@ -252,25 +245,21 @@ export default function Report({
252
245
  <h2 className="text-lg font-semibold text-gray-800 mb-3 border-b border-gray-200 pb-1">
253
246
  Monthly Profit Trend
254
247
  </h2>
255
- <div className="h-44">
256
- <ResponsiveContainer width="100%" height="100%">
257
- <LineChart data={monthlySales} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
258
- <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
259
- <XAxis dataKey="month" tick={{ fontSize: 10 }} />
260
- <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `$${v / 1000}k`} />
261
- <Tooltip formatter={(value: number) => formatCurrency(value)} />
262
- <Line
263
- type="monotone"
264
- dataKey="profit"
265
- name="Profit"
266
- stroke="#10b981"
267
- strokeWidth={2}
268
- dot={{ fill: "#10b981", strokeWidth: 2 }}
269
- activeDot={{ r: 6 }}
270
- />
271
- </LineChart>
272
- </ResponsiveContainer>
273
- </div>
248
+ <LineChart width={580} height={160} data={monthlySales} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
249
+ <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
250
+ <XAxis dataKey="month" tick={{ fontSize: 10 }} />
251
+ <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `$${v / 1000}k`} />
252
+ <Tooltip formatter={(value) => formatCurrency(value as number)} />
253
+ <Line
254
+ type="monotone"
255
+ dataKey="profit"
256
+ name="Profit"
257
+ stroke="#10b981"
258
+ strokeWidth={2}
259
+ dot={{ fill: "#10b981", strokeWidth: 2 }}
260
+ isAnimationActive={false}
261
+ />
262
+ </LineChart>
274
263
  </div>
275
264
  </Page>
276
265
  </Tailwind>