From e67ac93e6cbcc66369e877d5a94e2641d2730e0d Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Fri, 25 May 2018 12:09:30 +0200 Subject: [PATCH] UX: makes table report trend icons as charts This commit will also reverse icon orientation if higher_is_better = false --- .../javascripts/admin/models/report.js.es6 | 48 +++++++++++++------ .../components/admin-report-counts.hbs | 6 +-- .../common/admin/dashboard_next.scss | 35 +++++--------- 3 files changed, 48 insertions(+), 41 deletions(-) diff --git a/app/assets/javascripts/admin/models/report.js.es6 b/app/assets/javascripts/admin/models/report.js.es6 index d7fc55ed1f5..db46a0814b5 100644 --- a/app/assets/javascripts/admin/models/report.js.es6 +++ b/app/assets/javascripts/admin/models/report.js.es6 @@ -80,20 +80,25 @@ const Report = Discourse.Model.extend({ return Ember.makeArray(data).length === 0 ? 0 : parseFloat((total / parseFloat(data.length)).toFixed(1)); }, - @computed("trend") - trendIcon(trend) { - switch (trend) { - case "trending-up": - return "angle-up"; - case "trending-down": - return "angle-down"; - case "high-trending-up": - return "angle-double-up"; - case "high-trending-down": - return "angle-double-down"; - default: - return null; - } + @computed("trend", "higher_is_better") + trendIcon(trend, higherIsBetter) { + return this._iconForTrend(trend, higherIsBetter); + }, + + @computed("sevenDaysTrend", "higher_is_better") + sevenDaysTrendIcon(sevenDaysTrend, higherIsBetter) { + return this._iconForTrend(sevenDaysTrend, higherIsBetter); + }, + + @computed("thirtyDaysTrend", "higher_is_better") + thirtyDaysTrendIcon(thirtyDaysTrend, higherIsBetter) { + return this._iconForTrend(thirtyDaysTrend, higherIsBetter); + }, + + @computed("yesterdayTrend", "higher_is_better") + yesterdayTrendIcon(yesterdayTrend, higherIsBetter) { + console.log("yesterdayTrendIcon", yesterdayTrend, higherIsBetter, this._iconForTrend(yesterdayTrend, higherIsBetter)) + return this._iconForTrend(yesterdayTrend, higherIsBetter); }, @computed("prev_period", "currentTotal", "currentAverage") @@ -216,6 +221,21 @@ const Report = Discourse.Model.extend({ } else if (change < 0) { return higherIsBetter ? "trending-down" : "trending-up"; } + }, + + _iconForTrend(trend, higherIsBetter) { + switch (trend) { + case "trending-up": + return higherIsBetter ? "angle-up" : "angle-down"; + case "trending-down": + return higherIsBetter ? "angle-down" : "angle-up"; + case "high-trending-up": + return higherIsBetter ? "angle-double-up" : "angle-double-down"; + case "high-trending-down": + return higherIsBetter ? "angle-double-down" : "angle-double-up"; + default: + return null; + } } }); diff --git a/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs b/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs index 2dc0600e443..4b4a406c597 100644 --- a/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs +++ b/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs @@ -8,15 +8,15 @@ {{number report.todayCount}} - {{number report.yesterdayCount}} {{d-icon "caret-up" class="up"}} {{d-icon "caret-down" class="down"}} + {{number report.yesterdayCount}} {{d-icon report.yesterdayTrendIcon}} - {{number report.lastSevenDaysCount}} {{d-icon "caret-up" class="up"}} {{d-icon "caret-down" class="down"}} + {{number report.lastSevenDaysCount}} {{d-icon report.sevenDaysTrendIcon}} - {{number report.lastThirtyDaysCount}} {{d-icon "caret-up" class="up"}} {{d-icon "caret-down" class="down"}} + {{number report.lastThirtyDaysCount}} {{d-icon report.thirtyDaysTrendIcon}} {{#if allTime}} diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss index ffc6026e584..815ed101b43 100644 --- a/app/assets/stylesheets/common/admin/dashboard_next.scss +++ b/app/assets/stylesheets/common/admin/dashboard_next.scss @@ -339,7 +339,6 @@ padding: 8px 12px 8px; } i { - display: none; margin-right: -12px; // align on caret @media screen and (max-width: 650px) { margin-right: -9px; @@ -347,22 +346,10 @@ } &.high-trending-up, &.trending-up { - i.up { - color: $success; - display: inline; - } + i { color: $success; } } &.high-trending-down, &.trending-down { - i.down { - color: $danger; - display: inline; - } - } - &.no-change { - i.down { - display: inline; - visibility: hidden; - } + i { color: $danger; } } } } @@ -371,11 +358,11 @@ } .user-metrics { - display: flex; + display: flex; flex-wrap: wrap; justify-content: space-between; margin-left: -5%; - margin: 2em 0 .75em -5%; // Negative margin allows for a margin when in 2-columns, + margin: 2em 0 .75em -5%; // Negative margin allows for a margin when in 2-columns, .dashboard-inline-table { // and "hides" margin when the item spans 100% width flex: 1 0 auto; max-width: 95%; @@ -394,7 +381,7 @@ justify-content: center; border-radius: 9px 0 0 9px; padding: 0 5px 0 8px; - + .d-icon { margin-right: 5px; font-size: $font-down-1; @@ -412,24 +399,24 @@ &.user-basic , &.user-member { border-color: $bronze; .label { - border-color: $bronze; + border-color: $bronze; background: $bronze; color: $secondary; - } + } } &.user-regular { border-color: $silver; .label { - border-color: $silver; + border-color: $silver; background: $silver; color: $secondary; - } + } } - &.user-leader { + &.user-leader { border-color: $gold; .label { background: $gold; - border-color: $gold; + border-color: $gold; color: $secondary; } }