const SurrogateSideEffect = muze.SideEffects.standards.SurrogateSideEffect; const env = muze(); const DataModel = muze.DataModel; const html = muze.Operators.html; let rootData = new DataModel(data, schema); const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; rootData = rootData.calculateVariable({ name: 'Month', type: 'dimension' }, ['Date', date => (monthNames[new Date(date).getMonth()])]); const canvas = window.canvas = env.canvas() .width(1000) .height(400) .data(rootData) .rows(['Precipitation']) .columns(['Month']) .layers([{ mark: 'bar' }, { mark: 'tick', name: 'averageLine', className: 'averageLine', encoding: { x: { field: null }, y: 'Precipitation', color: { value: () => '#f71616' } }, calculateDomain: false, source: dt => dt.groupBy(['']), interactive: false }]) .title('Amount of precipitation for every month in the year with their average', { align: 'left' }) .subtitle(html`Selecting individual months will give the <b>average</b> for those months`, { align: 'left' }) .mount('#chart-container'); muze.ActionModel.for(canvas) .registerSideEffects( class AverageLine extends SurrogateSideEffect { static formalName() { return 'averageLine'; } apply(selectionSet) { const model = selectionSet.mergedEnter.model; const groupedModel = model.groupBy(['']); const layer = this.firebolt.context.getLayerByName('averageLine'); if (!model.isEmpty()) { layer.enableCaching().data(groupedModel); } else { layer.clearCaching(); } } } ).mapSideEffects({ 'brush,select': ['averageLine'] });