Sentry's Chartcuterie generates charts as images, specifically designed to aid in unfurling Sentry links with charts into slack, displaying useful charts in emails, and anywhere else outside of a browser environment where charts add valuable context.
echarts
+ node-canvas
is used internally to produce the charts.
Looking for information on running Chartcuterie with Sentry? Check the develop docs.
Chartcuterie can be run in two different modes
-
chartcuterie render
- Accepts JSON data on stdin and writes out the produced image to stdout. -
chartcuterie server
- Runs the service as an HTTP API. It will accept a JSON body atPOST /render
and will respond with the image when successful.
A configuration module is required to start Chartcuterie in any rendering mode.
This module is used to specify how to transform data received to a valid
EChart.Option
object
structure.
A simple configuration module might look like this:
import world from 'echarts/map/json/world.json';
const renderConfig = {
/**
* Each key in the configuration objects represents a rendering style
* configurtion. When passing your render data to chartcuterie you'll use
* this key to indicate what rendering config to use to produce your chart.
*/
'myStyle:example': {
key: 'myStyle:example',
/**
* The height and width of the produced image is specified as part of the
* render configuration.
*/
height: 200,
width: 600,
/**
* This function is used to transform the `data` passed in your rendering
* data JSON into a valid `EChart.Option`.
*/
getOption: data => {
return {series: data};
},
},
// More rendering styles specified in this object.
}
const config = {
renderConfig,
/**
* A version should be provided, which may be useful for observability
* purposes.
*/
version: '1.0.0-example.0',
init: echarts => {
echarts.registerMap('world', world);
},
}
module.exports = config;
The configuration module may be specified as either a filepath or alternatively a HTTP URL. Specifying the file as a HTTP URL may be useful when your configuration file is produced by a different service, such is the case for Sentry, where the configuration is co-located with Sentry's frontend chart rendering modules.
IMPORTANT: When resolving the configuration over HTTP be ABSOLUTELY SURE that the configuration file can be trusted and will not contain any malicious JavaScript. The configuration file is evaluated with the same privileges the running instance of chartcuterie has!
To render a chart in any rendering mode, you will need to supply some "rendering data". That is a JSON object that looks like this:
{
/**
* The request ID can be useful for tracing your render request
*/
"requestId": "<some unique request identifier>",
/**
* The rendering style as specified in your configuration
*/
"style": "myStyle:example",
/**
* The data object is totally arbitrary and is up to your configuration's
* `getOption` function to translate it into a valid echarts series.
*/
"data": "<anything you want here>"
}
This project uses volta
to manage the node toolchain, be
sure to have Volta installed and configured. The Dockerfile specifies the
system dependencies. If you want to run locally on macOS you'll need to install
them yourself:
brew install cairo pango
yarn lint
- Check for Typescript and Eslint errors / warnings.yarn test
- Run full test suiteyarn build
- Builds the applicationyarn watch
- Watches source files for changes and recompiles usingtsc
on changes.
To start the service you will need to specify a config
file. See the
documentation above for examples of simple configuration you can use for
testing.
Generally running like this is sufficient
node lib/index.js --config=exampleConfig.js render < example-data.json > example.png
Chartcuterie is licensed under the Apache License 2.0.