|
|
Sponsored Content
Top Forums
Web Development
Sneak Preview: New UNIX.COM UserCP VueJS Demo
Post 303030770 by Neo on Friday 15th of February 2019 07:23:18 AM
02-15-2019
Administrator
Vue Black Dashboard Mockup v0.05
sample data from forums I created for this mockup:
Dashboard.vue (new code in red):
Very simple and crude way to get data from localStorage() into the Vue dashboard mockup:
I am now ready to pull this data live from the server MySQL DB with PHP and store the results in browser localStorage() with Javascript.
Getting close to having a full stack solution to build the dashboard
. Just call me:
Mr. Super Full Stack Web Dev Guy ... LOL
Code:
https://www.unix.com/cp/index.php
- Now loading Guests and Members chart and Discussions, Posts, Users and Errors stats badges from localStorage() created on the server on the PHP side;
sample data from forums I created for this mockup:
Code:
<script>
let online = [
{
"jan": "180",
"feb": "10",
"mar": "30",
"apr": "120",
"may": "80",
"jun": "780",
"jul": "170",
"aug": "580",
"sep": "80",
"oct": "280",
"nov": "130",
"dec": "180"
},
{
"jan": "10",
"feb": "100",
"mar": "11",
"apr": "121",
"may": "23",
"jun": "78",
"jul": "17",
"aug": "58",
"sep": "2",
"oct": "80",
"nov": "13",
"dec": "80"
},
{
"jan": "80",
"feb": "101",
"mar": "20",
"apr": "140",
"may": "60",
"jun": "80",
"jul": "70",
"aug": "50",
"sep": "0",
"oct": "28",
"nov": "30",
"dec": "80"
}
];
let summary = [
{
"threads": "220K",
"posts": "2,022K",
"users": "123K",
"errors": "2"
}
];
localStorage.setItem('online',JSON.stringify(online));
localStorage.setItem('summary',JSON.stringify(summary));
</script>Very simple and crude way to get data from localStorage() into the Vue dashboard mockup:
Code:
<script>
import LineChart from "@/components/Charts/LineChart";
import BarChart from "@/components/Charts/BarChart";
import * as chartConfigs from "@/components/Charts/config";
import TaskList from "./TaskList";
import UserTable from "./UserTable";
import CountryMapCard from "./CountryMapCard";
import StatsCard from "src/components/Cards/StatsCard";
import config from "@/config";
export default {
components: {
LineChart,
BarChart,
StatsCard,
TaskList,
CountryMapCard,
UserTable
},
data() {
return {
statsCards: [
{
title: JSON.parse(localStorage.getItem("summary"))[0].threads,
subTitle: "Discussions",
type: "warning",
icon: "tim-icons icon-chat-33",
footer: '<i class="tim-icons icon-refresh-01"></i> Update Now'
},
{
title: JSON.parse(localStorage.getItem("summary"))[0].posts,
subTitle: "Posts",
type: "primary",
icon: "tim-icons icon-shape-star",
footer: '<i class="tim-icons icon-sound-wave"></i></i> Last Research'
},
{
title: JSON.parse(localStorage.getItem("summary"))[0].users,
subTitle: "Users",
type: "info",
icon: "tim-icons icon-single-02",
footer: '<i class="tim-icons icon-trophy"></i> Customer feedback'
},
{
title: JSON.parse(localStorage.getItem("summary"))[0].errors,
subTitle: "Errors",
type: "danger",
icon: "tim-icons icon-molecule-40",
footer: '<i class="tim-icons icon-watch-time"></i> In the last hours'
}
],
bigLineChart: {
allData: [
[
JSON.parse(localStorage.getItem("online"))[0].jan,
JSON.parse(localStorage.getItem("online"))[0].feb,
JSON.parse(localStorage.getItem("online"))[0].mar,
JSON.parse(localStorage.getItem("online"))[0].apr,
JSON.parse(localStorage.getItem("online"))[0].may,
JSON.parse(localStorage.getItem("online"))[0].jun,
JSON.parse(localStorage.getItem("online"))[0].jul,
JSON.parse(localStorage.getItem("online"))[0].aug,
JSON.parse(localStorage.getItem("online"))[0].sep,
JSON.parse(localStorage.getItem("online"))[0].oct,
JSON.parse(localStorage.getItem("online"))[0].nov,
JSON.parse(localStorage.getItem("online"))[0].dec
],
[
JSON.parse(localStorage.getItem("online"))[1].jan,
JSON.parse(localStorage.getItem("online"))[1].feb,
JSON.parse(localStorage.getItem("online"))[1].mar,
JSON.parse(localStorage.getItem("online"))[1].apr,
JSON.parse(localStorage.getItem("online"))[1].may,
JSON.parse(localStorage.getItem("online"))[1].jun,
JSON.parse(localStorage.getItem("online"))[1].jul,
JSON.parse(localStorage.getItem("online"))[1].aug,
JSON.parse(localStorage.getItem("online"))[1].sep,
JSON.parse(localStorage.getItem("online"))[1].oct,
JSON.parse(localStorage.getItem("online"))[1].nov,
JSON.parse(localStorage.getItem("online"))[1].dec
],
[
JSON.parse(localStorage.getItem("online"))[2].jan,
JSON.parse(localStorage.getItem("online"))[2].feb,
JSON.parse(localStorage.getItem("online"))[2].mar,
JSON.parse(localStorage.getItem("online"))[2].apr,
JSON.parse(localStorage.getItem("online"))[2].may,
JSON.parse(localStorage.getItem("online"))[2].jun,
JSON.parse(localStorage.getItem("online"))[2].jul,
JSON.parse(localStorage.getItem("online"))[2].aug,
JSON.parse(localStorage.getItem("online"))[2].sep,
JSON.parse(localStorage.getItem("online"))[2].oct,
JSON.parse(localStorage.getItem("online"))[2].nov,
JSON.parse(localStorage.getItem("online"))[2].dec
]
],
activeIndex: 0,
chartData: null,
extraOptions: chartConfigs.purpleChartOptions,
gradientColors: config.colors.primaryGradient,
gradientStops: [1, 0.4, 0],
categories: []
},
purpleLineChart: {
extraOptions: chartConfigs.purpleChartOptions,
chartData: {
labels: ["JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [
{
label: "Data",
fill: true,
borderColor: config.colors.primary,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: config.colors.primary,
pointBorderColor: "rgba(255,255,255,0)",
pointHoverBackgroundColor: config.colors.primary,
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: [80, 100, 70, 80, 120, 80]
}
]
},
gradientColors: config.colors.primaryGradient,
gradientStops: [1, 0.2, 0]
},
greenLineChart: {
extraOptions: chartConfigs.greenChartOptions,
chartData: {
labels: ["JUL", "AUG", "SEP", "OCT", "NOV"],
datasets: [
{
label: "My First dataset",
fill: true,
borderColor: config.colors.danger,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: config.colors.danger,
pointBorderColor: "rgba(255,255,255,0)",
pointHoverBackgroundColor: config.colors.danger,
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: [90, 27, 60, 12, 80]
}
]
},
gradientColors: [
"rgba(66,134,121,0.15)",
"rgba(66,134,121,0.0)",
"rgba(66,134,121,0)"
],
gradientStops: [1, 0.4, 0]
},
blueBarChart: {
extraOptions: chartConfigs.barChartOptions,
chartData: {
labels: ["USA", "GER", "AUS", "UK", "RO", "BR"],
datasets: [
{
label: "Countries",
fill: true,
borderColor: config.colors.info,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
data: [53, 20, 10, 80, 100, 45]
}
]
},
gradientColors: config.colors.primaryGradient,
gradientStops: [1, 0.4, 0]
}
};
},
computed: {
enableRTL() {
return this.$route.query.enableRTL;
},
isRTL() {
return this.$rtl.isRTL;
},
bigLineChartCategories() {
return [
{ name: "Guests", icon: "tim-icons icon-single-02 text-primary" },
{ name: "Members", icon: "tim-icons icon-gift-2 text-primary" },
{ name: "Staff", icon: "tim-icons icon-tap-02 text-primary" }
];
}
},
methods: {
initBigChart(index) {
let chartData = {
datasets: [
{
fill: true,
borderColor: config.colors.primary,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: config.colors.primary,
pointBorderColor: "rgba(255,255,255,0)",
pointHoverBackgroundColor: config.colors.primary,
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: this.bigLineChart.allData[index]
}
],
labels: [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
]
};
this.$refs.bigChart.updateGradients(chartData);
this.bigLineChart.chartData = chartData;
this.bigLineChart.activeIndex = index;
}
},
mounted() {
this.i18n = this.$i18n;
if (this.enableRTL) {
this.i18n.locale = "ar";
this.$rtl.enableRTL();
}
this.initBigChart(0);
},
beforeDestroy() {
if (this.$rtl.isRTL) {
this.i18n.locale = "en";
this.$rtl.disableRTL();
}
}
};
</script>Getting close to having a full stack solution to build the dashboard
. Just call me:Mr. Super Full Stack Web Dev Guy ... LOL
This User Gave Thanks to Neo For This Post:
|
|
6 More Discussions You Might Find Interesting
1. UNIX for Dummies Questions & Answers
I'm trying to setup a test environment to test upgrading to Solaris 8 or 9. Though when I go to install the demo version of Sun1 (forte/sun workshop as named before) it'll still ask for a 20 hexidecminal password for just a demo. huh?
Ok so I added a 20 character thing in there it passed... (2 Replies)
Discussion started by: merlin
2 Replies
2. UNIX for Dummies Questions & Answers
I have been thinking about another shell scripting project using the Arduino Diecimila board.
I was going to make a kids level slow 8 channel Logic Analyser.
I thought about using the termiinal esc code graphics characters.
This is the test code using said terminal escape codes. I have only... (2 Replies)
Discussion started by: wisecracker
2 Replies
3. What is on Your Mind?
Was working on Vue.js and stumbled upon this beautiful Vue project by Kadin Zhang
Periodicity is a dynamic periodic table built with Vue.js that animates and graphs data to aid the visualization of chemical concepts.
The code is available on GitHub (2 Replies)
Discussion started by: Neo
2 Replies
4. What is on Your Mind?
Regarding the latest version of the UserCP prototype (version 0.63) I have made a lot of major changes, including
Added a "Posts Timeline" table for the recent posts, complimenting the non-table version earlier, which has been moved off the main menu (link at the bottom of the table).
Added a... (4 Replies)
Discussion started by: Neo
4 Replies
5. What is on Your Mind?
Update!
UserCP Screeching Frog 0.7485
Created a new page for uploaded a profile picture (profile pictures are different than avatar pictures).
https://www.unix.com/usercp/#/settings/other
https://www.unix.com/members/1-albums225-picture1158.png
... (0 Replies)
Discussion started by: Neo
0 Replies
6. What is on Your Mind?
Here is my second live video screencast (in my life, using Camtasia) with voice for the new usercp:
Overview of the Vue.js UserCP @UNIX.com
Shout outs to Don Cragun, Corona688, Rudi, Wolf, Made in Germany, stomp, Ravinder, Creative Tim, PubNub and others in the video. Thanks.
If you are... (1 Reply)
Discussion started by: Neo
1 Replies