cards components, charts fixes

.github/no-response.yml

@@ -0,0 +1,10 @@
+# Configuration for probot-no-response - https://github.com/probot/no-response
+
+daysUntilClose: 28
+
+closeComment: >
+  This issue has been automatically closed because there has been no response
+  to our request for more information from the original author. With only the
+  information that is currently in the issue, we don't have enough information
+  to take action. Please reach out if you have or find the answers we need so
+  that we can investigate further.

js/tabler-charts.js

@@ -84,6 +84,9 @@ if (window.Apex) {
         dataLabels: {
           minAngleToShowLabel: 10,
         },
+        donut: {
+          size: '80%'
+        }
       },
     },
 
@@ -91,6 +94,7 @@ if (window.Apex) {
       width: 2,
       curve: 'smooth',
       lineCap: "round",
+      colors: ["transparent"]
     },
 
     fill: {

pages/_data/charts.yml

@@ -1,3 +1,39 @@
+total-sales:
+  type: donut
+  sparkline: true
+  hide-legend: true
+  series:
+    - name: Direct
+      color: blue
+      data: 44
+    - name: Affilliate
+      color: green
+      data: 55
+    - name: Sponsored
+      color: red
+      data: 35
+    - name: E-mail
+      color: yellow
+      data: 12
+
+total-sales2:
+  type: radalBar
+  sparkline: true
+  hide-legend: true
+  series:
+    - name: Direct
+      color: blue
+      data: 44
+    - name: Affilliate
+      color: green
+      data: 55
+    - name: Sponsored
+      color: red
+      data: 35
+    - name: E-mail
+      color: yellow
+      data: 12
+
 tasks:
   name: Tasks
   type: line
@@ -241,16 +277,16 @@ pie:
   series:
     - name: A
       color: blue-darker
-      data: [63]
+      data: 63
     - name: B
       color: blue
-      data: [44]
+      data: 44
     - name: C
       color: blue-light
-      data: [12]
+      data: 12
     - name: D
       color: blue-lighter
-      data: [14]
+      data: 14
 
 donut:
   name: Lorem ipsum
@@ -261,10 +297,10 @@ donut:
   series:
     - name: Maximum
       color: green
-      data: [63]
+      data: 63
     - name: Minimum
       color: green-light
-      data: [37]
+      data: 37
 
 
 scatter:
@@ -376,14 +412,13 @@ devices:
   type: donut
   sparkline: true
   hide-legend: true
-  sparkline: true
   series:
     - name: a
       color: blue-dark
-      data: [23]
+      data: 23
     - name: b
       color: blue
-      data: [54]
+      data: 54
     - name: c
       color: blue-light
-      data: [34]
+      data: 34

pages/_includes/cards/charts/total-sales.html

@@ -0,0 +1,9 @@
+<div class="card">
+   <div class="card-body">
+      {% include ui/card-dropdown.html %}
+      <h3 class="card-title">Total sales</h3>
+
+      {% include ui/chart.html chart-id="total-sales" height=15 %}
+      {% include ui/chart.html chart-id="total-sales2" height=15 %}
+   </div>
+</div>

pages/_includes/ui/card-dropdown.html

@@ -0,0 +1,12 @@
+{% assign menu = include.menu | default: 'Import,Export,Download,Another action' | split: ',' %}
+{% assign icon = include.icon | default: 'more-horizontal' %}
+<div class="dropdown float-right">
+   <a href="#" class="card-drop" data-toggle="dropdown" aria-expanded="false">
+      {% include_cached ui/icon.html icon=icon %}
+   </a>
+   <div class="dropdown-menu dropdown-menu-right">
+      {% for item in menu %}
+      <a href="#" class="dropdown-item">{{ item }}</a>
+      {% endfor %}
+   </div>
+</div>

pages/_includes/ui/chart.html

@@ -1,9 +1,9 @@
 {% assign data = site.data.charts[include.chart-id] %}
 {% assign id = include.id | default: include.chart-id %}
-{% assign height = include.height %}
+{% assign height = include.height | default: 10 %}
 
 {% if data %}
-<div id="chart-{{ id }}"{% if include.class %} class="{{ include.class }}"{% endif %}{% if height %} style="height: {% if height == '100%' %}100%{% else %}{{ height }}rem{% endif %}"{% endif %}></div>
+<div id="chart-{{ id }}"{% if include.class %} class="{{ include.class }}"{% endif %}></div>
 {% capture_global scripts %}
 <script>
 document.addEventListener("DOMContentLoaded", function(event) {
@@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
    window.ApexCharts && chartEl && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(chartEl, {
       chart: {
          type: '{{ data.type }}',
-         height: chartEl.offsetHeight,
+         height: {{ height | times: 16 }},
          {% if data.sparkline %}
          sparkline: {
             enabled: true
@@ -50,7 +50,10 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
       {% if data.series %}
       {% if data.type == 'pie' or data.type == 'donut' %}
-      series: [{% for serie in data.series %}{{ serie.data[0] }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
+      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 }}',
@@ -59,12 +62,6 @@ document.addEventListener("DOMContentLoaded", function(event) {
       {% endif %}
       {% endif %}
 
-      {% if data.type == 'pie' or data.type == 'donut' %}
-      pie: {
-         height: chartEl.offsetHeight
-      },
-      {% endif %}
-
       {% if data.show-grid %}
       grid: {
          show: true,
@@ -103,7 +100,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
       {% endif %}
 
       {% if data.series %}
-      colors: [ {% for serie in data.series %}
+      colors: [ //chart colors
+         {% for serie in data.series %}
          {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
       ],
       {% endif %}

pages/_includes/ui/trending.html

@@ -11,5 +11,5 @@
 {% endif %}
 
 <span class="text-{{ color }} d-inline-flex align-items-center leading-none{% if include.class %} {{ include.class }}{% endif %}">
-   {{ value }}% {% include_cached ui/icon.html icon=icon class="icon-thin" %}
+   {{ value }}% {% include_cached ui/icon.html icon=icon class="icon-thin" class="ml-1" %}
 </span>

pages/tmp.html

@@ -1,6 +1,14 @@
 ---
 ---
 
+<div class="row">
+   <div class="col-4">
+      {% include cards/charts/total-sales.html %}
+   </div>
+   <div class="col-8">
+
+   </div>
+</div>
 <div class="row">
    <div class="col-md-6">
       {% include cards/user-info.html %}

scss/ui/_cards.scss

@@ -89,7 +89,7 @@
 .card-cover {
   position: relative;
   padding: $card-spacer-y $card-spacer-x;
-  background: #666 no-repeat center/cover;
+  background: #666666 no-repeat center/cover;
 
   &::before {
     position: absolute;
@@ -198,6 +198,17 @@ Card optinos
   color: $text-muted;
 }
 
+.card-drop {
+  line-height: 1;
+  color: $text-muted;
+
+  .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    stroke-width: 1;
+  }
+}
+
 /**
 Card status
  */
@@ -275,7 +286,7 @@ Card code
 
   pre {
     margin: 0;
-    color: #fff;
+    color: #ffffff;
     text-shadow: none;
     background: transparent;
   }
@@ -304,7 +315,7 @@ Card profile
   max-width: 6rem;
   margin-top: -5rem;
   margin-bottom: 1rem;
-  border: 3px solid #fff;
+  border: 3px solid #ffffff;
   border-radius: 100%;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
 }