import Chart from 'chart.js'; // Set Aspect Rate (width of X-axis/height of Y-axis) based on // choice of selectedLastDayOfMonth in Time picker string value. Note aspect export const getAspectRatio = (diffInMonths) => { let ratio; try { switch (diffInMonths) { case 0: case 1: ratio = 5; break; case 2: case 3: ratio = 3.5; break; case 4: case 5: case 6: ratio = 2.5; break; case 7: case 8: case 9: case 10: ratio = 2; break; case 11: case 12: ratio = 1.5; break; default: ratio = 0.9; } } catch (e) { ratio = 0.9; } return ratio; }; // Register a plugin for displaying a message for no data export const initializeCharts = () => { Chart.plugins.register({ afterDraw: (chart) => { if (chart.data.datasets.length === 0) { const { ctx, width, height } = { ctx: chart.chart.ctx, width: chart.chart.width, height: chart.chart.height, }; chart.clear(); ctx.save(); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = '25px bold'; ctx.fillText('No data to display for selected time period', width / 2, height / 2); ctx.restore(); } }, }); }; export const createChart = (selector, data, appendTolabel = '') => { new Chart($(selector), { // eslint-disable-line no-new type: 'bar', data: { labels: Object.keys(data), datasets: [{ data: Object.keys(data).map(k => data[k]), backgroundColor: '#4F5253', // TODO parameterised according to roadmap main colour instance }], }, options: { legend: { display: false, }, tooltips: { callbacks: { label: tooltipItem => `${tooltipItem.yLabel} ${appendTolabel}`, }, }, scales: { yAxes: [{ ticks: { min: 0, suggestedMax: 50 }, }], }, }, }); }; export const drawHorizontalBar = (canvasSelector, data) => { const aspectRatio = getAspectRatio(data.labels.length); const chart = new Chart(canvasSelector, { // eslint-disable-line no-new type: 'horizontalBar', data, options: { responsive: true, maintainAspectRatio: true, aspectRatio, scales: { xAxes: [{ ticks: { beginAtZero: true, stepSize: 10 }, stacked: true, }], yAxes: [{ stacked: true, }], }, }, }); return chart; };