picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
interactions: [
{
type: 'native',
events: {
mousemove: function(e) {
this.chart.component('tooltip').emit('show', e);
},
mouseleave: function(e) {
this.chart.component('tooltip').emit('hide', e);
}
}
}
],
scales: {
years: {
data: {
extract: { field: 'Year' }
}
},
months: {
data: {
extract: { field: 'Month' }
}
},
s: {
data: {
field: 'Sales'
}
},
col: {
data: { field: 'Sales' },
type: 'color'
}
},
components: [{
key: 'y-axis',
type: 'axis',
scale: 'years',
dock: 'left'
}, {
key: 'x-axis',
type: 'axis',
scale: 'months',
dock: 'bottom'
}, {
key: 'data-point',
type: 'point',
data: {
extract: {
field: 'Month',
props: {
mm: { field: 'Month' },
size: { field: 'Sales' },
group: { field: 'Year' }
}
}
},
settings: {
x: { scale: 'months' },
y: { scale: 'years', ref: 'group' },
size: { scale: 's' },
fill: { scale: 'col', ref: 'size' }
}
},
{
key: 'tooltip',
type: 'tooltip',
settings: {
appendTo: document.querySelector('#container'),
// Since we only want to target the point marker
filter: nodes => nodes.filter(node => node.key === 'data-point'), //&& node.type === 'circle'),
// Create the data model
extract: ({ node, resources }) => {
const formatterFn = resources.formatter({ type: 'd3-number', format: '.2s' });
const dataProps = Object.keys(node.data)
.filter(key => key !== 'value' && key !== 'label' && key !== 'source')
.map(key => ({
label: node.data[key].source.field,
value: isNaN(node.data[key].value) ? node.data[key].value : formatterFn(node.data[key].value)
}));
return {
title: node.data.value,
color: 'white', //node.attrs.fill,
//props: dataProps,
};
},
// Generate virtual nodes
content: ({ h, data }) => {
const rows = [];
data.forEach(node => {
const title = h('th', {
colSpan: 2,
style: { fontWeight: 'bold', 'text-align': 'center', backgroundColor: node.color }
}, node.title);
rows.push(title);
/*
node.props.forEach(prop => {
const cells = [
h('td', {}, `${prop.label}:`),
h('td', { style: { 'text-align': 'right' } }, prop.value)
];
rows.push(h('tr', {}, cells));
});
*/
});
return h('div', { display: 'table' }, rows);
},
afterShow({ element }) {
element.children[0].style.opacity = 1;
element.children[1].style.opacity = 1;
// console.log(element);
//debugger;
},
onHide({ element }) {
element.children[0].style.opacity = 0;
element.children[1].style.opacity = 0;
},
placement: {
type: 'pointer',
//area: 'target'
}
},
style: {
content: {
'border-spacing': '4px',
opacity: 0,
transition: 'opacity 150ms ease-in'
},
arrow: {
opacity: 0,
transition: 'opacity 150ms ease-in'
}
}
}
]
}
})