Concurrent tooltip

Use interaction model to establish concurrent interactivity between canvases

main
run-button
run-button
reset-button
        const env = muze();
        const DataModel = muze.DataModel;
        const html = muze.Operators.html;
		const DateTimeFormatter = muze.utils.DateTimeFormatter;

	    const dataArr = data.data.map(d => d.history.PX_LAST);
        const canvases = [];
    	const fullData = [];
        dataArr.forEach((jsonData, i) => {
            jsonData.forEach((d) => {
                fullData.push(Object.assign({
                    dim: dimensions[i].value,
                    unit: dimensions[i].unit
                }, d));
            });
        });
        const div = document.createElement('div')
        div.className = 'chart-header muze-header-cell';
        div.innerHTML ='The 12 Global Economic Indicators to Watch <br>(A concurrent interactive chart)';
        document.getElementById('chart-container').appendChild(div);

    	const dataModel = new DataModel(fullData, schema);
    	new Array(11).fill(11).forEach((dim, i) => {
        	const dataForCanvas = dataModel.select(fields => fields.dim.value === `${dimensions[i].value}`);
        	const newDomNode = document.createElement('div')
        	newDomNode.className = 'chart-div';
        	newDomNode.id =`chart${i + 1}`;
     		document.getElementById('chart-container').appendChild(newDomNode);

            const canvas = env.canvas()
                .width(600)
                .height(300)
                .data(dataForCanvas)
                .rows([[], ['value']])
                .columns(['date'])
                .detail(['dim', 'unit'])
                .color({
                    value: '#000000'
                })
                .config({
                    axes: {
                        y: {
                            numberOfTicks: 4,
                            showAxisName: false
                        },
                        x: {
                            showAxisName: false
                        }
                    },
                    border: {
                        color: '#000',
                        width: 1
                    },
                    interaction: {
                        tooltip: {
                            formatter: (dm) => {
                                let val = 0;
                                const domain = canvas.yAxes()[0][0].domain();
                                const selectionData = dm.getData().data;
                                const fieldsConfig = dm.getFieldsConfig();
                                const valueIndex = fieldsConfig.value.index;
                                const dimIndex = fieldsConfig.dim.index;
                                const dateIndex = fieldsConfig.date.index;
                                const unitIndex = fieldsConfig.unit.index;
                                const unit = selectionData[0][unitIndex];
                                val = selectionData[0][valueIndex];
                                val = Math.round((unit === 'B' ? val / 1000 : val) * 100) / 100;
                                const sign = domain[0] < 0 ? val >= 0 ? '+' : '' : '';
                                const value = `${sign}${val}`;
                                const valueSpan = `<div style = "font-size: 1.75rem; color: #000; display: inline-block">${value}${unit}</div>`;
                                const dimSpan = `<div style = "font-size: 0.875rem;">${selectionData[0][dimIndex]}</div>`;
                                const dateSpan = `<div style = "font-size: 0.875rem; color: #767676;
                                    font-family: Helvetica, Arial, sans-serif">${DateTimeFormatter.formatAs(selectionData[0][dateIndex], '%b. %Y')}</div>`;

                                return html`${valueSpan}${dimSpan}${dateSpan}`;
                            }
                        }
                    }
                })
                .layers([{
                    mark: 'line',
                    transition: {
                        disabled: true
                    }
                }])
                .title(dimensions[i].value, { position: 'top', align: 'left' })
                .mount(`#chart${i + 1}`);

        	canvases.push(canvas);
    	});
    	muze.ActionModel.for(...canvases).enableCrossInteractivity()
        	.dissociateSideEffect(['crossline', 'highlight']);