import Vue from 'vue'
import VChartist from '../src/index'
Vue.use(VChartist)
const defaults = {
title: '',
titleClass: 'ct-title',
textAnchor: 'middle',
flipText: false
}
const ctTitle = function (options) {
options = Object.assign({}, defaults, options)
return function ctTitle (chart, Chartist) {
chart.on('created', function (data) {
const xPos = (data.chartRect.x2 - data.chartRect.x1) / 2 + data.chartRect.x1
const yPos = data.chartRect.y2 - 10
const title = new Chartist.Svg('text')
title.addClass(options.titleClass)
title.text(options.title)
title.attr({
x: xPos,
y: yPos,
'text-anchor': options.textAnchor
})
data.svg.append(title, true)
})
}
}
describe('test chartist plugin', () => {
let el
before(function () {
el = document.createElement('div')
el.id = 'app'
document.body.appendChild(el)
})
after(function () {
el.parentElement.removeChild(el)
})
it('should render correct contents', done => {
const vm = new Vue({
el,
replace: false,
template: `<chartist
type="Line"
:data="chartData"
:options="chartOptions">
</chartist>`,
data: {
chartData: {
labels: ['A', 'B', 'C'],
series: [
[1, 3, 2],
[4, 6, 5]
]
},
chartOptions: {
lineSmooth: false,
width: '600px',
height: '300px',
chartPadding: {
top: 50,
right: 15,
bottom: 5,
left: 10
},
plugins: [
ctTitle({
title: 'hello'
})
]
}
}
})
setTimeout(function () {
const text = document.getElementsByTagName('text')
if (text && text.class === 'ct-title') I{
expect(text).to.not.be.ok
}
done()
}, 50)
})
})
|