chart.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. {% assign data = site.data.charts[include.chart-id] %}
  2. {% assign id = include.id | default: include.chart-id %}
  3. {% assign height = include.height | default: data.height | default: 10 %}
  4. {% assign class = include.class %}
  5. {% if include['size'] == 'sm' %}
  6. {% assign class = class | append: ' chart-sm' | strip %}
  7. {% assign height = 2.5 %}
  8. {% elsif include['size'] == 'lg' %}
  9. {% assign class = class | append: ' chart-lg' | strip %}
  10. {% assign height = 15 %}
  11. {% endif %}
  12. {% if data %}
  13. {% if data.extend %}
  14. {% assign data = site.data.charts[data.extend] | concat_objects: site.data.charts[include.chart-id] %}
  15. {% endif %}
  16. <div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
  17. {% capture script %}
  18. {% assign chart-type = data.type | default: 'bar' %}
  19. <script>
  20. // @formatter:off
  21. document.addEventListener("DOMContentLoaded", function () {
  22. {% if jekyll.environment == 'development' %}
  23. window.tabler_chart = window.tabler_chart || {};
  24. {% endif %}
  25. window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
  26. chart: {
  27. type: "{{ chart-type }}",
  28. fontFamily: 'inherit',
  29. height: {{ height | times: 16 }},
  30. {% if data.sparkline %}
  31. sparkline: {
  32. enabled: true
  33. },
  34. {% else %}
  35. parentHeightOffset: 0,
  36. toolbar: {
  37. show: false,
  38. },
  39. {% endif %}
  40. {% unless data.animations %}
  41. animations: {
  42. enabled: false
  43. },
  44. {% endunless %}
  45. {% if data.stacked %}
  46. stacked: true,
  47. {% endif %}
  48. },
  49. {% if chart-type == 'bar' %}
  50. plotOptions: {
  51. bar: {
  52. {% if data.horizontal %}
  53. barHeight: '50%',
  54. horizontal: true,
  55. {% else %}
  56. columnWidth: '50%',
  57. {% endif %}
  58. }
  59. },
  60. {% endif %}
  61. {% if chart-type == 'radialBar' %}
  62. plotOptions: {
  63. radialBar: {
  64. dataLabels: {
  65. total: {
  66. show: true,
  67. label: 'Totals',
  68. formatter: function (val) {
  69. return "44%";
  70. },
  71. },
  72. },
  73. },
  74. },
  75. {% endif %}
  76. {% if chart-type == 'bar' or chart-type == 'area' %}
  77. dataLabels: {
  78. enabled: {% if data.datalabels %}true{% else %}false{% endif %},
  79. },
  80. {% endif %}
  81. fill: {
  82. opacity: {% if chart-type == 'area' %}.16{% else %}1{% endif %},
  83. {% if chart-type == 'area' %}type: 'solid'{% endif %}
  84. },
  85. {% if data.title %}
  86. title: {
  87. text: "{{ data.title | escape }}",
  88. margin: 0,
  89. floating: true,
  90. offsetX: 10,
  91. style: {
  92. fontSize: '18px',
  93. },
  94. },
  95. {% endif %}
  96. {% if chart-type == 'area' or chart-type == 'line' %}
  97. stroke: {
  98. width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
  99. {% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
  100. lineCap: "round",
  101. curve: "{{ data.stroke-curve | default: 'smooth' }}",
  102. },
  103. {% endif %}
  104. {% if data.series %}
  105. {% if chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
  106. series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
  107. labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
  108. {% else %}series: [{% for serie in data.series %}{
  109. name: "{{ serie.name }}",
  110. data: [{{ serie.data | join: ', ' }}]
  111. }{% unless forloop.last %},{% endunless %}{% endfor %}],
  112. {% endif %}
  113. {% endif %}
  114. tooltip: {
  115. theme: 'dark'
  116. },
  117. grid: {
  118. {% unless data.sparkline %}
  119. padding: {
  120. top: -20,
  121. right: 0,
  122. left: -4,
  123. bottom: -4
  124. },
  125. {% endunless %}
  126. {% if data.hide-grid %}
  127. show: false,
  128. {% else %}
  129. strokeDashArray: 4,
  130. {% if data.show-x %}
  131. xaxis: {
  132. lines: {
  133. show: true
  134. }
  135. },
  136. {% endif %}
  137. {% endif %}
  138. },
  139. {% if data.show-data-labels %}
  140. dataLabels: {
  141. enabled: true,
  142. },
  143. {% endif %}
  144. {% if data.categories or data.datetime %}
  145. xaxis: {
  146. labels: {
  147. padding: 0,
  148. {% if data.x-formatter %}
  149. formatter: function(val) {
  150. return {{ data.x-formatter }}
  151. },
  152. {% endif %}
  153. },
  154. tooltip: {
  155. enabled: false
  156. },
  157. {% if chart-type == 'area' or chart-type == 'bar' %}
  158. axisBorder: {
  159. show: false,
  160. },
  161. {% endif %}
  162. {% if data.categories %}
  163. categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
  164. {% endif %}
  165. {% if data.datetime %}
  166. type: 'datetime',
  167. {% endif %}
  168. },
  169. {% endif %}
  170. {% unless chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
  171. yaxis: {
  172. labels: {
  173. padding: 4
  174. },
  175. {% if data.y-max %}
  176. max: {{ data.y-max }},
  177. {% endif %}
  178. {% if data.y-title %}
  179. title: {
  180. text: '{{ data.y-title | escape }}'
  181. }
  182. {% endif %}
  183. },
  184. {% endunless %}
  185. {% if data.datetime %}
  186. {% assign date = data.start-date | default: '2020-06-20' | date: "%s" %}
  187. {% assign days-count = data.series[0].data.size %}
  188. labels: [
  189. {% for i in (1..days-count) %}{% assign date = date | plus: 86400 %}'{{ date | timestamp_to_date }}'{% unless forloop.last %}, {% endunless %}{% endfor %}
  190. ],
  191. {% endif %}
  192. {% if data.series %}
  193. colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}tabler.getColor("{{ color }}"{% if serie.color-opacity %}, {{ serie.color-opacity }}{% endif %}){% unless forloop.last %}, {% endunless %}{% endfor %}],
  194. {% endif %}
  195. legend: {
  196. {% if data.legend %}
  197. show: true,
  198. position: 'bottom',
  199. offsetY: 12,
  200. markers: {
  201. width: 10,
  202. height: 10,
  203. radius: 100,
  204. },
  205. itemMargin: {
  206. horizontal: 8,
  207. vertical: 8
  208. },
  209. {% else %}
  210. show: false,
  211. {% endif %}
  212. },
  213. {% if data.hide-tooltip or chart-type == 'pie' or chart-type == 'donut' %}
  214. tooltip: {
  215. {% if data.hide-tooltip %}
  216. enabled: false,
  217. {% endif %}
  218. {% if chart-type == 'pie' or chart-type == 'donut' %}
  219. fillSeriesColor: false
  220. {% endif %}
  221. },
  222. {% endif %}
  223. {% if data.hide-points %}
  224. point: {
  225. show: false
  226. },
  227. {% endif %}
  228. {% if data.show-markers %}
  229. markers: {
  230. size: 2
  231. },
  232. {% endif %}
  233. })).render();
  234. });
  235. // @formatter:on
  236. </script>
  237. {% endcapture %}
  238. {% capture_global scripts %}
  239. {{ script }}
  240. {% endcapture_global %}
  241. {% endif %}