From 9c5888c70893f4ca829ce8efd52384e4937ff22b Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 20 Apr 2020 22:59:31 +0200 Subject: [PATCH] Social referrals chart --- pages/_data/charts.yml | 18 +++++++ pages/_data/colors.yml | 40 ++++++++++----- .../_includes/cards/charts/active-users.html | 30 +++++------ pages/_includes/cards/charts/new-clients.html | 30 +++++------ pages/_includes/cards/charts/revenue.html | 30 +++++------ pages/_includes/cards/charts/sales.html | 28 +++++------ pages/_includes/cards/charts/total-sales.html | 12 ++--- pages/_includes/layout/homepage.html | 14 ++++++ pages/_includes/ui/chart.html | 6 +-- pages/charts.html | 50 +++++++++---------- scss/_debug.scss | 4 ++ scss/ui/_cards.scss | 2 +- scss/ui/_dropdowns.scss | 1 + scss/ui/_icons.scss | 7 +-- scss/vendor/_apexcharts.scss | 5 ++ 15 files changed, 167 insertions(+), 110 deletions(-) diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml index 0ad8b5fe..5c80eac9 100644 --- a/pages/_data/charts.yml +++ b/pages/_data/charts.yml @@ -1,3 +1,21 @@ +social-referrals: + demo: false + type: line + datetime: true + height: 12 + legend: true + show-x: true + series: + - name: Facebook + color: facebook + data: [13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836, 12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508, 13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142, 8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749] + - name: Twitter + color: twitter + data: [3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893, 3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954, 3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954, 5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734] + - name: Dribbble + color: dribbble + data: [722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621, 1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924, 1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150, 654, 1695, 1662, 1285, 1787] + mentions: stacked: true datetime: true diff --git a/pages/_data/colors.yml b/pages/_data/colors.yml index bce3ac2e..2787005d 100644 --- a/pages/_data/colors.yml +++ b/pages/_data/colors.yml @@ -53,16 +53,16 @@ pink-700: '#94415d' pink-800: '#622c3e' pink-900: '#31161f' -red: '#fa4654' -red-100: '#fedadd' -red-200: '#fdb5bb' -red-300: '#fc9098' -red-400: '#fb6b76' -red-500: '#fa4654' -red-600: '#c83843' -red-700: '#962a32' -red-800: '#641c22' -red-900: '#320e11' +red: '#cd201f' +red-100: '#f5d2d2' +red-200: '#eba6a5' +red-300: '#e17979' +red-400: '#d74d4c' +red-500: '#cd201f' +red-600: '#a41a19' +red-700: '#7b1313' +red-800: '#520d0c' +red-900: '#290606' orange: '#ff922b' orange-100: '#ffe9d5' @@ -74,6 +74,7 @@ orange-600: '#cc7522' orange-700: '#99581a' orange-800: '#663a11' orange-900: '#331d09' + yellow: '#fab005' yellow-100: '#feefcd' yellow-200: '#fddf9b' @@ -140,5 +141,20 @@ gray-700: '#7a828f' gray-800: '#545d6d' gray-900: '#354052' -border-color: 'rgba(126, 133, 144, 0.24)' -text-muted: '#7e8590' +border-color: 'rgba(110, 117, 130, 0.2)' +text-muted: '#6e7582' + +facebook: '#3b5998' +twitter: '#1da1f2' +google: '#dc4e41' +youtube: '#ff0000' +vimeo: '#1ab7ea' +dribbble: '#ea4c89' +github: '#181717' +instagram: '#e4405f' +pinterest: '#bd081c' +vk: '#6383a8' +rss: '#ffa500' +flickr: '#0063dc' +bitbucket: '#0052cc' +tabler: '#206bc4' diff --git a/pages/_includes/cards/charts/active-users.html b/pages/_includes/cards/charts/active-users.html index a5595332..666f8bc8 100644 --- a/pages/_includes/cards/charts/active-users.html +++ b/pages/_includes/cards/charts/active-users.html @@ -1,18 +1,18 @@
-
-
-
Active users
-
- {% include parts/dropdown/days.html %} -
-
-
-
2,986
-
- {% include ui/trending.html value=4 %} -
-
+
+
+
Active users
+
+ {% include parts/dropdown/days.html %} +
+
+
+
2,986
+
+ {% include ui/trending.html value=4 %} +
+
- {% include ui/chart.html chart-id="active-users" size="sm" %} -
+ {% include ui/chart.html chart-id="active-users" size="sm" %} +
diff --git a/pages/_includes/cards/charts/new-clients.html b/pages/_includes/cards/charts/new-clients.html index 9228873c..1388ca1c 100644 --- a/pages/_includes/cards/charts/new-clients.html +++ b/pages/_includes/cards/charts/new-clients.html @@ -1,18 +1,18 @@
-
-
-
New clients
-
- {% include parts/dropdown/days.html %} -
-
-
-
6,782
-
- {% include ui/trending.html value=0 %} -
-
+
+
+
New clients
+
+ {% include parts/dropdown/days.html %} +
+
+
+
6,782
+
+ {% include ui/trending.html value=0 %} +
+
- {% include ui/chart.html chart-id="new-clients" size="sm" %} -
+ {% include ui/chart.html chart-id="new-clients" size="sm" %} +
diff --git a/pages/_includes/cards/charts/revenue.html b/pages/_includes/cards/charts/revenue.html index 2e6f7d63..369dcf0b 100644 --- a/pages/_includes/cards/charts/revenue.html +++ b/pages/_includes/cards/charts/revenue.html @@ -1,17 +1,17 @@
-
-
-
Revenue
-
- {% include parts/dropdown/days.html %} -
-
-
-
$4,300
-
- {% include ui/trending.html value=8 %} -
-
-
- {% include ui/chart.html chart-id="revenue-bg" size="sm" %} +
+
+
Revenue
+
+ {% include parts/dropdown/days.html %} +
+
+
+
$4,300
+
+ {% include ui/trending.html value=8 %} +
+
+
+ {% include ui/chart.html chart-id="revenue-bg" size="sm" %}
diff --git a/pages/_includes/cards/charts/sales.html b/pages/_includes/cards/charts/sales.html index 1e496179..002ba7ac 100644 --- a/pages/_includes/cards/charts/sales.html +++ b/pages/_includes/cards/charts/sales.html @@ -1,16 +1,16 @@
-
-
-
Sales
-
- {% include parts/dropdown/days.html %} -
-
-
75%
-
-
Conversion rate
-
{% include ui/trending.html value=7 %}
-
- {% include ui/progress.html value=75 color="blue" size="sm" %} -
+
+
+
Sales
+
+ {% include parts/dropdown/days.html %} +
+
+
75%
+
+
Conversion rate
+
{% include ui/trending.html value=7 %}
+
+ {% include ui/progress.html value=75 color="blue" size="sm" %} +
diff --git a/pages/_includes/cards/charts/total-sales.html b/pages/_includes/cards/charts/total-sales.html index ae44620a..1fbc2b9f 100644 --- a/pages/_includes/cards/charts/total-sales.html +++ b/pages/_includes/cards/charts/total-sales.html @@ -1,9 +1,9 @@
-
- {% include ui/card-dropdown.html %} -

Total sales

+
+ {% include ui/card-dropdown.html %} +

Total sales

- {% include ui/chart.html chart-id="total-sales" height=15 %} - {% include ui/chart.html chart-id="campaigns" height=15 %} -
+ {% include ui/chart.html chart-id="total-sales" height=15 %} + {% include ui/chart.html chart-id="campaigns" height=15 %} +
diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html index f8f6963e..eef5ca81 100644 --- a/pages/_includes/layout/homepage.html +++ b/pages/_includes/layout/homepage.html @@ -26,6 +26,20 @@ {% include cards/map.html title="Top countries" %} +
+
+
+
+

Social referrals

+
+ {% include parts/dropdown/days.html %} +
+
+ {% include ui/chart.html chart-id="social-referrals" legend=true %} +
+
+
+
diff --git a/pages/_includes/ui/chart.html b/pages/_includes/ui/chart.html index 685e3e8d..7ab5c6e6 100644 --- a/pages/_includes/ui/chart.html +++ b/pages/_includes/ui/chart.html @@ -1,6 +1,6 @@ {% assign data = site.data.charts[include.chart-id] %} {% assign id = include.id | default: include.chart-id %} -{% assign height = include.height | default: 10 %} +{% assign height = include.height | default: data.height | default: 10 %} {% assign class = include.class %} {% if include['size'] == 'sm' %} @@ -16,7 +16,7 @@ {% assign data = site.data.charts[data.extend] | concat_objects: site.data.charts[include.chart-id] %} {% endif %} -
+
{% capture script %} {% assign chart-type = data.type | default: 'bar' %} @@ -118,7 +118,7 @@ top: -20, right: 0, left: -4, - bottom: -8 + bottom: -4 }, {% endunless %} {% if data.hide-grid %} diff --git a/pages/charts.html b/pages/charts.html index 5a8d15ab..9146faa5 100644 --- a/pages/charts.html +++ b/pages/charts.html @@ -6,31 +6,29 @@ libs: apexcharts ---
-
-
-
- {% include ui/chart.html chart-id="tasks-overview" height=20 %} -
-
-
- - {% for chart in site.data.charts %} - {% if chart[1].demo %} - {% assign chart-id = chart[0] %} -
-
- {% if chart[1].name %} -
-

{{ chart[1].name }}

-
- {% endif %} -
- {% include ui/chart.html chart-id=chart-id height=15 %} -
-
-
- {% endif %} - {% endfor %} - +
+
+
+ {% include ui/chart.html chart-id="tasks-overview" height=20 %} +
+
+
+ {% for chart in site.data.charts %} + {% if chart[1].demo %} + {% assign chart-id = chart[0] %} +
+
+ {% if chart[1].name %} +
+

{{ chart[1].name }}

+
+ {% endif %} +
+ {% include ui/chart.html chart-id=chart-id height=15 %} +
+
+
+ {% endif %} + {% endfor %}
diff --git a/scss/_debug.scss b/scss/_debug.scss index 430bb411..d07d09d8 100644 --- a/scss/_debug.scss +++ b/scss/_debug.scss @@ -29,6 +29,10 @@ $debug: false; @debug ("border-color: '#{$border-color}'"); @debug ("text-muted: '#{$text-muted}'"); + + @each $name, $color in $social-colors { + @debug ("#{$name}: '#{$color}'"); + } } diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index 8bd76383..a77ce1e7 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -166,7 +166,7 @@ font-size: $h3-font-size; font-weight: $headings-font-weight; color: $headings-color; - line-height: (24/18); + line-height: 1.5rem; @at-root a#{&}:hover { color: inherit; diff --git a/scss/ui/_dropdowns.scss b/scss/ui/_dropdowns.scss index 1f154685..5103e990 100644 --- a/scss/ui/_dropdowns.scss +++ b/scss/ui/_dropdowns.scss @@ -20,6 +20,7 @@ display: flex; align-items: center; margin: 0; + line-height: $line-height-base; } .dropdown-item-icon { diff --git a/scss/ui/_icons.scss b/scss/ui/_icons.scss index cd10ac5d..03b354fa 100644 --- a/scss/ui/_icons.scss +++ b/scss/ui/_icons.scss @@ -1,7 +1,8 @@ .icon { - width: 1em; - height: 1em; - font-size: 1em; + width: 1rem; + height: 1rem; + font-size: 1rem; + vertical-align: text-bottom; &:hover { text-decoration: none; diff --git a/scss/vendor/_apexcharts.scss b/scss/vendor/_apexcharts.scss index 54ff8057..c72ccd3f 100644 --- a/scss/vendor/_apexcharts.scss +++ b/scss/vendor/_apexcharts.scss @@ -41,3 +41,8 @@ .apexcharts-xaxis-tick { stroke: $gray-300; } + +.apexcharts-yaxis-label, +.apexcharts-xaxis-label { + fill: $text-muted; +} -- GitLab