{% extends 'layouts/top-charts.html' %} {% block mainChart %} {% for row in mainCharts %}

{% for chart in row %} {% if row.length === 2 %}
{% endif %}
{{ chart.title }}
{% if chart.subtitle %}
{{ chart.subtitle }}
{% endif %}
{% if chart.mapChart %} {% elseif chart.heatmap %} {% if !chart.heatmap.data.seriesData.sum() || chart.heatmap.data.seriesData.sum() === 0 %}
No Data Available
{% else %}
{% for name in chart.heatmap.data.name %}
{{ name }}
{% endfor %}
{% for series in chart.heatmap.data.series %} {% set i = loop.key %}
{% for serie in series %}
{% endfor %}
{% for serie in series %}
{{ chart.heatmap.data.labels[i][loop.key] }}
{% endfor %}
{% endfor %}
{{ labels.title.sessions }}
{% for label in chart.heatmap.data.heatmap.labels %}
{% endfor %} {% for colour in chart.heatmap.data.colour %} {% if loop.key !== 0 %}
{% endif %} {% endfor %}
{% for label in chart.heatmap.data.heatmap.labels %}
{{ label }}
{% endfor %}
{% endif %} {% else %}
{% if chart.tagets.length > 1 %}
{% endif %} {% for target in chart.targets %}
{% if !target.data.series.sum() || target.data.series.sum() === 0 %}
No Data Available
{% else %} {% if target.legend && target.legend.type === 'top' %}
{% for name in target.data.name %}
{{ name }}
{% endfor %}
{% endif %}
{% if target.legend && target.legend.type === 'bottom' %}
{% for name in target.data.name %}
{{ name }}
{% endfor %}
{% endif %} {% endif %}
{% endfor %} {% if chart.tagets.length > 1 %}
{% endif %} {% if chart.text || chart.text === 0 %} {% autoescape false %} {{ chart.text }} {% endautoescape %} {% endif %}
{% endif %}
{% if row.length === 2 %}
{% endif %} {% endfor %}
{% endfor %} {% endblock %} {% block mainChartScript %} var mainCharts = {}; {% for row in mainCharts %} {% for chart in row %} {% for target in chart.targets %} {% if target.data.series.sum() && target.data.series.sum() !== 0 %} mainCharts['{{ target.name }}'] = {}; mainCharts['{{ target.name }}'].option = {% if target.option %}JSON.parse('{{ JSON.stringify(target.option) }}'){% else %}{}{% endif %}; {% if target.type === 'Line' %} mainCharts['{{ target.name }}'].option.lineSmooth = false; {% endif %} {% if target.subtype === 'area' %} mainCharts['{{ target.name }}'].option.showArea = true; {% endif %} {% if target.subtype === 'donut' %} mainCharts['{{ target.name }}'].option.donut = true; mainCharts['{{ target.name }}'].option.donutWidth = 30; mainCharts['{{ target.name }}'].option.startAngle = 0; mainCharts['{{ target.name }}'].option.labelInterpolationFnc = function(value) { return value[0]; } mainCharts['{{ target.name }}'].option.total = {{ target.data.series.sum() }}; {% endif %} {% if target.subtype === 'reverse-horizontal-bar' %} mainCharts['{{ target.name }}'].option.reverseData = true; mainCharts['{{ target.name }}'].option.horizontalBars = true; mainCharts['{{ target.name }}'].option.axisX = { onlyInteger: true }; mainCharts['{{ target.name }}'].option.axisY = { offset: 70 }; {% endif %} {% if target.type !== 'Pie' && target.subtype !== 'reverse-horizontal-bar' %} mainCharts['{{ target.name }}'].option.axisY = { onlyInteger: true, labelInterpolationFnc: humanize }; {% endif %} {% if target.data.labels && target.subtype !== 'reverse-horizontal-bar' %} mainCharts['{{ target.name }}'].option.axisX = { labelInterpolationFnc: function skipLabels(value, index) { {% if target.skipLabel === 'minutes' %} return (value[value.length - 1] === '0' || value[value.length - 1] === '5') ? value : null; {% else %} return index % Math.ceil(mainCharts['{{ target.name }}'].labels.length * 25 / $('.{{ target.name }}-chart').width()) === 0 ? value : null; {% endif %} } }; {% endif %} {% if !target.noTooltip %} if (typeof mainCharts['{{ target.name }}'].option.plugins === 'undefined') { mainCharts['{{ target.name }}'].option.plugins = []; } mainCharts['{{ target.name }}'].option.plugins.push( Chartist.plugins.tooltip({ {% if target.tooltip.abs %} transformTooltipTextFnc: function absoluteValue(value) { return Math.abs(value); }, {% endif %} {% if !target.tooltip.class %} class: 'tool-tip' {% endif %} }) ); {% endif %} {% if target.type !== 'Pie' && target.data.series.max() > 0 %} {% if target.subtype === 'reverse-horizontal-bar' && !isNaN(target.data.series.stackMax()) %} mainCharts['{{ target.name }}'].option.high = {{ Math.ceil(target.data.series.stackMax() * 1.1) }}; {% else %} mainCharts['{{ target.name }}'].option.high = {{ Math.ceil(target.data.series.max() * 1.1) }}; {% endif %} {% if target.series.min() < 0 %} mainCharts['{{ target.name }}'].option.low = {{ Math.floor(target.data.series.min() * 1.1) }}; {% endif %} {% endif %} mainCharts['{{ target.name }}'].option.fullWidth = true; {% if (!target.option && !target.option.distributeSeries) && target.type === 'Bar' %} mainCharts['{{ target.name }}'].option.stackBars = true; {% endif %} {% if target.data.name %} mainCharts['{{ target.name }}'].name = JSON.parse('{{ JSON.stringify(target.data.name) }}'); {% endif %} {% if target.data.tooltipName %} mainCharts['{{ target.name }}'].tooltipName = JSON.parse('{{ JSON.stringify(target.data.tooltipName) }}'); {% endif %} {% if target.data.labels %} mainCharts['{{ target.name }}'].labels = JSON.parse('{{ JSON.stringify(target.data.labels) }}'); {% endif %} mainCharts['{{ target.name }}'].series = JSON.parse('{{ JSON.stringify(target.data.series) }}'); mainCharts['{{ target.name }}'].colour = JSON.parse('{{ JSON.stringify(target.data.colour) }}'); {% if target.subtype === 'reverse-horizontal-bar'%} mainCharts['{{ target.name }}'].series = mainCharts['{{ target.name }}'].series.reverse(); {% endif %} {% if target.data.name %} mainCharts['{{ target.name }}'].sum = mainCharts['{{ target.name }}'].series.sum(); for (var i = 0; i < mainCharts['{{ target.name }}'].series.length; i++) { {% if target.subtype === 'reverse-horizontal-bar'%} for (var j = 0; j < mainCharts['{{ target.name }}'].series[i].length; j++) { mainCharts['{{ target.name }}'].series[i][j] = { meta: mainCharts['{{ target.name }}'].{% if target.data.tooltipName %}tooltipName{% else %}name{% endif %}[mainCharts['{{ target.name }}'].series.length - i - 1], value: mainCharts['{{ target.name }}'].series[i][j] }; } {% else %} mainCharts['{{ target.name }}'].series[i] = { meta: mainCharts['{{ target.name }}'].{% if target.data.tooltipName %}tooltipName{% else %}name{% endif %}[i]{% if target.type === 'Pie' %} + ' (' + Math.round(mainCharts['{{ target.name }}'].series[i] * 100 / mainCharts['{{ target.name }}'].sum) + '%)'{% endif %}, value: mainCharts['{{ target.name }}'].series[i] }; {% endif %} } {% endif %} mainCharts['{{ target.name }}'].chart = new Chartist.{{ target.type }}('.{{ target.name }}-chart', { {% if target.data.labels %} labels: mainCharts['{{ target.name }}'].labels, {% endif %} series: mainCharts['{{ target.name }}'].series }, mainCharts['{{ target.name }}'].option); mainCharts['{{ target.name }}'].chart.on('draw', function(context) { {% if target.removeGrid %} if (context.type === 'grid' && (context.index !== 0{% if target.removeGrid !== 'all' %} || context.axis.counterUnits.dir === '{{ target.removeGrid }}'{% endif %})) { context.element.remove(); } {% endif %} {% if target.type === 'Bar' %} if (context.type === 'bar') { {% elseif target.type === 'Pie' %} if (context.type === 'slice') { {% elseif target.type === 'Line' %} if (context.type === 'line') { {% else %} if (false) { {% endif %} {% if target.data.colour %} context.element.attr({ {% if (target.option && target.option.distributeSeries) || target.subtype === 'reverse-horizontal-bar' %} style: 'stroke: ' + mainCharts['{{ target.name }}'].colour[context.seriesIndex] + ';' {% elseif target.subtype === 'reverse-horizontal-bar' %} style: 'stroke: ' + mainCharts['{{ target.name }}'].colour[mainCharts['{{ target.name }}'].colour.length - context.seriesIndex - 1] + ';' {% else %} style: 'stroke: ' + mainCharts['{{ target.name }}'].colour[context.index] + ';' {% endif %} {% if target.subtype === 'reverse-horizontal-bar' %} + 'stroke-width: 12px;' {% elseif target.subtype === 'donut' %} + 'stroke-width: 30px;' {% elseif target.type === 'Line' %} + 'stroke-width: 2px;' {% endif %} }); {% endif %} } {% if target.type === 'Line' %} if (context.type === 'point') { context.element.remove(); } if(context.type === 'label' && context.axis.counterUnits.dir === 'vertical') { context.element.attr({ x: context.x - context.element._node.scrollWidth / 2 }); } {% endif %} {% if target.subtype === 'area' %} if (context.type === 'area') { context.element.attr({ style: 'fill: ' + mainCharts['{{ target.name }}'].colour[context.seriesIndex] + ';' }); } {% endif %} }); {% endif %} {% endfor %} {% endfor %} {% endfor %} {% block reportScript %} {% endblock %} {% endblock %}