diff --git a/js/tabler-charts.js b/js/tabler-charts.js index 10a378e7f..79f2157ac 100644 --- a/js/tabler-charts.js +++ b/js/tabler-charts.js @@ -46,7 +46,7 @@ if (window.Apex) { window.Apex = { chart: { fontFamily: 'inherit', - foreColor: 'inherit', + foreColor: 'currentColor', toolbar: { show: false, }, @@ -124,8 +124,10 @@ if (window.Apex) { title: { margin: 0, + floating: true, + offsetX: 10, style: { - fontSize: '14px', + fontSize: '18px', }, }, diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml index adba95c84..75c2c4e2f 100644 --- a/pages/_data/charts.yml +++ b/pages/_data/charts.yml @@ -21,12 +21,14 @@ tasks: development-activity: name: Development Activity + title: Development Activity type: area groups: [1, 2, 3] hide-points: true hide-tooltip: true remove-padding: true legend-position: 'top' + sparkline: true series: - name: 'Purchases' color: blue diff --git a/pages/_data/orders.yml b/pages/_data/orders.yml new file mode 100644 index 000000000..7bee7a9a0 --- /dev/null +++ b/pages/_data/orders.yml @@ -0,0 +1,15 @@ +- title: Wordpress Plugins + subtitle: HTML, CSS, PHP + color: blue +- title: HTML Templates + subtitle: HTML, CSS, Javascript + color: red +- title: Mobile Apps + subtitle: React Native + color: green +- title: Back-end Plugins + subtitle: Ruby, PHP + color: yellow +- title: Other + subtitle: C#, ASP.NET + color: dark diff --git a/pages/_docs/charts.md b/pages/_docs/charts.md index fd473069e..dc254571f 100644 --- a/pages/_docs/charts.md +++ b/pages/_docs/charts.md @@ -18,7 +18,7 @@ menu: docs.charts
- {% include js/charts.html id=key chart-id=data %} + {% include ui/chart.html id=key chart-id=data %} {% endexample %} {% endif %} {% endfor %} diff --git a/pages/_includes/cards/charts/active-users.html b/pages/_includes/cards/charts/active-users.html new file mode 100644 index 000000000..8588f0427 --- /dev/null +++ b/pages/_includes/cards/charts/active-users.html @@ -0,0 +1,18 @@ +
+
+
+
Active users
+
+ {% include parts/dropdown/days.html %} +
+
+
+
2,986
+
+ {% include ui/trending.html value=4 %} +
+
+ + {% include ui/chart.html chart-id="active-users" class="chart-sm" %} +
+
diff --git a/pages/_includes/cards/charts/card.html b/pages/_includes/cards/charts/card.html index 4585fd5bb..65610037c 100644 --- a/pages/_includes/cards/charts/card.html +++ b/pages/_includes/cards/charts/card.html @@ -1,17 +1,10 @@ -{% if include.data %} -{% assign data = include.data %} -{% else %} -{% assign data = site.data.charts[include.name] %} -{% endif %} -{% assign key = 'chart-' | append: include.name %} +{% assign data = site.data.charts[include.chart-id] %} +{% assign height = include.height | default: 10 %}
- {% unless include.hide-title %} -
-

{{ include.title | default: data.name }}

-
- {% endunless %}
-
+ {% if include.title %} +

{{ include.title }}

+ {% endif %} + {% include ui/chart.html height=height chart-id=include.chart-id %}
-{% include js/charts.html id=key chart-id=include.name %} diff --git a/pages/_includes/cards/charts/new-clients.html b/pages/_includes/cards/charts/new-clients.html new file mode 100644 index 000000000..444267b23 --- /dev/null +++ b/pages/_includes/cards/charts/new-clients.html @@ -0,0 +1,18 @@ +
+
+
+
New clients
+
+ {% include parts/dropdown/days.html %} +
+
+
+
6,782
+
+ {% include ui/trending.html value=0 %} +
+
+ + {% include ui/chart.html chart-id="new-clients" class="chart-sm" %} +
+
diff --git a/pages/_includes/cards/charts/revenue.html b/pages/_includes/cards/charts/revenue.html index cb2dfd296..00f2f8a1b 100644 --- a/pages/_includes/cards/charts/revenue.html +++ b/pages/_includes/cards/charts/revenue.html @@ -8,11 +8,10 @@
$4,300
-
- 24% {% include ui/icon.html icon="trending-up" class="icon-thin" %} +
+ {% include ui/trending.html value=8 %}
-
- {% include js/charts.html id="card-chart-1" chart-id="revenue-bg" %} + {% include ui/chart.html chart-id="revenue-bg" class="card-chart" %} diff --git a/pages/_includes/cards/charts/sales.html b/pages/_includes/cards/charts/sales.html index a57482301..fba63825c 100644 --- a/pages/_includes/cards/charts/sales.html +++ b/pages/_includes/cards/charts/sales.html @@ -9,9 +9,7 @@
75%
Conversion rate
-
- 24% {% include ui/icon.html icon="trending-up" class="icon-thin" %} -
+
{% include ui/trending.html value=7 %}
{% include ui/progress.html percentage=75 color="blue" size="sm" %} diff --git a/pages/_includes/cards/company-employees.html b/pages/_includes/cards/company-employees.html index 7dabfb7b9..18c2aba89 100644 --- a/pages/_includes/cards/company-employees.html +++ b/pages/_includes/cards/company-employees.html @@ -12,7 +12,7 @@ {% for person in site.data.people limit: 5 offset: 20 %} - {% include ui/avatar.html src=person.photo %} + {% include ui/avatar.html src=person.photo %} {{ person.full_name }} {{ person.department }} {{ forloop.index | random_number: 30, 90 }}% diff --git a/pages/_includes/cards/development-activity.html b/pages/_includes/cards/development-activity.html new file mode 100644 index 000000000..c07357d5b --- /dev/null +++ b/pages/_includes/cards/development-activity.html @@ -0,0 +1,58 @@ +
+ {% include ui/chart.html chart-id="development-activity" height=10 class="mt-4" %} + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UserCommitDate
+ {% include ui/avatar.html person-id=10 %} + {{ site.data.people[10].full_name }}Initial commitMay 6, 2019
+ {% include ui/avatar.html person-id=17 %} + {{ site.data.people[17].full_name }}Main structureApril 22, 2019
+ {% include ui/avatar.html person-id=16 %} + {{ site.data.people[16].full_name }}Left sidebar adjustmentsApril 15, 2019
+ {% include ui/avatar.html person-id=12 %} + {{ site.data.people[12].full_name }}Topbar dropdown styleApril 8, 2019
+ {% include ui/avatar.html person-id=19 %} + {{ site.data.people[19].full_name }}Fixes #625April 9, 2019
+
+
+ diff --git a/pages/_includes/cards/invoices.html b/pages/_includes/cards/invoices.html index 48621847e..c6cbf2be9 100644 --- a/pages/_includes/cards/invoices.html +++ b/pages/_includes/cards/invoices.html @@ -6,7 +6,8 @@ - + + @@ -20,6 +21,7 @@ {% for invoice in site.data.invoices limit: 5 %} + diff --git a/pages/_includes/cards/map.html b/pages/_includes/cards/map.html index c0f0e988e..bd7766125 100644 --- a/pages/_includes/cards/map.html +++ b/pages/_includes/cards/map.html @@ -7,6 +7,6 @@ {% endif %}
- {% include ui/map.html map=map color="blue" %} + {% include ui/map.html map-id=map color="blue" %}
diff --git a/pages/_includes/cards/order-statistics.html b/pages/_includes/cards/order-statistics.html new file mode 100644 index 000000000..a82392ed1 --- /dev/null +++ b/pages/_includes/cards/order-statistics.html @@ -0,0 +1,27 @@ +
+
+ +
Total orders
+ +
+
2,137
+
{% include ui/trending.html value=7 %}
+
+ + {% include ui/progress.html values="40,15,25,15,5" class="mb-4" %} + + +
+ +
diff --git a/pages/_includes/cards/small-stats.html b/pages/_includes/cards/small-stats.html index 9500c865d..7c68c4c77 100644 --- a/pages/_includes/cards/small-stats.html +++ b/pages/_includes/cards/small-stats.html @@ -1,7 +1,7 @@ {% assign chart-type = include.chart-type | default: 'line' %} {% assign chart-position = include.chart-position | default: 'right' %}
-
+
{% if include.icon %} {% include ui/icon.html icon=include.icon %} {% elsif include.person-id %} diff --git a/pages/_includes/layout/css.html b/pages/_includes/layout/css.html index dc681ccf7..9743cdf14 100644 --- a/pages/_includes/layout/css.html +++ b/pages/_includes/layout/css.html @@ -6,8 +6,8 @@ {% endif %} - + - - + + diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html index 289d9dcf8..7c5670502 100644 --- a/pages/_includes/layout/homepage.html +++ b/pages/_includes/layout/homepage.html @@ -6,47 +6,11 @@ {% include cards/charts/revenue.html %}
-
-
-
-
New clients
-
- {% include parts/dropdown/days.html %} -
-
-
-
6,782
-
- 5% {% include ui/icon.html icon="trending-down" class="icon-thin" %} -
-
- -
- {% include js/charts.html id="chart-active-users" chart-id="new-clients" %} -
-
+ {% include cards/charts/new-clients.html %}
-
-
-
-
Active users
-
- {% include parts/dropdown/days.html %} -
-
-
-
2,986
-
- 4% {% include ui/icon.html icon="trending-up" class="icon-thin" %} -
-
- -
- {% include js/charts.html id="chart-active-users2" chart-id="active-users" %} -
-
+ {% include cards/charts/active-users.html %}
@@ -73,21 +37,26 @@ {% include cards/map.html title="Top users" %}
-
- {% include cards/charts/card.html name="temperature" title="A" height=12 %} +
+ {% include cards/development-activity.html %}
-
- {% include cards/charts/card.html name="donut" title="B" height=12 %} -
-
- {% include cards/charts/card.html name="pie" title="C" height=12 %} +
+
+
+ {% include cards/charts/card.html chart-id="temperature" height=10 %} +
+
+ {% include cards/charts/card.html chart-id="donut" height=10 %} +
+
{% comment %} -
- {% comment %}{% include cards/development-activity.html %}{% endcomment %} +
+ {% include cards/order-statistics.html %}
+
Are you in trouble? Read our documentation with code samples.
diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html index 928740860..aaaddb1ca 100644 --- a/pages/_includes/layout/js.html +++ b/pages/_includes/layout/js.html @@ -16,3 +16,7 @@ + +{% removeemptylines %} +{{ site.capture_global.scripts }} +{% endremoveemptylines %} diff --git a/pages/_includes/js/charts.html b/pages/_includes/ui/chart.html similarity index 83% rename from pages/_includes/js/charts.html rename to pages/_includes/ui/chart.html index 56cff6889..f629620bb 100644 --- a/pages/_includes/js/charts.html +++ b/pages/_includes/ui/chart.html @@ -1,14 +1,16 @@ -{% capture_global scripts %} -{% removeemptylines %} {% assign data = site.data.charts[include.chart-id] %} +{% assign id = include.id | default: include.chart-id %} +{% assign height = include.height %} {% if data %} +
+{% capture_global scripts %} -{% endif %} -{% endremoveemptylines %} {% endcapture_global %} +{% endif %} diff --git a/pages/_includes/ui/map.html b/pages/_includes/ui/map.html index e6ad76b9b..cf82165a1 100644 --- a/pages/_includes/ui/map.html +++ b/pages/_includes/ui/map.html @@ -1,4 +1,4 @@ -{% assign id = include.map %} +{% assign id = include.map-id %} {% assign height = include.height | default: 20 %} {% assign data = site.data.maps[id] %} {% assign color = include.color | default: data.color | default: 'green' %} @@ -7,8 +7,10 @@
{% capture_global scripts %} diff --git a/pages/_plugins/jekyll-humanize.rb b/pages/_plugins/jekyll-humanize.rb new file mode 100644 index 000000000..0eb1fb356 --- /dev/null +++ b/pages/_plugins/jekyll-humanize.rb @@ -0,0 +1,257 @@ +module Jekyll + + module Humanize + ## + # This is a port of the Django app `humanize` which adds a "human touch" + # to data. Given that Jekyll produces static sites, some of the original + # methods do not make logical sense (e.g. naturaltime). + # + # Source code can be viewed here: + # https://github.com/django/django + # + # Copyright (c) Django Software Foundation and individual contributors. + # All rights reserved. + + #################### + # PUBLIC METHODS # + #################### + + def ordinal(value, flag=nil) + ## + # Converts an integer to its ordinal as a string. 1 is '1st', 2 is '2nd', + # 3 is '3rd', etc. Works for any integer. + # + # Usage: + # {{ somenum }} >>> 3 + # {{ somenum | ordinal }} >>> '3rd' + # {{ somenum | ordinal: "super" }} >>> '3rd' + + begin + value = value.to_i + flag.to_s.downcase! + rescue Exception => e + puts "#{e.class} #{e}" + return value + end + + suffix = "" + suffixes = ["th", "st", "nd", "rd", "th", "th", "th", "th", "th", "th"] + unless [11, 12, 13].include? value % 100 then + suffix = suffixes[value % 10] + else + suffix = suffixes[0] + end + + unless flag and flag == "super" + return "#{value}%s" % suffix + else + return "#{value}%s" % suffix + end + + end + + def intcomma(value, delimiter=",") + ## + # Converts an integer to a string containing commas every three digits. + # For example, 3000 becomes '3,000' and 45000 becomes '45,000'. + # Optionally supports a delimiter override for commas. + # + # Usage: + # {{ post.content | number_of_words }} >>> 12345 + # {{ post.content | number_of_words | intcomma }} >>> '12,345' + # {{ post.content | number_of_words | intcomma: '.' }} >>> '12.345' + + begin + orig = value.to_s + delimiter = delimiter.to_s + rescue Exception => e + puts "#{e.class} #{e}" + return value + end + + copy = orig.strip + copy = orig.gsub(/^(-?\d+)(\d{3})/, "\\1#{delimiter}\\2") + orig == copy ? copy : intcomma(copy, delimiter) + end + + INTWORD_HELPERS = [ + [6, "million"], + [9, "billion"], + [12, "trillion"], + [15, "quadrillion"], + [18, "quintillion"], + [21, "sextillion"], + [24, "septillion"], + [27, "octillion"], + [30, "nonillion"], + [33, "decillion"], + [100, "googol"], + ] + + def intword(value) + ## + # Converts a large integer to a friendly text representation. Works best + # for numbers over 1 million. For example, 1000000 becomes '1.0 million', + # 1200000 becomes '1.2 million' and 1200000000 becomes '1.2 billion'. + # + # Usage: + # {{ largenum }} >>> 1200000 + # {{ largenum | intword }} >>> '1.2 million' + + begin + value = value.to_i + rescue Exception => e + puts "#{e.class} #{e}" + return value + end + + if value < 1000000 + return value + end + + for exponent, text in INTWORD_HELPERS + large_number = 10 ** exponent + + if value < large_number * 1000 + return "%#{value}.1f #{text}" % (value / large_number.to_f) + end + + end + + return value + end + + def apnumber(value) + ## + # For numbers 0-9, returns the number spelled out. Otherwise, returns the + # number. This follows Associated Press style. + # + # Usage: + # {{ num }} >>> 6 + # {{ num | apnumber }} >>> six + + begin + value = value.to_i + rescue Exception => e + puts "#{e.class} #{e}" + return value + end + + unless value >= 0 and value < 10 then + return value + else + return ["zero", "one", "two", "three", "four", "five", "six", + "seven", "eight", "nine"][value] + end + + end + + def naturalday(date) + ## + # For date values that are within a 9 day stretch from present day, this + # will attempt to return the string representation in the format of today, + # tomorrow, yesterday, "in # days" or "# days ago". Otherwise, returns a + # string formatted according to the "date_format" setting in your + # _config.yml file using strftime format (if not defined, it will default + # to "%m/%d/%Y"). + # + # Usage: + # TODAY == 01/26/2014 + # {{ post.updated }} >>> 01/25/2014 + # {{ post.updated | naturalday }} >>> 'yesterday' + # {{ post.date }} >>> 01/19/2014 + # {{ post.date | naturalday }} >>> 'seven days ago' + + begin + site = @context.registers[:site] + date_format = site.config['humanize']['date_format'] + date = time(date).to_date + rescue Exception => e + puts "#{e.class} #{e}" + return date + end + + unless date_format then + date_format = "%m/%d/%Y" + end + + today = time(Time.now).to_date + delta = (date - today).to_i + + case delta + when 0 + return "today" + when 1 + return "tomorrow" + when 2..9 + delta = apnumber(delta) + return "in #{delta} days" + when -1 + return "yesterday" + when -9..-2 + delta = apnumber(delta * -1) + return "#{delta} days ago" + else + return date.strftime("#{date_format}") + end + + end + + def filesize(value) + ## + # For filesize values in bytes, returns the number rounded to 3 + # decimal places with the correct suffix. + # + # Usage: + # {{ bytes }} >>> 123456789 + # {{ bytes | filesize }} >>> 117.738 MB + filesize_tb = 1099511627776.0 + filesize_gb = 1073741824.0 + filesize_mb = 1048576.0 + filesize_kb = 1024.0 + + begin + value = value.to_f + rescue Exception => e + puts "#{e.class} #{e}" + return value + end + + if value >= filesize_tb + return "%s TB" % (value / filesize_tb).to_f.round(3) + elsif value >= filesize_gb + return "%s GB" % (value / filesize_gb).to_f.round(3) + elsif value >= filesize_mb + return "%s MB" % (value / filesize_mb).to_f.round(3) + elsif value >= filesize_kb + return "%s KB" % (value / filesize_kb).to_f.round(0) + elsif value == 1 + return "1 byte" + else + return "%s bytes" % value.to_f.round(0) + end + + end + + ##################### + # PRIVATE METHODS # + ##################### + + private + def time(input) + case input + when Time + input + when String + Time.parse(input) + else + Jekyll.logger.error "Invalid Date:", "'#{input}' not valid datetime." + exit(1) + end + end + + end + +end + +Liquid::Template.register_filter(Jekyll::Humanize) diff --git a/pages/charts.html b/pages/charts.html index 356ffa3b0..1f26188a9 100644 --- a/pages/charts.html +++ b/pages/charts.html @@ -7,9 +7,8 @@ menu: charts {% for chart in site.data.charts %} {% if chart[1].display %} {% assign chart-name = chart[0] %} - {% assign chart-data = chart[1] %}
- {% include cards/charts/card.html name=chart-name data=chart-data %} + {% include cards/charts/card.html chart-id=chart-name %}
{% endif %} {% endfor %} diff --git a/pages/maps.html b/pages/maps.html index de971f190..7231bfd42 100644 --- a/pages/maps.html +++ b/pages/maps.html @@ -10,7 +10,7 @@ page-title: Maps
{% assign id = map[0] %} - {% include ui/map.html map=id %} + {% include ui/map.html map-id=id %}
diff --git a/pages/users-list.html b/pages/users-list.html index c49e6534d..194b01a6c 100644 --- a/pages/users-list.html +++ b/pages/users-list.html @@ -56,8 +56,8 @@ done: true
No.No. Invoice Subject Client VAT No.
00{{ forloop.index | plus: 1400 }} {{ invoice.name }} @@ -38,9 +40,9 @@ {{ invoice.price }} - Manage - + + {% include ui/dropdown-menu.html %}
- - + + diff --git a/scss/tabler.scss b/scss/tabler.scss index 45d21bf0f..1e69217d4 100644 --- a/scss/tabler.scss +++ b/scss/tabler.scss @@ -31,6 +31,7 @@ @import "ui/forms/input.imagecheck"; @import "ui/forms/input.selectgroup"; @import "ui/forms/input.custom"; +@import "ui/legend"; @import "ui/lists"; @import "ui/loaders"; @import "ui/login"; @@ -51,6 +52,7 @@ @import "vendor/pace"; @import "vendor/selectize"; @import "vendor/jqvmap"; +@import "vendor/apexcharts"; @import "utils/border"; @import "utils/background"; diff --git a/scss/ui/_icons.scss b/scss/ui/_icons.scss index 154ebd2d4..8f5a5835c 100644 --- a/scss/ui/_icons.scss +++ b/scss/ui/_icons.scss @@ -12,6 +12,10 @@ fill: currentColor; } +.icon-thin { + stroke-width: 1.5; +} + .icon-md { font-size: px2rem(20px); } diff --git a/scss/ui/_legend.scss b/scss/ui/_legend.scss new file mode 100644 index 000000000..f794c87ea --- /dev/null +++ b/scss/ui/_legend.scss @@ -0,0 +1,7 @@ +.legend { + display: inline-block; + background: $gray-300; + width: .75em; + height: .75em; + border-radius: $border-radius; +} diff --git a/scss/ui/_stamps.scss b/scss/ui/_stamps.scss index 7e46d22ba..43c83f256 100644 --- a/scss/ui/_stamps.scss +++ b/scss/ui/_stamps.scss @@ -1,5 +1,8 @@ .stamp { - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: px2rem(40px); height: px2rem(40px); padding: 0 .25rem; diff --git a/scss/vendor/_apexcharts.scss b/scss/vendor/_apexcharts.scss new file mode 100644 index 000000000..02cb07c5f --- /dev/null +++ b/scss/vendor/_apexcharts.scss @@ -0,0 +1,3 @@ +.apexcharts-title-text { + font-weight: 600; +}
Name Date Amount