chart height fixes

js/tabler-charts.js

@@ -94,7 +94,6 @@ if (window.Apex) {
       width: 2,
       curve: 'smooth',
       lineCap: "round",
-      colors: ["transparent"]
     },
 
     fill: {

package.json

@@ -53,6 +53,10 @@
   "bugs": {
     "url": "https://github.com/tabler/tabler/issues"
   },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
   "engines": {
     "node": ">=10"
   },

pages/_docs/charts.md

@@ -18,7 +18,7 @@ menu: docs.charts
 			<div id="{{ key }}" style="height: 16rem"></div>
 		</div>
 	</div>
-	{% include ui/chart.html id=key chart-id=data %}
+	{% include ui/chart.html id=key chart-id=data show-scripts=true %}
 {% endexample %}
 {% endif %}
 {% endfor %}

pages/_includes/cards/charts/active-users.html

@@ -13,6 +13,6 @@
          </div>
       </div>
 
-      {% include ui/chart.html chart-id="active-users" class="chart-sm" %}
+      {% include ui/chart.html chart-id="active-users" size="sm" %}
    </div>
 </div>

pages/_includes/cards/charts/new-clients.html

@@ -13,6 +13,6 @@
          </div>
       </div>
 
-      {% include ui/chart.html chart-id="new-clients" class="chart-sm" %}
+      {% include ui/chart.html chart-id="new-clients" size="sm" %}
    </div>
 </div>

pages/_includes/cards/charts/revenue.html

@@ -13,5 +13,5 @@
          </div>
       </div>
    </div>
-   {% include ui/chart.html chart-id="revenue-bg" class="card-chart" %}
+   {% include ui/chart.html chart-id="revenue-bg" size="sm" %}
 </div>

pages/_includes/ui/chart.html

 {% assign data = site.data.charts[include.chart-id] %}
 {% assign id = include.id | default: include.chart-id %}
 {% assign height = include.height | default: 10 %}
+{% assign class = include.class | default: '' %}
+
+{% if include['size'] == 'sm' %}
+   {% assign class = class | append: ' chart-sm' | strip %}
+   {% assign height = 2.5 %}
+{% endif %}
 
 {% if data %}
-<div id="chart-{{ id }}"{% if include.class %} class="{{ include.class }}"{% endif %}></div>
-{% capture_global scripts %}
+<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
+
+{% capture script %}
 <script>
-document.addEventListener("DOMContentLoaded", function(event) {
-   {% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
-   
-   var chartEl = document.getElementById('chart-{{ id }}');
-   window.ApexCharts && chartEl && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(chartEl, {
-      chart: {
-         type: '{{ data.type }}',
-         height: {{ height | times: 16 }},
-         {% if data.sparkline %}
-         sparkline: {
-            enabled: true
-         },
-         {% endif %}
-         {% if data.stacked %}
-         stacked: true,
-         {% endif %}
-      },
-
-      {% if data.type == 'area' %}
-      fill: {
-        opacity: .16
-      },
-      {% endif %}
-
-      {% if data.title %}
-      title: {
-         text: '{{ data.title | escape }}'
-      },
-      {% endif %}
-
-      {% if data.dashed-history or data.stroke-curve %}
-      stroke: {
-         {% if data.dashed-history %}
-         width: [2, 1],
-            dashArray: [0, 3],
-         {% endif %}
-         {% if data.stroke-curve %}
-         curve: '{{ data.stroke-curve }}',
-         {% endif %}
-      },
-      {% endif %}
-
-      {% if data.series %}
-      {% if data.type == 'pie' or data.type == 'donut' %}
-      series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
-
-      labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
-
-      {% else %}
-      series: [{% for serie in data.series %}{
-         name: '{{ serie.name }}',
-         data: [{{ serie.data | join: ', '}}]
-      }{% unless forloop.last %},{% endunless %}{% endfor %}],
-      {% endif %}
-      {% endif %}
-
-      {% if data.show-grid %}
-      grid: {
-         show: true,
-      },
-      {% endif %}
-
-      {% if data.show-data-labels %}
-      dataLabels: {
-         enabled: true,
-      },
-      {% endif %}
-
-      {% if data.categories or data.days-labels-count %}
-      xaxis: {
-         {% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
-         {% if data.days-labels-count %}type: 'datetime',{% endif %}
-      },
-      {% endif %}
-
-      {% if data.auto-min %}
-      yaxis: {
-         min: function(min) { return min },
-      },
-      {% endif %}
-
-      {% if data.days-labels-count %}
-      labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
-      {% endif %}
-
-      {% if data.rotated %}
-      plotOptions: {
-         bar: {
-            horizontal: true,
-         }
-      },
-      {% endif %}
-
-      {% if data.series %}
-      colors: [ //chart colors
-         {% for serie in data.series %}
-         {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
-      ],
-      {% endif %}
-
-      {% if data.hide-legend %}
-      legend: {
-         show: false, //hide legend
-      },
-      {% endif %}
-
-      {% if data.hide-tooltip %}
-      tooltip: {
-         enabled: false
-      },
-      {% endif %}
-
-      {% if data.hide-points %}
-      point: {
-         show: false
-      },
-      {% endif %}
-
-      {% if data.show-markers %}
-      markers: {
-         size: 2
-      },
-      {% endif %}
-   })).render();
-});
+	document.addEventListener("DOMContentLoaded", function(event) {
+		{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
+
+		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
+			chart: {
+				type: '{{ data.type }}',
+				height: {{ height | times: 16 }},
+		{% if data.sparkline %}
+		sparkline: {
+			enabled: true
+		},
+		{% endif %}
+		{% if data.stacked %}
+		stacked: true,
+		{% endif %}
+	},
+
+		{% if data.type == 'area' %}
+		fill: {
+			opacity: .16
+		},
+		{% endif %}
+
+		{% if data.title %}
+		title: {
+			text: '{{ data.title | escape }}'
+		},
+		{% endif %}
+
+		{% if data.dashed-history or data.stroke-curve %}
+		stroke: {
+			{% if data.dashed-history %}
+			width: [2, 1],
+				dashArray: [0, 3],
+			{% endif %}
+			{% if data.stroke-curve %}
+			curve: '{{ data.stroke-curve }}',
+			{% endif %}
+		},
+		{% endif %}
+
+		{% if data.series %}
+		{% if data.type == 'pie' or data.type == 'donut' %}
+		series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
+
+		labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
+
+		{% else %}
+		series: [{% for serie in data.series %}{
+			name: '{{ serie.name }}',
+				data: [{{ serie.data | join: ', '}}]
+		}{% unless forloop.last %},{% endunless %}{% endfor %}],
+		{% endif %}
+		{% endif %}
+
+		{% if data.show-grid %}
+		grid: {
+			show: true,
+		},
+		{% endif %}
+
+		{% if data.show-data-labels %}
+		dataLabels: {
+			enabled: true,
+		},
+		{% endif %}
+
+		{% if data.categories or data.days-labels-count %}
+		xaxis: {
+			{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
+			{% if data.days-labels-count %}type: 'datetime',{% endif %}
+		},
+		{% endif %}
+
+		{% if data.auto-min %}
+		yaxis: {
+			min: function(min) { return min },
+		},
+		{% endif %}
+
+		{% if data.days-labels-count %}
+		labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
+		{% endif %}
+
+		{% if data.rotated %}
+		plotOptions: {
+			bar: {
+				horizontal: true,
+			}
+		},
+		{% endif %}
+
+		{% if data.series %}
+		colors: [ //chart colors
+			{% for serie in data.series %}
+		{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
+	],
+		{% endif %}
+
+		{% if data.hide-legend %}
+		legend: {
+			show: false, //hide legend
+		},
+		{% endif %}
+
+		{% if data.hide-tooltip %}
+		tooltip: {
+			enabled: false
+		},
+		{% endif %}
+
+		{% if data.hide-points %}
+		point: {
+			show: false
+		},
+		{% endif %}
+
+		{% if data.show-markers %}
+		markers: {
+			size: 2
+		},
+		{% endif %}
+	})).render();
+	});
 </script>
-{% endcapture_global %}
+{% endcapture %}
+
+{% if include.show-scripts %}
+   {{ script }}
+{% else %}
+   {% capture_global scripts %}
+      {{ script }}
+   {% endcapture_global %}
+{% endif %}
+
 {% endif %}

pages/_includes/ui/map.html

@@ -5,7 +5,7 @@
 
 {% if data %}
 <div id="map-{{ id }}" style="height: {{ height }}rem"></div>
-{% capture_global scripts %}
+{% capture script %}
 <script>
 	{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
 
@@ -29,5 +29,13 @@
 		});
 	});
 </script>
-{% endcapture_global %}
+{% endcapture %}
+
+{% if include.show-scripts %}
+   {{ script }}
+{% else %}
+   {% capture_global scripts %}
+      {{ script }}
+   {% endcapture_global %}
+{% endif %}
 {% endif %}