feat: add initial basic support for Victory

Fixes #41

examples/index.ts

@@ -13,8 +13,9 @@ console.error = function (message) {
 };
 
 const main = async () => {
-	await import('./basic');
-	await import('./composed');
+	await import('./recharts-basic');
+	await import('./recharts-composed');
+	await import('./victory-basic');
 
 	// rome-ignore lint/nursery/noConsoleLog: <explanation>
 	return console.log('✅ /examples updated!');

examples/basic.tsx → examples/recharts-basic.tsx

@@ -68,4 +68,4 @@ const MyDocument = () => (
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-ReactPDF.render(<MyDocument />, `${__dirname}/basic.pdf`);
+ReactPDF.render(<MyDocument />, `${__dirname}/recharts-basic.pdf`);

examples/composed.tsx → examples/recharts-composed.tsx

@@ -87,4 +87,4 @@ const MyDocument = () => (
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-ReactPDF.render(<MyDocument />, `${__dirname}/composed.pdf`);
+ReactPDF.render(<MyDocument />, `${__dirname}/recharts-composed.pdf`);

examples/victory-basic.tsx

@@ -0,0 +1,35 @@
+import ReactPDFChart from '../src';
+import { Document, Page } from '@react-pdf/renderer';
+import ReactPDF from '@react-pdf/renderer';
+import { fileURLToPath } from 'node:url';
+import React from 'react';
+import { VictoryBar, VictoryChart } from 'victory';
+
+const data = [
+	{ x: 1, y: 2, y0: 1 },
+	{ x: 2, y: 3, y0: 2 },
+	{ x: 3, y: 5, y0: 2 },
+	{ x: 4, y: 4, y0: 3 },
+	{ x: 5, y: 6, y0: 3 },
+];
+
+const MyDocument = () => (
+	<Document>
+		<Page size='A4' style={{ padding: 20 }}>
+			<ReactPDFChart>
+				<VictoryChart>
+					<VictoryBar
+						data={data}
+						height={100}
+						style={{ data: { fill: '#c43a31' } }}
+						width={100}
+					/>
+				</VictoryChart>
+			</ReactPDFChart>
+		</Page>
+	</Document>
+);
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+ReactPDF.render(<MyDocument />, `${__dirname}/victory-basic.pdf`);

package.json

@@ -46,7 +46,8 @@
 		"recharts": "2.7.2",
 		"rome": "12.1.3",
 		"semantic-release": "21.0.7",
-		"typescript": "5.1.6"
+		"typescript": "5.1.6",
+		"victory": "36.6.11"
 	},
 	"engines": {
 		"node": ">=16"

src/ReactPDFChart.tsx

@@ -110,12 +110,56 @@ const getElementStyle = (
 	// Apply inline styles that react-pdf supports
 	if (attribs.style) {
 		attribs.style.split(';').forEach((styleString) => {
-			const [key, value] = styleString.split(':');
+			const [rawKey, value] = styleString.split(':');
+			const key = rawKey.toLowerCase();
+
 			if (['backgroundColor', 'color'].includes(key)) {
 				style.push({ [key]: value });
+			} else {
+				// This warning is super noisy, but can be helpful when debugging
+				// console.warn(
+				// 	`<ReactPDFChart /> detected that your chart has a node with an unsupported inline style. "${attribs.style}" mentions "${key}" which isn't supported in react-pdf yet.`,
+				// );
+			}
+		});
+	}
+	return style;
+};
+
+// For SVG elements this will process inline styles into something react-pdf
+// can understand
+const getSvgElementStyle = (attribs: TagElementType['attribs']) => {
+	const style: SVGPresentationAttributes = {};
+
+	// Apply inline styles that react-pdf supports
+	if (attribs.style) {
+		attribs.style.split(';').forEach((styleString) => {
+			const [rawKey, value] = styleString.split(':');
+			const key = rawKey.toLowerCase();
+
+			switch (key) {
+				case 'color':
+				case 'fill':
+				case 'opacity':
+				case 'stroke':
+					style[key] = value;
+					break;
+				case 'stroke-width':
+					style.strokeWidth = value;
+					break;
+				case 'stroke-linecap':
+					style.strokeLineCap =
+						value as SVGPresentationAttributes['strokeLineCap'];
+					break;
+				default:
+				// This warning is super noisy, but can be helpful when debugging
+				// console.warn(
+				// 	`<ReactPDFChart /> detected that your chart has a node with an unsupported inline style. "${attribs.style}" mentions "${key}" which isn't supported in react-pdf yet.`,
+				// );
 			}
 		});
 	}
+
 	return style;
 };
 
@@ -231,6 +275,7 @@ const webSvgToPdfSvg = (children: React.ReactElement, chartStyle?: Style) => {
 							cx={attribs.cx}
 							cy={attribs.cy}
 							r={attribs.r}
+							style={getSvgElementStyle(attribs)}
 						>
 							{children}
 						</Circle>
@@ -252,6 +297,7 @@ const webSvgToPdfSvg = (children: React.ReactElement, chartStyle?: Style) => {
 							cy={attribs.cy}
 							rx={attribs.rx}
 							ry={attribs.ry}
+							style={getSvgElementStyle(attribs)}
 						>
 							{children}
 						</Ellipse>
@@ -266,6 +312,7 @@ const webSvgToPdfSvg = (children: React.ReactElement, chartStyle?: Style) => {
 							x2={attribs.x2}
 							y1={attribs.y1}
 							y2={attribs.y2}
+							style={getSvgElementStyle(attribs)}
 						>
 							{children}
 						</Line>
@@ -291,19 +338,31 @@ const webSvgToPdfSvg = (children: React.ReactElement, chartStyle?: Style) => {
 					);
 				case 'path':
 					return (
-						<Path {...baseProps} d={attribs.d}>
+						<Path
+							{...baseProps}
+							d={attribs.d}
+							style={getSvgElementStyle(attribs)}
+						>
 							{children}
 						</Path>
 					);
 				case 'polygon':
 					return (
-						<Polygon {...baseProps} points={attribs.points}>
+						<Polygon
+							{...baseProps}
+							points={attribs.points}
+							style={getSvgElementStyle(attribs)}
+						>
 							{children}
 						</Polygon>
 					);
 				case 'polyline':
 					return (
-						<Polyline {...baseProps} points={attribs.points}>
+						<Polyline
+							{...baseProps}
+							points={attribs.points}
+							style={getSvgElementStyle(attribs)}
+						>
 							{children}
 						</Polyline>
 					);
@@ -328,6 +387,7 @@ const webSvgToPdfSvg = (children: React.ReactElement, chartStyle?: Style) => {
 							height={attribs.height}
 							rx={attribs.rx}
 							ry={attribs.ry}
+							style={getSvgElementStyle(attribs)}
 							width={attribs.width}
 							x={attribs.x}
 							y={attribs.y}