https://github.com/pixeledcode/echarts-satori

A demo app implementing custom charts using ECharts, Satori and Next.js route handler
https://github.com/pixeledcode/echarts-satori

echarts nextjs route-handlers satori

Last synced: 19 days ago
JSON representation

A demo app implementing custom charts using ECharts, Satori and Next.js route handler

• Host: GitHub
• URL: https://github.com/pixeledcode/echarts-satori
• Owner: PixeledCode
• Created: 2024-03-16T07:48:43.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-06T04:22:05.000Z (9 months ago)
• Last Synced: 2024-10-23T11:47:30.094Z (2 months ago)
• Topics: echarts, nextjs, route-handlers, satori
• Language: TypeScript
• Homepage: https://echarts-satori.vercel.app
• Size: 861 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Echarts Satori

A demo app implementing custom charts using ECharts, Satori and Next.js route handler

## 1st Part - Setup Project

1. Setup Next.js.

2. Install packages `echarts` and `echarts-for-react`.

3. Create a component for Echarts that accepts an [chartOptions](./components/data.ts) prop.

4. Setup the Echart in the [page](./app/page.tsx) route.

## 2nd Part - Download Chart

1. Create a route handler at `api/chart/route.ts` that returns an SVG string of the chart.

2. Implement a Download component that performs a POST request using the `chartOptions`.

3. Convert the SVG string to either an SVG URI or PNG URI based on the use case.

## 3rd Part - Download Custom Chart

1. Setup Satori:

- Install package `satori` and `intl-segmenter-polyfill`.

- Extend the global `window` interface with `__resource` [typings.d.ts](./typings.d.ts).

- Add the font file using by satori to the `public` directory.

2. Creaye a `reactToSVG` function that converts a React component to an SVG string [satori](./lib/satori.ts)

3. Add a React Template to customize the chart [ChartTemplate](./components/ChartTemplate.tsx).

4. Pass the template to Satori using `reactToSVG` to generate an SVG string of the customized chart.

5. Convert the SVG string to a data URI and download it.

## 4th Part - Improvement

1. Instead of returning an SVG string from route handler, you can return a data URI directly so that we can skip one function call.