From aea6cf991c184a512a1a8f8f4b91445107efc054 Mon Sep 17 00:00:00 2001 From: Lucas Brown Date: Mon, 5 Aug 2019 20:02:57 -0800 Subject: [PATCH] Updated the dashboard page to include overview and examples. --- .gitignore | 1 + .../static/assets/js/demo/chart-area-demo.js | 118 +++++++ .../static/assets/js/demo/chart-pie-demo.js | 35 ++ .../templates/content/root-dashboard.gohtml | 299 +++++++++++++++++- .../templates/partials/app-sidebar.tmpl | 4 +- 5 files changed, 453 insertions(+), 4 deletions(-) create mode 100644 cmd/web-app/static/assets/js/demo/chart-area-demo.js create mode 100644 cmd/web-app/static/assets/js/demo/chart-pie-demo.js diff --git a/.gitignore b/.gitignore index f53e065..05da165 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ aws.lee aws.* .env_docker_compose local.env +.DS_Store diff --git a/cmd/web-app/static/assets/js/demo/chart-area-demo.js b/cmd/web-app/static/assets/js/demo/chart-area-demo.js new file mode 100644 index 0000000..0bb9c4d --- /dev/null +++ b/cmd/web-app/static/assets/js/demo/chart-area-demo.js @@ -0,0 +1,118 @@ +// Set new default font family and font color to mimic Bootstrap's default styling +Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; +Chart.defaults.global.defaultFontColor = '#858796'; + +function number_format(number, decimals, dec_point, thousands_sep) { + // * example: number_format(1234.56, 2, ',', ' '); + // * return: '1 234,56' + number = (number + '').replace(',', '').replace(' ', ''); + var n = !isFinite(+number) ? 0 : +number, + prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), + sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, + dec = (typeof dec_point === 'undefined') ? '.' : dec_point, + s = '', + toFixedFix = function(n, prec) { + var k = Math.pow(10, prec); + return '' + Math.round(n * k) / k; + }; + // Fix for IE parseFloat(0.55).toFixed(0) = 0; + s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.'); + if (s[0].length > 3) { + s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); + } + if ((s[1] || '').length < prec) { + s[1] = s[1] || ''; + s[1] += new Array(prec - s[1].length + 1).join('0'); + } + return s.join(dec); +} + +// Area Chart Example +var ctx = document.getElementById("myAreaChart"); +var myLineChart = new Chart(ctx, { + type: 'line', + data: { + labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: [{ + label: "Earnings", + lineTension: 0.3, + backgroundColor: "rgba(78, 115, 223, 0.05)", + borderColor: "rgba(78, 115, 223, 1)", + pointRadius: 3, + pointBackgroundColor: "rgba(78, 115, 223, 1)", + pointBorderColor: "rgba(78, 115, 223, 1)", + pointHoverRadius: 3, + pointHoverBackgroundColor: "rgba(78, 115, 223, 1)", + pointHoverBorderColor: "rgba(78, 115, 223, 1)", + pointHitRadius: 10, + pointBorderWidth: 2, + data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000], + }], + }, + options: { + maintainAspectRatio: false, + layout: { + padding: { + left: 10, + right: 25, + top: 25, + bottom: 0 + } + }, + scales: { + xAxes: [{ + time: { + unit: 'date' + }, + gridLines: { + display: false, + drawBorder: false + }, + ticks: { + maxTicksLimit: 7 + } + }], + yAxes: [{ + ticks: { + maxTicksLimit: 5, + padding: 10, + // Include a dollar sign in the ticks + callback: function(value, index, values) { + return '$' + number_format(value); + } + }, + gridLines: { + color: "rgb(234, 236, 244)", + zeroLineColor: "rgb(234, 236, 244)", + drawBorder: false, + borderDash: [2], + zeroLineBorderDash: [2] + } + }], + }, + legend: { + display: false + }, + tooltips: { + backgroundColor: "rgb(255,255,255)", + bodyFontColor: "#858796", + titleMarginBottom: 10, + titleFontColor: '#6e707e', + titleFontSize: 14, + borderColor: '#dddfeb', + borderWidth: 1, + xPadding: 15, + yPadding: 15, + displayColors: false, + intersect: false, + mode: 'index', + caretPadding: 10, + callbacks: { + label: function(tooltipItem, chart) { + var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || ''; + return datasetLabel + ': $' + number_format(tooltipItem.yLabel); + } + } + } + } +}); diff --git a/cmd/web-app/static/assets/js/demo/chart-pie-demo.js b/cmd/web-app/static/assets/js/demo/chart-pie-demo.js new file mode 100644 index 0000000..c393ac1 --- /dev/null +++ b/cmd/web-app/static/assets/js/demo/chart-pie-demo.js @@ -0,0 +1,35 @@ +// Set new default font family and font color to mimic Bootstrap's default styling +Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; +Chart.defaults.global.defaultFontColor = '#858796'; + +// Pie Chart Example +var ctx = document.getElementById("myPieChart"); +var myPieChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ["Direct", "Referral", "Social"], + datasets: [{ + data: [55, 30, 15], + backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'], + hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'], + hoverBorderColor: "rgba(234, 236, 244, 1)", + }], + }, + options: { + maintainAspectRatio: false, + tooltips: { + backgroundColor: "rgb(255,255,255)", + bodyFontColor: "#858796", + borderColor: '#dddfeb', + borderWidth: 1, + xPadding: 15, + yPadding: 15, + displayColors: false, + caretPadding: 10, + }, + legend: { + display: false + }, + cutoutPercentage: 80, + }, +}); diff --git a/cmd/web-app/templates/content/root-dashboard.gohtml b/cmd/web-app/templates/content/root-dashboard.gohtml index 427c4c9..f193730 100644 --- a/cmd/web-app/templates/content/root-dashboard.gohtml +++ b/cmd/web-app/templates/content/root-dashboard.gohtml @@ -10,13 +10,23 @@ -
+
-

Welcome to the web app

+

Welcome to the web app created using the SaaS Starter Kit. This bootstrapped web app includes real functionality including:

+
    +
  • Creating an Account (signup) and ability to update the account details and settings.
    • +
  • Authentication including logging in with basic role-based access of an admin and a user.
    • +
  • Users can view their own profile and update their user details.
    • +
  • Managing Users including creating new users, inviting users and updating users.
    • +
  • Managing Projects including creating a new project and updating projects.
    • +
  • Additional example components to help you build the web app for your SaS.
    • +
+ +

In addition to all the goodies you will find in the GO code, this UI is powered by Bootstrap with an open-source template. For more resources on expanding this UI, refer to the template's website SB Admin 2. While the Projects, Users and Account are real working examples, the components below on this Dashboard page are only fake UI examples.

@@ -26,7 +36,292 @@ + + +
+ + +
+
+
+
+
+
Earnings (Monthly)
+
$40,000
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
Earnings (Annual)
+
$215,000
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
Tasks
+
+
+
50%
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
Pending Requests
+
18
+
+
+ +
+
+
+
+
+
+ + + +
+ + +
+
+ +
+
Earnings Overview
+
+ +
+
Dropdown Header:
+ Action + Another action +
+ Something else here +
+
+
+ +
+
+ +
+
+
+
+ + +
+
+ +
+
Revenue Sources
+
+ +
+
Dropdown Header:
+ Action + Another action +
+ Something else here +
+
+
+ +
+
+ +
+
+ + Direct + + + Social + + + Referral + +
+
+
+
+
+ + +
+ + +
+ + +
+
+
Projects
+
+
+

Server Migration 20%

+
+
+
+

Sales Tracking 40%

+
+
+
+

Customer Database 60%

+
+
+
+

Payout Details 80%

+
+
+
+

Account Setup Complete!

+
+
+
+
+
+ + +
+
+
+
+ Primary +
#4e73df
+
+
+
+
+
+
+ Success +
#1cc88a
+
+
+
+
+
+
+ Info +
#36b9cc
+
+
+
+
+
+
+ Warning +
#f6c23e
+
+
+
+
+
+
+ Danger +
#e74a3b
+
+
+
+
+
+
+ Secondary +
#858796
+
+
+
+
+ +
+ +
+ + +
+
+
Illustrations
+
+
+
+ +
+

Add some quality, svg illustrations to your project courtesy of unDraw, a constantly updated collection of beautiful svg images that you can use completely free and without attribution!

+ Browse Illustrations on unDraw → +
+
+ + +
+
+
Development Approach
+
+
+

SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce CSS bloat and poor page performance. Custom CSS classes are used to create custom components and custom utility classes.

+

Before working with this theme, you should become familiar with the Bootstrap framework, especially the utility classes.

+
+
+ +
+
+ + + + + {{end}} {{define "js"}} + + + + + + + + {{end}} diff --git a/cmd/web-app/templates/partials/app-sidebar.tmpl b/cmd/web-app/templates/partials/app-sidebar.tmpl index 23b9c63..b840c30 100644 --- a/cmd/web-app/templates/partials/app-sidebar.tmpl +++ b/cmd/web-app/templates/partials/app-sidebar.tmpl @@ -33,7 +33,7 @@