SVG Renderer draft.

plugins/svg-render/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+## [Unreleased]
+
+## [0.2.0]
+
+-   Set vizzu-0.10.x as a peer dependency
+
+## [0.1.1]
+
+### Fixed
+
+-   Fixed missing `d.ts` and `js.map` files
+
+## [0.1.0]
+
+### Added
+
+-   First release, set vizzu-0.9.x as a peer dependency

plugins/svg-render/README.md

@@ -0,0 +1,67 @@
+# Vizzu video capture plugin
+
+This plugin allows you to create videos from chart animations in Vizzu.
+
+## Install
+
+```sh
+$ npm install @vizzu/video-capture
+```
+
+## Usage
+
+To use the plugin, simply add it to your Vizzu instance as a feature:
+
+```javascript
+import { VideoCapture } from '@vizzu/video-capture'
+
+await chart.initializing
+chart.features(new VideoCapture(), true)
+```
+
+Once registered, you can start and stop the recording as needed:
+
+```javascript
+const anim = chart.animate({
+	data,
+	config: {
+		x: 'Year',
+		y: ['Value 2 (+)', 'Joy factors'],
+		color: 'Joy factors',
+		title: 'Video Export'
+	}
+})
+
+anim.activated.then(() => {
+	chart.feature.videoCapture.start()
+})
+
+anim.then(async (chart) => {
+	const output = await chart.feature.videoCapture.stop()
+	window.open(output.getObjectURL())
+})
+```
+
+## Extracting information
+
+The plugin provides two functions, <code>start()</code> to begin the recording and <code>stop()</code> to end it.
+
+```javascript
+chart.feature.videoCapture.start()
+chart.feature.videoCapture.stop()
+```
+
+## Contributing
+
+### Release
+
+If you need to change the `Vizzu` version number in the plugins, use the following command:
+
+`yarn node tools/updateVizzuMinorVersion.cjs <version>`
+
+## License
+
+Copyright © 2021-2023 [Vizzu Inc.](https://vizzuhq.com)
+
+Released under the
+[Apache 2.0 License](https://lib.vizzuhq.com/latest/LICENSE/).

plugins/svg-render/build/build.js

@@ -0,0 +1,48 @@
+import * as esbuild from 'esbuild'
+import { polyfillNode } from 'esbuild-plugin-polyfill-node'
+import { copy } from 'esbuild-plugin-copy'
+
+await esbuild.build({
+	entryPoints: ['src/index.ts'],
+	bundle: true,
+	minify: true,
+	sourcemap: true,
+	platform: 'node',
+	format: 'esm',
+	plugins: [
+		polyfillNode({
+			globals: {
+				process: true,
+				Buffer: true
+			}
+		}),
+		copy({
+			resolveFrom: 'cwd',
+			assets: {
+				from: ['./src/*.d.ts'],
+				to: ['./dist/types']
+			},
+			watch: true
+		})
+	],
+	outfile: 'dist/mjs/index.js'
+})
+
+await esbuild.build({
+	entryPoints: ['src/index.ts'],
+	bundle: true,
+	minify: true,
+	sourcemap: true,
+	platform: 'browser',
+	target: 'es6',
+	format: 'cjs',
+	plugins: [
+		polyfillNode({
+			globals: {
+				process: true,
+				Buffer: true
+			}
+		})
+	],
+	outfile: 'dist/cjs/index.js'
+})

plugins/svg-render/build/clear.js

@@ -0,0 +1,22 @@
+import fs from 'fs'
+
+function deleteFolderRecursive(path) {
+	if (fs.existsSync(path) && fs.lstatSync(path).isDirectory()) {
+		fs.readdirSync(path).forEach(function (file, index) {
+			var curPath = path + '/' + file
+
+			if (fs.lstatSync(curPath).isDirectory()) {
+				// recurse
+				deleteFolderRecursive(curPath)
+			} else {
+				// delete file
+				fs.unlinkSync(curPath)
+			}
+		})
+
+		fs.rmdirSync(path)
+	}
+}
+deleteFolderRecursive('./dist')
+
+fs.mkdirSync('./dist')

plugins/svg-render/demo/demo.js

@@ -0,0 +1,34 @@
+import Vizzu from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vizzu.min.js'
+import { data } from 'https://lib.vizzuhq.com/0.10/assets/data/chart_types_eu.js'
+import { VideoCapture } from '../dist/mjs/index.js'
+
+window.addEventListener('load', async function () {
+	const chart = new Vizzu('vizzu')
+
+	await chart.initializing
+
+	chart.feature(new VideoCapture(), true)
+
+	chart.animate({
+		data
+	})
+
+	const anim = chart.animate({
+		data,
+		config: {
+			x: 'Year',
+			y: ['Value 2 (+)', 'Joy factors'],
+			color: 'Joy factors',
+			title: 'Video Export'
+		}
+	})
+
+	anim.activated.then(() => {
+		chart.feature.videoCapture.start()
+	})
+
+	anim.then(async (chart) => {
+		const output = await chart.feature.videoCapture.stop()
+		window.open(output.getObjectURL())
+	})
+})

plugins/svg-render/demo/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="hu">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vizzu video maker demo</title>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<div
+			id="vizzu"
+			class="hide"
+			style="width: 90vw; height: 90vh; border: 1px solid #ccc"
+		></div>
+		<script src="demo.js " type="module"></script>
+	</body>
+</html>

plugins/svg-render/demo/style.css

@@ -0,0 +1,5 @@
+body {
+	font-family: Arial, sans-serif;
+	margin: 0;
+	padding: 0;
+}

plugins/svg-render/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "@vizzu/svg-render",
+	"description": "SVG rendering plugin",
+	"version": "0.2.0",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/types/index.d.ts",
+			"import": "./dist/mjs/index.js",
+			"default": "./dist/mjs/index.js",
+			"require": "./dist/cjs/index.js"
+		}
+	},
+	"files": [
+		"dist/**",
+		"package.json"
+	],
+	"main": "dist/cjs/index.js",
+	"module": "dist/mjs/index.js",
+	"types": "dist/types/index.d.ts",
+	"scripts": {
+		"build": "run clear && node build/build.js",
+		"clear": "node build/clear.js",
+		"test": "vitest"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/vizzuhq/vizzu-lib-ext#workspace=@vizzu/svg-render"
+	},
+	"keywords": [
+		"vizzu",
+		"plugin",
+		"svg"
+	],
+	"email": "[email protected]",
+	"license": "Apache-2.0",
+	"author": "Vizzu Inc.",
+	"bugs": {
+		"url": "https://github.com/vizzuhq/vizzu-lib-ext/issues"
+	},
+	"homepage": "https://github.com/vizzuhq/vizzu-lib-ext/tree/main/plugins/svg-render#readme",
+	"devDependencies": {
+		"ts-standard": "^12.0.2",
+		"typescript": "^5.4.2",
+		"vitest": "^1.3.1"
+	},
+	"peerDependencies": {
+		"vizzu": "~0.10.1"
+	}
+}