Graph

1import { Circle, G, Line, Path, Rect, Svg, Text as SvgText } from '@react-pdf/renderer';
2import { Text as PDFText, View } from '@react-pdf/renderer';
3import type { Style } from '@react-pdf/types';
4import type React from 'react';
5import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
6type PdfxTheme = ReturnType<typeof usePdfxTheme>;
7import { createGraphStyles } from './pdfx-graph.styles';
8import type { ChartLayout, GraphProps, GraphSeries } from './pdfx-graph.types';
9import {
10  GRAPH_SAFE_WIDTHS,
11  arcPath,
12  buildLayout,
13  fmtNum,
14  getDefaultPalette,
15  getGraphWidth,
16  normalizeData,
17  polarToCartesian,
18  smoothPath,
19  truncate,
20} from './graph.utils';
21 
22/**
23 * Shared Y-axis grid lines and tick labels for cartesian charts (bar, line, area).
24 * Extracted to avoid duplicating the identical block across render functions.
25 */
26function renderGridAndYAxis(
27  ticks: number[],
28  toY: (v: number) => number,
29  chartX: number,
30  chartW: number,
31  showGrid: boolean,
32  gridColor: string,
33  textColor: string
34) {
35  return (
36    <>
37      {ticks.map((tick) => {
38        const ty = toY(tick);
39        return (
40          <G key={`grid-${tick}`}>
41            {showGrid && (
42              <Line
43                x1={chartX}
44                y1={ty}
45                x2={chartX + chartW}
46                y2={ty}
47                stroke={gridColor}
48                strokeWidth={0.5}
49                strokeDasharray="3 3"
50              />
51            )}
52            <SvgText
53              x={chartX - 4}
54              y={ty + 3}
55              fill={textColor}
56              textAnchor="end"
57              style={{ fontSize: 7 }}
58            >
59              {fmtNum(tick)}
60            </SvgText>
61          </G>
62        );
63      })}
64    </>
65  );
66}
67 
68function renderBarChart(
69  series: GraphSeries[],
70  layout: ChartLayout,
71  palette: string[],
72  showGrid: boolean,
73  showValues: boolean,
74  theme: PdfxTheme
75) {
76  const { chartX, chartY, chartW, chartH, yMin, yMax, yTicks, xLabels } = layout;
77  const nCategories = xLabels.length;
78  const nSeries = series.length;
79  const groupGap = 0.25;
80  const groupW = chartW / nCategories;
81  const barW = (groupW * (1 - groupGap)) / nSeries;
82  const textColor = theme.colors.mutedForeground;
83  const gridColor = theme.colors.border;
84  const axisColor = theme.colors.foreground;
85  const range = yMax - yMin || 1;
86  const toY = (v: number) => chartY + chartH - ((v - yMin) / range) * chartH;
87 
88  return (
89    <>
90// … truncated