yanot charts

Environments

Vite

A raw Vite Vanilla TypeScript environment.

Repository: https://github.com/systemdesigndao/yanot-chart-library-typescript

Weight

pnpm run build

dist/index.html         0.45 kB │ gzip:  0.30 kB
dist/assets/index.css   3.14 kB │ gzip:  1.10 kB
dist/assets/index.js   39.03 kB │ gzip: 13.87 kB

You also have the option to create a project using Rsbuild.

Rsbuild

Using vanjs framework here, powerful solution for a few kb's.

1. Follow Quick start (use patterns-vanjs)
2. Delete unused files
   2.1. Delete src/state.ts, src/components/JointComponent0.ts, src/components/JointComponent1.ts (skip this step if u need the files with this patterns)
3. Add files
   3.1. src/lib/chart.ts
   https://github.com/systemdesigndao/yanot-chart-library-typescript/blob/master/src/chart.ts
   3.2. src/data.json
   https://github.com/systemdesigndao/yanot-chart-library-typescript/blob/master/src/data.json
4. Update files
   4.1. src/style.css
   Add into base layer
   https://github.com/systemdesigndao/yanot-chart-library-typescript/blob/master/src/style.css
   4.2. src/app.ts

import Layout from "./components/Layout";
import vanjs from "vanjs-core";
import data from "./data.json";
import { TChart, ThemeColors } from "./lib/chart";
import van from "vanjs-core";

const { button, div, h1 } = vanjs.tags;

const LIGHT_COLORS: ThemeColors = {
	circleFill: "#ffffff",
	line: "#f2f4f5",
	zeroLine: "#ecf0f3",
	selectLine: "#dfe6eb",
	text: "#96a2aa",
	preview: "#eef2f5",
	previewAlpha: 0.8,
	previewBorder: "#b6cfe1",
	previewBorderAlpha: 0.5,
};

const DARK_COLORS: ThemeColors = {
	circleFill: "#242f3e",
	line: "#293544",
	zeroLine: "#313d4d",
	selectLine: "#3b4a5a",
	text: "#546778",
	preview: "#152435",
	previewAlpha: 0.8,
	previewBorder: "#5a7e9f",
	previewBorderAlpha: 0.5,
};

const App = () => {
	const lightTheme = vanjs.state(true);
	const charts: ReturnType<typeof TChart>[] = [];

	const clearCharts = () => {
		charts.forEach((chart) => chart.destroy?.());
		charts.length = 0;
	};

	const createCharts = () => {
		clearCharts();
		const chartsContainer = document.querySelector(".charts");
		if (chartsContainer) {
			chartsContainer.firstChild &&
				chartsContainer.removeChild(chartsContainer.firstChild);
			data.forEach((slot, i) => {
				const chartContainer = div();
				const chartTitle = h1(`Chart #${i}`);
				chartsContainer.appendChild(div({ class: 'tchart' }, chartTitle, chartContainer));

				const chart = TChart(chartContainer);
				chart.setColors(lightTheme.val ? LIGHT_COLORS : DARK_COLORS);
				chart.setData(slot);
				charts.push(chart);
			});

			charts.forEach((chart) => chart.run());
		}
	};

	const onChangeTheme = () => {
		lightTheme.val = !lightTheme.val;
		document.body.classList.toggle("dark-theme", !lightTheme.val);

		charts.forEach((chart) => {
			chart.setColors(lightTheme.val ? LIGHT_COLORS : DARK_COLORS);
		});
	};

	requestAnimationFrame(createCharts);

	return Layout({
		children: [
			button(
				{
					type: "button",
					class: "set-colors",
					onclick: onChangeTheme,
				},
				van.derive(() =>
					lightTheme.val ? "Set dark colors" : "Set light colors",
				),
			),
			div({ class: "charts" }),
		],
	});
};

export default App;

Weight

pnpm run build

> rsbuild build

  Rsbuild v1.1.3

● web ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) ready   Built in 0.31 s (web)

  File (web)                   Size       Gzip    
  dist/index.html              0.43 kB    0.29 kB
  dist/static/css/index.css    8.7 kB     2.5 kB
  dist/static/js/index.js      40.9 kB    14.5 kB

Result