diff --git a/CHANGELOG.md b/CHANGELOG.md index afb45a8..27c2cf4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,12 @@ CHANGELOG === +# 3.1.0 + +> 2023-04-29 + +Add the `plotObservable` function as a shorthand for using Observablehq/plot charts. + # 3.0.0 > 2023-04-07 diff --git a/src/plotObservable.js b/src/plotObservable.js new file mode 100644 index 0000000..a74c902 --- /dev/null +++ b/src/plotObservable.js @@ -0,0 +1,15 @@ +import plot from './plot.js'; + +/** + * Plot Vega charts + * @param {Object} [chartConfig] An @observablehq/plot function + * @param {String} [options] Options + * @param {String} [options.outPath=''] A filepath to write the image. + * @param {Boolean} [options.view=true] If true, show the chart in a popup window. + * @param {String} [options.css] Any CSS that you want injected into the page to tweak styles. + * @param {String} [options.title='Chart'] If `view` is true, add a title to the window's page. A timestamp will be appended to this. + * @param {Boolean} [options.debug] Whether to run the screenshot browser in headfull mode. + */ +export default async function plotObservable(chartConfig, data, options = {}) { + await plot(chartConfig, [data], { ...options, library: 'observablehq/plot' }); +} diff --git a/test/plotObservable.test.js b/test/plotObservable.test.js new file mode 100644 index 0000000..8cc46e0 --- /dev/null +++ b/test/plotObservable.test.js @@ -0,0 +1,38 @@ +/* eslint-disable no-undef */ +import { readDataSync } from 'indian-ocean'; +import * as aq from 'arquero'; + +import plotObservable from '../src/plotObservable.js'; + +const events = readDataSync('./test/data/purchase_data.csv'); + +const dataset = aq + .from(events) + .derive({ date: aq.escape(d => new Date(d.date.split('T')[0])) }) + .groupby('date', 'brand') + .rollup({ value: d => aq.op.sum(d.price_in_usd) }) + .orderby('date', 'brand') + .objects(); + +const chart = data => Plot.plot({ + marks: [ + Plot.line(data, { + x: 'date', + y: 'value', + stroke: 'brand', + strokeWidth: 2, + curve: 'linear' + }) + ], + width: 554, + height: 130, + x: { ticks: 3 }, + marginLeft: 50, + color: { + legend: true, + width: 554, + columns: '120px' + } +}); + +await plotObservable(chart, dataset);